From 38c61e1018c88ed1f0d7b11f6552e2dff250f9d9 Mon Sep 17 00:00:00 2001
From: AAEE86 <ppk0227@hotmail.com>
Date: Tue, 14 Oct 2025 09:37:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96API=20Key?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=BF=87=E6=BB=A4=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../accounts/ApiKeyManagementModal.vue        | 59 ++++++++++++-------
 web/admin-spa/src/views/AccountsView.vue      |  4 +-
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue b/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue
index da9970e0..f8201e23 100644
--- a/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue
+++ b/web/admin-spa/src/components/accounts/ApiKeyManagementModal.vue
@@ -53,7 +53,9 @@
             >
               <!-- 左上角错误状态码角标 -->
               <div
-                v-if="(apiKey.status === 'error' || apiKey.status === 'disabled') && apiKey.errorMessage"
+                v-if="
+                  (apiKey.status === 'error' || apiKey.status === 'disabled') && apiKey.errorMessage
+                "
                 class="absolute -left-2 -top-2 z-10"
               >
                 <span
@@ -73,7 +75,7 @@
                 <!-- API Key 信息 -->
                 <div class="flex items-start justify-between gap-2">
                   <span
-                    class="font-mono text-xs font-medium text-gray-900 dark:text-gray-100 break-all flex-1"
+                    class="flex-1 break-all font-mono text-xs font-medium text-gray-900 dark:text-gray-100"
                     :title="apiKey.key"
                   >
                     {{ maskApiKey(apiKey.key) }}
@@ -88,7 +90,7 @@
                     </button>
                     <button
                       v-if="apiKey.status === 'error' || apiKey.status === 'disabled'"
-                      class="text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                       :class="[
                         apiKey.status === 'error'
                           ? 'text-orange-500 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300'
@@ -98,11 +100,14 @@
                       :disabled="resetting === getOriginalIndex(index)"
                       title="重置状态"
                     >
-                      <div v-if="resetting === getOriginalIndex(index)" class="loading-spinner-sm" />
+                      <div
+                        v-if="resetting === getOriginalIndex(index)"
+                        class="loading-spinner-sm"
+                      />
                       <i v-else class="fas fa-redo"></i>
                     </button>
                     <button
-                      class="text-xs text-red-500 transition-colors hover:text-red-700 dark:text-red-400 dark:hover:text-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                      class="text-xs text-red-500 transition-colors hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:text-red-600"
                       :disabled="deleting === getOriginalIndex(index)"
                       @click="deleteApiKey(apiKey, getOriginalIndex(index))"
                     >
@@ -113,15 +118,17 @@
                 </div>
 
                 <!-- 统计信息（一行显示） -->
-                <div class="flex flex-wrap items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+                <div
+                  class="flex flex-wrap items-center gap-3 text-xs text-gray-600 dark:text-gray-400"
+                >
                   <div>
                     <span
                       :class="[
                         apiKey.status === 'active'
                           ? 'text-green-600 dark:text-green-400'
                           : apiKey.status === 'error'
-                          ? 'text-red-600 dark:text-red-400'
-                          : 'text-yellow-600 dark:text-yellow-400'
+                            ? 'text-red-600 dark:text-red-400'
+                            : 'text-yellow-600 dark:text-yellow-400'
                       ]"
                     >
                       <i
@@ -129,8 +136,8 @@
                           apiKey.status === 'active'
                             ? 'fas fa-check-circle'
                             : apiKey.status === 'error'
-                            ? 'fas fa-exclamation-triangle'
-                            : 'fas fa-exclamation-circle'
+                              ? 'fas fa-exclamation-triangle'
+                              : 'fas fa-exclamation-circle'
                         ]"
                         class="mr-1"
                       />
@@ -138,15 +145,18 @@
                         apiKey.status === 'active'
                           ? '正常'
                           : apiKey.status === 'error'
-                          ? '异常'
-                          : apiKey.status === 'disabled'
-                          ? '禁用'
-                          : apiKey.status || '未知'
+                            ? '异常'
+                            : apiKey.status === 'disabled'
+                              ? '禁用'
+                              : apiKey.status || '未知'
                       }}
                     </span>
                   </div>
                   <div>
-                    <span>使用: <strong>{{ apiKey.usageCount || 0 }}</strong>次</span>
+                    <span
+                      >使用: <strong>{{ apiKey.usageCount || 0 }}</strong
+                      >次</span
+                    >
                   </div>
                   <div v-if="apiKey.lastUsedAt">
                     <span>{{ formatTime(apiKey.lastUsedAt) }}</span>
@@ -159,18 +169,21 @@
           <!-- 分页控制（底部） -->
           <div v-if="totalPages > 1" class="mt-4 flex items-center justify-between">
             <div class="text-sm text-gray-600 dark:text-gray-400">
-              显示 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, totalItems) }} 项，共 {{ totalItems }} 项
+              显示 {{ (currentPage - 1) * pageSize + 1 }}-{{
+                Math.min(currentPage * pageSize, totalItems)
+              }}
+              项，共 {{ totalItems }} 项
             </div>
             <div class="flex items-center gap-2">
               <button
-                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                 :disabled="currentPage === 1"
                 @click="currentPage = 1"
               >
                 <i class="fas fa-angle-double-left" />
               </button>
               <button
-                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                 :disabled="currentPage === 1"
                 @click="currentPage--"
               >
@@ -180,14 +193,14 @@
                 {{ currentPage }} / {{ totalPages }}
               </span>
               <button
-                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                 :disabled="currentPage === totalPages"
                 @click="currentPage++"
               >
                 <i class="fas fa-angle-right" />
               </button>
               <button
-                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                 :disabled="currentPage === totalPages"
                 @click="currentPage = totalPages"
               >
@@ -347,7 +360,11 @@ const deleteApiKey = async (apiKey, index) => {
 
 // 重置 API Key 状态
 const resetApiKeyStatus = async (apiKey, index) => {
-  if (!confirm(`确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗？这将清除错误信息并恢复为正常状态。`)) {
+  if (
+    !confirm(
+      `确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗？这将清除错误信息并恢复为正常状态。`
+    )
+  ) {
     return
   }
 
diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index 6528787a..a4c8de6e 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -3111,7 +3111,7 @@ const getDroidApiKeyCount = (account) => {
   // 优先使用 apiKeys 数组来计算正常状态的 API Keys
   if (Array.isArray(account.apiKeys)) {
     // 只计算状态不是 'error' 的 API Keys
-    return account.apiKeys.filter(apiKey => apiKey.status !== 'error').length
+    return account.apiKeys.filter((apiKey) => apiKey.status !== 'error').length
   }
 
   // 如果是字符串格式的 apiKeys，尝试解析
@@ -3120,7 +3120,7 @@ const getDroidApiKeyCount = (account) => {
       const parsed = JSON.parse(account.apiKeys)
       if (Array.isArray(parsed)) {
         // 只计算状态不是 'error' 的 API Keys
-        return parsed.filter(apiKey => apiKey.status !== 'error').length
+        return parsed.filter((apiKey) => apiKey.status !== 'error').length
       }
     } catch (error) {
       // 忽略解析错误，继续使用其他字段