feat(ui/admin): add logout button in admin panel (#488) (#753)

fixes #488

ui/artalk-sidebar/src/App.vue

@@ -35,7 +35,7 @@ function syncArtalk(artalk: Artalk) {
   } else {
     // sync user from artalk to sidebar
     try {
-      useUserStore().sync(artalk)
+      useUserStore().sync()
     } catch {
       nextTick(() => {
         router.replace('/login')
@@ -53,7 +53,6 @@ function syncArtalk(artalk: Artalk) {
     name: artalkUserData.nick
   }).then(res => {
     if (res.data.is_admin && !res.data.is_login) {
-      artalkUser.logout()
       user.logout()
       nextTick(() => {
         router.replace('/login')

ui/artalk-sidebar/src/components/Header.vue

@@ -26,7 +26,7 @@ const userAvatarImgURL = computed(() => {
         :class="{ 'active': nav.siteSwitcherShow }"
         @click="nav.showSiteSwitcher()"
       >
-        <div class="site">{{ curtSite.substring(0, 1) }}</div>
+        <div class="site">{{ curtSite.substring(0, 1) || '_' }}</div>
       </div>
     </template>
     <template v-else>

ui/artalk-sidebar/src/components/SiteSwitcher.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { useNavStore } from '../stores/nav'
 import { useUserStore } from '../stores/user'
+import { bootParams } from '@/global'
 
 const el = ref<HTMLElement|null>(null)
 
@@ -61,6 +62,13 @@ watch(curtShow, (value) => {
     document.removeEventListener('click', outsideChecker)
   }
 })
+
+function logout() {
+  useUserStore().logout()
+  nextTick(() => {
+    router.replace('/login')
+  })
+}
 </script>
 
 <template>
@@ -77,6 +85,12 @@ watch(curtShow, (value) => {
           <div class="atk-site-logo">{{ site.logoText }}</div>
           <div class="atk-site-name">{{ site.label }}</div>
         </div>
+
+        <!-- Logout Button -->
+        <div v-if="!bootParams.user?.email" class="atk-site-item" @click="logout()">
+          <svg class="atk-site-logo" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-6 -6 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path></svg>
+          <div class="atk-site-name">{{ $t('logout') }}</div>
+        </div>
       </div>
     </div>
   </Transition>

ui/artalk-sidebar/src/i18n/messages.ts

@@ -74,6 +74,7 @@ const en = {
   uploadReadyToImport: 'File uploaded and is ready for import',
   loginFailure: 'Login failure',
   login: 'Login',
+  logout: 'Logout',
   loginSelectHint: 'Please select the account you wish to log into:'
 }
 
@@ -153,86 +154,88 @@ const zhCN: typeof en = {
   uploadReadyToImport: '文件已成功上传，可以开始导入',
   loginFailure: '登录发生异常',
   login: '登录',
+  logout: '退出登录',
   loginSelectHint: '请选择您要登录的账户：',
 }
 
 const zhTW: typeof en = {
   ctrlCenter: '控制中心',
-  msgCenter: '通知中心',
+  msgCenter: '訊息中心',
   noContent: '無內容',
-  searchHint: '搜索關鍵字...',
-  allSites: '所有站點',
-  siteManage: '站點管理',
+  searchHint: '關鍵字搜尋...',
+  allSites: '所有網站',
+  siteManage: '網站管理',
   comment: '評論',
   page: '頁面',
   user: '用戶',
-  site: '站點',
-  transfer: '遷移',
+  site: '網站',
+  transfer: '轉移',
   settings: '設置',
   all: '全部',
   pending: '待審',
   personal: '個人',
   mentions: '提及',
   mine: '我的',
   admin: '管理員',
-  create: '新增',
-  import: '導入',
-  export: '導出',
-  settingSaved: '配置已保存',
-  settingSaveFailed: '配置保存失敗',
-  settingNotice: '注：某些配置項可能需手動重啟才能生效',
-  apply: '應用',
+  create: '建立',
+  import: '匯入',
+  export: '匯出',
+  settingSaved: '設定已儲存',
+  settingSaveFailed: '設定儲存失敗',
+  settingNotice: '注：某些設定選項可能需要手動重啟才能生效',
+  apply: '套用',
   updateComplete: '更新完畢',
-  updateReady: '開始更新...',
+  updateReady: '準備更新...',
   opFailed: '操作失敗',
-  updateTitle: '更新標題',
-  cacheClear: '緩存清除',
-  cacheWarm: '緩存預熱',
-  editTitle: '標題修改',
+  updateTitle: '擷取標題',
+  cacheClear: '清除快取',
+  cacheWarm: '預熱快取',
+  editTitle: '編輯標題',
   switchKey: 'KEY 變更',
-  commentAllowAll: '所有人可評',
-  commentOnlyAdmin: '僅管理員可評',
+  commentAllowAll: '允許任何人評論',
+  commentOnlyAdmin: '僅允許管理員評論',
   config: '配置文件',
   userAdminHint: '該用戶具有管理員權限',
   userInConfHint: '該用戶存在於配置文件中',
   edit: '編輯',
   delete: '刪除',
-  siteCount: '共 {count} 個站點',
-  createSite: '新增站點',
-  siteName: '站點名稱',
-  siteUrls: '站點 URLs',
-  multiSepHint: '多個用逗號隔開',
+  siteCount: '共 {count} 個網站',
+  createSite: '建立網站',
+  siteName: '網站名稱',
+  siteUrls: '網站 URLs',
+  multiSepHint: '使用逗號分隔多個',
   add: '新增',
   rename: '重命名',
-  inputHint: '輸入內容...',
-  userCreate: '用戶創建',
+  inputHint: '輸入文字...',
+  userCreate: '建立用戶',
   userEdit: '用戶編輯',
   comments: '評論',
-  last: '近期',
+  last: '最後',
   show: '展開',
   username: '用戶名',
   email: '郵箱',
-  link: '鏈接',
+  link: '連結',
   badgeText: '徽章文字',
   badgeColor: '徽章顏色',
   role: '身份角色',
-  normal: '普通',
+  normal: '一般',
   password: '密碼',
-  passwordEmptyHint: '留空不修改密碼',
+  passwordEmptyHint: '留空表示不變更密碼',
   emailNotify: '郵件通知',
-  enabled: '開啟',
-  disabled: '關閉',
-  save: '保存',
-  dataFile: '數據文件',
-  artransfer: '轉換工具',
-  targetSiteName: '目標站點名',
-  targetSiteURL: '目標站點 URL',
-  payload: '啟動參數',
-  optional: '可選',
-  uploadReadyToImport: '文件已成功上傳，可以開始導入',
-  loginFailure: '登錄發生異常',
-  login: '登錄',
-  loginSelectHint: '請選擇您要登錄的賬戶：',
+  enabled: '啟用',
+  disabled: '停用',
+  save: '儲存',
+  dataFile: '資料檔案',
+  artransfer: '轉移工具',
+  targetSiteName: '目標網站名稱',
+  targetSiteURL: '目標網站 URL',
+  payload: '有效載荷',
+  optional: '選填',
+  uploadReadyToImport: '檔案已上傳並準備匯入',
+  loginFailure: '登入失敗',
+  login: '登入',
+  logout: '登出',
+  loginSelectHint: '請選擇您要登入的帳號：',
 }
 
 export default {

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

@@ -52,7 +52,7 @@ function login(username?: string) {
       isAdmin: user.is_admin,
       token: res.data.token,
     })
-    useUserStore().sync(artalk)
+    useUserStore().sync()
     router.replace('/')
   }).catch((e) => {
     if (e.data?.need_name_select) {

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

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
-import { bootParams } from '../global'
-import type Artalk from 'artalk'
+import { bootParams, getArtalk } from '../global'
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -17,9 +16,12 @@ export const useUserStore = defineStore('user', {
       this.email = ''
       this.isAdmin = false
       this.token = ''
+
+      getArtalk()?.ctx.get('user').logout()
     },
-    sync(artalk: Artalk) {
-      const user = artalk.ctx.get('user')
+    sync() {
+      const user = getArtalk()?.ctx.get('user')
+      if (!user) throw new Error('Artalk is not initialized')
       if (!user.checkHasBasicUserInfo()) throw new Error('User is not logged in')
       const userData = user.getData()
       this.site = ''