add logout, switch lang (#80)

* update
swuecho · Apr 9, 2023 · 8d03097 · 8d03097
1 parent 66fc042
commit 8d03097
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 51 deletions.
diff --git a/web/src/components/common/Setting/General.vue b/web/src/components/common/Setting/General.vue
@@ -17,8 +17,6 @@ const theme = computed(() => appStore.theme)
 
 const userInfo = computed(() => userStore.userInfo)
 
-const avatar = ref(userInfo.value.avatar ?? '')
-
 const name = ref(userInfo.value.name ?? '')
 
 const description = ref(userInfo.value.description ?? '')
@@ -120,15 +118,6 @@ function handleImportButtonClick(): void {
 <template>
   <div class="p-4 space-y-5 min-h-[200px]">
     <div class="space-y-6">
-      <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
-        <div class="flex-1">
-          <NInput v-model:value="avatar" placeholder="" />
-        </div>
-        <NButton size="tiny" text type="primary" @click="updateUserInfo({ avatar })">
-          {{ $t('common.save') }}
-        </NButton>
-      </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
         <div class="w-[200px]">
@@ -196,10 +185,8 @@ function handleImportButtonClick(): void {
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
         <div class="flex flex-wrap items-center gap-4">
           <template v-for="item of languageOptions" :key="item.key">
-            <NButton
-              size="small" :type="item.key === language ? 'primary' : undefined"
-              @click="appStore.setLanguage(item.key)"
-            >
+            <NButton size="small" :type="item.key === language ? 'primary' : undefined"
+              @click="appStore.setLanguage(item.key)">
               {{ item.label }}
             </NButton>
           </template>

diff --git a/web/src/components/common/UserAvatar/index.vue b/web/src/components/common/UserAvatar/index.vue
@@ -1,40 +1,12 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
 import { NAvatar } from 'naive-ui'
-import { useUserStore } from '@/store'
 import defaultAvatar from '@/assets/avatar.jpg'
-import { isString } from '@/utils/is'
-
-const userStore = useUserStore()
-
-const userInfo = computed(() => userStore.userInfo)
 </script>
 
 <template>
   <div class="flex items-center overflow-hidden">
     <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
-      <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
-        <NAvatar
-          size="large"
-          round
-          :src="userInfo.avatar"
-          :fallback-src="defaultAvatar"
-        />
-      </template>
-      <template v-else>
-        <NAvatar size="large" round :src="defaultAvatar" />
-      </template>
-    </div>
-    <div class="flex-1 min-w-0 ml-2">
-      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
-        {{ userInfo.name ?? 'ChenZhaoYu' }}
-      </h2>
-      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
-        <span
-          v-if="isString(userInfo.description) && userInfo.description !== ''"
-          v-html="userInfo.description"
-        />
-      </p>
+      <NAvatar size="large" round :src="defaultAvatar" />
     </div>
   </div>
 </template>
diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
@@ -74,6 +74,7 @@
     "chatHistory": "Chat History",
     "theme": "Theme",
     "language": "Language",
+    "switchLanguage": "English | 切换语言 | 切換語言",
     "api": "API",
     "reverseProxy": "Reverse Proxy",
     "timeout": "Timeout",
@@ -91,12 +92,17 @@
     "hideSubMenu": "Hide Submenu",
     "showSubMenu": "Show Submenu",
     "userStat": "User Statistics",
-    "rateLimit10Min": "Message Limit (10 minutes)"
+    "rateLimit10Min": "Message Limit (10 minutes)",
+    "totalChatMessagesTokenCount": "Total token count",
+    "totalChatMessages3DaysTokenCount": "Total token count (3 days)",
+    "totalChatMessages3DaysAvgTokenCount": "Average token count (3 days)"
   },
   "error": {
     "rateLimit": "The message sending limit has been reached, please contact the administrator.",
     "invalidEmail": "Invalid email address",
     "syncChatSession": "Sync Failed, Please Try Again Later",
-    "invalidPassword": "password is not valid, it should be length >=6 and include a number, a lowercase letter, an uppercase letter, and a special character"
+    "invalidPassword": "password is not valid, it should be length >=6 and include a number, a lowercase letter, an uppercase letter, and a special character",
+    "NotAuthorized": "Please log in first",
+    "NotAdmin": "Non-administrators are prohibited from accessing"
   }
 }
diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -91,6 +91,7 @@
     "chatHistory": "聊天记录",
     "theme": "主题",
     "language": "语言",
+    "switchLanguage": "English | 切换语言 | 切換語言",
     "api": "API",
     "reverseProxy": "反向代理",
     "timeout": "超时",

diff --git a/web/src/locales/zh-TW.json b/web/src/locales/zh-TW.json
@@ -33,7 +33,9 @@
     "rateLimit": "發送消息數量已經達到上限，請聯繫管理員",
     "invalidEmail": "電子郵件格式不正確",
     "invalidPassword": "密碼格式不正確，長度至少需為6位，應包含1個大寫字母、1個小寫字母、1個數字、1個特殊字符",
-    "syncChatSession": "同步失敗，請稍後再試"
+    "syncChatSession": "同步失敗，請稍後再試",
+    "NotAuthorized": "請先登入",
+    "NotAdmin": "非管理員禁止訪問"
   },
   "chat": {
     "new": "新建聊天",
@@ -81,6 +83,7 @@
     "chatHistory": "聊天記錄",
     "theme": "主題",
     "language": "語言",
+    "switchLanguage": "English | 切换语言 | 切換語言",
     "api": "API",
     "reverseProxy": "反向代理",
     "timeout": "超時",
@@ -97,6 +100,9 @@
     "hideSubMenu": "隱藏子選單",
     "showSubMenu": "顯示子選單",
     "userStat": "用戶統計",
-    "rateLimit10Min": "訊息數量上限(10分鐘)"
+    "rateLimit10Min": "訊息數量上限(10分鐘)",
+    "totalChatMessagesTokenCount": "總token數量",
+    "totalChatMessages3DaysTokenCount": "總token數量(3天)",
+    "totalChatMessages3DaysAvgTokenCount": "平均token數量(3天)"
   }
 }
diff --git a/web/src/store/modules/app/index.ts b/web/src/store/modules/app/index.ts
@@ -3,6 +3,8 @@ import type { AppState, Language, Theme } from './helper'
 import { getLocalSetting, setLocalSetting } from './helper'
 import { store } from '@/store'
 
+const langs: Language[] = ['zh-CN', 'en-US', 'zh-CN']
+
 export const useAppStore = defineStore('app-store', {
   state: (): AppState => getLocalSetting(),
   actions: {
@@ -22,7 +24,12 @@ export const useAppStore = defineStore('app-store', {
         this.recordState()
       }
     },
-
+    setNextLanguage() {
+      const currentLang = this.language
+      const nextLang = langs[(langs.indexOf(currentLang) + 1) % langs.length]
+      this.language = nextLang
+      this.recordState()
+    },
     recordState() {
       setLocalSetting(this.$state)
     },

diff --git a/web/src/store/modules/chat/index.ts b/web/src/store/modules/chat/index.ts
@@ -273,5 +273,11 @@ export const useChatStore = defineStore('chat-store', {
         this.recordState()
       }
     },
+    clearState() {
+      this.history = []
+      this.chat = []
+      this.active = null
+      this.recordState()
+    },
   },
 })
diff --git a/web/src/store/modules/user/helper.ts b/web/src/store/modules/user/helper.ts
@@ -3,7 +3,6 @@ import { ss } from '@/utils/storage'
 const LOCAL_NAME = 'userStorage'
 
 export interface UserInfo {
-  avatar: string
   name: string
   description: string
 }
@@ -15,7 +14,6 @@ export interface UserState {
 export function defaultSetting(): UserState {
   return {
     userInfo: {
-      avatar: 'https://raw.githubusercontent.com/Chanzhaoyu/chatgpt-web/main/src/assets/avatar.jpg',
       name: 'ChenZhaoYu',
       description: 'Star on <a href="https://github.com/Chanzhaoyu/chatgpt-bot" class="text-blue-500" target="_blank" >Github</a>',
     },

diff --git a/web/src/views/chat/layout/sider/Footer.vue b/web/src/views/chat/layout/sider/Footer.vue
@@ -1,17 +1,44 @@
 <script setup lang='ts'>
 import { defineAsyncComponent, ref } from 'vue'
 import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
+import { useAppStore, useAuthStore, useChatStore, useUserStore } from '@/store/modules';
 
 const Setting = defineAsyncComponent(() => import('@/components/common/Setting/index.vue'))
 
+const authStore = useAuthStore()
+const userStore = useUserStore()
+const chatStore = useChatStore()
+const appStore = useAppStore()
+
 const show = ref(false)
+
+function handleLogout() {
+  // clear all stores
+  authStore.removeToken()
+  userStore.resetUserInfo()
+  chatStore.clearState()
+}
+
+function handleChangelang() {
+  appStore.setNextLanguage()
+}
 </script>
 
 <template>
   <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
     <div class="flex-1 flex-shrink-0 overflow-hidden">
       <UserAvatar />
     </div>
+    <HoverButton :tooltip="$t('common.logout')" @click="handleLogout">
+      <span class="text-xl text-[#4f555e] dark:text-white">
+        <SvgIcon icon="ri:logout-circle-r-line" />
+      </span>
+    </HoverButton>
+    <HoverButton :tooltip="$t('setting.switchLanguage')" @click="handleChangelang">
+      <span class="text-xl text-[#4f555e] dark:text-white">
+        <SvgIcon icon="carbon:ibm-watson-language-translator" />
+      </span>
+    </HoverButton>
     <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />