From 9b0d0bee96bc4c51912611b68a3cb23021e330b5 Mon Sep 17 00:00:00 2001
From: atoz03 <xiaqingtao2015@outlook.com>
Date: Fri, 5 Dec 2025 14:57:34 +0800
Subject: [PATCH] =?UTF-8?q?=20fix:=20=E8=B4=A6=E6=88=B7=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BA=BF=E5=85=A5=E5=8F=A3=E4=B8=8E=E8=B7=AF=E7=94=B1=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20=20=20-=20=E7=A7=BB=E9=99=A4=E8=B4=A6=E6=88=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=B8=8B=E6=8B=89/=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E7=9A=84=E6=97=B6=E9=97=B4=E7=BA=BF=E5=85=A5=E5=8F=A3=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=85=E4=BF=9D=E7=95=99=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=8C=89=E9=92=AE=20=20=20-=20ActionDropdown?=
 =?UTF-8?q?=20=E5=85=A8=E5=B1=80=E4=BA=92=E6=96=A5=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E5=A4=9A=E8=8F=9C=E5=8D=95=E5=A0=86=E5=8F=A0=20=20=20?=
 =?UTF-8?q?-=20=E8=B4=A6=E6=88=B7=E7=AD=9B=E9=80=89=E5=8E=BB=E9=87=8D?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E2=80=9C=E6=9C=AA=E7=9F=A5=E6=B8=A0?=
 =?UTF-8?q?=E9=81=93=E2=80=9D=E9=87=8D=E5=A4=8D=E6=B3=84=E9=9C=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/usageStats.js                |  5 +++
 .../accounts/AccountUsageDetailModal.vue      | 30 ++++++++++++----
 .../src/components/common/ActionDropdown.vue  | 16 +++++++++
 web/admin-spa/src/views/AccountsView.vue      | 34 -------------------
 4 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/routes/admin/usageStats.js b/src/routes/admin/usageStats.js
index 25b8c260..c71a8576 100644
--- a/src/routes/admin/usageStats.js
+++ b/src/routes/admin/usageStats.js
@@ -2133,9 +2133,14 @@ router.get('/api-keys/:keyId/usage-records', authenticateAdmin, async (req, res)
     }
 
     const accountOptions = []
+    const accountIdAdded = new Set()
     for (const option of accountOptionMap.values()) {
       const info = await resolveAccountInfo(option.id, option.accountType)
       if (info && info.name) {
+        if (accountIdAdded.has(option.id)) {
+          continue
+        }
+        accountIdAdded.add(option.id)
         accountOptions.push({
           id: option.id,
           name: info.name,
diff --git a/web/admin-spa/src/components/accounts/AccountUsageDetailModal.vue b/web/admin-spa/src/components/accounts/AccountUsageDetailModal.vue
index f9b6083c..09da703b 100644
--- a/web/admin-spa/src/components/accounts/AccountUsageDetailModal.vue
+++ b/web/admin-spa/src/components/accounts/AccountUsageDetailModal.vue
@@ -44,12 +44,20 @@
               </p>
             </div>
           </div>
-          <button
-            class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-            @click="handleClose"
-          >
-            <i class="fas fa-times" />
-          </button>
+          <div class="flex items-center gap-2">
+            <button
+              class="flex items-center gap-2 rounded-full bg-purple-100 px-3 py-2 text-xs font-semibold text-purple-700 transition hover:bg-purple-200 dark:bg-purple-500/10 dark:text-purple-200 dark:hover:bg-purple-500/20"
+              @click="goTimeline"
+            >
+              <i class="fas fa-clock" /> 请求时间线
+            </button>
+            <button
+              class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+              @click="handleClose"
+            >
+              <i class="fas fa-times" />
+            </button>
+          </div>
         </div>
 
         <!-- 内容区域 -->
@@ -325,6 +333,7 @@
 
 <script setup>
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import Chart from 'chart.js/auto'
 import { useThemeStore } from '@/stores/theme'
@@ -343,6 +352,7 @@ const emit = defineEmits(['close'])
 
 const themeStore = useThemeStore()
 const { isDarkMode } = storeToRefs(themeStore)
+const router = useRouter()
 
 const chartCanvas = ref(null)
 let chartInstance = null
@@ -579,6 +589,14 @@ const handleClose = () => {
   emit('close')
 }
 
+const goTimeline = () => {
+  if (!props.account?.id) return
+  router.push({
+    path: `/accounts/${props.account.id}/usage-records`,
+    query: { platform: props.account.platform || props.account.accountType }
+  })
+}
+
 watch(
   () => props.show,
   (visible) => {
diff --git a/web/admin-spa/src/components/common/ActionDropdown.vue b/web/admin-spa/src/components/common/ActionDropdown.vue
index 64ba3423..5dadb9fc 100644
--- a/web/admin-spa/src/components/common/ActionDropdown.vue
+++ b/web/admin-spa/src/components/common/ActionDropdown.vue
@@ -77,7 +77,21 @@ const getActionClass = (action) => {
   return colorMap[action.color] || colorMap.gray
 }
 
+const instanceId = Symbol('action-dropdown')
+const handleGlobalOpen = (event) => {
+  if (event?.detail?.id !== instanceId) {
+    closeDropdown()
+  }
+}
+
 const toggleDropdown = async () => {
+  if (!isOpen.value) {
+    window.dispatchEvent(
+      new CustomEvent('action-dropdown-open', {
+        detail: { id: instanceId }
+      })
+    )
+  }
   isOpen.value = !isOpen.value
   if (isOpen.value) {
     await nextTick()
@@ -164,11 +178,13 @@ onMounted(() => {
   window.addEventListener('scroll', handleScroll, true)
   window.addEventListener('resize', handleResize)
   document.addEventListener('click', handleClickOutside)
+  window.addEventListener('action-dropdown-open', handleGlobalOpen)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', handleScroll, true)
   window.removeEventListener('resize', handleResize)
   document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('action-dropdown-open', handleGlobalOpen)
 })
 </script>
diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index da60e249..88aa858a 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -1199,15 +1199,6 @@
                       <i class="fas fa-chart-line" />
                       <span class="ml-1">详情</span>
                     </button>
-                    <button
-                      v-if="canViewUsage(account)"
-                      class="rounded bg-purple-100 px-2.5 py-1 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-200"
-                      title="请求时间线"
-                      @click="viewAccountTimeline(account)"
-                    >
-                      <i class="fas fa-clock" />
-                      <span class="ml-1">时间线</span>
-                    </button>
                     <button
                       v-if="canTestAccount(account)"
                       class="rounded bg-cyan-100 px-2.5 py-1 text-xs font-medium text-cyan-700 transition-colors hover:bg-cyan-200 dark:bg-cyan-900/40 dark:text-cyan-300 dark:hover:bg-cyan-800/50"
@@ -1677,15 +1668,6 @@
               <i class="fas fa-chart-line" />
               详情
             </button>
-            <button
-              v-if="canViewUsage(account)"
-              class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-purple-50 px-3 py-2 text-xs text-purple-600 transition-colors hover:bg-purple-100"
-              @click="viewAccountTimeline(account)"
-            >
-              <i class="fas fa-clock" />
-              时间线
-            </button>
-
             <button
               v-if="canTestAccount(account)"
               class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-cyan-50 px-3 py-2 text-xs text-cyan-600 transition-colors hover:bg-cyan-100 dark:bg-cyan-900/40 dark:text-cyan-300 dark:hover:bg-cyan-800/50"
@@ -1872,7 +1854,6 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
 import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 import { useConfirm } from '@/composables/useConfirm'
@@ -1887,7 +1868,6 @@ import ActionDropdown from '@/components/common/ActionDropdown.vue'
 
 // 使用确认弹窗
 const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCancel } = useConfirm()
-const router = useRouter()
 
 // 数据状态
 const accounts = ref([])
@@ -2119,13 +2099,6 @@ const getAccountActions = (account) => {
       color: 'indigo',
       handler: () => openAccountUsageModal(account)
     })
-    actions.push({
-      key: 'timeline',
-      label: '请求时间线',
-      icon: 'fa-clock',
-      color: 'purple',
-      handler: () => viewAccountTimeline(account)
-    })
   }
 
   // 测试账户
@@ -2186,13 +2159,6 @@ const openAccountUsageModal = async (account) => {
   }
 }
 
-const viewAccountTimeline = (account) => {
-  router.push({
-    path: `/accounts/${account.id}/usage-records`,
-    query: { platform: account.platform || account.accountType }
-  })
-}
-
 const closeAccountUsageModal = () => {
   showAccountUsageModal.value = false
   accountUsageLoading.value = false