fix sidebar locale conf and refactor user login

ui/artalk-sidebar/src/App.vue

@@ -2,59 +2,71 @@
 import { storeToRefs } from 'pinia'
 import { useNavStore } from './stores/nav'
 import { useUserStore } from './stores/user'
-import global, { bootParams, createArtalkInstance } from './global'
-import Artalk from 'artalk'
+import type Artalk from 'artalk'
+import { getArtalk, bootParams } from './global'
 
 const nav = useNavStore()
 const user = useUserStore()
 const route = useRoute()
 const router = useRouter()
 const { scrollableArea } = storeToRefs(nav)
-const i18n = useI18n()
+
+const artalkLoaded = ref(false)
 
 onBeforeMount(() => {
-  // 获取语言
-  if (!global.getBootParams().locale) {
-    global.getArtalk().ctx.getApi().conf.conf().then(res => {
-      if (typeof res.data.frontend_conf?.locale === 'string') {
-        i18n.locale.value = res.data.frontend_conf.locale
-      }
-    })
+  const artalk = getArtalk()
+  if (!artalk) {
+    throw new Error('Artalk instance not initialized')
   }
 
+  artalk.on('conf-loaded', () => {
+    if (artalkLoaded.value) return
+    artalkLoaded.value = true
+
+    syncArtalk(artalk)
+  })
+})
+
+function syncArtalk(artalk: Artalk) {
+  // access from open sidebar or directly by url
   if (bootParams.user?.email) {
-    global.getArtalk().ctx.get('user').update(bootParams.user)
+    // sync user from sidebar to artalk
+    artalk.ctx.get('user').update(bootParams.user)
   } else {
+    // sync user from artalk to sidebar
     try {
-      global.importUserDataFromArtalkInstance()
-    } catch (e) {
-      // console.error(e)
-      router.replace('/login')
+      useUserStore().sync(artalk)
+    } catch {
+      nextTick(() => {
+        router.replace('/login')
+      })
       return
     }
   }
 
   // 验证登录身份有效性
-  const artalkUser = global.getArtalk().ctx.get('user')
+  const artalkUser = artalk.ctx.get('user')
   const artalkUserData = artalkUser.getData()
 
-  global.getArtalk().ctx.getApi().user.getUserStatus({
+  artalk.ctx.getApi().user.getUserStatus({
     email: artalkUserData.email,
     name: artalkUserData.nick
   }).then(res => {
     if (res.data.is_admin && !res.data.is_login) {
       artalkUser.logout()
       user.logout()
-      router.replace('/login')
+      nextTick(() => {
+        router.replace('/login')
+      })
     } else {
       // 将全部通知标记为已读
-      global.getArtalk().ctx.getApi().notifies.markAllNotifyRead({
+      artalk.ctx.getApi().notifies.markAllNotifyRead({
         email: artalkUserData.email,
         name: artalkUserData.nick
       })
     }
   })
-})
+}
 
 const darkMode = ref(bootParams.darkMode)
 
@@ -68,7 +80,7 @@ const darkMode = ref(bootParams.darkMode)
 </script>
 
 <template>
-  <div class="app-wrap artalk atk-sidebar" :class="{ 'atk-dark-mode': darkMode }">
+  <div v-if="artalkLoaded" class="app-wrap artalk atk-sidebar" :class="{ 'atk-dark-mode': darkMode }">
     <Header />
     <Tab />
 

ui/artalk-sidebar/src/global.ts

@@ -1,12 +1,20 @@
 import Artalk from 'artalk'
 import type { ArtalkType } from 'artalk'
-import { useUserStore } from './stores/user'
 
 export let artalk: Artalk|null = null
 
+export function setArtalk(artalkInstance: Artalk) {
+  artalk = artalkInstance
+}
+
+export function getArtalk() {
+  return artalk
+}
+
 // 启动参数
 export const bootParams = getBootParams()
-export function getBootParams() {
+
+function getBootParams() {
   const p = new URLSearchParams(document.location.search)
 
   return {
@@ -16,11 +24,10 @@ export function getBootParams() {
     view:       p.get('view') || '',
     viewParams: <any>null,
     darkMode:   p.get('darkMode') === '1',
-    locale:     p.get('locale') || '',
   }
 }
 
-export function createArtalkInstance() {
+export function initArtalk() {
   const artalkEl = document.createElement('div')
   artalkEl.style.display = 'none'
   document.body.append(artalkEl)
@@ -44,27 +51,3 @@ export function createArtalkInstance() {
     }
   })
 }
-
-export function importUserDataFromArtalkInstance() {
-  if (!artalk) throw Error("the artalk instance is not exist")
-  if (!artalk.ctx.get('user').getData().email) throw Error("the user data in artalk instance is invalid")
-
-  const userData = artalk.ctx.get('user').getData()
-  useUserStore().$patch((state) => {
-    state.site = ''
-    state.name = userData.nick
-    state.email = userData.email
-    state.isAdmin = userData.isAdmin
-    state.token = userData.token
-  })
-}
-
-export default {
-  createArtalkInstance,
-  getArtalk: () => artalk!,
-  setArtalk: (artalkInstance: Artalk) => {
-    artalk = artalkInstance
-  },
-  getBootParams: () => bootParams,
-  importUserDataFromArtalkInstance,
-}

ui/artalk-sidebar/src/main.ts

@@ -6,13 +6,34 @@ import messages from './i18n/messages'
 import 'artalk/dist/Artalk.css'
 import './style.scss'
 import App from './App.vue'
-import global, { createArtalkInstance, bootParams, getBootParams } from './global'
+import { setArtalk, initArtalk } from './global'
+import Artalk from 'artalk'
 
-// 初始化 Artalk
-global.setArtalk(createArtalkInstance())
+// i18n
+const i18n = createI18n({
+  legacy: false, // use i18n in Composition API
+  locale:  'en',
+  fallbackLocale: 'en',
+  messages
+})
+
+// Artalk extension
+Artalk.use((ctx) => {
+  // Sync config from artalk instance to sidebar
+  ctx.on('conf-loaded', (conf) => {
+    console.log(conf.locale)
+    if (typeof conf.locale === 'string' && conf.locale !== 'auto')
+      i18n.global.locale.value = conf.locale as any
+  })
+})
 
 const app = createApp(App)
 
+app.use(i18n)
+
+// Init Artalk
+setArtalk(initArtalk())
+
 // router
 const router = createRouter({
   history: createWebHashHistory(),
@@ -20,16 +41,6 @@ const router = createRouter({
 
 app.use(router)
 
-// i18n
-const i18n = createI18n({
-  legacy: false, // use i18n in Composition API
-  locale: getBootParams().locale || 'en',
-  fallbackLocale: 'en',
-  messages
-})
-
-app.use(i18n)
-
 // pinia
 const pinia = createPinia()
 app.use(pinia)

ui/artalk-sidebar/src/pages/login.vue

@@ -7,7 +7,8 @@
 </route>
 
 <script setup lang="ts">
-import global, { bootParams, createArtalkInstance } from '../global'
+import { getArtalk } from '../global'
+import { useUserStore } from '../stores/user'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -22,7 +23,7 @@ let loginErr = ref('')
 let userSelector = ref<string[]|null>(null)
 
 onMounted(() => {
-  global.getArtalk()!.ctx.getApi().version.getVersion().then((res) => {
+  getArtalk()!.ctx.getApi().version.getVersion().then((res) => {
     version.value = res.data.version
     buildHash.value = res.data.commit_hash
   })
@@ -34,20 +35,24 @@ function onFocus() {
 
 function login(username?: string) {
   loginErr.value = ''
-  global.getArtalk()!.ctx.getApi().user.login({
+
+  const artalk = getArtalk()
+  if (!artalk) throw new Error('Artalk instance not initialized')
+
+  artalk.ctx.getApi().user.login({
     name: username || '',
     email: userForm.value.email,
     password: userForm.value.password
   }).then((res) => {
     const user = res.data.user
-    global.getArtalk()!.ctx.get('user').update({
+    artalk.ctx.get('user').update({
       nick: user.name,
       email: user.email,
       link: user.link,
       isAdmin: user.is_admin,
       token: res.data.token,
     })
-    global.importUserDataFromArtalkInstance()
+    useUserStore().sync(artalk)
     router.replace('/')
   }).catch((e) => {
     if (e.data?.need_name_select) {

ui/artalk-sidebar/src/stores/user.ts

@@ -1,20 +1,33 @@
 import { defineStore } from 'pinia'
 import { bootParams } from '../global'
+import type Artalk from 'artalk'
 
-export const useUserStore = defineStore('user', () => {
-  const site = ref(bootParams.site || '')
-  const name = ref(bootParams.user.nick || '')
-  const email = ref(bootParams.user.email || '')
-  const isAdmin = ref(bootParams.user.isAdmin || false)
-  const token = ref(bootParams.user.token || '')
-
-  const logout = () => {
-    site.value = ''
-    name.value = ''
-    email.value = ''
-    isAdmin.value = false
-    token.value = ''
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    site: bootParams.site || '',
+    name: bootParams.user.nick || '',
+    email: bootParams.user.email || '',
+    isAdmin: bootParams.user.isAdmin || false,
+    token: bootParams.user.token || '',
+  }),
+  actions: {
+    logout() {
+      this.site = ''
+      this.name = ''
+      this.email = ''
+      this.isAdmin = false
+      this.token = ''
+    },
+    sync(artalk: Artalk) {
+      const user = artalk.ctx.get('user')
+      if (!user.checkHasBasicUserInfo()) throw new Error('User is not logged in')
+      const userData = user.getData()
+      this.site = ''
+      this.name = userData.nick
+      this.email = userData.email
+      this.isAdmin = userData.isAdmin
+      this.token = userData.token
+    }
   }
-
-  return { site, name, email, isAdmin, token, logout }
 })
+