From da311806c1da22b29ada8340b1d5e200e3e519a1 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 9 Sep 2025 15:04:49 +0800
Subject: [PATCH 1/2] feat: add API tab to about page

---
 frontend_nuxt/pages/about/index.vue | 123 +++++++++++++++++++++++++---
 1 file changed, 110 insertions(+), 13 deletions(-)

diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index 7b93f5e4d..d04062499 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -1,23 +1,47 @@
 <template>
   <div class="about-page">
     <BaseTabs v-model="selectedTab" :tabs="tabs">
-      <div class="about-loading" v-if="isFetching">
-        <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
-      </div>
-      <div
-        v-else
-        class="about-content"
-        v-html="renderMarkdown(content)"
-        @click="handleContentClick"
-      ></div>
+      <template v-if="selectedTab === 'api'">
+        <div class="about-api">
+          <div v-if="!authState.loggedIn" class="about-api-login">
+            请<NuxtLink to="/login">登录</NuxtLink>后查看 Token
+          </div>
+          <div v-else class="about-api-token">
+            <div class="token-row">
+              <span class="token-text">{{ token }}</span>
+              <button class="copy-btn" @click="copyToken">复制</button>
+            </div>
+            <div class="token-warning">请不要将 Token 泄露给他人</div>
+          </div>
+          <div class="about-api-link">
+            <a href="https://docs.open-isle.com" target="_blank" rel="noopener noreferrer"
+              >API Playground</a
+            >
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="about-loading" v-if="isFetching">
+          <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+        </div>
+        <div
+          v-else
+          class="about-content"
+          v-html="renderMarkdown(content)"
+          @click="handleContentClick"
+        ></div>
+      </template>
     </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#imports'
+import { authState, getToken } from '~/utils/auth'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 import BaseTabs from '~/components/BaseTabs.vue'
+import { toast } from '~/composables/useToast'
 
 export default {
   name: 'AboutPageView',
@@ -44,11 +68,19 @@ export default {
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
+      {
+        key: 'api',
+        label: 'API与调试',
+      },
     ]
+    const route = useRoute()
+    const router = useRouter()
     const selectedTab = ref(tabs[0].key)
     const content = ref('')
+    const token = computed(() => (authState.loggedIn ? getToken() : ''))
 
     const loadContent = async (file) => {
+      if (!file) return
       try {
         isFetching.value = true
         const res = await fetch(file)
@@ -65,19 +97,57 @@ export default {
     }
 
     onMounted(() => {
-      loadContent(tabs[0].file)
+      const initTab = route.query.tab
+      if (initTab && tabs.find((t) => t.key === initTab)) {
+        selectedTab.value = initTab
+        const tab = tabs.find((t) => t.key === initTab)
+        if (tab && tab.file) loadContent(tab.file)
+      } else {
+        loadContent(tabs[0].file)
+      }
     })
 
     watch(selectedTab, (name) => {
       const tab = tabs.find((t) => t.key === name)
-      if (tab) loadContent(tab.file)
+      if (tab && tab.file) loadContent(tab.file)
+      router.replace({ query: { ...route.query, tab: name } })
     })
 
+    watch(
+      () => route.query.tab,
+      (name) => {
+        if (name && name !== selectedTab.value && tabs.find((t) => t.key === name)) {
+          selectedTab.value = name
+        }
+      },
+    )
+
+    const copyToken = async () => {
+      if (import.meta.client && token.value) {
+        try {
+          await navigator.clipboard.writeText(token.value)
+          toast.success('已复制 Token')
+        } catch (e) {
+          toast.error('复制失败')
+        }
+      }
+    }
+
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
+    return {
+      tabs,
+      selectedTab,
+      content,
+      renderMarkdown,
+      isFetching,
+      handleContentClick,
+      authState,
+      token,
+      copyToken,
+    }
   },
 }
 </script>
@@ -101,6 +171,33 @@ export default {
   height: 200px;
 }
 
+.about-api {
+  padding: 20px;
+}
+
+.token-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  word-break: break-all;
+}
+
+.copy-btn {
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.token-warning {
+  color: var(--danger-color);
+  margin-bottom: 20px;
+}
+
+.about-api-link a {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
 @media (max-width: 768px) {
   .about-tabs {
     width: 100vw;

From a3201f05fb24c1457f24f150501319cc3d79b22a Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Tue, 9 Sep 2025 15:39:08 +0800
Subject: [PATCH 2/2] fix: share icon

---
 frontend_nuxt/pages/about/index.vue      | 57 ++++++++++++++++++------
 frontend_nuxt/plugins/iconpark.client.ts |  2 +
 2 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index d04062499..a7dc7099c 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -3,21 +3,22 @@
     <BaseTabs v-model="selectedTab" :tabs="tabs">
       <template v-if="selectedTab === 'api'">
         <div class="about-api">
+          <div class="about-api-title">调试Token</div>
           <div v-if="!authState.loggedIn" class="about-api-login">
             请<NuxtLink to="/login">登录</NuxtLink>后查看 Token
           </div>
           <div v-else class="about-api-token">
             <div class="token-row">
-              <span class="token-text">{{ token }}</span>
-              <button class="copy-btn" @click="copyToken">复制</button>
+              <span class="token-text">{{ shortToken }}</span>
+              <span @click="copyToken"><copy class="copy-icon" /></span>
+            </div>
+            <div class="warning-row">
+              <info-icon class="warning-icon" />
+              <div class="token-warning">请不要将 Token 泄露给他人</div>
             </div>
-            <div class="token-warning">请不要将 Token 泄露给他人</div>
-          </div>
-          <div class="about-api-link">
-            <a href="https://docs.open-isle.com" target="_blank" rel="noopener noreferrer"
-              >API Playground</a
-            >
           </div>
+          <div class="about-api-title">API文档和调试入口</div>
+          <div class="about-api-link">API Playground <share /></div>
         </div>
       </template>
       <template v-else>
@@ -79,6 +80,12 @@ export default {
     const content = ref('')
     const token = computed(() => (authState.loggedIn ? getToken() : ''))
 
+    const shortToken = computed(() => {
+      if (!token.value) return ''
+      if (token.value.length <= 20) return token.value
+      return `${token.value.slice(0, 20)}...${token.value.slice(-10)}`
+    })
+
     const loadContent = async (file) => {
       if (!file) return
       try {
@@ -147,6 +154,7 @@ export default {
       authState,
       token,
       copyToken,
+      shortToken,
     }
   },
 }
@@ -175,10 +183,34 @@ export default {
   padding: 20px;
 }
 
+.about-api-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+
+.warning-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0.7;
+}
+
+.warning-icon {
+  font-size: 13px;
+}
+
+.token-warning {
+  font-size: 13px;
+}
+
 .token-row {
   display: flex;
   align-items: center;
   gap: 10px;
+  font: 14px;
   margin-bottom: 10px;
   word-break: break-all;
 }
@@ -188,13 +220,12 @@ export default {
   cursor: pointer;
 }
 
-.token-warning {
-  color: var(--danger-color);
-  margin-bottom: 20px;
+.about-api-link {
+  color: var(--primary-color);
+  cursor: pointer;
 }
 
-.about-api-link a {
-  color: var(--primary-color);
+.about-api-link:hover {
   text-decoration: underline;
 }
 
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index ae19fd5a4..b9dce953f 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -77,6 +77,7 @@ import {
   Open,
   Dislike,
   CheckOne,
+  Share,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -157,4 +158,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('OpenIcon', Open)
   nuxtApp.vueApp.component('Dislike', Dislike)
   nuxtApp.vueApp.component('CheckOne', CheckOne)
+  nuxtApp.vueApp.component('Share', Share)
 })