From 26894f485b08c7007e310839f9e710e4c6a69648 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sat, 11 Oct 2025 23:05:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20droid=E8=B4=A6=E5=8F=B7=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0apikey=E6=95=B0=E9=87=8F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/admin-spa/src/views/AccountsView.vue | 67 ++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index 8759dada..b5c57d74 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -549,6 +549,13 @@
                     <span class="text-xs font-medium text-cyan-700 dark:text-cyan-300">
                       {{ getDroidAuthType(account) }}
                     </span>
+                    <span
+                      v-if="isDroidApiKeyMode(account)"
+                      :class="getDroidApiKeyBadgeClasses(account)"
+                    >
+                      <i class="fas fa-key text-[9px]" />
+                      <span>x{{ getDroidApiKeyCount(account) }}</span>
+                    </span>
                   </div>
                   <div
                     v-else
@@ -3020,6 +3027,66 @@ const getDroidAuthType = (account) => {
   return 'OAuth'
 }
 
+// 判断是否为 API Key 模式的 Droid 账号
+const isDroidApiKeyMode = (account) => getDroidAuthType(account) === 'API Key'
+
+// 获取 Droid 账号的 API Key 数量
+const getDroidApiKeyCount = (account) => {
+  if (!account || typeof account !== 'object') {
+    return 0
+  }
+
+  const candidates = [
+    account.apiKeyCount,
+    account.api_key_count,
+    account.apiKeysCount,
+    account.api_keys_count
+  ]
+
+  for (const candidate of candidates) {
+    const value = Number(candidate)
+    if (Number.isFinite(value) && value >= 0) {
+      return value
+    }
+  }
+
+  if (Array.isArray(account.apiKeys)) {
+    return account.apiKeys.length
+  }
+
+  if (typeof account.apiKeys === 'string' && account.apiKeys.trim()) {
+    try {
+      const parsed = JSON.parse(account.apiKeys)
+      if (Array.isArray(parsed)) {
+        return parsed.length
+      }
+    } catch (error) {
+      // 忽略解析错误，维持默认值
+    }
+  }
+
+  return 0
+}
+
+// 根据数量返回徽标样式
+const getDroidApiKeyBadgeClasses = (account) => {
+  const count = getDroidApiKeyCount(account)
+  const baseClass =
+    'ml-1 inline-flex items-center gap-1 rounded-md border px-1.5 py-[1px] text-[10px] font-medium shadow-sm backdrop-blur-sm'
+
+  if (count > 0) {
+    return [
+      baseClass,
+      'border-cyan-200 bg-cyan-50/90 text-cyan-700 dark:border-cyan-500/40 dark:bg-cyan-900/40 dark:text-cyan-200'
+    ]
+  }
+
+  return [
+    baseClass,
+    'border-rose-200 bg-rose-50/90 text-rose-600 dark:border-rose-500/40 dark:bg-rose-900/40 dark:text-rose-200'
+  ]
+}
+
 // 获取 Claude 账号类型显示
 const getClaudeAccountType = (account) => {
   // 如果有订阅信息