From d0d50ac9d3215f247f749585a7831a1d6027c280 Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Thu, 29 Aug 2024 11:57:32 +0800
Subject: [PATCH] perf(ui/sidebar): optimize setup process and i18n lazy load

---
 docs/docs/guide/frontend/i18n.md              |   1 +
 ui/artalk-sidebar/src/App.vue                 |  86 +-----
 ui/artalk-sidebar/src/artalk.ts               |  84 ++++++
 ui/artalk-sidebar/src/global.ts               |  32 +--
 ui/artalk-sidebar/src/i18n-en.ts              |  99 +++++++
 ui/artalk-sidebar/src/i18n.ts                 |  37 +++
 ui/artalk-sidebar/src/i18n/messages.ts        | 257 ------------------
 ui/artalk-sidebar/src/i18n/zh-CN.ts           |  97 +++++++
 ui/artalk-sidebar/src/lib/promise-polyfill.ts |   9 +
 ui/artalk-sidebar/src/main.ts                 |  79 +++---
 ui/artalk-sidebar/src/vue-i18n.d.ts           |   7 +
 ui/artalk-sidebar/tsconfig.json               |   2 +-
 12 files changed, 390 insertions(+), 400 deletions(-)
 create mode 100644 ui/artalk-sidebar/src/artalk.ts
 create mode 100644 ui/artalk-sidebar/src/i18n-en.ts
 create mode 100644 ui/artalk-sidebar/src/i18n.ts
 delete mode 100644 ui/artalk-sidebar/src/i18n/messages.ts
 create mode 100644 ui/artalk-sidebar/src/i18n/zh-CN.ts
 create mode 100644 ui/artalk-sidebar/src/lib/promise-polyfill.ts
 create mode 100644 ui/artalk-sidebar/src/vue-i18n.d.ts

diff --git a/docs/docs/guide/frontend/i18n.md b/docs/docs/guide/frontend/i18n.md
index 85a60aad..f9ae9f8b 100644
--- a/docs/docs/guide/frontend/i18n.md
+++ b/docs/docs/guide/frontend/i18n.md
@@ -28,6 +28,7 @@ locale: zh-CN
 | -------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
 | 后端程序 | [/i18n/[LANG].yml](https://github.com/ArtalkJS/Artalk/tree/master/i18n)                            | [zh-CN.yml](https://github.com/ArtalkJS/Artalk/blob/master/i18n/zh-CN.yml)                               |
 | 前端界面 | [/ui/artalk/src/i18n/[LANG].ts](https://github.com/ArtalkJS/Artalk/tree/master/ui/artalk/src/i18n) | [zh-CN.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk/src/i18n/zh-CN.ts)                   |
+| 后台界面 | [/ui/artalk-sidebar/src/i18n/[LANG].ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk-sidebar/src/i18n) | [zh-CN.ts](https://github.com/ArtalkJS/Artalk/blob/master/ui/artalk-sidebar/src/i18n/zh-CN.ts) |
 | 配置文件 | [/conf/artalk.example.[LANG].yml](https://github.com/ArtalkJS/Artalk/tree/master/conf)             | [artalk.example.zh-CN.yml](https://github.com/ArtalkJS/Artalk/blob/master/conf/artalk.example.zh-CN.yml) |
 | 说明文档 | [/docs/[LANG]/\*\*/\*.md](https://github.com/ArtalkJS/Artalk/tree/master/docs)                      | [/docs/\*\*/\*.md](https://github.com/ArtalkJS/Artalk/tree/master/docs)                                   |
 
diff --git a/ui/artalk-sidebar/src/App.vue b/ui/artalk-sidebar/src/App.vue
index 38c30f13..ba1b5220 100644
--- a/ui/artalk-sidebar/src/App.vue
+++ b/ui/artalk-sidebar/src/App.vue
@@ -1,87 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import type Artalk from 'artalk'
 import { useNavStore } from './stores/nav'
-import { useUserStore } from './stores/user'
-import { getArtalk, bootParams } from './global'
+import { bootParams } from './global'
 
 const nav = useNavStore()
-const user = useUserStore()
-const route = useRoute()
-const router = useRouter()
 const { scrollableArea } = storeToRefs(nav)
 
-const artalkLoaded = ref(false)
-
-onBeforeMount(() => {
-  const artalk = getArtalk()
-  if (!artalk) {
-    throw new Error('Artalk instance not initialized')
-  }
-
-  artalk.on('mounted', () => {
-    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) {
-    // sync user from sidebar to artalk
-    artalk.ctx.get('user').update(bootParams.user)
-  } else {
-    // sync user from artalk to sidebar
-    try {
-      useUserStore().sync()
-    } catch {
-      nextTick(() => {
-        router.replace('/login')
-      })
-      return
-    }
-  }
-
-  // 验证登录身份有效性
-  const artalkUser = artalk.ctx.get('user')
-  const artalkUserData = artalkUser.getData()
-
-  const logout = () => {
-    user.logout()
-    nextTick(() => {
-      router.replace('/login')
-    })
-  }
-
-  // Remove login failed dialog if sidebar
-  artalk.ctx.getApiHandlers().remove('need_login')
-  artalk.ctx.getApiHandlers().add('need_login', async () => {
-    logout()
-    throw new Error('Need login')
-  })
-
-  // Check user status
-  artalk.ctx
-    .getApi()
-    .user.getUserStatus({
-      email: artalkUserData.email,
-      name: artalkUserData.name,
-    })
-    .then((res) => {
-      if (res.data.is_admin && !res.data.is_login) {
-        logout()
-      } else {
-        // 将全部通知标记为已读
-        artalk.ctx.getApi().notifies.markAllNotifyRead({
-          email: artalkUserData.email,
-          name: artalkUserData.name,
-        })
-      }
-    })
-}
-
 const darkMode = ref(bootParams.darkMode)
 
 ;(function initDarkModeWatchMedia() {
@@ -94,11 +18,7 @@ const darkMode = ref(bootParams.darkMode)
 </script>
 
 <template>
-  <div
-    v-if="artalkLoaded"
-    class="app-wrap artalk atk-sidebar"
-    :class="{ 'atk-dark-mode': darkMode }"
-  >
+  <div class="app-wrap artalk atk-sidebar" :class="{ 'atk-dark-mode': darkMode }">
     <AppHeader />
     <AppNavigation />
 
@@ -137,7 +57,7 @@ $sidebarWidth: 280px;
     }
   }
 
-  // 分页条占位
+  // The placeholder area for the pagination bar
   :deep(.atk-pagination-wrap) {
     z-index: 200;
     position: fixed;
diff --git a/ui/artalk-sidebar/src/artalk.ts b/ui/artalk-sidebar/src/artalk.ts
new file mode 100644
index 00000000..b464c491
--- /dev/null
+++ b/ui/artalk-sidebar/src/artalk.ts
@@ -0,0 +1,84 @@
+import Artalk from 'artalk'
+import { Router } from 'vue-router'
+import { bootParams } from './global'
+import { useUserStore } from './stores/user'
+
+export function setupArtalk() {
+  // Create virtual element for Artalk
+  const artalkEl = document.createElement('div')
+  artalkEl.style.display = 'none'
+  document.body.append(artalkEl)
+
+  // Init Artalk
+  return Artalk.init({
+    el: artalkEl,
+    server: '../',
+    pageKey: bootParams.pageKey,
+    site: bootParams.site,
+    darkMode: bootParams.darkMode,
+    useBackendConf: true,
+    pvAdd: false,
+    remoteConfModifier: (conf) => {
+      conf.noComment = `<div class="atk-sidebar-no-content"></div>`
+      conf.flatMode = true
+      conf.pagination = {
+        pageSize: 20,
+        readMore: false,
+        autoLoad: false,
+      }
+      conf.listUnreadHighlight = true
+    },
+  })
+}
+
+export async function syncArtalkUser(artalk: Artalk, router: Router) {
+  const user = useUserStore()
+  const logout = () => {
+    user.logout()
+    nextTick(() => {
+      router.replace('/login')
+    })
+  }
+
+  // Access from open sidebar or directly by url
+  if (bootParams.user?.email) {
+    // sync user from sidebar to artalk
+    artalk.ctx.get('user').update(bootParams.user)
+  } else {
+    // Sync user from artalk to sidebar
+    try {
+      user.sync()
+    } catch {
+      logout()
+      return
+    }
+  }
+
+  // Async check user status (no await)
+  checkUser(artalk, logout)
+}
+
+function checkUser(artalk: Artalk, logout: () => void) {
+  // Get user info from artalk
+  const { name, email } = artalk.ctx.get('user').getData()
+
+  // Remove login failed dialog if sidebar
+  artalk.ctx.getApiHandlers().remove('need_login')
+  artalk.ctx.getApiHandlers().add('need_login', async () => {
+    logout()
+    throw new Error('Need login')
+  })
+
+  // Check user status
+  artalk.ctx
+    .getApi()
+    .user.getUserStatus({ email, name })
+    .then((res) => {
+      if (res.data.is_admin && !res.data.is_login) {
+        logout()
+      } else {
+        // Mark all notifications as read
+        artalk.ctx.getApi().notifies.markAllNotifyRead({ email, name })
+      }
+    })
+}
diff --git a/ui/artalk-sidebar/src/global.ts b/ui/artalk-sidebar/src/global.ts
index 312b2a54..a8927d21 100644
--- a/ui/artalk-sidebar/src/global.ts
+++ b/ui/artalk-sidebar/src/global.ts
@@ -11,7 +11,11 @@ export function getArtalk() {
   return artalk
 }
 
-// 启动参数
+/**
+ * Boot params from URL search params
+ *
+ * TODO: Refactor to a singleton store
+ */
 export const bootParams = getBootParams()
 
 function getBootParams() {
@@ -43,32 +47,6 @@ function getBootParams() {
   }
 }
 
-export function initArtalk() {
-  const artalkEl = document.createElement('div')
-  artalkEl.style.display = 'none'
-  document.body.append(artalkEl)
-
-  return Artalk.init({
-    el: artalkEl,
-    server: '../',
-    pageKey: bootParams.pageKey,
-    site: bootParams.site,
-    darkMode: bootParams.darkMode,
-    useBackendConf: true,
-    pvAdd: false,
-    remoteConfModifier: (conf) => {
-      conf.noComment = `<div class="atk-sidebar-no-content"></div>` // TODO i18n t('noComment')
-      conf.flatMode = true
-      conf.pagination = {
-        pageSize: 20,
-        readMore: false,
-        autoLoad: false,
-      }
-      conf.listUnreadHighlight = true
-    },
-  })
-}
-
 export function isOpenFromSidebar() {
   return !!bootParams.user?.email
 }
diff --git a/ui/artalk-sidebar/src/i18n-en.ts b/ui/artalk-sidebar/src/i18n-en.ts
new file mode 100644
index 00000000..59dd604d
--- /dev/null
+++ b/ui/artalk-sidebar/src/i18n-en.ts
@@ -0,0 +1,99 @@
+export const en = {
+  ctrlCenter: 'Admin',
+  msgCenter: 'Messages',
+  noContent: 'No Content',
+  searchHint: 'Search by keywords...',
+  allSites: 'All Sites',
+  siteManage: 'Site Management',
+  comment: 'Comment',
+  page: 'Page',
+  user: 'User',
+  site: 'Site',
+  transfer: 'Transfer',
+  settings: 'Settings',
+  all: 'All',
+  pending: 'Pending',
+  personal: 'Personal',
+  mentions: 'Mentions',
+  mine: 'Mine',
+  admin: 'Admin',
+  create: 'Create',
+  import: 'Import',
+  export: 'Export',
+  settingSaved: 'Setting saved',
+  settingSaveFailed: 'Setting save failed',
+  settingNotice: 'Note: Some config options may require a manual reboot to take effect.',
+  apply: 'Apply',
+  updateComplete: 'Update complete',
+  updateReady: 'Ready to update...',
+  opFailed: 'Operation failed',
+  updateTitle: 'Fetch Title',
+  uploading: 'Uploading',
+  cancel: 'Cancel',
+  back: 'Back',
+  cacheClear: 'Cache Clear',
+  cacheWarm: 'Cache Warm',
+  editTitle: 'Edit Title',
+  switchKey: 'Switch Key',
+  commentAllowAll: 'Anyone Comment',
+  commentOnlyAdmin: 'Admin Comment Only',
+  config: 'Config',
+  envVarControlHint: 'Referenced by the environment variable {key}',
+  userAdminHint: 'Admin user',
+  userInConfHint: 'This user is defined in config file',
+  edit: 'Edit',
+  delete: 'Delete',
+  siteCount: 'Total {count} Sites',
+  createSite: 'Create Site',
+  siteName: 'Site Name',
+  siteUrls: 'Site URLs',
+  multiSepHint: 'multiple separated by commas',
+  add: 'Add',
+  rename: 'Rename',
+  inputHint: 'Input text...',
+  userCreate: 'Create User',
+  userEdit: 'Edit User',
+  userInConfCannotEditHint:
+    'Cannot edit user in config file, please modify the config file manually',
+  userDeleteConfirm:
+    'This operation will delete all comments of user: "{name}" email: "{email}", including the reply comments under his comments. Continue?',
+  userDeleteManuallyHint:
+    'User has been deleted from the database, please manually edit the config file and delete the user',
+  pageDeleteConfirm:
+    'This operation will delete the page: "{title}" and all data under it. Continue?',
+  siteDeleteConfirm:
+    'This operation will delete the site: "{name}" and all data under it. Continue?',
+  siteNameInputHint: 'Please enter the site name',
+  comments: 'Comments',
+  last: 'Last',
+  show: 'Show',
+  username: 'Username',
+  email: 'Email',
+  link: 'Link',
+  badgeText: 'Badge Text',
+  badgeColor: 'Badge Color',
+  role: 'Role',
+  normal: 'Normal',
+  password: 'Password',
+  passwordEmptyHint: 'leave blank not change your password',
+  emailNotify: 'Email notification',
+  enabled: 'Enabled',
+  disabled: 'Disabled',
+  save: 'Save',
+  dataFile: 'Data File',
+  artransfer: 'Artransfer',
+  targetSiteName: 'Target Site Name',
+  targetSiteURL: 'Target Site URL',
+  payload: 'Payload',
+  optional: 'Optional',
+  uploadReadyToImport: 'File uploaded and is ready for import',
+  artransferToolHint: 'Use the {link} to convert data to Artrans format.',
+  moreDetails: 'More details',
+  loginFailure: 'Login failure',
+  login: 'Login',
+  logout: 'Logout',
+  logoutConfirm: 'Are you sure you want to log out?',
+  loginSelectHint: 'Please select the account you wish to log into:',
+}
+
+export default en
diff --git a/ui/artalk-sidebar/src/i18n.ts b/ui/artalk-sidebar/src/i18n.ts
new file mode 100644
index 00000000..d6dacb82
--- /dev/null
+++ b/ui/artalk-sidebar/src/i18n.ts
@@ -0,0 +1,37 @@
+import { createI18n, type I18n, type Locale } from 'vue-i18n'
+import { en } from './i18n-en'
+
+export type MessageSchema = typeof en
+
+export function setupI18n() {
+  const i18n = createI18n({
+    legacy: false, // use i18n in Composition API
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: { en } as any,
+  })
+
+  const setLocale = async (value: string) => {
+    await loadLocaleMessages(i18n, value)
+    i18n.global.locale.value = value
+  }
+
+  return { i18n, setLocale }
+}
+
+export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
+  if (i18n.global.availableLocales.includes(locale)) return
+
+  // Load locale messages with dynamic import
+  // @see https://vitejs.dev/guide/features#dynamic-import
+  const messages = await import(`./i18n/${locale}.ts`)
+    .then((r: any) => r.default || r)
+    .catch(() => {
+      console.error(`Failed to load locale messages for "${locale}"`)
+      return
+    })
+
+  // Set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages)
+  return nextTick()
+}
diff --git a/ui/artalk-sidebar/src/i18n/messages.ts b/ui/artalk-sidebar/src/i18n/messages.ts
deleted file mode 100644
index e5729691..00000000
--- a/ui/artalk-sidebar/src/i18n/messages.ts
+++ /dev/null
@@ -1,257 +0,0 @@
-const en = {
-  ctrlCenter: 'Admin',
-  msgCenter: 'Messages',
-  noContent: 'No Content',
-  searchHint: 'Search by keywords...',
-  allSites: 'All Sites',
-  siteManage: 'Site Management',
-  comment: 'Comment',
-  page: 'Page',
-  user: 'User',
-  site: 'Site',
-  transfer: 'Transfer',
-  settings: 'Settings',
-  all: 'All',
-  pending: 'Pending',
-  personal: 'Personal',
-  mentions: 'Mentions',
-  mine: 'Mine',
-  admin: 'Admin',
-  create: 'Create',
-  import: 'Import',
-  export: 'Export',
-  settingSaved: 'Setting saved',
-  settingSaveFailed: 'Setting save failed',
-  settingNotice: 'Note: Some config options may require a manual reboot to take effect.',
-  apply: 'Apply',
-  updateComplete: 'Update complete',
-  updateReady: 'Ready to update...',
-  opFailed: 'Operation failed',
-  updateTitle: 'Fetch Title',
-  cacheClear: 'Cache Clear',
-  cacheWarm: 'Cache Warm',
-  editTitle: 'Edit Title',
-  switchKey: 'Switch Key',
-  commentAllowAll: 'Anyone Comment',
-  commentOnlyAdmin: 'Admin Comment Only',
-  config: 'Config',
-  envVarControlHint: 'Referenced by the environment variable {key}',
-  userAdminHint: 'Admin user',
-  userInConfHint: 'This user is defined in config file',
-  edit: 'Edit',
-  delete: 'Delete',
-  siteCount: 'Total {count} Sites',
-  createSite: 'Create Site',
-  siteName: 'Site Name',
-  siteUrls: 'Site URLs',
-  multiSepHint: 'multiple separated by commas',
-  add: 'Add',
-  rename: 'Rename',
-  inputHint: 'Input text...',
-  userCreate: 'Create User',
-  userEdit: 'Edit User',
-  comments: 'Comments',
-  last: 'Last',
-  show: 'Show',
-  username: 'Username',
-  email: 'Email',
-  link: 'Link',
-  badgeText: 'Badge Text',
-  badgeColor: 'Badge Color',
-  role: 'Role',
-  normal: 'Normal',
-  password: 'Password',
-  passwordEmptyHint: 'leave blank not change your password',
-  emailNotify: 'Email notification',
-  enabled: 'Enabled',
-  disabled: 'Disabled',
-  save: 'Save',
-  dataFile: 'Data File',
-  artransfer: 'Artransfer',
-  targetSiteName: 'Target Site Name',
-  targetSiteURL: 'Target Site URL',
-  payload: 'Payload',
-  optional: 'Optional',
-  uploadReadyToImport: 'File uploaded and is ready for import',
-  artransferToolHint: 'Use the {link} to convert data to Artrans format.',
-  moreDetails: 'More details',
-  loginFailure: 'Login failure',
-  login: 'Login',
-  logout: 'Logout',
-  logoutConfirm: 'Are you sure you want to log out?',
-  loginSelectHint: 'Please select the account you wish to log into:',
-}
-
-const zhCN: typeof en = {
-  ctrlCenter: '控制中心',
-  msgCenter: '通知中心',
-  noContent: '无内容',
-  searchHint: '搜索关键字...',
-  allSites: '所有站点',
-  siteManage: '站点管理',
-  comment: '评论',
-  page: '页面',
-  user: '用户',
-  site: '站点',
-  transfer: '迁移',
-  settings: '设置',
-  all: '全部',
-  pending: '待审',
-  personal: '个人',
-  mentions: '提及',
-  mine: '我的',
-  admin: '管理员',
-  create: '新增',
-  import: '导入',
-  export: '导出',
-  settingSaved: '配置已保存',
-  settingSaveFailed: '配置保存失败',
-  settingNotice: '注：某些配置项可能需手动重启才能生效',
-  apply: '应用',
-  updateComplete: '更新完毕',
-  updateReady: '开始更新...',
-  opFailed: '操作失败',
-  updateTitle: '更新标题',
-  cacheClear: '缓存清除',
-  cacheWarm: '缓存预热',
-  editTitle: '标题修改',
-  switchKey: 'KEY 变更',
-  commentAllowAll: '所有人可评',
-  commentOnlyAdmin: '仅管理员可评',
-  config: '配置文件',
-  envVarControlHint: '由环境变量 {key} 控制',
-  userAdminHint: '该用户具有管理员权限',
-  userInConfHint: '该用户存在于配置文件中',
-  edit: '编辑',
-  delete: '删除',
-  siteCount: '共 {count} 个站点',
-  createSite: '新增站点',
-  siteName: '站点名称',
-  siteUrls: '站点 URLs',
-  multiSepHint: '多个用逗号隔开',
-  add: '新增',
-  rename: '重命名',
-  inputHint: '输入内容...',
-  userCreate: '用户创建',
-  userEdit: '用户编辑',
-  comments: '评论',
-  last: '近期',
-  show: '展开',
-  username: '用户名',
-  email: '邮箱',
-  link: '链接',
-  badgeText: '徽章文字',
-  badgeColor: '徽章颜色',
-  role: '身份角色',
-  normal: '普通',
-  password: '密码',
-  passwordEmptyHint: '留空不修改密码',
-  emailNotify: '邮件通知',
-  enabled: '开启',
-  disabled: '关闭',
-  save: '保存',
-  dataFile: '数据文件',
-  artransfer: '转换工具',
-  targetSiteName: '目标站点名',
-  targetSiteURL: '目标站点 URL',
-  payload: '启动参数',
-  optional: '可选',
-  uploadReadyToImport: '文件已成功上传，可以开始导入',
-  artransferToolHint: '使用 {link} 将评论数据转为 Artrans 格式',
-  moreDetails: '查看详情',
-  loginFailure: '登录发生异常',
-  login: '登录',
-  logout: '退出登录',
-  logoutConfirm: '确定要退出登录吗？',
-  loginSelectHint: '请选择您要登录的账户：',
-}
-
-const zhTW: typeof en = {
-  ctrlCenter: '控制中心',
-  msgCenter: '訊息中心',
-  noContent: '無內容',
-  searchHint: '關鍵字搜尋...',
-  allSites: '所有網站',
-  siteManage: '網站管理',
-  comment: '評論',
-  page: '頁面',
-  user: '用戶',
-  site: '網站',
-  transfer: '轉移',
-  settings: '設置',
-  all: '全部',
-  pending: '待審',
-  personal: '個人',
-  mentions: '提及',
-  mine: '我的',
-  admin: '管理員',
-  create: '建立',
-  import: '匯入',
-  export: '匯出',
-  settingSaved: '設定已儲存',
-  settingSaveFailed: '設定儲存失敗',
-  settingNotice: '注：某些設定選項可能需要手動重啟才能生效',
-  apply: '套用',
-  updateComplete: '更新完畢',
-  updateReady: '準備更新...',
-  opFailed: '操作失敗',
-  updateTitle: '擷取標題',
-  cacheClear: '清除快取',
-  cacheWarm: '預熱快取',
-  editTitle: '編輯標題',
-  switchKey: 'KEY 變更',
-  commentAllowAll: '允許任何人評論',
-  commentOnlyAdmin: '僅允許管理員評論',
-  config: '配置文件',
-  envVarControlHint: '由環境變數 {key} 參照',
-  userAdminHint: '該用戶具有管理員權限',
-  userInConfHint: '該用戶存在於配置文件中',
-  edit: '編輯',
-  delete: '刪除',
-  siteCount: '共 {count} 個網站',
-  createSite: '建立網站',
-  siteName: '網站名稱',
-  siteUrls: '網站 URLs',
-  multiSepHint: '使用逗號分隔多個',
-  add: '新增',
-  rename: '重命名',
-  inputHint: '輸入文字...',
-  userCreate: '建立用戶',
-  userEdit: '用戶編輯',
-  comments: '評論',
-  last: '最後',
-  show: '展開',
-  username: '用戶名',
-  email: '郵箱',
-  link: '連結',
-  badgeText: '徽章文字',
-  badgeColor: '徽章顏色',
-  role: '身份角色',
-  normal: '一般',
-  password: '密碼',
-  passwordEmptyHint: '留空表示不變更密碼',
-  emailNotify: '郵件通知',
-  enabled: '啟用',
-  disabled: '停用',
-  save: '儲存',
-  dataFile: '資料檔案',
-  artransfer: '轉移工具',
-  targetSiteName: '目標網站名稱',
-  targetSiteURL: '目標網站 URL',
-  payload: '有效載荷',
-  optional: '選填',
-  uploadReadyToImport: '檔案已上傳並準備匯入',
-  artransferToolHint: '使用 {link} 將評論數據轉換為 Artrans 格式。',
-  moreDetails: '查看詳情',
-  loginFailure: '登入失敗',
-  login: '登入',
-  logout: '登出',
-  logoutConfirm: '確定要登出嗎？',
-  loginSelectHint: '請選擇您要登入的帳號：',
-}
-
-export default {
-  en,
-  'zh-CN': zhCN,
-  'zh-TW': zhTW,
-}
diff --git a/ui/artalk-sidebar/src/i18n/zh-CN.ts b/ui/artalk-sidebar/src/i18n/zh-CN.ts
new file mode 100644
index 00000000..97414346
--- /dev/null
+++ b/ui/artalk-sidebar/src/i18n/zh-CN.ts
@@ -0,0 +1,97 @@
+import type { MessageSchema } from '../i18n'
+
+export const zhCN: MessageSchema = {
+  ctrlCenter: '控制中心',
+  msgCenter: '通知中心',
+  noContent: '无内容',
+  searchHint: '搜索关键字...',
+  allSites: '所有站点',
+  siteManage: '站点管理',
+  comment: '评论',
+  page: '页面',
+  user: '用户',
+  site: '站点',
+  transfer: '迁移',
+  settings: '设置',
+  all: '全部',
+  pending: '待审',
+  personal: '个人',
+  mentions: '提及',
+  mine: '我的',
+  admin: '管理员',
+  create: '新增',
+  import: '导入',
+  export: '导出',
+  settingSaved: '配置已保存',
+  settingSaveFailed: '配置保存失败',
+  settingNotice: '注：某些配置项可能需手动重启才能生效',
+  apply: '应用',
+  updateComplete: '更新完毕',
+  updateReady: '开始更新...',
+  opFailed: '操作失败',
+  updateTitle: '更新标题',
+  uploading: '上传中',
+  cancel: '取消',
+  back: '返回',
+  cacheClear: '缓存清除',
+  cacheWarm: '缓存预热',
+  editTitle: '标题修改',
+  switchKey: 'KEY 变更',
+  commentAllowAll: '所有人可评',
+  commentOnlyAdmin: '仅管理员可评',
+  config: '配置文件',
+  envVarControlHint: '由环境变量 {key} 控制',
+  userAdminHint: '该用户具有管理员权限',
+  userInConfHint: '该用户存在于配置文件中',
+  edit: '编辑',
+  delete: '删除',
+  siteCount: '共 {count} 个站点',
+  createSite: '新增站点',
+  siteName: '站点名称',
+  siteUrls: '站点 URLs',
+  multiSepHint: '多个用逗号隔开',
+  add: '新增',
+  rename: '重命名',
+  inputHint: '输入内容...',
+  userCreate: '用户创建',
+  userEdit: '用户编辑',
+  userInConfCannotEditHint: '暂不支持在线编辑配置文件中的用户，请手动修改配置文件',
+  userDeleteConfirm:
+    '该操作将删除 用户："{name}" 邮箱："{email}" 所有评论，包括其评论下面他人的回复评论，是否继续？',
+  userDeleteManuallyHint: '用户已从数据库删除，请手动编辑配置文件并删除用户',
+  pageDeleteConfirm: '确认删除页面 "{title}"？将会删除所有相关数据',
+  siteDeleteConfirm: '确认删除站点 "{name}"？将会删除所有相关数据',
+  siteNameInputHint: '请输入站点名称',
+  comments: '评论',
+  last: '近期',
+  show: '展开',
+  username: '用户名',
+  email: '邮箱',
+  link: '链接',
+  badgeText: '徽章文字',
+  badgeColor: '徽章颜色',
+  role: '身份角色',
+  normal: '普通',
+  password: '密码',
+  passwordEmptyHint: '留空不修改密码',
+  emailNotify: '邮件通知',
+  enabled: '开启',
+  disabled: '关闭',
+  save: '保存',
+  dataFile: '数据文件',
+  artransfer: '转换工具',
+  targetSiteName: '目标站点名',
+  targetSiteURL: '目标站点 URL',
+  payload: '启动参数',
+  optional: '可选',
+  uploadReadyToImport: '文件已成功上传，可以开始导入',
+  artransferToolHint: '使用 {link} 将评论数据转为 Artrans 格式',
+  moreDetails: '查看详情',
+  loginFailure: '登录发生异常',
+  login: '登录',
+  logout: '退出登录',
+  logoutConfirm: '确定要退出登录吗？',
+  loginSelectHint: '请选择您要登录的账户：',
+}
+
+export default zhCN
diff --git a/ui/artalk-sidebar/src/lib/promise-polyfill.ts b/ui/artalk-sidebar/src/lib/promise-polyfill.ts
new file mode 100644
index 00000000..5c5d26f1
--- /dev/null
+++ b/ui/artalk-sidebar/src/lib/promise-polyfill.ts
@@ -0,0 +1,9 @@
+Promise.withResolvers ??= function <T>() {
+  let resolve: PromiseWithResolvers<T>['resolve']
+  let reject: PromiseWithResolvers<T>['reject']
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve: resolve!, reject: reject! }
+}
diff --git a/ui/artalk-sidebar/src/main.ts b/ui/artalk-sidebar/src/main.ts
index 98bce853..3de7f591 100644
--- a/ui/artalk-sidebar/src/main.ts
+++ b/ui/artalk-sidebar/src/main.ts
@@ -1,50 +1,65 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { createI18n } from 'vue-i18n'
 import Artalk from 'artalk'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
-import messages from './i18n/messages'
+import { setupI18n } from './i18n'
 import 'artalk/dist/Artalk.css'
 import './style.scss'
 import App from './App.vue'
-import { setArtalk, initArtalk } from './global'
-
-// 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.watchConf(['locale'], (conf) => {
-    if (typeof conf.locale === 'string' && conf.locale !== 'auto')
-      i18n.global.locale.value = conf.locale as any
-  })
-})
+import { setArtalk } from './global'
+import { setupArtalk, syncArtalkUser } from './artalk'
+import './lib/promise-polyfill'
 
-const app = createApp(App)
+// I18n
+// @see https://vue-i18n.intlify.dev
+const { i18n, setLocale } = setupI18n()
 
-app.use(i18n)
-
-// Init Artalk
-setArtalk(initArtalk())
-
-// router
+// Router
 // @see https://github.com/posva/unplugin-vue-router
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
 
-app.use(router)
-
-// pinia
+// Pinia
+// @see https://pinia.vuejs.org
 const pinia = createPinia()
-app.use(pinia)
 
-app.mount('#app')
+// Artalk
+// @see https://artalk.js.org
+const artalkLoader = () =>
+  new Promise<Artalk>((notifyArtalkLoaded) => {
+    let artalkLoaded = false
+    let artalk: Artalk | null = null
+
+    Artalk.use((ctx) => {
+      // When artalk is ready, notify the loader and load the locale
+      ctx.watchConf(['locale'], async (conf) => {
+        if (typeof conf.locale === 'string' && conf.locale !== 'auto') await setLocale(conf.locale) // update i18n locale
+
+        if (!artalkLoaded) {
+          artalkLoaded = true
+          notifyArtalkLoaded(artalk!)
+        }
+      })
+    })
+
+    artalk = setupArtalk()
+  })
+
+// Mount Vue app
+;(async () => {
+  const artalk = await artalkLoader()
+  setArtalk(artalk)
+
+  const app = createApp(App)
+  app.use(i18n)
+  app.use(router)
+  app.use(pinia)
+
+  // user sync from artalk to sidebar
+  await syncArtalkUser(artalk, router)
+
+  app.mount('#app')
+})()
diff --git a/ui/artalk-sidebar/src/vue-i18n.d.ts b/ui/artalk-sidebar/src/vue-i18n.d.ts
new file mode 100644
index 00000000..f574e403
--- /dev/null
+++ b/ui/artalk-sidebar/src/vue-i18n.d.ts
@@ -0,0 +1,7 @@
+import { DefineLocaleMessage } from 'vue-i18n'
+import { MessageSchema } from './i18n'
+
+declare module 'vue-i18n' {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {}
+}
diff --git a/ui/artalk-sidebar/tsconfig.json b/ui/artalk-sidebar/tsconfig.json
index ce24807d..5feeecde 100644
--- a/ui/artalk-sidebar/tsconfig.json
+++ b/ui/artalk-sidebar/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "ESNext.Promise"],
     "skipLibCheck": true,
 
     /* Bundler mode */