Add API token fetching and copying functionality in General settings.

swuecho · Sep 7, 2024 · a2ab134 · a2ab134
1 parent a3dcccb
commit a2ab134
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/web/src/components/common/Setting/General.vue b/web/src/components/common/Setting/General.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { NButton, NInput, useMessage } from 'naive-ui'
 import type { Theme } from '@/store/modules/app/helper'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useUserStore } from '@/store'
 import type { UserInfo } from '@/store/modules/user/helper'
 import { t } from '@/locales'
+import request from '@/utils/request/axios'
+
 
 const appStore = useAppStore()
 const userStore = useUserStore()
@@ -38,6 +40,31 @@ const themeOptions: { label: string; key: Theme; icon: string }[] = [
   },
 ]
 
+const apiToken = ref('')
+
+function copyToClipboard() {
+  if (apiToken.value) {
+    navigator.clipboard.writeText(apiToken.value)
+      .then(() => ms.success(t('setting.apiTokenCopied')))
+      .catch(() => ms.error(t('setting.apiTokenCopyFailed')))
+  }
+}
+
+onMounted(async () => {
+  try {
+    const response = await request.get('/token_10years')
+    console.log(response)
+    if (response.status=== 200) {
+      apiToken.value = response.data.accessToken
+    }
+    else {
+      ms.error('Failed to fetch API token')
+    }
+  } catch (error) {
+    ms.error('Error fetching API token')
+  }
+})
+
 function updateUserInfo(options: Partial<UserInfo>) {
   userStore.updateUserInfo(options)
   ms.success(t('common.success'))
@@ -69,7 +96,8 @@ function updateUserInfo(options: Partial<UserInfo>) {
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
         <div class="flex flex-wrap items-center gap-4">
           <template v-for="item of themeOptions" :key="item.key">
-            <NButton size="small" :type="item.key === theme ? 'primary' : undefined" @click="appStore.setTheme(item.key)">
+            <NButton size="small" :type="item.key === theme ? 'primary' : undefined"
+              @click="appStore.setTheme(item.key)">
               <template #icon>
                 <SvgIcon :icon="item.icon" />
               </template>
@@ -83,6 +111,12 @@ function updateUserInfo(options: Partial<UserInfo>) {
           <a href="/#/snapshot_all" target="_blank" class="text-blue-500"> 点击打开 </a>
         </div>
       </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.apiToken') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="apiToken" readonly @click="copyToClipboard" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -165,6 +165,7 @@
     "defaultName": "你",
     "defaultDesc": "签名",
     "snapshotLink": "会话集",
+    "apiToken": "API Token",
     "description": "描述",
     "resetUserInfo": "重置用户信息",
     "chatHistory": "聊天记录",
@@ -174,7 +175,9 @@
     "api": "API",
     "reverseProxy": "反向代理",
     "timeout": "超时",
-    "socks": "Socks"
+    "socks": "Socks",
+    "apiTokenCopied": "API Token 已复制",
+    "apiTokenCopyFailed": "无法复制 API Token"
   },
   "error": {
     "system_message_notice": "第一条是系统消息已经是收到, 请继续输入信息开始会话",