From 97b94eeff9c5cf580013f292ff222a48b4ea826d Mon Sep 17 00:00:00 2001
From: Wangnov <w15365132161@gmail.com>
Date: Wed, 10 Sep 2025 16:03:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90web/admin-spa/src/com?=
 =?UTF-8?q?ponents/apikeys=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96=E5=B9=B6?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AF=AD=E6=B3=95=E9=94=99=E8=AF=AF=E5=92=8C?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/accounts/AccountForm.vue   |  476 +++---
 .../accounts/GroupManagementModal.vue         |   44 +-
 .../src/components/accounts/OAuthFlow.vue     |   44 +-
 .../src/components/accounts/ProxyConfig.vue   |   38 +-
 .../src/components/admin/ChangeRoleModal.vue  |   24 +-
 .../components/admin/UserUsageStatsModal.vue  |   72 +-
 .../components/apikeys/BatchApiKeyModal.vue   |  107 +-
 .../apikeys/BatchEditApiKeyModal.vue          |  273 ++--
 .../components/apikeys/CreateApiKeyModal.vue  |  457 +++---
 .../components/apikeys/EditApiKeyModal.vue    |  349 ++--
 .../components/apikeys/ExpiryEditModal.vue    |  115 +-
 .../src/components/apikeys/NewApiKeyModal.vue |   82 +-
 .../components/apikeys/RenewApiKeyModal.vue   |   58 +-
 .../components/apikeys/UsageDetailModal.vue   |   72 +-
 .../components/apikeys/WindowCountdown.vue    |   39 +-
 .../apistats/AggregatedStatsCard.vue          |    9 +-
 .../src/components/apistats/ApiKeyInput.vue   |    4 +-
 .../src/components/apistats/LimitConfig.vue   |   42 +-
 .../components/apistats/ModelUsageStats.vue   |   18 +-
 .../src/components/apistats/StatsOverview.vue |   60 +-
 .../components/apistats/TokenDistribution.vue |    6 +-
 .../src/components/layout/AppHeader.vue       |   52 +-
 web/admin-spa/src/i18n/locales/en.js          | 1401 +++++++++++++----
 web/admin-spa/src/i18n/locales/zh-cn.js       | 1166 ++++++++++----
 web/admin-spa/src/i18n/locales/zh-tw.js       | 1161 ++++++++++----
 web/admin-spa/src/views/AccountsView.vue      |   99 +-
 web/admin-spa/src/views/ApiKeysView.vue       |  126 +-
 web/admin-spa/src/views/ApiStatsView.vue      |   16 +-
 web/admin-spa/src/views/DashboardView.vue     |   74 +-
 web/admin-spa/src/views/LoginView.vue         |    6 +-
 web/admin-spa/src/views/SettingsView.vue      |   79 +-
 web/admin-spa/src/views/TutorialView.vue      |    4 +-
 web/admin-spa/src/views/UserDashboardView.vue |   31 +-
 .../src/views/UserManagementView.vue          |   57 +-
 .../src/views/tutorials/TutorialView-en.vue   |  166 +-
 35 files changed, 4766 insertions(+), 2061 deletions(-)

diff --git a/web/admin-spa/src/components/accounts/AccountForm.vue b/web/admin-spa/src/components/accounts/AccountForm.vue
index 8a9eb8c7..c26db224 100644
--- a/web/admin-spa/src/components/accounts/AccountForm.vue
+++ b/web/admin-spa/src/components/accounts/AccountForm.vue
@@ -65,9 +65,9 @@
         <div v-if="oauthStep === 1 && !isEdit">
           <div class="space-y-6">
             <div v-if="!isEdit">
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.platform') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.platform')
+              }}</label>
               <div class="flex gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -76,7 +76,9 @@
                     type="radio"
                     value="claude"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformClaude') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformClaude')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -85,7 +87,9 @@
                     type="radio"
                     value="claude-console"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformClaudeConsole') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformClaudeConsole')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -94,7 +98,9 @@
                     type="radio"
                     value="gemini"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformGemini') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformGemini')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -103,7 +109,9 @@
                     type="radio"
                     value="openai"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformOpenAI') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformOpenAI')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -112,7 +120,9 @@
                     type="radio"
                     value="azure_openai"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformAzureOpenAI') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformAzureOpenAI')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -121,7 +131,9 @@
                     type="radio"
                     value="bedrock"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.platformBedrock') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.platformBedrock')
+                  }}</span>
                 </label>
               </div>
             </div>
@@ -134,9 +146,9 @@
                 form.platform !== 'azure_openai'
               "
             >
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.addMethod') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.addMethod')
+              }}</label>
               <div class="flex flex-wrap gap-4">
                 <label v-if="form.platform === 'claude'" class="flex cursor-pointer items-center">
                   <input
@@ -145,7 +157,9 @@
                     type="radio"
                     value="setup-token"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.addTypeSetupToken') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.addTypeSetupToken')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -154,7 +168,9 @@
                     type="radio"
                     value="oauth"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.addTypeOAuth') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.addTypeOAuth')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -163,17 +179,17 @@
                     type="radio"
                     value="manual"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300"
-                    >{{ t('accountForm.addTypeManual') }}</span
-                  >
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.addTypeManual')
+                  }}</span>
                 </label>
               </div>
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.accountName') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.accountName')
+              }}</label>
               <input
                 v-model="form.name"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -188,9 +204,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.descriptionOptional') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.descriptionOptional')
+              }}</label>
               <textarea
                 v-model="form.description"
                 class="form-input w-full resize-none border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -200,9 +216,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.accountType') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.accountType')
+              }}</label>
               <div class="flex gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -211,7 +227,9 @@
                     type="radio"
                     value="shared"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.accountTypeShared') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.accountTypeShared')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -220,7 +238,9 @@
                     type="radio"
                     value="dedicated"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.accountTypeDedicated') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.accountTypeDedicated')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -229,7 +249,9 @@
                     type="radio"
                     value="group"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.accountTypeGroup') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.accountTypeGroup')
+                  }}</span>
                 </label>
               </div>
               <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
@@ -239,9 +261,9 @@
 
             <!-- {{ t('accountForm.groupSelector') }} -->
             <div v-if="form.accountType === 'group'">
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.selectGroupRequired') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.selectGroupRequired')
+              }}</label>
               <div class="flex gap-2">
                 <div class="flex-1">
                   <!-- {{ t('accountForm.multiSelectGroup') }} -->
@@ -266,7 +288,8 @@
                         :value="group.id"
                       />
                       <span class="text-sm text-gray-700 dark:text-gray-200">
-                        {{ group.name }} ({{ group.memberCount || 0 }} {{ t('accountForm.memberCount') }})
+                        {{ group.name }} ({{ group.memberCount || 0 }}
+                        {{ t('accountForm.memberCount') }})
                       </span>
                     </label>
                     <!-- {{ t('accountForm.newGroupOption') }} -->
@@ -294,9 +317,9 @@
 
             <!-- {{ t('accountForm.geminiProjectId') }} -->
             <div v-if="form.platform === 'gemini'">
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.projectIdOptional') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.projectIdOptional')
+              }}</label>
               <input
                 v-model="form.projectId"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -342,9 +365,9 @@
             <!-- {{ t('accountForm.bedrockFields') }} -->
             <div v-if="form.platform === 'bedrock' && !isEdit" class="space-y-4">
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.awsAccessKeyId') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.awsAccessKeyId')
+                }}</label>
                 <input
                   v-model="form.accessKeyId"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -359,9 +382,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.awsSecretAccessKey') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.awsSecretAccessKey')
+                }}</label>
                 <input
                   v-model="form.secretAccessKey"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -376,9 +399,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.awsRegion') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.awsRegion')
+                }}</label>
                 <input
                   v-model="form.region"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -410,9 +433,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.sessionTokenOptional') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.sessionTokenOptional')
+                }}</label>
                 <input
                   v-model="form.sessionToken"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -425,9 +448,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.defaultModelLabel') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.defaultModelLabel')
+                }}</label>
                 <input
                   v-model="form.defaultModel"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -454,9 +477,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.smallFastModelLabel') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.smallFastModelLabel')
+                }}</label>
                 <input
                   v-model="form.smallFastModel"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -472,9 +495,9 @@
             <!-- {{ t('accountForm.azureOpenAIFields') }} -->
             <div v-if="form.platform === 'azure_openai' && !isEdit" class="space-y-4">
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.azureEndpoint') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.azureEndpoint')
+                }}</label>
                 <input
                   v-model="form.azureEndpoint"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -492,9 +515,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.azureApiVersion') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.azureApiVersion')
+                }}</label>
                 <input
                   v-model="form.apiVersion"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -507,9 +530,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.azureDeploymentName') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.azureDeploymentName')
+                }}</label>
                 <input
                   v-model="form.deploymentName"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -527,9 +550,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.azureApiKey') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.azureApiKey')
+                }}</label>
                 <input
                   v-model="form.apiKey"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -547,9 +570,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.azureSupportedModels') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.azureSupportedModels')
+                }}</label>
                 <div class="flex flex-wrap gap-2">
                   <label
                     v-for="model in [
@@ -583,9 +606,9 @@
 
             <div v-if="form.platform === 'bedrock' && !isEdit">
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.rateLimitMechanism') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.rateLimitMechanism')
+                }}</label>
                 <div class="mb-3">
                   <label class="inline-flex cursor-pointer items-center">
                     <input
@@ -593,7 +616,9 @@
                       class="mr-2 rounded border-gray-300 text-blue-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-gray-600 dark:bg-gray-700"
                       type="checkbox"
                     />
-                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.enableRateLimitMechanism') }}</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                      t('accountForm.enableRateLimitMechanism')
+                    }}</span>
                   </label>
                   <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                     {{ t('accountForm.rateLimitDescription2') }}
@@ -601,7 +626,8 @@
                 </div>
 
                 <div v-if="form.enableRateLimit">
-                  <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                  <label
+                    class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                     >{{ t('accountForm.rateLimitDurationMinutes') }}</label
                   >
                   <input
@@ -621,9 +647,9 @@
             <!-- {{ t('accountForm.claudeConsoleFields') }} -->
             <div v-if="form.platform === 'claude-console' && !isEdit" class="space-y-4">
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.apiUrlRequired') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.apiUrlRequired')
+                }}</label>
                 <input
                   v-model="form.apiUrl"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -638,9 +664,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.apiKeyRequired') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.apiKeyRequired')
+                }}</label>
                 <input
                   v-model="form.apiKey"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -690,9 +716,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.modelMappingTableOptional') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.modelMappingTableOptional')
+                }}</label>
                 <div class="mb-3 rounded-lg bg-blue-50 p-3 dark:bg-blue-900/30">
                   <p class="text-xs text-blue-700 dark:text-blue-400">
                     <i class="fas fa-info-circle mr-1" />
@@ -785,9 +811,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.customUserAgentOptional') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.customUserAgentOptional')
+                }}</label>
                 <input
                   v-model="form.userAgent"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -800,9 +826,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.rateLimitMechanism') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.rateLimitMechanism')
+                }}</label>
                 <div class="mb-3">
                   <label class="inline-flex cursor-pointer items-center">
                     <input
@@ -810,7 +836,9 @@
                       class="mr-2 rounded border-gray-300 text-blue-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-gray-600 dark:bg-gray-700"
                       type="checkbox"
                     />
-                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.enableRateLimitMechanism') }}</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                      t('accountForm.enableRateLimitMechanism')
+                    }}</span>
                   </label>
                   <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                     {{ t('accountForm.rateLimitDescription2') }}
@@ -818,7 +846,8 @@
                 </div>
 
                 <div v-if="form.enableRateLimit">
-                  <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                  <label
+                    class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                     >{{ t('accountForm.rateLimitDurationMinutes') }}</label
                   >
                   <input
@@ -837,9 +866,9 @@
 
             <!-- {{ t('accountForm.subscriptionType') }} -->
             <div v-if="form.platform === 'claude'">
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.subscriptionType') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.subscriptionType')
+              }}</label>
               <div class="flex gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -848,7 +877,9 @@
                     type="radio"
                     value="claude_max"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.claudeMaxDisplay') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.claudeMaxDisplay')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -857,7 +888,9 @@
                     type="radio"
                     value="claude_pro"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.claudeProDisplay') }}</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    t('accountForm.claudeProDisplay')
+                  }}</span>
                 </label>
               </div>
               <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
@@ -913,7 +946,9 @@
                       >
                         <i v-if="!clearingCache" class="fas fa-trash-alt mr-1"></i>
                         <div v-else class="loading-spinner mr-1"></div>
-                        {{ clearingCache ? t('accountForm.clearing') : t('accountForm.clearCache') }}
+                        {{
+                          clearingCache ? t('accountForm.clearing') : t('accountForm.clearCache')
+                        }}
                       </button>
                     </div>
                   </div>
@@ -951,9 +986,9 @@
                       class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
                     >
                       <div class="mb-2 flex items-center justify-between">
-                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400"
-                          >{{ t('accountForm.clientIdLabel') }}</span
-                        >
+                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{
+                          t('accountForm.clientIdLabel')
+                        }}</span>
                         <button
                           class="rounded-md bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50"
                           type="button"
@@ -990,9 +1025,9 @@
 
             <!-- 所有平台的优先级设置 -->
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.schedulePriorityLabel') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.schedulePriorityLabel')
+              }}</label>
               <input
                 v-model.number="form.priority"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1084,9 +1119,9 @@
               </div>
 
               <div v-if="form.platform === 'openai'">
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.accessTokenOptional') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.accessTokenOptional')
+                }}</label>
                 <textarea
                   v-model="form.accessToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1100,9 +1135,9 @@
               </div>
 
               <div v-else>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.accessTokenRequired') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.accessTokenRequired')
+                }}</label>
                 <textarea
                   v-model="form.accessToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1117,9 +1152,9 @@
               </div>
 
               <div v-if="form.platform === 'openai'">
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.refreshTokenRequired') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.refreshTokenRequired')
+                }}</label>
                 <textarea
                   v-model="form.refreshToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1138,9 +1173,9 @@
               </div>
 
               <div v-else>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.refreshTokenOptional') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.refreshTokenOptional')
+                }}</label>
                 <textarea
                   v-model="form.refreshToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1242,7 +1277,11 @@
                           >
                             <i v-if="!setupTokenLoading" class="fas fa-link mr-2" />
                             <div v-else class="loading-spinner mr-2" />
-                            {{ setupTokenLoading ? t('accountForm.generating') : t('accountForm.generateSetupTokenLink') }}
+                            {{
+                              setupTokenLoading
+                                ? t('accountForm.generating')
+                                : t('accountForm.generateSetupTokenLink')
+                            }}
                           </button>
                           <div v-else class="space-y-3">
                             <div class="flex items-center gap-2">
@@ -1365,7 +1404,9 @@
               @click="exchangeSetupTokenCode"
             >
               <div v-if="setupTokenExchanging" class="loading-spinner mr-2" />
-              {{ setupTokenExchanging ? t('accountForm.verifying') : t('accountForm.completeAuth') }}
+              {{
+                setupTokenExchanging ? t('accountForm.verifying') : t('accountForm.completeAuth')
+              }}
             </button>
           </div>
         </div>
@@ -1374,9 +1415,9 @@
         <div v-if="isEdit" class="space-y-6">
           <!-- 基本信息 -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.accountNameEdit') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.accountNameEdit')
+            }}</label>
             <input
               v-model="form.name"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1387,9 +1428,9 @@
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.descriptionOptionalEdit') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.descriptionOptionalEdit')
+            }}</label>
             <textarea
               v-model="form.description"
               class="form-input w-full resize-none border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1399,9 +1440,9 @@
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.accountTypeEdit') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.accountTypeEdit')
+            }}</label>
             <div class="flex gap-4">
               <label class="flex cursor-pointer items-center">
                 <input
@@ -1410,7 +1451,9 @@
                   type="radio"
                   value="shared"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.sharedAccount') }}</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.sharedAccount')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -1419,7 +1462,9 @@
                   type="radio"
                   value="dedicated"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.dedicatedAccount') }}</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.dedicatedAccount')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -1428,7 +1473,9 @@
                   type="radio"
                   value="group"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.groupScheduling') }}</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.groupScheduling')
+                }}</span>
               </label>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
@@ -1438,9 +1485,9 @@
 
           <!-- 分组选择器 -->
           <div v-if="form.accountType === 'group'">
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.selectGroupRequired') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.selectGroupRequired')
+            }}</label>
             <div class="flex gap-2">
               <div class="flex-1">
                 <!-- 多选分组界面 -->
@@ -1465,7 +1512,8 @@
                       :value="group.id"
                     />
                     <span class="text-sm text-gray-700 dark:text-gray-200">
-                      {{ group.name }} ({{ group.memberCount || 0 }}{{ t('accountForm.membersCount') }})
+                      {{ group.name }} ({{ group.memberCount || 0
+                      }}{{ t('accountForm.membersCount') }})
                     </span>
                   </label>
                   <!-- 新建分组选项 -->
@@ -1493,9 +1541,9 @@
 
           <!-- Gemini 项目 ID 字段 -->
           <div v-if="form.platform === 'gemini'">
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.projectIdOptional') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.projectIdOptional')
+            }}</label>
             <input
               v-model="form.projectId"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1509,9 +1557,9 @@
 
           <!-- Claude {{ t('accountForm.subscriptionType') }}（编辑模式） -->
           <div v-if="form.platform === 'claude'">
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.subscriptionType') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.subscriptionType')
+            }}</label>
             <div class="flex gap-4">
               <label class="flex cursor-pointer items-center">
                 <input
@@ -1520,7 +1568,9 @@
                   type="radio"
                   value="claude_max"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.claudeMaxSubscription') }}</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.claudeMaxSubscription')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -1529,7 +1579,9 @@
                   type="radio"
                   value="claude_pro"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('accountForm.claudeProSubscription') }}</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.claudeProSubscription')
+                }}</span>
               </label>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
@@ -1622,9 +1674,9 @@
                     class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
                   >
                     <div class="mb-2 flex items-center justify-between">
-                      <span class="text-xs font-medium text-gray-600 dark:text-gray-400"
-                        >{{ t('accountForm.clientIdLabel') }}</span
-                      >
+                      <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{
+                        t('accountForm.clientIdLabel')
+                      }}</span>
                       <button
                         class="rounded-md bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50"
                         type="button"
@@ -1661,9 +1713,9 @@
 
           <!-- 所有平台的优先级设置（编辑模式） -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >{{ t('accountForm.prioritySchedulingTitle') }}</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('accountForm.prioritySchedulingTitle')
+            }}</label>
             <input
               v-model.number="form.priority"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -1680,7 +1732,9 @@
           <!-- {{ t('accountForm.claudeConsoleFields') }}（编辑模式）-->
           <div v-if="form.platform === 'claude-console'" class="space-y-4">
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.apiUrlLabel') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.apiUrlLabel')
+              }}</label>
               <input
                 v-model="form.apiUrl"
                 class="form-input w-full"
@@ -1691,7 +1745,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.apiKeyLabel') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.apiKeyLabel')
+              }}</label>
               <input
                 v-model="form.apiKey"
                 class="form-input w-full"
@@ -1875,7 +1931,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.rateLimitMechanism') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.rateLimitMechanism')
+              }}</label>
               <div class="mb-3">
                 <label class="inline-flex cursor-pointer items-center">
                   <input
@@ -1883,7 +1941,9 @@
                     class="mr-2 rounded border-gray-300 text-blue-600 focus:border-blue-500 focus:ring focus:ring-blue-200"
                     type="checkbox"
                   />
-                  <span class="text-sm text-gray-700">{{ t('accountForm.enableRateLimitMechanism') }}</span>
+                  <span class="text-sm text-gray-700">{{
+                    t('accountForm.enableRateLimitMechanism')
+                  }}</span>
                 </label>
                 <p class="mt-1 text-xs text-gray-500">
                   启用后，当账号返回429错误时将暂停调度一段时间
@@ -1908,29 +1968,39 @@
           <!-- Bedrock 特定字段（编辑模式）-->
           <div v-if="form.platform === 'bedrock'" class="space-y-4">
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.awsAccessKeyId') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.awsAccessKeyId')
+              }}</label>
               <input
                 v-model="form.accessKeyId"
                 class="form-input w-full"
                 :placeholder="t('accountForm.leaveBlankNoUpdate')"
                 type="text"
               />
-              <p class="mt-1 text-xs text-gray-500">{{ t('accountForm.leaveBlankNoUpdateAwsKey') }}</p>
+              <p class="mt-1 text-xs text-gray-500">
+                {{ t('accountForm.leaveBlankNoUpdateAwsKey') }}
+              </p>
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.awsSecretAccessKey') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.awsSecretAccessKey')
+              }}</label>
               <input
                 v-model="form.secretAccessKey"
                 class="form-input w-full"
                 :placeholder="t('accountForm.leaveBlankNoUpdate')"
                 type="password"
               />
-              <p class="mt-1 text-xs text-gray-500">{{ t('accountForm.leaveBlankNoUpdateAwsSecret') }}</p>
+              <p class="mt-1 text-xs text-gray-500">
+                {{ t('accountForm.leaveBlankNoUpdateAwsSecret') }}
+              </p>
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.awsRegion') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.awsRegion')
+              }}</label>
               <input
                 v-model="form.region"
                 class="form-input w-full"
@@ -1956,7 +2026,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.sessionTokenOptional') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.sessionTokenOptional')
+              }}</label>
               <input
                 v-model="form.sessionToken"
                 class="form-input w-full"
@@ -1966,9 +2038,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700"
-                >{{ t('accountForm.defaultModelLabel') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.defaultModelLabel')
+              }}</label>
               <input
                 v-model="form.defaultModel"
                 class="form-input w-full"
@@ -1981,20 +2053,24 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.smallFastModelLabel') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.smallFastModelLabel')
+              }}</label>
               <input
                 v-model="form.smallFastModel"
                 class="form-input w-full"
                 :placeholder="t('accountForm.smallFastModelPlaceholder')"
                 type="text"
               />
-              <p class="mt-1 text-xs text-gray-500">{{ t('accountForm.smallFastModelDescription') }}</p>
+              <p class="mt-1 text-xs text-gray-500">
+                {{ t('accountForm.smallFastModelDescription') }}
+              </p>
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700">{{ t('accountForm.rateLimitMechanism') }}</label>
+              <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+                t('accountForm.rateLimitMechanism')
+              }}</label>
               <div class="mb-3">
                 <label class="inline-flex cursor-pointer items-center">
                   <input
@@ -2002,7 +2078,9 @@
                     class="mr-2 rounded border-gray-300 text-blue-600 focus:border-blue-500 focus:ring focus:ring-blue-200"
                     type="checkbox"
                   />
-                  <span class="text-sm text-gray-700">{{ t('accountForm.enableRateLimitMechanism') }}</span>
+                  <span class="text-sm text-gray-700">{{
+                    t('accountForm.enableRateLimitMechanism')
+                  }}</span>
                 </label>
                 <p class="mt-1 text-xs text-gray-500">
                   启用后，当账号返回429错误时将暂停调度一段时间
@@ -2027,9 +2105,9 @@
           <!-- Azure OpenAI 特定字段（编辑模式）-->
           <div v-if="form.platform === 'azure_openai'" class="space-y-4">
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.azureEndpoint') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.azureEndpoint')
+              }}</label>
               <input
                 v-model="form.azureEndpoint"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2043,9 +2121,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.azureApiVersion') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.azureApiVersion')
+              }}</label>
               <input
                 v-model="form.apiVersion"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2058,9 +2136,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.azureDeploymentName') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.azureDeploymentName')
+              }}</label>
               <input
                 v-model="form.deploymentName"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2074,9 +2152,9 @@
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.apiKeyLabel') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.apiKeyLabel')
+              }}</label>
               <input
                 v-model="form.apiKey"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2087,13 +2165,15 @@
               <p v-if="errors.apiKey" class="mt-1 text-xs text-red-500">
                 {{ errors.apiKey }}
               </p>
-              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('accountForm.leaveEmptyNoUpdateKey') }}</p>
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                {{ t('accountForm.leaveEmptyNoUpdateKey') }}
+              </p>
             </div>
 
             <div>
-              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >{{ t('accountForm.supportedModelsLabel') }}</label
-              >
+              <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('accountForm.supportedModelsLabel')
+              }}</label>
               <div class="flex flex-wrap gap-2">
                 <label
                   v-for="model in [
@@ -2139,7 +2219,9 @@
                 <i class="fas fa-key text-sm text-white" />
               </div>
               <div>
-                <h5 class="mb-2 font-semibold text-amber-900 dark:text-amber-300">{{ t('accountForm.updateTokenLabel') }}</h5>
+                <h5 class="mb-2 font-semibold text-amber-900 dark:text-amber-300">
+                  {{ t('accountForm.updateTokenLabel') }}
+                </h5>
                 <p class="mb-2 text-sm text-amber-800 dark:text-amber-300">
                   可以更新 Access Token 和 Refresh Token。为了安全起见，不会显示当前的 Token 值。
                 </p>
@@ -2149,9 +2231,9 @@
 
             <div class="space-y-4">
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.newAccessTokenLabel') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.newAccessTokenLabel')
+                }}</label>
                 <textarea
                   v-model="form.accessToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2161,9 +2243,9 @@
               </div>
 
               <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >{{ t('accountForm.newRefreshTokenLabel') }}</label
-                >
+                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                  t('accountForm.newRefreshTokenLabel')
+                }}</label>
                 <textarea
                   v-model="form.refreshToken"
                   class="form-input w-full resize-none border-gray-300 font-mono text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -2556,7 +2638,7 @@ const copySetupTokenAuthUrl = async () => {
         showToast(t('accountForm.copyFailed'), 'error')
       }
     } catch (err) {
-    showToast(t('accountForm.copyFailedManual'), 'error')
+      showToast(t('accountForm.copyFailedManual'), 'error')
     }
 
     document.body.removeChild(textarea)
@@ -2675,7 +2757,8 @@ const handleOAuthSuccess = async (tokenInfo) => {
     emit('success', result)
   } catch (error) {
     // 显示详细的错误信息
-    const errorMessage = error.response?.data?.error || error.message || t('accountForm.accountCreationFailed')
+    const errorMessage =
+      error.response?.data?.error || error.message || t('accountForm.accountCreationFailed')
     const suggestion = error.response?.data?.suggestion || ''
     const errorDetails = error.response?.data?.errorDetails || null
 
@@ -2957,7 +3040,8 @@ const createAccount = async () => {
     emit('success', result)
   } catch (error) {
     // 显示详细的错误信息
-    const errorMessage = error.response?.data?.error || error.message || t('accountForm.accountCreationFailed')
+    const errorMessage =
+      error.response?.data?.error || error.message || t('accountForm.accountCreationFailed')
     const suggestion = error.response?.data?.suggestion || ''
     const errorDetails = error.response?.data?.errorDetails || null
 
@@ -3213,7 +3297,8 @@ const updateAccount = async () => {
     emit('success')
   } catch (error) {
     // 显示详细的错误信息
-    const errorMessage = error.response?.data?.error || error.message || t('accountForm.accountUpdateFailed')
+    const errorMessage =
+      error.response?.data?.error || error.message || t('accountForm.accountUpdateFailed')
     const suggestion = error.response?.data?.suggestion || ''
     const errorDetails = error.response?.data?.errorDetails || null
 
@@ -3669,7 +3754,10 @@ const clearUnifiedCache = async () => {
     }
   } catch (error) {
     console.error('Failed to clear unified User-Agent cache:', error)
-    showToast(t('accountForm.clearCacheFailedWithError') + (error.message || t('accountForm.unknownError')), 'error')
+    showToast(
+      t('accountForm.clearCacheFailedWithError') + (error.message || t('accountForm.unknownError')),
+      'error'
+    )
   } finally {
     clearingCache.value = false
   }
diff --git a/web/admin-spa/src/components/accounts/GroupManagementModal.vue b/web/admin-spa/src/components/accounts/GroupManagementModal.vue
index 4b0ae5f8..8c16eaec 100644
--- a/web/admin-spa/src/components/accounts/GroupManagementModal.vue
+++ b/web/admin-spa/src/components/accounts/GroupManagementModal.vue
@@ -11,7 +11,9 @@
             >
               <i class="fas fa-layer-group text-sm text-white sm:text-base" />
             </div>
-            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t('groupManagement.title') }}</h3>
+            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">
+              {{ t('groupManagement.title') }}
+            </h3>
           </div>
           <button
             class="p-1 text-gray-400 transition-colors hover:text-gray-600"
@@ -31,10 +33,14 @@
 
         <!-- 创建分组表单 -->
         <div v-if="showCreateForm" class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
-          <h4 class="mb-4 text-lg font-semibold text-gray-900">{{ t('groupManagement.createGroup') }}</h4>
+          <h4 class="mb-4 text-lg font-semibold text-gray-900">
+            {{ t('groupManagement.createGroup') }}
+          </h4>
           <div class="space-y-4">
             <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.groupNameRequired') }}</label>
+              <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+                t('groupManagement.groupNameRequired')
+              }}</label>
               <input
                 v-model="createForm.name"
                 class="form-input w-full"
@@ -44,7 +50,9 @@
             </div>
 
             <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.platformTypeRequired') }}</label>
+              <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+                t('groupManagement.platformTypeRequired')
+              }}</label>
               <div class="flex gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input v-model="createForm.platform" class="mr-2" type="radio" value="claude" />
@@ -62,7 +70,9 @@
             </div>
 
             <div>
-              <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.descriptionOptional') }}</label>
+              <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+                t('groupManagement.descriptionOptional')
+              }}</label>
               <textarea
                 v-model="createForm.description"
                 class="form-input w-full resize-none"
@@ -80,7 +90,9 @@
                 <div v-if="creating" class="loading-spinner mr-2" />
                 {{ creating ? t('groupManagement.creating') : t('groupManagement.create') }}
               </button>
-              <button class="btn btn-secondary px-4 py-2" @click="cancelCreate">{{ t('groupManagement.cancel') }}</button>
+              <button class="btn btn-secondary px-4 py-2" @click="cancelCreate">
+                {{ t('groupManagement.cancel') }}
+              </button>
             </div>
           </div>
         </div>
@@ -184,7 +196,9 @@
 
         <div class="space-y-4">
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.groupNameRequired') }}</label>
+            <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+              t('groupManagement.groupNameRequired')
+            }}</label>
             <input
               v-model="editForm.name"
               class="form-input w-full"
@@ -194,7 +208,9 @@
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.platformTypeLabel') }}</label>
+            <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+              t('groupManagement.platformTypeLabel')
+            }}</label>
             <div class="rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600">
               {{
                 editForm.platform === 'claude'
@@ -203,12 +219,16 @@
                     ? 'Gemini'
                     : 'OpenAI'
               }}
-              <span class="ml-2 text-xs text-gray-500">{{ t('groupManagement.cannotModify') }}</span>
+              <span class="ml-2 text-xs text-gray-500">{{
+                t('groupManagement.cannotModify')
+              }}</span>
             </div>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.descriptionOptional') }}</label>
+            <label class="mb-2 block text-sm font-semibold text-gray-700">{{
+              t('groupManagement.descriptionOptional')
+            }}</label>
             <textarea
               v-model="editForm.description"
               class="form-input w-full resize-none"
@@ -226,7 +246,9 @@
               <div v-if="updating" class="loading-spinner mr-2" />
               {{ updating ? t('groupManagement.updating') : t('groupManagement.update') }}
             </button>
-            <button class="btn btn-secondary flex-1 px-4 py-2" @click="cancelEdit">{{ t('groupManagement.cancel') }}</button>
+            <button class="btn btn-secondary flex-1 px-4 py-2" @click="cancelEdit">
+              {{ t('groupManagement.cancel') }}
+            </button>
           </div>
         </div>
       </div>
diff --git a/web/admin-spa/src/components/accounts/OAuthFlow.vue b/web/admin-spa/src/components/accounts/OAuthFlow.vue
index 44104d4d..32861f9c 100644
--- a/web/admin-spa/src/components/accounts/OAuthFlow.vue
+++ b/web/admin-spa/src/components/accounts/OAuthFlow.vue
@@ -12,7 +12,9 @@
             <i class="fas fa-link text-white" />
           </div>
           <div class="flex-1">
-            <h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">{{ t('oauthFlow.claudeAccountAuth') }}</h4>
+            <h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">
+              {{ t('oauthFlow.claudeAccountAuth') }}
+            </h4>
             <p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
               {{ t('oauthFlow.claudeAuthDescription') }}
             </p>
@@ -115,14 +117,17 @@
                     </p>
                     <p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
                       {{ t('oauthFlow.step3Description') }}
-                      <strong>{{ t('oauthFlow.authorizationCode') }}</strong>{{ t('oauthFlow.step3DescriptionMiddle') }}
+                      <strong>{{ t('oauthFlow.authorizationCode') }}</strong
+                      >{{ t('oauthFlow.step3DescriptionMiddle') }}
                     </p>
                     <div class="space-y-3">
                       <div>
                         <label
                           class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                         >
-                          <i class="fas fa-key mr-2 text-blue-500" />{{ t('oauthFlow.authorizationCode') }}
+                          <i class="fas fa-key mr-2 text-blue-500" />{{
+                            t('oauthFlow.authorizationCode')
+                          }}
                         </label>
                         <textarea
                           v-model="authCode"
@@ -157,7 +162,9 @@
             <i class="fas fa-robot text-white" />
           </div>
           <div class="flex-1">
-            <h4 class="mb-3 font-semibold text-green-900 dark:text-green-200">{{ t('oauthFlow.geminiAccountAuth') }}</h4>
+            <h4 class="mb-3 font-semibold text-green-900 dark:text-green-200">
+              {{ t('oauthFlow.geminiAccountAuth') }}
+            </h4>
             <p class="mb-4 text-sm text-green-800 dark:text-green-300">
               {{ t('oauthFlow.geminiAuthDescription') }}
             </p>
@@ -266,7 +273,9 @@
                         <label
                           class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                         >
-                          <i class="fas fa-key mr-2 text-green-500" />{{ t('oauthFlow.authorizationCode') }}
+                          <i class="fas fa-key mr-2 text-green-500" />{{
+                            t('oauthFlow.authorizationCode')
+                          }}
                         </label>
                         <textarea
                           v-model="authCode"
@@ -303,7 +312,9 @@
             <i class="fas fa-brain text-white" />
           </div>
           <div class="flex-1">
-            <h4 class="mb-3 font-semibold text-orange-900 dark:text-orange-200">{{ t('oauthFlow.openaiAccountAuth') }}</h4>
+            <h4 class="mb-3 font-semibold text-orange-900 dark:text-orange-200">
+              {{ t('oauthFlow.openaiAccountAuth') }}
+            </h4>
             <p class="mb-4 text-sm text-orange-800 dark:text-orange-300">
               {{ t('oauthFlow.openaiAuthDescription') }}
             </p>
@@ -382,7 +393,8 @@
                     >
                       <p class="text-xs text-amber-800 dark:text-amber-300">
                         <i class="fas fa-clock mr-1" />
-                        <strong>{{ t('oauthFlow.openaiImportantNote') }}</strong>{{ t('oauthFlow.openaiLoadingNote') }}
+                        <strong>{{ t('oauthFlow.openaiImportantNote') }}</strong
+                        >{{ t('oauthFlow.openaiLoadingNote') }}
                       </p>
                       <p class="mt-2 text-xs text-amber-700 dark:text-amber-400">
                         {{ t('oauthFlow.openaiAddressNote') }}
@@ -419,14 +431,17 @@
                     </p>
                     <p class="mb-3 text-sm text-orange-700 dark:text-orange-300">
                       {{ t('oauthFlow.step3DescriptionOpenAI') }}
-                      <strong class="font-mono">http://localhost:1455/...</strong> {{ t('oauthFlow.step3DescriptionOpenAIMiddle') }}
+                      <strong class="font-mono">http://localhost:1455/...</strong>
+                      {{ t('oauthFlow.step3DescriptionOpenAIMiddle') }}
                     </p>
                     <div class="space-y-3">
                       <div>
                         <label
                           class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                         >
-                          <i class="fas fa-link mr-2 text-orange-500" />{{ t('oauthFlow.authLinkOrCode') }}
+                          <i class="fas fa-link mr-2 text-orange-500" />{{
+                            t('oauthFlow.authLinkOrCode')
+                          }}
                         </label>
                         <textarea
                           v-model="authCode"
@@ -440,17 +455,18 @@
                       >
                         <p class="text-xs text-blue-700 dark:text-blue-300">
                           <i class="fas fa-lightbulb mr-1" />
-                          <strong>{{ t('oauthFlow.openaiTip') }}</strong>{{ t('oauthFlow.openaiTipText') }}
+                          <strong>{{ t('oauthFlow.openaiTip') }}</strong
+                          >{{ t('oauthFlow.openaiTipText') }}
                         </p>
                         <p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
-                          {{ t('oauthFlow.openaiLinkExample') }}<span class="font-mono"
+                          {{ t('oauthFlow.openaiLinkExample')
+                          }}<span class="font-mono"
                             >http://localhost:1455/auth/callback?code=ac_4hm8...</span
                           >
                         </p>
                         <p class="text-xs text-blue-600">
-                          {{ t('oauthFlow.openaiCodeExample') }}<span class="font-mono"
-                            >ac_4hm8iqmx9A2fzMy_cwye7U3W7...</span
-                          >
+                          {{ t('oauthFlow.openaiCodeExample')
+                          }}<span class="font-mono">ac_4hm8iqmx9A2fzMy_cwye7U3W7...</span>
                         </p>
                       </div>
                     </div>
diff --git a/web/admin-spa/src/components/accounts/ProxyConfig.vue b/web/admin-spa/src/components/accounts/ProxyConfig.vue
index 85d10e29..bc50d2c1 100644
--- a/web/admin-spa/src/components/accounts/ProxyConfig.vue
+++ b/web/admin-spa/src/components/accounts/ProxyConfig.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="space-y-4">
     <div class="flex items-center justify-between">
-      <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ t('proxyConfig.title') }}</h4>
+      <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+        {{ t('proxyConfig.title') }}
+      </h4>
       <label class="flex cursor-pointer items-center">
         <input
           v-model="proxy.enabled"
           class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-blue-500"
           type="checkbox"
         />
-        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ t('proxyConfig.enableProxy') }}</span>
+        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{
+          t('proxyConfig.enableProxy')
+        }}</span>
       </label>
     </div>
 
@@ -70,9 +74,9 @@
       <div class="my-3 border-t border-gray-200 dark:border-gray-600"></div>
 
       <div>
-        <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >{{ t('proxyConfig.proxyType') }}</label
-        >
+        <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{
+          t('proxyConfig.proxyType')
+        }}</label>
         <select
           v-model="proxy.type"
           class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
@@ -85,9 +89,9 @@
 
       <div class="grid grid-cols-2 gap-4">
         <div>
-          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >{{ t('proxyConfig.hostAddress') }}</label
-          >
+          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{
+            t('proxyConfig.hostAddress')
+          }}</label>
           <input
             v-model="proxy.host"
             class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -96,9 +100,9 @@
           />
         </div>
         <div>
-          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-            >{{ t('proxyConfig.port') }}</label
-          >
+          <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{
+            t('proxyConfig.port')
+          }}</label>
           <input
             v-model="proxy.port"
             class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -126,9 +130,9 @@
 
         <div v-if="showAuth" class="grid grid-cols-2 gap-4">
           <div>
-            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >{{ t('proxyConfig.username') }}</label
-            >
+            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{
+              t('proxyConfig.username')
+            }}</label>
             <input
               v-model="proxy.username"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
@@ -137,9 +141,9 @@
             />
           </div>
           <div>
-            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >{{ t('proxyConfig.password') }}</label
-            >
+            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">{{
+              t('proxyConfig.password')
+            }}</label>
             <div class="relative">
               <input
                 v-model="proxy.password"
diff --git a/web/admin-spa/src/components/admin/ChangeRoleModal.vue b/web/admin-spa/src/components/admin/ChangeRoleModal.vue
index 88a7f5d4..a01009f3 100644
--- a/web/admin-spa/src/components/admin/ChangeRoleModal.vue
+++ b/web/admin-spa/src/components/admin/ChangeRoleModal.vue
@@ -64,7 +64,9 @@
           <!-- Role Selection -->
           <form class="space-y-4" @submit.prevent="handleSubmit">
             <div>
-              <label class="mb-2 block text-sm font-medium text-gray-700"> {{ $t('user.changeRoleModal.newRole') }} </label>
+              <label class="mb-2 block text-sm font-medium text-gray-700">
+                {{ $t('user.changeRoleModal.newRole') }}
+              </label>
               <div class="space-y-2">
                 <label class="flex items-center">
                   <input
@@ -75,8 +77,12 @@
                     value="user"
                   />
                   <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900">{{ $t('user.changeRoleModal.roles.user') }}</div>
-                    <div class="text-xs text-gray-500">{{ $t('user.changeRoleModal.roles.userDesc') }}</div>
+                    <div class="text-sm font-medium text-gray-900">
+                      {{ $t('user.changeRoleModal.roles.user') }}
+                    </div>
+                    <div class="text-xs text-gray-500">
+                      {{ $t('user.changeRoleModal.roles.userDesc') }}
+                    </div>
                   </div>
                 </label>
                 <label class="flex items-center">
@@ -88,8 +94,12 @@
                     value="admin"
                   />
                   <div class="ml-3">
-                    <div class="text-sm font-medium text-gray-900">{{ $t('user.changeRoleModal.roles.admin') }}</div>
-                    <div class="text-xs text-gray-500">{{ $t('user.changeRoleModal.roles.adminDesc') }}</div>
+                    <div class="text-sm font-medium text-gray-900">
+                      {{ $t('user.changeRoleModal.roles.admin') }}
+                    </div>
+                    <div class="text-xs text-gray-500">
+                      {{ $t('user.changeRoleModal.roles.adminDesc') }}
+                    </div>
                   </div>
                 </label>
               </div>
@@ -111,7 +121,9 @@
                   </svg>
                 </div>
                 <div class="ml-3">
-                  <h3 class="text-sm font-medium text-yellow-800">{{ $t('user.changeRoleModal.roleChangeWarning.title') }}</h3>
+                  <h3 class="text-sm font-medium text-yellow-800">
+                    {{ $t('user.changeRoleModal.roleChangeWarning.title') }}
+                  </h3>
                   <div class="mt-2 text-sm text-yellow-700">
                     <p v-if="selectedRole === 'admin'">
                       {{ $t('user.changeRoleModal.roleChangeWarning.grantAdmin') }}
diff --git a/web/admin-spa/src/components/admin/UserUsageStatsModal.vue b/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
index f2a8696c..242c70d7 100644
--- a/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
+++ b/web/admin-spa/src/components/admin/UserUsageStatsModal.vue
@@ -8,7 +8,11 @@
         <div class="mb-6 flex items-center justify-between">
           <div>
             <h3 class="text-lg font-medium text-gray-900">
-              {{ $t('user.usageStatsModal.titleWithUser', { displayName: user?.displayName || user?.username }) }}
+              {{
+                $t('user.usageStatsModal.titleWithUser', {
+                  displayName: user?.displayName || user?.username
+                })
+              }}
             </h3>
             <p class="text-sm text-gray-500">@{{ user?.username }} • {{ user?.role }}</p>
           </div>
@@ -34,7 +38,9 @@
             <option value="day">{{ $t('user.usageStatsModal.periodSelection.day') }}</option>
             <option value="week">{{ $t('user.usageStatsModal.periodSelection.week') }}</option>
             <option value="month">{{ $t('user.usageStatsModal.periodSelection.month') }}</option>
-            <option value="quarter">{{ $t('user.usageStatsModal.periodSelection.quarter') }}</option>
+            <option value="quarter">
+              {{ $t('user.usageStatsModal.periodSelection.quarter') }}
+            </option>
           </select>
         </div>
 
@@ -87,7 +93,9 @@
                   </div>
                   <div class="ml-5 w-0 flex-1">
                     <dl>
-                      <dt class="truncate text-sm font-medium text-blue-600">{{ $t('user.usageStatsModal.summaryCards.requests') }}</dt>
+                      <dt class="truncate text-sm font-medium text-blue-600">
+                        {{ $t('user.usageStatsModal.summaryCards.requests') }}
+                      </dt>
                       <dd class="text-lg font-medium text-blue-900">
                         {{ formatNumber(usageStats?.totalRequests || 0) }}
                       </dd>
@@ -117,7 +125,9 @@
                   </div>
                   <div class="ml-5 w-0 flex-1">
                     <dl>
-                      <dt class="truncate text-sm font-medium text-green-600">{{ $t('user.usageStatsModal.summaryCards.inputTokens') }}</dt>
+                      <dt class="truncate text-sm font-medium text-green-600">
+                        {{ $t('user.usageStatsModal.summaryCards.inputTokens') }}
+                      </dt>
                       <dd class="text-lg font-medium text-green-900">
                         {{ formatNumber(usageStats?.totalInputTokens || 0) }}
                       </dd>
@@ -147,7 +157,9 @@
                   </div>
                   <div class="ml-5 w-0 flex-1">
                     <dl>
-                      <dt class="truncate text-sm font-medium text-purple-600">{{ $t('user.usageStatsModal.summaryCards.outputTokens') }}</dt>
+                      <dt class="truncate text-sm font-medium text-purple-600">
+                        {{ $t('user.usageStatsModal.summaryCards.outputTokens') }}
+                      </dt>
                       <dd class="text-lg font-medium text-purple-900">
                         {{ formatNumber(usageStats?.totalOutputTokens || 0) }}
                       </dd>
@@ -177,7 +189,9 @@
                   </div>
                   <div class="ml-5 w-0 flex-1">
                     <dl>
-                      <dt class="truncate text-sm font-medium text-yellow-600">{{ $t('user.usageStatsModal.summaryCards.totalCost') }}</dt>
+                      <dt class="truncate text-sm font-medium text-yellow-600">
+                        {{ $t('user.usageStatsModal.summaryCards.totalCost') }}
+                      </dt>
                       <dd class="text-lg font-medium text-yellow-900">
                         ${{ (usageStats?.totalCost || 0).toFixed(4) }}
                       </dd>
@@ -194,7 +208,9 @@
             class="rounded-lg border border-gray-200 bg-white"
           >
             <div class="border-b border-gray-200 px-4 py-5 sm:px-6">
-              <h4 class="text-lg font-medium leading-6 text-gray-900">{{ $t('user.usageStatsModal.apiKeysTable.title') }}</h4>
+              <h4 class="text-lg font-medium leading-6 text-gray-900">
+                {{ $t('user.usageStatsModal.apiKeysTable.title') }}
+              </h4>
             </div>
             <div class="overflow-hidden">
               <table class="min-w-full divide-y divide-gray-200">
@@ -253,21 +269,35 @@
                             : 'bg-red-100 text-red-800'
                         ]"
                       >
-                        {{ apiKey.isActive ? $t('user.usageStatsModal.apiKeysTable.status.active') : $t('user.usageStatsModal.apiKeysTable.status.disabled') }}
+                        {{
+                          apiKey.isActive
+                            ? $t('user.usageStatsModal.apiKeysTable.status.active')
+                            : $t('user.usageStatsModal.apiKeysTable.status.disabled')
+                        }}
                       </span>
                     </td>
                     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                       {{ formatNumber(apiKey.usage?.requests || 0) }}
                     </td>
                     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
-                      <div>{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.input') }}: {{ formatNumber(apiKey.usage?.inputTokens || 0) }}</div>
-                      <div>{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.output') }}: {{ formatNumber(apiKey.usage?.outputTokens || 0) }}</div>
+                      <div>
+                        {{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.input') }}:
+                        {{ formatNumber(apiKey.usage?.inputTokens || 0) }}
+                      </div>
+                      <div>
+                        {{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.output') }}:
+                        {{ formatNumber(apiKey.usage?.outputTokens || 0) }}
+                      </div>
                     </td>
                     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                       ${{ (apiKey.usage?.totalCost || 0).toFixed(4) }}
                     </td>
                     <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
-                      {{ apiKey.lastUsedAt ? formatDate(apiKey.lastUsedAt) : $t('user.usageStatsModal.apiKeysTable.never') }}
+                      {{
+                        apiKey.lastUsedAt
+                          ? formatDate(apiKey.lastUsedAt)
+                          : $t('user.usageStatsModal.apiKeysTable.never')
+                      }}
                     </td>
                   </tr>
                 </tbody>
@@ -278,7 +308,9 @@
           <!-- Chart Placeholder -->
           <div class="rounded-lg border border-gray-200 bg-white">
             <div class="border-b border-gray-200 px-4 py-5 sm:px-6">
-              <h4 class="text-lg font-medium leading-6 text-gray-900">{{ $t('user.usageStatsModal.usageTrend.title') }}</h4>
+              <h4 class="text-lg font-medium leading-6 text-gray-900">
+                {{ $t('user.usageStatsModal.usageTrend.title') }}
+              </h4>
             </div>
             <div class="p-6">
               <div
@@ -298,9 +330,13 @@
                       stroke-width="2"
                     />
                   </svg>
-                  <h3 class="mt-2 text-sm font-medium text-gray-900">{{ $t('user.usageStatsModal.usageTrend.chartTitle') }}</h3>
+                  <h3 class="mt-2 text-sm font-medium text-gray-900">
+                    {{ $t('user.usageStatsModal.usageTrend.chartTitle') }}
+                  </h3>
                   <p class="mt-1 text-sm text-gray-500">
-                    {{ $t('user.usageStatsModal.usageTrend.dailyTrends', { period: selectedPeriod }) }}
+                    {{
+                      $t('user.usageStatsModal.usageTrend.dailyTrends', { period: selectedPeriod })
+                    }}
                   </p>
                   <p class="mt-2 text-xs text-gray-400">
                     {{ $t('user.usageStatsModal.usageTrend.chartNote') }}
@@ -325,7 +361,9 @@
                 stroke-width="2"
               />
             </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">{{ $t('user.usageStatsModal.noData.title') }}</h3>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              {{ $t('user.usageStatsModal.noData.title') }}
+            </h3>
             <p class="mt-1 text-sm text-gray-500">
               {{ $t('user.usageStatsModal.noData.description') }}
             </p>
@@ -349,9 +387,7 @@
 import { ref, watch } from 'vue'
 import { apiClient } from '@/config/api'
 import { showToast } from '@/utils/toast'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
+// import { useI18n } from 'vue-i18n' - using $t in template instead
 
 const props = defineProps({
   show: {
diff --git a/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue b/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue
index 2f05008d..cd9dfbda 100644
--- a/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/BatchApiKeyModal.vue
@@ -12,13 +12,17 @@
               <i class="fas fa-layer-group text-lg text-white" />
             </div>
             <div>
-              <h3 class="text-xl font-bold text-gray-900">批量创建成功</h3>
-              <p class="text-sm text-gray-600">成功创建 {{ apiKeys.length }} 个 API Key</p>
+              <h3 class="text-xl font-bold text-gray-900">
+                {{ $t('apiKeys.batchApiKeyModal.title') }}
+              </h3>
+              <p class="text-sm text-gray-600">
+                {{ $t('apiKeys.batchApiKeyModal.successMessage', { count: apiKeys.length }) }}
+              </p>
             </div>
           </div>
           <button
             class="text-gray-400 transition-colors hover:text-gray-600"
-            title="直接关闭（不推荐）"
+            :title="$t('apiKeys.batchApiKeyModal.directCloseTooltip')"
             @click="handleDirectClose"
           >
             <i class="fas fa-times text-xl" />
@@ -34,10 +38,11 @@
               <i class="fas fa-exclamation-triangle text-sm text-white" />
             </div>
             <div class="ml-3">
-              <h5 class="mb-1 font-semibold text-amber-900">重要提醒</h5>
+              <h5 class="mb-1 font-semibold text-amber-900">
+                {{ $t('apiKeys.batchApiKeyModal.importantReminder') }}
+              </h5>
               <p class="text-sm text-amber-800">
-                这是您唯一能看到所有 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API
-                Key。请立即下载并妥善保存。
+                {{ $t('apiKeys.batchApiKeyModal.warningMessage') }}
               </p>
             </div>
           </div>
@@ -50,7 +55,9 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-xs font-medium text-blue-600">创建数量</p>
+                <p class="text-xs font-medium text-blue-600">
+                  {{ $t('apiKeys.batchApiKeyModal.createdCount') }}
+                </p>
                 <p class="mt-1 text-2xl font-bold text-blue-900">
                   {{ apiKeys.length }}
                 </p>
@@ -68,7 +75,9 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-xs font-medium text-green-600">基础名称</p>
+                <p class="text-xs font-medium text-green-600">
+                  {{ $t('apiKeys.batchApiKeyModal.baseName') }}
+                </p>
                 <p class="mt-1 truncate text-lg font-bold text-green-900">
                   {{ baseName }}
                 </p>
@@ -86,7 +95,9 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-xs font-medium text-purple-600">权限范围</p>
+                <p class="text-xs font-medium text-purple-600">
+                  {{ $t('apiKeys.batchApiKeyModal.permissionScope') }}
+                </p>
                 <p class="mt-1 text-lg font-bold text-purple-900">
                   {{ getPermissionText() }}
                 </p>
@@ -104,7 +115,9 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-xs font-medium text-orange-600">过期时间</p>
+                <p class="text-xs font-medium text-orange-600">
+                  {{ $t('apiKeys.batchApiKeyModal.expiryTime') }}
+                </p>
                 <p class="mt-1 text-lg font-bold text-orange-900">
                   {{ getExpiryText() }}
                 </p>
@@ -121,7 +134,9 @@
         <!-- API Keys 预览 -->
         <div class="mb-6">
           <div class="mb-3 flex items-center justify-between">
-            <label class="text-sm font-semibold text-gray-700">API Keys 预览</label>
+            <label class="text-sm font-semibold text-gray-700">{{
+              $t('apiKeys.batchApiKeyModal.previewTitle')
+            }}</label>
             <div class="flex items-center gap-2">
               <button
                 class="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800"
@@ -129,9 +144,15 @@
                 @click="togglePreview"
               >
                 <i :class="['fas', showPreview ? 'fa-eye-slash' : 'fa-eye']" />
-                {{ showPreview ? '隐藏' : '显示' }}预览
+                {{
+                  showPreview
+                    ? $t('apiKeys.batchApiKeyModal.hide')
+                    : $t('apiKeys.batchApiKeyModal.show')
+                }}{{ $t('apiKeys.batchApiKeyModal.preview') }}
               </button>
-              <span class="text-xs text-gray-500">（最多显示前10个）</span>
+              <span class="text-xs text-gray-500">{{
+                $t('apiKeys.batchApiKeyModal.maxDisplayNote')
+              }}</span>
             </div>
           </div>
 
@@ -150,13 +171,13 @@
             @click="downloadApiKeys"
           >
             <i class="fas fa-download" />
-            下载所有 API Keys
+            {{ $t('apiKeys.batchApiKeyModal.downloadAll') }}
           </button>
           <button
             class="rounded-xl border border-gray-300 bg-gray-200 px-6 py-3 font-semibold text-gray-800 transition-colors hover:bg-gray-300"
             @click="handleClose"
           >
-            我已保存
+            {{ $t('apiKeys.batchApiKeyModal.alreadySaved') }}
           </button>
         </div>
 
@@ -165,8 +186,7 @@
           <p class="flex items-start text-xs text-blue-700">
             <i class="fas fa-info-circle mr-2 mt-0.5 flex-shrink-0" />
             <span>
-              下载的文件格式为文本文件（.txt），每行包含一个 API Key。
-              请将文件保存在安全的位置，避免泄露。
+              {{ $t('apiKeys.batchApiKeyModal.fileFormatInfo') }}
             </span>
           </p>
         </div>
@@ -177,8 +197,11 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 
+const { t } = useI18n()
+
 const props = defineProps({
   apiKeys: {
     type: Array,
@@ -203,30 +226,28 @@ const baseName = computed(() => {
 
 // 获取权限文本
 const getPermissionText = () => {
-  if (props.apiKeys.length === 0) return '未知'
+  if (props.apiKeys.length === 0) return t('apiKeys.batchApiKeyModal.permissions.unknown')
   const permissions = props.apiKeys[0].permissions
-  const permissionMap = {
-    all: '全部服务',
-    claude: '仅 Claude',
-    gemini: '仅 Gemini'
-  }
-  return permissionMap[permissions] || permissions
+  const permissionKey = `apiKeys.batchApiKeyModal.permissions.${permissions}`
+  return t(permissionKey, t('apiKeys.batchApiKeyModal.permissions.unknown'))
 }
 
 // 获取过期时间文本
 const getExpiryText = () => {
-  if (props.apiKeys.length === 0) return '未知'
+  if (props.apiKeys.length === 0) return t('apiKeys.batchApiKeyModal.permissions.unknown')
   const expiresAt = props.apiKeys[0].expiresAt
-  if (!expiresAt) return '永不过期'
+  if (!expiresAt) return t('apiKeys.batchApiKeyModal.neverExpire')
 
   const expiryDate = new Date(expiresAt)
   const now = new Date()
   const diffDays = Math.ceil((expiryDate - now) / (1000 * 60 * 60 * 24))
 
-  if (diffDays <= 7) return `${diffDays}天`
-  if (diffDays <= 30) return `${Math.ceil(diffDays / 7)}周`
-  if (diffDays <= 365) return `${Math.ceil(diffDays / 30)}个月`
-  return `${Math.ceil(diffDays / 365)}年`
+  if (diffDays <= 7) return t('apiKeys.batchApiKeyModal.daysFormat', { days: diffDays })
+  if (diffDays <= 30)
+    return t('apiKeys.batchApiKeyModal.weeksFormat', { weeks: Math.ceil(diffDays / 7) })
+  if (diffDays <= 365)
+    return t('apiKeys.batchApiKeyModal.monthsFormat', { months: Math.ceil(diffDays / 30) })
+  return t('apiKeys.batchApiKeyModal.yearsFormat', { years: Math.ceil(diffDays / 365) })
 }
 
 // 切换预览显示
@@ -242,7 +263,7 @@ const getPreviewText = () => {
   })
 
   if (props.apiKeys.length > 10) {
-    lines.push(`... 还有 ${props.apiKeys.length - 10} 个 API Key`)
+    lines.push(t('apiKeys.batchApiKeyModal.moreKeysNote', { count: props.apiKeys.length - 10 }))
   }
 
   return lines.join('\n')
@@ -277,26 +298,24 @@ const downloadApiKeys = () => {
   // 释放 URL 对象
   URL.revokeObjectURL(url)
 
-  showToast('API Keys 文件已下载', 'success')
+  showToast(t('apiKeys.batchApiKeyModal.downloadSuccess'), 'success')
 }
 
 // 关闭弹窗（带确认）
 const handleClose = async () => {
   if (window.showConfirm) {
     const confirmed = await window.showConfirm(
-      '关闭提醒',
-      '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？',
-      '确定关闭',
-      '返回下载'
+      t('apiKeys.batchApiKeyModal.closeReminderTitle'),
+      t('apiKeys.batchApiKeyModal.closeReminderMessage'),
+      t('apiKeys.batchApiKeyModal.confirmCloseButton'),
+      t('apiKeys.batchApiKeyModal.goBackDownloadButton')
     )
     if (confirmed) {
       emit('close')
     }
   } else {
     // 降级方案
-    const confirmed = confirm(
-      '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？'
-    )
+    const confirmed = confirm(t('apiKeys.batchApiKeyModal.closeReminderMessage'))
     if (confirmed) {
       emit('close')
     }
@@ -307,17 +326,17 @@ const handleClose = async () => {
 const handleDirectClose = async () => {
   if (window.showConfirm) {
     const confirmed = await window.showConfirm(
-      '确定要关闭吗？',
-      '您还没有下载 API Keys，关闭后将无法再次查看。\n\n强烈建议您先下载保存。',
-      '仍然关闭',
-      '返回下载'
+      t('apiKeys.batchApiKeyModal.directCloseTitle'),
+      t('apiKeys.batchApiKeyModal.directCloseMessage'),
+      t('apiKeys.batchApiKeyModal.stillCloseButton'),
+      t('apiKeys.batchApiKeyModal.goBackDownloadButton')
     )
     if (confirmed) {
       emit('close')
     }
   } else {
     // 降级方案
-    const confirmed = confirm('您还没有下载 API Keys，关闭后将无法再次查看。\n\n确定要关闭吗？')
+    const confirmed = confirm(t('apiKeys.batchApiKeyModal.directCloseFallbackMessage'))
     if (confirmed) {
       emit('close')
     }
diff --git a/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
index 284a6f4c..22193f19 100644
--- a/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/BatchEditApiKeyModal.vue
@@ -12,7 +12,7 @@
               <i class="fas fa-edit text-sm text-white sm:text-base" />
             </div>
             <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
-              批量编辑 API Keys ({{ selectedCount }} 个)
+              {{ $t('apiKeys.batchEditApiKeyModal.title', { count: selectedCount }) }}
             </h3>
           </div>
           <button
@@ -32,10 +32,11 @@
             <div class="flex items-start gap-3">
               <i class="fas fa-info-circle mt-1 text-blue-500" />
               <div>
-                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">批量编辑说明</p>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-300">
+                  {{ $t('apiKeys.batchEditApiKeyModal.infoTitle') }}
+                </p>
                 <p class="mt-1 text-sm text-blue-700 dark:text-blue-400">
-                  以下设置将应用到所选的 {{ selectedCount }} 个 API
-                  Key。只有填写或修改的字段才会被更新，空白字段将保持原值不变。
+                  {{ $t('apiKeys.batchEditApiKeyModal.infoContent', { count: selectedCount }) }}
                 </p>
               </div>
             </div>
@@ -46,26 +47,34 @@
             <label
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
             >
-              标签 (批量操作)
+              {{ $t('apiKeys.batchEditApiKeyModal.tagLabel') }}
             </label>
             <div class="space-y-4">
               <!-- 标签操作模式选择 -->
               <div class="flex flex-wrap gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input v-model="tagOperation" class="mr-2" type="radio" value="replace" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">替换标签</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.tagOperations.replace')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input v-model="tagOperation" class="mr-2" type="radio" value="add" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">添加标签</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.tagOperations.add')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input v-model="tagOperation" class="mr-2" type="radio" value="remove" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">移除标签</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.tagOperations.remove')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input v-model="tagOperation" class="mr-2" type="radio" value="none" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">不修改标签</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.tagOperations.none')
+                  }}</span>
                 </label>
               </div>
 
@@ -76,10 +85,10 @@
                   <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
                     {{
                       tagOperation === 'replace'
-                        ? '新标签列表:'
+                        ? $t('apiKeys.batchEditApiKeyModal.newTagsList')
                         : tagOperation === 'add'
-                          ? '要添加的标签:'
-                          : '要移除的标签:'
+                          ? $t('apiKeys.batchEditApiKeyModal.tagsToAdd')
+                          : $t('apiKeys.batchEditApiKeyModal.tagsToRemove')
                     }}
                   </div>
                   <div class="flex flex-wrap gap-2">
@@ -103,7 +112,7 @@
                 <!-- 可选择的已有标签 -->
                 <div v-if="unselectedTags.length > 0">
                   <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                    点击选择已有标签:
+                    {{ $t('apiKeys.batchEditApiKeyModal.clickToSelectTags') }}
                   </div>
                   <div class="flex flex-wrap gap-2">
                     <button
@@ -122,13 +131,13 @@
                 <!-- 创建新标签 -->
                 <div>
                   <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                    创建新标签:
+                    {{ $t('apiKeys.batchEditApiKeyModal.createNewTag') }}
                   </div>
                   <div class="flex gap-2">
                     <input
                       v-model="newTag"
                       class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
-                      placeholder="输入新标签名称"
+                      :placeholder="$t('apiKeys.batchEditApiKeyModal.inputNewTagPlaceholder')"
                       type="text"
                       @keypress.enter.prevent="addTag"
                     />
@@ -155,46 +164,48 @@
               >
                 <i class="fas fa-tachometer-alt text-xs text-white" />
               </div>
-              <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">速率限制设置</h4>
+              <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
+                {{ $t('apiKeys.batchEditApiKeyModal.rateLimitTitle') }}
+              </h4>
             </div>
 
             <div class="space-y-2">
               <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
                 <div>
                   <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">
-                    时间窗口 (分钟)
+                    {{ $t('apiKeys.batchEditApiKeyModal.rateLimitWindow') }}
                   </label>
                   <input
                     v-model="form.rateLimitWindow"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                     min="1"
-                    placeholder="不修改"
+                    :placeholder="$t('apiKeys.batchEditApiKeyModal.noModifyPlaceholder')"
                     type="number"
                   />
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >请求次数限制</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.rateLimitRequests')
+                  }}</label>
                   <input
                     v-model="form.rateLimitRequests"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                     min="1"
-                    placeholder="不修改"
+                    :placeholder="$t('apiKeys.batchEditApiKeyModal.noModifyPlaceholder')"
                     type="number"
                   />
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >费用限制 (美元)</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.rateLimitCost')
+                  }}</label>
                   <input
                     v-model="form.rateLimitCost"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                     min="0"
-                    placeholder="不修改"
+                    :placeholder="$t('apiKeys.batchEditApiKeyModal.noModifyPlaceholder')"
                     step="0.01"
                     type="number"
                   />
@@ -206,13 +217,13 @@
           <!-- 每日费用限制 -->
           <div>
             <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
-              每日费用限制 (美元)
+              {{ $t('apiKeys.batchEditApiKeyModal.dailyCostLimit') }}
             </label>
             <input
               v-model="form.dailyCostLimit"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
               min="0"
-              placeholder="不修改 (0 表示无限制)"
+              :placeholder="$t('apiKeys.batchEditApiKeyModal.dailyCostLimitPlaceholder')"
               step="0.01"
               type="number"
             />
@@ -221,31 +232,31 @@
           <!-- Opus 模型周费用限制 -->
           <div>
             <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
-              Opus 模型周费用限制 (美元)
+              {{ $t('apiKeys.batchEditApiKeyModal.weeklyOpusCostLimit') }}
             </label>
             <input
               v-model="form.weeklyOpusCostLimit"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
               min="0"
-              placeholder="不修改 (0 表示无限制)"
+              :placeholder="$t('apiKeys.batchEditApiKeyModal.weeklyOpusCostLimitPlaceholder')"
               step="0.01"
               type="number"
             />
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户
+              {{ $t('apiKeys.batchEditApiKeyModal.opusLimitDescription') }}
             </p>
           </div>
 
           <!-- 并发限制 -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >并发限制</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.batchEditApiKeyModal.concurrencyLimit')
+            }}</label>
             <input
               v-model="form.concurrencyLimit"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
               min="0"
-              placeholder="不修改 (0 表示无限制)"
+              :placeholder="$t('apiKeys.batchEditApiKeyModal.concurrencyLimitPlaceholder')"
               type="number"
             />
           </div>
@@ -253,19 +264,27 @@
           <!-- 激活状态 -->
           <div>
             <div class="mb-3 flex items-center gap-4">
-              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">激活状态</label>
+              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                $t('apiKeys.batchEditApiKeyModal.activeStatus')
+              }}</label>
               <div class="flex gap-4">
                 <label class="flex cursor-pointer items-center">
                   <input v-model="form.isActive" class="mr-2" type="radio" :value="true" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">激活</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.statusOptions.active')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input v-model="form.isActive" class="mr-2" type="radio" :value="false" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">禁用</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.statusOptions.disabled')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input v-model="form.isActive" class="mr-2" type="radio" :value="null" />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">不修改</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.batchEditApiKeyModal.statusOptions.noChange')
+                  }}</span>
                 </label>
               </div>
             </div>
@@ -273,29 +292,39 @@
 
           <!-- 服务权限 -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >服务权限</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.batchEditApiKeyModal.servicePermissions')
+            }}</label>
             <div class="flex flex-wrap gap-4">
               <label class="flex cursor-pointer items-center">
                 <input v-model="form.permissions" class="mr-2" type="radio" value="" />
-                <span class="text-sm text-gray-700">不修改</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.batchEditApiKeyModal.permissionOptions.noChange')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input v-model="form.permissions" class="mr-2" type="radio" value="all" />
-                <span class="text-sm text-gray-700">全部服务</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.batchEditApiKeyModal.permissionOptions.all')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input v-model="form.permissions" class="mr-2" type="radio" value="claude" />
-                <span class="text-sm text-gray-700">仅 Claude</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.batchEditApiKeyModal.permissionOptions.claude')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input v-model="form.permissions" class="mr-2" type="radio" value="gemini" />
-                <span class="text-sm text-gray-700">仅 Gemini</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.batchEditApiKeyModal.permissionOptions.gemini')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input v-model="form.permissions" class="mr-2" type="radio" value="openai" />
-                <span class="text-sm text-gray-700">仅 OpenAI</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.batchEditApiKeyModal.permissionOptions.openai')
+                }}</span>
               </label>
             </div>
           </div>
@@ -303,13 +332,13 @@
           <!-- 专属账号绑定 -->
           <div>
             <div class="mb-3 flex items-center justify-between">
-              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >专属账号绑定</label
-              >
+              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                $t('apiKeys.batchEditApiKeyModal.accountBinding')
+              }}</label>
               <button
                 class="flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-blue-400 dark:hover:text-blue-300"
                 :disabled="accountsLoading"
-                title="刷新账号列表"
+                :title="$t('apiKeys.batchEditApiKeyModal.refreshAccounts')"
                 type="button"
                 @click="refreshAccounts"
               >
@@ -320,31 +349,46 @@
                     'text-xs'
                   ]"
                 />
-                <span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
+                <span>{{
+                  accountsLoading
+                    ? $t('apiKeys.batchEditApiKeyModal.refreshing')
+                    : $t('apiKeys.batchEditApiKeyModal.refreshAccounts')
+                }}</span>
               </button>
             </div>
             <div class="grid grid-cols-1 gap-3">
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Claude 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.batchEditApiKeyModal.claudeAccount')
+                }}</label>
                 <select
                   v-model="form.claudeAccountId"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                 >
-                  <option value="">不修改</option>
-                  <option value="SHARED_POOL">使用共享账号池</option>
-                  <optgroup v-if="localAccounts.claudeGroups.length > 0" label="账号分组">
+                  <option value="">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.noChange') }}
+                  </option>
+                  <option value="SHARED_POOL">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.sharedPool') }}
+                  </option>
+                  <optgroup
+                    v-if="localAccounts.claudeGroups.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.accountGroups')"
+                  >
                     <option
                       v-for="group in localAccounts.claudeGroups"
                       :key="group.id"
                       :value="`group:${group.id}`"
                     >
-                      分组 - {{ group.name }}
+                      {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.groupPrefix')
+                      }}{{ group.name }}
                     </option>
                   </optgroup>
-                  <optgroup v-if="localAccounts.claude.length > 0" label="专属账号">
+                  <optgroup
+                    v-if="localAccounts.claude.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.dedicatedAccounts')"
+                  >
                     <option
                       v-for="account in localAccounts.claude"
                       :key="account.id"
@@ -360,26 +404,37 @@
                 </select>
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Gemini 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.batchEditApiKeyModal.geminiAccount')
+                }}</label>
                 <select
                   v-model="form.geminiAccountId"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                   :disabled="form.permissions === 'claude' || form.permissions === 'openai'"
                 >
-                  <option value="">不修改</option>
-                  <option value="SHARED_POOL">使用共享账号池</option>
-                  <optgroup v-if="localAccounts.geminiGroups.length > 0" label="账号分组">
+                  <option value="">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.noChange') }}
+                  </option>
+                  <option value="SHARED_POOL">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.sharedPool') }}
+                  </option>
+                  <optgroup
+                    v-if="localAccounts.geminiGroups.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.accountGroups')"
+                  >
                     <option
                       v-for="group in localAccounts.geminiGroups"
                       :key="group.id"
                       :value="`group:${group.id}`"
                     >
-                      分组 - {{ group.name }}
+                      {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.groupPrefix')
+                      }}{{ group.name }}
                     </option>
                   </optgroup>
-                  <optgroup v-if="localAccounts.gemini.length > 0" label="专属账号">
+                  <optgroup
+                    v-if="localAccounts.gemini.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.dedicatedAccounts')"
+                  >
                     <option
                       v-for="account in localAccounts.gemini"
                       :key="account.id"
@@ -391,26 +446,37 @@
                 </select>
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >OpenAI 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.batchEditApiKeyModal.openaiAccount')
+                }}</label>
                 <select
                   v-model="form.openaiAccountId"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                   :disabled="form.permissions === 'claude' || form.permissions === 'gemini'"
                 >
-                  <option value="">不修改</option>
-                  <option value="SHARED_POOL">使用共享账号池</option>
-                  <optgroup v-if="localAccounts.openaiGroups.length > 0" label="账号分组">
+                  <option value="">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.noChange') }}
+                  </option>
+                  <option value="SHARED_POOL">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.sharedPool') }}
+                  </option>
+                  <optgroup
+                    v-if="localAccounts.openaiGroups.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.accountGroups')"
+                  >
                     <option
                       v-for="group in localAccounts.openaiGroups"
                       :key="group.id"
                       :value="`group:${group.id}`"
                     >
-                      分组 - {{ group.name }}
+                      {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.groupPrefix')
+                      }}{{ group.name }}
                     </option>
                   </optgroup>
-                  <optgroup v-if="localAccounts.openai.length > 0" label="专属账号">
+                  <optgroup
+                    v-if="localAccounts.openai.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.dedicatedAccounts')"
+                  >
                     <option
                       v-for="account in localAccounts.openai"
                       :key="account.id"
@@ -422,17 +488,24 @@
                 </select>
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Bedrock 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.batchEditApiKeyModal.bedrockAccount')
+                }}</label>
                 <select
                   v-model="form.bedrockAccountId"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                 >
-                  <option value="">不修改</option>
-                  <option value="SHARED_POOL">使用共享账号池</option>
-                  <optgroup v-if="localAccounts.bedrock.length > 0" label="专属账号">
+                  <option value="">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.noChange') }}
+                  </option>
+                  <option value="SHARED_POOL">
+                    {{ $t('apiKeys.batchEditApiKeyModal.accountOptions.sharedPool') }}
+                  </option>
+                  <optgroup
+                    v-if="localAccounts.bedrock.length > 0"
+                    :label="$t('apiKeys.batchEditApiKeyModal.optgroupLabels.dedicatedAccounts')"
+                  >
                     <option
                       v-for="account in localAccounts.bedrock"
                       :key="account.id"
@@ -452,7 +525,7 @@
               type="button"
               @click="$emit('close')"
             >
-              取消
+              {{ $t('apiKeys.batchEditApiKeyModal.cancel') }}
             </button>
             <button
               class="btn btn-primary flex-1 px-6 py-3 font-semibold"
@@ -461,7 +534,11 @@
             >
               <div v-if="loading" class="loading-spinner mr-2" />
               <i v-else class="fas fa-save mr-2" />
-              {{ loading ? '保存中...' : '批量保存' }}
+              {{
+                loading
+                  ? $t('apiKeys.batchEditApiKeyModal.saving')
+                  : $t('apiKeys.batchEditApiKeyModal.batchSave')
+              }}
             </button>
           </div>
         </form>
@@ -472,10 +549,13 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 import { useApiKeysStore } from '@/stores/apiKeys'
 import { apiClient } from '@/config/api'
 
+const { t } = useI18n()
+
 const props = defineProps({
   selectedKeys: {
     type: Array,
@@ -620,9 +700,9 @@ const refreshAccounts = async () => {
       localAccounts.value.openaiGroups = allGroups.filter((g) => g.platform === 'openai')
     }
 
-    showToast('账号列表已刷新', 'success')
+    showToast(t('apiKeys.batchEditApiKeyModal.refreshAccountsSuccess'), 'success')
   } catch (error) {
-    showToast('刷新账号列表失败', 'error')
+    showToast(t('apiKeys.batchEditApiKeyModal.refreshAccountsFailed'), 'error')
   } finally {
     accountsLoading.value = false
   }
@@ -722,24 +802,33 @@ const batchUpdateApiKeys = async () => {
       const { successCount, failedCount, errors } = result.data
 
       if (successCount > 0) {
-        showToast(`成功批量编辑 ${successCount} 个 API Keys`, 'success')
+        showToast(
+          t('apiKeys.batchEditApiKeyModal.batchEditSuccess', { count: successCount }),
+          'success'
+        )
 
         if (failedCount > 0) {
           const errorMessages = errors.map((e) => `${e.keyId}: ${e.error}`).join('\n')
-          showToast(`${failedCount} 个编辑失败:\n${errorMessages}`, 'warning')
+          showToast(
+            t('apiKeys.batchEditApiKeyModal.batchEditPartialFail', {
+              failedCount,
+              errors: errorMessages
+            }),
+            'warning'
+          )
         }
       } else {
-        showToast('所有 API Keys 编辑失败', 'error')
+        showToast(t('apiKeys.batchEditApiKeyModal.batchEditAllFailed'), 'error')
       }
 
       emit('success')
       emit('close')
     } else {
-      showToast(result.message || '批量编辑失败', 'error')
+      showToast(result.message || t('apiKeys.batchEditApiKeyModal.batchEditFailed'), 'error')
     }
   } catch (error) {
-    showToast('批量编辑失败', 'error')
-    console.error('批量编辑 API Keys 失败:', error)
+    showToast(t('apiKeys.batchEditApiKeyModal.batchEditFailed'), 'error')
+    console.error(t('apiKeys.batchEditApiKeyModal.batchEditErrorLog'), error)
   } finally {
     loading.value = false
   }
diff --git a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
index 96bdd0f3..ce5156df 100644
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -10,7 +10,7 @@
               <i class="fas fa-key text-sm text-white sm:text-base" />
             </div>
             <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
-              创建新的 API Key
+              {{ $t('apiKeys.createApiKeyModal.title') }}
             </h3>
           </div>
           <button
@@ -37,7 +37,7 @@
             >
               <label
                 class="flex h-full items-center text-xs font-semibold text-gray-700 dark:text-gray-300 sm:text-sm"
-                >创建类型</label
+                >{{ $t('apiKeys.createApiKeyModal.createType') }}</label
               >
               <div class="flex items-center gap-3 sm:gap-4">
                 <label class="flex cursor-pointer items-center">
@@ -51,7 +51,7 @@
                     class="flex items-center text-xs text-gray-700 dark:text-gray-300 sm:text-sm"
                   >
                     <i class="fas fa-key mr-1 text-xs" />
-                    单个创建
+                    {{ $t('apiKeys.createApiKeyModal.singleCreate') }}
                   </span>
                 </label>
                 <label class="flex cursor-pointer items-center">
@@ -65,7 +65,7 @@
                     class="flex items-center text-xs text-gray-700 dark:text-gray-300 sm:text-sm"
                   >
                     <i class="fas fa-layer-group mr-1 text-xs" />
-                    批量创建
+                    {{ $t('apiKeys.createApiKeyModal.batchCreate') }}
                   </span>
                 </label>
               </div>
@@ -75,32 +75,30 @@
             <div v-if="form.createType === 'batch'" class="mt-3">
               <div class="flex items-center gap-4">
                 <div class="flex-1">
-                  <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400"
-                    >创建数量</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">{{
+                    $t('apiKeys.createApiKeyModal.batchCount')
+                  }}</label>
                   <div class="flex items-center gap-2">
                     <input
                       v-model.number="form.batchCount"
                       class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                       max="500"
                       min="2"
-                      placeholder="输入数量 (2-500)"
+                      :placeholder="$t('apiKeys.createApiKeyModal.batchCountPlaceholder')"
                       required
                       type="number"
                     />
                     <div class="whitespace-nowrap text-xs text-gray-500 dark:text-gray-400">
-                      最大支持 500 个
+                      {{ $t('apiKeys.createApiKeyModal.maxSupported') }}
                     </div>
                   </div>
                 </div>
               </div>
               <p class="mt-2 flex items-start text-xs text-amber-600 dark:text-amber-400">
                 <i class="fas fa-info-circle mr-1 mt-0.5 flex-shrink-0" />
-                <span
-                  >批量创建时，每个 Key 的名称会自动添加序号后缀，例如：{{
-                    form.name || 'MyKey'
-                  }}_1, {{ form.name || 'MyKey' }}_2 ...</span
-                >
+                <span>{{
+                  $t('apiKeys.createApiKeyModal.batchHint', { name: form.name || 'MyKey' })
+                }}</span>
               </p>
             </div>
           </div>
@@ -108,23 +106,24 @@
           <div>
             <label
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-2 sm:text-sm"
-              >名称 <span class="text-red-500">*</span></label
+              >{{ $t('apiKeys.createApiKeyModal.name') }}
+              <span class="text-red-500">{{
+                $t('apiKeys.createApiKeyModal.nameRequired')
+              }}</span></label
             >
-            <div>
-              <input
-                v-model="form.name"
-                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                :class="{ 'border-red-500': errors.name }"
-                :placeholder="
-                  form.createType === 'batch'
-                    ? '输入基础名称（将自动添加序号）'
-                    : '为您的 API Key 取一个名称'
-                "
-                required
-                type="text"
-                @input="errors.name = ''"
-              />
-            </div>
+            <input
+              v-model="form.name"
+              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+              :class="{ 'border-red-500': errors.name }"
+              :placeholder="
+                form.createType === 'batch'
+                  ? $t('apiKeys.createApiKeyModal.batchNamePlaceholder')
+                  : $t('apiKeys.createApiKeyModal.singleNamePlaceholder')
+              "
+              required
+              type="text"
+              @input="errors.name = ''"
+            />
             <p v-if="errors.name" class="mt-1 text-xs text-red-500 dark:text-red-400">
               {{ errors.name }}
             </p>
@@ -132,14 +131,14 @@
 
           <!-- 标签 -->
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >标签</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.tags')
+            }}</label>
             <div class="space-y-4">
               <!-- 已选择的标签 -->
               <div v-if="form.tags.length > 0">
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  已选择的标签:
+                  {{ $t('apiKeys.createApiKeyModal.selectedTags') }}
                 </div>
                 <div class="flex flex-wrap gap-2">
                   <span
@@ -162,7 +161,7 @@
               <!-- 可选择的已有标签 -->
               <div v-if="unselectedTags.length > 0">
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  点击选择已有标签:
+                  {{ $t('apiKeys.createApiKeyModal.clickToSelectTags') }}
                 </div>
                 <div class="flex flex-wrap gap-2">
                   <button
@@ -181,13 +180,13 @@
               <!-- 创建新标签 -->
               <div>
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  创建新标签:
+                  {{ $t('apiKeys.createApiKeyModal.createNewTag') }}
                 </div>
                 <div class="flex gap-2">
                   <input
                     v-model="newTag"
                     class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                    placeholder="输入新标签名称"
+                    :placeholder="$t('apiKeys.createApiKeyModal.newTagPlaceholder')"
                     type="text"
                     @keypress.enter.prevent="addTag"
                   />
@@ -202,7 +201,7 @@
               </div>
 
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                用于标记不同团队或用途，方便筛选管理
+                {{ $t('apiKeys.createApiKeyModal.tagHint') }}
               </p>
             </div>
           </div>
@@ -218,68 +217,76 @@
                 <i class="fas fa-tachometer-alt text-xs text-white" />
               </div>
               <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
-                速率限制设置 (可选)
+                {{ $t('apiKeys.createApiKeyModal.rateLimitTitle') }}
               </h4>
             </div>
 
             <div class="space-y-2">
               <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >时间窗口 (分钟)</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.createApiKeyModal.rateLimitWindow')
+                  }}</label>
                   <input
                     v-model="form.rateLimitWindow"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="1"
-                    placeholder="无限制"
+                    :placeholder="$t('apiKeys.createApiKeyModal.rateLimitWindowPlaceholder')"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">时间段单位</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ $t('apiKeys.createApiKeyModal.rateLimitWindowHint') }}
+                  </p>
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >请求次数限制</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.createApiKeyModal.rateLimitRequests')
+                  }}</label>
                   <input
                     v-model="form.rateLimitRequests"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="1"
-                    placeholder="无限制"
+                    :placeholder="$t('apiKeys.createApiKeyModal.rateLimitRequestsPlaceholder')"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">窗口内最大请求</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ $t('apiKeys.createApiKeyModal.rateLimitRequestsHint') }}
+                  </p>
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >费用限制 (美元)</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.createApiKeyModal.rateLimitCost')
+                  }}</label>
                   <input
                     v-model="form.rateLimitCost"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="0"
-                    placeholder="无限制"
+                    :placeholder="$t('apiKeys.createApiKeyModal.rateLimitCostPlaceholder')"
                     step="0.01"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">窗口内最大费用</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ $t('apiKeys.createApiKeyModal.rateLimitCostHint') }}
+                  </p>
                 </div>
               </div>
 
               <!-- 示例说明 -->
               <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
                 <h5 class="mb-1 text-xs font-semibold text-blue-800 dark:text-blue-400">
-                  💡 使用示例
+                  {{ $t('apiKeys.createApiKeyModal.exampleTitle') }}
                 </h5>
                 <div class="space-y-0.5 text-xs text-blue-700 dark:text-blue-300">
                   <div>
-                    <strong>示例1:</strong> 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求
+                    <strong>{{ $t('apiKeys.createApiKeyModal.example1') }}</strong>
                   </div>
-                  <div><strong>示例2:</strong> 时间窗口=1，费用=0.1 → 每分钟最多$0.1费用</div>
                   <div>
-                    <strong>示例3:</strong> 窗口=30，请求=50，费用=5 → 每30分钟50次请求且不超$5费用
+                    <strong>{{ $t('apiKeys.createApiKeyModal.example2') }}</strong>
+                  </div>
+                  <div>
+                    <strong>{{ $t('apiKeys.createApiKeyModal.example3') }}</strong>
                   </div>
                 </div>
               </div>
@@ -287,9 +294,9 @@
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >每日费用限制 (美元)</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.dailyCostLimit')
+            }}</label>
             <div class="space-y-2">
               <div class="flex gap-2">
                 <button
@@ -318,27 +325,27 @@
                   type="button"
                   @click="form.dailyCostLimit = ''"
                 >
-                  自定义
+                  {{ $t('apiKeys.createApiKeyModal.custom') }}
                 </button>
               </div>
               <input
                 v-model="form.dailyCostLimit"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                 min="0"
-                placeholder="0 表示无限制"
+                :placeholder="$t('apiKeys.createApiKeyModal.dailyCostLimitPlaceholder')"
                 step="0.01"
                 type="number"
               />
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                设置此 API Key 每日的费用限制，超过限制将拒绝请求，0 或留空表示无限制
+                {{ $t('apiKeys.createApiKeyModal.dailyCostHint') }}
               </p>
             </div>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >Opus 模型周费用限制 (美元)</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.weeklyOpusCostLimit')
+            }}</label>
             <div class="space-y-2">
               <div class="flex gap-2">
                 <button
@@ -367,55 +374,55 @@
                   type="button"
                   @click="form.weeklyOpusCostLimit = ''"
                 >
-                  自定义
+                  {{ $t('apiKeys.createApiKeyModal.custom') }}
                 </button>
               </div>
               <input
                 v-model="form.weeklyOpusCostLimit"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                 min="0"
-                placeholder="0 表示无限制"
+                :placeholder="$t('apiKeys.createApiKeyModal.weeklyOpusCostLimitPlaceholder')"
                 step="0.01"
                 type="number"
               />
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户，0 或留空表示无限制
+                {{ $t('apiKeys.createApiKeyModal.weeklyOpusHint') }}
               </p>
             </div>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >并发限制 (可选)</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.concurrencyLimit')
+            }}</label>
             <input
               v-model="form.concurrencyLimit"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
               min="0"
-              placeholder="0 表示无限制"
+              :placeholder="$t('apiKeys.createApiKeyModal.concurrencyLimitPlaceholder')"
               type="number"
             />
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              设置此 API Key 可同时处理的最大请求数，0 或留空表示无限制
+              {{ $t('apiKeys.createApiKeyModal.concurrencyHint') }}
             </p>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >备注 (可选)</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.description')
+            }}</label>
             <textarea
               v-model="form.description"
               class="form-input w-full resize-none border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-              placeholder="描述此 API Key 的用途..."
+              :placeholder="$t('apiKeys.createApiKeyModal.descriptionPlaceholder')"
               rows="2"
             />
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >过期设置</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.expirationSettings')
+            }}</label>
             <!-- 过期模式选择 -->
             <div
               class="mb-3 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
@@ -428,7 +435,9 @@
                     type="radio"
                     value="fixed"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">固定时间过期</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.createApiKeyModal.fixedTimeExpiry')
+                  }}</span>
                 </label>
                 <label class="flex cursor-pointer items-center">
                   <input
@@ -437,17 +446,19 @@
                     type="radio"
                     value="activation"
                   />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">首次使用后激活</span>
+                  <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                    $t('apiKeys.createApiKeyModal.activationExpiry')
+                  }}</span>
                 </label>
               </div>
               <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                 <span v-if="form.expirationMode === 'fixed'">
                   <i class="fas fa-info-circle mr-1" />
-                  固定时间模式：Key 创建后立即生效，按设定时间过期
+                  {{ $t('apiKeys.createApiKeyModal.fixedModeHint') }}
                 </span>
                 <span v-else>
                   <i class="fas fa-info-circle mr-1" />
-                  激活模式：Key 首次使用时激活，激活后按设定天数过期（适合批量销售）
+                  {{ $t('apiKeys.createApiKeyModal.activationModeHint') }}
                 </span>
               </p>
             </div>
@@ -459,14 +470,14 @@
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
                 @change="updateExpireAt"
               >
-                <option value="">永不过期</option>
-                <option value="1d">1 天</option>
-                <option value="7d">7 天</option>
-                <option value="30d">30 天</option>
-                <option value="90d">90 天</option>
-                <option value="180d">180 天</option>
-                <option value="365d">365 天</option>
-                <option value="custom">自定义日期</option>
+                <option value="">{{ $t('apiKeys.createApiKeyModal.neverExpire') }}</option>
+                <option value="1d">{{ $t('apiKeys.createApiKeyModal.1d') }}</option>
+                <option value="7d">{{ $t('apiKeys.createApiKeyModal.7d') }}</option>
+                <option value="30d">{{ $t('apiKeys.createApiKeyModal.30d') }}</option>
+                <option value="90d">{{ $t('apiKeys.createApiKeyModal.90d') }}</option>
+                <option value="180d">{{ $t('apiKeys.createApiKeyModal.180d') }}</option>
+                <option value="365d">{{ $t('apiKeys.createApiKeyModal.365d') }}</option>
+                <option value="custom">{{ $t('apiKeys.createApiKeyModal.customDate') }}</option>
               </select>
               <div v-if="form.expireDuration === 'custom'" class="mt-3">
                 <input
@@ -478,7 +489,11 @@
                 />
               </div>
               <p v-if="form.expiresAt" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                将于 {{ formatExpireDate(form.expiresAt) }} 过期
+                {{
+                  $t('apiKeys.createApiKeyModal.willExpireOn', {
+                    date: formatExpireDate(form.expiresAt)
+                  })
+                }}
               </p>
             </div>
 
@@ -490,10 +505,12 @@
                   class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
                   max="3650"
                   min="1"
-                  placeholder="输入天数"
+                  :placeholder="$t('apiKeys.createApiKeyModal.activationDays')"
                   type="number"
                 />
-                <span class="text-sm text-gray-600 dark:text-gray-400">天</span>
+                <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.createApiKeyModal.daysUnit')
+                }}</span>
               </div>
               <div class="mt-2 flex flex-wrap gap-2">
                 <button
@@ -503,20 +520,24 @@
                   type="button"
                   @click="form.activationDays = days"
                 >
-                  {{ days }}天
+                  {{ days }}{{ $t('apiKeys.createApiKeyModal.daysUnit') }}
                 </button>
               </div>
               <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                 <i class="fas fa-clock mr-1" />
-                Key 将在首次使用后激活，激活后 {{ form.activationDays || 30 }} 天过期
+                {{
+                  $t('apiKeys.createApiKeyModal.activationHint', {
+                    days: form.activationDays || 30
+                  })
+                }}
               </p>
             </div>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >服务权限</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              $t('apiKeys.createApiKeyModal.servicePermissions')
+            }}</label>
             <div class="flex gap-4">
               <label class="flex cursor-pointer items-center">
                 <input
@@ -525,7 +546,9 @@
                   type="radio"
                   value="all"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">全部服务</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.createApiKeyModal.allServices')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -534,7 +557,9 @@
                   type="radio"
                   value="claude"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Claude</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.createApiKeyModal.claudeOnly')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -543,7 +568,9 @@
                   type="radio"
                   value="gemini"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Gemini</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.createApiKeyModal.geminiOnly')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -552,23 +579,25 @@
                   type="radio"
                   value="openai"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 OpenAI</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.createApiKeyModal.openaiOnly')
+                }}</span>
               </label>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              控制此 API Key 可以访问哪些服务
+              {{ $t('apiKeys.createApiKeyModal.permissionHint') }}
             </p>
           </div>
 
           <div>
             <div class="mb-2 flex items-center justify-between">
-              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >专属账号绑定 (可选)</label
-              >
+              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                $t('apiKeys.createApiKeyModal.dedicatedAccountBinding')
+              }}</label>
               <button
                 class="flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-blue-400 dark:hover:text-blue-300"
                 :disabled="accountsLoading"
-                title="刷新账号列表"
+                title="{{ $t('apiKeys.createApiKeyModal.refreshAccounts') }}"
                 type="button"
                 @click="refreshAccounts"
               >
@@ -579,69 +608,73 @@
                     'text-xs'
                   ]"
                 />
-                <span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
+                <span>{{
+                  accountsLoading
+                    ? $t('apiKeys.createApiKeyModal.refreshing')
+                    : $t('apiKeys.createApiKeyModal.refreshAccounts')
+                }}</span>
               </button>
             </div>
             <div class="grid grid-cols-1 gap-3">
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Claude 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.createApiKeyModal.claudeDedicatedAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.claudeAccountId"
                   :accounts="localAccounts.claude"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="$t('apiKeys.createApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                   :groups="localAccounts.claudeGroups"
-                  placeholder="请选择Claude账号"
+                  :placeholder="$t('apiKeys.createApiKeyModal.selectClaudeAccount')"
                   platform="claude"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Gemini 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.createApiKeyModal.geminiDedicatedAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.geminiAccountId"
                   :accounts="localAccounts.gemini"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="$t('apiKeys.createApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'claude' || form.permissions === 'openai'"
                   :groups="localAccounts.geminiGroups"
-                  placeholder="请选择Gemini账号"
+                  :placeholder="$t('apiKeys.createApiKeyModal.selectGeminiAccount')"
                   platform="gemini"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >OpenAI 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.createApiKeyModal.openaiDedicatedAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.openaiAccountId"
                   :accounts="localAccounts.openai"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="$t('apiKeys.createApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'claude' || form.permissions === 'gemini'"
                   :groups="localAccounts.openaiGroups"
-                  placeholder="请选择OpenAI账号"
+                  :placeholder="$t('apiKeys.createApiKeyModal.selectOpenaiAccount')"
                   platform="openai"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Bedrock 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  $t('apiKeys.createApiKeyModal.bedrockDedicatedAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.bedrockAccountId"
                   :accounts="localAccounts.bedrock"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="$t('apiKeys.createApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                   :groups="[]"
-                  placeholder="请选择Bedrock账号"
+                  :placeholder="$t('apiKeys.createApiKeyModal.selectBedrockAccount')"
                   platform="bedrock"
                 />
               </div>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              选择专属账号后，此API Key将只使用该账号，不选择则使用共享账号池
+              {{ $t('apiKeys.createApiKeyModal.accountBindingHint') }}
             </p>
           </div>
 
@@ -657,13 +690,15 @@
                 class="ml-2 cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300"
                 for="enableModelRestriction"
               >
-                启用模型限制
+                {{ $t('apiKeys.createApiKeyModal.enableModelRestriction') }}
               </label>
             </div>
 
             <div v-if="form.enableModelRestriction" class="space-y-3">
               <div>
-                <label class="mb-2 block text-sm font-medium text-gray-600">限制的模型列表</label>
+                <label class="mb-2 block text-sm font-medium text-gray-600">{{
+                  $t('apiKeys.createApiKeyModal.restrictedModelsList')
+                }}</label>
                 <div
                   class="mb-3 flex min-h-[32px] flex-wrap gap-2 rounded-lg border border-gray-200 bg-gray-50 p-2"
                 >
@@ -682,7 +717,7 @@
                     </button>
                   </span>
                   <span v-if="form.restrictedModels.length === 0" class="text-sm text-gray-400">
-                    暂无限制的模型
+                    {{ $t('apiKeys.createApiKeyModal.noRestrictedModels') }}
                   </span>
                 </div>
                 <div class="space-y-3">
@@ -701,7 +736,7 @@
                       v-if="availableQuickModels.length === 0"
                       class="text-sm italic text-gray-400"
                     >
-                      所有常用模型已在限制列表中
+                      {{ $t('apiKeys.createApiKeyModal.allCommonModelsRestricted') }}
                     </span>
                   </div>
 
@@ -710,7 +745,7 @@
                     <input
                       v-model="form.modelInput"
                       class="form-input flex-1"
-                      placeholder="输入模型名称，按回车添加"
+                      :placeholder="$t('apiKeys.createApiKeyModal.addRestrictedModelPlaceholder')"
                       type="text"
                       @keydown.enter.prevent="addRestrictedModel"
                     />
@@ -724,7 +759,7 @@
                   </div>
                 </div>
                 <p class="mt-2 text-xs text-gray-500">
-                  设置此API Key无法访问的模型，例如：claude-opus-4-20250514
+                  {{ $t('apiKeys.createApiKeyModal.modelRestrictionHint') }}
                 </p>
               </div>
             </div>
@@ -743,7 +778,7 @@
                 class="ml-2 cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300"
                 for="enableClientRestriction"
               >
-                启用客户端限制
+                {{ $t('apiKeys.createApiKeyModal.enableClientRestriction') }}
               </label>
             </div>
 
@@ -752,9 +787,9 @@
               class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-700 dark:bg-green-900/20"
             >
               <div>
-                <label class="mb-2 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                  >允许的客户端</label
-                >
+                <label class="mb-2 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                  $t('apiKeys.createApiKeyModal.allowedClients')
+                }}</label>
                 <div class="space-y-1">
                   <div v-for="client in supportedClients" :key="client.id" class="flex items-start">
                     <input
@@ -784,7 +819,7 @@
               type="button"
               @click="$emit('close')"
             >
-              取消
+              {{ $t('apiKeys.createApiKeyModal.cancel') }}
             </button>
             <button
               class="btn btn-primary flex-1 px-4 py-2.5 text-sm font-semibold"
@@ -793,7 +828,11 @@
             >
               <div v-if="loading" class="loading-spinner mr-2" />
               <i v-else class="fas fa-plus mr-2" />
-              {{ loading ? '创建中...' : '创建' }}
+              {{
+                loading
+                  ? $t('apiKeys.createApiKeyModal.creating')
+                  : $t('apiKeys.createApiKeyModal.create')
+              }}
             </button>
           </div>
         </form>
@@ -804,12 +843,15 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
 import { apiClient } from '@/config/api'
 import AccountSelector from '@/components/common/AccountSelector.vue'
 
+const { t } = useI18n()
+
 const props = defineProps({
   accounts: {
     type: Object,
@@ -886,61 +928,31 @@ onMounted(async () => {
   availableTags.value = await apiKeysStore.fetchTags()
   // 初始化账号数据
   if (props.accounts) {
-    // 合并 OpenAI 和 OpenAI-Responses 账号
-    const openaiAccounts = []
-    if (props.accounts.openai) {
-      props.accounts.openai.forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai'
-        })
-      })
-    }
-    if (props.accounts.openaiResponses) {
-      props.accounts.openaiResponses.forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai-responses'
-        })
-      })
-    }
-
     localAccounts.value = {
       claude: props.accounts.claude || [],
       gemini: props.accounts.gemini || [],
-      openai: openaiAccounts,
+      openai: props.accounts.openai || [],
       bedrock: props.accounts.bedrock || [], // 添加 Bedrock 账号
       claudeGroups: props.accounts.claudeGroups || [],
       geminiGroups: props.accounts.geminiGroups || [],
       openaiGroups: props.accounts.openaiGroups || []
     }
   }
-
-  // 自动加载账号数据
-  await refreshAccounts()
 })
 
 // 刷新账号列表
 const refreshAccounts = async () => {
   accountsLoading.value = true
   try {
-    const [
-      claudeData,
-      claudeConsoleData,
-      geminiData,
-      openaiData,
-      openaiResponsesData,
-      bedrockData,
-      groupsData
-    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'), // 获取 OpenAI-Responses 账号
-      apiClient.get('/admin/bedrock-accounts'), // 添加 Bedrock 账号获取
-      apiClient.get('/admin/account-groups')
-    ])
+    const [claudeData, claudeConsoleData, geminiData, openaiData, bedrockData, groupsData] =
+      await Promise.all([
+        apiClient.get('/admin/claude-accounts'),
+        apiClient.get('/admin/claude-console-accounts'),
+        apiClient.get('/admin/gemini-accounts'),
+        apiClient.get('/admin/openai-accounts'),
+        apiClient.get('/admin/bedrock-accounts'), // 添加 Bedrock 账号获取
+        apiClient.get('/admin/account-groups')
+      ])
 
     // 合并Claude OAuth账户和Claude Console账户
     const claudeAccounts = []
@@ -974,31 +986,13 @@ const refreshAccounts = async () => {
       }))
     }
 
-    // 合并 OpenAI 和 OpenAI-Responses 账号
-    const openaiAccounts = []
-
     if (openaiData.success) {
-      ;(openaiData.data || []).forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai',
-          isDedicated: account.accountType === 'dedicated' // 保留以便向后兼容
-        })
-      })
+      localAccounts.value.openai = (openaiData.data || []).map((account) => ({
+        ...account,
+        isDedicated: account.accountType === 'dedicated' // 保留以便向后兼容
+      }))
     }
 
-    if (openaiResponsesData.success) {
-      ;(openaiResponsesData.data || []).forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai-responses',
-          isDedicated: account.accountType === 'dedicated' // 保留以便向后兼容
-        })
-      })
-    }
-
-    localAccounts.value.openai = openaiAccounts
-
     if (bedrockData.success) {
       localAccounts.value.bedrock = (bedrockData.data || []).map((account) => ({
         ...account,
@@ -1014,9 +1008,9 @@ const refreshAccounts = async () => {
       localAccounts.value.openaiGroups = allGroups.filter((g) => g.platform === 'openai')
     }
 
-    showToast('账号列表已刷新', 'success')
+    showToast(t('apiKeys.createApiKeyModal.refreshAccountsSuccess'), 'success')
   } catch (error) {
-    showToast('刷新账号列表失败', 'error')
+    showToast(t('apiKeys.createApiKeyModal.refreshAccountsFailed'), 'error')
   } finally {
     accountsLoading.value = false
   }
@@ -1077,13 +1071,17 @@ const updateCustomExpireAt = () => {
 // 格式化过期日期
 const formatExpireDate = (dateString) => {
   const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+  const { locale } = useI18n()
+  return date.toLocaleString(
+    locale.value === 'zh-cn' ? 'zh-CN' : locale.value === 'zh-tw' ? 'zh-TW' : 'en-US',
+    {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  )
 }
 
 // 添加限制的模型
@@ -1141,14 +1139,14 @@ const createApiKey = async () => {
   errors.value.name = ''
 
   if (!form.name || !form.name.trim()) {
-    errors.value.name = '请输入API Key名称'
+    errors.value.name = t('apiKeys.createApiKeyModal.nameError')
     return
   }
 
   // 批量创建时验证数量
   if (form.createType === 'batch') {
     if (!form.batchCount || form.batchCount < 2 || form.batchCount > 500) {
-      showToast('批量创建数量必须在 2-500 之间', 'error')
+      showToast(t('apiKeys.createApiKeyModal.batchCountError'), 'error')
       return
     }
   }
@@ -1158,14 +1156,14 @@ const createApiKey = async () => {
     let confirmed = false
     if (window.showConfirm) {
       confirmed = await window.showConfirm(
-        '费用限制提醒',
-        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
-        '继续创建',
-        '返回修改'
+        t('apiKeys.createApiKeyModal.costLimitConfirmTitle'),
+        t('apiKeys.createApiKeyModal.costLimitConfirmMessage'),
+        t('apiKeys.createApiKeyModal.costLimitConfirmContinue'),
+        t('apiKeys.createApiKeyModal.costLimitConfirmBack')
       )
     } else {
       // 降级方案
-      confirmed = confirm('您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n是否继续？')
+      confirmed = confirm(t('apiKeys.createApiKeyModal.costLimitFallbackMessage'))
     }
     if (!confirmed) {
       return
@@ -1254,11 +1252,11 @@ const createApiKey = async () => {
       const result = await apiClient.post('/admin/api-keys', data)
 
       if (result.success) {
-        showToast('API Key 创建成功', 'success')
+        showToast(t('apiKeys.createApiKeyModal.createSuccess'), 'success')
         emit('success', result.data)
         emit('close')
       } else {
-        showToast(result.message || '创建失败', 'error')
+        showToast(result.message || t('apiKeys.createApiKeyModal.createFailed'), 'error')
       }
     } else {
       // 批量创建
@@ -1272,15 +1270,18 @@ const createApiKey = async () => {
       const result = await apiClient.post('/admin/api-keys/batch', data)
 
       if (result.success) {
-        showToast(`成功创建 ${result.data.length} 个 API Key`, 'success')
+        showToast(
+          t('apiKeys.createApiKeyModal.batchCreateSuccess', { count: result.data.length }),
+          'success'
+        )
         emit('batch-success', result.data)
         emit('close')
       } else {
-        showToast(result.message || '批量创建失败', 'error')
+        showToast(result.message || t('apiKeys.createApiKeyModal.batchCreateFailed'), 'error')
       }
     }
   } catch (error) {
-    showToast('创建失败', 'error')
+    showToast(t('apiKeys.createApiKeyModal.createFailed'), 'error')
   } finally {
     loading.value = false
   }
diff --git a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
index 4da8d9e5..f7bedea8 100644
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -12,7 +12,7 @@
               <i class="fas fa-edit text-sm text-white sm:text-base" />
             </div>
             <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
-              编辑 API Key
+              {{ t('apiKeys.editApiKeyModal.title') }}
             </h3>
           </div>
           <button
@@ -30,20 +30,18 @@
           <div>
             <label
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
-              >名称</label
+              >{{ t('apiKeys.editApiKeyModal.name') }}</label
             >
-            <div>
-              <input
-                v-model="form.name"
-                class="form-input flex-1 border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                maxlength="100"
-                placeholder="请输入API Key名称"
-                required
-                type="text"
-              />
-            </div>
+            <input
+              v-model="form.name"
+              class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+              maxlength="100"
+              :placeholder="t('apiKeys.editApiKeyModal.namePlaceholder')"
+              required
+              type="text"
+            />
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 sm:mt-2">
-              用于识别此 API Key 的用途
+              {{ t('apiKeys.editApiKeyModal.nameHint') }}
             </p>
           </div>
 
@@ -51,7 +49,7 @@
           <div>
             <label
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
-              >所有者</label
+              >{{ t('apiKeys.editApiKeyModal.owner') }}</label
             >
             <select
               v-model="form.ownerId"
@@ -59,11 +57,13 @@
             >
               <option v-for="user in availableUsers" :key="user.id" :value="user.id">
                 {{ user.displayName }} ({{ user.username }})
-                <span v-if="user.role === 'admin'" class="text-gray-500">- 管理员</span>
+                <span v-if="user.role === 'admin'" class="text-gray-500">{{
+                  t('apiKeys.editApiKeyModal.adminLabel')
+                }}</span>
               </option>
             </select>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 sm:mt-2">
-              分配此 API Key 给指定用户或管理员，管理员分配时不受用户 API Key 数量限制
+              {{ t('apiKeys.editApiKeyModal.ownerHint') }}
             </p>
           </div>
 
@@ -71,13 +71,13 @@
           <div>
             <label
               class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-sm"
-              >标签</label
+              >{{ t('apiKeys.editApiKeyModal.tags') }}</label
             >
             <div class="space-y-4">
               <!-- 已选择的标签 -->
               <div v-if="form.tags.length > 0">
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  已选择的标签:
+                  {{ t('apiKeys.editApiKeyModal.selectedTags') }}
                 </div>
                 <div class="flex flex-wrap gap-2">
                   <span
@@ -100,7 +100,7 @@
               <!-- 可选择的已有标签 -->
               <div v-if="unselectedTags.length > 0">
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  点击选择已有标签:
+                  {{ t('apiKeys.editApiKeyModal.clickToSelectTags') }}
                 </div>
                 <div class="flex flex-wrap gap-2">
                   <button
@@ -119,13 +119,13 @@
               <!-- 创建新标签 -->
               <div>
                 <div class="mb-2 text-xs font-medium text-gray-600 dark:text-gray-400">
-                  创建新标签:
+                  {{ t('apiKeys.editApiKeyModal.createNewTag') }}
                 </div>
                 <div class="flex gap-2">
                   <input
                     v-model="newTag"
                     class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                    placeholder="输入新标签名称"
+                    :placeholder="t('apiKeys.editApiKeyModal.newTagPlaceholder')"
                     type="text"
                     @keypress.enter.prevent="addTag"
                   />
@@ -140,7 +140,7 @@
               </div>
 
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                用于标记不同团队或用途，方便筛选管理
+                {{ t('apiKeys.editApiKeyModal.tagsHint') }}
               </p>
             </div>
           </div>
@@ -156,68 +156,76 @@
                 <i class="fas fa-tachometer-alt text-xs text-white" />
               </div>
               <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
-                速率限制设置 (可选)
+                {{ t('apiKeys.editApiKeyModal.rateLimitTitle') }}
               </h4>
             </div>
 
             <div class="space-y-2">
               <div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >时间窗口 (分钟)</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    t('apiKeys.editApiKeyModal.rateLimitWindow')
+                  }}</label>
                   <input
                     v-model="form.rateLimitWindow"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="1"
-                    placeholder="无限制"
+                    :placeholder="t('apiKeys.editApiKeyModal.noLimit')"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">时间段单位</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('apiKeys.editApiKeyModal.rateLimitWindowHint') }}
+                  </p>
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >请求次数限制</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    t('apiKeys.editApiKeyModal.rateLimitRequests')
+                  }}</label>
                   <input
                     v-model="form.rateLimitRequests"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="1"
-                    placeholder="无限制"
+                    :placeholder="t('apiKeys.editApiKeyModal.noLimit')"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">窗口内最大请求</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('apiKeys.editApiKeyModal.rateLimitRequestsHint') }}
+                  </p>
                 </div>
 
                 <div>
-                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300"
-                    >费用限制 (美元)</label
-                  >
+                  <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">{{
+                    t('apiKeys.editApiKeyModal.rateLimitCost')
+                  }}</label>
                   <input
                     v-model="form.rateLimitCost"
                     class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                     min="0"
-                    placeholder="无限制"
+                    :placeholder="t('apiKeys.editApiKeyModal.noLimit')"
                     step="0.01"
                     type="number"
                   />
-                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">窗口内最大费用</p>
+                  <p class="ml-2 mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    {{ t('apiKeys.editApiKeyModal.rateLimitCostHint') }}
+                  </p>
                 </div>
               </div>
 
               <!-- 示例说明 -->
               <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
                 <h5 class="mb-1 text-xs font-semibold text-blue-800 dark:text-blue-400">
-                  💡 使用示例
+                  {{ t('apiKeys.editApiKeyModal.usageExamples') }}
                 </h5>
                 <div class="space-y-0.5 text-xs text-blue-700 dark:text-blue-300">
                   <div>
-                    <strong>示例1:</strong> 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求
+                    <strong>{{ t('apiKeys.editApiKeyModal.example1') }}</strong>
                   </div>
-                  <div><strong>示例2:</strong> 时间窗口=1，费用=0.1 → 每分钟最多$0.1费用</div>
                   <div>
-                    <strong>示例3:</strong> 窗口=30，请求=50，费用=5 → 每30分钟50次请求且不超$5费用
+                    <strong>{{ t('apiKeys.editApiKeyModal.example2') }}</strong>
+                  </div>
+                  <div>
+                    <strong>{{ t('apiKeys.editApiKeyModal.example3') }}</strong>
                   </div>
                 </div>
               </div>
@@ -225,9 +233,9 @@
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >每日费用限制 (美元)</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.editApiKeyModal.dailyCostLimit')
+            }}</label>
             <div class="space-y-3">
               <div class="flex gap-2">
                 <button
@@ -256,27 +264,27 @@
                   type="button"
                   @click="form.dailyCostLimit = ''"
                 >
-                  自定义
+                  {{ t('apiKeys.editApiKeyModal.custom') }}
                 </button>
               </div>
               <input
                 v-model="form.dailyCostLimit"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                 min="0"
-                placeholder="0 表示无限制"
+                :placeholder="t('apiKeys.editApiKeyModal.dailyCostLimitPlaceholder')"
                 step="0.01"
                 type="number"
               />
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                设置此 API Key 每日的费用限制，超过限制将拒绝请求，0 或留空表示无限制
+                {{ t('apiKeys.editApiKeyModal.dailyCostHint') }}
               </p>
             </div>
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >Opus 模型周费用限制 (美元)</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.editApiKeyModal.weeklyOpusCostLimit')
+            }}</label>
             <div class="space-y-3">
               <div class="flex gap-2">
                 <button
@@ -305,36 +313,36 @@
                   type="button"
                   @click="form.weeklyOpusCostLimit = ''"
                 >
-                  自定义
+                  {{ t('apiKeys.editApiKeyModal.custom') }}
                 </button>
               </div>
               <input
                 v-model="form.weeklyOpusCostLimit"
                 class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
                 min="0"
-                placeholder="0 表示无限制"
+                :placeholder="t('apiKeys.editApiKeyModal.weeklyOpusCostLimitPlaceholder')"
                 step="0.01"
                 type="number"
               />
               <p class="text-xs text-gray-500 dark:text-gray-400">
-                设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户，0 或留空表示无限制
+                {{ t('apiKeys.editApiKeyModal.weeklyOpusHint') }}
               </p>
             </div>
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >并发限制</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.editApiKeyModal.concurrencyLimit')
+            }}</label>
             <input
               v-model="form.concurrencyLimit"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
               min="0"
-              placeholder="0 表示无限制"
+              :placeholder="t('apiKeys.editApiKeyModal.concurrencyLimitPlaceholder')"
               type="number"
             />
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              设置此 API Key 可同时处理的最大请求数
+              {{ t('apiKeys.editApiKeyModal.concurrencyHint') }}
             </p>
           </div>
 
@@ -351,18 +359,18 @@
                 class="ml-2 cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300"
                 for="editIsActive"
               >
-                激活账号
+                {{ t('apiKeys.editApiKeyModal.activeStatus') }}
               </label>
             </div>
             <p class="mb-4 text-xs text-gray-500 dark:text-gray-400">
-              取消勾选将禁用此 API Key，暂停所有请求，客户端返回 401 错误
+              {{ t('apiKeys.editApiKeyModal.activeStatusHint') }}
             </p>
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >服务权限</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.editApiKeyModal.servicePermissions')
+            }}</label>
             <div class="flex gap-4">
               <label class="flex cursor-pointer items-center">
                 <input
@@ -371,7 +379,9 @@
                   type="radio"
                   value="all"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">全部服务</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.editApiKeyModal.allServices')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -380,7 +390,9 @@
                   type="radio"
                   value="claude"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Claude</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.editApiKeyModal.claudeOnly')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -389,7 +401,9 @@
                   type="radio"
                   value="gemini"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 Gemini</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.editApiKeyModal.geminiOnly')
+                }}</span>
               </label>
               <label class="flex cursor-pointer items-center">
                 <input
@@ -398,23 +412,25 @@
                   type="radio"
                   value="openai"
                 />
-                <span class="text-sm text-gray-700 dark:text-gray-300">仅 OpenAI</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.editApiKeyModal.openaiOnly')
+                }}</span>
               </label>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              控制此 API Key 可以访问哪些服务
+              {{ t('apiKeys.editApiKeyModal.permissionsHint') }}
             </p>
           </div>
 
           <div>
             <div class="mb-3 flex items-center justify-between">
-              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300"
-                >专属账号绑定</label
-              >
+              <label class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+                t('apiKeys.editApiKeyModal.accountBinding')
+              }}</label>
               <button
                 class="flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-blue-400 dark:hover:text-blue-300"
                 :disabled="accountsLoading"
-                title="刷新账号列表"
+                :title="t('apiKeys.editApiKeyModal.refreshAccounts')"
                 type="button"
                 @click="refreshAccounts"
               >
@@ -425,69 +441,73 @@
                     'text-xs'
                   ]"
                 />
-                <span>{{ accountsLoading ? '刷新中...' : '刷新账号' }}</span>
+                <span>{{
+                  accountsLoading
+                    ? t('apiKeys.editApiKeyModal.refreshing')
+                    : t('apiKeys.editApiKeyModal.refreshAccounts')
+                }}</span>
               </button>
             </div>
             <div class="grid grid-cols-1 gap-3">
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Claude 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.claudeAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.claudeAccountId"
                   :accounts="localAccounts.claude"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="t('apiKeys.editApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                   :groups="localAccounts.claudeGroups"
-                  placeholder="请选择Claude账号"
+                  :placeholder="t('apiKeys.editApiKeyModal.selectClaudeAccount')"
                   platform="claude"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Gemini 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.geminiAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.geminiAccountId"
                   :accounts="localAccounts.gemini"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="t('apiKeys.editApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'claude' || form.permissions === 'openai'"
                   :groups="localAccounts.geminiGroups"
-                  placeholder="请选择Gemini账号"
+                  :placeholder="t('apiKeys.editApiKeyModal.selectGeminiAccount')"
                   platform="gemini"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >OpenAI 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.openaiAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.openaiAccountId"
                   :accounts="localAccounts.openai"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="t('apiKeys.editApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'claude' || form.permissions === 'gemini'"
                   :groups="localAccounts.openaiGroups"
-                  placeholder="请选择OpenAI账号"
+                  :placeholder="t('apiKeys.editApiKeyModal.selectOpenaiAccount')"
                   platform="openai"
                 />
               </div>
               <div>
-                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >Bedrock 专属账号</label
-                >
+                <label class="mb-1 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.bedrockAccount')
+                }}</label>
                 <AccountSelector
                   v-model="form.bedrockAccountId"
                   :accounts="localAccounts.bedrock"
-                  default-option-text="使用共享账号池"
+                  :default-option-text="t('apiKeys.editApiKeyModal.useSharedPool')"
                   :disabled="form.permissions === 'gemini' || form.permissions === 'openai'"
                   :groups="[]"
-                  placeholder="请选择Bedrock账号"
+                  :placeholder="t('apiKeys.editApiKeyModal.selectBedrockAccount')"
                   platform="bedrock"
                 />
               </div>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              修改绑定账号将影响此API Key的请求路由
+              {{ t('apiKeys.editApiKeyModal.accountBindingHint') }}
             </p>
           </div>
 
@@ -503,15 +523,15 @@
                 class="ml-2 cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300"
                 for="editEnableModelRestriction"
               >
-                启用模型限制
+                {{ t('apiKeys.editApiKeyModal.enableModelRestriction') }}
               </label>
             </div>
 
             <div v-if="form.enableModelRestriction" class="space-y-3">
               <div>
-                <label class="mb-2 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >限制的模型列表</label
-                >
+                <label class="mb-2 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.restrictedModels')
+                }}</label>
                 <div
                   class="mb-3 flex min-h-[32px] flex-wrap gap-2 rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-gray-600 dark:bg-gray-700"
                 >
@@ -533,7 +553,7 @@
                     v-if="form.restrictedModels.length === 0"
                     class="text-sm text-gray-400 dark:text-gray-500"
                   >
-                    暂无限制的模型
+                    {{ t('apiKeys.editApiKeyModal.noRestrictedModels') }}
                   </span>
                 </div>
                 <div class="space-y-3">
@@ -552,7 +572,7 @@
                       v-if="availableQuickModels.length === 0"
                       class="text-sm italic text-gray-400 dark:text-gray-500"
                     >
-                      所有常用模型已在限制列表中
+                      {{ t('apiKeys.editApiKeyModal.allCommonModelsRestricted') }}
                     </span>
                   </div>
 
@@ -561,7 +581,7 @@
                     <input
                       v-model="form.modelInput"
                       class="form-input flex-1 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                      placeholder="输入模型名称，按回车添加"
+                      :placeholder="t('apiKeys.editApiKeyModal.addRestrictedModelPlaceholder')"
                       type="text"
                       @keydown.enter.prevent="addRestrictedModel"
                     />
@@ -575,7 +595,7 @@
                   </div>
                 </div>
                 <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                  设置此API Key无法访问的模型，例如：claude-opus-4-20250514
+                  {{ t('apiKeys.editApiKeyModal.modelRestrictionHint') }}
                 </p>
               </div>
             </div>
@@ -594,17 +614,17 @@
                 class="ml-2 cursor-pointer text-sm font-semibold text-gray-700 dark:text-gray-300"
                 for="editEnableClientRestriction"
               >
-                启用客户端限制
+                {{ t('apiKeys.editApiKeyModal.enableClientRestriction') }}
               </label>
             </div>
 
             <div v-if="form.enableClientRestriction" class="space-y-3">
               <div>
-                <label class="mb-2 block text-sm font-medium text-gray-600 dark:text-gray-400"
-                  >允许的客户端</label
-                >
+                <label class="mb-2 block text-sm font-medium text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.editApiKeyModal.allowedClients')
+                }}</label>
                 <p class="mb-3 text-xs text-gray-500 dark:text-gray-400">
-                  勾选允许使用此API Key的客户端
+                  {{ t('apiKeys.editApiKeyModal.clientRestrictionHint') }}
                 </p>
                 <div class="space-y-2">
                   <div v-for="client in supportedClients" :key="client.id" class="flex items-start">
@@ -635,7 +655,7 @@
               type="button"
               @click="$emit('close')"
             >
-              取消
+              {{ t('apiKeys.editApiKeyModal.cancel') }}
             </button>
             <button
               class="btn btn-primary flex-1 px-6 py-3 font-semibold"
@@ -644,7 +664,9 @@
             >
               <div v-if="loading" class="loading-spinner mr-2" />
               <i v-else class="fas fa-save mr-2" />
-              {{ loading ? '保存中...' : '保存修改' }}
+              {{
+                loading ? t('apiKeys.editApiKeyModal.saving') : t('apiKeys.editApiKeyModal.save')
+              }}
             </button>
           </div>
         </form>
@@ -655,6 +677,7 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 import { useClientsStore } from '@/stores/clients'
 import { useApiKeysStore } from '@/stores/apiKeys'
@@ -674,6 +697,9 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'success'])
 
+// 国际化
+const { t } = useI18n()
+
 // const authStore = useAuthStore()
 const clientsStore = useClientsStore()
 const apiKeysStore = useApiKeysStore()
@@ -785,14 +811,14 @@ const updateApiKey = async () => {
     let confirmed = false
     if (window.showConfirm) {
       confirmed = await window.showConfirm(
-        '费用限制提醒',
-        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
-        '继续保存',
-        '返回修改'
+        t('apiKeys.editApiKeyModal.costLimitConfirmTitle'),
+        t('apiKeys.editApiKeyModal.costLimitConfirmMessage'),
+        t('apiKeys.editApiKeyModal.costLimitConfirmContinue'),
+        t('apiKeys.editApiKeyModal.costLimitConfirmBack')
       )
     } else {
       // 降级方案
-      confirmed = confirm('您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n是否继续？')
+      confirmed = confirm(t('apiKeys.editApiKeyModal.costLimitConfirmMessage'))
     }
     if (!confirmed) {
       return
@@ -898,10 +924,10 @@ const updateApiKey = async () => {
       emit('success')
       emit('close')
     } else {
-      showToast(result.message || '更新失败', 'error')
+      showToast(result.message || t('apiKeys.editApiKeyModal.updateFailed'), 'error')
     }
   } catch (error) {
-    showToast('更新失败', 'error')
+    showToast(t('apiKeys.editApiKeyModal.updateFailed'), 'error')
   } finally {
     loading.value = false
   }
@@ -911,23 +937,15 @@ const updateApiKey = async () => {
 const refreshAccounts = async () => {
   accountsLoading.value = true
   try {
-    const [
-      claudeData,
-      claudeConsoleData,
-      geminiData,
-      openaiData,
-      openaiResponsesData,
-      bedrockData,
-      groupsData
-    ] = await Promise.all([
-      apiClient.get('/admin/claude-accounts'),
-      apiClient.get('/admin/claude-console-accounts'),
-      apiClient.get('/admin/gemini-accounts'),
-      apiClient.get('/admin/openai-accounts'),
-      apiClient.get('/admin/openai-responses-accounts'), // 获取 OpenAI-Responses 账号
-      apiClient.get('/admin/bedrock-accounts'), // 添加 Bedrock 账号获取
-      apiClient.get('/admin/account-groups')
-    ])
+    const [claudeData, claudeConsoleData, geminiData, openaiData, bedrockData, groupsData] =
+      await Promise.all([
+        apiClient.get('/admin/claude-accounts'),
+        apiClient.get('/admin/claude-console-accounts'),
+        apiClient.get('/admin/gemini-accounts'),
+        apiClient.get('/admin/openai-accounts'),
+        apiClient.get('/admin/bedrock-accounts'), // 添加 Bedrock 账号获取
+        apiClient.get('/admin/account-groups')
+      ])
 
     // 合并Claude OAuth账户和Claude Console账户
     const claudeAccounts = []
@@ -961,31 +979,13 @@ const refreshAccounts = async () => {
       }))
     }
 
-    // 合并 OpenAI 和 OpenAI-Responses 账号
-    const openaiAccounts = []
-
     if (openaiData.success) {
-      ;(openaiData.data || []).forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai',
-          isDedicated: account.accountType === 'dedicated'
-        })
-      })
+      localAccounts.value.openai = (openaiData.data || []).map((account) => ({
+        ...account,
+        isDedicated: account.accountType === 'dedicated'
+      }))
     }
 
-    if (openaiResponsesData.success) {
-      ;(openaiResponsesData.data || []).forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai-responses',
-          isDedicated: account.accountType === 'dedicated'
-        })
-      })
-    }
-
-    localAccounts.value.openai = openaiAccounts
-
     if (bedrockData.success) {
       localAccounts.value.bedrock = (bedrockData.data || []).map((account) => ({
         ...account,
@@ -1001,9 +1001,9 @@ const refreshAccounts = async () => {
       localAccounts.value.openaiGroups = allGroups.filter((g) => g.platform === 'openai')
     }
 
-    showToast('账号列表已刷新', 'success')
+    showToast(t('apiKeys.editApiKeyModal.refreshAccountsSuccess'), 'success')
   } catch (error) {
-    showToast('刷新账号列表失败', 'error')
+    showToast(t('apiKeys.editApiKeyModal.refreshAccountsFailed'), 'error')
   } finally {
     accountsLoading.value = false
   }
@@ -1017,7 +1017,7 @@ const loadUsers = async () => {
       availableUsers.value = response.data || []
     }
   } catch (error) {
-    // console.error('Failed to load users:', error)
+    console.error('Failed to load users:', error)
     availableUsers.value = [
       {
         id: 'admin',
@@ -1043,7 +1043,7 @@ onMounted(async () => {
     supportedClients.value = clients || []
     availableTags.value = tags || []
   } catch (error) {
-    // console.error('Error loading initial data:', error)
+    console.error('Error loading initial data:', error)
     // Fallback to empty arrays if loading fails
     supportedClients.value = []
     availableTags.value = []
@@ -1051,29 +1051,10 @@ onMounted(async () => {
 
   // 初始化账号数据
   if (props.accounts) {
-    // 合并 OpenAI 和 OpenAI-Responses 账号
-    const openaiAccounts = []
-    if (props.accounts.openai) {
-      props.accounts.openai.forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai'
-        })
-      })
-    }
-    if (props.accounts.openaiResponses) {
-      props.accounts.openaiResponses.forEach((account) => {
-        openaiAccounts.push({
-          ...account,
-          platform: 'openai-responses'
-        })
-      })
-    }
-
     localAccounts.value = {
       claude: props.accounts.claude || [],
       gemini: props.accounts.gemini || [],
-      openai: openaiAccounts,
+      openai: props.accounts.openai || [],
       bedrock: props.accounts.bedrock || [], // 添加 Bedrock 账号
       claudeGroups: props.accounts.claudeGroups || [],
       geminiGroups: props.accounts.geminiGroups || [],
@@ -1081,9 +1062,6 @@ onMounted(async () => {
     }
   }
 
-  // 自动加载账号数据
-  await refreshAccounts()
-
   form.name = props.apiKey.name
 
   // 处理速率限制迁移：如果有tokenLimit且没有rateLimitCost，提示用户
@@ -1093,7 +1071,7 @@ onMounted(async () => {
   // 如果有历史tokenLimit但没有rateLimitCost，提示用户需要重新设置
   if (props.apiKey.tokenLimit > 0 && !props.apiKey.rateLimitCost) {
     // 可以根据需要添加提示，或者自动迁移（这里选择让用户手动设置）
-    // console.log('检测到历史Token限制，请考虑设置费用限制')
+    console.log('Token limit migration detected, consider setting cost limit')
   }
 
   form.rateLimitWindow = props.apiKey.rateLimitWindow || ''
@@ -1109,10 +1087,7 @@ onMounted(async () => {
     form.claudeAccountId = props.apiKey.claudeAccountId || ''
   }
   form.geminiAccountId = props.apiKey.geminiAccountId || ''
-
-  // 处理 OpenAI 账号 - 直接使用后端传来的值（已包含 responses: 前缀）
   form.openaiAccountId = props.apiKey.openaiAccountId || ''
-
   form.bedrockAccountId = props.apiKey.bedrockAccountId || '' // 添加 Bedrock 账号ID初始化
   form.restrictedModels = props.apiKey.restrictedModels || []
   form.allowedClients = props.apiKey.allowedClients || []
diff --git a/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue b/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
index 5509065e..a0a4ae60 100644
--- a/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
+++ b/web/admin-spa/src/components/apikeys/ExpiryEditModal.vue
@@ -18,9 +18,11 @@
               <i class="fas fa-clock text-white" />
             </div>
             <div>
-              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">修改过期时间</h3>
+              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
+                {{ $t('apiKeys.expiryEditModal.title') }}
+              </h3>
               <p class="text-sm text-gray-600 dark:text-gray-400">
-                为 "{{ apiKey.name || 'API Key' }}" 设置新的过期时间
+                {{ $t('apiKeys.expiryEditModal.subtitle', { name: apiKey.name || 'API Key' }) }}
               </p>
             </div>
           </div>
@@ -39,14 +41,20 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">当前状态</p>
+                <p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">
+                  {{ $t('apiKeys.expiryEditModal.currentStatus') }}
+                </p>
                 <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                   <!-- 未激活状态 -->
                   <template v-if="apiKey.expirationMode === 'activation' && !apiKey.isActivated">
                     <i class="fas fa-pause-circle mr-1 text-blue-500" />
-                    未激活
+                    {{ $t('apiKeys.expiryEditModal.notActivated') }}
                     <span class="ml-2 text-xs font-normal text-gray-600">
-                      (激活后 {{ apiKey.activationDays || 30 }} 天过期)
+                      {{
+                        $t('apiKeys.expiryEditModal.activationDaysHint', {
+                          days: apiKey.activationDays || 30
+                        })
+                      }}
                     </span>
                   </template>
                   <!-- 已设置过期时间 -->
@@ -63,7 +71,7 @@
                   <!-- 永不过期 -->
                   <template v-else>
                     <i class="fas fa-infinity mr-1 text-gray-500" />
-                    永不过期
+                    {{ $t('apiKeys.expiryEditModal.neverExpire') }}
                   </template>
                 </p>
               </div>
@@ -89,19 +97,23 @@
               @click="handleActivateNow"
             >
               <i class="fas fa-rocket mr-2" />
-              立即激活 (激活后 {{ apiKey.activationDays || 30 }} 天过期)
+              {{
+                $t('apiKeys.expiryEditModal.activateButton', { days: apiKey.activationDays || 30 })
+              }}
             </button>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
               <i class="fas fa-info-circle mr-1" />
-              点击立即激活此 API Key，激活后将在 {{ apiKey.activationDays || 30 }} 天后过期
+              {{
+                $t('apiKeys.expiryEditModal.activationInfo', { days: apiKey.activationDays || 30 })
+              }}
             </p>
           </div>
 
           <!-- 快捷选项 -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >选择新的期限</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
+              {{ $t('apiKeys.expiryEditModal.selectNewDuration') }}
+            </label>
             <div class="mb-3 grid grid-cols-3 gap-2">
               <button
                 v-for="option in quickOptions"
@@ -126,16 +138,16 @@
                 @click="selectQuickOption('custom')"
               >
                 <i class="fas fa-calendar-alt mr-1" />
-                自定义
+                {{ $t('apiKeys.expiryEditModal.custom') }}
               </button>
             </div>
           </div>
 
           <!-- 自定义日期选择 -->
           <div v-if="localForm.expireDuration === 'custom'" class="animate-fadeIn">
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >选择日期和时间</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
+              {{ $t('apiKeys.expiryEditModal.selectDateAndTime') }}
+            </label>
             <input
               v-model="localForm.customExpireDate"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
@@ -144,7 +156,7 @@
               @change="updateCustomExpiryPreview"
             />
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              选择一个未来的日期和时间作为过期时间
+              {{ $t('apiKeys.expiryEditModal.selectFutureDateTime') }}
             </p>
           </div>
 
@@ -157,7 +169,7 @@
               <div>
                 <p class="mb-1 text-xs font-medium text-blue-700 dark:text-blue-400">
                   <i class="fas fa-arrow-right mr-1" />
-                  新的过期时间
+                  {{ $t('apiKeys.expiryEditModal.newExpiryTime') }}
                 </p>
                 <p class="text-sm font-semibold text-blue-900 dark:text-blue-200">
                   <template v-if="localForm.expiresAt">
@@ -172,7 +184,7 @@
                   </template>
                   <template v-else>
                     <i class="fas fa-infinity mr-1" />
-                    永不过期
+                    {{ $t('apiKeys.expiryEditModal.neverExpire') }}
                   </template>
                 </p>
               </div>
@@ -190,7 +202,7 @@
               class="flex-1 rounded-lg bg-gray-100 px-4 py-2.5 font-semibold text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
               @click="$emit('close')"
             >
-              取消
+              {{ $t('apiKeys.expiryEditModal.cancel') }}
             </button>
             <button
               class="btn btn-primary flex-1 px-4 py-2.5 font-semibold"
@@ -199,7 +211,11 @@
             >
               <div v-if="saving" class="loading-spinner mr-2" />
               <i v-else class="fas fa-save mr-2" />
-              {{ saving ? '保存中...' : '保存更改' }}
+              {{
+                saving
+                  ? $t('apiKeys.expiryEditModal.saving')
+                  : $t('apiKeys.expiryEditModal.saveChanges')
+              }}
             </button>
           </div>
         </div>
@@ -210,6 +226,9 @@
 
 <script setup>
 import { ref, reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const props = defineProps({
   show: {
@@ -235,14 +254,14 @@ const localForm = reactive({
 
 // 快捷选项
 const quickOptions = [
-  { value: '', label: '永不过期' },
-  { value: '1d', label: '1 天' },
-  { value: '7d', label: '7 天' },
-  { value: '30d', label: '30 天' },
-  { value: '90d', label: '90 天' },
-  { value: '180d', label: '180 天' },
-  { value: '365d', label: '1 年' },
-  { value: '730d', label: '2 年' }
+  { value: '', label: t('apiKeys.expiryEditModal.neverExpireOption') },
+  { value: '1d', label: t('apiKeys.expiryEditModal.oneDay') },
+  { value: '7d', label: t('apiKeys.expiryEditModal.sevenDays') },
+  { value: '30d', label: t('apiKeys.expiryEditModal.thirtyDays') },
+  { value: '90d', label: t('apiKeys.expiryEditModal.ninetyDays') },
+  { value: '180d', label: t('apiKeys.expiryEditModal.oneHundredEightyDays') },
+  { value: '365d', label: t('apiKeys.expiryEditModal.threeSixtyFiveDays') },
+  { value: '730d', label: t('apiKeys.expiryEditModal.twoYears') }
 ]
 
 // 计算最小日期时间
@@ -337,13 +356,17 @@ const updateCustomExpiryPreview = () => {
 const formatExpireDate = (dateString) => {
   if (!dateString) return ''
   const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+  const { locale } = useI18n()
+  return date.toLocaleString(
+    locale.value === 'zh-cn' ? 'zh-CN' : locale.value === 'zh-tw' ? 'zh-TW' : 'en-US',
+    {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  )
 }
 
 // 检查是否已过期
@@ -363,22 +386,22 @@ const getExpiryStatus = (expiresAt) => {
 
   if (diffMs < 0) {
     return {
-      text: '已过期',
+      text: t('apiKeys.expiryEditModal.expired'),
       class: 'text-red-600'
     }
   } else if (diffDays <= 7) {
     return {
-      text: `${diffDays} 天后过期`,
+      text: t('apiKeys.expiryEditModal.daysToExpire', { days: diffDays }),
       class: 'text-orange-600'
     }
   } else if (diffDays <= 30) {
     return {
-      text: `${diffDays} 天后过期`,
+      text: t('apiKeys.expiryEditModal.daysToExpire', { days: diffDays }),
       class: 'text-yellow-600'
     }
   } else {
     return {
-      text: `${Math.ceil(diffDays / 30)} 个月后过期`,
+      text: t('apiKeys.expiryEditModal.monthsToExpire', { months: Math.ceil(diffDays / 30) }),
       class: 'text-green-600'
     }
   }
@@ -399,15 +422,19 @@ const handleActivateNow = async () => {
   let confirmed = true
   if (window.showConfirm) {
     confirmed = await window.showConfirm(
-      '激活 API Key',
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`,
-      '确定激活',
-      '取消'
+      t('apiKeys.expiryEditModal.activateConfirmTitle'),
+      t('apiKeys.expiryEditModal.activateConfirmMessage', {
+        days: props.apiKey.activationDays || 30
+      }),
+      t('apiKeys.expiryEditModal.confirmActivate'),
+      t('apiKeys.expiryEditModal.confirmCancel')
     )
   } else {
     // 降级方案
     confirmed = confirm(
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`
+      t('apiKeys.expiryEditModal.activateConfirmMessage', {
+        days: props.apiKey.activationDays || 30
+      })
     )
   }
 
diff --git a/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue b/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
index dd41cd68..29c50cb2 100644
--- a/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
@@ -12,13 +12,17 @@
               <i class="fas fa-check text-lg text-white" />
             </div>
             <div>
-              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">API Key 创建成功</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400">请妥善保存您的 API Key</p>
+              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
+                {{ t('apiKeys.newApiKeyModal.title') }}
+              </h3>
+              <p class="text-sm text-gray-600 dark:text-gray-400">
+                {{ t('apiKeys.newApiKeyModal.subtitle') }}
+              </p>
             </div>
           </div>
           <button
             class="text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-            title="直接关闭（不推荐）"
+            :title="t('apiKeys.newApiKeyModal.directCloseTooltip')"
             @click="handleDirectClose"
           >
             <i class="fas fa-times text-xl" />
@@ -36,10 +40,11 @@
               <i class="fas fa-exclamation-triangle text-sm text-white" />
             </div>
             <div class="ml-3">
-              <h5 class="mb-1 font-semibold text-amber-900 dark:text-amber-400">重要提醒</h5>
+              <h5 class="mb-1 font-semibold text-amber-900 dark:text-amber-400">
+                {{ t('apiKeys.newApiKeyModal.warningTitle') }}
+              </h5>
               <p class="text-sm text-amber-800 dark:text-amber-300">
-                这是您唯一能看到完整 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API
-                Key。请立即复制并妥善保存。
+                {{ t('apiKeys.newApiKeyModal.warningMessage') }}
               </p>
             </div>
           </div>
@@ -48,9 +53,9 @@
         <!-- API Key 信息 -->
         <div class="mb-6 space-y-4">
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >API Key 名称</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.newApiKeyModal.apiKeyName')
+            }}</label>
             <div
               class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-800"
             >
@@ -59,22 +64,22 @@
           </div>
 
           <div v-if="apiKey.description">
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >备注</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.newApiKeyModal.remarks')
+            }}</label>
             <div
               class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-800"
             >
               <span class="text-gray-700 dark:text-gray-300">{{
-                apiKey.description || '无描述'
+                apiKey.description || t('apiKeys.newApiKeyModal.noDescription')
               }}</span>
             </div>
           </div>
 
           <div>
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >API Key</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+              t('apiKeys.newApiKeyModal.apiKey')
+            }}</label>
             <div class="relative">
               <div
                 class="flex min-h-[60px] items-center break-all rounded-lg border border-gray-700 bg-gray-900 p-4 pr-14 font-mono text-sm text-white dark:border-gray-600 dark:bg-gray-900"
@@ -84,7 +89,11 @@
               <div class="absolute right-3 top-3">
                 <button
                   class="btn-icon-sm bg-gray-700 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600"
-                  :title="showFullKey ? '隐藏API Key' : '显示完整API Key'"
+                  :title="
+                    showFullKey
+                      ? t('apiKeys.newApiKeyModal.hideApiKey')
+                      : t('apiKeys.newApiKeyModal.showFullApiKey')
+                  "
                   type="button"
                   @click="toggleKeyVisibility"
                 >
@@ -93,7 +102,7 @@
               </div>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              点击眼睛图标切换显示模式，使用下方按钮复制完整 API Key
+              {{ t('apiKeys.newApiKeyModal.visibilityHint') }}
             </p>
           </div>
         </div>
@@ -105,13 +114,13 @@
             @click="copyApiKey"
           >
             <i class="fas fa-copy" />
-            复制 API Key
+            {{ t('apiKeys.newApiKeyModal.copyApiKey') }}
           </button>
           <button
             class="rounded-xl border border-gray-300 bg-gray-200 px-6 py-3 font-semibold text-gray-800 transition-colors hover:bg-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
             @click="handleClose"
           >
-            我已保存
+            {{ t('apiKeys.newApiKeyModal.alreadySaved') }}
           </button>
         </div>
       </div>
@@ -121,8 +130,11 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 
+const { t } = useI18n()
+
 const props = defineProps({
   apiKey: {
     type: Object,
@@ -159,13 +171,13 @@ const getDisplayedApiKey = () => {
 const copyApiKey = async () => {
   const key = props.apiKey.apiKey || props.apiKey.key || ''
   if (!key) {
-    showToast('API Key 不存在', 'error')
+    showToast(t('apiKeys.newApiKeyModal.apiKeyNotFound'), 'error')
     return
   }
 
   try {
     await navigator.clipboard.writeText(key)
-    showToast('API Key 已复制到剪贴板', 'success')
+    showToast(t('apiKeys.newApiKeyModal.copySuccess'), 'success')
   } catch (error) {
     // console.error('Failed to copy:', error)
     // 降级方案：创建一个临时文本区域
@@ -175,9 +187,9 @@ const copyApiKey = async () => {
     textArea.select()
     try {
       document.execCommand('copy')
-      showToast('API Key 已复制到剪贴板', 'success')
+      showToast(t('apiKeys.newApiKeyModal.copySuccess'), 'success')
     } catch (fallbackError) {
-      showToast('复制失败，请手动复制', 'error')
+      showToast(t('apiKeys.newApiKeyModal.copyFailed'), 'error')
     } finally {
       document.body.removeChild(textArea)
     }
@@ -188,19 +200,17 @@ const copyApiKey = async () => {
 const handleClose = async () => {
   if (window.showConfirm) {
     const confirmed = await window.showConfirm(
-      '关闭提醒',
-      '关闭后将无法再次查看完整的API Key，请确保已经妥善保存。\n\n确定要关闭吗？',
-      '确定关闭',
-      '取消'
+      t('apiKeys.newApiKeyModal.closeReminderTitle'),
+      t('apiKeys.newApiKeyModal.closeReminderMessage'),
+      t('apiKeys.newApiKeyModal.confirmClose'),
+      t('apiKeys.newApiKeyModal.cancel')
     )
     if (confirmed) {
       emit('close')
     }
   } else {
     // 降级方案
-    const confirmed = confirm(
-      '关闭后将无法再次查看完整的API Key，请确保已经妥善保存。\n\n确定要关闭吗？'
-    )
+    const confirmed = confirm(t('apiKeys.newApiKeyModal.closeReminderMessage'))
     if (confirmed) {
       emit('close')
     }
@@ -211,17 +221,17 @@ const handleClose = async () => {
 const handleDirectClose = async () => {
   if (window.showConfirm) {
     const confirmed = await window.showConfirm(
-      '确定要关闭吗？',
-      '您还没有保存API Key，关闭后将无法再次查看。\n\n建议您先复制API Key再关闭。',
-      '仍然关闭',
-      '返回复制'
+      t('apiKeys.newApiKeyModal.directCloseTitle'),
+      t('apiKeys.newApiKeyModal.directCloseMessage'),
+      t('apiKeys.newApiKeyModal.stillClose'),
+      t('apiKeys.newApiKeyModal.goBack')
     )
     if (confirmed) {
       emit('close')
     }
   } else {
     // 降级方案
-    const confirmed = confirm('您还没有保存API Key，关闭后将无法再次查看。\n\n确定要关闭吗？')
+    const confirmed = confirm(t('apiKeys.newApiKeyModal.directCloseFallback'))
     if (confirmed) {
       emit('close')
     }
diff --git a/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue b/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
index c6b3311c..c919d6a0 100644
--- a/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
@@ -9,7 +9,9 @@
             >
               <i class="fas fa-clock text-white" />
             </div>
-            <h3 class="text-xl font-bold text-gray-900">续期 API Key</h3>
+            <h3 class="text-xl font-bold text-gray-900">
+              {{ $t('apiKeys.renewApiKeyModal.title') }}
+            </h3>
           </div>
           <button
             class="text-gray-400 transition-colors hover:text-gray-600"
@@ -28,13 +30,18 @@
                 <i class="fas fa-info text-sm text-white" />
               </div>
               <div>
-                <h4 class="mb-1 font-semibold text-gray-800">API Key 信息</h4>
+                <h4 class="mb-1 font-semibold text-gray-800">
+                  {{ $t('apiKeys.renewApiKeyModal.apiKeyInfo') }}
+                </h4>
                 <p class="text-sm text-gray-700">
                   {{ apiKey.name }}
                 </p>
                 <p class="mt-1 text-xs text-gray-600">
-                  当前过期时间：{{
-                    apiKey.expiresAt ? formatExpireDate(apiKey.expiresAt) : '永不过期'
+                  {{ $t('apiKeys.renewApiKeyModal.currentExpiry')
+                  }}{{
+                    apiKey.expiresAt
+                      ? formatExpireDate(apiKey.expiresAt)
+                      : $t('apiKeys.renewApiKeyModal.neverExpires')
                   }}
                 </p>
               </div>
@@ -42,19 +49,21 @@
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700">续期时长</label>
+            <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+              $t('apiKeys.renewApiKeyModal.renewDuration')
+            }}</label>
             <select
               v-model="form.renewDuration"
               class="form-input w-full"
               @change="updateRenewExpireAt"
             >
-              <option value="7d">延长 7 天</option>
-              <option value="30d">延长 30 天</option>
-              <option value="90d">延长 90 天</option>
-              <option value="180d">延长 180 天</option>
-              <option value="365d">延长 365 天</option>
-              <option value="custom">自定义日期</option>
-              <option value="permanent">设为永不过期</option>
+              <option value="7d">{{ $t('apiKeys.renewApiKeyModal.extend7Days') }}</option>
+              <option value="30d">{{ $t('apiKeys.renewApiKeyModal.extend30Days') }}</option>
+              <option value="90d">{{ $t('apiKeys.renewApiKeyModal.extend90Days') }}</option>
+              <option value="180d">{{ $t('apiKeys.renewApiKeyModal.extend180Days') }}</option>
+              <option value="365d">{{ $t('apiKeys.renewApiKeyModal.extend365Days') }}</option>
+              <option value="custom">{{ $t('apiKeys.renewApiKeyModal.customDate') }}</option>
+              <option value="permanent">{{ $t('apiKeys.renewApiKeyModal.setPermanent') }}</option>
             </select>
             <div v-if="form.renewDuration === 'custom'" class="mt-3">
               <input
@@ -66,7 +75,8 @@
               />
             </div>
             <p v-if="form.newExpiresAt" class="mt-2 text-xs text-gray-500">
-              新的过期时间：{{ formatExpireDate(form.newExpiresAt) }}
+              {{ $t('apiKeys.renewApiKeyModal.newExpiry')
+              }}{{ formatExpireDate(form.newExpiresAt) }}
             </p>
           </div>
         </div>
@@ -77,7 +87,7 @@
             type="button"
             @click="$emit('close')"
           >
-            取消
+            {{ $t('apiKeys.renewApiKeyModal.cancel') }}
           </button>
           <button
             class="btn btn-primary flex-1 px-6 py-3 font-semibold"
@@ -87,7 +97,11 @@
           >
             <div v-if="loading" class="loading-spinner mr-2" />
             <i v-else class="fas fa-clock mr-2" />
-            {{ loading ? '续期中...' : '确认续期' }}
+            {{
+              loading
+                ? $t('apiKeys.renewApiKeyModal.renewing')
+                : $t('apiKeys.renewApiKeyModal.confirmRenew')
+            }}
           </button>
         </div>
       </div>
@@ -97,9 +111,12 @@
 
 <script setup>
 import { ref, reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 
+const { t } = useI18n()
+
 const props = defineProps({
   apiKey: {
     type: Object,
@@ -133,7 +150,10 @@ const minDateTime = computed(() => {
 // 格式化过期日期
 const formatExpireDate = (dateString) => {
   const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
+  // 根据当前语言设置选择合适的locale
+  const locale =
+    t('common.locale') === 'en' ? 'en-US' : t('common.locale') === 'zh-TW' ? 'zh-TW' : 'zh-CN'
+  return date.toLocaleString(locale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
@@ -209,14 +229,14 @@ const renewApiKey = async () => {
     const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}`, data)
 
     if (result.success) {
-      showToast('API Key 续期成功', 'success')
+      showToast(t('apiKeys.renewApiKeyModal.renewSuccess'), 'success')
       emit('success')
       emit('close')
     } else {
-      showToast(result.message || '续期失败', 'error')
+      showToast(result.message || t('apiKeys.renewApiKeyModal.renewFailed'), 'error')
     }
   } catch (error) {
-    showToast('续期失败', 'error')
+    showToast(t('apiKeys.renewApiKeyModal.renewFailed'), 'error')
   } finally {
     loading.value = false
   }
diff --git a/web/admin-spa/src/components/apikeys/UsageDetailModal.vue b/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
index 93527223..e292bdb9 100644
--- a/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
+++ b/web/admin-spa/src/components/apikeys/UsageDetailModal.vue
@@ -17,7 +17,7 @@
               <i class="fas fa-chart-line text-sm text-white sm:text-base" />
             </div>
             <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
-              使用统计详情 - {{ apiKey.name }}
+              {{ t('apiKeys.usageDetailModal.title') }} - {{ apiKey.name }}
             </h3>
           </div>
           <button class="p-1 text-gray-400 transition-colors hover:text-gray-600" @click="close">
@@ -34,14 +34,17 @@
               class="rounded-lg border border-blue-200 bg-gradient-to-br from-blue-50 to-blue-100 p-4 dark:border-blue-700 dark:from-blue-900/20 dark:to-blue-800/20"
             >
               <div class="mb-3 flex items-center justify-between">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">总请求数</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.usageDetailModal.totalRequests')
+                }}</span>
                 <i class="fas fa-paper-plane text-blue-500" />
               </div>
               <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                 {{ formatNumber(totalRequests) }}
               </div>
               <div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                今日: {{ formatNumber(dailyRequests) }} 次
+                {{ t('apiKeys.usageDetailModal.today') }}: {{ formatNumber(dailyRequests) }}
+                {{ t('apiKeys.usageDetailModal.times') }}
               </div>
             </div>
 
@@ -50,14 +53,16 @@
               class="rounded-lg border border-green-200 bg-gradient-to-br from-green-50 to-green-100 p-4 dark:border-green-700 dark:from-green-900/20 dark:to-green-800/20"
             >
               <div class="mb-3 flex items-center justify-between">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">总Token数</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.usageDetailModal.totalTokens')
+                }}</span>
                 <i class="fas fa-coins text-green-500" />
               </div>
               <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                 {{ formatTokenCount(totalTokens) }}
               </div>
               <div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                今日: {{ formatTokenCount(dailyTokens) }}
+                {{ t('apiKeys.usageDetailModal.today') }}: {{ formatTokenCount(dailyTokens) }}
               </div>
             </div>
 
@@ -66,14 +71,16 @@
               class="rounded-lg border border-yellow-200 bg-gradient-to-br from-yellow-50 to-yellow-100 p-4 dark:border-yellow-700 dark:from-yellow-900/20 dark:to-yellow-800/20"
             >
               <div class="mb-3 flex items-center justify-between">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">总费用</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.usageDetailModal.totalCost')
+                }}</span>
                 <i class="fas fa-dollar-sign text-yellow-600" />
               </div>
               <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
                 ${{ totalCost.toFixed(4) }}
               </div>
               <div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
-                今日: ${{ dailyCost.toFixed(4) }}
+                {{ t('apiKeys.usageDetailModal.today') }}: ${{ dailyCost.toFixed(4) }}
               </div>
             </div>
 
@@ -82,7 +89,9 @@
               class="rounded-lg border border-purple-200 bg-gradient-to-br from-purple-50 to-purple-100 p-4 dark:border-purple-700 dark:from-purple-900/20 dark:to-purple-800/20"
             >
               <div class="mb-3 flex items-center justify-between">
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">平均速率</span>
+                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
+                  t('apiKeys.usageDetailModal.averageRate')
+                }}</span>
                 <i class="fas fa-tachometer-alt text-purple-500" />
               </div>
               <div class="space-y-1 text-sm">
@@ -104,13 +113,15 @@
               class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
             >
               <i class="fas fa-chart-pie mr-2 text-indigo-500" />
-              Token 使用分布
+              {{ t('apiKeys.usageDetailModal.tokenDistribution') }}
             </h4>
             <div class="space-y-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
                   <i class="fas fa-arrow-down mr-2 text-green-500" />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">输入 Token</span>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                    t('apiKeys.usageDetailModal.inputTokens')
+                  }}</span>
                 </div>
                 <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                   {{ formatTokenCount(inputTokens) }}
@@ -119,7 +130,9 @@
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
                   <i class="fas fa-arrow-up mr-2 text-blue-500" />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">输出 Token</span>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                    t('apiKeys.usageDetailModal.outputTokens')
+                  }}</span>
                 </div>
                 <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                   {{ formatTokenCount(outputTokens) }}
@@ -128,7 +141,9 @@
               <div v-if="cacheCreateTokens > 0" class="flex items-center justify-between">
                 <div class="flex items-center">
                   <i class="fas fa-save mr-2 text-purple-500" />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">缓存创建 Token</span>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                    t('apiKeys.usageDetailModal.cacheCreateTokens')
+                  }}</span>
                 </div>
                 <span class="text-sm font-semibold text-purple-600">
                   {{ formatTokenCount(cacheCreateTokens) }}
@@ -137,7 +152,9 @@
               <div v-if="cacheReadTokens > 0" class="flex items-center justify-between">
                 <div class="flex items-center">
                   <i class="fas fa-download mr-2 text-purple-500" />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">缓存读取 Token</span>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                    t('apiKeys.usageDetailModal.cacheReadTokens')
+                  }}</span>
                 </div>
                 <span class="text-sm font-semibold text-purple-600">
                   {{ formatTokenCount(cacheReadTokens) }}
@@ -152,12 +169,14 @@
               class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
             >
               <i class="fas fa-shield-alt mr-2 text-red-500" />
-              限制设置
+              {{ t('apiKeys.usageDetailModal.limitSettings') }}
             </h4>
             <div class="space-y-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
               <div v-if="apiKey.dailyCostLimit > 0" class="space-y-2">
                 <div class="flex items-center justify-between text-sm">
-                  <span class="text-gray-600 dark:text-gray-400">每日费用限制</span>
+                  <span class="text-gray-600 dark:text-gray-400">{{
+                    t('apiKeys.usageDetailModal.dailyCostLimit')
+                  }}</span>
                   <span class="font-semibold text-gray-900 dark:text-gray-100">
                     ${{ apiKey.dailyCostLimit.toFixed(2) }}
                   </span>
@@ -176,7 +195,11 @@
                   />
                 </div>
                 <div class="text-right text-xs text-gray-500 dark:text-gray-400">
-                  已使用 {{ dailyCostPercentage.toFixed(1) }}%
+                  {{
+                    t('apiKeys.usageDetailModal.usedPercentage', {
+                      percentage: dailyCostPercentage.toFixed(1)
+                    })
+                  }}
                 </div>
               </div>
 
@@ -184,7 +207,9 @@
                 v-if="apiKey.concurrencyLimit > 0"
                 class="flex items-center justify-between text-sm"
               >
-                <span class="text-gray-600 dark:text-gray-400">并发限制</span>
+                <span class="text-gray-600 dark:text-gray-400">{{
+                  t('apiKeys.usageDetailModal.concurrencyLimit')
+                }}</span>
                 <span class="font-semibold text-purple-600">
                   {{ apiKey.currentConcurrency || 0 }} / {{ apiKey.concurrencyLimit }}
                 </span>
@@ -193,14 +218,14 @@
               <div v-if="apiKey.rateLimitWindow > 0" class="space-y-2">
                 <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   <i class="fas fa-clock mr-1 text-blue-500" />
-                  时间窗口限制
+                  {{ t('apiKeys.usageDetailModal.timeWindowLimit') }}
                 </h5>
                 <WindowCountdown
                   :cost-limit="apiKey.rateLimitCost"
                   :current-cost="apiKey.currentWindowCost"
                   :current-requests="apiKey.currentWindowRequests"
                   :current-tokens="apiKey.currentWindowTokens"
-                  label="窗口状态"
+                  :label="t('apiKeys.usageDetailModal.windowStatus')"
                   :rate-limit-window="apiKey.rateLimitWindow"
                   :request-limit="apiKey.rateLimitRequests"
                   :show-progress="true"
@@ -218,7 +243,7 @@
         <!-- 底部按钮 -->
         <div class="mt-4 flex justify-end gap-2 sm:mt-6 sm:gap-3">
           <button class="btn btn-secondary px-4 py-2 text-sm" type="button" @click="close">
-            关闭
+            {{ t('apiKeys.usageDetailModal.close') }}
           </button>
         </div>
       </div>
@@ -228,8 +253,11 @@
 
 <script setup>
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import WindowCountdown from './WindowCountdown.vue'
 
+const { t } = useI18n()
+
 const props = defineProps({
   show: {
     type: Boolean,
@@ -274,7 +302,9 @@ const dailyCostPercentage = computed(() => {
 // 方法
 const formatNumber = (num) => {
   if (!num && num !== 0) return '0'
-  return num.toLocaleString('zh-CN')
+  // 根据当前语言环境自动选择合适的地区设置
+  const currentLocale = t('common.locale')
+  return num.toLocaleString(currentLocale)
 }
 
 // 格式化Token数量（使用K/M单位）
diff --git a/web/admin-spa/src/components/apikeys/WindowCountdown.vue b/web/admin-spa/src/components/apikeys/WindowCountdown.vue
index 50863530..84d26c7d 100644
--- a/web/admin-spa/src/components/apikeys/WindowCountdown.vue
+++ b/web/admin-spa/src/components/apikeys/WindowCountdown.vue
@@ -1,27 +1,29 @@
 <template>
   <div class="space-y-1">
     <div class="flex items-center justify-between text-xs">
-      <span class="text-gray-500">{{ label }}</span>
+      <span class="text-gray-500">{{ displayLabel }}</span>
       <span v-if="windowState === 'active'" class="font-medium text-gray-700">
         <i class="fas fa-clock mr-1 text-blue-500" />
         {{ formatTime(remainingSeconds) }}
       </span>
       <span v-else-if="windowState === 'expired'" class="font-medium text-orange-600">
         <i class="fas fa-sync-alt mr-1" />
-        窗口已过期
+        {{ t('apiKeys.windowCountdown.expired') }}
       </span>
       <span v-else-if="windowState === 'notStarted'" class="font-medium text-gray-500">
         <i class="fas fa-pause-circle mr-1" />
-        窗口未激活
+        {{ t('apiKeys.windowCountdown.notStarted') }}
+      </span>
+      <span v-else class="font-medium text-gray-400">
+        {{ rateLimitWindow }} {{ t('apiKeys.windowCountdown.minutes') }}
       </span>
-      <span v-else class="font-medium text-gray-400"> {{ rateLimitWindow }} 分钟 </span>
     </div>
 
     <!-- 进度条（仅在有限制时显示） -->
     <div v-if="showProgress" class="space-y-0.5">
       <div v-if="hasRequestLimit" class="space-y-0.5">
         <div class="flex items-center justify-between text-xs">
-          <span class="text-gray-400">请求</span>
+          <span class="text-gray-400">{{ t('apiKeys.windowCountdown.requests') }}</span>
           <span class="text-gray-600"> {{ currentRequests || 0 }}/{{ requestLimit }} </span>
         </div>
         <div class="h-1 w-full rounded-full bg-gray-200">
@@ -36,7 +38,7 @@
       <!-- Token限制（向后兼容） -->
       <div v-if="hasTokenLimit" class="space-y-0.5">
         <div class="flex items-center justify-between text-xs">
-          <span class="text-gray-400">Token</span>
+          <span class="text-gray-400">{{ t('apiKeys.windowCountdown.tokens') }}</span>
           <span class="text-gray-600">
             {{ formatTokenCount(currentTokens || 0) }}/{{ formatTokenCount(tokenLimit) }}
           </span>
@@ -53,7 +55,7 @@
       <!-- 费用限制（新功能） -->
       <div v-if="hasCostLimit" class="space-y-0.5">
         <div class="flex items-center justify-between text-xs">
-          <span class="text-gray-400">费用</span>
+          <span class="text-gray-400">{{ t('apiKeys.windowCountdown.cost') }}</span>
           <span class="text-gray-600">
             ${{ (currentCost || 0).toFixed(2) }}/${{ costLimit.toFixed(2) }}
           </span>
@@ -71,22 +73,29 @@
     <!-- 额外提示信息 -->
     <div v-if="windowState === 'active' && showTooltip" class="text-xs text-gray-500">
       <i class="fas fa-info-circle mr-1" />
-      <span v-if="remainingSeconds < 60">即将重置</span>
+      <span v-if="remainingSeconds < 60">{{ t('apiKeys.windowCountdown.aboutToReset') }}</span>
       <span v-else-if="remainingSeconds < 300"
-        >{{ Math.ceil(remainingSeconds / 60) }} 分钟后重置</span
+        >{{ Math.ceil(remainingSeconds / 60) }}
+        {{ t('apiKeys.windowCountdown.minutesUntilReset') }}</span
+      >
+      <span v-else
+        >{{ formatDetailedTime(remainingSeconds)
+        }}{{ t('apiKeys.windowCountdown.untilReset') }}</span
       >
-      <span v-else>{{ formatDetailedTime(remainingSeconds) }}后重置</span>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const props = defineProps({
   label: {
     type: String,
-    default: '窗口限制'
+    default: ''
   },
   rateLimitWindow: {
     type: Number,
@@ -143,6 +152,10 @@ const remainingSeconds = ref(props.windowRemainingSeconds)
 let intervalId = null
 
 // 计算属性
+const displayLabel = computed(() => {
+  return props.label || t('apiKeys.windowCountdown.windowLimit')
+})
+
 const windowState = computed(() => {
   if (props.windowStartTime === null) {
     return 'notStarted' // 窗口未开始
@@ -182,9 +195,9 @@ const formatDetailedTime = (seconds) => {
   const minutes = Math.floor((seconds % 3600) / 60)
 
   if (hours > 0) {
-    return `${hours}小时${minutes}分钟`
+    return `${hours}${t('apiKeys.windowCountdown.hours')}${minutes}${t('apiKeys.windowCountdown.minutes')}`
   } else {
-    return `${minutes}分钟`
+    return `${minutes}${t('apiKeys.windowCountdown.minutes')}`
   }
 }
 
diff --git a/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue b/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
index 20c693ad..0c321366 100644
--- a/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
+++ b/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
@@ -33,7 +33,9 @@
         <div
           class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
         >
-          <span>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}{{ t('apiStats.requests') }}</span>
+          <span
+            >{{ formatNumber(getStatUsage(stat)?.requests || 0) }}{{ t('apiStats.requests') }}</span
+          >
           <span>{{ getStatUsage(stat)?.formattedCost || '$0.00' }}</span>
         </div>
       </div>
@@ -41,7 +43,10 @@
       <!-- 其他Keys汇总 -->
       <div v-if="otherKeysCount > 0" class="border-t border-gray-200 pt-2 dark:border-gray-700">
         <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
-          <span>{{ t('apiStats.otherKeys') }} {{ otherKeysCount }} {{ t('apiStats.individual') }}{{ t('apiStats.keys') }}</span>
+          <span
+            >{{ t('apiStats.otherKeys') }} {{ otherKeysCount }} {{ t('apiStats.individual')
+            }}{{ t('apiStats.keys') }}</span
+          >
           <span>{{ otherPercentage }}%</span>
         </div>
       </div>
diff --git a/web/admin-spa/src/components/apistats/ApiKeyInput.vue b/web/admin-spa/src/components/apistats/ApiKeyInput.vue
index 0366e492..fd234cef 100644
--- a/web/admin-spa/src/components/apistats/ApiKeyInput.vue
+++ b/web/admin-spa/src/components/apistats/ApiKeyInput.vue
@@ -6,7 +6,9 @@
         <i class="fas fa-chart-line mr-3" />
         {{ t('apiStats.usageStatsQuery') }}
       </h2>
-      <p class="text-base text-gray-600 dark:text-gray-400">{{ t('apiStats.apiKeyDescription') }}</p>
+      <p class="text-base text-gray-600 dark:text-gray-400">
+        {{ t('apiStats.apiKeyDescription') }}
+      </p>
     </div>
 
     <!-- 输入区域 -->
diff --git a/web/admin-spa/src/components/apistats/LimitConfig.vue b/web/admin-spa/src/components/apistats/LimitConfig.vue
index a59255df..812818b8 100644
--- a/web/admin-spa/src/components/apistats/LimitConfig.vue
+++ b/web/admin-spa/src/components/apistats/LimitConfig.vue
@@ -31,13 +31,17 @@
               <div class="text-lg font-bold text-gray-900 dark:text-gray-100">
                 {{ aggregatedStats.totalKeys }}
               </div>
-              <div class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiStats.totalKeys') }}</div>
+              <div class="text-xs text-gray-600 dark:text-gray-400">
+                {{ t('apiStats.totalKeys') }}
+              </div>
             </div>
             <div class="text-center">
               <div class="text-lg font-bold text-green-600">
                 {{ aggregatedStats.activeKeys }}
               </div>
-              <div class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiStats.activeKeys') }}</div>
+              <div class="text-xs text-gray-600 dark:text-gray-400">
+                {{ t('apiStats.activeKeys') }}
+              </div>
             </div>
           </div>
         </div>
@@ -48,7 +52,9 @@
         >
           <div class="mb-3 flex items-center">
             <i class="fas fa-chart-pie mr-2 text-purple-500" />
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('apiStats.aggregateStatsSummary') }}</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
+              t('apiStats.aggregateStatsSummary')
+            }}</span>
           </div>
           <div class="space-y-2">
             <div class="flex items-center justify-between">
@@ -106,9 +112,9 @@
         <!-- 每日费用限制 -->
         <div>
           <div class="mb-2 flex items-center justify-between">
-            <span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base"
-              >{{ t('apiStats.dailyCostLimit') }}</span
-            >
+            <span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base">{{
+              t('apiStats.dailyCostLimit')
+            }}</span>
             <span class="text-xs text-gray-500 dark:text-gray-400 md:text-sm">
               <span v-if="statsData.limits.dailyCostLimit > 0">
                 ${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{
@@ -175,7 +181,9 @@
         <!-- 其他限制信息 -->
         <div class="space-y-2 border-t border-gray-100 pt-2 dark:border-gray-700">
           <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.concurrencyLimit') }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+              t('apiStats.concurrencyLimit')
+            }}</span>
             <span class="text-sm font-medium text-gray-900 md:text-base">
               <span v-if="statsData.limits.concurrencyLimit > 0">
                 {{ statsData.limits.concurrencyLimit }}
@@ -186,7 +194,9 @@
             </span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.modelLimit') }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+              t('apiStats.modelLimit')
+            }}</span>
             <span class="text-sm font-medium text-gray-900 md:text-base">
               <span
                 v-if="
@@ -196,7 +206,11 @@
                 class="text-orange-600"
               >
                 <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-                {{ t('apiStats.restrictedModelsCount', { count: statsData.restrictions.restrictedModels.length }) }}
+                {{
+                  t('apiStats.restrictedModelsCount', {
+                    count: statsData.restrictions.restrictedModels.length
+                  })
+                }}
               </span>
               <span v-else class="text-green-600">
                 <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
@@ -205,7 +219,9 @@
             </span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.clientLimit') }}</span>
+            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+              t('apiStats.clientLimit')
+            }}</span>
             <span class="text-sm font-medium text-gray-900 md:text-base">
               <span
                 v-if="
@@ -215,7 +231,11 @@
                 class="text-orange-600"
               >
                 <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-                {{ t('apiStats.restrictedClientsCount', { count: statsData.restrictions.allowedClients.length }) }}
+                {{
+                  t('apiStats.restrictedClientsCount', {
+                    count: statsData.restrictions.allowedClients.length
+                  })
+                }}
               </span>
               <span v-else class="text-green-600">
                 <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
diff --git a/web/admin-spa/src/components/apistats/ModelUsageStats.vue b/web/admin-spa/src/components/apistats/ModelUsageStats.vue
index b6c5c611..16353f70 100644
--- a/web/admin-spa/src/components/apistats/ModelUsageStats.vue
+++ b/web/admin-spa/src/components/apistats/ModelUsageStats.vue
@@ -19,7 +19,9 @@
       <i
         class="fas fa-spinner loading-spinner mb-2 text-xl text-gray-600 dark:text-gray-400 md:text-2xl"
       />
-      <p class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.loadingModelStats') }}</p>
+      <p class="text-sm text-gray-600 dark:text-gray-400 md:text-base">
+        {{ t('apiStats.loadingModelStats') }}
+      </p>
     </div>
 
     <!-- 模型统计数据 -->
@@ -38,7 +40,9 @@
             <div class="text-base font-bold text-green-600 md:text-lg">
               {{ model.formatted?.total || '$0.000000' }}
             </div>
-            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">{{ t('apiStats.totalCost') }}</div>
+            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
+              {{ t('apiStats.totalCost') }}
+            </div>
           </div>
         </div>
 
@@ -56,7 +60,9 @@
             </div>
           </div>
           <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.cacheCreateTokens') }}</div>
+            <div class="text-gray-600 dark:text-gray-400">
+              {{ t('apiStats.cacheCreateTokens') }}
+            </div>
             <div class="font-medium text-gray-900 dark:text-gray-100">
               {{ formatNumber(model.cacheCreateTokens) }}
             </div>
@@ -75,7 +81,11 @@
     <div v-else class="py-6 text-center text-gray-500 dark:text-gray-400 md:py-8">
       <i class="fas fa-chart-pie mb-3 text-2xl md:text-3xl" />
       <p class="text-sm md:text-base">
-        {{ t('apiStats.noModelData', { period: statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }) }}
+        {{
+          t('apiStats.noModelData', {
+            period: statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth')
+          })
+        }}
       </p>
     </div>
   </div>
diff --git a/web/admin-spa/src/components/apistats/StatsOverview.vue b/web/admin-spa/src/components/apistats/StatsOverview.vue
index 447cce99..80c85872 100644
--- a/web/admin-spa/src/components/apistats/StatsOverview.vue
+++ b/web/admin-spa/src/components/apistats/StatsOverview.vue
@@ -17,39 +17,51 @@
       <!-- 多 Key 模式下的概要信息 -->
       <div v-if="multiKeyMode && aggregatedStats" class="space-y-2 md:space-y-3">
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.queryKeysCount') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.queryKeysCount')
+          }}</span>
           <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
             {{ aggregatedStats.totalKeys }} {{ t('apiStats.individual') }}
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.activeKeysCount') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.activeKeysCount')
+          }}</span>
           <span class="text-sm font-medium text-green-600 md:text-base">
             <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
             {{ aggregatedStats.activeKeys }} {{ t('apiStats.individual') }}
           </span>
         </div>
         <div v-if="invalidKeys.length > 0" class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.invalidKeysCount') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.invalidKeysCount')
+          }}</span>
           <span class="text-sm font-medium text-red-600 md:text-base">
             <i class="fas fa-times-circle mr-1 text-xs md:text-sm" />
             {{ invalidKeys.length }} {{ t('apiStats.individual') }}
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.totalRequests') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.totalRequests')
+          }}</span>
           <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
             {{ formatNumber(aggregatedStats.usage.requests) }}
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.totalTokens') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.totalTokens')
+          }}</span>
           <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
             {{ formatNumber(aggregatedStats.usage.allTokens) }}
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.totalCost') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.totalCost')
+          }}</span>
           <span class="text-sm font-medium text-indigo-600 md:text-base">
             {{ aggregatedStats.usage.formattedCost }}
           </span>
@@ -60,7 +72,9 @@
           v-if="individualStats.length > 1"
           class="border-t border-gray-200 pt-2 dark:border-gray-700"
         >
-          <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">{{ t('apiStats.keyContribution') }}</div>
+          <div class="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            {{ t('apiStats.keyContribution') }}
+          </div>
           <div class="space-y-1">
             <div
               v-for="stat in topContributors"
@@ -79,14 +93,18 @@
       <!-- 单 Key 模式下的详细信息 -->
       <div v-else class="space-y-2 md:space-y-3">
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.name') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.name')
+          }}</span>
           <span
             class="break-all text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base"
             >{{ statsData.name }}</span
           >
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.status') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.status')
+          }}</span>
           <span
             class="text-sm font-medium md:text-base"
             :class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
@@ -99,22 +117,26 @@
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.permissions') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.permissions')
+          }}</span>
           <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
             formatPermissions(statsData.permissions)
           }}</span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.createdAt') }}</span>
+          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.createdAt')
+          }}</span>
           <span
             class="break-all text-xs font-medium text-gray-900 dark:text-gray-100 md:text-base"
             >{{ formatDate(statsData.createdAt) }}</span
           >
         </div>
         <div class="flex items-start justify-between">
-          <span class="mt-1 flex-shrink-0 text-sm text-gray-600 dark:text-gray-400 md:text-base"
-            >{{ t('apiStats.expiresAt') }}</span
-          >
+          <span class="mt-1 flex-shrink-0 text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
+            t('apiStats.expiresAt')
+          }}</span>
           <!-- 未激活状态 -->
           <div
             v-if="statsData.expirationMode === 'activation' && !statsData.isActivated"
@@ -177,7 +199,9 @@
             {{ formatNumber(currentPeriodData.requests) }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? t('apiStats.todayRequests') : t('apiStats.monthlyRequests') }}
+            {{
+              statsPeriod === 'daily' ? t('apiStats.todayRequests') : t('apiStats.monthlyRequests')
+            }}
           </div>
         </div>
         <div class="stat-card text-center">
@@ -201,7 +225,11 @@
             {{ formatNumber(currentPeriodData.inputTokens) }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? t('apiStats.todayInputTokens') : t('apiStats.monthlyInputTokens') }}
+            {{
+              statsPeriod === 'daily'
+                ? t('apiStats.todayInputTokens')
+                : t('apiStats.monthlyInputTokens')
+            }}
           </div>
         </div>
       </div>
diff --git a/web/admin-spa/src/components/apistats/TokenDistribution.vue b/web/admin-spa/src/components/apistats/TokenDistribution.vue
index a08850d3..e467f493 100644
--- a/web/admin-spa/src/components/apistats/TokenDistribution.vue
+++ b/web/admin-spa/src/components/apistats/TokenDistribution.vue
@@ -51,9 +51,9 @@
     </div>
     <div class="mt-3 border-t border-gray-200 pt-3 dark:border-gray-700 md:mt-4 md:pt-4">
       <div class="flex items-center justify-between font-bold text-gray-900 dark:text-gray-100">
-        <span class="text-sm md:text-base"
-          >{{ statsPeriod === 'daily' ? t('apiStats.todayTotal') : t('apiStats.monthlyTotal') }}</span
-        >
+        <span class="text-sm md:text-base">{{
+          statsPeriod === 'daily' ? t('apiStats.todayTotal') : t('apiStats.monthlyTotal')
+        }}</span>
         <span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
       </div>
     </div>
diff --git a/web/admin-spa/src/components/layout/AppHeader.vue b/web/admin-spa/src/components/layout/AppHeader.vue
index efd4af54..60867399 100644
--- a/web/admin-spa/src/components/layout/AppHeader.vue
+++ b/web/admin-spa/src/components/layout/AppHeader.vue
@@ -77,7 +77,9 @@
             <!-- 版本信息 -->
             <div class="border-b border-gray-100 px-4 py-3 dark:border-gray-700">
               <div class="flex items-center justify-between text-sm">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('header.currentVersion') }}</span>
+                <span class="text-gray-500 dark:text-gray-400">{{
+                  t('header.currentVersion')
+                }}</span>
                 <span class="font-mono text-gray-700 dark:text-gray-300"
                   >v{{ versionInfo.current || '...' }}</span
                 >
@@ -165,7 +167,9 @@
           >
             <i class="fas fa-key text-white" />
           </div>
-          <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ t('header.changePasswordModal.title') }}</h3>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
+            {{ t('header.changePasswordModal.title') }}
+          </h3>
         </div>
         <button
           class="text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-300"
@@ -180,9 +184,9 @@
         @submit.prevent="changePassword"
       >
         <div>
-          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-            >{{ t('header.changePasswordModal.currentUsername') }}</label
-          >
+          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+            t('header.changePasswordModal.currentUsername')
+          }}</label>
           <input
             class="form-input w-full cursor-not-allowed bg-gray-100 dark:bg-gray-700 dark:text-gray-300"
             disabled
@@ -195,22 +199,24 @@
         </div>
 
         <div>
-          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-            >{{ t('header.changePasswordModal.newUsername') }}</label
-          >
+          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+            t('header.changePasswordModal.newUsername')
+          }}</label>
           <input
             v-model="changePasswordForm.newUsername"
             class="form-input w-full"
             :placeholder="t('header.changePasswordModal.newUsernamePlaceholder')"
             type="text"
           />
-          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">{{ t('header.changePasswordModal.newUsernameHint') }}</p>
+          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+            {{ t('header.changePasswordModal.newUsernameHint') }}
+          </p>
         </div>
 
         <div>
-          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-            >{{ t('header.changePasswordModal.currentPassword') }}</label
-          >
+          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+            t('header.changePasswordModal.currentPassword')
+          }}</label>
           <input
             v-model="changePasswordForm.currentPassword"
             class="form-input w-full"
@@ -221,9 +227,9 @@
         </div>
 
         <div>
-          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-            >{{ t('header.changePasswordModal.newPassword') }}</label
-          >
+          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+            t('header.changePasswordModal.newPassword')
+          }}</label>
           <input
             v-model="changePasswordForm.newPassword"
             class="form-input w-full"
@@ -231,13 +237,15 @@
             required
             type="password"
           />
-          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">{{ t('header.changePasswordModal.newPasswordHint') }}</p>
+          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+            {{ t('header.changePasswordModal.newPasswordHint') }}
+          </p>
         </div>
 
         <div>
-          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-            >{{ t('header.changePasswordModal.confirmPassword') }}</label
-          >
+          <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">{{
+            t('header.changePasswordModal.confirmPassword')
+          }}</label>
           <input
             v-model="changePasswordForm.confirmPassword"
             class="form-input w-full"
@@ -262,7 +270,11 @@
           >
             <div v-if="changePasswordLoading" class="loading-spinner mr-2" />
             <i v-else class="fas fa-save mr-2" />
-            {{ changePasswordLoading ? t('header.changePasswordModal.saving') : t('header.changePasswordModal.save') }}
+            {{
+              changePasswordLoading
+                ? t('header.changePasswordModal.saving')
+                : t('header.changePasswordModal.save')
+            }}
           </button>
         </div>
       </form>
diff --git a/web/admin-spa/src/i18n/locales/en.js b/web/admin-spa/src/i18n/locales/en.js
index 11668a97..b694865e 100644
--- a/web/admin-spa/src/i18n/locales/en.js
+++ b/web/admin-spa/src/i18n/locales/en.js
@@ -24,7 +24,7 @@ export default {
     userMenu: 'User Menu',
     logout: 'Logout',
     settings: 'Settings',
-    
+
     // Version related
     currentVersion: 'Current Version',
     newVersionAvailable: 'New version available',
@@ -34,10 +34,10 @@ export default {
     checkingUpdate: 'Checking for updates...',
     alreadyLatest: 'Already the latest version',
     checkUpdate: 'Check Update',
-    
+
     // User menu items
     changeAccountInfo: 'Change Account Info',
-    
+
     // Change password modal
     changePasswordModal: {
       title: 'Change Account Information',
@@ -55,7 +55,7 @@ export default {
       confirmPasswordPlaceholder: 'Please enter new password again',
       saving: 'Saving...',
       save: 'Save Changes',
-      
+
       // Messages
       passwordMismatch: 'Passwords do not match',
       passwordTooShort: 'New password must be at least 8 characters',
@@ -64,7 +64,7 @@ export default {
       changeFailed: 'Change failed',
       changePasswordFailed: 'Failed to change password'
     },
-    
+
     // Logout
     logoutConfirm: 'Are you sure you want to logout?',
     logoutSuccess: 'Logged out safely'
@@ -79,7 +79,7 @@ export default {
     timeRange: 'Statistics Time Range',
     today: 'Today',
     thisMonth: 'This Month',
-    
+
     // API Key Input
     usageStatsQuery: 'Usage Statistics Query',
     apiKeyDescription: 'Query your API Key usage and statistical data',
@@ -90,7 +90,7 @@ export default {
     singleModeTitle: 'Single Mode',
     aggregateModeTitle: 'Aggregate Mode',
     queryButton: 'Query',
-    
+
     // Stats Overview
     batchQuerySummary: 'Batch Query Summary',
     apiKeyInfo: 'API Key Information',
@@ -101,13 +101,13 @@ export default {
     totalTokens: 'Total Tokens',
     totalCost: 'Total Cost',
     individual: '',
-    
+
     // Aggregated Stats Card
     usageRatio: 'Usage Ratio',
     requests: ' requests',
     otherKeys: 'Other',
     keys: 'Keys',
-    
+
     // Model Usage Stats
     modelUsageStats: 'Model Usage Statistics',
     loadingModelStats: 'Loading model statistics...',
@@ -118,14 +118,14 @@ export default {
     cacheCreateTokens: 'Cache Create',
     cacheReadTokens: 'Cache Read',
     noModelData: 'No {period} model usage data available',
-    
+
     // Token Distribution
     tokenDistribution: 'Token Usage Distribution',
     inputToken: 'Input Tokens',
     outputToken: 'Output Tokens',
     cacheCreateToken: 'Cache Create Tokens',
     cacheReadToken: 'Cache Read Tokens',
-    
+
     // Limit Config
     limitConfig: 'Limit Configuration',
     limitConfigAggregate: 'Limit Configuration (Aggregate Query Mode)',
@@ -138,7 +138,7 @@ export default {
     usageToday: 'Usage Today',
     usageThisMonth: 'Usage This Month',
     remaining: 'Remaining',
-    
+
     // Stats Overview - Additional keys
     name: 'Name',
     status: 'Status',
@@ -165,7 +165,7 @@ export default {
     monthlyTokens: 'Monthly Tokens',
     monthlyCost: 'Monthly Cost',
     monthlyInputTokens: 'Monthly Input Tokens',
-    
+
     // Limit Config - Additional keys
     dailyCostLimit: 'Daily Cost Limit',
     concurrencyLimit: 'Concurrency Limit',
@@ -181,31 +181,38 @@ export default {
     allowedClientsList: 'Allowed Clients',
     allowedClientsNote: 'This API Key can only be used by the clients listed above',
     timeWindowLimit: 'Time Window Limit',
-    aggregateStatsNote: 'Each API Key has independent limit settings, individual limit configurations are not shown in aggregate mode',
+    aggregateStatsNote:
+      'Each API Key has independent limit settings, individual limit configurations are not shown in aggregate mode',
     aggregateStatsSummary: 'Aggregate Statistics Summary',
     invalidKeysCount: '{count} invalid API Keys',
-    orRelationshipRequests: 'Request count and cost limits have an "OR" relationship, rate limiting is triggered when either limit is reached',
-    orRelationshipTokens: 'Request count and token usage have an "OR" relationship, rate limiting is triggered when either limit is reached',
+    orRelationshipRequests:
+      'Request count and cost limits have an "OR" relationship, rate limiting is triggered when either limit is reached',
+    orRelationshipTokens:
+      'Request count and token usage have an "OR" relationship, rate limiting is triggered when either limit is reached',
     onlyRequestsLimit: 'Only request count is limited',
-    
+
     // Token Distribution - Additional keys
     totalAmount: 'Total',
     todayTotal: 'Today Total',
     monthlyTotal: 'Monthly Total',
-    
+
     // Additional missing keys
     usageRatioOnlyInMultiMode: 'Usage ratio is only displayed in multi-key query mode',
     noData: 'No Data',
-    
+
     // ApiKeyInput placeholders and texts
     apiKeyPlaceholder: 'Please enter your API Key (cr_...)',
-    apiKeysPlaceholder: 'Please enter your API Keys, supporting the following formats:\ncr_xxx\ncr_yyy\nor\ncr_xxx, cr_yyy',
+    apiKeysPlaceholder:
+      'Please enter your API Keys, supporting the following formats:\ncr_xxx\ncr_yyy\nor\ncr_xxx, cr_yyy',
     clearInput: 'Clear Input',
-    securityNoticeSingle: 'Your API Key is only used to query your own statistical data and will not be stored or used for other purposes',
-    securityNoticeMulti: 'Your API Keys are only used to query statistical data and will not be stored. Some individual information will not be displayed in aggregate mode.',
-    multiKeyTip: 'Tip: Supports querying up to 30 API Keys simultaneously. Use Ctrl+Enter for quick query.'
+    securityNoticeSingle:
+      'Your API Key is only used to query your own statistical data and will not be stored or used for other purposes',
+    securityNoticeMulti:
+      'Your API Keys are only used to query statistical data and will not be stored. Some individual information will not be displayed in aggregate mode.',
+    multiKeyTip:
+      'Tip: Supports querying up to 30 API Keys simultaneously. Use Ctrl+Enter for quick query.'
   },
-  
+
   // Login page
   login: {
     title: 'Admin Panel',
@@ -216,7 +223,7 @@ export default {
     loginButton: 'Login',
     loggingIn: 'Logging in...'
   },
-  
+
   // Dashboard page
   dashboard: {
     // Main stats cards
@@ -231,7 +238,7 @@ export default {
     totalRequests: 'Total Requests',
     systemStatus: 'System Status',
     uptime: 'Uptime',
-    
+
     // Platform accounts tooltip
     claudeAccount: 'Claude: {total} accounts (Normal: {normal})',
     consoleAccount: 'Console: {total} accounts (Normal: {normal})',
@@ -239,7 +246,7 @@ export default {
     bedrockAccount: 'Bedrock: {total} accounts (Normal: {normal})',
     openaiAccount: 'OpenAI: {total} accounts (Normal: {normal})',
     azureOpenaiAccount: 'Azure OpenAI: {total} accounts (Normal: {normal})',
-    
+
     // Token stats cards
     todayToken: 'Today Tokens',
     totalTokenConsumption: 'Total Token Consumption',
@@ -247,7 +254,7 @@ export default {
     outputTokens: 'Output',
     cacheCreateTokens: 'Cache Create',
     cacheReadTokens: 'Cache Read',
-    
+
     // Real-time metrics
     realtimeRPM: 'Realtime RPM',
     realtimeTPM: 'Realtime TPM',
@@ -255,10 +262,10 @@ export default {
     tokensPerMinute: 'Tokens per Minute',
     historicalData: 'Historical Data',
     minutes: 'minutes',
-    
+
     // Charts section
     modelDistributionAndTrend: 'Model Usage Distribution & Token Usage Trends',
-    
+
     // Date filter presets
     today: 'Today',
     yesterday: 'Yesterday',
@@ -268,35 +275,35 @@ export default {
     lastWeek: 'Last Week',
     thisMonth: 'This Month',
     lastMonth: 'Last Month',
-    
+
     // Granularity buttons
     byDay: 'By Day',
     byHour: 'By Hour',
-    
+
     // Date picker
     startDatePlaceholder: 'Start Date',
     endDatePlaceholder: 'End Date',
     dateSeparator: 'to',
     maxHours24: 'Maximum 24 hours',
-    
+
     // Auto refresh controls
     autoRefresh: 'Auto Refresh',
     refresh: 'Refresh',
     refreshing: 'Refreshing',
     refreshDataNow: 'Refresh data now',
-    
+
     // Charts
     tokenUsageDistribution: 'Token Usage Distribution',
     detailedStatistics: 'Detailed Statistics',
     noModelUsageData: 'No model usage data available',
-    
+
     // Table headers
     model: 'Model',
     requestCount: 'Requests',
     totalTokens: 'Total Tokens',
     cost: 'Cost',
     percentage: 'Percentage',
-    
+
     // Trend charts
     tokenUsageTrend: 'Token Usage Trend',
     apiKeysUsageTrend: 'API Keys Usage Trend',
@@ -304,7 +311,7 @@ export default {
     tokenCount: 'Token Count',
     totalApiKeysCount: 'Total {count} API Keys',
     showingTop10: 'Total {count} API Keys, showing top 10 by usage',
-    
+
     // Chart labels
     inputTokensLabel: 'Input Tokens',
     outputTokensLabel: 'Output Tokens',
@@ -317,12 +324,13 @@ export default {
     tokenQuantity: 'Token Quantity',
     requestsQuantity: 'Requests Count'
   },
-  
+
   // Accounts page
   accounts: {
     title: 'Account Management',
-    description: 'Manage your Claude, Gemini, OpenAI and Azure OpenAI accounts and proxy configurations',
-    
+    description:
+      'Manage your Claude, Gemini, OpenAI and Azure OpenAI accounts and proxy configurations',
+
     // Filters and sorting
     sortBy: 'Select Sort',
     selectPlatform: 'Select Platform',
@@ -330,14 +338,14 @@ export default {
     refresh: 'Refresh',
     refreshTooltip: 'Refresh data (Ctrl/⌘+click to force refresh all caches)',
     addAccount: 'Add Account',
-    
+
     // Sort options
     sortByName: 'Sort by Name',
     sortByDailyTokens: 'Sort by Daily Tokens',
     sortByDailyRequests: 'Sort by Daily Requests',
     sortByTotalTokens: 'Sort by Total Tokens',
     sortByLastUsed: 'Sort by Last Used',
-    
+
     // Platform options
     allPlatforms: 'All Platforms',
     claudePlatform: 'Claude',
@@ -346,16 +354,16 @@ export default {
     openaiPlatform: 'OpenAI',
     azureOpenaiPlatform: 'Azure OpenAI',
     bedrockPlatform: 'Bedrock',
-    
+
     // Group options
     allAccounts: 'All Accounts',
     ungroupedAccounts: 'Ungrouped Accounts',
-    
+
     // Loading states
     loadingAccounts: 'Loading accounts...',
     noAccounts: 'No Accounts',
     noAccountsHint: 'Click the button above to add your first account',
-    
+
     // Table headers
     name: 'Name',
     platformType: 'Platform/Type',
@@ -366,20 +374,20 @@ export default {
     sessionWindow: 'Session Window',
     lastUsed: 'Last Used',
     actions: 'Actions',
-    
+
     // Account types
     dedicated: 'Dedicated',
     groupScheduling: 'Group Scheduling',
     shared: 'Shared',
     belongsToGroup: 'Belongs to group: {name}',
-    
+
     // Platform labels
     unknown: 'Unknown',
     apiKey: 'API Key',
     oauth: 'OAuth',
     setup: 'Setup',
     aws: 'AWS',
-    
+
     // Account status
     normal: 'Normal',
     abnormal: 'Abnormal',
@@ -388,15 +396,15 @@ export default {
     rateLimited: 'Rate Limited',
     notSchedulable: 'Not Schedulable',
     bound: 'Bound: {count} API Keys',
-    
+
     // Proxy status
     noProxy: 'No Proxy',
-    
+
     // Usage statistics
     requests: ' requests',
     noData: 'No Data',
     averageRpm: 'Average {rpm} RPM',
-    
+
     // Session window tooltip
     sessionWindowTooltip: {
       title: 'Session window progress indicates the time progress of the 5-hour window',
@@ -404,16 +412,16 @@ export default {
       warning: 'Warning: Approaching limit',
       rejected: 'Rejected: Rate limit reached'
     },
-    
+
     // Session window status
     remaining: 'Remaining {time}',
     ended: 'Ended',
-    
+
     // Console quota
     quotaProgress: 'Quota Progress',
     remainingQuota: 'Remaining $${amount}',
     reset: 'Reset {time}',
-    
+
     // Mobile view labels
     dailyUsageLabel: 'Daily Usage',
     sessionWindowLabel: 'Session Window',
@@ -421,8 +429,9 @@ export default {
     proxyLabel: 'Proxy',
     priorityLabel: 'Priority',
     neverUsed: 'Never Used',
-    sessionWindowTooltipMobile: 'Session window progress does not represent usage, it only shows the remaining time until the next 5-hour window',
-    
+    sessionWindowTooltipMobile:
+      'Session window progress does not represent usage, it only shows the remaining time until the next 5-hour window',
+
     // Action buttons
     resetStatus: 'Reset Status',
     resetting: 'Resetting...',
@@ -437,7 +446,7 @@ export default {
     deleteTooltip: 'Delete account',
     pause: 'Pause',
     enable: 'Enable',
-    
+
     // Time formatting
     justNow: 'Just now',
     minutesAgo: '{minutes} minutes ago',
@@ -448,44 +457,47 @@ export default {
     minutesOnly: '{minutes} minutes',
     daysAndHours: '{days} days {hours} hours',
     daysOnly: '{days} days',
-    
+
     // Rate limit time
     rateLimitTime: '({time})',
-    
+
     // Messages and confirmations
     resetStatusConfirmTitle: 'Reset Account Status',
-    resetStatusConfirmMessage: 'Are you sure you want to reset all abnormal statuses for this account? This will clear rate limit status, 401 error counts, and all other abnormal flags.',
+    resetStatusConfirmMessage:
+      'Are you sure you want to reset all abnormal statuses for this account? This will clear rate limit status, 401 error counts, and all other abnormal flags.',
     resetStatusConfirmButton: 'Confirm Reset',
     resetStatusCancelButton: 'Cancel',
     statusResetSuccess: 'Account status has been reset',
     statusResetFailed: 'Status reset failed',
-    
+
     deleteAccountTitle: 'Delete Account',
-    deleteAccountMessage: 'Are you sure you want to delete account "{name}"?\n\nThis action cannot be undone.',
+    deleteAccountMessage:
+      'Are you sure you want to delete account "{name}"?\n\nThis action cannot be undone.',
     deleteAccountButton: 'Delete',
     deleteAccountCancel: 'Cancel',
-    cannotDeleteBoundAccount: 'Cannot delete this account, {count} API Keys are bound to this account, please unbind all API Keys first',
+    cannotDeleteBoundAccount:
+      'Cannot delete this account, {count} API Keys are bound to this account, please unbind all API Keys first',
     accountDeleted: 'Account deleted',
     deleteFailed: 'Delete failed',
-    
+
     enabledScheduling: 'Scheduling enabled',
     disabledScheduling: 'Scheduling disabled',
     schedulingToggleFailed: 'Failed to toggle scheduling status',
     unsupportedAccountType: 'This account type does not support scheduling control',
     operationFailed: 'Operation failed',
-    
+
     accountCreateSuccess: 'Account created successfully',
     accountUpdateSuccess: 'Account updated successfully',
     loadAccountsFailed: 'Failed to load accounts',
     unsupportedAccountTypeReset: 'Unsupported account type',
-    
+
     // Schedulable reasons
     invalidApiKey: 'API Key invalid or expired (401 error)',
     serviceOverload: 'Service overloaded (529 error)',
     rateLimitTriggered: 'Rate limit triggered (429 error)',
     authFailed: 'Authentication failed (401 error)',
     manualStop: 'Manually stopped scheduling',
-    
+
     // Account type display
     claudeMax: 'Claude Max',
     claudePro: 'Claude Pro',
@@ -499,18 +511,18 @@ export default {
     // Page title and description
     title: 'API Keys Management',
     description: 'Manage and monitor your API keys',
-    
+
     // Tab navigation
     activeTab: 'Active API Keys',
     deletedTab: 'Deleted API Keys',
-    
+
     // Toolbar and actions
     refresh: 'Refresh',
     refreshTooltip: 'Refresh API Keys list (Ctrl+click for force refresh)',
     createNew: 'Create New Key',
     bulkEdit: 'Edit Selected',
     bulkDelete: 'Delete Selected',
-    
+
     // Table headers
     name: 'Name',
     tags: 'Tags',
@@ -519,7 +531,7 @@ export default {
     createdAt: 'Created At',
     expiresAt: 'Expires At',
     actions: 'Actions',
-    
+
     // Filter options
     timeRange: {
       today: 'Today',
@@ -527,7 +539,7 @@ export default {
       month: 'This Month',
       all: 'All Time'
     },
-    
+
     // Status
     active: 'Active',
     disabled: 'Disabled',
@@ -535,7 +547,7 @@ export default {
     expiringSoon: 'Expiring Soon',
     neverExpire: 'Never Expire',
     notActivated: 'Not Activated',
-    
+
     // Usage statistics
     dailyCost: 'Daily Cost',
     totalCost: 'Total Cost',
@@ -547,26 +559,26 @@ export default {
     daysAgo: '{days} days ago',
     justNow: 'Just now',
     requests: 'requests',
-    
+
     // Search and filter
     searchPlaceholder: 'Search name...',
     searchPlaceholderWithOwner: 'Search name or owner...',
     allTags: 'All Tags',
     noTags: 'No Tags',
-    
+
     // Binding information
     shared: 'Using Shared Pool',
     dedicated: 'Dedicated',
     consoleAccount: 'Console Account',
     bindingWarning: '⚠️ Account not found',
-    
+
     // Limits and quotas
     dailyLimit: 'Daily Cost',
     weeklyOpusLimit: 'Opus Weekly Cost',
     remainingQuota: 'Remaining: ${amount}',
     reset: 'Reset at {time}',
     quotaProgress: 'Quota Progress',
-    
+
     // Model statistics
     modelStats: 'Model Usage Distribution',
     modelStatsCount: '{count} models',
@@ -579,14 +591,14 @@ export default {
     noModelData: 'No model usage data',
     resetFilter: 'Refresh',
     adjustTimeRange: 'Try adjusting the time range or click refresh to reload data',
-    
+
     // Date filter
     dateFilter: {
       today: 'Today',
       days7: '7 Days',
       days30: '30 Days'
     },
-    
+
     // Actions
     viewDetails: 'View Detailed Statistics',
     edit: 'Edit',
@@ -595,12 +607,12 @@ export default {
     disable: 'Disable',
     copy: 'Copy',
     copyStatsLink: 'Copy Stats Page Link',
-    
+
     // Pagination
     totalRecords: 'Total {count} records',
     pageSize: 'Show',
     records: 'per page',
-    
+
     // Empty states
     noApiKeys: 'No API Keys',
     noApiKeysHint: 'Click the button above to create your first API Key',
@@ -609,7 +621,7 @@ export default {
     loading: 'Loading API Keys...',
     loadingDeleted: 'Loading deleted API Keys...',
     loadingModelStats: 'Loading model statistics...',
-    
+
     // Deleted keys table
     creator: 'Creator',
     deletedBy: 'Deleted By',
@@ -617,21 +629,25 @@ export default {
     canRestore: 'Restore',
     permanentDelete: 'Permanent Delete',
     clearAllDeleted: 'Clear All Deleted',
-    
+
     // User types
     admin: 'Admin',
     user: 'User',
     unknown: 'Unknown',
     system: 'System',
-    
+
     // Confirmation dialogs
-    confirmDisable: 'Are you sure to disable API Key "{name}"? All requests using this key will return 401 errors after disabled.',
+    confirmDisable:
+      'Are you sure to disable API Key "{name}"? All requests using this key will return 401 errors after disabled.',
     confirmDelete: 'Are you sure to delete this API Key? This action cannot be undone.',
-    confirmBatchDelete: 'Are you sure to delete selected {count} API Keys? This action cannot be undone.',
+    confirmBatchDelete:
+      'Are you sure to delete selected {count} API Keys? This action cannot be undone.',
     confirmRestore: 'Are you sure to restore this API Key? It can be used again after restoration.',
-    confirmPermanentDelete: 'Are you sure to permanently delete this API Key? This action cannot be undone and all related data will be permanently deleted.',
-    confirmClearAll: 'Are you sure to permanently delete all {count} deleted API Keys? This action cannot be undone and all related data will be permanently deleted.',
-    
+    confirmPermanentDelete:
+      'Are you sure to permanently delete this API Key? This action cannot be undone and all related data will be permanently deleted.',
+    confirmClearAll:
+      'Are you sure to permanently delete all {count} deleted API Keys? This action cannot be undone and all related data will be permanently deleted.',
+
     // Success messages
     keyActivated: 'API Key activated',
     keyDisabled: 'API Key disabled',
@@ -641,7 +657,7 @@ export default {
     allDeletedCleared: 'All deleted API Keys cleared',
     linkCopied: 'Stats page link copied',
     expiryUpdated: 'Expiry time updated',
-    
+
     // Error messages
     selectKeysFirst: 'Please select API Keys to edit first',
     loadFailed: 'Failed to load API Keys',
@@ -651,17 +667,613 @@ export default {
     deleteFailed: 'Delete failed',
     restoreFailed: 'Restore failed',
     clearFailed: 'Clear failed',
-    
+
     // Tooltips and helpers
     editExpiry: 'Edit expiry time',
     activationDays: 'Not activated ({days} days)',
     boundTo: 'Bound to',
     belongsToGroup: 'Belongs to group: {name}',
-    
+
     // Batch operations
     batchSuccess: 'Successfully processed {count} items',
     batchPartialFail: '{failed} items failed to process',
-    batchAllFailed: 'All items failed to process'
+    batchAllFailed: 'All items failed to process',
+
+    // Batch API Key Modal
+    batchApiKeyModal: {
+      title: 'Batch Creation Successful',
+      successMessage: 'Successfully created {count} API Keys',
+      importantReminder: 'Important Reminder',
+      warningMessage:
+        'This is your only chance to see all API Keys. After closing this window, the system will no longer display the complete API Keys. Please download and save them immediately.',
+
+      // Statistics cards
+      createdCount: 'Created Count',
+      baseName: 'Base Name',
+      permissionScope: 'Permission Scope',
+      expiryTime: 'Expiry Time',
+
+      // Permission texts
+      permissions: {
+        all: 'All Services',
+        claude: 'Claude Only',
+        gemini: 'Gemini Only',
+        unknown: 'Unknown'
+      },
+
+      // Expiry time texts
+      neverExpire: 'Never Expires',
+      daysFormat: '{days} days',
+      weeksFormat: '{weeks} weeks',
+      monthsFormat: '{months} months',
+      yearsFormat: '{years} years',
+
+      // Preview section
+      previewTitle: 'API Keys Preview',
+      hide: 'Hide',
+      show: 'Show',
+      preview: 'Preview',
+      maxDisplayNote: '(Maximum 10 displayed)',
+      moreKeysNote: '... and {count} more API Keys',
+
+      // Action buttons
+      downloadAll: 'Download All API Keys',
+      alreadySaved: 'I Have Saved',
+      directCloseTooltip: 'Close Directly (Not Recommended)',
+
+      // File info
+      fileFormatInfo:
+        'The downloaded file is in text format (.txt), with one API Key per line. Please save the file in a secure location to avoid leakage.',
+
+      // Confirmation dialogs
+      closeReminderTitle: 'Close Reminder',
+      closeReminderMessage:
+        'Once closed, you will not be able to view these API Keys again. Please ensure you have downloaded and saved them properly.\n\nAre you sure you want to close?',
+      confirmCloseButton: 'Confirm Close',
+      goBackDownloadButton: 'Go Back to Download',
+
+      directCloseTitle: 'Are you sure you want to close?',
+      directCloseMessage:
+        "You haven't downloaded the API Keys yet. Once closed, you will not be able to view them again.\n\nWe strongly recommend downloading them first.",
+      stillCloseButton: 'Close Anyway',
+
+      directCloseFallbackMessage:
+        "You haven't downloaded the API Keys yet. Once closed, you will not be able to view them again.\n\nAre you sure you want to close?",
+
+      // Success messages
+      downloadSuccess: 'API Keys file downloaded successfully'
+    },
+
+    // Expiry Edit Modal
+    expiryEditModal: {
+      title: 'Edit Expiry Time',
+      subtitle: 'Set new expiry time for "{name}"',
+      currentStatus: 'Current Status',
+      notActivated: 'Not Activated',
+      activationDaysHint: '(expires after {days} days when activated)',
+      neverExpire: 'Never Expire',
+      expired: 'Expired',
+      daysToExpire: 'expires in {days} days',
+      monthsToExpire: 'expires in {months} months',
+      activateNow: 'Activate Now',
+      activateButton: 'Activate Now (expires in {days} days)',
+      activationInfo:
+        'Click to activate this API Key immediately, it will expire in {days} days after activation',
+      selectNewDuration: 'Select New Duration',
+      neverExpireOption: 'Never Expire',
+      oneDay: '1 Day',
+      sevenDays: '7 Days',
+      thirtyDays: '30 Days',
+      ninetyDays: '90 Days',
+      oneHundredEightyDays: '180 Days',
+      threeSixtyFiveDays: '1 Year',
+      twoYears: '2 Years',
+      custom: 'Custom',
+      selectDateAndTime: 'Select Date and Time',
+      selectFutureDateTime: 'Select a future date and time as the expiry time',
+      newExpiryTime: 'New Expiry Time',
+      cancel: 'Cancel',
+      saving: 'Saving...',
+      saveChanges: 'Save Changes',
+      activateConfirmTitle: 'Activate API Key',
+      activateConfirmMessage:
+        'Are you sure you want to activate this API Key now? It will automatically expire after {days} days.',
+      confirmActivate: 'Confirm Activation',
+      confirmCancel: 'Cancel'
+    },
+
+    // Usage Detail Modal
+    usageDetailModal: {
+      title: 'Usage Statistics Details',
+      close: 'Close',
+
+      // Statistics cards
+      totalRequests: 'Total Requests',
+      totalTokens: 'Total Tokens',
+      totalCost: 'Total Cost',
+      averageRate: 'Average Rate',
+
+      // Today stats
+      today: 'Today',
+      todayRequests: '{count} requests',
+      todayTokens: '{count}',
+      todayCost: '${amount}',
+
+      // Usage labels
+      times: ' requests',
+
+      // Token distribution
+      tokenDistribution: 'Token Usage Distribution',
+      inputTokens: 'Input Tokens',
+      outputTokens: 'Output Tokens',
+      cacheCreateTokens: 'Cache Create Tokens',
+      cacheReadTokens: 'Cache Read Tokens',
+
+      // Limits section
+      limitSettings: 'Limit Settings',
+      dailyCostLimit: 'Daily Cost Limit',
+      concurrencyLimit: 'Concurrency Limit',
+      timeWindowLimit: 'Time Window Limit',
+      windowStatus: 'Window Status',
+      used: 'Used',
+      remainingQuota: 'Remaining: ${amount}',
+
+      // Progress indicators
+      usedPercentage: 'Used {percentage}%'
+    },
+
+    // Batch Edit API Key Modal
+    batchEditApiKeyModal: {
+      title: 'Batch Edit API Keys ({count} items)',
+
+      // Info section
+      infoTitle: 'Batch Edit Instructions',
+      infoContent:
+        'The following settings will be applied to the selected {count} API Keys. Only filled or modified fields will be updated, blank fields will keep their original values.',
+
+      // Tag operations
+      tagLabel: 'Tags (Batch Operations)',
+      tagOperations: {
+        replace: 'Replace Tags',
+        add: 'Add Tags',
+        remove: 'Remove Tags',
+        none: "Don't Modify Tags"
+      },
+
+      // Tag status texts
+      newTagsList: 'New tag list:',
+      tagsToAdd: 'Tags to add:',
+      tagsToRemove: 'Tags to remove:',
+      clickToSelectTags: 'Click to select existing tags:',
+      createNewTag: 'Create new tag:',
+      inputNewTagPlaceholder: 'Enter new tag name',
+
+      // Rate limit settings
+      rateLimitTitle: 'Rate Limit Settings',
+      rateLimitWindow: 'Time Window (minutes)',
+      rateLimitRequests: 'Request Limit',
+      rateLimitCost: 'Cost Limit (USD)',
+      noModifyPlaceholder: "Don't modify",
+
+      // Daily cost limit
+      dailyCostLimit: 'Daily Cost Limit (USD)',
+      dailyCostLimitPlaceholder: "Don't modify (0 means unlimited)",
+
+      // Weekly Opus cost limit
+      weeklyOpusCostLimit: 'Opus Model Weekly Cost Limit (USD)',
+      weeklyOpusCostLimitPlaceholder: "Don't modify (0 means unlimited)",
+      opusLimitDescription:
+        'Set weekly cost limit for Opus model (Monday to Sunday), only for Claude official accounts',
+
+      // Concurrency limit
+      concurrencyLimit: 'Concurrency Limit',
+      concurrencyLimitPlaceholder: "Don't modify (0 means unlimited)",
+
+      // Active status
+      activeStatus: 'Active Status',
+      statusOptions: {
+        active: 'Active',
+        disabled: 'Disabled',
+        noChange: "Don't modify"
+      },
+
+      // Service permissions
+      servicePermissions: 'Service Permissions',
+      permissionOptions: {
+        noChange: "Don't modify",
+        all: 'All Services',
+        claude: 'Claude Only',
+        gemini: 'Gemini Only',
+        openai: 'OpenAI Only'
+      },
+
+      // Account binding
+      accountBinding: 'Dedicated Account Binding',
+      refreshAccounts: 'Refresh Accounts',
+      refreshing: 'Refreshing...',
+
+      claudeAccount: 'Claude Dedicated Account',
+      geminiAccount: 'Gemini Dedicated Account',
+      openaiAccount: 'OpenAI Dedicated Account',
+      bedrockAccount: 'Bedrock Dedicated Account',
+
+      accountOptions: {
+        noChange: "Don't modify",
+        sharedPool: 'Use shared account pool',
+        groupPrefix: 'Group - '
+      },
+
+      // Optgroup labels
+      optgroupLabels: {
+        accountGroups: 'Account Groups',
+        dedicatedAccounts: 'Dedicated Accounts'
+      },
+
+      // Buttons
+      cancel: 'Cancel',
+      saving: 'Saving...',
+      batchSave: 'Batch Save',
+
+      // Messages
+      refreshAccountsSuccess: 'Account list refreshed',
+      refreshAccountsFailed: 'Failed to refresh account list',
+      batchEditSuccess: 'Successfully batch edited {count} API Keys',
+      batchEditPartialFail: '{failedCount} edits failed:\n{errors}',
+      batchEditAllFailed: 'All API Keys edit failed',
+      batchEditFailed: 'Batch edit failed',
+      batchEditErrorLog: 'Batch edit API Keys failed:'
+    },
+
+    // Edit API Key Modal
+    editApiKeyModal: {
+      title: 'Edit API Key',
+
+      // Basic Info
+      name: 'Name',
+      namePlaceholder: 'Please enter API Key name',
+      nameHint: 'Used to identify the purpose of this API Key',
+
+      // Owner
+      owner: 'Owner',
+      adminLabel: '- Admin',
+      ownerHint:
+        'Assign this API Key to specified user or admin, admin assignment is not limited by user API Key count',
+
+      // Tags
+      tags: 'Tags',
+      selectedTags: 'Selected tags:',
+      clickToSelectTags: 'Click to select existing tags:',
+      createNewTag: 'Create new tag:',
+      newTagPlaceholder: 'Enter new tag name',
+      tagsHint: 'Used to mark different teams or purposes, convenient for filtering and management',
+
+      // Rate Limit Settings
+      rateLimitTitle: 'Rate Limit Settings (Optional)',
+      rateLimitWindow: 'Time Window (minutes)',
+      rateLimitRequests: 'Request Limit',
+      rateLimitCost: 'Cost Limit (USD)',
+      rateLimitWindowHint: 'Time period unit',
+      rateLimitRequestsHint: 'Max requests in window',
+      rateLimitCostHint: 'Max cost in window',
+      noLimit: 'Unlimited',
+
+      // Usage Examples
+      usageExamples: '💡 Usage Examples',
+      example1: 'Example 1: Time window=60, Requests=1000 → Max 1000 requests per 60 minutes',
+      example2: 'Example 2: Time window=1, Cost=0.1 → Max $0.1 cost per minute',
+      example3:
+        'Example 3: Window=30, Requests=50, Cost=5 → 50 requests and max $5 cost per 30 minutes',
+
+      // Cost Limits
+      dailyCostLimit: 'Daily Cost Limit (USD)',
+      dailyCostLimitPlaceholder: '0 means unlimited',
+      dailyCostHint:
+        'Set daily cost limit for this API Key, requests will be rejected when exceeded, 0 or empty means unlimited',
+      weeklyOpusCostLimit: 'Opus Model Weekly Cost Limit (USD)',
+      weeklyOpusHint:
+        'Set weekly cost limit for Opus model (Monday to Sunday), Claude official accounts only, 0 or empty means unlimited',
+      custom: 'Custom',
+
+      // Concurrency
+      concurrencyLimit: 'Concurrency Limit',
+      concurrencyLimitPlaceholder: '0 means unlimited',
+      concurrencyHint: 'Set maximum concurrent requests this API Key can handle',
+
+      // Active Status
+      activeStatus: 'Activate Account',
+      activeStatusHint:
+        'Unchecking will disable this API Key, pause all requests, client returns 401 error',
+
+      // Service Permissions
+      servicePermissions: 'Service Permissions',
+      allServices: 'All Services',
+      claudeOnly: 'Claude Only',
+      geminiOnly: 'Gemini Only',
+      openaiOnly: 'OpenAI Only',
+      permissionsHint: 'Control which services this API Key can access',
+
+      // Account Binding
+      accountBinding: 'Dedicated Account Binding',
+      refreshAccounts: 'Refresh Accounts',
+      refreshing: 'Refreshing...',
+      claudeAccount: 'Claude Dedicated Account',
+      geminiAccount: 'Gemini Dedicated Account',
+      openaiAccount: 'OpenAI Dedicated Account',
+      bedrockAccount: 'Bedrock Dedicated Account',
+      useSharedPool: 'Use Shared Account Pool',
+      selectClaudeAccount: 'Please select Claude account',
+      selectGeminiAccount: 'Please select Gemini account',
+      selectOpenaiAccount: 'Please select OpenAI account',
+      selectBedrockAccount: 'Please select Bedrock account',
+      accountBindingHint: 'Modifying binding account will affect this API Key request routing',
+
+      // Model Restrictions
+      enableModelRestriction: 'Enable Model Restrictions',
+      restrictedModels: 'Restricted Models List',
+      noRestrictedModels: 'No restricted models',
+      allCommonModelsRestricted: 'All common models are in restricted list',
+      addRestrictedModelPlaceholder: 'Enter model name, press Enter to add',
+      modelRestrictionHint:
+        'Set models that this API Key cannot access, e.g.: claude-opus-4-20250514',
+
+      // Client Restrictions
+      enableClientRestriction: 'Enable Client Restrictions',
+      allowedClients: 'Allowed Clients',
+      clientRestrictionHint: 'Check clients that are allowed to use this API Key',
+
+      // Buttons
+      cancel: 'Cancel',
+      save: 'Save Changes',
+      saving: 'Saving...',
+
+      // Messages
+      costLimitConfirmTitle: 'Cost Limit Reminder',
+      costLimitConfirmMessage:
+        'You set a time window but cost limit is 0, which means no cost limit.\n\nContinue?',
+      costLimitConfirmContinue: 'Continue Save',
+      costLimitConfirmBack: 'Go Back to Modify',
+      refreshAccountsSuccess: 'Account list refreshed',
+      refreshAccountsFailed: 'Failed to refresh account list',
+      updateFailed: 'Update failed'
+    },
+
+    // Renew API Key Modal
+    renewApiKeyModal: {
+      title: 'Renew API Key',
+      apiKeyInfo: 'API Key Information',
+      currentExpiry: 'Current Expiry Time: ',
+      neverExpires: 'Never expires',
+      renewDuration: 'Renew Duration',
+      extend7Days: 'Extend 7 days',
+      extend30Days: 'Extend 30 days',
+      extend90Days: 'Extend 90 days',
+      extend180Days: 'Extend 180 days',
+      extend365Days: 'Extend 365 days',
+      customDate: 'Custom date',
+      setPermanent: 'Set to never expire',
+      newExpiry: 'New expiry time: ',
+      cancel: 'Cancel',
+      renewing: 'Renewing...',
+      confirmRenew: 'Confirm Renew',
+      renewSuccess: 'API Key renewed successfully',
+      renewFailed: 'Renewal failed'
+    },
+
+    // New API Key Modal
+    newApiKeyModal: {
+      title: 'API Key Created Successfully',
+      subtitle: 'Please save your API Key securely',
+      directCloseTooltip: 'Close directly (not recommended)',
+
+      // Warning section
+      warningTitle: 'Important Notice',
+      warningMessage:
+        'This is the only chance to see the complete API Key. After closing this window, the system will no longer display the complete API Key. Please copy and save it immediately.',
+
+      // Field labels
+      apiKeyName: 'API Key Name',
+      remarks: 'Remarks',
+      noDescription: 'No description',
+      apiKey: 'API Key',
+
+      // Visibility toggle
+      hideApiKey: 'Hide API Key',
+      showFullApiKey: 'Show Full API Key',
+      visibilityHint:
+        'Click the eye icon to toggle display mode, use the button below to copy the complete API Key',
+
+      // Buttons
+      copyApiKey: 'Copy API Key',
+      alreadySaved: 'I Have Saved It',
+
+      // Confirmation dialogs
+      closeReminderTitle: 'Close Reminder',
+      closeReminderMessage:
+        'After closing, you will not be able to view the complete API Key again. Please ensure it has been saved securely.\n\nAre you sure you want to close?',
+      confirmClose: 'Confirm Close',
+      cancel: 'Cancel',
+
+      directCloseTitle: 'Are you sure you want to close?',
+      directCloseMessage:
+        'You have not saved the API Key yet. After closing, you will not be able to view it again.\n\nWe recommend copying the API Key before closing.',
+      stillClose: 'Close Anyway',
+      goBack: 'Go Back to Copy',
+
+      directCloseFallback:
+        'You have not saved the API Key yet. After closing, you will not be able to view it again.\n\nAre you sure you want to close?',
+
+      // Success messages
+      apiKeyNotFound: 'API Key not found',
+      copySuccess: 'API Key copied to clipboard',
+      copyFailed: 'Copy failed, please copy manually'
+    },
+
+    // Create API Key Modal
+    createApiKeyModal: {
+      title: 'Create New API Key',
+
+      // Create type section
+      createType: 'Create Type',
+      singleCreate: 'Single Create',
+      batchCreate: 'Batch Create',
+      batchCount: 'Create Count',
+      batchCountPlaceholder: 'Enter count (2-500)',
+      maxSupported: 'Max support 500',
+      batchHint:
+        'When creating in batch, each Key name will automatically add number suffix, e.g.: {name}_1, {name}_2 ...',
+
+      // Basic form fields
+      name: 'Name',
+      nameRequired: '*',
+      nameError: 'Please enter API Key name',
+      singleNamePlaceholder: 'Give your API Key a name',
+      batchNamePlaceholder: 'Enter base name (will auto add numbers)',
+      description: 'Description (optional)',
+      descriptionPlaceholder: 'Describe the purpose of this API Key...',
+
+      // Tags section
+      tags: 'Tags',
+      selectedTags: 'Selected tags:',
+      clickToSelectTags: 'Click to select existing tags:',
+      createNewTag: 'Create new tag:',
+      newTagPlaceholder: 'Enter new tag name',
+      tagHint: 'Used to mark different teams or purposes for easy filtering',
+
+      // Rate limit section
+      rateLimitTitle: 'Rate Limit Settings (optional)',
+      rateLimitWindow: 'Time Window (minutes)',
+      rateLimitRequests: 'Request Limit',
+      rateLimitCost: 'Cost Limit (USD)',
+      rateLimitWindowPlaceholder: 'Unlimited',
+      rateLimitRequestsPlaceholder: 'Unlimited',
+      rateLimitCostPlaceholder: 'Unlimited',
+      rateLimitWindowHint: 'Time period unit',
+      rateLimitRequestsHint: 'Max requests in window',
+      rateLimitCostHint: 'Max cost in window',
+
+      // Rate limit examples
+      exampleTitle: '💡 Usage Examples',
+      example1: 'Example 1: Window=60, Requests=1000 → Max 1000 requests per 60 minutes',
+      example2: 'Example 2: Window=1, Cost=0.1 → Max $0.1 cost per minute',
+      example3:
+        'Example 3: Window=30, Requests=50, Cost=5 → 50 requests and $5 cost per 30 minutes',
+
+      // Cost limits
+      dailyCostLimit: 'Daily Cost Limit (USD)',
+      dailyCostLimitPlaceholder: '0 means unlimited',
+      dailyCostHint:
+        'Set daily cost limit for this API Key, requests will be rejected when exceeded, 0 or empty means unlimited',
+      weeklyOpusCostLimit: 'Opus Model Weekly Cost Limit (USD)',
+      weeklyOpusCostLimitPlaceholder: '0 means unlimited',
+      weeklyOpusHint:
+        'Set weekly cost limit for Opus model (Monday to Sunday), Claude official accounts only, 0 or empty means unlimited',
+      custom: 'Custom',
+
+      // Concurrency limit
+      concurrencyLimit: 'Concurrency Limit (optional)',
+      concurrencyLimitPlaceholder: '0 means unlimited',
+      concurrencyHint:
+        'Set maximum concurrent requests this API Key can handle, 0 or empty means unlimited',
+
+      // Expiration settings
+      expirationSettings: 'Expiration Settings',
+      fixedTimeExpiry: 'Fixed Time Expiry',
+      activationExpiry: 'Activate After First Use',
+      fixedModeHint:
+        'Fixed time mode: Key takes effect immediately after creation, expires at set time',
+      activationModeHint:
+        'Key activates on first use, expires after set days from activation (suitable for batch sales)',
+
+      // Expiration duration options
+      neverExpire: 'Never Expire',
+      '1d': '1 Day',
+      '7d': '7 Days',
+      '30d': '30 Days',
+      '90d': '90 Days',
+      '180d': '180 Days',
+      '365d': '365 Days',
+      customDate: 'Custom Date',
+
+      // Activation mode
+      activationDays: 'Enter days',
+      daysUnit: 'days',
+      activationHint: 'Key will activate on first use, expires after {days} days from activation',
+
+      // Expiry status
+      willExpireOn: 'Will expire on {date}',
+
+      // Service permissions
+      servicePermissions: 'Service Permissions',
+      allServices: 'All Services',
+      claudeOnly: 'Claude Only',
+      geminiOnly: 'Gemini Only',
+      openaiOnly: 'OpenAI Only',
+      permissionHint: 'Control which services this API Key can access',
+
+      // Account binding
+      dedicatedAccountBinding: 'Dedicated Account Binding (optional)',
+      refreshAccounts: 'Refresh Accounts',
+      refreshing: 'Refreshing...',
+      claudeDedicatedAccount: 'Claude Dedicated Account',
+      geminiDedicatedAccount: 'Gemini Dedicated Account',
+      openaiDedicatedAccount: 'OpenAI Dedicated Account',
+      bedrockDedicatedAccount: 'Bedrock Dedicated Account',
+      useSharedPool: 'Use shared account pool',
+      accountBindingHint:
+        'After selecting dedicated account, this API Key will only use that account, otherwise use shared account pool',
+      selectClaudeAccount: 'Please select Claude account',
+      selectGeminiAccount: 'Please select Gemini account',
+      selectOpenaiAccount: 'Please select OpenAI account',
+      selectBedrockAccount: 'Please select Bedrock account',
+
+      // Model restrictions
+      enableModelRestriction: 'Enable Model Restriction',
+      restrictedModelsList: 'Restricted Models List',
+      noRestrictedModels: 'No restricted models',
+      allCommonModelsRestricted: 'All common models are in the restricted list',
+      addRestrictedModelPlaceholder: 'Enter model name, press Enter to add',
+      modelRestrictionHint: 'Set models this API Key cannot access, e.g.: claude-opus-4-20250514',
+
+      // Client restrictions
+      enableClientRestriction: 'Enable Client Restriction',
+      allowedClients: 'Allowed Clients',
+
+      // Buttons
+      cancel: 'Cancel',
+      create: 'Create',
+      creating: 'Creating...',
+
+      // Messages
+      batchCountError: 'Batch create count must be between 2-500',
+      costLimitConfirmTitle: 'Cost Limit Reminder',
+      costLimitConfirmMessage:
+        'You set time window but cost limit is 0, which means no cost limit.\n\nContinue?',
+      costLimitConfirmContinue: 'Continue Creating',
+      costLimitConfirmBack: 'Go Back to Modify',
+      costLimitFallbackMessage:
+        'You set time window but cost limit is 0, which means no cost limit.\nContinue?',
+      createSuccess: 'API Key created successfully',
+      batchCreateSuccess: 'Successfully created {count} API Keys',
+      createFailed: 'Create failed',
+      batchCreateFailed: 'Batch create failed',
+      refreshAccountsSuccess: 'Account list refreshed',
+      refreshAccountsFailed: 'Failed to refresh account list'
+    },
+
+    // Window Countdown
+    windowCountdown: {
+      expired: 'Window expired',
+      notStarted: 'Window not started',
+      minutes: 'minutes',
+      requests: 'Requests',
+      tokens: 'Tokens',
+      cost: 'Cost',
+      aboutToReset: 'About to reset',
+      minutesUntilReset: 'minutes until reset',
+      untilReset: 'until reset',
+      windowLimit: 'Window Limit',
+      hours: 'hours'
+    }
   },
 
   // User-related translations
@@ -670,22 +1282,22 @@ export default {
     dashboard: {
       title: 'Dashboard Overview',
       welcomeMessage: 'Welcome to your Claude Relay dashboard',
-      
+
       // Navigation tabs
       overview: 'Overview',
       apiKeys: 'API Keys',
       usageStats: 'Usage Stats',
-      
+
       // Welcome section
       welcome: 'Welcome',
-      
+
       // Stats cards
       activeApiKeys: 'Active API Keys',
       deletedApiKeys: 'Deleted API Keys',
       totalRequests: 'Total Requests',
       inputTokens: 'Input Tokens',
       totalCost: 'Total Cost',
-      
+
       // Account information section
       accountInformation: 'Account Information',
       username: 'Username',
@@ -695,7 +1307,7 @@ export default {
       memberSince: 'Member Since',
       lastLogin: 'Last Login',
       notAvailable: 'N/A',
-      
+
       // Messages
       logout: 'Logout',
       logoutSuccess: 'Logged out successfully',
@@ -703,7 +1315,7 @@ export default {
       loadProfileFailed: 'Failed to load user profile',
       loadStatsFailed: 'Failed to load API keys stats'
     },
-    
+
     // User Login
     login: {
       title: 'User Sign In',
@@ -715,25 +1327,25 @@ export default {
       signIn: 'Sign In',
       signingIn: 'Signing In...',
       adminLogin: 'Admin Login',
-      
+
       // Validation and error messages
       requiredFields: 'Please enter both username and password',
       loginSuccess: 'Login successful!',
       loginFailed: 'Login failed'
     },
-    
+
     // User Management
     management: {
       title: 'User Management',
       description: 'Manage users, their API keys, and view usage statistics',
       refresh: 'Refresh',
-      
+
       // Stats cards
       totalUsers: 'Total Users',
       activeUsers: 'Active Users',
       totalApiKeys: 'Total API Keys',
       totalCost: 'Total Cost',
-      
+
       // Search and filters
       searchPlaceholder: 'Search users...',
       allRoles: 'All Roles',
@@ -742,14 +1354,14 @@ export default {
       allStatus: 'All Status',
       active: 'Active',
       disabled: 'Disabled',
-      
+
       // User list
       users: 'Users',
       loadingUsers: 'Loading users...',
       noUsersFound: 'No users found',
       noUsersMatch: 'No users match your search criteria.',
       noUsersCreated: 'No users have been created yet.',
-      
+
       // User info and actions
       displayName: 'Display Name',
       email: 'Email',
@@ -760,31 +1372,33 @@ export default {
       neverLoggedIn: 'Never logged in',
       requests: 'requests',
       totalCostLabel: 'total cost',
-      
+
       // Action buttons and tooltips
       viewUsageStats: 'View Usage Stats',
       disableAllApiKeys: 'Disable All API Keys',
       disableUser: 'Disable User',
       enableUser: 'Enable User',
       changeRole: 'Change Role',
-      
+
       // Confirmation dialogs
       disableUserTitle: 'Disable User',
       enableUserTitle: 'Enable User',
-      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      disableUserMessage:
+        'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
       enableUserMessage: 'Are you sure you want to enable user "{username}"?',
       disable: 'Disable',
       enable: 'Enable',
-      
+
       disableAllKeysTitle: 'Disable All API Keys',
-      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableAllKeysMessage:
+        'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
       disableKeys: 'Disable Keys',
-      
+
       // Success messages
       userDisabledSuccess: 'User disabled successfully',
       userEnabledSuccess: 'User enabled successfully',
       keysDisabledSuccess: 'Disabled {count} API keys',
-      
+
       // Error messages
       loadUsersError: 'Failed to load users',
       toggleStatusError: 'Failed to toggleStatus',
@@ -795,7 +1409,7 @@ export default {
     usageStatsModal: {
       title: 'Usage Statistics',
       titleWithUser: 'Usage Statistics - {displayName}',
-      
+
       // Time period selection
       periodSelection: {
         day: 'Last 24 Hours',
@@ -803,10 +1417,10 @@ export default {
         month: 'Last 30 Days',
         quarter: 'Last 90 Days'
       },
-      
+
       // Loading state
       loadingStats: 'Loading usage statistics...',
-      
+
       // Summary cards
       summaryCards: {
         requests: 'Requests',
@@ -814,7 +1428,7 @@ export default {
         outputTokens: 'Output Tokens',
         totalCost: 'Total Cost'
       },
-      
+
       // API Keys table
       apiKeysTable: {
         title: 'API Keys Usage',
@@ -836,7 +1450,7 @@ export default {
         },
         never: 'Never'
       },
-      
+
       // Usage trend chart
       usageTrend: {
         title: 'Usage Trend',
@@ -844,13 +1458,13 @@ export default {
         dailyTrends: 'Daily usage trends for {period} period',
         chartNote: '(Chart integration can be added with Chart.js, D3.js, or similar library)'
       },
-      
+
       // No data state
       noData: {
         title: 'No usage data',
-        description: 'This user hasn\'t made any API requests in the selected period.'
+        description: "This user hasn't made any API requests in the selected period."
       },
-      
+
       // Buttons
       close: 'Close'
     },
@@ -858,10 +1472,10 @@ export default {
     // Change Role Modal
     changeRoleModal: {
       title: 'Change User Role',
-      
+
       // User info display
       currentRole: 'Current: {role}',
-      
+
       // Role selection form
       newRole: 'New Role',
       roles: {
@@ -870,19 +1484,21 @@ export default {
         admin: 'Administrator',
         adminDesc: 'Full access to manage users and system'
       },
-      
+
       // Warning messages
       roleChangeWarning: {
         title: 'Role Change Warning',
-        grantAdmin: 'Granting admin privileges will give this user full access to the system, including the ability to manage other users and their API keys.',
-        removeAdmin: 'Removing admin privileges will restrict this user to only managing their own API keys and viewing their own usage statistics.'
+        grantAdmin:
+          'Granting admin privileges will give this user full access to the system, including the ability to manage other users and their API keys.',
+        removeAdmin:
+          'Removing admin privileges will restrict this user to only managing their own API keys and viewing their own usage statistics.'
       },
-      
+
       // Buttons
       cancel: 'Cancel',
       updateRole: 'Update Role',
       updating: 'Updating...',
-      
+
       // Success message
       roleUpdated: 'User role updated to {role}'
     }
@@ -893,17 +1509,17 @@ export default {
     title: 'System Settings',
     description: 'Website customization and notification configuration',
     loading: 'Loading settings...',
-    
+
     // Navigation tabs
     branding: 'Branding Settings',
     webhook: 'Notification Settings',
-    
+
     // Branding settings
     siteName: 'Site Name',
     siteNameDescription: 'Brand identity',
     siteNamePlaceholder: 'Claude Relay Service',
     siteNameHint: 'Will be displayed in browser title and page header',
-    
+
     siteIcon: 'Site Icon',
     siteIconDescription: 'Favicon',
     currentIcon: 'Current icon',
@@ -911,13 +1527,13 @@ export default {
     removeIcon: 'Remove',
     iconFormats: 'Supports .ico, .png, .jpg, .svg formats, max 350KB',
     iconPreview: 'Icon preview',
-    
+
     adminEntry: 'Admin Entry',
     adminEntryDescription: 'Login button display',
     hideLoginButton: 'Hide login button',
     showLoginButton: 'Show login button',
     adminEntryHint: 'When hidden, users need to visit /admin/login directly',
-    
+
     // Mobile card titles
     siteNameCard: 'Site Name',
     siteNameCardDesc: 'Customize your site brand name',
@@ -925,18 +1541,18 @@ export default {
     siteIconCardDesc: 'Upload custom icon or enter icon URL',
     adminEntryCard: 'Admin Entry',
     adminEntryCardDesc: 'Control login button visibility on homepage',
-    
+
     // Action buttons
     save: 'Save Settings',
     saving: 'Saving...',
     reset: 'Reset to Default',
     lastUpdated: 'Last updated: {time}',
     lastUpdatedMobile: 'Last updated: {time}',
-    
+
     // Webhook settings
     enableWebhook: 'Enable Webhook Notifications',
     webhookDescription: 'When enabled, system will send notifications to configured platforms',
-    
+
     // Notification types
     notificationTypes: 'Notification Types',
     accountAnomaly: 'Account Anomaly',
@@ -947,7 +1563,7 @@ export default {
     quotaWarningDesc: 'API call quota insufficient warnings',
     systemErrorDesc: 'System runtime errors and failures',
     securityAlertDesc: 'Security-related alert notifications',
-    
+
     // Notification platforms
     notificationPlatforms: 'Notification Platforms',
     addPlatform: 'Add Platform',
@@ -956,32 +1572,32 @@ export default {
     testConnection: 'Test Connection',
     edit: 'Edit',
     delete: 'Delete',
-    
+
     // Advanced settings
     advancedSettings: 'Advanced Settings',
     maxRetries: 'Max Retries',
     retryDelay: 'Retry Delay (ms)',
     timeout: 'Timeout (ms)',
-    
+
     // Test notification
     sendTestNotification: 'Send Test Notification',
-    
+
     // Platform modal
     addPlatformModal: 'Add Notification Platform',
     editPlatformModal: 'Edit Notification Platform',
     configurePlatform: 'Configure new Webhook notification channel',
     updatePlatform: 'Configure and update Webhook notification channel',
-    
+
     platformType: 'Platform Type',
     platformName: 'Name',
     platformNameOptional: '(Optional)',
     platformNamePlaceholder: 'e.g.: Operations team, Dev test group',
-    
+
     webhookUrl: 'Webhook URL',
     webhookUrlRequired: '*',
     webhookUrlPlaceholder: 'https://...',
     editModeWarning: 'Platform type cannot be changed in edit mode',
-    
+
     // Bark specific settings
     deviceKey: 'Device Key',
     deviceKeyPlaceholder: 'e.g.: aBcDeFgHiJkLmNoPqRsTuVwX',
@@ -994,14 +1610,14 @@ export default {
     notificationGroup: 'Notification Group',
     notificationGroupOptional: '(Optional)',
     notificationGroupPlaceholder: 'Default: claude-relay',
-    
+
     // Notification level options
     levelAuto: 'Auto (based on notification type)',
     levelPassive: 'Passive',
     levelActive: 'Default',
     levelTimeSensitive: 'Time Sensitive',
     levelCritical: 'Critical',
-    
+
     // Sound options
     soundAuto: 'Auto (based on notification type)',
     soundDefault: 'Default',
@@ -1012,20 +1628,20 @@ export default {
     soundGlass: 'Glass',
     soundHorn: 'Horn',
     soundSilence: 'Silence',
-    
+
     // Bark instructions
     barkInstructions: [
       '1. Install Bark App on iPhone',
       '2. Open the app to get your device key',
       '3. Paste the key into the input box above'
     ],
-    
+
     // Signature settings
     enableSignatureVerify: 'Enable Signature Verification',
     signatureEnabled: 'Enabled',
     signatureSecret: 'Signature Secret',
     signatureSecretPlaceholder: 'SEC...',
-    
+
     // Platform hints
     wechatWorkHint: 'Get Webhook URL from WeChat Work group bot settings',
     dingtalkHint: 'Get Webhook URL from DingTalk group bot settings',
@@ -1034,14 +1650,14 @@ export default {
     discordHint: 'Create Webhook in Discord server integration settings',
     barkHint: 'Check your device key in Bark App',
     customHint: 'Enter complete Webhook receiving URL',
-    
+
     // Modal buttons
     required: 'Required fields',
     cancel: 'Cancel',
     testing: 'Testing...',
     saveChanges: 'Save Changes',
     addPlatformBtn: 'Add Platform',
-    
+
     // Success/error messages
     loadSettingsFailed: 'Failed to load settings',
     settingsSaved: 'Settings saved',
@@ -1050,35 +1666,36 @@ export default {
     oemSettingsSaveFailed: 'Failed to save OEM settings',
     resetToDefault: 'Reset to default settings',
     resetFailed: 'Reset failed',
-    confirmReset: 'Are you sure you want to reset to default settings?\n\nThis will clear all custom site name and icon settings.',
-    
+    confirmReset:
+      'Are you sure you want to reset to default settings?\n\nThis will clear all custom site name and icon settings.',
+
     webhookConfigSaved: 'Configuration saved',
     webhookConfigSaveFailed: 'Failed to save configuration',
     getWebhookConfigFailed: 'Failed to get webhook configuration',
-    
+
     platformAdded: 'Platform added',
     platformUpdated: 'Platform updated',
     platformDeleted: 'Platform deleted',
     platformDeleteFailed: 'Delete failed',
     confirmDeletePlatform: 'Are you sure you want to delete this platform?',
     operationFailed: 'Operation failed',
-    
+
     testSuccess: 'Test successful, webhook connection normal',
     testFailed: 'Test failed',
     testNotificationSent: 'Test notification sent',
     testNotificationFailed: 'Send failed',
-    
+
     // Form validation messages
     enterBarkDeviceKey: 'Please enter Bark device key',
     enterWebhookUrl: 'Please enter Webhook URL',
     enterValidWebhookUrl: 'Please enter valid Webhook URL',
     enterWebhookUrlFirst: 'Please enter Webhook URL first',
     enterBarkDeviceKeyFirst: 'Please enter Bark device key first',
-    
+
     // File upload
     fileReadFailed: 'File read failed',
     iconLoadFailed: 'Icon failed to load',
-    
+
     // Platform names
     platforms: {
       wechatWork: 'WeChat Work',
@@ -1096,11 +1713,11 @@ export default {
     // Titles and modal
     editAccount: 'Edit Account',
     addAccount: 'Add Account',
-    
+
     // Step indicators
     stepBasicInfo: 'Basic Information',
     stepAuthorization: 'Authorization',
-    
+
     // Platform selection
     platform: 'Platform',
     platformClaude: 'Claude',
@@ -1109,27 +1726,28 @@ export default {
     platformOpenAI: 'OpenAI',
     platformAzureOpenAI: 'Azure OpenAI',
     platformBedrock: 'Bedrock',
-    
+
     // Add methods
     addMethod: 'Add Method',
     addTypeSetupToken: 'Setup Token (Recommended)',
     addTypeOAuth: 'OAuth Authorization',
     addTypeManual: 'Manual Access Token Input',
-    
+
     // Basic information fields
     accountName: 'Account Name',
     accountNamePlaceholder: 'Set an easily recognizable name for the account',
     description: 'Description',
     descriptionOptional: 'Description (Optional)',
     descriptionPlaceholder: 'Account usage description...',
-    
+
     // Account type
     accountType: 'Account Type',
     accountTypeShared: 'Shared Account',
     accountTypeDedicated: 'Dedicated Account',
     accountTypeGroup: 'Group Scheduling',
-    accountTypeDescription: 'Shared: Available to all API Keys; Dedicated: Only for specific API Keys; Group: Join group for group scheduling',
-    
+    accountTypeDescription:
+      'Shared: Available to all API Keys; Dedicated: Only for specific API Keys; Group: Join group for group scheduling',
+
     // Group selection
     selectGroup: 'Select Group',
     selectGroupRequired: 'Select Group *',
@@ -1137,7 +1755,7 @@ export default {
     memberCount: 'members',
     newGroup: 'New Group',
     refreshGroups: 'Refresh Groups',
-    
+
     // Gemini Project ID
     projectId: 'Project ID',
     projectIdOptional: 'Project ID (Optional)',
@@ -1147,10 +1765,12 @@ export default {
     projectIdStep1: 'Visit Google Cloud Console',
     projectIdStep2: 'Copy Project ID (Project ID), usually in string format',
     projectIdStep3: '⚠️ Note: Copy Project ID, not Project Number!',
-    projectIdTip: 'Tip: If your account is a regular personal account (not bound to Google Cloud), leave this field blank.',
+    projectIdTip:
+      'Tip: If your account is a regular personal account (not bound to Google Cloud), leave this field blank.',
     projectIdGoogleCloudRequired: 'Google Cloud/Workspace accounts require Project ID',
-    projectIdGoogleCloudDescription: 'Some Google accounts (especially those bound to Google Cloud) will be identified as Workspace accounts and require an additional Project ID.',
-    
+    projectIdGoogleCloudDescription:
+      'Some Google accounts (especially those bound to Google Cloud) will be identified as Workspace accounts and require an additional Project ID.',
+
     // Bedrock fields
     awsAccessKeyId: 'AWS Access Key ID',
     awsAccessKeyIdRequired: 'AWS Access Key ID *',
@@ -1176,7 +1796,8 @@ export default {
     defaultModel: 'Default Primary Model',
     defaultModelOptional: 'Default Primary Model (Optional)',
     defaultModelPlaceholder: 'e.g.: us.anthropic.claude-sonnet-4-20250514-v1:0',
-    defaultModelDescription: 'Leave blank to use system default model. Supports inference profile ID or ARN',
+    defaultModelDescription:
+      'Leave blank to use system default model. Supports inference profile ID or ARN',
     bedrockModelConfigTitle: 'Bedrock Model Configuration:',
     bedrockModelConfigInferenceProfile: '• Supports Inference Profile ID (recommended)',
     bedrockModelConfigArn: '• Supports Application Inference Profile ARN',
@@ -1185,13 +1806,15 @@ export default {
     smallFastModel: 'Small Fast Model',
     smallFastModelOptional: 'Small Fast Model (Optional)',
     smallFastModelPlaceholder: 'e.g.: us.anthropic.claude-3-5-haiku-20241022-v1:0',
-    smallFastModelDescription: 'Lightweight model for fast responses, leave blank to use system default',
-    
+    smallFastModelDescription:
+      'Lightweight model for fast responses, leave blank to use system default',
+
     // Azure OpenAI fields
     azureEndpoint: 'Azure Endpoint',
     azureEndpointRequired: 'Azure Endpoint *',
     azureEndpointPlaceholder: 'https://your-resource.openai.azure.com',
-    azureEndpointDescription: 'Azure OpenAI resource endpoint URL, format: https://your-resource.openai.azure.com',
+    azureEndpointDescription:
+      'Azure OpenAI resource endpoint URL, format: https://your-resource.openai.azure.com',
     apiVersion: 'API Version',
     apiVersionPlaceholder: '2024-02-01',
     apiVersionDescription: 'Azure OpenAI API version, defaults to latest stable version 2024-02-01',
@@ -1205,7 +1828,7 @@ export default {
     apiKeyDescription: 'API key obtained from Azure portal',
     supportedModels: 'Supported Models',
     supportedModelsDescription: 'Select model types supported by this deployment',
-    
+
     // Claude Console fields
     apiUrl: 'API URL',
     apiUrlRequired: 'API URL *',
@@ -1224,102 +1847,128 @@ export default {
     used: 'Used',
     modelMapping: 'Model Mapping Table',
     modelMappingOptional: 'Model Mapping Table (Optional)',
-    modelMappingDescription: 'Leave blank to support all models without modification. With mapping configured, left models will be recognized as supported, right models are actually sent.',
+    modelMappingDescription:
+      'Leave blank to support all models without modification. With mapping configured, left models will be recognized as supported, right models are actually sent.',
     originalModel: 'Original Model Name',
     mappedModel: 'Mapped Model Name',
     addModelMapping: 'Add Model Mapping',
     userAgent: 'Custom User-Agent',
     userAgentOptional: 'Custom User-Agent (Optional)',
     userAgentPlaceholder: 'Leave blank to pass through client User-Agent',
-    userAgentDescription: 'When blank, will automatically use client User-Agent, only fill when need to fix specific UA',
+    userAgentDescription:
+      'When blank, will automatically use client User-Agent, only fill when need to fix specific UA',
     rateLimitMechanism: 'Rate Limit Mechanism',
     enableRateLimit: 'Enable Rate Limiting',
-    rateLimitDescription: 'When enabled, will pause scheduling for a period when account returns 429 errors',
+    rateLimitDescription:
+      'When enabled, will pause scheduling for a period when account returns 429 errors',
     rateLimitDuration: 'Rate Limit Duration (minutes)',
-    rateLimitDurationDescription: 'Time to pause scheduling after account is rate limited (minutes)',
-    
+    rateLimitDurationDescription:
+      'Time to pause scheduling after account is rate limited (minutes)',
+
     // Claude subscription types
     subscriptionType: 'Subscription Type',
     subscriptionClaudeMax: 'Claude Max',
     subscriptionClaudePro: 'Claude Pro',
     claudeProLimitation: 'Pro accounts do not support Claude Opus 4 model',
-    
+
     // Claude special features
     autoStopOnWarning: 'Auto stop scheduling when 5-hour usage approaches limit',
-    autoStopOnWarningDescription: 'When system detects account approaching 5-hour usage limit, automatically pause scheduling this account. Will automatically resume when entering new time window.',
+    autoStopOnWarningDescription:
+      'When system detects account approaching 5-hour usage limit, automatically pause scheduling this account. Will automatically resume when entering new time window.',
     useUnifiedUserAgent: 'Use Unified Claude Code Version',
-    useUnifiedUserAgentDescription: 'When enabled, will use unified User-Agent captured from real Claude Code client to improve compatibility',
+    useUnifiedUserAgentDescription:
+      'When enabled, will use unified User-Agent captured from real Claude Code client to improve compatibility',
     currentUnifiedVersion: '💡 Current unified version: ',
     clearCache: 'Clear Cache',
     clearing: 'Clearing...',
     waitingForCapture: '⏳ Waiting to capture User-Agent from Claude Code client',
-    captureHint: '💡 Tip: If unable to capture for a long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
+    captureHint:
+      '💡 Tip: If unable to capture for a long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
     useUnifiedClientId: 'Use Unified Client Identifier',
-    useUnifiedClientIdDescription: 'When enabled, will use fixed client identifier to make all requests appear from same client, reducing fingerprint',
+    useUnifiedClientIdDescription:
+      'When enabled, will use fixed client identifier to make all requests appear from same client, reducing fingerprint',
     clientId: 'Client Identifier ID',
     regenerate: 'Regenerate',
-    clientIdDescription: 'This ID will replace user_id client part in requests, keeping session part for sticky sessions',
-    
+    clientIdDescription:
+      'This ID will replace user_id client part in requests, keeping session part for sticky sessions',
+
     // Schedule priority
     schedulePriority: 'Schedule Priority',
     schedulePriorityRange: 'Schedule Priority (1-100)',
     schedulePriorityPlaceholder: 'Lower number = higher priority, default 50',
     schedulePriorityDescription: 'Lower number = higher priority, recommended range: 1-100',
-    
+
     // Manual token input
     manualTokenTitle: 'Manual Token Input',
-    manualTokenDescription: 'Please enter valid Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
-    manualTokenClaudeDescription: 'Please enter valid Claude Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
-    manualTokenGeminiDescription: 'Please enter valid Gemini Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
-    manualTokenOpenAIDescription: 'Please enter valid OpenAI Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
+    manualTokenDescription:
+      'Please enter valid Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
+    manualTokenClaudeDescription:
+      'Please enter valid Claude Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
+    manualTokenGeminiDescription:
+      'Please enter valid Gemini Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
+    manualTokenOpenAIDescription:
+      'Please enter valid OpenAI Access Token. If you have Refresh Token, also recommend filling it to support auto refresh.',
     obtainTokenMethods: 'Methods to obtain Access Token:',
-    claudeTokenPath: 'Please get credentials from ~/.claude/.credentials.json file on machine with logged-in Claude Code, do not use keys from Claude official website API Keys page.',
-    geminiTokenPath: 'Please get credentials from ~/.config/gemini/credentials.json file on machine with logged-in Gemini CLI.',
-    openaiTokenPath: 'Please get authentication credentials from machine with logged-in OpenAI account, or get Access Token through OAuth authorization flow.',
+    claudeTokenPath:
+      'Please get credentials from ~/.claude/.credentials.json file on machine with logged-in Claude Code, do not use keys from Claude official website API Keys page.',
+    geminiTokenPath:
+      'Please get credentials from ~/.config/gemini/credentials.json file on machine with logged-in Gemini CLI.',
+    openaiTokenPath:
+      'Please get authentication credentials from machine with logged-in OpenAI account, or get Access Token through OAuth authorization flow.',
     accessToken: 'Access Token',
     accessTokenOptional: 'Access Token (Optional)',
     accessTokenRequired: 'Access Token *',
     accessTokenPlaceholder: 'Please enter Access Token...',
-    accessTokenOptionalPlaceholder: 'Optional: If not filled, system will automatically get via Refresh Token...',
-    accessTokenOptionalDescription: 'Access Token is optional. If not provided, system will automatically get via Refresh Token.',
+    accessTokenOptionalPlaceholder:
+      'Optional: If not filled, system will automatically get via Refresh Token...',
+    accessTokenOptionalDescription:
+      'Access Token is optional. If not provided, system will automatically get via Refresh Token.',
     refreshToken: 'Refresh Token',
     refreshTokenOptional: 'Refresh Token (Optional)',
     refreshTokenRequired: 'Refresh Token *',
     refreshTokenPlaceholder: 'Please enter Refresh Token...',
     refreshTokenRequiredPlaceholder: 'Please enter Refresh Token (required)...',
-    refreshTokenDescription: 'System will use Refresh Token to automatically get Access Token and user info',
+    refreshTokenDescription:
+      'System will use Refresh Token to automatically get Access Token and user info',
     refreshTokenTip: '💡 If Refresh Token not filled, token needs manual update after expiry.',
-    
+
     // Setup Token flow
     setupTokenTitle: 'Claude Setup Token Authorization',
-    setupTokenDescription: 'Please follow these steps to complete Claude account authorization via Setup Token:',
+    setupTokenDescription:
+      'Please follow these steps to complete Claude account authorization via Setup Token:',
     setupTokenStep1Title: 'Click button below to generate authorization link',
     setupTokenStep2Title: 'Open link in browser and complete authorization',
-    setupTokenStep2Description: 'Please open authorization link in new tab, login to your Claude account and authorize Claude Code.',
-    setupTokenStep2Warning: 'Note: If you have proxy configured, please ensure browser also uses same proxy to access authorization page.',
+    setupTokenStep2Description:
+      'Please open authorization link in new tab, login to your Claude account and authorize Claude Code.',
+    setupTokenStep2Warning:
+      'Note: If you have proxy configured, please ensure browser also uses same proxy to access authorization page.',
     setupTokenStep3Title: 'Enter Authorization Code',
-    setupTokenStep3Description: 'After authorization completes, copy Authorization Code from return page and paste into input below:',
+    setupTokenStep3Description:
+      'After authorization completes, copy Authorization Code from return page and paste into input below:',
     generateSetupTokenUrl: 'Generate Setup Token Authorization Link',
     generating: 'Generating...',
     copyLink: 'Copy Link',
     regenerateLink: 'Regenerate',
     authorizationCode: 'Authorization Code',
-    authorizationCodePlaceholder: 'Paste Authorization Code obtained from Claude Code authorization page...',
-    authorizationCodeDescription: 'Please paste Authorization Code copied from Claude Code authorization page',
+    authorizationCodePlaceholder:
+      'Paste Authorization Code obtained from Claude Code authorization page...',
+    authorizationCodeDescription:
+      'Please paste Authorization Code copied from Claude Code authorization page',
     verifying: 'Verifying...',
     completeAuthorization: 'Complete Authorization',
-    
+
     // Token update (edit mode)
     updateTokenTitle: 'Update Token',
-    updateTokenDescription: 'Can update Access Token and Refresh Token. For security, current Token values are not displayed.',
+    updateTokenDescription:
+      'Can update Access Token and Refresh Token. For security, current Token values are not displayed.',
     updateTokenTip: '💡 Leave blank to not update that field.',
     newAccessToken: 'New Access Token',
     newRefreshToken: 'New Refresh Token',
     leaveBlankNoUpdate: 'Leave blank to not update...',
-    
+
     // Usage information
     currentUsage: 'Current Usage',
-    
+
     // Buttons
     cancel: 'Cancel',
     nextStep: 'Next Step',
@@ -1328,7 +1977,7 @@ export default {
     creating: 'Creating...',
     update: 'Update',
     updating: 'Updating...',
-    
+
     // Error messages
     pleaseEnterAccountName: 'Please enter account name',
     pleaseSelectGroup: 'Please select a group',
@@ -1341,7 +1990,7 @@ export default {
     pleaseEnterDeploymentName: 'Please enter deployment name',
     pleaseEnterAccessToken: 'Please enter Access Token',
     pleaseEnterRefreshToken: 'Please enter Refresh Token',
-    
+
     // Success messages
     linkCopied: 'Link copied',
     extractedAuthCode: 'Successfully extracted authorization code!',
@@ -1350,7 +1999,7 @@ export default {
     groupsRefreshed: 'Groups list refreshed',
     modelMappingAdded: 'Mapping added',
     modelMappingExists: 'Model mapping already exists',
-    
+
     // Warnings and hints
     copyFailed: 'Copy failed, please copy manually',
     clearCacheFailed: 'Clear cache failed',
@@ -1358,84 +2007,101 @@ export default {
     urlFormatError: 'Link format error, please check if it is a complete URL',
     wrongUrlFormat: 'Please paste link starting with http://localhost:45462',
     loadGroupsFailed: 'Failed to load groups list',
-    
+
     // Confirmation dialogs
     projectIdNotFilledTitle: 'Project ID Not Filled',
-    projectIdNotFilledMessage: 'You have not filled Project ID.\n\nIf your Google account is bound to Google Cloud or identified as Workspace account, Project ID is required.\nIf you are using regular personal account, you can continue without filling.',
+    projectIdNotFilledMessage:
+      'You have not filled Project ID.\n\nIf your Google account is bound to Google Cloud or identified as Workspace account, Project ID is required.\nIf you are using regular personal account, you can continue without filling.',
     continueButton: 'Continue',
     goBackToFill: 'Go Back to Fill',
     continueSave: 'Continue Save',
-    
+
     // Quick model mapping buttons
     presetSonnet4: '+ Sonnet 4',
     presetOpus41: '+ Opus 4.1',
     presetHaiku35: '+ Haiku 3.5',
     presetOpus41ToSonnet4: '+ Opus 4.1 → Sonnet 4',
-    
+
     // Edit mode special hints
     leaveBlankNoUpdateApiKey: 'Leave blank to not update API Key',
     leaveBlankNoUpdateAwsKey: 'Leave blank to not update AWS Access Key ID',
     leaveBlankNoUpdateAwsSecret: 'Leave blank to not update AWS Secret Access Key',
     leaveBlankNoUpdateSession: 'Leave blank to not update',
-    
+
     // General description text
-    allModelsIfEmpty: 'Leave blank to support all models. If models specified, requests with models not in list will not be scheduled to this account',
-    systemDefaultIfEmpty: 'Leave blank to use system default model. Supports inference profile ID or ARN',
+    allModelsIfEmpty:
+      'Leave blank to support all models. If models specified, requests with models not in list will not be scheduled to this account',
+    systemDefaultIfEmpty:
+      'Leave blank to use system default model. Supports inference profile ID or ARN',
     noUpdateIfEmpty: 'Leave blank to not update this field',
-    
+
     // Manual Token Input Section
     manualTokenInput: 'Manual Token Input',
-    manualTokenClaudeDescription: 'Please enter valid Claude Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
-    manualTokenGeminiDescription: 'Please enter valid Gemini Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
-    manualTokenOpenAIDescription: 'Please enter valid OpenAI Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
+    manualTokenClaudeDescription:
+      'Please enter valid Claude Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
+    manualTokenGeminiDescription:
+      'Please enter valid Gemini Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
+    manualTokenOpenAIDescription:
+      'Please enter valid OpenAI Access Token. If you have Refresh Token, it is recommended to fill both for automatic refresh support.',
     getAccessTokenMethod: 'Methods to get Access Token:',
     claudeCredentialsPath: 'Please get from logged-in Claude Code machine',
     geminiCredentialsPath: 'Please get from logged-in Gemini CLI machine',
-    openaiCredentialsPath: 'Please get authentication credentials from logged-in OpenAI account machine, or obtain Access Token through OAuth authorization flow.',
-    claudeCredentialsWarning: 'credentials from file, do not use keys from Claude official API Keys page.',
-    refreshTokenWarning: '💡 If Refresh Token is not filled, Token needs manual update after expiration.',
+    openaiCredentialsPath:
+      'Please get authentication credentials from logged-in OpenAI account machine, or obtain Access Token through OAuth authorization flow.',
+    claudeCredentialsWarning:
+      'credentials from file, do not use keys from Claude official API Keys page.',
+    refreshTokenWarning:
+      '💡 If Refresh Token is not filled, Token needs manual update after expiration.',
     accessTokenOptional: 'Access Token (Optional)',
-    accessTokenOptionalPlaceholder: 'Optional: If not filled, system will automatically obtain through Refresh Token...',
-    accessTokenOptionalInfo: 'Access Token is optional. If not provided, system will automatically obtain through Refresh Token.',
+    accessTokenOptionalPlaceholder:
+      'Optional: If not filled, system will automatically obtain through Refresh Token...',
+    accessTokenOptionalInfo:
+      'Access Token is optional. If not provided, system will automatically obtain through Refresh Token.',
     accessTokenRequired: 'Access Token *',
     accessTokenRequiredPlaceholder: 'Please enter Access Token...',
     refreshTokenRequired: 'Refresh Token *',
     refreshTokenRequiredPlaceholder: 'Please enter Refresh Token (required)...',
-    refreshTokenRequiredInfo: 'System will use Refresh Token to automatically obtain Access Token and user information',
+    refreshTokenRequiredInfo:
+      'System will use Refresh Token to automatically obtain Access Token and user information',
     refreshTokenOptional: 'Refresh Token (Optional)',
     refreshTokenOptionalPlaceholder: 'Please enter Refresh Token...',
-    
+
     // Priority Settings
     priorityPlaceholder: 'Lower number = higher priority, default 50',
     priorityDescription: 'Lower number = higher priority, recommended range: 1-100',
     prioritySchedulingTitle: 'Scheduling Priority (1-100)',
     priorityEditPlaceholder: 'Lower number = higher priority',
-    
+
     // Gemini Project ID
     projectIdOptional: 'Project ID (Optional)',
     projectIdPlaceholder: 'e.g., verdant-wares-464411-k9',
     projectIdDescription: 'Google Cloud/Workspace accounts may require Project ID',
-    
+
     // Claude Subscription Type and Advanced Options
     subscriptionType: 'Subscription Type',
     claudeMaxSubscription: 'Claude Max',
     claudeProSubscription: 'Claude Pro',
     claudeProLimitation: 'Pro accounts do not support Claude Opus 4 model',
     autoStopOnWarning: 'Auto-stop scheduling when approaching 5-hour limit',
-    autoStopOnWarningDescription: 'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
+    autoStopOnWarningDescription:
+      'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
     useUnifiedUserAgent: 'Use unified Claude Code version',
-    useUnifiedUserAgentDescription: 'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
+    useUnifiedUserAgentDescription:
+      'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
     currentUnifiedVersion: 'Current unified version:',
     clearCache: 'Clear Cache',
     clearing: 'Clearing...',
     waitingForCapture: 'Waiting to capture User-Agent from Claude Code client',
-    captureHint: '💡 Hint: If unable to capture for long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
+    captureHint:
+      '💡 Hint: If unable to capture for long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
     useUnifiedClientId: 'Use unified client identifier',
-    useUnifiedClientIdDescription: 'When enabled, will use fixed client identifier, making all requests appear to come from same client, reducing characteristics',
+    useUnifiedClientIdDescription:
+      'When enabled, will use fixed client identifier, making all requests appear to come from same client, reducing characteristics',
     clientIdLabel: 'Client Identifier ID',
     regenerateClientId: 'Regenerate',
-    clientIdDescription: 'This ID will replace user_id client part in requests, preserving session part for sticky sessions',
-    
+    clientIdDescription:
+      'This ID will replace user_id client part in requests, preserving session part for sticky sessions',
+
     // Edit Mode Fields
     accountNameEdit: 'Account Name',
     accountNameEditPlaceholder: 'Set an identifiable name for the account',
@@ -1446,30 +2112,34 @@ export default {
     noAvailableGroups: 'No available groups',
     membersCount: ' members',
     createNewGroup: 'Create New Group',
-    
+
     // AWS Bedrock Configuration
     bedrockCredentials: 'Credentials Configuration',
-    bedrockCredentialsDescription: 'Please fill in AWS access credentials for calling Amazon Bedrock service.',
+    bedrockCredentialsDescription:
+      'Please fill in AWS access credentials for calling Amazon Bedrock service.',
     awsAccessKeyId: 'AWS Access Key ID *',
     awsAccessKeyIdPlaceholder: 'Please enter AWS Access Key ID...',
     awsSecretAccessKey: 'AWS Secret Access Key *',
     awsSecretAccessKeyPlaceholder: 'Please enter AWS Secret Access Key...',
     sessionTokenOptional: 'Session Token (Optional)',
     sessionTokenOptionalPlaceholder: 'Session token for temporary credentials...',
-    sessionTokenDescription: 'Only required when using temporary credentials (like STS generated credentials)',
+    sessionTokenDescription:
+      'Only required when using temporary credentials (like STS generated credentials)',
     awsRegion: 'AWS Region *',
     awsRegionPlaceholder: 'Select AWS region...',
     bedrockModelConfig: 'Model Configuration',
     defaultModelLabel: 'Default Model',
     defaultModelPlaceholder: 'e.g., anthropic.claude-3-5-sonnet-20240620-v1:0',
-    defaultModelDescription: 'Leave blank to use system default model. Supports inference profile ID or ARN',
+    defaultModelDescription:
+      'Leave blank to use system default model. Supports inference profile ID or ARN',
     smallFastModelLabel: 'Small Fast Model',
     smallFastModelPlaceholder: 'e.g., anthropic.claude-3-haiku-20240307-v1:0',
     smallFastModelDescription: 'Fast model for simple tasks, supports inference profile ID or ARN',
-    
+
     // Azure OpenAI Configuration
     azureOpenAIConfig: 'Azure OpenAI Configuration',
-    azureOpenAIDescription: 'Please configure connection information and deployment details for Azure OpenAI service.',
+    azureOpenAIDescription:
+      'Please configure connection information and deployment details for Azure OpenAI service.',
     azureEndpoint: 'Azure Endpoint *',
     azureEndpointPlaceholder: 'e.g., https://your-resource.openai.azure.com/',
     azureEndpointDescription: 'Endpoint URL for Azure OpenAI service',
@@ -1482,14 +2152,16 @@ export default {
     azureDeploymentDescription: 'Deployment name created in Azure OpenAI Studio',
     azureSupportedModels: 'Supported Models',
     azureSupportedModelsPlaceholder: 'e.g., gpt-4, gpt-3.5-turbo',
-    azureSupportedModelsDescription: 'Model list supported by this account, separated by commas. Leave blank to support all models',
+    azureSupportedModelsDescription:
+      'Model list supported by this account, separated by commas. Leave blank to support all models',
     azureAccountSettings: 'Account Settings',
     azureIsActive: 'Enable this account',
     azureSchedulable: 'Allow scheduling',
-    
+
     // Claude Console Model Mapping
     claudeConsoleModels: 'Model Mapping',
-    claudeConsoleModelsDescription: 'Configure model request mapping relationships, mapping client-requested model names to actual models called.',
+    claudeConsoleModelsDescription:
+      'Configure model request mapping relationships, mapping client-requested model names to actual models called.',
     modelMappingFrom: 'Request Model',
     modelMappingFromPlaceholder: 'e.g., claude-3-5-sonnet-20241022',
     modelMappingTo: 'Actual Model',
@@ -1499,26 +2171,33 @@ export default {
     presetMappings: 'Preset Mappings',
     modelMappingExample: 'Example: claude-3-5-sonnet-20241022 → claude-3-5-sonnet-latest',
     noMappingsConfigured: 'No mappings configured, will use original model name directly',
-    
+
     // Setup Token Authorization Flow Detailed Steps
     setupTokenAuth: 'Setup Token Authorization',
-    setupTokenAuthDescription: 'Setup Token is a secure authorization method that completes account verification through temporary authorization code.',
+    setupTokenAuthDescription:
+      'Setup Token is a secure authorization method that completes account verification through temporary authorization code.',
     setupTokenStep1: 'Step 1: Generate Authorization Link',
-    setupTokenStep1Description: 'System will generate a dedicated authorization link for obtaining temporary authorization code.',
+    setupTokenStep1Description:
+      'System will generate a dedicated authorization link for obtaining temporary authorization code.',
     setupTokenStep2: 'Step 2: Complete Authorization',
-    setupTokenStep2Description: 'Open authorization link in new window, log in with your Claude account and complete authorization.',
+    setupTokenStep2Description:
+      'Open authorization link in new window, log in with your Claude account and complete authorization.',
     setupTokenStep3: 'Step 3: Enter Authorization Code',
-    setupTokenStep3Description: 'After successful authorization, system will display authorization code, please copy and paste into input box below.',
+    setupTokenStep3Description:
+      'After successful authorization, system will display authorization code, please copy and paste into input box below.',
     setupTokenUrlGenerated: 'Authorization link generated',
     setupTokenOpenInBrowser: 'Open in browser',
     setupTokenCopyLink: 'Copy link',
     setupTokenUrlExpiry: 'This link expires in 10 minutes, please complete authorization quickly',
     setupTokenAuthCode: 'Authorization Code *',
-    setupTokenAuthCodePlaceholder: 'Please paste authorization code obtained from authorization page...',
-    setupTokenAuthCodeDescription: 'After completing authorization, will display authorization code in format like "auth_code_xxx"',
+    setupTokenAuthCodePlaceholder:
+      'Please paste authorization code obtained from authorization page...',
+    setupTokenAuthCodeDescription:
+      'After completing authorization, will display authorization code in format like "auth_code_xxx"',
     setupTokenSmartDetection: 'Smart Detection',
-    setupTokenSmartDetectionDesc: 'Supports directly pasting complete callback URL, system will automatically extract authorization code',
-    
+    setupTokenSmartDetectionDesc:
+      'Supports directly pasting complete callback URL, system will automatically extract authorization code',
+
     // More Error Messages and Validation Text
     unsupportedPlatform: 'Unsupported platform',
     accountCreationFailed: 'Account creation failed',
@@ -1530,13 +2209,14 @@ export default {
     unknownError: 'Unknown error',
     modelMappingExistsInfo: 'Model mapping already exists',
     modelAddedMapping: 'Mapping added',
-    
+
     // Rate Limiting and Quota Management
     rateLimitSettings: 'Rate Limit Settings',
     enableRateLimit: 'Enable rate limiting',
     rateLimitDuration: 'Rate limit duration (seconds)',
     rateLimitDurationPlaceholder: 'e.g., 60',
-    rateLimitDescription: 'When enabled, will limit request frequency to prevent account being blocked',
+    rateLimitDescription:
+      'When enabled, will limit request frequency to prevent account being blocked',
     quotaManagement: 'Quota Management',
     dailyQuotaLabel: 'Daily quota limit',
     dailyQuotaPlaceholder: '0 means unlimited',
@@ -1544,13 +2224,13 @@ export default {
     quotaResetTimePlaceholder: 'e.g., 00:00',
     quotaResetDescription: 'Time point when daily quota resets',
     currentDailyUsage: 'Today used',
-    
+
     // Advanced Settings
     advancedSettings: 'Advanced Settings',
     customUserAgent: 'Custom User-Agent',
     customUserAgentPlaceholder: 'Leave blank to use default User-Agent...',
     userAgentDescription: 'User-Agent identifier for requests',
-    
+
     // General Hints and Status
     notSet: 'Not set',
     unlimited: 'Unlimited',
@@ -1561,7 +2241,7 @@ export default {
     optional: 'Optional',
     required: 'Required',
     recommended: 'Recommended',
-    
+
     // Additional Action Buttons
     testConnection: 'Test connection',
     testing: 'Testing...',
@@ -1571,21 +2251,24 @@ export default {
     validating: 'Validating...',
     save: 'Save',
     saving: 'Saving...',
-    
+
     // Usage Statistics
     usageStats: 'Usage Statistics',
     loadingUsage: 'Loading usage...',
     usageLoadFailed: 'Failed to load usage',
-    
+
     // Gemini Project ID Details
     geminiProjectIdRequired: 'Google Cloud/Workspace accounts require Project ID',
-    geminiProjectIdDetail: 'Some Google accounts (especially those bound to Google Cloud) will be identified as Workspace accounts and require additional Project ID.',
+    geminiProjectIdDetail:
+      'Some Google accounts (especially those bound to Google Cloud) will be identified as Workspace accounts and require additional Project ID.',
     geminiHowToGetProjectId: 'How to get Project ID:',
     geminiVisitConsole: 'Visit',
     geminiCopyProjectId: 'Copy Project ID (Project ID), usually in string format',
-    geminiProjectIdWarning: '⚠️ Note: Copy Project ID (Project ID), not Project Number (Project Number)!',
-    geminiPersonalAccountTip: 'Tip: If your account is a regular personal account (not bound to Google Cloud), please leave this field empty.',
-    
+    geminiProjectIdWarning:
+      '⚠️ Note: Copy Project ID (Project ID), not Project Number (Project Number)!',
+    geminiPersonalAccountTip:
+      'Tip: If your account is a regular personal account (not bound to Google Cloud), please leave this field empty.',
+
     // AWS Region Reference
     awsRegionReference: 'Common AWS regions reference:',
     awsRegionEastUS: 'us-east-1 (US East)',
@@ -1595,55 +2278,58 @@ export default {
     awsRegionAsiaTokyo: 'ap-northeast-1 (Tokyo)',
     awsRegionEuropeFrankfurt: 'eu-central-1 (Frankfurt)',
     awsRegionInputTip: '💡 Please enter complete region code, e.g. us-east-1',
-    
+
     // Bedrock Model Description
     bedrockModelConfigDesc: 'Bedrock model configuration description:',
     bedrockSupportsInferenceProfile: 'Supports Inference Profile ID (recommended)',
     bedrockSupportsARN: 'Supports Application Inference Profile ARN',
     bedrockCommonModel: 'Common model: us.anthropic.claude-sonnet-4-20250514-v1:0',
     bedrockEmptyUsesDefault: 'Leave empty to use system configured default model',
-    
+
     // Azure OpenAI Model Selection
     azureModelSelectionDesc: 'Select model types supported by this deployment',
-    
+
     // Rate Limiting
     rateLimitMechanism: 'Rate limiting mechanism',
     enableRateLimitMechanism: 'Enable rate limiting mechanism',
-    rateLimitDescription2: 'When enabled, will pause scheduling for some time when account returns 429 error',
+    rateLimitDescription2:
+      'When enabled, will pause scheduling for some time when account returns 429 error',
     rateLimitDurationMinutes: 'Rate limit duration (minutes)',
     rateLimitDefaultMinutes: 'Default 60 minutes',
     rateLimitPauseDesc: 'Time to pause scheduling after account is rate limited (minutes)',
-    
+
     // Claude Console Specific Fields
     claudeConsoleFields: 'Claude Console specific fields',
     quotaManagement: 'Quota management',
     modelMappingTable: 'Model mapping table',
     modelMappingTableOptional: 'Model mapping table (optional)',
     addModelMapping: 'Add model mapping',
-    
+
     // Claude Subscription Type
     subscriptionType: 'Subscription type',
-    
+
     // Setup Token Auth
     setupTokenAuth: 'Setup Token authorization',
     claudeSetupTokenAuth: 'Claude Setup Token authorization',
-    setupTokenAuthSteps: 'Please follow these steps to complete Claude account authorization through Setup Token:',
+    setupTokenAuthSteps:
+      'Please follow these steps to complete Claude account authorization through Setup Token:',
     generateSetupTokenLink: 'Generate Setup Token auth link',
     generating: 'Generating...',
-    
+
     // Buttons and actions
     verifying: 'Verifying...',
     completeAuth: 'Complete authorization',
     updating: 'Updating...',
     update: 'Update',
-    
+
     // Error messages
     generateSetupTokenFailed: 'Failed to generate Setup Token auth link',
     copyFailed: 'Copy failed, please copy manually',
-    setupTokenAuthFailed: 'Setup Token authorization failed, please check if the authorization code is correct',
+    setupTokenAuthFailed:
+      'Setup Token authorization failed, please check if the authorization code is correct',
     accountCreationFailed: 'Account creation failed',
     accountCreationError: 'Account creation failed:',
-    
+
     // Page structure comments
     stepIndicator: 'Step indicator',
     step1BasicInfo: 'Step 1: Basic information and proxy settings',
@@ -1653,7 +2339,7 @@ export default {
     geminiProjectId: 'Gemini project ID field',
     bedrockFields: 'Bedrock specific fields',
     azureOpenAIFields: 'Azure OpenAI specific fields',
-    
+
     // Validation messages
     nameRequired: 'Please enter account name',
     apiUrlRequired: 'Please enter API URL',
@@ -1666,8 +2352,9 @@ export default {
     dailyQuotaDescription: 'Set daily usage quota, 0 means unlimited',
     quotaResetTime: 'Quota reset time',
     quotaResetTimeDescription: 'Time to automatically reset quota daily',
-    modelMappingDescription: 'Leave empty to support all models without modifying requests. After configuring mapping, left model will be recognized as supported model, right is the actual model sent.',
-    
+    modelMappingDescription:
+      'Leave empty to support all models without modifying requests. After configuring mapping, left model will be recognized as supported model, right is the actual model sent.',
+
     // Quota Management
     quotaManagementFields: 'Quota management fields',
     dailyQuotaLimitDollar: 'Daily quota limit ($)',
@@ -1675,57 +2362,65 @@ export default {
     dailyQuotaDesc: 'Set daily usage quota, 0 means unlimited',
     quotaResetTime: 'Quota reset time',
     quotaResetTimeDesc: 'Time to automatically reset quota daily',
-    
+
     // Model Mapping
     modelMappingOptional: 'Model mapping table (optional)',
-    modelMappingDesc: 'Leave empty to support all models without modifying requests. After configuring mapping, left model will be recognized as supported model, right is the actual model sent.',
+    modelMappingDesc:
+      'Leave empty to support all models without modifying requests. After configuring mapping, left model will be recognized as supported model, right is the actual model sent.',
     originalModelName: 'Original model name',
     mappedModelName: 'Mapped model name',
     addModelMappingBtn: 'Add model mapping',
     customUserAgentOptional: 'Custom User-Agent (optional)',
-    customUserAgentDesc: 'When empty, will automatically use client User-Agent, only fill when need to fix specific UA',
+    customUserAgentDesc:
+      'When empty, will automatically use client User-Agent, only fill when need to fix specific UA',
     userAgentPassthrough: 'Leave empty to pass through client User-Agent',
-    
+
     // Claude Subscription Type
     claudeSubscriptionType: 'Subscription type',
     claudeProLimitation: 'Pro accounts do not support Claude Opus 4 model',
-    
+
     // Claude Advanced Options
     claudeAutoStopScheduling: 'Auto-stop scheduling when approaching 5-hour limit',
-    claudeAutoStopDesc: 'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
+    claudeAutoStopDesc:
+      'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
     claudeUseUnifiedUA: 'Use unified Claude Code version',
-    claudeUnifiedUADesc: 'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
+    claudeUnifiedUADesc:
+      'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
     claudeCurrentUnifiedVersion: '💡 Current unified version:',
     claudeWaitingCapture: '⏳ Waiting to capture User-Agent from Claude Code client',
-    claudeCaptureHint: '💡 Hint: If unable to capture for long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
+    claudeCaptureHint:
+      '💡 Hint: If unable to capture for long time, please confirm Claude Code client is using this account, or contact developer to check if User-Agent format has changed',
     claudeUseUnifiedClientId: 'Use unified client identifier',
-    claudeUnifiedClientIdDesc: 'When enabled, will use fixed client identifier, making all requests appear to come from same client, reducing characteristics',
+    claudeUnifiedClientIdDesc:
+      'When enabled, will use fixed client identifier, making all requests appear to come from same client, reducing characteristics',
     claudeClientIdLabel: 'Client identifier ID',
-    claudeClientIdDesc: 'This ID will replace user_id client part in requests, preserving session part for sticky sessions',
-    
+    claudeClientIdDesc:
+      'This ID will replace user_id client part in requests, preserving session part for sticky sessions',
+
     // Setup Token Process
     setupTokenAuthProcess: 'Claude Setup Token Authorization',
-    setupTokenProcessDesc: 'Please follow these steps to complete Claude account authorization through Setup Token:',
+    setupTokenProcessDesc:
+      'Please follow these steps to complete Claude account authorization through Setup Token:',
     setupTokenStepOneTitle: 'Step 1: Generate authorization link',
     setupTokenStepOneDesc: 'Click button below to generate authorization link',
     setupTokenGenerating: 'Generating...',
     setupTokenGenerateBtn: 'Generate Setup Token authorization link',
     setupTokenCopyTitle: 'Copy link',
-    
+
     // Step Indicators
     stepIndicator: 'Step indicator',
     step1BasicInfo: 'Step 1: Basic information and proxy settings',
     step2OAuth: 'Step 2: OAuth authorization',
     step2SetupToken: 'Step 2: Setup Token authorization',
-    
+
     // Group Selector
     groupSelector: 'Group selector',
     multiGroupInterface: 'Multi-group interface',
     createNewGroupOption: 'Create new group option',
-    
+
     // Manual Token Input Tips
     credentialsFromFile: 'credentials from file.',
-    
+
     // Placeholder texts
     originalModelNamePlaceholder: 'Original model name',
     mappedModelNamePlaceholder: 'Mapped model name',
@@ -1734,7 +2429,7 @@ export default {
     leaveEmptyNoUpdate: 'Leave empty for no update',
     leaveEmptyNoUpdateKey: 'Leave empty for no API Key update',
     leaveEmptyNoUpdateToken: 'Leave empty for no update...',
-    
+
     // Labels and descriptions
     customUserAgentOptional: 'Custom User-Agent (optional)',
     clientIdLabel: 'Client ID',
@@ -1744,61 +2439,72 @@ export default {
     newAccessTokenLabel: 'New Access Token',
     newRefreshTokenLabel: 'New Refresh Token',
     updateTokenLabel: 'Update Token',
-    
+
     // Button texts
     regenerateBtn: 'Regenerate',
     previousStepBtn: 'Previous Step',
-    
+
     // Descriptive texts
     claudeProLimitation: 'Pro accounts do not support Claude Opus 4 model',
     claude5HourLimitDesc: 'Auto-stop scheduling when approaching 5-hour usage limit',
-    claude5HourLimitExplanation: 'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
+    claude5HourLimitExplanation:
+      'When system detects account approaching 5-hour usage limit, automatically pause scheduling for this account. Will resume automatically when entering new time window.',
     useUnifiedClaudeVersion: 'Use unified Claude Code version',
-    unifiedVersionDesc: 'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
+    unifiedVersionDesc:
+      'When enabled, will use unified User-Agent captured from real Claude Code client, improving compatibility',
     currentUnifiedVersion: '💡 Current unified version:',
     waitingUserAgent: '⏳ Waiting to capture User-Agent from Claude Code client',
-    userAgentTip: '💡 Tip: If unable to capture for a long time, please confirm that Claude Code client is using this account,',
+    userAgentTip:
+      '💡 Tip: If unable to capture for a long time, please confirm that Claude Code client is using this account,',
     contactDeveloper: 'or contact developer to check if User-Agent format has changed',
     useUnifiedClientId: 'Use unified client identifier',
-    unifiedClientIdDesc: 'When enabled, will use fixed client identifier, making all requests appear from same client, reducing fingerprinting',
-    clientIdReplaceDesc: 'This ID will replace the user_id client part in requests, retaining session part for sticky sessions',
-    
+    unifiedClientIdDesc:
+      'When enabled, will use fixed client identifier, making all requests appear from same client, reducing fingerprinting',
+    clientIdReplaceDesc:
+      'This ID will replace the user_id client part in requests, retaining session part for sticky sessions',
+
     // OAuth step texts
     step1GenerateAuthLink: 'Step 1: Generate Authorization Link',
     clickButtonGenerate: 'Click button below to generate authorization link',
     copyLinkTitle: 'Copy Link',
     step2AccessAndAuth: 'Step 2: Access Link and Authorize',
     openInBrowser: 'Open link in browser and complete authorization',
-    browserAuthDesc: 'Please open the authorization link in a new tab, login to your Claude account and authorize Claude Code.',
-    proxyNotice: 'If you have set up a proxy, please ensure your browser also uses the same proxy to access the authorization page.',
+    browserAuthDesc:
+      'Please open the authorization link in a new tab, login to your Claude account and authorize Claude Code.',
+    proxyNotice:
+      'If you have set up a proxy, please ensure your browser also uses the same proxy to access the authorization page.',
     step3InputAuthCode: 'Step 3: Input Authorization Code',
     inputAuthCodeTitle: 'Input Authorization Code',
-    authCompleteDesc: 'After authorization is complete, copy Authorization Code from the return page and paste it into the input box below:',
-    pasteAuthCodeDesc: 'Please paste the Authorization Code copied from Claude Code authorization page',
-    
+    authCompleteDesc:
+      'After authorization is complete, copy Authorization Code from the return page and paste it into the input box below:',
+    pasteAuthCodeDesc:
+      'Please paste the Authorization Code copied from Claude Code authorization page',
+
     // AWS region reference
     awsRegionRef: 'Common AWS regions reference:',
-    
+
     // Error messages
     apiKeyRequired: 'Please enter API Key',
     refreshTokenRequired: 'Please enter Refresh Token',
     accessTokenRequired: 'Please enter Access Token',
     copyFailedManual: 'Copy failed, please copy manually',
-    
+
     // Form descriptions
-    modelSupportDesc: 'Leave empty to support all models. If models are specified, requests with models not in the list will not be scheduled to this account',
+    modelSupportDesc:
+      'Leave empty to support all models. If models are specified, requests with models not in the list will not be scheduled to this account',
     modelTypeSelectionDesc: 'Select model types supported by this deployment',
-    userAgentDesc: 'When empty, will automatically use client User-Agent, only fill when need to fix specific UA',
-    
+    userAgentDesc:
+      'When empty, will automatically use client User-Agent, only fill when need to fix specific UA',
+
     // Basic labels
     apiUrlLabel: 'API URL',
     apiUrlRequired: 'API URL *',
     apiKeyLabel: 'API Key',
     apiKeyRequired: 'API Key *',
-    
+
     // More missing keys
     copyLinkTooltip: 'Copy Link',
-    
+
     // Claude subscription type display
     claudeMaxDisplay: 'Claude Max',
     claudeProDisplay: 'Claude Pro'
@@ -1810,29 +2516,33 @@ export default {
     claudeAccountAuth: 'Claude Account Authorization',
     geminiAccountAuth: 'Gemini Account Authorization',
     openaiAccountAuth: 'OpenAI Account Authorization',
-    
+
     // Flow descriptions
     claudeAuthDescription: 'Please follow these steps to complete Claude account authorization:',
     geminiAuthDescription: 'Please follow these steps to complete Gemini account authorization:',
     openaiAuthDescription: 'Please follow these steps to complete OpenAI account authorization:',
-    
+
     // Step titles
     step1Title: 'Click the button below to generate authorization link',
     step2Title: 'Open the link in browser and complete authorization',
     step3Title: 'Input Authorization Code',
     step3TitleOpenAI: 'Input authorization link or Code',
-    
+
     // Step descriptions
-    step2Description: 'Please open the authorization link in a new tab, log in to your Claude account and authorize.',
-    step2DescriptionGemini: 'Please open the authorization link in a new tab, log in to your Gemini account and authorize.',
-    step2DescriptionOpenAI: 'Please open the authorization link in a new tab, log in to your OpenAI account and authorize.',
-    
+    step2Description:
+      'Please open the authorization link in a new tab, log in to your Claude account and authorize.',
+    step2DescriptionGemini:
+      'Please open the authorization link in a new tab, log in to your Gemini account and authorize.',
+    step2DescriptionOpenAI:
+      'Please open the authorization link in a new tab, log in to your OpenAI account and authorize.',
+
     step3Description: 'After authorization is complete, the page will display a',
     step3DescriptionMiddle: ', please copy and paste it into the input box below:',
-    step3DescriptionGemini: 'After authorization is complete, the page will display an Authorization Code, please copy and paste it into the input box below:',
+    step3DescriptionGemini:
+      'After authorization is complete, the page will display an Authorization Code, please copy and paste it into the input box below:',
     step3DescriptionOpenAI: 'After authorization is complete, when the page address changes to',
     step3DescriptionOpenAIMiddle: ':',
-    
+
     // Button text
     generating: 'Generating...',
     generateAuthLink: 'Generate Authorization Link',
@@ -1840,41 +2550,47 @@ export default {
     previousStep: 'Previous Step',
     completeAuth: 'Complete Authorization',
     verifying: 'Verifying...',
-    
+
     // Placeholders
     authCodePlaceholder: 'Paste the Authorization Code obtained from Claude page...',
     authCodePlaceholderGemini: 'Paste the Authorization Code obtained from Gemini page...',
-    authCodePlaceholderOpenAI: 'Method 1: Copy the complete link (http://localhost:1455/auth/callback?code=...)\nMethod 2: Copy only the code parameter value\nThe system will automatically recognize and extract the required information',
-    
+    authCodePlaceholderOpenAI:
+      'Method 1: Copy the complete link (http://localhost:1455/auth/callback?code=...)\nMethod 2: Copy only the code parameter value\nThe system will automatically recognize and extract the required information',
+
     // Labels
     authorizationCode: 'Authorization Code',
     authLinkOrCode: 'Authorization Link or Code',
-    
+
     // Hints
     copyLinkTooltip: 'Copy Link',
     authCodeHint: 'Please paste the Authorization Code copied from Claude page',
     authCodeHintGemini: 'Please paste the Authorization Code copied from Gemini page',
-    
+
     // Notices
     proxyNotice: 'Note:',
-    proxyNoticeText: 'If you have set up a proxy, please ensure the browser also uses the same proxy to access the authorization page.',
-    
+    proxyNoticeText:
+      'If you have set up a proxy, please ensure the browser also uses the same proxy to access the authorization page.',
+
     // OpenAI specific hints
     openaiImportantNote: 'Important Notice:',
-    openaiLoadingNote: 'The page may take a long time to load after authorization, please wait patiently.',
+    openaiLoadingNote:
+      'The page may take a long time to load after authorization, please wait patiently.',
     openaiAddressNote: 'When the browser address bar changes to',
     openaiAddressNoteMiddle: 'at the beginning, it means authorization is complete.',
-    
+
     openaiTip: 'Tip:',
-    openaiTipText: 'You can directly copy the entire link or just copy the code parameter value, the system will automatically recognize.',
+    openaiTipText:
+      'You can directly copy the entire link or just copy the code parameter value, the system will automatically recognize.',
     openaiLinkExample: '• Complete link example:',
     openaiCodeExample: '• Code only example:',
-    
+
     // Success and error messages
     successExtractCode: 'Successfully extracted authorization code!',
-    errorCodeNotFound: 'Authorization code parameter not found in URL, please check if the link is correct',
+    errorCodeNotFound:
+      'Authorization code parameter not found in URL, please check if the link is correct',
     errorLinkFormat: 'Link format error, please check if it is a complete URL',
-    errorWrongUrlFormat: 'Please paste links starting with http://localhost:1455 or http://localhost:45462',
+    errorWrongUrlFormat:
+      'Please paste links starting with http://localhost:1455 or http://localhost:45462',
     linkCopied: 'Link copied',
     authFailed: 'Authorization failed, please check if the authorization code is correct',
     generateAuthFailed: 'Failed to generate authorization link'
@@ -1922,8 +2638,10 @@ export default {
   proxyConfig: {
     title: 'Proxy Settings (Optional)',
     enableProxy: 'Enable Proxy',
-    configDescription: 'Configure proxy to access restricted network resources. Supports SOCKS5 and HTTP proxy.',
-    stabilityNotice: 'Please ensure the proxy server is stable and available, otherwise it will affect normal account usage.',
+    configDescription:
+      'Configure proxy to access restricted network resources. Supports SOCKS5 and HTTP proxy.',
+    stabilityNotice:
+      'Please ensure the proxy server is stable and available, otherwise it will affect normal account usage.',
     proxyType: 'Proxy Type',
     hostAddress: 'Host Address',
     hostPlaceholder: 'e.g., 192.168.1.100',
@@ -1935,6 +2653,7 @@ export default {
     password: 'Password',
     passwordPlaceholder: 'Proxy password',
     tip: 'Tip:',
-    apiRequestNotice: 'Proxy settings will be used for all API requests related to this account. Please ensure the proxy server supports HTTPS traffic forwarding.'
+    apiRequestNotice:
+      'Proxy settings will be used for all API requests related to this account. Please ensure the proxy server supports HTTPS traffic forwarding.'
   }
 }
diff --git a/web/admin-spa/src/i18n/locales/zh-cn.js b/web/admin-spa/src/i18n/locales/zh-cn.js
index a5c065a1..1b536858 100644
--- a/web/admin-spa/src/i18n/locales/zh-cn.js
+++ b/web/admin-spa/src/i18n/locales/zh-cn.js
@@ -24,7 +24,7 @@ export default {
     userMenu: '用户菜单',
     logout: '退出登录',
     settings: '系统设置',
-    
+
     // Version related
     currentVersion: '当前版本',
     newVersionAvailable: '有新版本可用',
@@ -34,10 +34,10 @@ export default {
     checkingUpdate: '检查更新中...',
     alreadyLatest: '当前已是最新版本',
     checkUpdate: '检查更新',
-    
+
     // User menu items
     changeAccountInfo: '修改账户信息',
-    
+
     // Change password modal
     changePasswordModal: {
       title: '修改账户信息',
@@ -55,7 +55,7 @@ export default {
       confirmPasswordPlaceholder: '请再次输入新密码',
       saving: '保存中...',
       save: '保存修改',
-      
+
       // Messages
       passwordMismatch: '两次输入的密码不一致',
       passwordTooShort: '新密码长度至少8位',
@@ -64,7 +64,7 @@ export default {
       changeFailed: '修改失败',
       changePasswordFailed: '修改密码失败'
     },
-    
+
     // Logout
     logoutConfirm: '确定要退出登录吗？',
     logoutSuccess: '已安全退出'
@@ -79,7 +79,7 @@ export default {
     timeRange: '统计时间范围',
     today: '今日',
     thisMonth: '本月',
-    
+
     // API Key Input
     usageStatsQuery: '使用统计查询',
     apiKeyDescription: '查询您的 API Key 使用情况和统计数据',
@@ -90,7 +90,7 @@ export default {
     singleModeTitle: '单一模式',
     aggregateModeTitle: '聚合模式',
     queryButton: '查询',
-    
+
     // Stats Overview
     batchQuerySummary: '批量查询概要',
     apiKeyInfo: 'API Key 信息',
@@ -101,13 +101,13 @@ export default {
     totalTokens: '总 Token 数',
     totalCost: '总费用',
     individual: '个',
-    
+
     // Aggregated Stats Card
     usageRatio: '使用占比',
     requests: '次',
     otherKeys: '其他',
     keys: 'Keys',
-    
+
     // Model Usage Stats
     modelUsageStats: '模型使用统计',
     loadingModelStats: '加载模型统计数据中...',
@@ -118,14 +118,14 @@ export default {
     cacheCreateTokens: '缓存创建',
     cacheReadTokens: '缓存读取',
     noModelData: '暂无{period}模型使用数据',
-    
+
     // Token Distribution
     tokenDistribution: 'Token 使用分布',
     inputToken: '输入 Token',
     outputToken: '输出 Token',
     cacheCreateToken: '缓存创建 Token',
     cacheReadToken: '缓存读取 Token',
-    
+
     // Limit Config
     limitConfig: '限制配置',
     limitConfigAggregate: '限制配置（聚合查询模式）',
@@ -138,7 +138,7 @@ export default {
     usageToday: '今日使用',
     usageThisMonth: '本月使用',
     remaining: '剩余',
-    
+
     // Stats Overview - Additional keys
     name: '名称',
     status: '状态',
@@ -165,7 +165,7 @@ export default {
     monthlyTokens: '本月Token数',
     monthlyCost: '本月费用',
     monthlyInputTokens: '本月输入Token',
-    
+
     // Limit Config - Additional keys
     dailyCostLimit: '每日费用限制',
     concurrencyLimit: '并发限制',
@@ -187,25 +187,26 @@ export default {
     orRelationshipRequests: '请求次数和费用限制为“或”的关系，任一达到限制即触发限流',
     orRelationshipTokens: '请求次数和Token使用量为“或”的关系，任一达到限制即触发限流',
     onlyRequestsLimit: '仅限制请求次数',
-    
+
     // Token Distribution - Additional keys
     totalAmount: '总计',
     todayTotal: '今日总计',
     monthlyTotal: '本月总计',
-    
+
     // Additional missing keys
     usageRatioOnlyInMultiMode: '使用占比仅在多Key查询时显示',
     noData: '暂无数据',
-    
+
     // ApiKeyInput placeholders and texts
     apiKeyPlaceholder: '请输入您的 API Key (cr_...)',
     apiKeysPlaceholder: '请输入您的 API Keys，支持以下格式：\ncr_xxx\ncr_yyy\n或\ncr_xxx, cr_yyy',
     clearInput: '清空输入',
     securityNoticeSingle: '您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途',
-    securityNoticeMulti: '您的 API Keys 仅用于查询统计数据，不会被存储。聚合模式下部分个体化信息将不显示。',
+    securityNoticeMulti:
+      '您的 API Keys 仅用于查询统计数据，不会被存储。聚合模式下部分个体化信息将不显示。',
     multiKeyTip: '提示：最多支持同时查询 30 个 API Keys。使用 Ctrl+Enter 快速查询。'
   },
-  
+
   // Login page
   login: {
     title: '管理后台',
@@ -216,7 +217,7 @@ export default {
     loginButton: '登录',
     loggingIn: '登录中...'
   },
-  
+
   // Dashboard page
   dashboard: {
     // Main stats cards
@@ -231,7 +232,7 @@ export default {
     totalRequests: '总请求',
     systemStatus: '系统状态',
     uptime: '运行时间',
-    
+
     // Platform accounts tooltip
     claudeAccount: 'Claude: {total} 个 (正常: {normal})',
     consoleAccount: 'Console: {total} 个 (正常: {normal})',
@@ -239,7 +240,7 @@ export default {
     bedrockAccount: 'Bedrock: {total} 个 (正常: {normal})',
     openaiAccount: 'OpenAI: {total} 个 (正常: {normal})',
     azureOpenaiAccount: 'Azure OpenAI: {total} 个 (正常: {normal})',
-    
+
     // Token stats cards
     todayToken: '今日Token',
     totalTokenConsumption: '总Token消耗',
@@ -247,7 +248,7 @@ export default {
     outputTokens: '输出',
     cacheCreateTokens: '缓存创建',
     cacheReadTokens: '缓存读取',
-    
+
     // Real-time metrics
     realtimeRPM: '实时RPM',
     realtimeTPM: '实时TPM',
@@ -255,10 +256,10 @@ export default {
     tokensPerMinute: '每分钟Token数',
     historicalData: '历史数据',
     minutes: '分钟',
-    
+
     // Charts section
     modelDistributionAndTrend: '模型使用分布与Token使用趋势',
-    
+
     // Date filter presets (would be populated from dateFilter.presetOptions)
     today: '今日',
     yesterday: '昨日',
@@ -268,35 +269,35 @@ export default {
     lastWeek: '上周',
     thisMonth: '本月',
     lastMonth: '上月',
-    
+
     // Granularity buttons
     byDay: '按天',
     byHour: '按小时',
-    
+
     // Date picker
     startDatePlaceholder: '开始日期',
     endDatePlaceholder: '结束日期',
     dateSeparator: '至',
     maxHours24: '最多24小时',
-    
+
     // Auto refresh controls
     autoRefresh: '自动刷新',
     refresh: '刷新',
     refreshing: '刷新中',
     refreshDataNow: '立即刷新数据',
-    
+
     // Charts
     tokenUsageDistribution: 'Token使用分布',
     detailedStatistics: '详细统计数据',
     noModelUsageData: '暂无模型使用数据',
-    
+
     // Table headers
     model: '模型',
     requestCount: '请求数',
     totalTokens: '总Token',
     cost: '费用',
     percentage: '占比',
-    
+
     // Trend charts
     tokenUsageTrend: 'Token使用趋势',
     apiKeysUsageTrend: 'API Keys 使用趋势',
@@ -304,10 +305,10 @@ export default {
     tokenCount: 'Token 数量',
     totalApiKeysCount: '共 {count} 个 API Key',
     showingTop10: '共 {count} 个 API Key，显示使用量前 10 个',
-    
+
     // Chart labels
     inputTokensLabel: '输入Token',
-    outputTokensLabel: '输出Token', 
+    outputTokensLabel: '输出Token',
     cacheCreateTokensLabel: '缓存创建Token',
     cacheReadTokensLabel: '缓存读取Token',
     costLabel: '费用 (USD)',
@@ -317,12 +318,12 @@ export default {
     tokenQuantity: 'Token数量',
     requestsQuantity: '请求次数'
   },
-  
+
   // Accounts page
   accounts: {
     title: '账户管理',
     description: '管理您的 Claude、Gemini、OpenAI 和 Azure OpenAI 账户及代理配置',
-    
+
     // Filters and sorting
     sortBy: '选择排序',
     selectPlatform: '选择平台',
@@ -330,14 +331,14 @@ export default {
     refresh: '刷新',
     refreshTooltip: '刷新数据 (Ctrl/⌘+点击强制刷新所有缓存)',
     addAccount: '添加账户',
-    
+
     // Sort options
     sortByName: '按名称排序',
     sortByDailyTokens: '按今日Token排序',
     sortByDailyRequests: '按今日请求数排序',
     sortByTotalTokens: '按总Token排序',
     sortByLastUsed: '按最后使用排序',
-    
+
     // Platform options
     allPlatforms: '所有平台',
     claudePlatform: 'Claude',
@@ -346,16 +347,16 @@ export default {
     openaiPlatform: 'OpenAi',
     azureOpenaiPlatform: 'Azure OpenAI',
     bedrockPlatform: 'Bedrock',
-    
+
     // Group options
     allAccounts: '所有账户',
     ungroupedAccounts: '未分组账户',
-    
+
     // Loading states
     loadingAccounts: '正在加载账户...',
     noAccounts: '暂无账户',
     noAccountsHint: '点击上方按钮添加您的第一个账户',
-    
+
     // Table headers
     name: '名称',
     platformType: '平台/类型',
@@ -366,20 +367,20 @@ export default {
     sessionWindow: '会话窗口',
     lastUsed: '最后使用',
     actions: '操作',
-    
+
     // Account types
     dedicated: '专属',
     groupScheduling: '分组调度',
     shared: '共享',
     belongsToGroup: '所属分组: {name}',
-    
+
     // Platform labels
     unknown: '未知',
     apiKey: 'API Key',
     oauth: 'OAuth',
     setup: 'Setup',
     aws: 'AWS',
-    
+
     // Account status
     normal: '正常',
     abnormal: '异常',
@@ -388,15 +389,15 @@ export default {
     rateLimited: '限流中',
     notSchedulable: '不可调度',
     bound: '绑定: {count} 个API Key',
-    
+
     // Proxy status
     noProxy: '无代理',
-    
+
     // Usage statistics
     requests: '次',
     noData: '暂无数据',
     averageRpm: '平均 {rpm} RPM',
-    
+
     // Session window tooltip
     sessionWindowTooltip: {
       title: '会话窗口进度表示5小时窗口的时间进度',
@@ -404,16 +405,16 @@ export default {
       warning: '警告：接近限制',
       rejected: '拒绝：达到速率限制'
     },
-    
+
     // Session window status
     remaining: '剩余 {time}',
     ended: '已结束',
-    
+
     // Console quota
     quotaProgress: '额度进度',
     remainingQuota: '剩余 $${amount}',
     reset: '重置 {time}',
-    
+
     // Mobile view labels
     dailyUsageLabel: '今日使用',
     sessionWindowLabel: '会话窗口',
@@ -422,7 +423,7 @@ export default {
     priorityLabel: '优先级',
     neverUsed: '从未使用',
     sessionWindowTooltipMobile: '会话窗口进度不代表使用量，仅表示距离下一个5小时窗口的剩余时间',
-    
+
     // Action buttons
     resetStatus: '重置状态',
     resetting: '重置中...',
@@ -437,7 +438,7 @@ export default {
     deleteTooltip: '删除账户',
     pause: '暂停',
     enable: '启用',
-    
+
     // Time formatting
     justNow: '刚刚',
     minutesAgo: '{minutes} 分钟前',
@@ -448,44 +449,46 @@ export default {
     minutesOnly: '{minutes}分钟',
     daysAndHours: '{days}天{hours}小时',
     daysOnly: '{days}天',
-    
+
     // Rate limit time
     rateLimitTime: '({time})',
-    
+
     // Messages and confirmations
     resetStatusConfirmTitle: '重置账户状态',
-    resetStatusConfirmMessage: '确定要重置此账户的所有异常状态吗？这将清除限流状态、401错误计数等所有异常标记。',
+    resetStatusConfirmMessage:
+      '确定要重置此账户的所有异常状态吗？这将清除限流状态、401错误计数等所有异常标记。',
     resetStatusConfirmButton: '确定重置',
     resetStatusCancelButton: '取消',
     statusResetSuccess: '账户状态已重置',
     statusResetFailed: '状态重置失败',
-    
+
     deleteAccountTitle: '删除账户',
     deleteAccountMessage: '确定要删除账户 "{name}" 吗？\n\n此操作不可恢复。',
     deleteAccountButton: '删除',
     deleteAccountCancel: '取消',
-    cannotDeleteBoundAccount: '无法删除此账号，有 {count} 个API Key绑定到此账号，请先解绑所有API Key',
+    cannotDeleteBoundAccount:
+      '无法删除此账号，有 {count} 个API Key绑定到此账号，请先解绑所有API Key',
     accountDeleted: '账户已删除',
     deleteFailed: '删除失败',
-    
+
     enabledScheduling: '已启用调度',
     disabledScheduling: '已禁用调度',
     schedulingToggleFailed: '切换调度状态失败',
     unsupportedAccountType: '该账户类型暂不支持调度控制',
     operationFailed: '操作失败',
-    
+
     accountCreateSuccess: '账户创建成功',
     accountUpdateSuccess: '账户更新成功',
     loadAccountsFailed: '加载账户失败',
     unsupportedAccountTypeReset: '不支持的账户类型',
-    
+
     // Schedulable reasons
     invalidApiKey: 'API Key无效或已过期（401错误）',
     serviceOverload: '服务过载（529错误）',
     rateLimitTriggered: '触发限流（429错误）',
     authFailed: '认证失败（401错误）',
     manualStop: '手动停止调度',
-    
+
     // Account type display
     claudeMax: 'Claude Max',
     claudePro: 'Claude Pro',
@@ -499,18 +502,18 @@ export default {
     // Page title and description
     title: 'API Keys 管理',
     description: '管理和监控您的 API 密钥',
-    
+
     // Tab navigation
     activeTab: '活跃 API Keys',
     deletedTab: '已删除 API Keys',
-    
+
     // Toolbar and actions
     refresh: '刷新',
     refreshTooltip: '刷新 API Keys 列表（Ctrl+点击强制刷新）',
     createNew: '创建新 Key',
     bulkEdit: '编辑选中',
     bulkDelete: '删除选中',
-    
+
     // Table headers
     name: '名称',
     tags: '标签',
@@ -519,7 +522,7 @@ export default {
     createdAt: '创建时间',
     expiresAt: '过期时间',
     actions: '操作',
-    
+
     // Filter options
     timeRange: {
       today: '今日',
@@ -527,7 +530,7 @@ export default {
       month: '本月',
       all: '全部时间'
     },
-    
+
     // Status
     active: '活跃',
     disabled: '禁用',
@@ -535,7 +538,7 @@ export default {
     expiringSoon: '即将过期',
     neverExpire: '永不过期',
     notActivated: '未激活',
-    
+
     // Usage statistics
     dailyCost: '今日费用',
     totalCost: '总费用',
@@ -547,26 +550,26 @@ export default {
     daysAgo: '{days} 天前',
     justNow: '刚刚',
     requests: '次',
-    
+
     // Search and filter
     searchPlaceholder: '搜索名称...',
     searchPlaceholderWithOwner: '搜索名称或所有者...',
     allTags: '所有标签',
     noTags: '无标签',
-    
+
     // Binding information
     shared: '使用共享池',
     dedicated: '专属',
     consoleAccount: 'Console账户',
     bindingWarning: '⚠️ 账户不存在',
-    
+
     // Limits and quotas
     dailyLimit: '每日费用',
     weeklyOpusLimit: 'Opus周费用',
     remainingQuota: '剩余: ${amount}',
     reset: '重置于 {time}',
     quotaProgress: '额度进度',
-    
+
     // Model statistics
     modelStats: '模型使用分布',
     modelStatsCount: '{count} 个模型',
@@ -579,14 +582,14 @@ export default {
     noModelData: '暂无模型使用数据',
     resetFilter: '刷新',
     adjustTimeRange: '尝试调整时间范围或点击刷新重新加载数据',
-    
+
     // Date filter
     dateFilter: {
       today: '今日',
       days7: '7天',
       days30: '30天'
     },
-    
+
     // Actions
     viewDetails: '查看详细统计',
     edit: '编辑',
@@ -595,12 +598,12 @@ export default {
     disable: '禁用',
     copy: '复制',
     copyStatsLink: '复制统计页面链接',
-    
+
     // Pagination
     totalRecords: '共 {count} 条记录',
     pageSize: '每页显示',
     records: '条',
-    
+
     // Empty states
     noApiKeys: '暂无 API Keys',
     noApiKeysHint: '点击上方按钮创建您的第一个 API Key',
@@ -609,7 +612,7 @@ export default {
     loading: '正在加载 API Keys...',
     loadingDeleted: '正在加载已删除的 API Keys...',
     loadingModelStats: '加载模型统计...',
-    
+
     // Deleted keys table
     creator: '创建者',
     deletedBy: '删除者',
@@ -617,21 +620,23 @@ export default {
     canRestore: '恢复',
     permanentDelete: '彻底删除',
     clearAllDeleted: '清空所有已删除',
-    
+
     // User types
     admin: '管理员',
     user: '用户',
     unknown: '未知',
     system: '系统',
-    
+
     // Confirmation dialogs
     confirmDisable: '确定要禁用 API Key "{name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。',
     confirmDelete: '确定要删除这个 API Key 吗？此操作不可恢复。',
     confirmBatchDelete: '确定要删除选中的 {count} 个 API Key 吗？此操作不可恢复。',
     confirmRestore: '确定要恢复这个 API Key 吗？恢复后可以重新使用。',
-    confirmPermanentDelete: '确定要彻底删除这个 API Key 吗？此操作不可恢复，所有相关数据将被永久删除。',
-    confirmClearAll: '确定要彻底删除全部 {count} 个已删除的 API Keys 吗？此操作不可恢复，所有相关数据将被永久删除。',
-    
+    confirmPermanentDelete:
+      '确定要彻底删除这个 API Key 吗？此操作不可恢复，所有相关数据将被永久删除。',
+    confirmClearAll:
+      '确定要彻底删除全部 {count} 个已删除的 API Keys 吗？此操作不可恢复，所有相关数据将被永久删除。',
+
     // Success messages
     keyActivated: 'API Key 已激活',
     keyDisabled: 'API Key 已禁用',
@@ -641,7 +646,7 @@ export default {
     allDeletedCleared: '已清空所有已删除的 API Keys',
     linkCopied: '已复制统计页面链接',
     expiryUpdated: '过期时间已更新',
-    
+
     // Error messages
     selectKeysFirst: '请先选择要编辑的 API Keys',
     loadFailed: '加载 API Keys 失败',
@@ -651,17 +656,593 @@ export default {
     deleteFailed: '删除失败',
     restoreFailed: '恢复失败',
     clearFailed: '清空失败',
-    
+
     // Tooltips and helpers
     editExpiry: '编辑过期时间',
     activationDays: '未激活 ({days}天)',
     boundTo: '绑定到',
     belongsToGroup: '所属分组: {name}',
-    
+
     // Batch operations
     batchSuccess: '成功处理 {count} 个项目',
     batchPartialFail: '{failed} 个处理失败',
-    batchAllFailed: '所有项目处理失败'
+    batchAllFailed: '所有项目处理失败',
+
+    // Batch API Key Modal
+    batchApiKeyModal: {
+      title: '批量创建成功',
+      successMessage: '成功创建 {count} 个 API Key',
+      importantReminder: '重要提醒',
+      warningMessage:
+        '这是您唯一能看到所有 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API Key。请立即下载并妥善保存。',
+
+      // Statistics cards
+      createdCount: '创建数量',
+      baseName: '基础名称',
+      permissionScope: '权限范围',
+      expiryTime: '过期时间',
+
+      // Permission texts
+      permissions: {
+        all: '全部服务',
+        claude: '仅 Claude',
+        gemini: '仅 Gemini',
+        unknown: '未知'
+      },
+
+      // Expiry time texts
+      neverExpire: '永不过期',
+      daysFormat: '{days}天',
+      weeksFormat: '{weeks}周',
+      monthsFormat: '{months}个月',
+      yearsFormat: '{years}年',
+
+      // Preview section
+      previewTitle: 'API Keys 预览',
+      hide: '隐藏',
+      show: '显示',
+      preview: '预览',
+      maxDisplayNote: '（最多显示前10个）',
+      moreKeysNote: '... 还有 {count} 个 API Key',
+
+      // Action buttons
+      downloadAll: '下载所有 API Keys',
+      alreadySaved: '我已保存',
+      directCloseTooltip: '直接关闭（不推荐）',
+
+      // File info
+      fileFormatInfo:
+        '下载的文件格式为文本文件（.txt），每行包含一个 API Key。请将文件保存在安全的位置，避免泄露。',
+
+      // Confirmation dialogs
+      closeReminderTitle: '关闭提醒',
+      closeReminderMessage:
+        '关闭后将无法再次查看这些 API Key，请确保已经下载并妥善保存。\n\n确定要关闭吗？',
+      confirmCloseButton: '确定关闭',
+      goBackDownloadButton: '返回下载',
+
+      directCloseTitle: '确定要关闭吗？',
+      directCloseMessage: '您还没有下载 API Keys，关闭后将无法再次查看。\n\n强烈建议您先下载保存。',
+      stillCloseButton: '仍然关闭',
+
+      directCloseFallbackMessage: '您还没有下载 API Keys，关闭后将无法再次查看。\n\n确定要关闭吗？',
+
+      // Success messages
+      downloadSuccess: 'API Keys 文件已下载'
+    },
+
+    // Window Countdown
+    windowCountdown: {
+      expired: '窗口已过期',
+      notStarted: '窗口未激活',
+      minutes: '分钟',
+      requests: '请求',
+      tokens: 'Token',
+      cost: '费用',
+      aboutToReset: '即将重置',
+      minutesUntilReset: '分钟后重置',
+      untilReset: '后重置',
+      windowLimit: '窗口限制',
+      hours: '小时'
+    },
+
+    // Expiry Edit Modal
+    expiryEditModal: {
+      title: '修改过期时间',
+      subtitle: '为 "{name}" 设置新的过期时间',
+      currentStatus: '当前状态',
+      notActivated: '未激活',
+      activationDaysHint: '(激活后 {days} 天过期)',
+      neverExpire: '永不过期',
+      expired: '已过期',
+      daysToExpire: '{days} 天后过期',
+      monthsToExpire: '{months} 个月后过期',
+      activateNow: '立即激活',
+      activateButton: '立即激活 (激活后 {days} 天过期)',
+      activationInfo: '点击立即激活此 API Key，激活后将在 {days} 天后过期',
+      selectNewDuration: '选择新的期限',
+      neverExpireOption: '永不过期',
+      oneDay: '1 天',
+      sevenDays: '7 天',
+      thirtyDays: '30 天',
+      ninetyDays: '90 天',
+      oneHundredEightyDays: '180 天',
+      threeSixtyFiveDays: '1 年',
+      twoYears: '2 年',
+      custom: '自定义',
+      selectDateAndTime: '选择日期和时间',
+      selectFutureDateTime: '选择一个未来的日期和时间作为过期时间',
+      newExpiryTime: '新的过期时间',
+      cancel: '取消',
+      saving: '保存中...',
+      saveChanges: '保存更改',
+      activateConfirmTitle: '激活 API Key',
+      activateConfirmMessage: '确定要立即激活此 API Key 吗？激活后将在 {days} 天后自动过期。',
+      confirmActivate: '确定激活',
+      confirmCancel: '取消'
+    },
+
+    // Edit API Key Modal
+    editApiKeyModal: {
+      title: '编辑 API Key',
+
+      // Basic Info
+      name: '名称',
+      namePlaceholder: '请输入API Key名称',
+      nameHint: '用于识别此 API Key 的用途',
+
+      // Owner
+      owner: '所有者',
+      adminLabel: '- 管理员',
+      ownerHint: '分配此 API Key 给指定用户或管理员，管理员分配时不受用户 API Key 数量限制',
+
+      // Tags
+      tags: '标签',
+      selectedTags: '已选择的标签:',
+      clickToSelectTags: '点击选择已有标签:',
+      createNewTag: '创建新标签:',
+      newTagPlaceholder: '输入新标签名称',
+      tagsHint: '用于标记不同团队或用途，方便筛选管理',
+
+      // Rate Limit Settings
+      rateLimitTitle: '速率限制设置 (可选)',
+      rateLimitWindow: '时间窗口 (分钟)',
+      rateLimitRequests: '请求次数限制',
+      rateLimitCost: '费用限制 (美元)',
+      rateLimitWindowHint: '时间段单位',
+      rateLimitRequestsHint: '窗口内最大请求',
+      rateLimitCostHint: '窗口内最大费用',
+      noLimit: '无限制',
+
+      // Usage Examples
+      usageExamples: '💡 使用示例',
+      example1: '示例1: 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求',
+      example2: '示例2: 时间窗口=1，费用=0.1 → 每分钟最多$0.1费用',
+      example3: '示例3: 窗口=30，请求=50，费用=5 → 每30分钟50次请求且不超$5费用',
+
+      // Cost Limits
+      dailyCostLimit: '每日费用限制 (美元)',
+      dailyCostLimitPlaceholder: '0 表示无限制',
+      dailyCostHint: '设置此 API Key 每日的费用限制，超过限制将拒绝请求，0 或留空表示无限制',
+      weeklyOpusCostLimit: 'Opus 模型周费用限制 (美元)',
+      weeklyOpusHint:
+        '设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户，0 或留空表示无限制',
+      custom: '自定义',
+
+      // Concurrency
+      concurrencyLimit: '并发限制',
+      concurrencyLimitPlaceholder: '0 表示无限制',
+      concurrencyHint: '设置此 API Key 可同时处理的最大请求数',
+
+      // Active Status
+      activeStatus: '激活账号',
+      activeStatusHint: '取消勾选将禁用此 API Key，暂停所有请求，客户端返回 401 错误',
+
+      // Service Permissions
+      servicePermissions: '服务权限',
+      allServices: '全部服务',
+      claudeOnly: '仅 Claude',
+      geminiOnly: '仅 Gemini',
+      openaiOnly: '仅 OpenAI',
+      permissionsHint: '控制此 API Key 可以访问哪些服务',
+
+      // Account Binding
+      accountBinding: '专属账号绑定',
+      refreshAccounts: '刷新账号',
+      refreshing: '刷新中...',
+      claudeAccount: 'Claude 专属账号',
+      geminiAccount: 'Gemini 专属账号',
+      openaiAccount: 'OpenAI 专属账号',
+      bedrockAccount: 'Bedrock 专属账号',
+      useSharedPool: '使用共享账号池',
+      selectClaudeAccount: '请选择Claude账号',
+      selectGeminiAccount: '请选择Gemini账号',
+      selectOpenaiAccount: '请选择OpenAI账号',
+      selectBedrockAccount: '请选择Bedrock账号',
+      accountBindingHint: '修改绑定账号将影响此API Key的请求路由',
+
+      // Model Restrictions
+      enableModelRestriction: '启用模型限制',
+      restrictedModels: '限制的模型列表',
+      noRestrictedModels: '暂无限制的模型',
+      allCommonModelsRestricted: '所有常用模型已在限制列表中',
+      addRestrictedModelPlaceholder: '输入模型名称，按回车添加',
+      modelRestrictionHint: '设置此API Key无法访问的模型，例如：claude-opus-4-20250514',
+
+      // Client Restrictions
+      enableClientRestriction: '启用客户端限制',
+      allowedClients: '允许的客户端',
+      clientRestrictionHint: '勾选允许使用此API Key的客户端',
+
+      // Buttons
+      cancel: '取消',
+      save: '保存修改',
+      saving: '保存中...',
+
+      // Messages
+      costLimitConfirmTitle: '费用限制提醒',
+      costLimitConfirmMessage:
+        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
+      costLimitConfirmContinue: '继续保存',
+      costLimitConfirmBack: '返回修改',
+      refreshAccountsSuccess: '账号列表已刷新',
+      refreshAccountsFailed: '刷新账号列表失败',
+      updateFailed: '更新失败'
+    },
+
+    // Renew API Key Modal
+    renewApiKeyModal: {
+      title: '续期 API Key',
+      apiKeyInfo: 'API Key 信息',
+      currentExpiry: '当前过期时间：',
+      neverExpires: '永不过期',
+      renewDuration: '续期时长',
+      extend7Days: '延长 7 天',
+      extend30Days: '延长 30 天',
+      extend90Days: '延长 90 天',
+      extend180Days: '延长 180 天',
+      extend365Days: '延长 365 天',
+      customDate: '自定义日期',
+      setPermanent: '设为永不过期',
+      newExpiry: '新的过期时间：',
+      cancel: '取消',
+      renewing: '续期中...',
+      confirmRenew: '确认续期',
+      renewSuccess: 'API Key 续期成功',
+      renewFailed: '续期失败'
+    },
+
+    // Batch Edit API Key Modal
+    batchEditApiKeyModal: {
+      title: '批量编辑 API Keys ({count} 个)',
+
+      // Info section
+      infoTitle: '批量编辑说明',
+      infoContent:
+        '以下设置将应用到所选的 {count} 个 API Key。只有填写或修改的字段才会被更新，空白字段将保持原值不变。',
+
+      // Tag operations
+      tagLabel: '标签 (批量操作)',
+      tagOperations: {
+        replace: '替换标签',
+        add: '添加标签',
+        remove: '移除标签',
+        none: '不修改标签'
+      },
+
+      // Tag status texts
+      newTagsList: '新标签列表:',
+      tagsToAdd: '要添加的标签:',
+      tagsToRemove: '要移除的标签:',
+      clickToSelectTags: '点击选择已有标签:',
+      createNewTag: '创建新标签:',
+      inputNewTagPlaceholder: '输入新标签名称',
+
+      // Rate limit settings
+      rateLimitTitle: '速率限制设置',
+      rateLimitWindow: '时间窗口 (分钟)',
+      rateLimitRequests: '请求次数限制',
+      rateLimitCost: '费用限制 (美元)',
+      noModifyPlaceholder: '不修改',
+
+      // Daily cost limit
+      dailyCostLimit: '每日费用限制 (美元)',
+      dailyCostLimitPlaceholder: '不修改 (0 表示无限制)',
+
+      // Weekly Opus cost limit
+      weeklyOpusCostLimit: 'Opus 模型周费用限制 (美元)',
+      weeklyOpusCostLimitPlaceholder: '不修改 (0 表示无限制)',
+      opusLimitDescription: '设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户',
+
+      // Concurrency limit
+      concurrencyLimit: '并发限制',
+      concurrencyLimitPlaceholder: '不修改 (0 表示无限制)',
+
+      // Active status
+      activeStatus: '激活状态',
+      statusOptions: {
+        active: '激活',
+        disabled: '禁用',
+        noChange: '不修改'
+      },
+
+      // Service permissions
+      servicePermissions: '服务权限',
+      permissionOptions: {
+        noChange: '不修改',
+        all: '全部服务',
+        claude: '仅 Claude',
+        gemini: '仅 Gemini',
+        openai: '仅 OpenAI'
+      },
+
+      // Account binding
+      accountBinding: '专属账号绑定',
+      refreshAccounts: '刷新账号',
+      refreshing: '刷新中...',
+
+      claudeAccount: 'Claude 专属账号',
+      geminiAccount: 'Gemini 专属账号',
+      openaiAccount: 'OpenAI 专属账号',
+      bedrockAccount: 'Bedrock 专属账号',
+
+      accountOptions: {
+        noChange: '不修改',
+        sharedPool: '使用共享账号池',
+        groupPrefix: '分组 - '
+      },
+
+      // Optgroup labels
+      optgroupLabels: {
+        accountGroups: '账号分组',
+        dedicatedAccounts: '专属账号'
+      },
+
+      // Buttons
+      cancel: '取消',
+      saving: '保存中...',
+      batchSave: '批量保存',
+
+      // Messages
+      refreshAccountsSuccess: '账号列表已刷新',
+      refreshAccountsFailed: '刷新账号列表失败',
+      batchEditSuccess: '成功批量编辑 {count} 个 API Keys',
+      batchEditPartialFail: '{failedCount} 个编辑失败:\n{errors}',
+      batchEditAllFailed: '所有 API Keys 编辑失败',
+      batchEditFailed: '批量编辑失败',
+      batchEditErrorLog: '批量编辑 API Keys 失败:'
+    },
+
+    // Usage Detail Modal
+    usageDetailModal: {
+      title: '使用统计详情',
+      close: '关闭',
+
+      // Statistics cards
+      totalRequests: '总请求数',
+      totalTokens: '总Token数',
+      totalCost: '总费用',
+      averageRate: '平均速率',
+
+      // Today stats
+      today: '今日',
+      todayRequests: '{count} 次',
+      todayTokens: '{count}',
+      todayCost: '${amount}',
+
+      // Usage labels
+      times: '次',
+
+      // Token distribution
+      tokenDistribution: 'Token 使用分布',
+      inputTokens: '输入 Token',
+      outputTokens: '输出 Token',
+      cacheCreateTokens: '缓存创建 Token',
+      cacheReadTokens: '缓存读取 Token',
+
+      // Limits section
+      limitSettings: '限制设置',
+      dailyCostLimit: '每日费用限制',
+      concurrencyLimit: '并发限制',
+      timeWindowLimit: '时间窗口限制',
+      windowStatus: '窗口状态',
+      used: '已使用',
+      remainingQuota: '剩余: ${amount}',
+
+      // Progress indicators
+      usedPercentage: '已使用 {percentage}%'
+    },
+
+    // Create API Key Modal
+    newApiKeyModal: {
+      title: 'API Key 创建成功',
+      subtitle: '请妥善保存您的 API Key',
+      directCloseTooltip: '直接关闭（不推荐）',
+
+      // 警告提示
+      warningTitle: '重要提醒',
+      warningMessage:
+        '这是您唯一能看到完整 API Key 的机会。关闭此窗口后，系统将不再显示完整的 API Key。请立即复制并妥善保存。',
+
+      // 字段标签
+      apiKeyName: 'API Key 名称',
+      remarks: '备注',
+      noDescription: '无描述',
+      apiKey: 'API Key',
+
+      // 可见性切换
+      hideApiKey: '隐藏API Key',
+      showFullApiKey: '显示完整API Key',
+      visibilityHint: '点击眼睛图标切换显示模式，使用下方按钮复制完整 API Key',
+
+      // 按钮
+      copyApiKey: '复制 API Key',
+      alreadySaved: '我已保存',
+
+      // 确认对话框
+      closeReminderTitle: '关闭提醒',
+      closeReminderMessage:
+        '关闭后将无法再次查看完整的API Key，请确保已经妥善保存。\n\n确定要关闭吗？',
+      confirmClose: '确定关闭',
+      cancel: '取消',
+
+      directCloseTitle: '确定要关闭吗？',
+      directCloseMessage:
+        '您还没有保存API Key，关闭后将无法再次查看。\n\n建议您先复制API Key再关闭。',
+      stillClose: '仍然关闭',
+      goBack: '返回复制',
+
+      directCloseFallback: '您还没有保存API Key，关闭后将无法再次查看。\n\n确定要关闭吗？',
+
+      // 成功消息
+      apiKeyNotFound: 'API Key 不存在',
+      copySuccess: 'API Key 已复制到剪贴板',
+      copyFailed: '复制失败，请手动复制'
+    },
+
+    createApiKeyModal: {
+      title: '创建新的 API Key',
+
+      // Create type section
+      createType: '创建类型',
+      singleCreate: '单个创建',
+      batchCreate: '批量创建',
+      batchCount: '创建数量',
+      batchCountPlaceholder: '输入数量 (2-500)',
+      maxSupported: '最大支持 500 个',
+      batchHint: '批量创建时，每个 Key 的名称会自动添加序号后缀，例如：{name}_1, {name}_2 ...',
+
+      // Basic form fields
+      name: '名称',
+      nameRequired: '*',
+      nameError: '请输入API Key名称',
+      singleNamePlaceholder: '为您的 API Key 取一个名称',
+      batchNamePlaceholder: '输入基础名称（将自动添加序号）',
+      description: '备注 (可选)',
+      descriptionPlaceholder: '描述此 API Key 的用途...',
+
+      // Tags section
+      tags: '标签',
+      selectedTags: '已选择的标签:',
+      clickToSelectTags: '点击选择已有标签:',
+      createNewTag: '创建新标签:',
+      newTagPlaceholder: '输入新标签名称',
+      tagHint: '用于标记不同团队或用途，方便筛选管理',
+
+      // Rate limit section
+      rateLimitTitle: '速率限制设置 (可选)',
+      rateLimitWindow: '时间窗口 (分钟)',
+      rateLimitRequests: '请求次数限制',
+      rateLimitCost: '费用限制 (美元)',
+      rateLimitWindowPlaceholder: '无限制',
+      rateLimitRequestsPlaceholder: '无限制',
+      rateLimitCostPlaceholder: '无限制',
+      rateLimitWindowHint: '时间段单位',
+      rateLimitRequestsHint: '窗口内最大请求',
+      rateLimitCostHint: '窗口内最大费用',
+
+      // Rate limit examples
+      exampleTitle: '💡 使用示例',
+      example1: '示例1: 时间窗口=60，请求次数=1000 → 每60分钟最多1000次请求',
+      example2: '示例2: 时间窗口=1，费用=0.1 → 每分钟最多$0.1费用',
+      example3: '示例3: 窗口=30，请求=50，费用=5 → 每30分钟50次请求且不超$5费用',
+
+      // Cost limits
+      dailyCostLimit: '每日费用限制 (美元)',
+      dailyCostLimitPlaceholder: '0 表示无限制',
+      dailyCostHint: '设置此 API Key 每日的费用限制，超过限制将拒绝请求，0 或留空表示无限制',
+      weeklyOpusCostLimit: 'Opus 模型周费用限制 (美元)',
+      weeklyOpusCostLimitPlaceholder: '0 表示无限制',
+      weeklyOpusHint:
+        '设置 Opus 模型的周费用限制（周一到周日），仅限 Claude 官方账户，0 或留空表示无限制',
+      custom: '自定义',
+
+      // Concurrency limit
+      concurrencyLimit: '并发限制 (可选)',
+      concurrencyLimitPlaceholder: '0 表示无限制',
+      concurrencyHint: '设置此 API Key 可同时处理的最大请求数，0 或留空表示无限制',
+
+      // Expiration settings
+      expirationSettings: '过期设置',
+      fixedTimeExpiry: '固定时间过期',
+      activationExpiry: '首次使用后激活',
+      fixedModeHint: '固定时间模式：Key 创建后立即生效，按设定时间过期',
+      activationModeHint: 'Key 首次使用时激活，激活后按设定天数过期（适合批量销售）',
+
+      // Expiration duration options
+      neverExpire: '永不过期',
+      '1d': '1 天',
+      '7d': '7 天',
+      '30d': '30 天',
+      '90d': '90 天',
+      '180d': '180 天',
+      '365d': '365 天',
+      customDate: '自定义日期',
+
+      // Activation mode
+      activationDays: '输入天数',
+      daysUnit: '天',
+      activationHint: 'Key 将在首次使用后激活，激活后 {days} 天过期',
+
+      // Expiry status
+      willExpireOn: '将于 {date} 过期',
+
+      // Service permissions
+      servicePermissions: '服务权限',
+      allServices: '全部服务',
+      claudeOnly: '仅 Claude',
+      geminiOnly: '仅 Gemini',
+      openaiOnly: '仅 OpenAI',
+      permissionHint: '控制此 API Key 可以访问哪些服务',
+
+      // Account binding
+      dedicatedAccountBinding: '专属账号绑定 (可选)',
+      refreshAccounts: '刷新账号',
+      refreshing: '刷新中...',
+      claudeDedicatedAccount: 'Claude 专属账号',
+      geminiDedicatedAccount: 'Gemini 专属账号',
+      openaiDedicatedAccount: 'OpenAI 专属账号',
+      bedrockDedicatedAccount: 'Bedrock 专属账号',
+      useSharedPool: '使用共享账号池',
+      accountBindingHint: '选择专属账号后，此API Key将只使用该账号，不选择则使用共享账号池',
+      selectClaudeAccount: '请选择Claude账号',
+      selectGeminiAccount: '请选择Gemini账号',
+      selectOpenaiAccount: '请选择OpenAI账号',
+      selectBedrockAccount: '请选择Bedrock账号',
+
+      // Model restrictions
+      enableModelRestriction: '启用模型限制',
+      restrictedModelsList: '限制的模型列表',
+      noRestrictedModels: '暂无限制的模型',
+      allCommonModelsRestricted: '所有常用模型已在限制列表中',
+      addRestrictedModelPlaceholder: '输入模型名称，按回车添加',
+      modelRestrictionHint: '设置此API Key无法访问的模型，例如：claude-opus-4-20250514',
+
+      // Client restrictions
+      enableClientRestriction: '启用客户端限制',
+      allowedClients: '允许的客户端',
+
+      // Buttons
+      cancel: '取消',
+      create: '创建',
+      creating: '创建中...',
+
+      // Messages
+      batchCountError: '批量创建数量必须在 2-500 之间',
+      costLimitConfirmTitle: '费用限制提醒',
+      costLimitConfirmMessage:
+        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n\n是否继续？',
+      costLimitConfirmContinue: '继续创建',
+      costLimitConfirmBack: '返回修改',
+      costLimitFallbackMessage:
+        '您设置了时间窗口但费用限制为0，这意味着不会有费用限制。\n是否继续？',
+      createSuccess: 'API Key 创建成功',
+      batchCreateSuccess: '成功创建 {count} 个 API Key',
+      createFailed: '创建失败',
+      batchCreateFailed: '批量创建失败',
+      refreshAccountsSuccess: '账号列表已刷新',
+      refreshAccountsFailed: '刷新账号列表失败'
+    }
   },
 
   // User-related translations
@@ -670,22 +1251,22 @@ export default {
     dashboard: {
       title: 'Dashboard Overview',
       welcomeMessage: 'Welcome to your Claude Relay dashboard',
-      
+
       // Navigation tabs
       overview: 'Overview',
       apiKeys: 'API Keys',
       usageStats: 'Usage Stats',
-      
+
       // Welcome section
       welcome: 'Welcome',
-      
+
       // Stats cards
       activeApiKeys: 'Active API Keys',
       deletedApiKeys: 'Deleted API Keys',
       totalRequests: 'Total Requests',
       inputTokens: 'Input Tokens',
       totalCost: 'Total Cost',
-      
+
       // Account information section
       accountInformation: 'Account Information',
       username: 'Username',
@@ -695,7 +1276,7 @@ export default {
       memberSince: 'Member Since',
       lastLogin: 'Last Login',
       notAvailable: 'N/A',
-      
+
       // Messages
       logout: 'Logout',
       logoutSuccess: 'Logged out successfully',
@@ -703,7 +1284,7 @@ export default {
       loadProfileFailed: 'Failed to load user profile',
       loadStatsFailed: 'Failed to load API keys stats'
     },
-    
+
     // User Login
     login: {
       title: 'User Sign In',
@@ -715,25 +1296,25 @@ export default {
       signIn: 'Sign In',
       signingIn: 'Signing In...',
       adminLogin: 'Admin Login',
-      
+
       // Validation and error messages
       requiredFields: 'Please enter both username and password',
       loginSuccess: 'Login successful!',
       loginFailed: 'Login failed'
     },
-    
+
     // User Management
     management: {
       title: 'User Management',
       description: 'Manage users, their API keys, and view usage statistics',
       refresh: 'Refresh',
-      
+
       // Stats cards
       totalUsers: 'Total Users',
       activeUsers: 'Active Users',
       totalApiKeys: 'Total API Keys',
       totalCost: 'Total Cost',
-      
+
       // Search and filters
       searchPlaceholder: 'Search users...',
       allRoles: 'All Roles',
@@ -742,14 +1323,14 @@ export default {
       allStatus: 'All Status',
       active: 'Active',
       disabled: 'Disabled',
-      
+
       // User list
       users: 'Users',
       loadingUsers: 'Loading users...',
       noUsersFound: 'No users found',
       noUsersMatch: 'No users match your search criteria.',
       noUsersCreated: 'No users have been created yet.',
-      
+
       // User info and actions
       displayName: 'Display Name',
       email: 'Email',
@@ -760,31 +1341,33 @@ export default {
       neverLoggedIn: 'Never logged in',
       requests: 'requests',
       totalCostLabel: 'total cost',
-      
+
       // Action buttons and tooltips
       viewUsageStats: 'View Usage Stats',
       disableAllApiKeys: 'Disable All API Keys',
       disableUser: 'Disable User',
       enableUser: 'Enable User',
       changeRole: 'Change Role',
-      
+
       // Confirmation dialogs
       disableUserTitle: 'Disable User',
       enableUserTitle: 'Enable User',
-      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      disableUserMessage:
+        'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
       enableUserMessage: 'Are you sure you want to enable user "{username}"?',
       disable: 'Disable',
       enable: 'Enable',
-      
+
       disableAllKeysTitle: 'Disable All API Keys',
-      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableAllKeysMessage:
+        'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
       disableKeys: 'Disable Keys',
-      
+
       // Success messages
       userDisabledSuccess: 'User disabled successfully',
       userEnabledSuccess: 'User enabled successfully',
       keysDisabledSuccess: 'Disabled {count} API keys',
-      
+
       // Error messages
       loadUsersError: 'Failed to load users',
       toggleStatusError: 'Failed to toggleStatus',
@@ -795,7 +1378,7 @@ export default {
     usageStatsModal: {
       title: '使用统计',
       titleWithUser: '使用统计 - {displayName}',
-      
+
       // Time period selection
       periodSelection: {
         day: '最近24小时',
@@ -803,10 +1386,10 @@ export default {
         month: '最近30天',
         quarter: '最近90天'
       },
-      
+
       // Loading state
       loadingStats: '正在加载使用统计...',
-      
+
       // Summary cards
       summaryCards: {
         requests: '请求数',
@@ -814,7 +1397,7 @@ export default {
         outputTokens: '输出Token',
         totalCost: '总费用'
       },
-      
+
       // API Keys table
       apiKeysTable: {
         title: 'API Keys 使用情况',
@@ -836,7 +1419,7 @@ export default {
         },
         never: '从未使用'
       },
-      
+
       // Usage trend chart
       usageTrend: {
         title: '使用趋势',
@@ -844,13 +1427,13 @@ export default {
         dailyTrends: '最近 {period} 的日使用趋势',
         chartNote: '(可集成 Chart.js、D3.js 或类似图表库)'
       },
-      
+
       // No data state
       noData: {
         title: '暂无使用数据',
         description: '该用户在所选时间段内尚未发起任何API请求。'
       },
-      
+
       // Buttons
       close: '关闭'
     },
@@ -858,10 +1441,10 @@ export default {
     // Change Role Modal
     changeRoleModal: {
       title: '修改用户角色',
-      
+
       // User info display
       currentRole: '当前角色：{role}',
-      
+
       // Role selection form
       newRole: '新角色',
       roles: {
@@ -870,19 +1453,20 @@ export default {
         admin: '管理员',
         adminDesc: '拥有管理用户和系统的完整权限'
       },
-      
+
       // Warning messages
       roleChangeWarning: {
         title: '角色变更警告',
-        grantAdmin: '授予管理员权限将使该用户拥有系统的完整访问权限，包括管理其他用户及其API密钥的能力。',
+        grantAdmin:
+          '授予管理员权限将使该用户拥有系统的完整访问权限，包括管理其他用户及其API密钥的能力。',
         removeAdmin: '移除管理员权限将限制该用户只能管理自己的API密钥和查看自己的使用统计。'
       },
-      
+
       // Buttons
       cancel: '取消',
       updateRole: '更新角色',
       updating: '更新中...',
-      
+
       // Success message
       roleUpdated: '用户角色已更新为 {role}'
     }
@@ -893,17 +1477,17 @@ export default {
     title: '系统设置',
     description: '网站定制和通知配置',
     loading: '正在加载设置...',
-    
+
     // 导航标签
     branding: '品牌设置',
     webhook: '通知设置',
-    
+
     // 品牌设置
     siteName: '网站名称',
     siteNameDescription: '品牌标识',
     siteNamePlaceholder: 'Claude Relay Service',
     siteNameHint: '将显示在浏览器标题和页面头部',
-    
+
     siteIcon: '网站图标',
     siteIconDescription: 'Favicon',
     currentIcon: '当前图标',
@@ -911,13 +1495,13 @@ export default {
     removeIcon: '删除',
     iconFormats: '支持 .ico, .png, .jpg, .svg 格式，最大 350KB',
     iconPreview: '图标预览',
-    
+
     adminEntry: '管理入口',
     adminEntryDescription: '登录按钮显示',
     hideLoginButton: '隐藏登录按钮',
     showLoginButton: '显示登录按钮',
     adminEntryHint: '隐藏后，用户需要直接访问 /admin/login 页面登录',
-    
+
     // 移动端卡片标题
     siteNameCard: '站点名称',
     siteNameCardDesc: '自定义您的站点品牌名称',
@@ -925,18 +1509,18 @@ export default {
     siteIconCardDesc: '上传自定义图标或输入图标URL',
     adminEntryCard: '管理入口',
     adminEntryCardDesc: '控制登录按钮在首页的显示',
-    
+
     // 操作按钮
     save: '保存设置',
     saving: '保存中...',
     reset: '重置为默认',
     lastUpdated: '最后更新：{time}',
     lastUpdatedMobile: '上次更新: {time}',
-    
+
     // Webhook 设置
     enableWebhook: '启用 Webhook 通知',
     webhookDescription: '开启后，系统将按配置发送通知到指定平台',
-    
+
     // 通知类型
     notificationTypes: '通知类型',
     accountAnomaly: '账号异常',
@@ -947,7 +1531,7 @@ export default {
     quotaWarningDesc: 'API调用配额不足警告',
     systemErrorDesc: '系统运行错误和故障',
     securityAlertDesc: '安全相关的警报通知',
-    
+
     // 通知平台
     notificationPlatforms: '通知平台',
     addPlatform: '添加平台',
@@ -956,32 +1540,32 @@ export default {
     testConnection: '测试连接',
     edit: '编辑',
     delete: '删除',
-    
+
     // 高级设置
     advancedSettings: '高级设置',
     maxRetries: '最大重试次数',
     retryDelay: '重试延迟 (毫秒)',
     timeout: '超时时间 (毫秒)',
-    
+
     // 测试通知
     sendTestNotification: '发送测试通知',
-    
+
     // 平台模态框
     addPlatformModal: '添加通知平台',
     editPlatformModal: '编辑通知平台',
     configurePlatform: '配置新的Webhook通知渠道',
     updatePlatform: '配置并更新Webhook通知渠道',
-    
+
     platformType: '平台类型',
     platformName: '名称',
     platformNameOptional: '(可选)',
     platformNamePlaceholder: '例如：运维群通知、开发测试群',
-    
+
     webhookUrl: 'Webhook URL',
     webhookUrlRequired: '*',
     webhookUrlPlaceholder: 'https://...',
     editModeWarning: '编辑模式下不能更改平台类型',
-    
+
     // Bark 特有设置
     deviceKey: '设备密钥 (Device Key)',
     deviceKeyPlaceholder: '例如：aBcDeFgHiJkLmNoPqRsTuVwX',
@@ -994,14 +1578,14 @@ export default {
     notificationGroup: '通知分组',
     notificationGroupOptional: '(可选)',
     notificationGroupPlaceholder: '默认: claude-relay',
-    
+
     // 通知级别选项
     levelAuto: '自动（根据通知类型）',
     levelPassive: '被动',
     levelActive: '默认',
     levelTimeSensitive: '时效性',
     levelCritical: '紧急',
-    
+
     // 声音选项
     soundAuto: '自动（根据通知类型）',
     soundDefault: '默认',
@@ -1012,20 +1596,20 @@ export default {
     soundGlass: '玻璃',
     soundHorn: '喇叭',
     soundSilence: '静音',
-    
+
     // Bark 提示信息
     barkInstructions: [
       '1. 在iPhone上安装Bark App',
       '2. 打开App获取您的设备密钥',
       '3. 将密钥粘贴到上方输入框'
     ],
-    
+
     // 签名设置
     enableSignatureVerify: '启用签名验证',
     signatureEnabled: '已启用',
     signatureSecret: '签名密钥',
     signatureSecretPlaceholder: 'SEC...',
-    
+
     // 平台提示信息
     wechatWorkHint: '请在企业微信群机器人设置中获取Webhook地址',
     dingtalkHint: '请在钉钉群机器人设置中获取Webhook地址',
@@ -1034,14 +1618,14 @@ export default {
     discordHint: '请在Discord服务器的集成设置中创建Webhook',
     barkHint: '请在Bark App中查看您的设备密钥',
     customHint: '请输入完整的Webhook接收地址',
-    
+
     // 模态框按钮
     required: '必填项',
     cancel: '取消',
     testing: '测试中...',
     saveChanges: '保存修改',
     addPlatformBtn: '添加平台',
-    
+
     // 成功/错误消息
     loadSettingsFailed: '加载设置失败',
     settingsSaved: '设置已保存',
@@ -1051,34 +1635,34 @@ export default {
     resetToDefault: '已重置为默认设置',
     resetFailed: '重置失败',
     confirmReset: '确定要重置为默认设置吗？\n\n这将清除所有自定义的网站名称和图标设置。',
-    
+
     webhookConfigSaved: '配置已保存',
     webhookConfigSaveFailed: '保存配置失败',
     getWebhookConfigFailed: '获取webhook配置失败',
-    
+
     platformAdded: '平台已添加',
     platformUpdated: '平台已更新',
     platformDeleted: '平台已删除',
     platformDeleteFailed: '删除失败',
     confirmDeletePlatform: '确定要删除这个平台吗？',
     operationFailed: '操作失败',
-    
+
     testSuccess: '测试成功，webhook连接正常',
     testFailed: '测试失败',
     testNotificationSent: '测试通知已发送',
     testNotificationFailed: '发送失败',
-    
+
     // 表单验证消息
     enterBarkDeviceKey: '请输入Bark设备密钥',
     enterWebhookUrl: '请输入Webhook URL',
     enterValidWebhookUrl: '请输入有效的Webhook URL',
     enterWebhookUrlFirst: '请先输入Webhook URL',
     enterBarkDeviceKeyFirst: '请先输入Bark设备密钥',
-    
+
     // 文件上传
     fileReadFailed: '文件读取失败',
     iconLoadFailed: 'Icon failed to load',
-    
+
     // 平台名称
     platforms: {
       wechatWork: '企业微信',
@@ -1096,11 +1680,11 @@ export default {
     // 标题和模态框
     editAccount: '编辑账户',
     addAccount: '添加账户',
-    
+
     // 步骤指示器
     stepBasicInfo: '基本信息',
     stepAuthorization: '授权认证',
-    
+
     // 平台选择
     platform: '平台',
     platformClaude: 'Claude',
@@ -1109,27 +1693,28 @@ export default {
     platformOpenAI: 'OpenAI',
     platformAzureOpenAI: 'Azure OpenAI',
     platformBedrock: 'Bedrock',
-    
+
     // 添加方式
     addMethod: '添加方式',
     addTypeSetupToken: 'Setup Token (推荐)',
     addTypeOAuth: 'OAuth 授权',
     addTypeManual: '手动输入 Access Token',
-    
+
     // 基本信息字段
     accountName: '账户名称',
     accountNamePlaceholder: '为账户设置一个易识别的名称',
     description: '描述',
     descriptionOptional: '描述 (可选)',
     descriptionPlaceholder: '账户用途说明...',
-    
+
     // 账户类型
     accountType: '账户类型',
     accountTypeShared: '共享账户',
     accountTypeDedicated: '专属账户',
     accountTypeGroup: '分组调度',
-    accountTypeDescription: '共享账户：供所有API Key使用；专属账户：仅供特定API Key使用；分组调度：加入分组供分组内调度',
-    
+    accountTypeDescription:
+      '共享账户：供所有API Key使用；专属账户：仅供特定API Key使用；分组调度：加入分组供分组内调度',
+
     // 分组选择
     selectGroup: '选择分组',
     selectGroupRequired: '选择分组 *',
@@ -1137,7 +1722,7 @@ export default {
     memberCount: '个成员',
     newGroup: '新建分组',
     refreshGroups: '刷新分组',
-    
+
     // Gemini 项目 ID
     projectId: '项目 ID',
     projectIdOptional: '项目 ID (可选)',
@@ -1149,8 +1734,9 @@ export default {
     projectIdStep3: '⚠️ 注意：要复制项目 ID（Project ID），不要复制项目编号（Project Number）！',
     projectIdTip: '提示：如果您的账号是普通个人账号（未绑定 Google Cloud），请留空此字段。',
     projectIdGoogleCloudRequired: 'Google Cloud/Workspace 账号需要提供项目 ID',
-    projectIdGoogleCloudDescription: '某些 Google 账号（特别是绑定了 Google Cloud 的账号）会被识别为 Workspace 账号，需要提供额外的项目 ID。',
-    
+    projectIdGoogleCloudDescription:
+      '某些 Google 账号（特别是绑定了 Google Cloud 的账号）会被识别为 Workspace 账号，需要提供额外的项目 ID。',
+
     // Bedrock 字段
     awsAccessKeyId: 'AWS 访问密钥 ID',
     awsAccessKeyIdRequired: 'AWS 访问密钥 ID *',
@@ -1186,12 +1772,13 @@ export default {
     smallFastModelOptional: '小快速模型 (可选)',
     smallFastModelPlaceholder: '例如：us.anthropic.claude-3-5-haiku-20241022-v1:0',
     smallFastModelDescription: '用于快速响应的轻量级模型，留空将使用系统默认',
-    
+
     // Azure OpenAI 字段
     azureEndpoint: 'Azure Endpoint',
     azureEndpointRequired: 'Azure Endpoint *',
     azureEndpointPlaceholder: 'https://your-resource.openai.azure.com',
-    azureEndpointDescription: 'Azure OpenAI 资源的终结点 URL，格式：https://your-resource.openai.azure.com',
+    azureEndpointDescription:
+      'Azure OpenAI 资源的终结点 URL，格式：https://your-resource.openai.azure.com',
     apiVersion: 'API 版本',
     apiVersionPlaceholder: '2024-02-01',
     apiVersionDescription: 'Azure OpenAI API 版本，默认使用最新稳定版本 2024-02-01',
@@ -1205,7 +1792,7 @@ export default {
     apiKeyDescription: '从 Azure 门户获取的 API 密钥',
     supportedModels: '支持的模型',
     supportedModelsDescription: '选择此部署支持的模型类型',
-    
+
     // Claude Console 字段
     apiUrl: 'API URL',
     apiUrlRequired: 'API URL *',
@@ -1224,7 +1811,8 @@ export default {
     used: '已使用',
     modelMapping: '模型映射表',
     modelMappingOptional: '模型映射表 (可选)',
-    modelMappingDescription: '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
+    modelMappingDescription:
+      '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
     originalModel: '原始模型名称',
     mappedModel: '映射后的模型名称',
     addModelMapping: '添加模型映射',
@@ -1237,51 +1825,63 @@ export default {
     rateLimitDescription: '启用后，当账号返回429错误时将暂停调度一段时间',
     rateLimitDuration: '限流时间 (分钟)',
     rateLimitDurationDescription: '账号被限流后暂停调度的时间（分钟）',
-    
+
     // Claude 订阅类型
     subscriptionType: '订阅类型',
     subscriptionClaudeMax: 'Claude Max',
     subscriptionClaudePro: 'Claude Pro',
     claudeProLimitation: 'Pro 账号不支持 Claude Opus 4 模型',
-    
+
     // Claude 特殊功能
     autoStopOnWarning: '5小时使用量接近限制时自动停止调度',
-    autoStopOnWarningDescription: '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
+    autoStopOnWarningDescription:
+      '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
     useUnifiedUserAgent: '使用统一 Claude Code 版本',
-    useUnifiedUserAgentDescription: '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
+    useUnifiedUserAgentDescription:
+      '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
     currentUnifiedVersion: '💡 当前统一版本：',
     clearCache: '清除缓存',
     clearing: '清除中...',
     waitingForCapture: '⏳ 等待从 Claude Code 客户端捕获 User-Agent',
-    captureHint: '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户，或联系开发者检查 User-Agent 格式是否发生变化',
+    captureHint:
+      '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户，或联系开发者检查 User-Agent 格式是否发生变化',
     useUnifiedClientId: '使用统一的客户端标识',
-    useUnifiedClientIdDescription: '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
+    useUnifiedClientIdDescription:
+      '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
     clientId: '客户端标识 ID',
     regenerate: '重新生成',
     clientIdDescription: '此ID将替换请求中的user_id客户端部分，保留session部分用于粘性会话',
-    
+
     // 调度优先级
     schedulePriority: '调度优先级',
     schedulePriorityRange: '调度优先级 (1-100)',
     schedulePriorityPlaceholder: '数字越小优先级越高，默认50',
     schedulePriorityDescription: '数字越小优先级越高，建议范围：1-100',
-    
+
     // 手动输入 Token
     manualTokenTitle: '手动输入 Token',
-    manualTokenDescription: '请输入有效的 Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
-    manualTokenClaudeDescription: '请输入有效的 Claude Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
-    manualTokenGeminiDescription: '请输入有效的 Gemini Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
-    manualTokenOpenAIDescription: '请输入有效的 OpenAI Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenDescription:
+      '请输入有效的 Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenClaudeDescription:
+      '请输入有效的 Claude Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenGeminiDescription:
+      '请输入有效的 Gemini Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenOpenAIDescription:
+      '请输入有效的 OpenAI Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
     obtainTokenMethods: '获取 Access Token 的方法：',
-    claudeTokenPath: '请从已登录 Claude Code 的机器上获取 ~/.claude/.credentials.json 文件中的凭证， 请勿使用 Claude 官网 API Keys 页面的密钥。',
-    geminiTokenPath: '请从已登录 Gemini CLI 的机器上获取 ~/.config/gemini/credentials.json 文件中的凭证。',
-    openaiTokenPath: '请从已登录 OpenAI 账户的机器上获取认证凭证， 或通过 OAuth 授权流程获取 Access Token。',
+    claudeTokenPath:
+      '请从已登录 Claude Code 的机器上获取 ~/.claude/.credentials.json 文件中的凭证， 请勿使用 Claude 官网 API Keys 页面的密钥。',
+    geminiTokenPath:
+      '请从已登录 Gemini CLI 的机器上获取 ~/.config/gemini/credentials.json 文件中的凭证。',
+    openaiTokenPath:
+      '请从已登录 OpenAI 账户的机器上获取认证凭证， 或通过 OAuth 授权流程获取 Access Token。',
     accessToken: 'Access Token',
     accessTokenOptional: 'Access Token (可选)',
     accessTokenRequired: 'Access Token *',
     accessTokenPlaceholder: '请输入 Access Token...',
     accessTokenOptionalPlaceholder: '可选：如果不填写，系统会自动通过 Refresh Token 获取...',
-    accessTokenOptionalDescription: 'Access Token 可选填。如果不提供，系统会通过 Refresh Token 自动获取。',
+    accessTokenOptionalDescription:
+      'Access Token 可选填。如果不提供，系统会通过 Refresh Token 自动获取。',
     refreshToken: 'Refresh Token',
     refreshTokenOptional: 'Refresh Token (可选)',
     refreshTokenRequired: 'Refresh Token *',
@@ -1289,16 +1889,18 @@ export default {
     refreshTokenRequiredPlaceholder: '请输入 Refresh Token（必填）...',
     refreshTokenDescription: '系统将使用 Refresh Token 自动获取 Access Token 和用户信息',
     refreshTokenTip: '💡 如果未填写 Refresh Token，Token 过期后需要手动更新。',
-    
+
     // Setup Token 流程
     setupTokenTitle: 'Claude Setup Token 授权',
     setupTokenDescription: '请按照以下步骤通过 Setup Token 完成 Claude 账户的授权：',
     setupTokenStep1Title: '点击下方按钮生成授权链接',
     setupTokenStep2Title: '在浏览器中打开链接并完成授权',
-    setupTokenStep2Description: '请在新标签页中打开授权链接，登录您的 Claude 账户并授权 Claude Code。',
+    setupTokenStep2Description:
+      '请在新标签页中打开授权链接，登录您的 Claude 账户并授权 Claude Code。',
     setupTokenStep2Warning: '注意：如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。',
     setupTokenStep3Title: '输入 Authorization Code',
-    setupTokenStep3Description: '授权完成后，从返回页面复制 Authorization Code，并粘贴到下方输入框：',
+    setupTokenStep3Description:
+      '授权完成后，从返回页面复制 Authorization Code，并粘贴到下方输入框：',
     generateSetupTokenUrl: '生成 Setup Token 授权链接',
     generating: '生成中...',
     copyLink: '复制链接',
@@ -1308,18 +1910,19 @@ export default {
     authorizationCodeDescription: '请粘贴从Claude Code授权页面复制的Authorization Code',
     verifying: '验证中...',
     completeAuthorization: '完成授权',
-    
+
     // Token 更新（编辑模式）
     updateTokenTitle: '更新 Token',
-    updateTokenDescription: '可以更新 Access Token 和 Refresh Token。为了安全起见，不会显示当前的 Token 值。',
+    updateTokenDescription:
+      '可以更新 Access Token 和 Refresh Token。为了安全起见，不会显示当前的 Token 值。',
     updateTokenTip: '💡 留空表示不更新该字段。',
     newAccessToken: '新的 Access Token',
     newRefreshToken: '新的 Refresh Token',
     leaveBlankNoUpdate: '留空表示不更新...',
-    
+
     // 使用情况
     currentUsage: '当前使用情况',
-    
+
     // 按钮
     cancel: '取消',
     nextStep: '下一步',
@@ -1328,7 +1931,7 @@ export default {
     creating: '创建中...',
     update: '更新',
     updating: '更新中...',
-    
+
     // 错误消息
     pleaseEnterAccountName: '请填写账户名称',
     pleaseSelectGroup: '请选择一个分组',
@@ -1341,7 +1944,7 @@ export default {
     pleaseEnterDeploymentName: '请填写部署名称',
     pleaseEnterAccessToken: '请填写 Access Token',
     pleaseEnterRefreshToken: '请填写 Refresh Token',
-    
+
     // 成功消息
     linkCopied: '链接已复制',
     extractedAuthCode: '成功提取授权码！',
@@ -1350,7 +1953,7 @@ export default {
     groupsRefreshed: '分组列表已刷新',
     modelMappingAdded: '已添加映射',
     modelMappingExists: '模型映射已存在',
-    
+
     // 警告和提示
     copyFailed: '复制失败，请手动复制',
     clearCacheFailed: '清除缓存失败',
@@ -1358,40 +1961,46 @@ export default {
     urlFormatError: '链接格式错误，请检查是否为完整的 URL',
     wrongUrlFormat: '请粘贴以 http://localhost:45462 开头的链接',
     loadGroupsFailed: '加载分组列表失败',
-    
+
     // 确认对话框
     projectIdNotFilledTitle: '项目 ID 未填写',
-    projectIdNotFilledMessage: '您尚未填写项目 ID。\n\n如果您的Google账号绑定了Google Cloud或被识别为Workspace账号，需要提供项目 ID。\n如果您使用的是普通个人账号，可以继续不填写。',
+    projectIdNotFilledMessage:
+      '您尚未填写项目 ID。\n\n如果您的Google账号绑定了Google Cloud或被识别为Workspace账号，需要提供项目 ID。\n如果您使用的是普通个人账号，可以继续不填写。',
     continueButton: '继续',
     goBackToFill: '返回填写',
     continueSave: '继续保存',
-    
+
     // 快捷模型映射按钮
     presetSonnet4: '+ Sonnet 4',
     presetOpus41: '+ Opus 4.1',
     presetHaiku35: '+ Haiku 3.5',
     presetOpus41ToSonnet4: '+ Opus 4.1 → Sonnet 4',
-    
+
     // 编辑模式特殊提示
     leaveBlankNoUpdateApiKey: '留空表示不更新 API Key',
     leaveBlankNoUpdateAwsKey: '留空表示不更新 AWS Access Key ID',
     leaveBlankNoUpdateAwsSecret: '留空表示不更新 AWS Secret Access Key',
     leaveBlankNoUpdateSession: '留空表示不更新',
-    
+
     // 通用描述文本
-    allModelsIfEmpty: '留空表示支持所有模型。如果指定模型，请求中的模型不在列表内将不会调度到此账号',
+    allModelsIfEmpty:
+      '留空表示支持所有模型。如果指定模型，请求中的模型不在列表内将不会调度到此账号',
     systemDefaultIfEmpty: '留空将使用系统默认模型。支持 inference profile ID 或 ARN',
     noUpdateIfEmpty: '留空表示不更新该字段',
-    
+
     // 手动 Token 输入部分
     manualTokenInput: '手动输入 Token',
-    manualTokenClaudeDescription: '请输入有效的 Claude Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
-    manualTokenGeminiDescription: '请输入有效的 Gemini Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
-    manualTokenOpenAIDescription: '请输入有效的 OpenAI Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenClaudeDescription:
+      '请输入有效的 Claude Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenGeminiDescription:
+      '请输入有效的 Gemini Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
+    manualTokenOpenAIDescription:
+      '请输入有效的 OpenAI Access Token。如果您有 Refresh Token，建议也一并填写以支持自动刷新。',
     getAccessTokenMethod: '获取 Access Token 的方法：',
     claudeCredentialsPath: '请从已登录 Claude Code 的机器上获取',
     geminiCredentialsPath: '请从已登录 Gemini CLI 的机器上获取',
-    openaiCredentialsPath: '请从已登录 OpenAI 账户的机器上获取认证凭证，或通过 OAuth 授权流程获取 Access Token。',
+    openaiCredentialsPath:
+      '请从已登录 OpenAI 账户的机器上获取认证凭证，或通过 OAuth 授权流程获取 Access Token。',
     claudeCredentialsWarning: '文件中的凭证，请勿使用 Claude 官网 API Keys 页面的密钥。',
     refreshTokenWarning: '💡 如果未填写 Refresh Token，Token 过期后需要手动更新。',
     accessTokenOptional: 'Access Token (可选)',
@@ -1404,38 +2013,42 @@ export default {
     refreshTokenRequiredInfo: '系统将使用 Refresh Token 自动获取 Access Token 和用户信息',
     refreshTokenOptional: 'Refresh Token (可选)',
     refreshTokenOptionalPlaceholder: '请输入 Refresh Token...',
-    
+
     // 优先级设置
     priorityPlaceholder: '数字越小优先级越高，默认50',
     priorityDescription: '数字越小优先级越高，建议范围：1-100',
     prioritySchedulingTitle: '调度优先级 (1-100)',
     priorityEditPlaceholder: '数字越小优先级越高',
-    
+
     // Gemini 项目ID
     projectIdOptional: '项目 ID (可选)',
     projectIdPlaceholder: '例如：verdant-wares-464411-k9',
     projectIdDescription: 'Google Cloud/Workspace 账号可能需要提供项目 ID',
-    
+
     // Claude 订阅类型和高级选项
     subscriptionType: '订阅类型',
     claudeMaxSubscription: 'Claude Max',
     claudeProSubscription: 'Claude Pro',
     claudeProLimitation: 'Pro 账号不支持 Claude Opus 4 模型',
     autoStopOnWarning: '5小时使用量接近限制时自动停止调度',
-    autoStopOnWarningDescription: '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
+    autoStopOnWarningDescription:
+      '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
     useUnifiedUserAgent: '使用统一 Claude Code 版本',
-    useUnifiedUserAgentDescription: '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
+    useUnifiedUserAgentDescription:
+      '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
     currentUnifiedVersion: '当前统一版本：',
     clearCache: '清除缓存',
     clearing: '清除中...',
     waitingForCapture: '等待从 Claude Code 客户端捕获 User-Agent',
-    captureHint: '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户，或联系开发者检查 User-Agent 格式是否发生变化',
+    captureHint:
+      '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户，或联系开发者检查 User-Agent 格式是否发生变化',
     useUnifiedClientId: '使用统一的客户端标识',
-    useUnifiedClientIdDescription: '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
+    useUnifiedClientIdDescription:
+      '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
     clientIdLabel: '客户端标识 ID',
     regenerateClientId: '重新生成',
     clientIdDescription: '此ID将替换请求中的user_id客户端部分，保留session部分用于粘性会话',
-    
+
     // 编辑模式字段
     accountNameEdit: '账户名称',
     accountNameEditPlaceholder: '为账户设置一个易识别的名称',
@@ -1446,7 +2059,7 @@ export default {
     noAvailableGroups: '暂无可用分组',
     membersCount: ' 个成员',
     createNewGroup: '新建分组',
-    
+
     // AWS Bedrock 配置
     bedrockCredentials: '凭证配置',
     bedrockCredentialsDescription: '请填写 AWS 访问凭证，用于调用 Amazon Bedrock 服务。',
@@ -1466,7 +2079,7 @@ export default {
     smallFastModelLabel: '小型快速模型',
     smallFastModelPlaceholder: '例如：anthropic.claude-3-haiku-20240307-v1:0',
     smallFastModelDescription: '用于简单任务的快速模型，支持 inference profile ID 或 ARN',
-    
+
     // Azure OpenAI 配置
     azureOpenAIConfig: 'Azure OpenAI 配置',
     azureOpenAIDescription: '请配置 Azure OpenAI 服务的连接信息和部署详情。',
@@ -1486,10 +2099,11 @@ export default {
     azureAccountSettings: '账户设置',
     azureIsActive: '启用此账户',
     azureSchedulable: '允许调度',
-    
+
     // Claude Console 模型映射
     claudeConsoleModels: '模型映射',
-    claudeConsoleModelsDescription: '配置模型请求的映射关系，将客户端请求的模型名映射为实际调用的模型。',
+    claudeConsoleModelsDescription:
+      '配置模型请求的映射关系，将客户端请求的模型名映射为实际调用的模型。',
     modelMappingFrom: '请求模型',
     modelMappingFromPlaceholder: '例如：claude-3-5-sonnet-20241022',
     modelMappingTo: '实际模型',
@@ -1499,7 +2113,7 @@ export default {
     presetMappings: '预设映射',
     modelMappingExample: '示例：claude-3-5-sonnet-20241022 → claude-3-5-sonnet-latest',
     noMappingsConfigured: '暂未配置映射，将直接使用原模型名',
-    
+
     // Setup Token 授权流程详细步骤
     setupTokenAuth: 'Setup Token 授权',
     setupTokenAuthDescription: 'Setup Token 是安全的授权方式，通过临时授权码完成账户验证。',
@@ -1518,7 +2132,7 @@ export default {
     setupTokenAuthCodeDescription: '完成授权后，将显示类似 "auth_code_xxx" 格式的授权码',
     setupTokenSmartDetection: '智能检测',
     setupTokenSmartDetectionDesc: '支持直接粘贴完整的回调URL，系统会自动提取授权码',
-    
+
     // 更多错误消息和验证文本
     unsupportedPlatform: '不支持的平台',
     accountCreationFailed: '账户创建失败',
@@ -1530,7 +2144,7 @@ export default {
     unknownError: '未知错误',
     modelMappingExistsInfo: '模型映射已存在',
     modelAddedMapping: '已添加映射',
-    
+
     // 限流和配额管理
     rateLimitSettings: '限流设置',
     enableRateLimit: '启用速率限制',
@@ -1544,13 +2158,13 @@ export default {
     quotaResetTimePlaceholder: '例如：00:00',
     quotaResetDescription: '每天配额重置的时间点',
     currentDailyUsage: '今日已用',
-    
+
     // 高级设置
     advancedSettings: '高级设置',
     customUserAgent: '自定义 User-Agent',
     customUserAgentPlaceholder: '留空使用默认 User-Agent...',
     userAgentDescription: '用于请求时的 User-Agent 标识',
-    
+
     // 通用提示和状态
     notSet: '未设置',
     unlimited: '无限制',
@@ -1561,7 +2175,7 @@ export default {
     optional: '可选',
     required: '必填',
     recommended: '推荐',
-    
+
     // 额外的操作按钮
     testConnection: '测试连接',
     testing: '测试中...',
@@ -1571,21 +2185,24 @@ export default {
     validating: '验证中...',
     save: '保存',
     saving: '保存中...',
-    
+
     // 使用情况和统计
     usageStats: '使用统计',
     loadingUsage: '加载使用情况...',
     usageLoadFailed: '使用情况加载失败',
-    
+
     // Gemini 项目 ID 详细说明
     geminiProjectIdRequired: 'Google Cloud/Workspace 账号需要提供项目 ID',
-    geminiProjectIdDetail: '某些 Google 账号（特别是绑定了 Google Cloud 的账号）会被识别为 Workspace 账号，需要提供额外的项目 ID。',
+    geminiProjectIdDetail:
+      '某些 Google 账号（特别是绑定了 Google Cloud 的账号）会被识别为 Workspace 账号，需要提供额外的项目 ID。',
     geminiHowToGetProjectId: '如何获取项目 ID：',
     geminiVisitConsole: '访问',
     geminiCopyProjectId: '复制\u9879目 ID（Project ID）\uff0c通常是字符串格式',
-    geminiProjectIdWarning: '⚠️ 注意：要复制项目 ID（Project ID），不要复制项目编号（Project Number）！',
-    geminiPersonalAccountTip: '\u63d0示\uff1a如果您的账号是普通个人账号（未绑定 Google Cloud），请留空此字段。',
-    
+    geminiProjectIdWarning:
+      '⚠️ 注意：要复制项目 ID（Project ID），不要复制项目编号（Project Number）！',
+    geminiPersonalAccountTip:
+      '\u63d0示\uff1a如果您的账号是普通个人账号（未绑定 Google Cloud），请留空此字段。',
+
     // AWS 区域参考
     awsRegionReference: '常用 AWS 区域参考：',
     awsRegionEastUS: 'us-east-1 (美国东部)',
@@ -1595,52 +2212,52 @@ export default {
     awsRegionAsiaTokyo: 'ap-northeast-1 (东京)',
     awsRegionEuropeFrankfurt: 'eu-central-1 (法兰克福)',
     awsRegionInputTip: '💡 请输入完整的区域代码，如 us-east-1',
-    
+
     // Bedrock 模型说明
     bedrockModelConfigDesc: 'Bedrock 模型配置说明：',
     bedrockSupportsInferenceProfile: '支持 Inference Profile ID（推荐）',
     bedrockSupportsARN: '支持 Application Inference Profile ARN',
     bedrockCommonModel: '常用模型：us.anthropic.claude-sonnet-4-20250514-v1:0',
     bedrockEmptyUsesDefault: '留空将使用系统配置的默认模型',
-    
+
     // Azure OpenAI 模型选择
     azureModelSelectionDesc: '选择此部署支持的模型类型',
-    
+
     // 限流机制
     rateLimitMechanism: '限流机制',
     enableRateLimitMechanism: '启用限流机制',
     rateLimitDescription2: '启用后，当账号返回429错误时将暂停调度一段时间',
-    
+
     // Claude Console 特定字段
     claudeConsoleFields: 'Claude Console 特定字段',
     quotaManagement: '额度管理',
     modelMappingTable: '模型映射表',
     modelMappingTableOptional: '模型映射表 (可选)',
     addModelMapping: '添加模型映射',
-    
+
     // Claude 订阅类型
     subscriptionType: '订阅类型',
-    
+
     // Setup Token 授权
     setupTokenAuth: 'Setup Token 授权',
     claudeSetupTokenAuth: 'Claude Setup Token 授权',
     setupTokenAuthSteps: '请按照以下步骤通过 Setup Token 完成 Claude 账户的授权：',
     generateSetupTokenLink: '生成 Setup Token 授权链接',
     generating: '生成中...',
-    
+
     // 按钮和操作
     verifying: '验证中...',
     completeAuth: '完成授权',
     updating: '更新中...',
     update: '更新',
-    
+
     // 错误消息
     generateSetupTokenFailed: '生成Setup Token授权链接失败',
     copyFailed: '复制失败，请手动复制',
     setupTokenAuthFailed: 'Setup Token授权失败，请检查授权码是否正确',
     accountCreationFailed: '账户创建失败',
     accountCreationError: '账户创建失败:',
-    
+
     // 页面结构注释
     stepIndicator: '步骤指示器',
     step1BasicInfo: '步骤1: 基本信息和代理设置',
@@ -1650,7 +2267,7 @@ export default {
     geminiProjectId: 'Gemini 项目 ID 字段',
     bedrockFields: 'Bedrock 特定字段',
     azureOpenAIFields: 'Azure OpenAI 特定字段',
-    
+
     // 验证消息
     nameRequired: '请填写账户名称',
     apiUrlRequired: '请填写 API URL',
@@ -1663,11 +2280,12 @@ export default {
     dailyQuotaDescription: '设置每日使用额度，0 表示不限制',
     quotaResetTime: '额度重置时间',
     quotaResetTimeDescription: '每日自动重置额度的时间',
-    modelMappingDescription: '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
+    modelMappingDescription:
+      '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
     rateLimitDurationMinutes: '限流时间 (分钟)',
     rateLimitDefaultMinutes: '默认60分钟',
     rateLimitPauseDesc: '账号被限流后暂停调度的时间（分钟）',
-    
+
     // 额度管理
     quotaManagementFields: '额度管理字段',
     dailyQuotaLimitDollar: '每日额度限制 ($)',
@@ -1675,34 +2293,38 @@ export default {
     dailyQuotaDesc: '设置每日使用额度，0 表示不限制',
     quotaResetTime: '额度重置时间',
     quotaResetTimeDesc: '每日自动重置额度的时间',
-    
+
     // 模型映射
     modelMappingOptional: '模型映射表 (可选)',
-    modelMappingDesc: '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
+    modelMappingDesc:
+      '留空表示支持所有模型且不修改请求。配置映射后，左侧模型会被识别为支持的模型，右侧是实际发送的模型。',
     originalModelName: '原始模型名称',
     mappedModelName: '映射后的模型名称',
     addModelMappingBtn: '添加模型映射',
     customUserAgentOptional: '自定义 User-Agent (可选)',
     customUserAgentDesc: '留空时将自动使用客户端的 User-Agent，仅在需要固定特定 UA 时填写',
     userAgentPassthrough: '留空则透传客户端 User-Agent',
-    
+
     // Claude 订阅类型
     claudeSubscriptionType: '订阅类型',
     claudeProLimitation: 'Pro 账号不支持 Claude Opus 4 模型',
-    
+
     // Claude 高级选项
     claudeAutoStopScheduling: '5小时使用量接近限制时自动停止调度',
-    claudeAutoStopDesc: '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
+    claudeAutoStopDesc:
+      '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
     claudeUseUnifiedUA: '使用统一 Claude Code 版本',
     claudeUnifiedUADesc: '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
     claudeCurrentUnifiedVersion: '💡 当前统一版本：',
     claudeWaitingCapture: '⏳ 等待从 Claude Code 客户端捕获 User-Agent',
-    claudeCaptureHint: '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户， 或联系开发者检查 User-Agent 格式是否发生变化',
+    claudeCaptureHint:
+      '💡 提示：如果长时间未能捕获，请确认有 Claude Code 客户端正在使用此账户， 或联系开发者检查 User-Agent 格式是否发生变化',
     claudeUseUnifiedClientId: '使用统一的客户端标识',
-    claudeUnifiedClientIdDesc: '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
+    claudeUnifiedClientIdDesc:
+      '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
     claudeClientIdLabel: '客户端标识 ID',
     claudeClientIdDesc: '此ID将替换请求中的user_id客户端部分，保留session部分用于粘性会话',
-    
+
     // Setup Token 流程
     setupTokenAuthProcess: 'Claude Setup Token 授权',
     setupTokenProcessDesc: '请按照以下步骤通过 Setup Token 完成 Claude 账户的授权：',
@@ -1711,21 +2333,21 @@ export default {
     setupTokenGenerating: '生成中...',
     setupTokenGenerateBtn: '生成 Setup Token 授权链接',
     setupTokenCopyTitle: '复制链接',
-    
+
     // 步骤指示器
     stepIndicator: '步骤指示器',
     step1BasicInfo: '步骤1: 基本信息和代理设置',
     step2OAuth: '步骤2: OAuth授权',
     step2SetupToken: '步骤2: Setup Token授权',
-    
+
     // 分组选择器
     groupSelector: '分组选择器',
     multiGroupInterface: '多选分组界面',
     createNewGroupOption: '新建分组选项',
-    
+
     // 手动输入Token提示
     credentialsFromFile: '文件中的凭证。',
-    
+
     // Placeholder 文本
     originalModelNamePlaceholder: '原始模型名称',
     mappedModelNamePlaceholder: '映射后的模型名称',
@@ -1734,7 +2356,7 @@ export default {
     leaveEmptyNoUpdate: '留空表示不更新',
     leaveEmptyNoUpdateKey: '留空表示不更新 API Key',
     leaveEmptyNoUpdateToken: '留空表示不更新...',
-    
+
     // 标签和描述
     customUserAgentOptional: '自定义 User-Agent (可选)',
     clientIdLabel: '客户端标识 ID',
@@ -1744,15 +2366,16 @@ export default {
     newAccessTokenLabel: '新的 Access Token',
     newRefreshTokenLabel: '新的 Refresh Token',
     updateTokenLabel: '更新 Token',
-    
+
     // 按钮文本
     regenerateBtn: '重新生成',
     previousStepBtn: '上一步',
-    
+
     // 描述性文本
     claudeProLimitation: 'Pro 账号不支持 Claude Opus 4 模型',
     claude5HourLimitDesc: '5小时使用量接近限制时自动停止调度',
-    claude5HourLimitExplanation: '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
+    claude5HourLimitExplanation:
+      '当系统检测到账户接近5小时使用限制时，自动暂停调度该账户。进入新的时间窗口后会自动恢复调度。',
     useUnifiedClaudeVersion: '使用统一 Claude Code 版本',
     unifiedVersionDesc: '开启后将使用从真实 Claude Code 客户端捕获的统一 User-Agent，提高兼容性',
     currentUnifiedVersion: '💡 当前统一版本：',
@@ -1762,7 +2385,7 @@ export default {
     useUnifiedClientId: '使用统一的客户端标识',
     unifiedClientIdDesc: '开启后将使用固定的客户端标识，使所有请求看起来来自同一个客户端，减少特征',
     clientIdReplaceDesc: '此ID将替换请求中的user_id客户端部分，保留session部分用于粘性会话',
-    
+
     // OAuth 步骤文本
     step1GenerateAuthLink: '步骤1: 生成授权链接',
     clickButtonGenerate: '点击下方按钮生成授权链接',
@@ -1775,30 +2398,31 @@ export default {
     inputAuthCodeTitle: '输入 Authorization Code',
     authCompleteDesc: '授权完成后，从返回页面复制 Authorization Code，并粘贴到下方输入框：',
     pasteAuthCodeDesc: '请粘贴从 Claude Code 授权页面复制的 Authorization Code',
-    
+
     // AWS 区域参考
     awsRegionRef: '常用 AWS 区域参考：',
-    
-    // 错误信息
-    apiKeyRequired: '请填写 API Key',
+
+    // Error messages
+    apiKeyRequiredError: '请填写 API Key',
     refreshTokenRequired: '请填写 Refresh Token',
     accessTokenRequired: '请填写 Access Token',
     copyFailedManual: '复制失败，请手动复制',
-    
+
     // 表单描述
-    modelSupportDesc: '留空表示支持所有模型。如果指定模型，请求中的模型不在列表内将不会调度到此账号',
+    modelSupportDesc:
+      '留空表示支持所有模型。如果指定模型，请求中的模型不在列表内将不会调度到此账号',
     modelTypeSelectionDesc: '选择此部署支持的模型类型',
     userAgentDesc: '留空时将自动使用客户端的 User-Agent，仅在需要固定特定 UA 时填写',
-    
+
     // 基础标签
     apiUrlLabel: 'API URL',
     apiUrlRequired: 'API URL *',
     apiKeyLabel: 'API Key',
     apiKeyRequired: 'API Key *',
-    
+
     // 更多缺失的翻译键
     copyLinkTooltip: '复制链接',
-    
+
     // Claude 订阅类型显示
     claudeMaxDisplay: 'Claude Max',
     claudeProDisplay: 'Claude Pro'
@@ -1810,29 +2434,30 @@ export default {
     claudeAccountAuth: 'Claude 账户授权',
     geminiAccountAuth: 'Gemini 账户授权',
     openaiAccountAuth: 'OpenAI 账户授权',
-    
+
     // 流程说明
     claudeAuthDescription: '请按照以下步骤完成 Claude 账户的授权：',
     geminiAuthDescription: '请按照以下步骤完成 Gemini 账户的授权：',
     openaiAuthDescription: '请按照以下步骤完成 OpenAI 账户的授权：',
-    
+
     // 步骤标题
     step1Title: '点击下方按钮生成授权链接',
     step2Title: '在浏览器中打开链接并完成授权',
     step3Title: '输入 Authorization Code',
     step3TitleOpenAI: '输入授权链接或 Code',
-    
+
     // 步骤描述
     step2Description: '请在新标签页中打开授权链接，登录您的 Claude 账户并授权。',
     step2DescriptionGemini: '请在新标签页中打开授权链接，登录您的 Gemini 账户并授权。',
     step2DescriptionOpenAI: '请在新标签页中打开授权链接，登录您的 OpenAI 账户并授权。',
-    
+
     step3Description: '授权完成后，页面会显示一个',
     step3DescriptionMiddle: '，请将其复制并粘贴到下方输入框：',
-    step3DescriptionGemini: '授权完成后，页面会显示一个 Authorization Code，请将其复制并粘贴到下方输入框：',
+    step3DescriptionGemini:
+      '授权完成后，页面会显示一个 Authorization Code，请将其复制并粘贴到下方输入框：',
     step3DescriptionOpenAI: '授权完成后，当页面地址变为',
     step3DescriptionOpenAIMiddle: '时：',
-    
+
     // 按钮文本
     generating: '生成中...',
     generateAuthLink: '生成授权链接',
@@ -1840,36 +2465,37 @@ export default {
     previousStep: '上一步',
     completeAuth: '完成授权',
     verifying: '验证中...',
-    
+
     // 占位符
     authCodePlaceholder: '粘贴从Claude页面获取的Authorization Code...',
     authCodePlaceholderGemini: '粘贴从Gemini页面获取的Authorization Code...',
-    authCodePlaceholderOpenAI: '方式1：复制完整的链接（http://localhost:1455/auth/callback?code=...)\n方式2：仅复制 code 参数的值\n系统会自动识别并提取所需信息',
-    
+    authCodePlaceholderOpenAI:
+      '方式1：复制完整的链接（http://localhost:1455/auth/callback?code=...)\n方式2：仅复制 code 参数的值\n系统会自动识别并提取所需信息',
+
     // 标签
     authorizationCode: 'Authorization Code',
     authLinkOrCode: '授权链接或 Code',
-    
+
     // 提示信息
     copyLinkTooltip: '复制链接',
     authCodeHint: '请粘贴从Claude页面复制的Authorization Code',
     authCodeHintGemini: '请粘贴从Gemini页面复制的Authorization Code',
-    
+
     // 注意事项
     proxyNotice: '注意：',
     proxyNoticeText: '如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。',
-    
+
     // OpenAI 特有提示
     openaiImportantNote: '重要提示：',
     openaiLoadingNote: '授权后页面可能会加载较长时间，请耐心等待。',
     openaiAddressNote: '当浏览器地址栏变为',
     openaiAddressNoteMiddle: '开头时，表示授权已完成。',
-    
+
     openaiTip: '提示：',
     openaiTipText: '您可以直接复制整个链接或仅复制 code 参数值，系统会自动识别。',
     openaiLinkExample: '• 完整链接示例：',
     openaiCodeExample: '• 仅 Code 示例：',
-    
+
     // 成功和错误消息
     successExtractCode: '成功提取授权码！',
     errorCodeNotFound: 'URL 中未找到授权码参数，请检查链接是否正确',
diff --git a/web/admin-spa/src/i18n/locales/zh-tw.js b/web/admin-spa/src/i18n/locales/zh-tw.js
index ff3ef2b5..d7a378fb 100644
--- a/web/admin-spa/src/i18n/locales/zh-tw.js
+++ b/web/admin-spa/src/i18n/locales/zh-tw.js
@@ -24,7 +24,7 @@ export default {
     userMenu: '用戶選單',
     logout: '退出登錄',
     settings: '系統設置',
-    
+
     // Version related
     currentVersion: '當前版本',
     newVersionAvailable: '有新版本可用',
@@ -34,10 +34,10 @@ export default {
     checkingUpdate: '檢查更新中...',
     alreadyLatest: '當前已是最新版本',
     checkUpdate: '檢查更新',
-    
+
     // User menu items
     changeAccountInfo: '修改帳戶資訊',
-    
+
     // Change password modal
     changePasswordModal: {
       title: '修改帳戶資訊',
@@ -55,7 +55,7 @@ export default {
       confirmPasswordPlaceholder: '請再次輸入新密碼',
       saving: '保存中...',
       save: '保存修改',
-      
+
       // Messages
       passwordMismatch: '兩次輸入的密碼不一致',
       passwordTooShort: '新密碼長度至少8位',
@@ -64,7 +64,7 @@ export default {
       changeFailed: '修改失敗',
       changePasswordFailed: '修改密碼失敗'
     },
-    
+
     // Logout
     logoutConfirm: '確定要退出登錄嗎？',
     logoutSuccess: '已安全退出'
@@ -79,7 +79,7 @@ export default {
     timeRange: '統計時間範圍',
     today: '今日',
     thisMonth: '本月',
-    
+
     // API Key Input
     usageStatsQuery: '使用統計查詢',
     apiKeyDescription: '查詢您的 API Key 使用情況和統計資料',
@@ -90,7 +90,7 @@ export default {
     singleModeTitle: '單一模式',
     aggregateModeTitle: '彙整模式',
     queryButton: '查詢',
-    
+
     // Stats Overview
     batchQuerySummary: '批次查詢概要',
     apiKeyInfo: 'API Key 資訊',
@@ -101,13 +101,13 @@ export default {
     totalTokens: '總 Token 數',
     totalCost: '總費用',
     individual: '個',
-    
+
     // Aggregated Stats Card
     usageRatio: '使用占比',
     requests: '次',
     otherKeys: '其他',
     keys: 'Keys',
-    
+
     // Model Usage Stats
     modelUsageStats: '模型使用統計',
     loadingModelStats: '載入模型統計資料中...',
@@ -118,14 +118,14 @@ export default {
     cacheCreateTokens: '快取建立',
     cacheReadTokens: '快取讀取',
     noModelData: '暫無{period}模型使用資料',
-    
+
     // Token Distribution
     tokenDistribution: 'Token 使用分佈',
     inputToken: '輸入 Token',
     outputToken: '輸出 Token',
     cacheCreateToken: '快取建立 Token',
     cacheReadToken: '快取讀取 Token',
-    
+
     // Limit Config
     limitConfig: '限制設定',
     limitConfigAggregate: '限制設定（彙整查詢模式）',
@@ -138,7 +138,7 @@ export default {
     usageToday: '今日使用',
     usageThisMonth: '本月使用',
     remaining: '剩餘',
-    
+
     // Stats Overview - Additional keys
     name: '名稱',
     status: '狀態',
@@ -165,7 +165,7 @@ export default {
     monthlyTokens: '本月Token數',
     monthlyCost: '本月費用',
     monthlyInputTokens: '本月輸入Token',
-    
+
     // Limit Config - Additional keys
     dailyCostLimit: '每日費用限制',
     concurrencyLimit: '並發限制',
@@ -187,25 +187,26 @@ export default {
     orRelationshipRequests: '請求次數和費用限制為「或」的關係，任一達到限制即觸發限流',
     orRelationshipTokens: '請求次數和Token使用量為「或」的關係，任一達到限制即觸發限流',
     onlyRequestsLimit: '僅限制請求次數',
-    
+
     // Token Distribution - Additional keys
     totalAmount: '總計',
     todayTotal: '今日總計',
     monthlyTotal: '本月總計',
-    
+
     // Additional missing keys
     usageRatioOnlyInMultiMode: '使用占比僅在多Key查詢時顯示',
     noData: '暫無資料',
-    
+
     // ApiKeyInput placeholders and texts
     apiKeyPlaceholder: '請輸入您的 API Key (cr_...)',
     apiKeysPlaceholder: '請輸入您的 API Keys，支援以下格式：\ncr_xxx\ncr_yyy\n或\ncr_xxx, cr_yyy',
     clearInput: '清空輸入',
     securityNoticeSingle: '您的 API Key 僅用於查詢自己的統計資料，不會被儲存或用於其他用途',
-    securityNoticeMulti: '您的 API Keys 僅用於查詢統計資料，不會被儲存。彙整模式下部分個體化資訊將不顯示。',
+    securityNoticeMulti:
+      '您的 API Keys 僅用於查詢統計資料，不會被儲存。彙整模式下部分個體化資訊將不顯示。',
     multiKeyTip: '提示：最多支援同時查詢 30 個 API Keys。使用 Ctrl+Enter 快速查詢。'
   },
-  
+
   // Login page
   login: {
     title: '管理後台',
@@ -216,7 +217,7 @@ export default {
     loginButton: '登錄',
     loggingIn: '登錄中...'
   },
-  
+
   // Dashboard page
   dashboard: {
     // Main stats cards
@@ -231,7 +232,7 @@ export default {
     totalRequests: '總請求',
     systemStatus: '系統狀態',
     uptime: '運行時間',
-    
+
     // Platform accounts tooltip
     claudeAccount: 'Claude: {total} 個 (正常: {normal})',
     consoleAccount: 'Console: {total} 個 (正常: {normal})',
@@ -239,7 +240,7 @@ export default {
     bedrockAccount: 'Bedrock: {total} 個 (正常: {normal})',
     openaiAccount: 'OpenAI: {total} 個 (正常: {normal})',
     azureOpenaiAccount: 'Azure OpenAI: {total} 個 (正常: {normal})',
-    
+
     // Token stats cards
     todayToken: '今日Token',
     totalTokenConsumption: '總Token消耗',
@@ -247,7 +248,7 @@ export default {
     outputTokens: '輸出',
     cacheCreateTokens: '快取建立',
     cacheReadTokens: '快取讀取',
-    
+
     // Real-time metrics
     realtimeRPM: '即時RPM',
     realtimeTPM: '即時TPM',
@@ -255,10 +256,10 @@ export default {
     tokensPerMinute: '每分钟Token數',
     historicalData: '歷史資料',
     minutes: '分钟',
-    
+
     // Charts section
     modelDistributionAndTrend: '模型使用分佈與Token使用趋勢',
-    
+
     // Date filter presets
     today: '今日',
     yesterday: '昨日',
@@ -268,35 +269,35 @@ export default {
     lastWeek: '上週',
     thisMonth: '本月',
     lastMonth: '上月',
-    
+
     // Granularity buttons
     byDay: '按日',
     byHour: '按小時',
-    
+
     // Date picker
     startDatePlaceholder: '開始日期',
     endDatePlaceholder: '結束日期',
     dateSeparator: '至',
     maxHours24: '最多24小時',
-    
+
     // Auto refresh controls
     autoRefresh: '自動刷新',
     refresh: '刷新',
     refreshing: '刷新中',
     refreshDataNow: '立即刷新資料',
-    
+
     // Charts
     tokenUsageDistribution: 'Token使用分佈',
     detailedStatistics: '詳細統計資料',
     noModelUsageData: '暫無模型使用資料',
-    
+
     // Table headers
     model: '模型',
     requestCount: '請求數',
     totalTokens: '總Token',
     cost: '費用',
     percentage: '占比',
-    
+
     // Trend charts
     tokenUsageTrend: 'Token使用趋勢',
     apiKeysUsageTrend: 'API Keys 使用趋勢',
@@ -304,7 +305,7 @@ export default {
     tokenCount: 'Token 數量',
     totalApiKeysCount: '共 {count} 個 API Key',
     showingTop10: '共 {count} 個 API Key，顯示使用量前 10 個',
-    
+
     // Chart labels
     inputTokensLabel: '輸入Token',
     outputTokensLabel: '輸出Token',
@@ -317,12 +318,12 @@ export default {
     tokenQuantity: 'Token數量',
     requestsQuantity: '請求次數'
   },
-  
+
   // Accounts page
   accounts: {
     title: '帳戶管理',
     description: '管理您的 Claude、Gemini、OpenAI 和 Azure OpenAI 帳戶及代理配置',
-    
+
     // Filters and sorting
     sortBy: '選擇排序',
     selectPlatform: '選擇平台',
@@ -330,14 +331,14 @@ export default {
     refresh: '刷新',
     refreshTooltip: '刷新資料 (Ctrl/⌘+點擊強制刷新所有快取)',
     addAccount: '添加帳戶',
-    
+
     // Sort options
     sortByName: '按名稱排序',
     sortByDailyTokens: '按今日Token排序',
     sortByDailyRequests: '按今日請求數排序',
     sortByTotalTokens: '按總Token排序',
     sortByLastUsed: '按最後使用排序',
-    
+
     // Platform options
     allPlatforms: '所有平台',
     claudePlatform: 'Claude',
@@ -346,16 +347,16 @@ export default {
     openaiPlatform: 'OpenAi',
     azureOpenaiPlatform: 'Azure OpenAI',
     bedrockPlatform: 'Bedrock',
-    
+
     // Group options
     allAccounts: '所有帳戶',
     ungroupedAccounts: '未分組帳戶',
-    
+
     // Loading states
     loadingAccounts: '正在載入帳戶...',
     noAccounts: '暫無帳戶',
     noAccountsHint: '點擊上方按鈕添加您的第一個帳戶',
-    
+
     // Table headers
     name: '名稱',
     platformType: '平台/類型',
@@ -366,20 +367,20 @@ export default {
     sessionWindow: '會話窗口',
     lastUsed: '最後使用',
     actions: '操作',
-    
+
     // Account types
     dedicated: '專屬',
     groupScheduling: '分組調度',
     shared: '共享',
     belongsToGroup: '所屬分組: {name}',
-    
+
     // Platform labels
     unknown: '未知',
     apiKey: 'API Key',
     oauth: 'OAuth',
     setup: 'Setup',
     aws: 'AWS',
-    
+
     // Account status
     normal: '正常',
     abnormal: '異常',
@@ -388,15 +389,15 @@ export default {
     rateLimited: '限流中',
     notSchedulable: '不可調度',
     bound: '綁定: {count} 個API Key',
-    
+
     // Proxy status
     noProxy: '無代理',
-    
+
     // Usage statistics
     requests: '次',
     noData: '暫無資料',
     averageRpm: '平均 {rpm} RPM',
-    
+
     // Session window tooltip
     sessionWindowTooltip: {
       title: '會話窗口進度表示5小時窗口的時間進度',
@@ -404,16 +405,16 @@ export default {
       warning: '警告：接近限制',
       rejected: '拒絕：達到速率限制'
     },
-    
+
     // Session window status
     remaining: '剩餘 {time}',
     ended: '已結束',
-    
+
     // Console quota
     quotaProgress: '額度進度',
     remainingQuota: '剩餘 $${amount}',
     reset: '重置 {time}',
-    
+
     // Mobile view labels
     dailyUsageLabel: '今日使用',
     sessionWindowLabel: '會話窗口',
@@ -422,7 +423,7 @@ export default {
     priorityLabel: '優先級',
     neverUsed: '從未使用',
     sessionWindowTooltipMobile: '會話窗口進度不代表使用量，僅表示距離下一個5小時窗口的剩餘時間',
-    
+
     // Action buttons
     resetStatus: '重置狀態',
     resetting: '重置中...',
@@ -437,7 +438,7 @@ export default {
     deleteTooltip: '刪除帳戶',
     pause: '暫停',
     enable: '啟用',
-    
+
     // Time formatting
     justNow: '剛剛',
     minutesAgo: '{minutes} 分鐘前',
@@ -448,44 +449,46 @@ export default {
     minutesOnly: '{minutes}分鐘',
     daysAndHours: '{days}天{hours}小時',
     daysOnly: '{days}天',
-    
+
     // Rate limit time
     rateLimitTime: '({time})',
-    
+
     // Messages and confirmations
     resetStatusConfirmTitle: '重置帳戶狀態',
-    resetStatusConfirmMessage: '確定要重置此帳戶的所有異常狀態嗎？這將清除限流狀態、401錯誤計數等所有異常標記。',
+    resetStatusConfirmMessage:
+      '確定要重置此帳戶的所有異常狀態嗎？這將清除限流狀態、401錯誤計數等所有異常標記。',
     resetStatusConfirmButton: '確定重置',
     resetStatusCancelButton: '取消',
     statusResetSuccess: '帳戶狀態已重置',
     statusResetFailed: '狀態重置失敗',
-    
+
     deleteAccountTitle: '刪除帳戶',
     deleteAccountMessage: '確定要刪除帳戶 "{name}" 嗎？\n\n此操作不可恢復。',
     deleteAccountButton: '刪除',
     deleteAccountCancel: '取消',
-    cannotDeleteBoundAccount: '無法刪除此帳號，有 {count} 個API Key綁定到此帳號，請先解綁所有API Key',
+    cannotDeleteBoundAccount:
+      '無法刪除此帳號，有 {count} 個API Key綁定到此帳號，請先解綁所有API Key',
     accountDeleted: '帳戶已刪除',
     deleteFailed: '刪除失敗',
-    
+
     enabledScheduling: '已啟用調度',
     disabledScheduling: '已禁用調度',
     schedulingToggleFailed: '切換調度狀態失敗',
     unsupportedAccountType: '該帳戶類型暫不支持調度控制',
     operationFailed: '操作失敗',
-    
+
     accountCreateSuccess: '帳戶創建成功',
     accountUpdateSuccess: '帳戶更新成功',
     loadAccountsFailed: '載入帳戶失敗',
     unsupportedAccountTypeReset: '不支持的帳戶類型',
-    
+
     // Schedulable reasons
     invalidApiKey: 'API Key無效或已過期（401錯誤）',
     serviceOverload: '服務過載（529錯誤）',
     rateLimitTriggered: '觸發限流（429錯誤）',
     authFailed: '認證失敗（401錯誤）',
     manualStop: '手動停止調度',
-    
+
     // Account type display
     claudeMax: 'Claude Max',
     claudePro: 'Claude Pro',
@@ -499,18 +502,18 @@ export default {
     // Page title and description
     title: 'API Keys 管理',
     description: '管理和監控您的 API 密鑰',
-    
+
     // Tab navigation
     activeTab: '活躍 API Keys',
     deletedTab: '已刪除 API Keys',
-    
+
     // Toolbar and actions
     refresh: '重新整理',
     refreshTooltip: '重新整理 API Keys 清單（Ctrl+點擊強制重新整理）',
     createNew: '建立新 Key',
     bulkEdit: '編輯已選取',
     bulkDelete: '刪除已選取',
-    
+
     // Table headers
     name: '名稱',
     tags: '標籤',
@@ -519,7 +522,7 @@ export default {
     createdAt: '建立時間',
     expiresAt: '過期時間',
     actions: '操作',
-    
+
     // Filter options
     timeRange: {
       today: '今日',
@@ -527,7 +530,7 @@ export default {
       month: '本月',
       all: '全部時間'
     },
-    
+
     // Status
     active: '活躍',
     disabled: '停用',
@@ -535,7 +538,7 @@ export default {
     expiringSoon: '即將過期',
     neverExpire: '永不過期',
     notActivated: '未啟用',
-    
+
     // Usage statistics
     dailyCost: '今日費用',
     totalCost: '總費用',
@@ -547,26 +550,26 @@ export default {
     daysAgo: '{days} 天前',
     justNow: '剛剛',
     requests: '次',
-    
+
     // Search and filter
     searchPlaceholder: '搜尋名稱...',
     searchPlaceholderWithOwner: '搜尋名稱或擁有者...',
     allTags: '所有標籤',
     noTags: '無標籤',
-    
+
     // Binding information
     shared: '使用共享池',
     dedicated: '專屬',
     consoleAccount: 'Console賬戶',
     bindingWarning: '⚠️ 賬戶不存在',
-    
+
     // Limits and quotas
     dailyLimit: '每日費用',
     weeklyOpusLimit: 'Opus週費用',
     remainingQuota: '剩餘: ${amount}',
     reset: '重設於 {time}',
     quotaProgress: '配額進度',
-    
+
     // Model statistics
     modelStats: '模型使用分佈',
     modelStatsCount: '{count} 個模型',
@@ -579,14 +582,14 @@ export default {
     noModelData: '暫無模型使用資料',
     resetFilter: '重新整理',
     adjustTimeRange: '嘗試調整時間範圍或點擊重新整理重新載入資料',
-    
+
     // Date filter
     dateFilter: {
       today: '今日',
       days7: '7天',
       days30: '30天'
     },
-    
+
     // Actions
     viewDetails: '查看詳細統計',
     edit: '編輯',
@@ -595,12 +598,12 @@ export default {
     disable: '停用',
     copy: '複製',
     copyStatsLink: '複製統計頁面連結',
-    
+
     // Pagination
     totalRecords: '共 {count} 條記錄',
     pageSize: '每頁顯示',
     records: '條',
-    
+
     // Empty states
     noApiKeys: '暫無 API Keys',
     noApiKeysHint: '點擊上方按鈕建立您的第一個 API Key',
@@ -609,7 +612,7 @@ export default {
     loading: '正在載入 API Keys...',
     loadingDeleted: '正在載入已刪除的 API Keys...',
     loadingModelStats: '載入模型統計...',
-    
+
     // Deleted keys table
     creator: '建立者',
     deletedBy: '刪除者',
@@ -617,21 +620,23 @@ export default {
     canRestore: '恢復',
     permanentDelete: '徹底刪除',
     clearAllDeleted: '清空所有已刪除',
-    
+
     // User types
     admin: '管理員',
     user: '用戶',
     unknown: '未知',
     system: '系統',
-    
+
     // Confirmation dialogs
     confirmDisable: '確定要停用 API Key "{name}" 嗎？停用後所有使用此 Key 的請求將返回 401 錯誤。',
     confirmDelete: '確定要刪除這個 API Key 嗎？此操作不可恢復。',
     confirmBatchDelete: '確定要刪除已選取的 {count} 個 API Key 嗎？此操作不可恢復。',
     confirmRestore: '確定要恢復這個 API Key 嗎？恢復後可以重新使用。',
-    confirmPermanentDelete: '確定要徹底刪除這個 API Key 嗎？此操作不可恢復，所有相關資料將被永久刪除。',
-    confirmClearAll: '確定要徹底刪除全部 {count} 個已刪除的 API Keys 嗎？此操作不可恢復，所有相關資料將被永久刪除。',
-    
+    confirmPermanentDelete:
+      '確定要徹底刪除這個 API Key 嗎？此操作不可恢復，所有相關資料將被永久刪除。',
+    confirmClearAll:
+      '確定要徹底刪除全部 {count} 個已刪除的 API Keys 嗎？此操作不可恢復，所有相關資料將被永久刪除。',
+
     // Success messages
     keyActivated: 'API Key 已啟用',
     keyDisabled: 'API Key 已停用',
@@ -641,7 +646,7 @@ export default {
     allDeletedCleared: '已清空所有已刪除的 API Keys',
     linkCopied: '已複製統計頁面連結',
     expiryUpdated: '過期時間已更新',
-    
+
     // Error messages
     selectKeysFirst: '請先選擇要編輯的 API Keys',
     loadFailed: '載入 API Keys 失敗',
@@ -651,17 +656,554 @@ export default {
     deleteFailed: '刪除失敗',
     restoreFailed: '恢復失敗',
     clearFailed: '清空失敗',
-    
+
     // Tooltips and helpers
     editExpiry: '編輯過期時間',
     activationDays: '未啟用 ({days}天)',
     boundTo: '綁定到',
     belongsToGroup: '所屬分組: {name}',
-    
+
     // Batch operations
     batchSuccess: '成功處理 {count} 個項目',
     batchPartialFail: '{failed} 個處理失敗',
-    batchAllFailed: '所有項目處理失敗'
+    batchAllFailed: '所有項目處理失敗',
+
+    // Batch API Key Modal
+    batchApiKeyModal: {
+      title: '批量建立成功',
+      successMessage: '成功建立 {count} 個 API Key',
+      importantReminder: '重要提醒',
+      warningMessage:
+        '這是您唯一能看到所有 API Key 的機會。關閉此視窗後，系統將不再顯示完整的 API Key。請立即下載並妥善保存。',
+
+      // Statistics cards
+      createdCount: '建立數量',
+      baseName: '基礎名稱',
+      permissionScope: '權限範圍',
+      expiryTime: '過期時間',
+
+      // Permission texts
+      permissions: {
+        all: '全部服務',
+        claude: '僅 Claude',
+        gemini: '僅 Gemini',
+        unknown: '未知'
+      },
+
+      // Expiry time texts
+      neverExpire: '永不過期',
+      daysFormat: '{days}天',
+      weeksFormat: '{weeks}週',
+      monthsFormat: '{months}個月',
+      yearsFormat: '{years}年',
+
+      // Preview section
+      previewTitle: 'API Keys 預覽',
+      hide: '隱藏',
+      show: '顯示',
+      preview: '預覽',
+      maxDisplayNote: '（最多顯示前10個）',
+      moreKeysNote: '... 還有 {count} 個 API Key',
+
+      // Action buttons
+      downloadAll: '下載所有 API Keys',
+      alreadySaved: '我已保存',
+      directCloseTooltip: '直接關閉（不推薦）',
+
+      // File info
+      fileFormatInfo:
+        '下載的檔案格式為文字檔案（.txt），每行包含一個 API Key。請將檔案保存在安全的位置，避免洩露。',
+
+      // Confirmation dialogs
+      closeReminderTitle: '關閉提醒',
+      closeReminderMessage:
+        '關閉後將無法再次查看這些 API Key，請確保已經下載並妥善保存。\n\n確定要關閉嗎？',
+      confirmCloseButton: '確定關閉',
+      goBackDownloadButton: '返回下載',
+
+      directCloseTitle: '確定要關閉嗎？',
+      directCloseMessage: '您還沒有下載 API Keys，關閉後將無法再次查看。\n\n強烈建議您先下載保存。',
+      stillCloseButton: '仍然關閉',
+
+      directCloseFallbackMessage: '您還沒有下載 API Keys，關閉後將無法再次查看。\n\n確定要關閉嗎？',
+
+      // Success messages
+      downloadSuccess: 'API Keys 檔案已下載'
+    },
+
+    // Expiry Edit Modal
+    expiryEditModal: {
+      title: '修改過期時間',
+      subtitle: '為 "{name}" 設定新的過期時間',
+      currentStatus: '目前狀態',
+      notActivated: '未啟動',
+      activationDaysHint: '(啟動後 {days} 天過期)',
+      neverExpire: '永不過期',
+      expired: '已過期',
+      daysToExpire: '{days} 天後過期',
+      monthsToExpire: '{months} 個月後過期',
+      activateNow: '立即啟動',
+      activateButton: '立即啟動 (啟動後 {days} 天過期)',
+      activationInfo: '點選立即啟動此 API Key，啟動後將在 {days} 天後過期',
+      selectNewDuration: '選擇新的期限',
+      neverExpireOption: '永不過期',
+      oneDay: '1 天',
+      sevenDays: '7 天',
+      thirtyDays: '30 天',
+      ninetyDays: '90 天',
+      oneHundredEightyDays: '180 天',
+      threeSixtyFiveDays: '1 年',
+      twoYears: '2 年',
+      custom: '自訂',
+      selectDateAndTime: '選擇日期和時間',
+      selectFutureDateTime: '選擇一個未來的日期和時間作為過期時間',
+      newExpiryTime: '新的過期時間',
+      cancel: '取消',
+      saving: '儲存中...',
+      saveChanges: '儲存變更',
+      activateConfirmTitle: '啟動 API Key',
+      activateConfirmMessage: '確定要立即啟動此 API Key 嗎？啟動後將在 {days} 天後自動過期。',
+      confirmActivate: '確定啟動',
+      confirmCancel: '取消'
+    },
+
+    // Edit API Key Modal
+    editApiKeyModal: {
+      title: '編輯 API Key',
+
+      // Basic Info
+      name: '名稱',
+      namePlaceholder: '請輸入API Key名稱',
+      nameHint: '用於識別此 API Key 的用途',
+
+      // Owner
+      owner: '所有者',
+      adminLabel: '- 管理員',
+      ownerHint: '分配此 API Key 給指定使用者或管理員，管理員分配時不受使用者 API Key 數量限制',
+
+      // Tags
+      tags: '標籤',
+      selectedTags: '已選擇的標籤:',
+      clickToSelectTags: '點擊選擇已有標籤:',
+      createNewTag: '建立新標籤:',
+      newTagPlaceholder: '輸入新標籤名稱',
+      tagsHint: '用於標記不同團隊或用途，方便篩選管理',
+
+      // Rate Limit Settings
+      rateLimitTitle: '速率限制設定 (可選)',
+      rateLimitWindow: '時間視窗 (分鐘)',
+      rateLimitRequests: '請求次數限制',
+      rateLimitCost: '費用限制 (美元)',
+      rateLimitWindowHint: '時間段單位',
+      rateLimitRequestsHint: '視窗內最大請求',
+      rateLimitCostHint: '視窗內最大費用',
+      noLimit: '無限制',
+
+      // Usage Examples
+      usageExamples: '💡 使用範例',
+      example1: '範例1: 時間視窗=60，請求次數=1000 → 每60分鐘最多1000次請求',
+      example2: '範例2: 時間視窗=1，費用=0.1 → 每分鐘最多$0.1費用',
+      example3: '範例3: 視窗=30，請求=50，費用=5 → 每30分鐘50次請求且不超$5費用',
+
+      // Cost Limits
+      dailyCostLimit: '每日費用限制 (美元)',
+      dailyCostLimitPlaceholder: '0 表示無限制',
+      dailyCostHint: '設定此 API Key 每日的費用限制，超過限制將拒絕請求，0 或留空表示無限制',
+      weeklyOpusCostLimit: 'Opus 模型週費用限制 (美元)',
+      weeklyOpusHint:
+        '設定 Opus 模型的週費用限制（週一到週日），僅限 Claude 官方帳戶，0 或留空表示無限制',
+      custom: '自訂',
+
+      // Concurrency
+      concurrencyLimit: '並發限制',
+      concurrencyLimitPlaceholder: '0 表示無限制',
+      concurrencyHint: '設定此 API Key 可同時處理的最大請求數',
+
+      // Active Status
+      activeStatus: '啟動帳號',
+      activeStatusHint: '取消勾選將停用此 API Key，暫停所有請求，客戶端回傳 401 錯誤',
+
+      // Service Permissions
+      servicePermissions: '服務權限',
+      allServices: '全部服務',
+      claudeOnly: '僅 Claude',
+      geminiOnly: '僅 Gemini',
+      openaiOnly: '僅 OpenAI',
+      permissionsHint: '控制此 API Key 可以存取哪些服務',
+
+      // Account Binding
+      accountBinding: '專屬帳號綁定',
+      refreshAccounts: '重新整理帳號',
+      refreshing: '重新整理中...',
+      claudeAccount: 'Claude 專屬帳號',
+      geminiAccount: 'Gemini 專屬帳號',
+      openaiAccount: 'OpenAI 專屬帳號',
+      bedrockAccount: 'Bedrock 專屬帳號',
+      useSharedPool: '使用共享帳號池',
+      selectClaudeAccount: '請選擇Claude帳號',
+      selectGeminiAccount: '請選擇Gemini帳號',
+      selectOpenaiAccount: '請選擇OpenAI帳號',
+      selectBedrockAccount: '請選擇Bedrock帳號',
+      accountBindingHint: '修改綁定帳號將影響此API Key的請求路由',
+
+      // Model Restrictions
+      enableModelRestriction: '啟用模型限制',
+      restrictedModels: '限制的模型清單',
+      noRestrictedModels: '暫無限制的模型',
+      allCommonModelsRestricted: '所有常用模型已在限制清單中',
+      addRestrictedModelPlaceholder: '輸入模型名稱，按回車新增',
+      modelRestrictionHint: '設定此API Key無法存取的模型，例如：claude-opus-4-20250514',
+
+      // Client Restrictions
+      enableClientRestriction: '啟用客戶端限制',
+      allowedClients: '允許的客戶端',
+      clientRestrictionHint: '勾選允許使用此API Key的客戶端',
+
+      // Buttons
+      cancel: '取消',
+      save: '儲存修改',
+      saving: '儲存中...',
+
+      // Messages
+      costLimitConfirmTitle: '費用限制提醒',
+      costLimitConfirmMessage:
+        '您設定了時間視窗但費用限制為0，這意味著不會有費用限制。\n\n是否繼續？',
+      costLimitConfirmContinue: '繼續儲存',
+      costLimitConfirmBack: '返回修改',
+      refreshAccountsSuccess: '帳號清單已重新整理',
+      refreshAccountsFailed: '重新整理帳號清單失敗',
+      updateFailed: '更新失敗'
+    },
+
+    // Batch Edit API Key Modal
+    batchEditApiKeyModal: {
+      title: '批次編輯 API Keys ({count} 個)',
+
+      // Info section
+      infoTitle: '批次編輯說明',
+      infoContent:
+        '以下設定將套用到所選的 {count} 個 API Key。僅填寫或修改的欄位會被更新，空白欄位將保持原值不變。',
+
+      // Tag operations
+      tagLabel: '標籤 (批次操作)',
+      tagOperations: {
+        replace: '替換標籤',
+        add: '新增標籤',
+        remove: '移除標籤',
+        none: '不修改標籤'
+      },
+
+      // Tag status texts
+      newTagsList: '新標籤清單:',
+      tagsToAdd: '要新增的標籤:',
+      tagsToRemove: '要移除的標籤:',
+      clickToSelectTags: '點擊選擇已有標籤:',
+      createNewTag: '建立新標籤:',
+      inputNewTagPlaceholder: '輸入新標籤名稱',
+
+      // Rate limit settings
+      rateLimitTitle: '速率限制設定',
+      rateLimitWindow: '時間視窗 (分鐘)',
+      rateLimitRequests: '請求次數限制',
+      rateLimitCost: '費用限制 (美元)',
+      noModifyPlaceholder: '不修改',
+
+      // Daily cost limit
+      dailyCostLimit: '每日費用限制 (美元)',
+      dailyCostLimitPlaceholder: '不修改 (0 表示無限制)',
+
+      // Weekly Opus cost limit
+      weeklyOpusCostLimit: 'Opus 模型週費用限制 (美元)',
+      weeklyOpusCostLimitPlaceholder: '不修改 (0 表示無限制)',
+      opusLimitDescription: '設定 Opus 模型的週費用限制（週一到週日），僅限 Claude 官方帳戶',
+
+      // Concurrency limit
+      concurrencyLimit: '並發限制',
+      concurrencyLimitPlaceholder: '不修改 (0 表示無限制)',
+
+      // Active status
+      activeStatus: '啟用狀態',
+      statusOptions: {
+        active: '啟用',
+        disabled: '停用',
+        noChange: '不修改'
+      },
+
+      // Service permissions
+      servicePermissions: '服務權限',
+      permissionOptions: {
+        noChange: '不修改',
+        all: '全部服務',
+        claude: '僅 Claude',
+        gemini: '僅 Gemini',
+        openai: '僅 OpenAI'
+      },
+
+      // Account binding
+      accountBinding: '專屬帳號綁定',
+      refreshAccounts: '重新整理帳號',
+      refreshing: '重新整理中...',
+
+      claudeAccount: 'Claude 專屬帳號',
+      geminiAccount: 'Gemini 專屬帳號',
+      openaiAccount: 'OpenAI 專屬帳號',
+      bedrockAccount: 'Bedrock 專屬帳號',
+
+      accountOptions: {
+        noChange: '不修改',
+        sharedPool: '使用共享帳號池',
+        groupPrefix: '分組 - '
+      },
+
+      // Optgroup labels
+      optgroupLabels: {
+        accountGroups: '帳號分組',
+        dedicatedAccounts: '專屬帳號'
+      },
+
+      // Buttons
+      cancel: '取消',
+      saving: '儲存中...',
+      batchSave: '批次儲存',
+
+      // Messages
+      refreshAccountsSuccess: '帳號清單已重新整理',
+      refreshAccountsFailed: '重新整理帳號清單失敗',
+      batchEditSuccess: '成功批次編輯 {count} 個 API Keys',
+      batchEditPartialFail: '{failedCount} 個編輯失敗:\n{errors}',
+      batchEditAllFailed: '所有 API Keys 編輯失敗',
+      batchEditFailed: '批次編輯失敗',
+      batchEditErrorLog: '批次編輯 API Keys 失敗:'
+    },
+
+    // Renew API Key Modal
+    renewApiKeyModal: {
+      title: '續期 API Key',
+      apiKeyInfo: 'API Key 資訊',
+      currentExpiry: '當前到期時間：',
+      neverExpires: '永不到期',
+      renewDuration: '續期時長',
+      extend7Days: '延長 7 天',
+      extend30Days: '延長 30 天',
+      extend90Days: '延長 90 天',
+      extend180Days: '延長 180 天',
+      extend365Days: '延長 365 天',
+      customDate: '自訂日期',
+      setPermanent: '設為永不到期',
+      newExpiry: '新的到期時間：',
+      cancel: '取消',
+      renewing: '續期中...',
+      confirmRenew: '確認續期',
+      renewSuccess: 'API Key 續期成功',
+      renewFailed: '續期失敗'
+    },
+
+    // New API Key Modal
+    newApiKeyModal: {
+      title: 'API Key 建立成功',
+      subtitle: '請妥善保存您的 API Key',
+      directCloseTooltip: '直接關閉（不推薦）',
+
+      // 警告提示
+      warningTitle: '重要提醒',
+      warningMessage:
+        '這是您唯一能看到完整 API Key 的機會。關閉此視窗後，系統將不再顯示完整的 API Key。請立即複製並妥善保存。',
+
+      // 欄位標籤
+      apiKeyName: 'API Key 名稱',
+      remarks: '備註',
+      noDescription: '無描述',
+      apiKey: 'API Key',
+
+      // 可見性切換
+      hideApiKey: '隱藏 API Key',
+      showFullApiKey: '顯示完整 API Key',
+      visibilityHint: '點擊眼睛圖示切換顯示模式，使用下方按鈕複製完整 API Key',
+
+      // 按鈕
+      copyApiKey: '複製 API Key',
+      alreadySaved: '我已保存',
+
+      // 確認對話框
+      closeReminderTitle: '關閉提醒',
+      closeReminderMessage:
+        '關閉後將無法再次查看完整的 API Key，請確保已經妥善保存。\n\n確定要關閉嗎？',
+      confirmClose: '確定關閉',
+      cancel: '取消',
+
+      directCloseTitle: '確定要關閉嗎？',
+      directCloseMessage:
+        '您還沒有保存 API Key，關閉後將無法再次查看。\n\n建議您先複製 API Key 再關閉。',
+      stillClose: '仍然關閉',
+      goBack: '返回複製',
+
+      directCloseFallback: '您還沒有保存 API Key，關閉後將無法再次查看。\n\n確定要關閉嗎？',
+
+      // 成功訊息
+      apiKeyNotFound: 'API Key 不存在',
+      copySuccess: 'API Key 已複製到剪貼簿',
+      copyFailed: '複製失敗，請手動複製'
+    },
+
+    // Create API Key Modal
+    createApiKeyModal: {
+      title: '建立新的 API Key',
+
+      // Create type section
+      createType: '建立類型',
+      singleCreate: '單一建立',
+      batchCreate: '批次建立',
+      batchCount: '建立數量',
+      batchCountPlaceholder: '輸入數量 (2-500)',
+      maxSupported: '最大支援 500 個',
+      batchHint: '批次建立時，每個 Key 的名稱會自動添加序號後綴，例如：{name}_1, {name}_2 ...',
+
+      // Basic form fields
+      name: '名稱',
+      nameRequired: '*',
+      nameError: '請輸入API Key名稱',
+      singleNamePlaceholder: '為您的 API Key 取一個名稱',
+      batchNamePlaceholder: '輸入基礎名稱（將自動添加序號）',
+      description: '備註 (選填)',
+      descriptionPlaceholder: '描述此 API Key 的用途...',
+
+      // Tags section
+      tags: '標籤',
+      selectedTags: '已選擇的標籤:',
+      clickToSelectTags: '點擊選擇已有標籤:',
+      createNewTag: '建立新標籤:',
+      newTagPlaceholder: '輸入新標籤名稱',
+      tagHint: '用於標記不同團隊或用途，方便篩選管理',
+
+      // Rate limit section
+      rateLimitTitle: '速率限制設定 (選填)',
+      rateLimitWindow: '時間視窗 (分鐘)',
+      rateLimitRequests: '請求次數限制',
+      rateLimitCost: '費用限制 (美元)',
+      rateLimitWindowPlaceholder: '無限制',
+      rateLimitRequestsPlaceholder: '無限制',
+      rateLimitCostPlaceholder: '無限制',
+      rateLimitWindowHint: '時間段單位',
+      rateLimitRequestsHint: '視窗內最大請求',
+      rateLimitCostHint: '視窗內最大費用',
+
+      // Rate limit examples
+      exampleTitle: '💡 使用範例',
+      example1: '範例1: 時間視窗=60，請求次數=1000 → 每60分鐘最多1000次請求',
+      example2: '範例2: 時間視窗=1，費用=0.1 → 每分鐘最多$0.1費用',
+      example3: '範例3: 視窗=30，請求=50，費用=5 → 每30分鐘50次請求且不超$5費用',
+
+      // Cost limits
+      dailyCostLimit: '每日費用限制 (美元)',
+      dailyCostLimitPlaceholder: '0 表示無限制',
+      dailyCostHint: '設定此 API Key 每日的費用限制，超過限制將拒絶請求，0 或留空表示無限制',
+      weeklyOpusCostLimit: 'Opus 模型週費用限制 (美元)',
+      weeklyOpusCostLimitPlaceholder: '0 表示無限制',
+      weeklyOpusHint:
+        '設定 Opus 模型的週費用限制（週一到週日），僅限 Claude 官方帳戶，0 或留空表示無限制',
+      custom: '自訂',
+
+      // Concurrency limit
+      concurrencyLimit: '並發限制 (選填)',
+      concurrencyLimitPlaceholder: '0 表示無限制',
+      concurrencyHint: '設定此 API Key 可同時處理的最大請求數，0 或留空表示無限制',
+
+      // Expiration settings
+      expirationSettings: '過期設定',
+      fixedTimeExpiry: '固定時間過期',
+      activationExpiry: '首次使用後啟用',
+      fixedModeHint: '固定時間模式：Key 建立後立即生效，按設定時間過期',
+      activationModeHint: 'Key 首次使用時啟用，啟用後按設定天數過期（適合批次銷售）',
+
+      // Expiration duration options
+      neverExpire: '永不過期',
+      '1d': '1 天',
+      '7d': '7 天',
+      '30d': '30 天',
+      '90d': '90 天',
+      '180d': '180 天',
+      '365d': '365 天',
+      customDate: '自訂日期',
+
+      // Activation mode
+      activationDays: '輸入天數',
+      daysUnit: '天',
+      activationHint: 'Key 將在首次使用後啟用，啟用後 {days} 天過期',
+
+      // Expiry status
+      willExpireOn: '將於 {date} 過期',
+
+      // Service permissions
+      servicePermissions: '服務權限',
+      allServices: '全部服務',
+      claudeOnly: '僅 Claude',
+      geminiOnly: '僅 Gemini',
+      openaiOnly: '僅 OpenAI',
+      permissionHint: '控制此 API Key 可以存取哪些服務',
+
+      // Account binding
+      dedicatedAccountBinding: '專屬帳號綁定 (選填)',
+      refreshAccounts: '重新整理帳號',
+      refreshing: '重新整理中...',
+      claudeDedicatedAccount: 'Claude 專屬帳號',
+      geminiDedicatedAccount: 'Gemini 專屬帳號',
+      openaiDedicatedAccount: 'OpenAI 專屬帳號',
+      bedrockDedicatedAccount: 'Bedrock 專屬帳號',
+      useSharedPool: '使用共用帳號池',
+      accountBindingHint: '選擇專屬帳號後，此API Key將僅使用該帳號，不選擇則使用共用帳號池',
+      selectClaudeAccount: '請選擇Claude帳號',
+      selectGeminiAccount: '請選擇Gemini帳號',
+      selectOpenaiAccount: '請選擇OpenAI帳號',
+      selectBedrockAccount: '請選擇Bedrock帳號',
+
+      // Model restrictions
+      enableModelRestriction: '啟用模型限制',
+      restrictedModelsList: '限制的模型清單',
+      noRestrictedModels: '暫無限制的模型',
+      allCommonModelsRestricted: '所有常用模型已在限制清單中',
+      addRestrictedModelPlaceholder: '輸入模型名稱，按 Enter 添加',
+      modelRestrictionHint: '設定此API Key無法存取的模型，例如：claude-opus-4-20250514',
+
+      // Client restrictions
+      enableClientRestriction: '啟用用戶端限制',
+      allowedClients: '允許的用戶端',
+
+      // Buttons
+      cancel: '取消',
+      create: '建立',
+      creating: '建立中...',
+
+      // Messages
+      batchCountError: '批次建立數量必須在 2-500 之間',
+      costLimitConfirmTitle: '費用限制提醒',
+      costLimitConfirmMessage:
+        '您設定了時間視窗但費用限制為0，這意味著不會有費用限制。\n\n是否繼續？',
+      costLimitConfirmContinue: '繼續建立',
+      costLimitConfirmBack: '返回修改',
+      costLimitFallbackMessage:
+        '您設定了時間視窗但費用限制為0，這意味著不會有費用限制。\n是否繼續？',
+      createSuccess: 'API Key 建立成功',
+      batchCreateSuccess: '成功建立 {count} 個 API Key',
+      createFailed: '建立失敗',
+      batchCreateFailed: '批次建立失敗',
+      refreshAccountsSuccess: '帳號清單已重新整理',
+      refreshAccountsFailed: '重新整理帳號清單失敗'
+    },
+
+    // Window Countdown
+    windowCountdown: {
+      expired: '視窗已過期',
+      notStarted: '視窗未啟動',
+      minutes: '分鐘',
+      requests: '請求',
+      tokens: 'Token',
+      cost: '費用',
+      aboutToReset: '即將重置',
+      minutesUntilReset: '分鐘後重置',
+      untilReset: '後重置',
+      windowLimit: '視窗限制',
+      hours: '小時'
+    }
   },
 
   // User-related translations
@@ -670,22 +1212,22 @@ export default {
     dashboard: {
       title: 'Dashboard Overview',
       welcomeMessage: 'Welcome to your Claude Relay dashboard',
-      
+
       // Navigation tabs
       overview: 'Overview',
       apiKeys: 'API Keys',
       usageStats: 'Usage Stats',
-      
+
       // Welcome section
       welcome: 'Welcome',
-      
+
       // Stats cards
       activeApiKeys: 'Active API Keys',
       deletedApiKeys: 'Deleted API Keys',
       totalRequests: 'Total Requests',
       inputTokens: 'Input Tokens',
       totalCost: 'Total Cost',
-      
+
       // Account information section
       accountInformation: 'Account Information',
       username: 'Username',
@@ -695,7 +1237,7 @@ export default {
       memberSince: 'Member Since',
       lastLogin: 'Last Login',
       notAvailable: 'N/A',
-      
+
       // Messages
       logout: 'Logout',
       logoutSuccess: 'Logged out successfully',
@@ -703,7 +1245,7 @@ export default {
       loadProfileFailed: 'Failed to load user profile',
       loadStatsFailed: 'Failed to load API keys stats'
     },
-    
+
     // User Login
     login: {
       title: 'User Sign In',
@@ -715,25 +1257,25 @@ export default {
       signIn: 'Sign In',
       signingIn: 'Signing In...',
       adminLogin: 'Admin Login',
-      
+
       // Validation and error messages
       requiredFields: 'Please enter both username and password',
       loginSuccess: 'Login successful!',
       loginFailed: 'Login failed'
     },
-    
+
     // User Management
     management: {
       title: 'User Management',
       description: 'Manage users, their API keys, and view usage statistics',
       refresh: 'Refresh',
-      
+
       // Stats cards
       totalUsers: 'Total Users',
       activeUsers: 'Active Users',
       totalApiKeys: 'Total API Keys',
       totalCost: 'Total Cost',
-      
+
       // Search and filters
       searchPlaceholder: 'Search users...',
       allRoles: 'All Roles',
@@ -742,14 +1284,14 @@ export default {
       allStatus: 'All Status',
       active: 'Active',
       disabled: 'Disabled',
-      
+
       // User list
       users: 'Users',
       loadingUsers: 'Loading users...',
       noUsersFound: 'No users found',
       noUsersMatch: 'No users match your search criteria.',
       noUsersCreated: 'No users have been created yet.',
-      
+
       // User info and actions
       displayName: 'Display Name',
       email: 'Email',
@@ -760,31 +1302,33 @@ export default {
       neverLoggedIn: 'Never logged in',
       requests: 'requests',
       totalCostLabel: 'total cost',
-      
+
       // Action buttons and tooltips
       viewUsageStats: 'View Usage Stats',
       disableAllApiKeys: 'Disable All API Keys',
       disableUser: 'Disable User',
       enableUser: 'Enable User',
       changeRole: 'Change Role',
-      
+
       // Confirmation dialogs
       disableUserTitle: 'Disable User',
       enableUserTitle: 'Enable User',
-      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      disableUserMessage:
+        'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
       enableUserMessage: 'Are you sure you want to enable user "{username}"?',
       disable: 'Disable',
       enable: 'Enable',
-      
+
       disableAllKeysTitle: 'Disable All API Keys',
-      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableAllKeysMessage:
+        'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
       disableKeys: 'Disable Keys',
-      
+
       // Success messages
       userDisabledSuccess: 'User disabled successfully',
       userEnabledSuccess: 'User enabled successfully',
       keysDisabledSuccess: 'Disabled {count} API keys',
-      
+
       // Error messages
       loadUsersError: 'Failed to load users',
       toggleStatusError: 'Failed to toggleStatus',
@@ -795,7 +1339,7 @@ export default {
     usageStatsModal: {
       title: '使用統計',
       titleWithUser: '使用統計 - {displayName}',
-      
+
       // Time period selection
       periodSelection: {
         day: '最近24小時',
@@ -803,10 +1347,10 @@ export default {
         month: '最近30天',
         quarter: '最近90天'
       },
-      
+
       // Loading state
       loadingStats: '正在載入使用統計...',
-      
+
       // Summary cards
       summaryCards: {
         requests: '請求數',
@@ -814,7 +1358,7 @@ export default {
         outputTokens: '輸出Token',
         totalCost: '總費用'
       },
-      
+
       // API Keys table
       apiKeysTable: {
         title: 'API Keys 使用情況',
@@ -836,7 +1380,7 @@ export default {
         },
         never: '從未使用'
       },
-      
+
       // Usage trend chart
       usageTrend: {
         title: '使用趨勢',
@@ -844,13 +1388,13 @@ export default {
         dailyTrends: '最近 {period} 的日使用趨勢',
         chartNote: '(可整合 Chart.js、D3.js 或類似圖表庫)'
       },
-      
+
       // No data state
       noData: {
         title: '暫無使用資料',
         description: '該使用者在所選時間段內尚未發起任何API請求。'
       },
-      
+
       // Buttons
       close: '關閉'
     },
@@ -858,10 +1402,10 @@ export default {
     // Change Role Modal
     changeRoleModal: {
       title: '修改使用者角色',
-      
+
       // User info display
       currentRole: '當前角色：{role}',
-      
+
       // Role selection form
       newRole: '新角色',
       roles: {
@@ -870,21 +1414,62 @@ export default {
         admin: '管理員',
         adminDesc: '擁有管理使用者和系統的完整權限'
       },
-      
+
       // Warning messages
       roleChangeWarning: {
         title: '角色變更警告',
-        grantAdmin: '授予管理員權限將使該使用者擁有系統的完整存取權限，包括管理其他使用者及其API密鑰的能力。',
+        grantAdmin:
+          '授予管理員權限將使該使用者擁有系統的完整存取權限，包括管理其他使用者及其API密鑰的能力。',
         removeAdmin: '移除管理員權限將限制該使用者只能管理自己的API密鑰和檢視自己的使用統計。'
       },
-      
+
       // Buttons
       cancel: '取消',
       updateRole: '更新角色',
       updating: '更新中...',
-      
+
       // Success message
       roleUpdated: '使用者角色已更新為 {role}'
+    },
+
+    // Usage Detail Modal
+    usageDetailModal: {
+      title: '使用統計詳情',
+      close: '關閉',
+
+      // Statistics cards
+      totalRequests: '總請求數',
+      totalTokens: '總Token數',
+      totalCost: '總費用',
+      averageRate: '平均速率',
+
+      // Today stats
+      today: '今日',
+      todayRequests: '{count} 次',
+      todayTokens: '{count}',
+      todayCost: '${amount}',
+
+      // Usage labels
+      times: '次',
+
+      // Token distribution
+      tokenDistribution: 'Token 使用分佈',
+      inputTokens: '輸入 Token',
+      outputTokens: '輸出 Token',
+      cacheCreateTokens: '快取建立 Token',
+      cacheReadTokens: '快取讀取 Token',
+
+      // Limits section
+      limitSettings: '限制設置',
+      dailyCostLimit: '每日費用限制',
+      concurrencyLimit: '並行限制',
+      timeWindowLimit: '時間窗口限制',
+      windowStatus: '窗口狀態',
+      used: '已使用',
+      remainingQuota: '剩餘: ${amount}',
+
+      // Progress indicators
+      usedPercentage: '已使用 {percentage}%'
     }
   },
 
@@ -893,17 +1478,17 @@ export default {
     title: '系統設置',
     description: '網站定制和通知配置',
     loading: '正在載入設置...',
-    
+
     // 導航標籤
     branding: '品牌設置',
     webhook: '通知設置',
-    
+
     // 品牌設置
     siteName: '網站名稱',
     siteNameDescription: '品牌標識',
     siteNamePlaceholder: 'Claude Relay Service',
     siteNameHint: '將顯示在瀏覽器標題和頁面頭部',
-    
+
     siteIcon: '網站圖標',
     siteIconDescription: 'Favicon',
     currentIcon: '當前圖標',
@@ -911,13 +1496,13 @@ export default {
     removeIcon: '刪除',
     iconFormats: '支援 .ico, .png, .jpg, .svg 格式，最大 350KB',
     iconPreview: '圖標預覽',
-    
+
     adminEntry: '管理入口',
     adminEntryDescription: '登入按鈕顯示',
     hideLoginButton: '隱藏登入按鈕',
     showLoginButton: '顯示登入按鈕',
     adminEntryHint: '隱藏後，用戶需要直接訪問 /admin/login 頁面登入',
-    
+
     // 移動端卡片標題
     siteNameCard: '站點名稱',
     siteNameCardDesc: '自定義您的站點品牌名稱',
@@ -925,18 +1510,18 @@ export default {
     siteIconCardDesc: '上傳自定義圖標或輸入圖標URL',
     adminEntryCard: '管理入口',
     adminEntryCardDesc: '控制登入按鈕在首頁的顯示',
-    
+
     // 操作按鈕
     save: '保存設置',
     saving: '保存中...',
     reset: '重置為預設',
     lastUpdated: '最後更新：{time}',
     lastUpdatedMobile: '上次更新: {time}',
-    
+
     // Webhook 設置
     enableWebhook: '啟用 Webhook 通知',
     webhookDescription: '開啟後，系統將按配置發送通知到指定平台',
-    
+
     // 通知類型
     notificationTypes: '通知類型',
     accountAnomaly: '帳號異常',
@@ -947,7 +1532,7 @@ export default {
     quotaWarningDesc: 'API調用配額不足警告',
     systemErrorDesc: '系統運行錯誤和故障',
     securityAlertDesc: '安全相關的警報通知',
-    
+
     // 通知平台
     notificationPlatforms: '通知平台',
     addPlatform: '新增平台',
@@ -956,32 +1541,32 @@ export default {
     testConnection: '測試連線',
     edit: '編輯',
     delete: '刪除',
-    
+
     // 高級設置
     advancedSettings: '進階設置',
     maxRetries: '最大重試次數',
     retryDelay: '重試延遲 (毫秒)',
     timeout: '逾時時間 (毫秒)',
-    
+
     // 測試通知
     sendTestNotification: '發送測試通知',
-    
+
     // 平台模態框
     addPlatformModal: '新增通知平台',
     editPlatformModal: '編輯通知平台',
     configurePlatform: '配置新的Webhook通知渠道',
     updatePlatform: '配置並更新Webhook通知渠道',
-    
+
     platformType: '平台類型',
     platformName: '名稱',
     platformNameOptional: '(可選)',
     platformNamePlaceholder: '例如：運維群通知、開發測試群',
-    
+
     webhookUrl: 'Webhook URL',
     webhookUrlRequired: '*',
     webhookUrlPlaceholder: 'https://...',
     editModeWarning: '編輯模式下不能更改平台類型',
-    
+
     // Bark 特有設置
     deviceKey: '設備密鑰 (Device Key)',
     deviceKeyPlaceholder: '例如：aBcDeFgHiJkLmNoPqRsTuVwX',
@@ -994,14 +1579,14 @@ export default {
     notificationGroup: '通知分組',
     notificationGroupOptional: '(可選)',
     notificationGroupPlaceholder: '預設: claude-relay',
-    
+
     // 通知級別選項
     levelAuto: '自動（根據通知類型）',
     levelPassive: '被動',
     levelActive: '預設',
     levelTimeSensitive: '時效性',
     levelCritical: '緊急',
-    
+
     // 聲音選項
     soundAuto: '自動（根據通知類型）',
     soundDefault: '預設',
@@ -1012,20 +1597,20 @@ export default {
     soundGlass: '玻璃',
     soundHorn: '喇叭',
     soundSilence: '靜音',
-    
+
     // Bark 提示信息
     barkInstructions: [
       '1. 在iPhone上安裝Bark App',
       '2. 打開App獲取您的設備密鑰',
       '3. 將密鑰貼上到上方輸入框'
     ],
-    
+
     // 簽名設置
     enableSignatureVerify: '啟用簽名驗證',
     signatureEnabled: '已啟用',
     signatureSecret: '簽名密鑰',
     signatureSecretPlaceholder: 'SEC...',
-    
+
     // 平台提示信息
     wechatWorkHint: '請在企業微信群機器人設置中獲取Webhook地址',
     dingtalkHint: '請在釘釘群機器人設置中獲取Webhook地址',
@@ -1034,14 +1619,14 @@ export default {
     discordHint: '請在Discord伺服器的整合設置中建立Webhook',
     barkHint: '請在Bark App中查看您的設備密鑰',
     customHint: '請輸入完整的Webhook接收地址',
-    
+
     // 模態框按鈕
     required: '必填項',
     cancel: '取消',
     testing: '測試中...',
     saveChanges: '保存修改',
     addPlatformBtn: '新增平台',
-    
+
     // 成功/錯誤消息
     loadSettingsFailed: '載入設置失敗',
     settingsSaved: '設置已保存',
@@ -1051,34 +1636,34 @@ export default {
     resetToDefault: '已重置為預設設置',
     resetFailed: '重置失敗',
     confirmReset: '確定要重置為預設設置嗎？\n\n這將清除所有自定義的網站名稱和圖標設置。',
-    
+
     webhookConfigSaved: '配置已保存',
     webhookConfigSaveFailed: '保存配置失敗',
     getWebhookConfigFailed: '獲取webhook配置失敗',
-    
+
     platformAdded: '平台已新增',
     platformUpdated: '平台已更新',
     platformDeleted: '平台已刪除',
     platformDeleteFailed: '刪除失敗',
     confirmDeletePlatform: '確定要刪除這個平台嗎？',
     operationFailed: '操作失敗',
-    
+
     testSuccess: '測試成功，webhook連線正常',
     testFailed: '測試失敗',
     testNotificationSent: '測試通知已發送',
     testNotificationFailed: '發送失敗',
-    
+
     // 表單驗證消息
     enterBarkDeviceKey: '請輸入Bark設備密鑰',
     enterWebhookUrl: '請輸入Webhook URL',
     enterValidWebhookUrl: '請輸入有效的Webhook URL',
     enterWebhookUrlFirst: '請先輸入Webhook URL',
     enterBarkDeviceKeyFirst: '請先輸入Bark設備密鑰',
-    
+
     // 檔案上傳
     fileReadFailed: '檔案讀取失敗',
     iconLoadFailed: 'Icon failed to load',
-    
+
     // 平台名稱
     platforms: {
       wechatWork: '企業微信',
@@ -1096,11 +1681,11 @@ export default {
     // 標題和模態框
     editAccount: '編輯帳戶',
     addAccount: '新增帳戶',
-    
+
     // 步驟指示器
     stepBasicInfo: '基本資訊',
     stepAuthorization: '授權認證',
-    
+
     // 平台選擇
     platform: '平台',
     platformClaude: 'Claude',
@@ -1109,27 +1694,28 @@ export default {
     platformOpenAI: 'OpenAI',
     platformAzureOpenAI: 'Azure OpenAI',
     platformBedrock: 'Bedrock',
-    
+
     // 新增方式
     addMethod: '新增方式',
     addTypeSetupToken: 'Setup Token（推薦）',
     addTypeOAuth: 'OAuth 授權',
     addTypeManual: '手動輸入 Access Token',
-    
+
     // 基本資訊欄位
     accountName: '帳戶名稱',
     accountNamePlaceholder: '為帳戶設置一個易識別的名稱',
     description: '描述',
     descriptionOptional: '描述（可選）',
     descriptionPlaceholder: '帳戶用途說明...',
-    
+
     // 帳戶類型
     accountType: '帳戶類型',
     accountTypeShared: '共用帳戶',
     accountTypeDedicated: '專屬帳戶',
     accountTypeGroup: '群組排程',
-    accountTypeDescription: '共用帳戶：供所有API Key使用；專屬帳戶：僅供特定API Key使用；群組排程：加入群組供群組內排程',
-    
+    accountTypeDescription:
+      '共用帳戶：供所有API Key使用；專屬帳戶：僅供特定API Key使用；群組排程：加入群組供群組內排程',
+
     // 群組選擇
     selectGroup: '選擇群組',
     selectGroupRequired: '選擇群組 *',
@@ -1137,7 +1723,7 @@ export default {
     memberCount: '個成員',
     newGroup: '新建群組',
     refreshGroups: '刷新群組',
-    
+
     // Gemini 專案 ID
     projectId: '專案 ID',
     projectIdOptional: '專案 ID（可選）',
@@ -1149,8 +1735,9 @@ export default {
     projectIdStep3: '⚠️ 注意：要複製專案 ID（Project ID），不要複製專案編號（Project Number）！',
     projectIdTip: '提示：如果您的帳號是普通個人帳號（未綁定 Google Cloud），請留空此欄位。',
     projectIdGoogleCloudRequired: 'Google Cloud/Workspace 帳號需要提供專案 ID',
-    projectIdGoogleCloudDescription: '某些 Google 帳號（特別是綁定了 Google Cloud 的帳號）會被識別為 Workspace 帳號，需要提供額外的專案 ID。',
-    
+    projectIdGoogleCloudDescription:
+      '某些 Google 帳號（特別是綁定了 Google Cloud 的帳號）會被識別為 Workspace 帳號，需要提供額外的專案 ID。',
+
     // Bedrock 欄位
     awsAccessKeyId: 'AWS 存取金鑰 ID',
     awsAccessKeyIdRequired: 'AWS 存取金鑰 ID *',
@@ -1186,12 +1773,13 @@ export default {
     smallFastModelOptional: '小快速模型（可選）',
     smallFastModelPlaceholder: '例如：us.anthropic.claude-3-5-haiku-20241022-v1:0',
     smallFastModelDescription: '用於快速回應的輕量級模型，留空將使用系統預設',
-    
+
     // Azure OpenAI 欄位
     azureEndpoint: 'Azure Endpoint',
     azureEndpointRequired: 'Azure Endpoint *',
     azureEndpointPlaceholder: 'https://your-resource.openai.azure.com',
-    azureEndpointDescription: 'Azure OpenAI 資源的終結點 URL，格式：https://your-resource.openai.azure.com',
+    azureEndpointDescription:
+      'Azure OpenAI 資源的終結點 URL，格式：https://your-resource.openai.azure.com',
     apiVersion: 'API 版本',
     apiVersionPlaceholder: '2024-02-01',
     apiVersionDescription: 'Azure OpenAI API 版本，預設使用最新穩定版本 2024-02-01',
@@ -1205,7 +1793,7 @@ export default {
     apiKeyDescription: '從 Azure 入口網站取得的 API 金鑰',
     supportedModels: '支援的模型',
     supportedModelsDescription: '選擇此部署支援的模型類型',
-    
+
     // Claude Console 欄位
     apiUrl: 'API URL',
     apiUrlRequired: 'API URL *',
@@ -1224,7 +1812,8 @@ export default {
     used: '已使用',
     modelMapping: '模型映射表',
     modelMappingOptional: '模型映射表（可選）',
-    modelMappingDescription: '留空表示支援所有模型且不修改請求。配置映射後，左側模型會被識別為支援的模型，右側是實際發送的模型。',
+    modelMappingDescription:
+      '留空表示支援所有模型且不修改請求。配置映射後，左側模型會被識別為支援的模型，右側是實際發送的模型。',
     originalModel: '原始模型名稱',
     mappedModel: '映射後的模型名稱',
     addModelMapping: '新增模型映射',
@@ -1237,51 +1826,63 @@ export default {
     rateLimitDescription: '啟用後，當帳號返回429錯誤時將暫停排程一段時間',
     rateLimitDuration: '限流時間（分鐘）',
     rateLimitDurationDescription: '帳號被限流後暫停排程的時間（分鐘）',
-    
+
     // Claude 訂閱類型
     subscriptionType: '訂閱類型',
     subscriptionClaudeMax: 'Claude Max',
     subscriptionClaudePro: 'Claude Pro',
     claudeProLimitation: 'Pro 帳號不支援 Claude Opus 4 模型',
-    
+
     // Claude 特殊功能
     autoStopOnWarning: '5小時使用量接近限制時自動停止排程',
-    autoStopOnWarningDescription: '當系統偵測到帳戶接近5小時使用限制時，自動暫停排程該帳戶。進入新的時間視窗後會自動恢復排程。',
+    autoStopOnWarningDescription:
+      '當系統偵測到帳戶接近5小時使用限制時，自動暫停排程該帳戶。進入新的時間視窗後會自動恢復排程。',
     useUnifiedUserAgent: '使用統一 Claude Code 版本',
-    useUnifiedUserAgentDescription: '開啟後將使用從真實 Claude Code 用戶端擷取的統一 User-Agent，提高相容性',
+    useUnifiedUserAgentDescription:
+      '開啟後將使用從真實 Claude Code 用戶端擷取的統一 User-Agent，提高相容性',
     currentUnifiedVersion: '💡 目前統一版本：',
     clearCache: '清除快取',
     clearing: '清除中...',
     waitingForCapture: '⏳ 等待從 Claude Code 用戶端擷取 User-Agent',
-    captureHint: '💡 提示：如果長時間未能擷取，請確認有 Claude Code 用戶端正在使用此帳戶，或聯繫開發者檢查 User-Agent 格式是否發生變化',
+    captureHint:
+      '💡 提示：如果長時間未能擷取，請確認有 Claude Code 用戶端正在使用此帳戶，或聯繫開發者檢查 User-Agent 格式是否發生變化',
     useUnifiedClientId: '使用統一的用戶端識別',
-    useUnifiedClientIdDescription: '開啟後將使用固定的用戶端識別，使所有請求看起來來自同一個用戶端，減少特徵',
+    useUnifiedClientIdDescription:
+      '開啟後將使用固定的用戶端識別，使所有請求看起來來自同一個用戶端，減少特徵',
     clientId: '用戶端識別 ID',
     regenerate: '重新產生',
     clientIdDescription: '此ID將替換請求中的user_id用戶端部分，保留session部分用於黏性會話',
-    
+
     // 排程優先順序
     schedulePriority: '排程優先順序',
     schedulePriorityRange: '排程優先順序（1-100）',
     schedulePriorityPlaceholder: '數字越小優先順序越高，預設50',
     schedulePriorityDescription: '數字越小優先順序越高，建議範圍：1-100',
-    
+
     // 手動輸入 Token
     manualTokenTitle: '手動輸入 Token',
-    manualTokenDescription: '請輸入有效的 Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
-    manualTokenClaudeDescription: '請輸入有效的 Claude Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
-    manualTokenGeminiDescription: '請輸入有效的 Gemini Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
-    manualTokenOpenAIDescription: '請輸入有效的 OpenAI Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
+    manualTokenDescription:
+      '請輸入有效的 Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
+    manualTokenClaudeDescription:
+      '請輸入有效的 Claude Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
+    manualTokenGeminiDescription:
+      '請輸入有效的 Gemini Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
+    manualTokenOpenAIDescription:
+      '請輸入有效的 OpenAI Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動重新整理。',
     obtainTokenMethods: '取得 Access Token 的方法：',
-    claudeTokenPath: '請從已登入 Claude Code 的機器上取得 ~/.claude/.credentials.json 檔案中的憑證，請勿使用 Claude 官網 API Keys 頁面的金鑰。',
-    geminiTokenPath: '請從已登入 Gemini CLI 的機器上取得 ~/.config/gemini/credentials.json 檔案中的憑證。',
-    openaiTokenPath: '請從已登入 OpenAI 帳戶的機器上取得認證憑證，或透過 OAuth 授權流程取得 Access Token。',
+    claudeTokenPath:
+      '請從已登入 Claude Code 的機器上取得 ~/.claude/.credentials.json 檔案中的憑證，請勿使用 Claude 官網 API Keys 頁面的金鑰。',
+    geminiTokenPath:
+      '請從已登入 Gemini CLI 的機器上取得 ~/.config/gemini/credentials.json 檔案中的憑證。',
+    openaiTokenPath:
+      '請從已登入 OpenAI 帳戶的機器上取得認證憑證，或透過 OAuth 授權流程取得 Access Token。',
     accessToken: 'Access Token',
     accessTokenOptional: 'Access Token（可選）',
     accessTokenRequired: 'Access Token *',
     accessTokenPlaceholder: '請輸入 Access Token...',
     accessTokenOptionalPlaceholder: '可選：如果不填寫，系統會自動透過 Refresh Token 取得...',
-    accessTokenOptionalDescription: 'Access Token 可選填。如果不提供，系統會透過 Refresh Token 自動取得。',
+    accessTokenOptionalDescription:
+      'Access Token 可選填。如果不提供，系統會透過 Refresh Token 自動取得。',
     refreshToken: 'Refresh Token',
     refreshTokenOptional: 'Refresh Token（可選）',
     refreshTokenRequired: 'Refresh Token *',
@@ -1289,16 +1890,18 @@ export default {
     refreshTokenRequiredPlaceholder: '請輸入 Refresh Token（必填）...',
     refreshTokenDescription: '系統將使用 Refresh Token 自動取得 Access Token 和使用者資訊',
     refreshTokenTip: '💡 如果未填寫 Refresh Token，Token 過期後需要手動更新。',
-    
+
     // Setup Token 流程
     setupTokenTitle: 'Claude Setup Token 授權',
     setupTokenDescription: '請按照以下步驟透過 Setup Token 完成 Claude 帳戶的授權：',
     setupTokenStep1Title: '點擊下方按鈕產生授權連結',
     setupTokenStep2Title: '在瀏覽器中開啟連結並完成授權',
-    setupTokenStep2Description: '請在新分頁中開啟授權連結，登入您的 Claude 帳戶並授權 Claude Code。',
+    setupTokenStep2Description:
+      '請在新分頁中開啟授權連結，登入您的 Claude 帳戶並授權 Claude Code。',
     setupTokenStep2Warning: '注意：如果您設置了代理，請確保瀏覽器也使用相同的代理訪問授權頁面。',
     setupTokenStep3Title: '輸入 Authorization Code',
-    setupTokenStep3Description: '授權完成後，從返回頁面複製 Authorization Code，並貼上到下方輸入框：',
+    setupTokenStep3Description:
+      '授權完成後，從返回頁面複製 Authorization Code，並貼上到下方輸入框：',
     generateSetupTokenUrl: '產生 Setup Token 授權連結',
     generating: '產生中...',
     copyLink: '複製連結',
@@ -1308,18 +1911,19 @@ export default {
     authorizationCodeDescription: '請貼上從Claude Code授權頁面複製的Authorization Code',
     verifying: '驗證中...',
     completeAuthorization: '完成授權',
-    
+
     // Token 更新（編輯模式）
     updateTokenTitle: '更新 Token',
-    updateTokenDescription: '可以更新 Access Token 和 Refresh Token。為了安全起見，不會顯示目前的 Token 值。',
+    updateTokenDescription:
+      '可以更新 Access Token 和 Refresh Token。為了安全起見，不會顯示目前的 Token 值。',
     updateTokenTip: '💡 留空表示不更新該欄位。',
     newAccessToken: '新的 Access Token',
     newRefreshToken: '新的 Refresh Token',
     leaveBlankNoUpdate: '留空表示不更新...',
-    
+
     // 使用情況
     currentUsage: '目前使用情況',
-    
+
     // 按鈕
     cancel: '取消',
     nextStep: '下一步',
@@ -1328,7 +1932,7 @@ export default {
     creating: '建立中...',
     update: '更新',
     updating: '更新中...',
-    
+
     // 錯誤訊息
     pleaseEnterAccountName: '請填寫帳戶名稱',
     pleaseSelectGroup: '請選擇一個群組',
@@ -1341,7 +1945,7 @@ export default {
     pleaseEnterDeploymentName: '請填寫部署名稱',
     pleaseEnterAccessToken: '請填寫 Access Token',
     pleaseEnterRefreshToken: '請填寫 Refresh Token',
-    
+
     // 成功訊息
     linkCopied: '連結已複製',
     extractedAuthCode: '成功提取授權碼！',
@@ -1350,7 +1954,7 @@ export default {
     groupsRefreshed: '群組列表已重新整理',
     modelMappingAdded: '已新增映射',
     modelMappingExists: '模型映射已存在',
-    
+
     // 警告和提示
     copyFailed: '複製失敗，請手動複製',
     clearCacheFailed: '清除快取失敗',
@@ -1358,40 +1962,46 @@ export default {
     urlFormatError: '連結格式錯誤，請檢查是否為完整的 URL',
     wrongUrlFormat: '請貼上以 http://localhost:45462 開頭的連結',
     loadGroupsFailed: '載入群組列表失敗',
-    
+
     // 確認對話框
     projectIdNotFilledTitle: '專案 ID 未填寫',
-    projectIdNotFilledMessage: '您尚未填寫專案 ID。\n\n如果您的Google帳號綁定了Google Cloud或被識別為Workspace帳號，需要提供專案 ID。\n如果您使用的是普通個人帳號，可以繼續不填寫。',
+    projectIdNotFilledMessage:
+      '您尚未填寫專案 ID。\n\n如果您的Google帳號綁定了Google Cloud或被識別為Workspace帳號，需要提供專案 ID。\n如果您使用的是普通個人帳號，可以繼續不填寫。',
     continueButton: '繼續',
     goBackToFill: '返回填寫',
     continueSave: '繼續保存',
-    
+
     // 快捷模型映射按鈕
     presetSonnet4: '+ Sonnet 4',
     presetOpus41: '+ Opus 4.1',
     presetHaiku35: '+ Haiku 3.5',
     presetOpus41ToSonnet4: '+ Opus 4.1 → Sonnet 4',
-    
+
     // 編輯模式特殊提示
     leaveBlankNoUpdateApiKey: '留空表示不更新 API Key',
     leaveBlankNoUpdateAwsKey: '留空表示不更新 AWS Access Key ID',
     leaveBlankNoUpdateAwsSecret: '留空表示不更新 AWS Secret Access Key',
     leaveBlankNoUpdateSession: '留空表示不更新',
-    
+
     // 通用描述文字
-    allModelsIfEmpty: '留空表示支援所有模型。如果指定模型，請求中的模型不在列表內將不會排程到此帳號',
+    allModelsIfEmpty:
+      '留空表示支援所有模型。如果指定模型，請求中的模型不在列表內將不會排程到此帳號',
     systemDefaultIfEmpty: '留空將使用系統預設模型。支援 inference profile ID 或 ARN',
     noUpdateIfEmpty: '留空表示不更新該欄位',
-    
+
     // 手動 Token 輸入部分
     manualTokenInput: '手動輸入 Token',
-    manualTokenClaudeDescription: '請輸入有效的 Claude Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
-    manualTokenGeminiDescription: '請輸入有效的 Gemini Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
-    manualTokenOpenAIDescription: '請輸入有效的 OpenAI Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
+    manualTokenClaudeDescription:
+      '請輸入有效的 Claude Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
+    manualTokenGeminiDescription:
+      '請輸入有效的 Gemini Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
+    manualTokenOpenAIDescription:
+      '請輸入有效的 OpenAI Access Token。如果您有 Refresh Token，建議也一併填寫以支援自動刷新。',
     getAccessTokenMethod: '取得 Access Token 的方法：',
     claudeCredentialsPath: '請從已登入 Claude Code 的機器上取得',
     geminiCredentialsPath: '請從已登入 Gemini CLI 的機器上取得',
-    openaiCredentialsPath: '請從已登入 OpenAI 帳戶的機器上取得認證憑證，或透過 OAuth 授權流程取得 Access Token。',
+    openaiCredentialsPath:
+      '請從已登入 OpenAI 帳戶的機器上取得認證憑證，或透過 OAuth 授權流程取得 Access Token。',
     claudeCredentialsWarning: '檔案中的憑證，請勿使用 Claude 官網 API Keys 頁面的金鑰。',
     refreshTokenWarning: '💡 如果未填寫 Refresh Token，Token 過期後需要手動更新。',
     accessTokenOptional: 'Access Token (可選)',
@@ -1404,38 +2014,42 @@ export default {
     refreshTokenRequiredInfo: '系統將使用 Refresh Token 自動取得 Access Token 和使用者資訊',
     refreshTokenOptional: 'Refresh Token (可選)',
     refreshTokenOptionalPlaceholder: '請輸入 Refresh Token...',
-    
+
     // 優先級設定
     priorityPlaceholder: '數字越小優先級越高，預設50',
     priorityDescription: '數字越小優先級越高，建議範圍：1-100',
     prioritySchedulingTitle: '排程優先級 (1-100)',
     priorityEditPlaceholder: '數字越小優先級越高',
-    
+
     // Gemini 專案ID
     projectIdOptional: '專案 ID (可選)',
     projectIdPlaceholder: '例如：verdant-wares-464411-k9',
     projectIdDescription: 'Google Cloud/Workspace 帳號可能需要提供專案 ID',
-    
+
     // Claude 訂閱類型和進階選項
     subscriptionType: '訂閱類型',
     claudeMaxSubscription: 'Claude Max',
     claudeProSubscription: 'Claude Pro',
     claudeProLimitation: 'Pro 帳號不支援 Claude Opus 4 模型',
     autoStopOnWarning: '5小時使用量接近限制時自動停止排程',
-    autoStopOnWarningDescription: '當系統檢測到帳戶接近5小時使用限制時，自動暫停排程該帳戶。進入新的時間視窗後會自動恢復排程。',
+    autoStopOnWarningDescription:
+      '當系統檢測到帳戶接近5小時使用限制時，自動暫停排程該帳戶。進入新的時間視窗後會自動恢復排程。',
     useUnifiedUserAgent: '使用統一 Claude Code 版本',
-    useUnifiedUserAgentDescription: '開啟後將使用從真實 Claude Code 用戶端捕獲的統一 User-Agent，提高相容性',
+    useUnifiedUserAgentDescription:
+      '開啟後將使用從真實 Claude Code 用戶端捕獲的統一 User-Agent，提高相容性',
     currentUnifiedVersion: '目前統一版本：',
     clearCache: '清除快取',
     clearing: '清除中...',
     waitingForCapture: '等待從 Claude Code 用戶端捕獲 User-Agent',
-    captureHint: '💡 提示：如果長時間未能捕獲，請確認有 Claude Code 用戶端正在使用此帳戶，或聯絡開發者檢查 User-Agent 格式是否發生變化',
+    captureHint:
+      '💡 提示：如果長時間未能捕獲，請確認有 Claude Code 用戶端正在使用此帳戶，或聯絡開發者檢查 User-Agent 格式是否發生變化',
     useUnifiedClientId: '使用統一的用戶端識別',
-    useUnifiedClientIdDescription: '開啟後將使用固定的用戶端識別，使所有請求看起來來自同一個用戶端，減少特徵',
+    useUnifiedClientIdDescription:
+      '開啟後將使用固定的用戶端識別，使所有請求看起來來自同一個用戶端，減少特徵',
     clientIdLabel: '用戶端識別 ID',
     regenerateClientId: '重新產生',
     clientIdDescription: '此ID將替換請求中的user_id用戶端部分，保留session部分用於黏性工作階段',
-    
+
     // 編輯模式欄位
     accountNameEdit: '帳戶名稱',
     accountNameEditPlaceholder: '為帳戶設定一個易識別的名稱',
@@ -1446,7 +2060,7 @@ export default {
     noAvailableGroups: '暫無可用群組',
     membersCount: ' 個成員',
     createNewGroup: '新建群組',
-    
+
     // AWS Bedrock 設定
     bedrockCredentials: '憑證設定',
     bedrockCredentialsDescription: '請填寫 AWS 存取憑證，用於呼叫 Amazon Bedrock 服務。',
@@ -1466,7 +2080,7 @@ export default {
     smallFastModelLabel: '小型快速模型',
     smallFastModelPlaceholder: '例如：anthropic.claude-3-haiku-20240307-v1:0',
     smallFastModelDescription: '用於簡單任務的快速模型，支援 inference profile ID 或 ARN',
-    
+
     // Azure OpenAI 設定
     azureOpenAIConfig: 'Azure OpenAI 設定',
     azureOpenAIDescription: '請設定 Azure OpenAI 服務的連線資訊和部署詳情。',
@@ -1486,10 +2100,11 @@ export default {
     azureAccountSettings: '帳戶設定',
     azureIsActive: '啟用此帳戶',
     azureSchedulable: '允許調度',
-    
+
     // Claude Console 模型映射
     claudeConsoleModels: '模型映射',
-    claudeConsoleModelsDescription: '設定模型請求的映射關係，將客戶端請求的模型名映射為實際呼叫的模型。',
+    claudeConsoleModelsDescription:
+      '設定模型請求的映射關係，將客戶端請求的模型名映射為實際呼叫的模型。',
     modelMappingFrom: '請求模型',
     modelMappingFromPlaceholder: '例如：claude-3-5-sonnet-20241022',
     modelMappingTo: '實際模型',
@@ -1499,7 +2114,7 @@ export default {
     presetMappings: '預設映射',
     modelMappingExample: '示例：claude-3-5-sonnet-20241022 → claude-3-5-sonnet-latest',
     noMappingsConfigured: '暫未設定映射，將直接使用原模型名',
-    
+
     // Setup Token 授權流程詳細步驟
     setupTokenAuth: 'Setup Token 授權',
     setupTokenAuthDescription: 'Setup Token 是安全的授權方式，透過臨時授權碼完成帳戶驗證。',
@@ -1518,7 +2133,7 @@ export default {
     setupTokenAuthCodeDescription: '完成授權後，將顯示類似 "auth_code_xxx" 格式的授權碼',
     setupTokenSmartDetection: '智能檢測',
     setupTokenSmartDetectionDesc: '支援直接貼上完整的回調 URL，系統會自動提取授權碼',
-    
+
     // 更多錯誤訊息和驗證文字
     unsupportedPlatform: '不支援的平台',
     accountCreationFailed: '帳戶建立失敗',
@@ -1530,7 +2145,7 @@ export default {
     unknownError: '未知錯誤',
     modelMappingExistsInfo: '模型映射已存在',
     modelAddedMapping: '已新增映射',
-    
+
     // 限流和配額管理
     rateLimitSettings: '限流設定',
     enableRateLimit: '啟用速率限制',
@@ -1544,13 +2159,13 @@ export default {
     quotaResetTimePlaceholder: '例如：00:00',
     quotaResetDescription: '每天配額重設的時間點',
     currentDailyUsage: '今日已用',
-    
+
     // 進階設定
     advancedSettings: '進階設定',
     customUserAgent: '自定義 User-Agent',
     customUserAgentPlaceholder: '留空使用預設 User-Agent...',
     userAgentDescription: '用於請求時的 User-Agent 識別',
-    
+
     // 通用提示和狀態
     notSet: '未設定',
     unlimited: '無限制',
@@ -1561,7 +2176,7 @@ export default {
     optional: '可選',
     required: '必填',
     recommended: '推薦',
-    
+
     // 額外的操作按鈕
     testConnection: '測試連線',
     testing: '測試中...',
@@ -1571,21 +2186,24 @@ export default {
     validating: '驗證中...',
     save: '儲存',
     saving: '儲存中...',
-    
+
     // 使用情況和統計
     usageStats: '使用統計',
     loadingUsage: '載入使用情況...',
     usageLoadFailed: '使用情況載入失敗',
-    
+
     // Gemini 專案 ID 詳細說明
     geminiProjectIdRequired: 'Google Cloud/Workspace 帳戶需要提供專案 ID',
-    geminiProjectIdDetail: '某些 Google 帳戶（特別是綁定了 Google Cloud 的帳戶）會被識別為 Workspace 帳戶，需要提供額外的專案 ID。',
+    geminiProjectIdDetail:
+      '某些 Google 帳戶（特別是綁定了 Google Cloud 的帳戶）會被識別為 Workspace 帳戶，需要提供額外的專案 ID。',
     geminiHowToGetProjectId: '如何取得專案 ID：',
     geminiVisitConsole: '造訪',
     geminiCopyProjectId: '複製專案 ID（Project ID），通常是字串格式',
-    geminiProjectIdWarning: '⚠️ 注意：要複製專案 ID（Project ID），不要複製專案編號（Project Number）！',
-    geminiPersonalAccountTip: '提示：如果您的帳戶是普通個人帳戶（未綁定 Google Cloud），請留空此欄位。',
-    
+    geminiProjectIdWarning:
+      '⚠️ 注意：要複製專案 ID（Project ID），不要複製專案編號（Project Number）！',
+    geminiPersonalAccountTip:
+      '提示：如果您的帳戶是普通個人帳戶（未綁定 Google Cloud），請留空此欄位。',
+
     // AWS 區域參考
     awsRegionReference: '常用 AWS 區域參考：',
     awsRegionEastUS: 'us-east-1 (美國東部)',
@@ -1595,17 +2213,17 @@ export default {
     awsRegionAsiaTokyo: 'ap-northeast-1 (東京)',
     awsRegionEuropeFrankfurt: 'eu-central-1 (法蘭克福)',
     awsRegionInputTip: '💡 請輸入完整的區域代碼，如 us-east-1',
-    
+
     // Bedrock 模型說明
     bedrockModelConfigDesc: 'Bedrock 模型設定說明：',
     bedrockSupportsInferenceProfile: '支援 Inference Profile ID（推薦）',
     bedrockSupportsARN: '支援 Application Inference Profile ARN',
     bedrockCommonModel: '常用模型：us.anthropic.claude-sonnet-4-20250514-v1:0',
     bedrockEmptyUsesDefault: '留空將使用系統設定的預設模型',
-    
+
     // Azure OpenAI 模型選擇
     azureModelSelectionDesc: '選擇此部署支援的模型類型',
-    
+
     // 限流機制
     rateLimitMechanism: '限流機制',
     enableRateLimitMechanism: '啟用限流機制',
@@ -1613,37 +2231,37 @@ export default {
     rateLimitDurationMinutes: '限流時間 (分鐘)',
     rateLimitDefaultMinutes: '預設60分鐘',
     rateLimitPauseDesc: '帳戶被限流後暫停調度的時間（分鐘）',
-    
+
     // Claude Console 特定欄位
     claudeConsoleFields: 'Claude Console 特定欄位',
     quotaManagement: '額度管理',
     modelMappingTable: '模型映射表',
     modelMappingTableOptional: '模型映射表 (可選)',
     addModelMapping: '新增模型映射',
-    
+
     // Claude 訂閱類型
     subscriptionType: '訂閱類型',
-    
+
     // Setup Token 授權
     setupTokenAuth: 'Setup Token 授權',
     claudeSetupTokenAuth: 'Claude Setup Token 授權',
     setupTokenAuthSteps: '請按照以下步驟透過 Setup Token 完成 Claude 帳戶的授權：',
     generateSetupTokenLink: '產生 Setup Token 授權連結',
     generating: '產生中...',
-    
+
     // 按鈕和操作
     verifying: '驗證中...',
     completeAuth: '完成授權',
     updating: '更新中...',
     update: '更新',
-    
+
     // 錯誤訊息
     generateSetupTokenFailed: '產生Setup Token授權連結失敗',
     copyFailed: '複製失敗，請手動複製',
     setupTokenAuthFailed: 'Setup Token授權失敗，請檢查授權碼是否正確',
     accountCreationFailed: '帳戶建立失敗',
     accountCreationError: '帳戶建立失敗:',
-    
+
     // 頁面結構註釋
     stepIndicator: '步驟指示器',
     step1BasicInfo: '步驟1: 基本資訊和代理設定',
@@ -1653,7 +2271,7 @@ export default {
     geminiProjectId: 'Gemini 專案 ID 欄位',
     bedrockFields: 'Bedrock 特定欄位',
     azureOpenAIFields: 'Azure OpenAI 特定欄位',
-    
+
     // 驗證訊息
     nameRequired: '請填寫帳戶名稱',
     apiUrlRequired: '請填寫 API URL',
@@ -1666,8 +2284,9 @@ export default {
     dailyQuotaDescription: '設定每日使用額度，0 表示不限制',
     quotaResetTime: '額度重設時間',
     quotaResetTimeDescription: '每日自動重設額度的時間',
-    modelMappingDescription: '留空表示支援所有模型且不修改請求。設定映射後，左側模型會被識別為支援的模型，右側是實際傳送的模型。',
-    
+    modelMappingDescription:
+      '留空表示支援所有模型且不修改請求。設定映射後，左側模型會被識別為支援的模型，右側是實際傳送的模型。',
+
     // 額度管理
     quotaManagementFields: '配額管理欄位',
     dailyQuotaLimitDollar: '每日配額限制 ($)',
@@ -1675,34 +2294,38 @@ export default {
     dailyQuotaDesc: '設定每日使用配額，0 表示不限制',
     quotaResetTime: '配額重設時間',
     quotaResetTimeDesc: '每日自動重設配額的時間',
-    
+
     // 模型映射
     modelMappingOptional: '模型映射表 (可選)',
-    modelMappingDesc: '留空表示支援所有模型且不修改請求。設定映射後，左側模型會被識別為支援的模型，右側是實際發送的模型。',
+    modelMappingDesc:
+      '留空表示支援所有模型且不修改請求。設定映射後，左側模型會被識別為支援的模型，右側是實際發送的模型。',
     originalModelName: '原始模型名稱',
     mappedModelName: '映射後的模型名稱',
     addModelMappingBtn: '新增模型映射',
     customUserAgentOptional: '自定義 User-Agent (可選)',
     customUserAgentDesc: '留空時將自動使用客戶端的 User-Agent，僅在需要固定特定 UA 時填寫',
     userAgentPassthrough: '留空則透傳客戶端 User-Agent',
-    
+
     // Claude 訂閱類型
     claudeSubscriptionType: '訂閱類型',
     claudeProLimitation: 'Pro 帳戶不支援 Claude Opus 4 模型',
-    
+
     // Claude 進階選項
     claudeAutoStopScheduling: '5小時使用量接近限制時自動停止調度',
-    claudeAutoStopDesc: '當系統檢測到帳戶接近5小時使用限制時，自動暫停調度該帳戶。進入新的時間視窗後會自動恢復調度。',
+    claudeAutoStopDesc:
+      '當系統檢測到帳戶接近5小時使用限制時，自動暫停調度該帳戶。進入新的時間視窗後會自動恢復調度。',
     claudeUseUnifiedUA: '使用統一 Claude Code 版本',
     claudeUnifiedUADesc: '開啟後將使用從真實 Claude Code 客戶端捕獲的統一 User-Agent，提高相容性',
     claudeCurrentUnifiedVersion: '💡 目前統一版本：',
     claudeWaitingCapture: '⏳ 等待從 Claude Code 客戶端捕獲 User-Agent',
-    claudeCaptureHint: '💡 提示：如果長時間未能捕獲，請確認有 Claude Code 客戶端正在使用此帳戶， 或聯繫開發者檢查 User-Agent 格式是否發生變化',
+    claudeCaptureHint:
+      '💡 提示：如果長時間未能捕獲，請確認有 Claude Code 客戶端正在使用此帳戶， 或聯繫開發者檢查 User-Agent 格式是否發生變化',
     claudeUseUnifiedClientId: '使用統一的客戶端標識',
-    claudeUnifiedClientIdDesc: '開啟後將使用固定的客戶端標識，使所有請求看起來來自同一個客戶端，減少特徵',
+    claudeUnifiedClientIdDesc:
+      '開啟後將使用固定的客戶端標識，使所有請求看起來來自同一個客戶端，減少特徵',
     claudeClientIdLabel: '客戶端標識 ID',
     claudeClientIdDesc: '此ID將替換請求中的user_id客戶端部分，保留session部分用於黏性工作階段',
-    
+
     // Setup Token 流程
     setupTokenAuthProcess: 'Claude Setup Token 授權',
     setupTokenProcessDesc: '請按照以下步驟透過 Setup Token 完成 Claude 帳戶的授權：',
@@ -1711,21 +2334,21 @@ export default {
     setupTokenGenerating: '產生中...',
     setupTokenGenerateBtn: '產生 Setup Token 授權連結',
     setupTokenCopyTitle: '複製連結',
-    
+
     // 步驟指示器
     stepIndicator: '步驟指示器',
     step1BasicInfo: '步驟1: 基本資訊和代理設定',
     step2OAuth: '步驟2: OAuth授權',
     step2SetupToken: '步驟2: Setup Token授權',
-    
+
     // 群組選擇器
     groupSelector: '群組選擇器',
     multiGroupInterface: '多選群組介面',
     createNewGroupOption: '新建群組選項',
-    
+
     // 手動輸入Token提示
     credentialsFromFile: '檔案中的憑證。',
-    
+
     // Placeholder 文字
     originalModelNamePlaceholder: '原始模型名稱',
     mappedModelNamePlaceholder: '映射後的模型名稱',
@@ -1734,7 +2357,7 @@ export default {
     leaveEmptyNoUpdate: '留空表示不更新',
     leaveEmptyNoUpdateKey: '留空表示不更新 API Key',
     leaveEmptyNoUpdateToken: '留空表示不更新...',
-    
+
     // 標籤和描述
     customUserAgentOptional: '自定義 User-Agent (可選)',
     clientIdLabel: '用戶端標識 ID',
@@ -1744,15 +2367,16 @@ export default {
     newAccessTokenLabel: '新的 Access Token',
     newRefreshTokenLabel: '新的 Refresh Token',
     updateTokenLabel: '更新 Token',
-    
+
     // 按鈕文字
     regenerateBtn: '重新產生',
     previousStepBtn: '上一步',
-    
+
     // 描述性文字
     claudeProLimitation: 'Pro 帳戶不支援 Claude Opus 4 模型',
     claude5HourLimitDesc: '5小時使用量接近限制時自動停止調度',
-    claude5HourLimitExplanation: '當系統檢測到帳戶接近5小時使用限制時，自動暫停調度該帳戶。進入新的時間視窗後會自動恢復調度。',
+    claude5HourLimitExplanation:
+      '當系統檢測到帳戶接近5小時使用限制時，自動暫停調度該帳戶。進入新的時間視窗後會自動恢復調度。',
     useUnifiedClaudeVersion: '使用統一 Claude Code 版本',
     unifiedVersionDesc: '開啟後將使用從真實 Claude Code 用戶端捕獲的統一 User-Agent，提高相容性',
     currentUnifiedVersion: '💡 目前統一版本：',
@@ -1762,7 +2386,7 @@ export default {
     useUnifiedClientId: '使用統一的用戶端標識',
     unifiedClientIdDesc: '開啟後將使用固定的用戶端標識，使所有請求看起來來自同一個用戶端，減少特徵',
     clientIdReplaceDesc: '此ID將替換請求中的user_id用戶端部分，保留session部分用於黏性工作階段',
-    
+
     // OAuth 步驟文字
     step1GenerateAuthLink: '步驟1: 產生授權連結',
     clickButtonGenerate: '點擊下方按鈕產生授權連結',
@@ -1775,30 +2399,31 @@ export default {
     inputAuthCodeTitle: '輸入 Authorization Code',
     authCompleteDesc: '授權完成後，從返回頁面複製 Authorization Code，並貼上到下方輸入框：',
     pasteAuthCodeDesc: '請貼上從 Claude Code 授權頁面複製的 Authorization Code',
-    
+
     // AWS 區域參考
     awsRegionRef: '常用 AWS 區域參考：',
-    
+
     // 錯誤訊息
     apiKeyRequired: '請填寫 API Key',
     refreshTokenRequired: '請填寫 Refresh Token',
     accessTokenRequired: '請填寫 Access Token',
     copyFailedManual: '複製失敗，請手動複製',
-    
+
     // 表單描述
-    modelSupportDesc: '留空表示支援所有模型。如果指定模型，請求中的模型不在列表內將不會調度到此帳戶',
+    modelSupportDesc:
+      '留空表示支援所有模型。如果指定模型，請求中的模型不在列表內將不會調度到此帳戶',
     modelTypeSelectionDesc: '選擇此部署支援的模型類型',
     userAgentDesc: '留空時將自動使用用戶端的 User-Agent，僅在需要固定特定 UA 時填寫',
-    
+
     // 基础標籤
     apiUrlLabel: 'API URL',
     apiUrlRequired: 'API URL *',
     apiKeyLabel: 'API Key',
     apiKeyRequired: 'API Key *',
-    
+
     // 更多缺失的翻譯鍵
     copyLinkTooltip: '複製連結',
-    
+
     // Claude 訂閱類型顯示
     claudeMaxDisplay: 'Claude Max',
     claudeProDisplay: 'Claude Pro'
@@ -1810,29 +2435,30 @@ export default {
     claudeAccountAuth: 'Claude 帳戶授權',
     geminiAccountAuth: 'Gemini 帳戶授權',
     openaiAccountAuth: 'OpenAI 帳戶授權',
-    
+
     // 流程說明
     claudeAuthDescription: '請按照以下步驟完成 Claude 帳戶的授權：',
     geminiAuthDescription: '請按照以下步驟完成 Gemini 帳戶的授權：',
     openaiAuthDescription: '請按照以下步驟完成 OpenAI 帳戶的授權：',
-    
+
     // 步驟標題
     step1Title: '點擊下方按銮產生授權連結',
     step2Title: '在瀏覽器中打開連結並完成授權',
     step3Title: '輸入 Authorization Code',
     step3TitleOpenAI: '輸入授權連結或 Code',
-    
+
     // 步驟描述
     step2Description: '請在新分頁中打開授權連結，登入您的 Claude 帳戶並授權。',
     step2DescriptionGemini: '請在新分頁中打開授權連結，登入您的 Gemini 帳戶並授權。',
     step2DescriptionOpenAI: '請在新分頁中打開授權連結，登入您的 OpenAI 帳戶並授權。',
-    
+
     step3Description: '授權完成後，頁面會顯示一個',
     step3DescriptionMiddle: '，請將其複製並貼上到下方輸入框：',
-    step3DescriptionGemini: '授權完成後，頁面會顯示一個 Authorization Code，請將其複製並貼上到下方輸入框：',
+    step3DescriptionGemini:
+      '授權完成後，頁面會顯示一個 Authorization Code，請將其複製並貼上到下方輸入框：',
     step3DescriptionOpenAI: '授權完成後，當頁面地址變為',
     step3DescriptionOpenAIMiddle: '時：',
-    
+
     // 按銮文字
     generating: '產生中...',
     generateAuthLink: '產生授權連結',
@@ -1840,36 +2466,37 @@ export default {
     previousStep: '上一步',
     completeAuth: '完成授權',
     verifying: '驗證中...',
-    
+
     // 占位符
     authCodePlaceholder: '貼上Claude頁面獲取的Authorization Code...',
     authCodePlaceholderGemini: '貼上Gemini頁面獲取的Authorization Code...',
-    authCodePlaceholderOpenAI: '方式1：複製完整的連結（http://localhost:1455/auth/callback?code=...)\n方式2：僅複製 code 參數的值\n系統會自動識別並提取所需資訊',
-    
+    authCodePlaceholderOpenAI:
+      '方式1：複製完整的連結（http://localhost:1455/auth/callback?code=...)\n方式2：僅複製 code 參數的值\n系統會自動識別並提取所需資訊',
+
     // 標籤
     authorizationCode: 'Authorization Code',
     authLinkOrCode: '授權連結或 Code',
-    
+
     // 提示資訊
     copyLinkTooltip: '複製連結',
     authCodeHint: '請貼上Claude頁面複製的Authorization Code',
     authCodeHintGemini: '請貼上Gemini頁面複製的Authorization Code',
-    
+
     // 注意事項
     proxyNotice: '注意：',
     proxyNoticeText: '如果您設定了代理，請確保瀏覽器也使用相同的代理訪問授權頁面。',
-    
+
     // OpenAI 特有提示
     openaiImportantNote: '重要提示：',
     openaiLoadingNote: '授權後頁面可能會加載較長時間，請耐心等待。',
     openaiAddressNote: '當瀏覽器地址欄變為',
     openaiAddressNoteMiddle: '開頭時，表示授權已完成。',
-    
+
     openaiTip: '提示：',
     openaiTipText: '您可以直接複製整個連結或僅複製 code 參數值，系統會自動識別。',
     openaiLinkExample: '• 完整連結示例：',
     openaiCodeExample: '• 僅 Code 示例：',
-    
+
     // 成功和錯誤消息
     successExtractCode: '成功提取授權碼！',
     errorCodeNotFound: 'URL 中未找到授權碼參數，請檢查連結是否正確',
diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
index a3edc5ed..f89cfa02 100644
--- a/web/admin-spa/src/views/AccountsView.vue
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -60,11 +60,7 @@
 
             <!-- 刷新按钮 -->
             <div class="relative">
-              <el-tooltip
-                :content="t('accounts.refreshTooltip')"
-                effect="dark"
-                placement="bottom"
-              >
+              <el-tooltip :content="t('accounts.refreshTooltip')" effect="dark" placement="bottom">
                 <button
                   class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 sm:w-auto"
                   :disabled="accountsLoading"
@@ -110,7 +106,9 @@
           <i class="fas fa-user-circle text-xl text-gray-400" />
         </div>
         <p class="text-lg text-gray-500 dark:text-gray-400">{{ t('accounts.noAccounts') }}</p>
-        <p class="mt-2 text-sm text-gray-400 dark:text-gray-500">{{ t('accounts.noAccountsHint') }}</p>
+        <p class="mt-2 text-sm text-gray-400 dark:text-gray-500">
+          {{ t('accounts.noAccountsHint') }}
+        </p>
       </div>
 
       <!-- 桌面端表格视图 -->
@@ -390,7 +388,9 @@
                     class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gradient-to-r from-gray-100 to-gray-200 px-2.5 py-1"
                   >
                     <i class="fas fa-question text-xs text-gray-700" />
-                    <span class="text-xs font-semibold text-gray-800">{{ t('accounts.unknown') }}</span>
+                    <span class="text-xs font-semibold text-gray-800">{{
+                      t('accounts.unknown')
+                    }}</span>
                   </div>
                 </div>
               </td>
@@ -451,7 +451,11 @@
                         typeof account.rateLimitStatus === 'object' &&
                         account.rateLimitStatus.minutesRemaining > 0
                       "
-                      >({{ t('accounts.rateLimitTime', { time: formatRateLimitTime(account.rateLimitStatus.minutesRemaining) }) }})</span
+                      >({{
+                        t('accounts.rateLimitTime', {
+                          time: formatRateLimitTime(account.rateLimitStatus.minutesRemaining)
+                        })
+                      }})</span
                     >
                   </span>
                   <span
@@ -609,7 +613,11 @@
                       v-if="account.sessionWindow.remainingTime > 0"
                       class="font-medium text-indigo-600 dark:text-indigo-400"
                     >
-                      {{ t('accounts.remaining', { time: formatRemainingTime(account.sessionWindow.remainingTime) }) }}
+                      {{
+                        t('accounts.remaining', {
+                          time: formatRemainingTime(account.sessionWindow.remainingTime)
+                        })
+                      }}
                     </div>
                   </div>
                 </div>
@@ -617,7 +625,9 @@
                 <div v-else-if="account.platform === 'claude-console'" class="space-y-2">
                   <div v-if="Number(account.dailyQuota) > 0">
                     <div class="flex items-center justify-between text-xs">
-                      <span class="text-gray-600 dark:text-gray-300">{{ t('accounts.quotaProgress') }}</span>
+                      <span class="text-gray-600 dark:text-gray-300">{{
+                        t('accounts.quotaProgress')
+                      }}</span>
                       <span class="font-medium text-gray-700 dark:text-gray-200">
                         {{ getQuotaUsagePercent(account).toFixed(1) }}%
                       </span>
@@ -642,9 +652,9 @@
                     </div>
                     <div class="text-xs text-gray-600 dark:text-gray-400">
                       {{ t('accounts.remainingQuota', { amount: formatRemainingQuota(account) }) }}
-                      <span class="ml-2 text-gray-400"
-                        >{{ t('accounts.reset', { time: account.quotaResetTime || '00:00' }) }}</span
-                      >
+                      <span class="ml-2 text-gray-400">{{
+                        t('accounts.reset', { time: account.quotaResetTime || '00:00' })
+                      }}</span>
                     </div>
                   </div>
                   <div v-else class="text-sm text-gray-400">
@@ -682,7 +692,11 @@
                         : 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
                     ]"
                     :disabled="account.isResetting"
-                    :title="account.isResetting ? t('accounts.resetting') : t('accounts.resetStatusTooltip')"
+                    :title="
+                      account.isResetting
+                        ? t('accounts.resetting')
+                        : t('accounts.resetStatusTooltip')
+                    "
                     @click="resetAccountStatus(account)"
                   >
                     <i :class="['fas fa-redo', account.isResetting ? 'animate-spin' : '']" />
@@ -698,11 +712,17 @@
                           : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                     ]"
                     :disabled="account.isTogglingSchedulable"
-                    :title="account.schedulable ? t('accounts.disableTooltip') : t('accounts.enableTooltip')"
+                    :title="
+                      account.schedulable
+                        ? t('accounts.disableTooltip')
+                        : t('accounts.enableTooltip')
+                    "
                     @click="toggleSchedulable(account)"
                   >
                     <i :class="['fas', account.schedulable ? 'fa-toggle-on' : 'fa-toggle-off']" />
-                    <span class="ml-1">{{ account.schedulable ? t('accounts.scheduling') : t('accounts.disabled') }}</span>
+                    <span class="ml-1">{{
+                      account.schedulable ? t('accounts.scheduling') : t('accounts.disabled')
+                    }}</span>
                   </button>
                   <button
                     class="rounded bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200"
@@ -799,7 +819,9 @@
           <!-- 使用统计 -->
           <div class="mb-3 grid grid-cols-2 gap-3">
             <div>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('accounts.dailyUsageLabel') }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('accounts.dailyUsageLabel') }}
+              </p>
               <div class="space-y-1">
                 <div class="flex items-center gap-1.5">
                   <div class="h-1.5 w-1.5 rounded-full bg-blue-500" />
@@ -822,7 +844,9 @@
               </div>
             </div>
             <div>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('accounts.sessionWindowLabel') }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('accounts.sessionWindowLabel') }}
+              </p>
               <div v-if="account.usage && account.usage.sessionWindow" class="space-y-1">
                 <div class="flex items-center gap-1.5">
                   <div class="h-1.5 w-1.5 rounded-full bg-purple-500" />
@@ -854,11 +878,10 @@
             >
               <div class="flex items-center justify-between text-xs">
                 <div class="flex items-center gap-1">
-                  <span class="font-medium text-gray-600 dark:text-gray-300">{{ t('accounts.sessionWindowLabel') }}</span>
-                  <el-tooltip
-                    :content="t('accounts.sessionWindowTooltipMobile')"
-                    placement="top"
-                  >
+                  <span class="font-medium text-gray-600 dark:text-gray-300">{{
+                    t('accounts.sessionWindowLabel')
+                  }}</span>
+                  <el-tooltip :content="t('accounts.sessionWindowTooltipMobile')" placement="top">
                     <i
                       class="fas fa-question-circle cursor-help text-xs text-gray-400 hover:text-gray-600"
                     />
@@ -890,7 +913,11 @@
                   v-if="account.sessionWindow.remainingTime > 0"
                   class="font-medium text-indigo-600"
                 >
-                  {{ t('accounts.remaining', { time: formatRemainingTime(account.sessionWindow.remainingTime) }) }}
+                  {{
+                    t('accounts.remaining', {
+                      time: formatRemainingTime(account.sessionWindow.remainingTime)
+                    })
+                  }}
                 </span>
                 <span v-else class="text-gray-500"> {{ t('accounts.ended') }} </span>
               </div>
@@ -898,9 +925,15 @@
 
             <!-- 最后使用时间 -->
             <div class="flex items-center justify-between text-xs">
-              <span class="text-gray-500 dark:text-gray-400">{{ t('accounts.lastUsedLabel') }}</span>
+              <span class="text-gray-500 dark:text-gray-400">{{
+                t('accounts.lastUsedLabel')
+              }}</span>
               <span class="text-gray-700 dark:text-gray-200">
-                {{ account.lastUsedAt ? formatRelativeTime(account.lastUsedAt) : t('accounts.neverUsed') }}
+                {{
+                  account.lastUsedAt
+                    ? formatRelativeTime(account.lastUsedAt)
+                    : t('accounts.neverUsed')
+                }}
               </span>
             </div>
 
@@ -917,7 +950,9 @@
 
             <!-- 调度优先级 -->
             <div class="flex items-center justify-between text-xs">
-              <span class="text-gray-500 dark:text-gray-400">{{ t('accounts.priorityLabel') }}</span>
+              <span class="text-gray-500 dark:text-gray-400">{{
+                t('accounts.priorityLabel')
+              }}</span>
               <span class="font-medium text-gray-700 dark:text-gray-200">
                 {{ account.priority || 50 }}
               </span>
@@ -1610,10 +1645,7 @@ const deleteAccount = async (account) => {
   ).length
 
   if (boundKeysCount > 0) {
-    showToast(
-      t('accounts.cannotDeleteBoundAccount', { count: boundKeysCount }),
-      'error'
-    )
+    showToast(t('accounts.cannotDeleteBoundAccount', { count: boundKeysCount }), 'error')
     return
   }
 
@@ -1749,7 +1781,10 @@ const toggleSchedulable = async (account) => {
 
     if (data.success) {
       account.schedulable = data.schedulable
-      showToast(data.schedulable ? t('accounts.enabledScheduling') : t('accounts.disabledScheduling'), 'success')
+      showToast(
+        data.schedulable ? t('accounts.enabledScheduling') : t('accounts.disabledScheduling'),
+        'success'
+      )
     } else {
       showToast(data.message || t('accounts.operationFailed'), 'error')
     }
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index c35be8fa..58bb3200 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -68,7 +68,10 @@
                   icon="fa-calendar-alt"
                   icon-color="text-blue-500"
                   :options="timeRangeOptions"
-                  :placeholder="timeRangeOptions.find(o => o.value === 'today')?.label || t('apiKeys.timeRange.today')"
+                  :placeholder="
+                    timeRangeOptions.find((o) => o.value === 'today')?.label ||
+                    t('apiKeys.timeRange.today')
+                  "
                   @change="loadApiKeys()"
                 />
               </div>
@@ -84,7 +87,9 @@
                     icon="fa-tags"
                     icon-color="text-purple-500"
                     :options="tagOptions"
-                    :placeholder="tagOptions.find(o => o.value === '')?.label || t('apiKeys.allTags')"
+                    :placeholder="
+                      tagOptions.find((o) => o.value === '')?.label || t('apiKeys.allTags')
+                    "
                     @change="currentPage = 1"
                   />
                   <span
@@ -105,7 +110,11 @@
                   <input
                     v-model="searchKeyword"
                     class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 pl-9 text-sm text-gray-700 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:hover:border-gray-500"
-                    :placeholder="isLdapEnabled ? t('apiKeys.searchPlaceholderWithOwner') : t('apiKeys.searchPlaceholder')"
+                    :placeholder="
+                      isLdapEnabled
+                        ? t('apiKeys.searchPlaceholderWithOwner')
+                        : t('apiKeys.searchPlaceholder')
+                    "
                     type="text"
                     @input="currentPage = 1"
                   />
@@ -148,7 +157,9 @@
                   class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
                 ></div>
                 <i class="fas fa-edit relative text-blue-600 dark:text-blue-400" />
-                <span class="relative">{{ t('apiKeys.bulkEdit') }} ({{ selectedApiKeys.length }})</span>
+                <span class="relative"
+                  >{{ t('apiKeys.bulkEdit') }} ({{ selectedApiKeys.length }})</span
+                >
               </button>
 
               <!-- 批量删除按钮 - 移到刷新按钮旁边 -->
@@ -161,7 +172,9 @@
                   class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-red-500 to-pink-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
                 ></div>
                 <i class="fas fa-trash relative text-red-600 dark:text-red-400" />
-                <span class="relative">{{ t('apiKeys.bulkDelete') }} ({{ selectedApiKeys.length }})</span>
+                <span class="relative"
+                  >{{ t('apiKeys.bulkDelete') }} ({{ selectedApiKeys.length }})</span
+                >
               </button>
             </div>
 
@@ -471,25 +484,34 @@
                         <!-- 今日使用统计 -->
                         <div class="mb-2">
                           <div class="mb-1 flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.dailyRequests') }}</span>
+                            <span class="text-gray-600 dark:text-gray-400">{{
+                              t('apiKeys.dailyRequests')
+                            }}</span>
                             <span class="font-semibold text-gray-900 dark:text-gray-100"
-                              >{{ formatNumber(key.usage?.daily?.requests || 0) }}{{ t('apiKeys.requests') }}</span
+                              >{{ formatNumber(key.usage?.daily?.requests || 0)
+                              }}{{ t('apiKeys.requests') }}</span
                             >
                           </div>
                           <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.dailyCost') }}</span>
+                            <span class="text-gray-600 dark:text-gray-400">{{
+                              t('apiKeys.dailyCost')
+                            }}</span>
                             <span class="font-semibold text-green-600"
                               >${{ (key.dailyCost || 0).toFixed(4) }}</span
                             >
                           </div>
                           <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.totalCost') }}</span>
+                            <span class="text-gray-600 dark:text-gray-400">{{
+                              t('apiKeys.totalCost')
+                            }}</span>
                             <span class="font-semibold text-blue-600"
                               >${{ (key.totalCost || 0).toFixed(4) }}</span
                             >
                           </div>
                           <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.lastUsed') }}</span>
+                            <span class="text-gray-600 dark:text-gray-400">{{
+                              t('apiKeys.lastUsed')
+                            }}</span>
                             <span class="font-medium text-gray-700 dark:text-gray-300">{{
                               formatLastUsed(key.lastUsedAt)
                             }}</span>
@@ -499,7 +521,9 @@
                         <!-- 每日费用限制进度条 -->
                         <div v-if="key.dailyCostLimit > 0" class="space-y-1">
                           <div class="flex items-center justify-between text-xs">
-                            <span class="text-gray-500 dark:text-gray-400">{{ t('apiKeys.dailyLimit') }}</span>
+                            <span class="text-gray-500 dark:text-gray-400">{{
+                              t('apiKeys.dailyLimit')
+                            }}</span>
                             <span class="text-gray-700 dark:text-gray-300">
                               ${{ (key.dailyCost || 0).toFixed(2) }} / ${{
                                 key.dailyCostLimit.toFixed(2)
@@ -518,7 +542,9 @@
                         <!-- Opus 周费用限制进度条 -->
                         <div v-if="key.weeklyOpusCostLimit > 0" class="space-y-1">
                           <div class="flex items-center justify-between text-xs">
-                            <span class="text-gray-500 dark:text-gray-400">{{ t('apiKeys.weeklyOpusLimit') }}</span>
+                            <span class="text-gray-500 dark:text-gray-400">{{
+                              t('apiKeys.weeklyOpusLimit')
+                            }}</span>
                             <span class="text-gray-700 dark:text-gray-300">
                               ${{ (key.weeklyOpusCost || 0).toFixed(2) }} / ${{
                                 key.weeklyOpusCostLimit.toFixed(2)
@@ -703,7 +729,9 @@
                     <td class="bg-gray-50 px-3 py-4 dark:bg-gray-700" colspan="8">
                       <div v-if="!apiKeyModelStats[key.id]" class="py-4 text-center">
                         <div class="loading-spinner mx-auto" />
-                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ t('apiKeys.loadingModelStats') }}</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                          {{ t('apiKeys.loadingModelStats') }}
+                        </p>
                       </div>
                       <div class="space-y-4">
                         <!-- 通用的标题和时间筛选器，无论是否有数据都显示 -->
@@ -719,7 +747,11 @@
                               v-if="apiKeyModelStats[key.id] && apiKeyModelStats[key.id].length > 0"
                               class="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400"
                             >
-                              {{ t('apiKeys.modelStatsCount', { count: apiKeyModelStats[key.id].length }) }}
+                              {{
+                                t('apiKeys.modelStatsCount', {
+                                  count: apiKeyModelStats[key.id].length
+                                })
+                              }}
                             </span>
 
                             <!-- API Keys日期筛选器 -->
@@ -773,7 +805,9 @@
                         >
                           <div class="mb-3 flex items-center justify-center gap-2">
                             <i class="fas fa-chart-line text-lg text-gray-400" />
-                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('apiKeys.noModelData') }}</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                              {{ t('apiKeys.noModelData') }}
+                            </p>
                             <button
                               class="ml-2 flex items-center gap-1 text-sm text-blue-500 transition-colors hover:text-blue-700"
                               :title="t('apiKeys.resetFilter')"
@@ -1078,7 +1112,9 @@
                 <!-- 今日使用 -->
                 <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700">
                   <div class="mb-2 flex items-center justify-between">
-                    <span class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiKeys.dailyUsage') }}</span>
+                    <span class="text-xs text-gray-600 dark:text-gray-400">{{
+                      t('apiKeys.dailyUsage')
+                    }}</span>
                     <button
                       class="text-xs text-blue-600 hover:text-blue-800"
                       @click="showUsageDetails(key)"
@@ -1089,19 +1125,26 @@
                   <div class="grid grid-cols-2 gap-3">
                     <div>
                       <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                        {{ formatNumber(key.usage?.daily?.requests || 0) }} {{ t('apiKeys.requests') }}
+                        {{ formatNumber(key.usage?.daily?.requests || 0) }}
+                        {{ t('apiKeys.requests') }}
+                      </p>
+                      <p class="text-xs text-gray-500 dark:text-gray-400">
+                        {{ t('apiKeys.requests') }}
                       </p>
-                      <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('apiKeys.requests') }}</p>
                     </div>
                     <div>
                       <p class="text-sm font-semibold text-green-600">
                         ${{ (key.dailyCost || 0).toFixed(4) }}
                       </p>
-                      <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('apiKeys.totalCost') }}</p>
+                      <p class="text-xs text-gray-500 dark:text-gray-400">
+                        {{ t('apiKeys.totalCost') }}
+                      </p>
                     </div>
                   </div>
                   <div class="mt-2 flex items-center justify-between">
-                    <span class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiKeys.lastUsed') }}</span>
+                    <span class="text-xs text-gray-600 dark:text-gray-400">{{
+                      t('apiKeys.lastUsed')
+                    }}</span>
                     <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
                       formatLastUsed(key.lastUsedAt)
                     }}</span>
@@ -1111,7 +1154,9 @@
                 <!-- 限制进度 -->
                 <div v-if="key.dailyCostLimit > 0" class="space-y-1">
                   <div class="flex items-center justify-between text-xs">
-                    <span class="text-gray-500 dark:text-gray-400">{{ t('apiKeys.dailyLimit') }}</span>
+                    <span class="text-gray-500 dark:text-gray-400">{{
+                      t('apiKeys.dailyLimit')
+                    }}</span>
                     <span class="text-gray-700 dark:text-gray-300">
                       ${{ (key.dailyCost || 0).toFixed(2) }} / ${{ key.dailyCostLimit.toFixed(2) }}
                     </span>
@@ -1250,7 +1295,9 @@
                 {{ t('apiKeys.totalRecords', { count: sortedApiKeys.length }) }}
               </span>
               <div class="flex items-center gap-2">
-                <span class="text-xs text-gray-600 dark:text-gray-400 sm:text-sm">{{ t('apiKeys.pageSize') }}</span>
+                <span class="text-xs text-gray-600 dark:text-gray-400 sm:text-sm">{{
+                  t('apiKeys.pageSize')
+                }}</span>
                 <select
                   v-model="pageSize"
                   class="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 transition-colors hover:border-gray-300 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-500 sm:text-sm"
@@ -1260,7 +1307,9 @@
                     {{ size }}
                   </option>
                 </select>
-                <span class="text-xs text-gray-600 dark:text-gray-400 sm:text-sm">{{ t('apiKeys.records') }}</span>
+                <span class="text-xs text-gray-600 dark:text-gray-400 sm:text-sm">{{
+                  t('apiKeys.records')
+                }}</span>
               </div>
             </div>
 
@@ -1475,19 +1524,26 @@
                     <td class="px-3 py-4">
                       <div class="text-sm">
                         <div class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.requests') }}</span>
+                          <span class="text-gray-600 dark:text-gray-400">{{
+                            t('apiKeys.requests')
+                          }}</span>
                           <span class="font-semibold text-gray-900 dark:text-gray-100">
-                            {{ formatNumber(key.usage?.total?.requests || 0) }} {{ t('apiKeys.requests') }}
+                            {{ formatNumber(key.usage?.total?.requests || 0) }}
+                            {{ t('apiKeys.requests') }}
                           </span>
                         </div>
                         <div class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.totalCost') }}</span>
+                          <span class="text-gray-600 dark:text-gray-400">{{
+                            t('apiKeys.totalCost')
+                          }}</span>
                           <span class="font-semibold text-green-600">
                             ${{ (key.usage?.total?.cost || 0).toFixed(4) }}
                           </span>
                         </div>
                         <div v-if="key.lastUsedAt" class="flex items-center justify-between">
-                          <span class="text-gray-600 dark:text-gray-400">{{ t('apiKeys.lastUsed') }}</span>
+                          <span class="text-gray-600 dark:text-gray-400">{{
+                            t('apiKeys.lastUsed')
+                          }}</span>
                           <span class="font-medium text-gray-700 dark:text-gray-300">
                             {{ formatLastUsed(key.lastUsedAt) }}
                           </span>
@@ -2350,9 +2406,7 @@ const toggleApiKeyStatus = async (key) => {
       )
     } else {
       // 降级方案
-      confirmed = confirm(
-        t('apiKeys.confirmDisable', { name: key.name })
-      )
+      confirmed = confirm(t('apiKeys.confirmDisable', { name: key.name }))
     }
   }
 
@@ -2539,7 +2593,12 @@ const batchDeleteApiKeys = async () => {
   const message = t('apiKeys.confirmBatchDelete', { count: selectedCount })
 
   if (window.showConfirm) {
-    confirmed = await window.showConfirm(t('apiKeys.confirmBatchDelete').split(' ')[0], message, t('common.confirm'), t('common.cancel'))
+    confirmed = await window.showConfirm(
+      t('apiKeys.confirmBatchDelete').split(' ')[0],
+      message,
+      t('common.confirm'),
+      t('common.cancel')
+    )
   } else {
     confirmed = confirm(message)
   }
@@ -2562,7 +2621,10 @@ const batchDeleteApiKeys = async () => {
         // 如果有失败的，显示详细信息
         if (failedCount > 0) {
           const errorMessages = errors.map((e) => `${e.keyId}: ${e.error}`).join('\n')
-          showToast(t('apiKeys.batchPartialFail', { failed: failedCount }) + ':\n' + errorMessages, 'warning')
+          showToast(
+            t('apiKeys.batchPartialFail', { failed: failedCount }) + ':\n' + errorMessages,
+            'warning'
+          )
         }
       } else {
         showToast(t('apiKeys.batchAllFailed'), 'error')
diff --git a/web/admin-spa/src/views/ApiStatsView.vue b/web/admin-spa/src/views/ApiStatsView.vue
index d96b3c50..2eaeeb50 100644
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -33,7 +33,9 @@
             to="/user-login"
           >
             <i class="fas fa-user text-sm md:text-base" />
-            <span class="text-xs font-semibold tracking-wide md:text-sm">{{ t('apiStats.userLogin') }}</span>
+            <span class="text-xs font-semibold tracking-wide md:text-sm">{{
+              t('apiStats.userLogin')
+            }}</span>
           </router-link>
           <!-- 管理后台按钮 -->
           <router-link
@@ -42,7 +44,9 @@
             to="/dashboard"
           >
             <i class="fas fa-shield-alt text-sm md:text-base" />
-            <span class="text-xs font-semibold tracking-wide md:text-sm">{{ t('apiStats.adminPanel') }}</span>
+            <span class="text-xs font-semibold tracking-wide md:text-sm">{{
+              t('apiStats.adminPanel')
+            }}</span>
           </router-link>
         </div>
       </div>
@@ -97,9 +101,9 @@
             >
               <div class="flex items-center gap-2 md:gap-3">
                 <i class="fas fa-clock text-base text-blue-500 md:text-lg" />
-                <span class="text-base font-medium text-gray-700 dark:text-gray-200 md:text-lg"
-                  >{{ t('apiStats.timeRange') }}</span
-                >
+                <span class="text-base font-medium text-gray-700 dark:text-gray-200 md:text-lg">{{
+                  t('apiStats.timeRange')
+                }}</span>
               </div>
               <div class="flex w-full gap-2 md:w-auto">
                 <button
@@ -190,7 +194,7 @@ const currentTutorialComponent = computed(() => {
   const components = {
     'zh-cn': TutorialViewZhCn,
     'zh-tw': TutorialViewZhTw,
-    'en': TutorialViewEn
+    en: TutorialViewEn
   }
   return components[locale] || TutorialViewZhCn
 })
diff --git a/web/admin-spa/src/views/DashboardView.vue b/web/admin-spa/src/views/DashboardView.vue
index f668fd20..60e8dbbc 100644
--- a/web/admin-spa/src/views/DashboardView.vue
+++ b/web/admin-spa/src/views/DashboardView.vue
@@ -42,7 +42,12 @@
                     dashboardData.accountsByPlatform.claude.total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.claudeAccount', { total: dashboardData.accountsByPlatform.claude.total, normal: dashboardData.accountsByPlatform.claude.normal })"
+                  :title="
+                    t('dashboard.claudeAccount', {
+                      total: dashboardData.accountsByPlatform.claude.total,
+                      normal: dashboardData.accountsByPlatform.claude.normal
+                    })
+                  "
                 >
                   <i class="fas fa-brain text-xs text-indigo-600" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -56,7 +61,12 @@
                     dashboardData.accountsByPlatform['claude-console'].total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.consoleAccount', { total: dashboardData.accountsByPlatform['claude-console'].total, normal: dashboardData.accountsByPlatform['claude-console'].normal })"
+                  :title="
+                    t('dashboard.consoleAccount', {
+                      total: dashboardData.accountsByPlatform['claude-console'].total,
+                      normal: dashboardData.accountsByPlatform['claude-console'].normal
+                    })
+                  "
                 >
                   <i class="fas fa-terminal text-xs text-purple-600" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -70,7 +80,12 @@
                     dashboardData.accountsByPlatform.gemini.total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.geminiAccount', { total: dashboardData.accountsByPlatform.gemini.total, normal: dashboardData.accountsByPlatform.gemini.normal })"
+                  :title="
+                    t('dashboard.geminiAccount', {
+                      total: dashboardData.accountsByPlatform.gemini.total,
+                      normal: dashboardData.accountsByPlatform.gemini.normal
+                    })
+                  "
                 >
                   <i class="fas fa-robot text-xs text-yellow-600" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -84,7 +99,12 @@
                     dashboardData.accountsByPlatform.bedrock.total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.bedrockAccount', { total: dashboardData.accountsByPlatform.bedrock.total, normal: dashboardData.accountsByPlatform.bedrock.normal })"
+                  :title="
+                    t('dashboard.bedrockAccount', {
+                      total: dashboardData.accountsByPlatform.bedrock.total,
+                      normal: dashboardData.accountsByPlatform.bedrock.normal
+                    })
+                  "
                 >
                   <i class="fab fa-aws text-xs text-orange-600" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -98,7 +118,12 @@
                     dashboardData.accountsByPlatform.openai.total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.openaiAccount', { total: dashboardData.accountsByPlatform.openai.total, normal: dashboardData.accountsByPlatform.openai.normal })"
+                  :title="
+                    t('dashboard.openaiAccount', {
+                      total: dashboardData.accountsByPlatform.openai.total,
+                      normal: dashboardData.accountsByPlatform.openai.normal
+                    })
+                  "
                 >
                   <i class="fas fa-openai text-xs text-gray-100" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -112,7 +137,12 @@
                     dashboardData.accountsByPlatform.azure_openai.total > 0
                   "
                   class="inline-flex items-center gap-0.5"
-                  :title="t('dashboard.azureOpenaiAccount', { total: dashboardData.accountsByPlatform.azure_openai.total, normal: dashboardData.accountsByPlatform.azure_openai.normal })"
+                  :title="
+                    t('dashboard.azureOpenaiAccount', {
+                      total: dashboardData.accountsByPlatform.azure_openai.total,
+                      normal: dashboardData.accountsByPlatform.azure_openai.normal
+                    })
+                  "
                 >
                   <i class="fab fa-microsoft text-xs text-blue-600" />
                   <span class="text-xs font-medium text-gray-700 dark:text-gray-300">{{
@@ -153,7 +183,8 @@
               {{ dashboardData.todayRequests }}
             </p>
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              {{ t('dashboard.totalRequests') }}: {{ formatNumber(dashboardData.totalRequests || 0) }}
+              {{ t('dashboard.totalRequests') }}:
+              {{ formatNumber(dashboardData.totalRequests || 0) }}
             </p>
           </div>
           <div class="stat-icon flex-shrink-0 bg-gradient-to-br from-purple-500 to-purple-600">
@@ -303,7 +334,9 @@
           <div>
             <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
               {{ t('dashboard.realtimeRPM') }}
-              <span class="text-xs text-gray-400">({{ dashboardData.metricsWindow }}{{ t('dashboard.minutes') }})</span>
+              <span class="text-xs text-gray-400"
+                >({{ dashboardData.metricsWindow }}{{ t('dashboard.minutes') }})</span
+              >
             </p>
             <p class="text-2xl font-bold text-orange-600 sm:text-3xl">
               {{ dashboardData.realtimeRPM || 0 }}
@@ -326,7 +359,9 @@
           <div>
             <p class="mb-1 text-xs font-semibold text-gray-600 dark:text-gray-400 sm:text-sm">
               {{ t('dashboard.realtimeTPM') }}
-              <span class="text-xs text-gray-400">({{ dashboardData.metricsWindow }}{{ t('dashboard.minutes') }})</span>
+              <span class="text-xs text-gray-400"
+                >({{ dashboardData.metricsWindow }}{{ t('dashboard.minutes') }})</span
+              >
             </p>
             <p class="text-2xl font-bold text-rose-600 sm:text-3xl">
               {{ formatNumber(dashboardData.realtimeTPM || 0) }}
@@ -453,7 +488,9 @@
               @click="refreshAllData()"
             >
               <i :class="['fas fa-sync-alt text-xs', { 'animate-spin': isRefreshing }]" />
-              <span class="hidden sm:inline">{{ isRefreshing ? t('dashboard.refreshing') : t('dashboard.refresh') }}</span>
+              <span class="hidden sm:inline">{{
+                isRefreshing ? t('dashboard.refreshing') : t('dashboard.refresh')
+              }}</span>
             </button>
           </div>
         </div>
@@ -579,7 +616,9 @@
               ]"
               @click="((apiKeysTrendMetric = 'requests'), updateApiKeysUsageTrendChart())"
             >
-              <i class="fas fa-exchange-alt mr-1" /><span class="hidden sm:inline">{{ t('dashboard.requestsCount') }}</span
+              <i class="fas fa-exchange-alt mr-1" /><span class="hidden sm:inline">{{
+                t('dashboard.requestsCount')
+              }}</span
               ><span class="sm:hidden">{{ t('dashboard.requestsCount').split(' ')[0] }}</span>
             </button>
             <button
@@ -591,7 +630,9 @@
               ]"
               @click="((apiKeysTrendMetric = 'tokens'), updateApiKeysUsageTrendChart())"
             >
-              <i class="fas fa-coins mr-1" /><span class="hidden sm:inline">{{ t('dashboard.tokenCount') }}</span
+              <i class="fas fa-coins mr-1" /><span class="hidden sm:inline">{{
+                t('dashboard.tokenCount')
+              }}</span
               ><span class="sm:hidden">Token</span>
             </button>
           </div>
@@ -600,7 +641,9 @@
           <span v-if="apiKeysTrendData.totalApiKeys > 10">
             {{ t('dashboard.showingTop10', { count: apiKeysTrendData.totalApiKeys }) }}
           </span>
-          <span v-else>{{ t('dashboard.totalApiKeysCount', { count: apiKeysTrendData.totalApiKeys }) }}</span>
+          <span v-else>{{
+            t('dashboard.totalApiKeysCount', { count: apiKeysTrendData.totalApiKeys })
+          }}</span>
         </div>
         <div class="sm:h-[350px]" style="height: 300px">
           <canvas ref="apiKeysUsageTrendChart" />
@@ -1164,7 +1207,10 @@ function createApiKeysUsageTrendChart() {
           beginAtZero: true,
           title: {
             display: true,
-            text: apiKeysTrendMetric.value === 'tokens' ? t('dashboard.tokenQuantity') : t('dashboard.requestsQuantity'),
+            text:
+              apiKeysTrendMetric.value === 'tokens'
+                ? t('dashboard.tokenQuantity')
+                : t('dashboard.requestsQuantity'),
             color: chartColors.value.text
           },
           ticks: {
diff --git a/web/admin-spa/src/views/LoginView.vue b/web/admin-spa/src/views/LoginView.vue
index 6e19b64d..abb99aae 100644
--- a/web/admin-spa/src/views/LoginView.vue
+++ b/web/admin-spa/src/views/LoginView.vue
@@ -42,7 +42,8 @@
 
       <form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
         <div>
-          <label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+          <label
+            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
             >{{ t('login.username') }}</label
           >
           <input
@@ -55,7 +56,8 @@
         </div>
 
         <div>
-          <label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
+          <label
+            class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
             >{{ t('login.password') }}</label
           >
           <input
diff --git a/web/admin-spa/src/views/SettingsView.vue b/web/admin-spa/src/views/SettingsView.vue
index e53a8999..1dfee1b4 100644
--- a/web/admin-spa/src/views/SettingsView.vue
+++ b/web/admin-spa/src/views/SettingsView.vue
@@ -6,7 +6,9 @@
         <h3 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100 sm:mb-2 sm:text-xl">
           {{ t('settings.title') }}
         </h3>
-        <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-base">{{ t('settings.description') }}</p>
+        <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-base">
+          {{ t('settings.description') }}
+        </p>
       </div>
 
       <!-- 设置分类导航 -->
@@ -66,7 +68,9 @@
                         <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                           {{ t('settings.siteName') }}
                         </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ t('settings.siteNameDescription') }}</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">
+                          {{ t('settings.siteNameDescription') }}
+                        </div>
                       </div>
                     </div>
                   </td>
@@ -75,7 +79,7 @@
                       v-model="oemSettings.siteName"
                       class="form-input w-full max-w-md dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
                       maxlength="100"
-:placeholder="t('settings.siteNamePlaceholder')"
+                      :placeholder="t('settings.siteNamePlaceholder')"
                       type="text"
                     />
                     <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -97,7 +101,9 @@
                         <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                           {{ t('settings.siteIcon') }}
                         </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ t('settings.siteIconDescription') }}</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">
+                          {{ t('settings.siteIconDescription') }}
+                        </div>
                       </div>
                     </div>
                   </td>
@@ -109,12 +115,14 @@
                         class="inline-flex items-center gap-3 rounded-lg bg-gray-50 p-3 dark:bg-gray-700"
                       >
                         <img
-:alt="t('settings.iconPreview')"
+                          :alt="t('settings.iconPreview')"
                           class="h-8 w-8"
                           :src="oemSettings.siteIconData || oemSettings.siteIcon"
                           @error="handleIconError"
                         />
-                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ t('settings.currentIcon') }}</span>
+                        <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                          t('settings.currentIcon')
+                        }}</span>
                         <button
                           class="rounded-lg px-3 py-1 font-medium text-red-600 transition-colors hover:bg-red-50 hover:text-red-900"
                           @click="removeIcon"
@@ -139,9 +147,9 @@
                           <i class="fas fa-upload mr-2" />
                           {{ t('settings.uploadIcon') }}
                         </button>
-                        <span class="ml-3 text-xs text-gray-500 dark:text-gray-400"
-                          >{{ t('settings.iconFormats') }}</span
-                        >
+                        <span class="ml-3 text-xs text-gray-500 dark:text-gray-400">{{
+                          t('settings.iconFormats')
+                        }}</span>
                       </div>
                     </div>
                   </td>
@@ -160,7 +168,9 @@
                         <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                           {{ t('settings.adminEntry') }}
                         </div>
-                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ t('settings.adminEntryDescription') }}</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400">
+                          {{ t('settings.adminEntryDescription') }}
+                        </div>
                       </div>
                     </div>
                   </td>
@@ -172,7 +182,9 @@
                           class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
                         ></div>
                         <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{
-                          hideAdminButton ? t('settings.hideLoginButton') : t('settings.showLoginButton')
+                          hideAdminButton
+                            ? t('settings.hideLoginButton')
+                            : t('settings.showLoginButton')
                         }}</span>
                       </label>
                     </div>
@@ -213,7 +225,9 @@
                         class="text-sm text-gray-500 dark:text-gray-400"
                       >
                         <i class="fas fa-clock mr-1" />
-                        {{ t('settings.lastUpdated', { time: formatDateTime(oemSettings.updatedAt) }) }}
+                        {{
+                          t('settings.lastUpdated', { time: formatDateTime(oemSettings.updatedAt) })
+                        }}
                       </div>
                     </div>
                   </td>
@@ -233,15 +247,19 @@
                   <i class="fas fa-tag"></i>
                 </div>
                 <div>
-                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ t('settings.siteNameCard') }}</h3>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('settings.siteNameCardDesc') }}</p>
+                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ t('settings.siteNameCard') }}
+                  </h3>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ t('settings.siteNameCardDesc') }}
+                  </p>
                 </div>
               </div>
               <input
                 v-model="oemSettings.siteName"
                 class="form-input w-full dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
                 maxlength="100"
-:placeholder="t('settings.siteNamePlaceholder')"
+                :placeholder="t('settings.siteNamePlaceholder')"
                 type="text"
               />
             </div>
@@ -255,7 +273,9 @@
                   <i class="fas fa-image"></i>
                 </div>
                 <div>
-                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ t('settings.siteIconCard') }}</h3>
+                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ t('settings.siteIconCard') }}
+                  </h3>
                   <p class="text-sm text-gray-500 dark:text-gray-400">
                     {{ t('settings.siteIconCardDesc') }}
                   </p>
@@ -268,12 +288,14 @@
                   class="inline-flex items-center gap-3 rounded-lg bg-gray-50 p-3 dark:bg-gray-700"
                 >
                   <img
-:alt="t('settings.iconPreview')"
+                    :alt="t('settings.iconPreview')"
                     class="h-8 w-8"
                     :src="oemSettings.siteIconData || oemSettings.siteIcon"
                     @error="handleIconError"
                   />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">{{ t('settings.currentIcon') }}</span>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">{{
+                    t('settings.currentIcon')
+                  }}</span>
                   <button
                     class="rounded-lg px-3 py-1 font-medium text-red-600 transition-colors hover:bg-red-50 hover:text-red-900"
                     @click="removeIcon"
@@ -314,8 +336,12 @@
                   <i class="fas fa-eye-slash"></i>
                 </div>
                 <div>
-                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ t('settings.adminEntryCard') }}</h3>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('settings.adminEntryCardDesc') }}</p>
+                  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ t('settings.adminEntryCard') }}
+                  </h3>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    {{ t('settings.adminEntryCardDesc') }}
+                  </p>
                 </div>
               </div>
               <div class="space-y-2">
@@ -362,7 +388,9 @@
                   class="text-center text-sm text-gray-500 dark:text-gray-400"
                 >
                   <i class="fas fa-clock mr-1" />
-                  {{ t('settings.lastUpdatedMobile', { time: formatDateTime(oemSettings.updatedAt) }) }}
+                  {{
+                    t('settings.lastUpdatedMobile', { time: formatDateTime(oemSettings.updatedAt) })
+                  }}
                 </div>
               </div>
             </div>
@@ -402,7 +430,9 @@
           <div
             class="mb-6 rounded-lg bg-white/80 p-6 shadow-lg backdrop-blur-sm dark:bg-gray-800/80"
           >
-            <h2 class="mb-4 text-lg font-semibold text-gray-800 dark:text-gray-200">{{ t('settings.notificationTypes') }}</h2>
+            <h2 class="mb-4 text-lg font-semibold text-gray-800 dark:text-gray-200">
+              {{ t('settings.notificationTypes') }}
+            </h2>
             <div class="space-y-3">
               <div
                 v-for="(enabled, type) in webhookConfig.notificationTypes"
@@ -1207,7 +1237,10 @@ const savePlatform = async () => {
     }
 
     if (response.success && isMounted.value) {
-      showToast(editingPlatform.value ? t('settings.platformUpdated') : t('settings.platformAdded'), 'success')
+      showToast(
+        editingPlatform.value ? t('settings.platformUpdated') : t('settings.platformAdded'),
+        'success'
+      )
       await loadWebhookConfig()
       closePlatformModal()
     }
diff --git a/web/admin-spa/src/views/TutorialView.vue b/web/admin-spa/src/views/TutorialView.vue
index 1401b520..43c4b36b 100644
--- a/web/admin-spa/src/views/TutorialView.vue
+++ b/web/admin-spa/src/views/TutorialView.vue
@@ -17,8 +17,8 @@ const currentTutorialComponent = computed(() => {
   const components = {
     'zh-cn': TutorialViewZhCn,
     'zh-tw': TutorialViewZhTw,
-    'en': TutorialViewEn
+    en: TutorialViewEn
   }
   return components[locale] || TutorialViewZhCn
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/web/admin-spa/src/views/UserDashboardView.vue b/web/admin-spa/src/views/UserDashboardView.vue
index 5f847e15..f13e52d5 100644
--- a/web/admin-spa/src/views/UserDashboardView.vue
+++ b/web/admin-spa/src/views/UserDashboardView.vue
@@ -72,7 +72,8 @@
           </div>
           <div class="flex items-center space-x-4">
             <div class="text-sm text-gray-700 dark:text-gray-300">
-              {{ t('user.dashboard.welcome') }}, <span class="font-medium">{{ userStore.userName }}</span>
+              {{ t('user.dashboard.welcome') }},
+              <span class="font-medium">{{ userStore.userName }}</span>
             </div>
 
             <!-- 主题切换按钮 -->
@@ -94,7 +95,9 @@
       <!-- Overview Tab -->
       <div v-if="activeTab === 'overview'" class="space-y-6">
         <div>
-          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ t('user.dashboard.title') }}</h1>
+          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
+            {{ t('user.dashboard.title') }}
+          </h1>
           <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {{ t('user.dashboard.welcomeMessage') }}
           </p>
@@ -272,25 +275,33 @@
             <div class="mt-5 border-t border-gray-200 dark:border-gray-700">
               <dl class="divide-y divide-gray-200 dark:divide-gray-700">
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.username') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.username') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ userProfile?.username }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.displayName') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.displayName') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ userProfile?.displayName || t('user.dashboard.notAvailable') }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.email') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.email') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ userProfile?.email || t('user.dashboard.notAvailable') }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.role') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.role') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     <span
                       class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200"
@@ -300,13 +311,17 @@
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.memberSince') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.memberSince') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ formatDate(userProfile?.createdAt) }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.lastLogin') }}</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('user.dashboard.lastLogin') }}
+                  </dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ formatDate(userProfile?.lastLoginAt) || t('user.dashboard.notAvailable') }}
                   </dd>
diff --git a/web/admin-spa/src/views/UserManagementView.vue b/web/admin-spa/src/views/UserManagementView.vue
index cb1d3a6d..6bebeda6 100644
--- a/web/admin-spa/src/views/UserManagementView.vue
+++ b/web/admin-spa/src/views/UserManagementView.vue
@@ -3,7 +3,9 @@
     <!-- Header -->
     <div class="sm:flex sm:items-center">
       <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ t('user.management.title') }}</h1>
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">
+          {{ t('user.management.title') }}
+        </h1>
         <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
           {{ t('user.management.description') }}
         </p>
@@ -254,7 +256,9 @@
             fill="currentColor"
           ></path>
         </svg>
-        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ t('user.management.loadingUsers') }}</p>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          {{ t('user.management.loadingUsers') }}
+        </p>
       </div>
 
       <!-- Users List -->
@@ -299,7 +303,9 @@
                           : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                       ]"
                     >
-                      {{ user.isActive ? t('user.management.active') : t('user.management.disabled') }}
+                      {{
+                        user.isActive ? t('user.management.active') : t('user.management.disabled')
+                      }}
                     </span>
                     <span
                       :class="[
@@ -328,8 +334,14 @@
                   v-if="user.totalUsage"
                   class="mt-1 flex items-center space-x-4 text-xs text-gray-400 dark:text-gray-500"
                 >
-                  <span>{{ formatNumber(user.totalUsage.requests || 0) }} {{ t('user.management.requests') }}</span>
-                  <span>${{ (user.totalUsage.totalCost || 0).toFixed(4) }} {{ t('user.management.totalCostLabel') }}</span>
+                  <span
+                    >{{ formatNumber(user.totalUsage.requests || 0) }}
+                    {{ t('user.management.requests') }}</span
+                  >
+                  <span
+                    >${{ (user.totalUsage.totalCost || 0).toFixed(4) }}
+                    {{ t('user.management.totalCostLabel') }}</span
+                  >
                 </div>
               </div>
             </div>
@@ -337,7 +349,7 @@
               <!-- View Usage Stats -->
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-blue-600"
-:title="t('user.management.viewUsageStats')"
+                :title="t('user.management.viewUsageStats')"
                 @click="viewUserStats(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -354,7 +366,7 @@
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
                 :disabled="user.apiKeyCount === 0"
-:title="t('user.management.disableAllApiKeys')"
+                :title="t('user.management.disableAllApiKeys')"
                 @click="disableUserApiKeys(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -375,7 +387,9 @@
                     ? 'text-gray-400 hover:text-red-600'
                     : 'text-gray-400 hover:text-green-600'
                 ]"
-                :title="user.isActive ? t('user.management.disableUser') : t('user.management.enableUser')"
+                :title="
+                  user.isActive ? t('user.management.disableUser') : t('user.management.enableUser')
+                "
                 @click="toggleUserStatus(user)"
               >
                 <svg
@@ -405,7 +419,7 @@
               <!-- Change Role -->
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-purple-600"
-:title="t('user.management.changeRole')"
+                :title="t('user.management.changeRole')"
                 @click="changeUserRole(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -437,7 +451,9 @@
             stroke-width="2"
           />
         </svg>
-        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">{{ t('user.management.noUsersFound') }}</h3>
+        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
+          {{ t('user.management.noUsersFound') }}
+        </h3>
         <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           {{
             searchQuery ? t('user.management.noUsersMatch') : t('user.management.noUsersCreated')
@@ -597,7 +613,9 @@ const viewUserStats = (user) => {
 const toggleUserStatus = (user) => {
   selectedUser.value = user
   confirmAction.value = {
-    title: user.isActive ? t('user.management.disableUserTitle') : t('user.management.enableUserTitle'),
+    title: user.isActive
+      ? t('user.management.disableUserTitle')
+      : t('user.management.enableUserTitle'),
     message: user.isActive
       ? t('user.management.disableUserMessage', { username: user.username })
       : t('user.management.enableUserMessage', { username: user.username }),
@@ -614,7 +632,10 @@ const disableUserApiKeys = (user) => {
   selectedUser.value = user
   confirmAction.value = {
     title: t('user.management.disableAllKeysTitle'),
-    message: t('user.management.disableAllKeysMessage', { count: user.apiKeyCount, username: user.username }),
+    message: t('user.management.disableAllKeysMessage', {
+      count: user.apiKeyCount,
+      username: user.username
+    }),
     confirmText: t('user.management.disableKeys'),
     confirmClass: 'bg-red-600 hover:bg-red-700',
     action: 'disableKeys'
@@ -642,13 +663,21 @@ const handleConfirmAction = async () => {
         if (userIndex !== -1) {
           users.value[userIndex].isActive = !user.isActive
         }
-        showToast(user.isActive ? t('user.management.userDisabledSuccess') : t('user.management.userEnabledSuccess'), 'success')
+        showToast(
+          user.isActive
+            ? t('user.management.userDisabledSuccess')
+            : t('user.management.userEnabledSuccess'),
+          'success'
+        )
       }
     } else if (action === 'disableKeys') {
       const response = await apiClient.post(`/users/${user.id}/disable-keys`)
 
       if (response.success) {
-        showToast(t('user.management.keysDisabledSuccess', { count: response.disabledCount }), 'success')
+        showToast(
+          t('user.management.keysDisabledSuccess', { count: response.disabledCount }),
+          'success'
+        )
         await loadUsers() // Refresh to get updated counts
       }
     }
diff --git a/web/admin-spa/src/views/tutorials/TutorialView-en.vue b/web/admin-spa/src/views/tutorials/TutorialView-en.vue
index ca0a8c65..bd0bb6cb 100644
--- a/web/admin-spa/src/views/tutorials/TutorialView-en.vue
+++ b/web/admin-spa/src/views/tutorials/TutorialView-en.vue
@@ -81,7 +81,9 @@
                 >
                 file
               </li>
-              <li>Follow the installation wizard to complete installation, keep default settings</li>
+              <li>
+                Follow the installation wizard to complete installation, keep default settings
+              </li>
             </ol>
           </div>
           <div class="mb-3 sm:mb-4">
@@ -105,14 +107,18 @@
             <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
               <li>• Recommend using PowerShell instead of CMD</li>
               <li>• If you encounter permission issues, try running as administrator</li>
-              <li>• Some antivirus software may flag as false positive, need to add to whitelist</li>
+              <li>
+                • Some antivirus software may flag as false positive, need to add to whitelist
+              </li>
             </ul>
           </div>
         </div>
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">Verify Installation Success</h6>
+          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">
+            Verify Installation Success
+          </h6>
           <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
             After installation completes, open PowerShell or CMD and enter the following commands:
           </p>
@@ -122,7 +128,9 @@
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-xs text-green-700 sm:text-sm">If version numbers are displayed, installation was successful!</p>
+          <p class="mt-2 text-xs text-green-700 sm:text-sm">
+            If version numbers are displayed, installation was successful!
+          </p>
         </div>
       </div>
 
@@ -159,7 +167,8 @@
             </div>
           </div>
           <p class="text-sm text-gray-600 dark:text-gray-400">
-            This command will download and install the latest version of Claude Code from the official npm repository.
+            This command will download and install the latest version of Claude Code from the
+            official npm repository.
           </p>
 
           <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
@@ -173,15 +182,21 @@
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
-          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+            Verify Claude Code Installation
+          </h6>
+          <p class="mb-3 text-sm text-green-700">
+            After installation completes, enter the following command to check if installation was
+            successful:
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
           <p class="mt-2 text-sm text-green-700">
-            If version number is displayed, congratulations! Claude Code has been successfully installed.
+            If version number is displayed, congratulations! Claude Code has been successfully
+            installed.
           </p>
         </div>
       </div>
@@ -230,7 +245,8 @@
                 </div>
               </div>
               <p class="mt-2 text-xs text-yellow-700">
-                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys"
+                tab above.
               </p>
             </div>
 
@@ -280,9 +296,12 @@
 
         <!-- Verify Environment Variable Setup -->
         <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">Verify Environment Variable Setup</h6>
+          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">
+            Verify Environment Variable Setup
+          </h6>
           <p class="mb-3 text-sm text-blue-700">
-            After setting environment variables, you can verify if they were set successfully with the following commands:
+            After setting environment variables, you can verify if they were set successfully with
+            the following commands:
           </p>
 
           <div class="space-y-4">
@@ -320,7 +339,8 @@
               <div>cr_xxxxxxxxxxxxxxxxxx</div>
             </div>
             <p class="text-xs text-blue-700">
-              💡 If output is empty or shows variable name itself, environment variable setup failed, please reconfigure.
+              💡 If output is empty or shows variable name itself, environment variable setup
+              failed, please reconfigure.
             </p>
           </div>
         </div>
@@ -416,7 +436,8 @@
             Configure Codex Environment Variables
           </h5>
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+            If you use tools that support OpenAI API (such as Codex), you need to set the following
+            environment variables:
           </p>
 
           <div class="space-y-4">
@@ -528,8 +549,8 @@
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>Run PowerShell as Administrator</li>
                 <li>
-                  Or configure npm to use user directory: <code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Or configure npm to use user directory:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >npm config set prefix %APPDATA%\npm</code
                   >
                 </li>
@@ -567,7 +588,8 @@
                 <li>Restart PowerShell or CMD</li>
                 <li>Or log out and log back into Windows</li>
                 <li>
-                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Verify settings:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >echo $env:ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -605,7 +627,8 @@
           <div class="mb-4">
             <p class="mb-3 text-gray-700">Method 1: Using Homebrew (Recommended)</p>
             <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
-              If you already have Homebrew installed, using it to install Node.js will be more convenient:
+              If you already have Homebrew installed, using it to install Node.js will be more
+              convenient:
             </p>
             <div
               class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
@@ -655,15 +678,21 @@
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Installation Success</h6>
-          <p class="mb-3 text-sm text-green-700">After installation, open Terminal and enter the following commands:</p>
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+            Verify Installation Success
+          </h6>
+          <p class="mb-3 text-sm text-green-700">
+            After installation, open Terminal and enter the following commands:
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">If version numbers are displayed, the installation was successful!</p>
+          <p class="mt-2 text-sm text-green-700">
+            If version numbers are displayed, the installation was successful!
+          </p>
         </div>
       </div>
 
@@ -699,7 +728,9 @@
               npm install -g @anthropic-ai/claude-code
             </div>
           </div>
-          <p class="mb-2 text-sm text-gray-600">If you encounter permission issues, you can use sudo:</p>
+          <p class="mb-2 text-sm text-gray-600">
+            If you encounter permission issues, you can use sudo:
+          </p>
           <div
             class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
           >
@@ -711,15 +742,21 @@
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
-          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+            Verify Claude Code Installation
+          </h6>
+          <p class="mb-3 text-sm text-green-700">
+            After installation completes, enter the following command to check if installation was
+            successful:
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
           <p class="mt-2 text-sm text-green-700">
-            If version number is displayed, congratulations! Claude Code has been successfully installed.
+            If version number is displayed, congratulations! Claude Code has been successfully
+            installed.
           </p>
         </div>
       </div>
@@ -766,7 +803,8 @@
                 </div>
               </div>
               <p class="mt-2 text-xs text-yellow-700">
-                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys"
+                tab above.
               </p>
             </div>
 
@@ -903,7 +941,8 @@
             Configure Codex Environment Variables
           </h5>
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+            If you use tools that support OpenAI API (such as Codex), you need to set the following
+            environment variables:
           </p>
 
           <div class="space-y-4">
@@ -1014,13 +1053,14 @@
               <p class="mb-2">Try the following solutions:</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>
-                  Install with sudo: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Install with sudo:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >sudo npm install -g @anthropic-ai/claude-code</code
                   >
                 </li>
                 <li>
-                  Or configure npm to use user directory: <code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Or configure npm to use user directory:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >npm config set prefix ~/.npm-global</code
                   >
                 </li>
@@ -1040,7 +1080,8 @@
                 <li>Open "System Preferences" → "Security & Privacy"</li>
                 <li>Click "Allow Anyway" or "Open Anyway"</li>
                 <li>
-                  Or run in Terminal: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Or run in Terminal:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >sudo spctl --master-disable</code
                   >
                 </li>
@@ -1057,10 +1098,13 @@
             <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
               <p class="mb-2">Check the following points:</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>Confirm you modified the correct configuration file (.zshrc or .bash_profile)</li>
+                <li>
+                  Confirm you modified the correct configuration file (.zshrc or .bash_profile)
+                </li>
                 <li>Restart Terminal</li>
                 <li>
-                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Verify settings:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >echo $ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -1127,7 +1171,10 @@
             <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux Notes</h6>
             <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
               <li>• Some distributions may require additional dependencies</li>
-              <li>• If you encounter permission issues, use <code class="rounded bg-orange-200 px-1">sudo</code></li>
+              <li>
+                • If you encounter permission issues, use
+                <code class="rounded bg-orange-200 px-1">sudo</code>
+              </li>
               <li>• Ensure your user has write permissions to npm's global directory</li>
             </ul>
           </div>
@@ -1135,15 +1182,21 @@
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Installation Success</h6>
-          <p class="mb-3 text-sm text-green-700">After installation, open terminal and enter the following commands:</p>
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+            Verify Installation Success
+          </h6>
+          <p class="mb-3 text-sm text-green-700">
+            After installation, open terminal and enter the following commands:
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">If version numbers are displayed, the installation was successful!</p>
+          <p class="mt-2 text-sm text-green-700">
+            If version numbers are displayed, the installation was successful!
+          </p>
         </div>
       </div>
 
@@ -1179,7 +1232,9 @@
               npm install -g @anthropic-ai/claude-code
             </div>
           </div>
-          <p class="mb-2 text-sm text-gray-600">If you encounter permission issues, you can use sudo:</p>
+          <p class="mb-2 text-sm text-gray-600">
+            If you encounter permission issues, you can use sudo:
+          </p>
           <div
             class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
           >
@@ -1191,15 +1246,21 @@
 
         <!-- Verify Installation -->
         <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
-          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+            Verify Claude Code Installation
+          </h6>
+          <p class="mb-3 text-sm text-green-700">
+            After installation completes, enter the following command to check if installation was
+            successful:
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
           <p class="mt-2 text-sm text-green-700">
-            If version number is displayed, congratulations! Claude Code has been successfully installed.
+            If version number is displayed, congratulations! Claude Code has been successfully
+            installed.
           </p>
         </div>
       </div>
@@ -1246,7 +1307,8 @@
                 </div>
               </div>
               <p class="mt-2 text-xs text-yellow-700">
-                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys"
+                tab above.
               </p>
             </div>
 
@@ -1381,7 +1443,8 @@
             Configure Codex Environment Variables
           </h5>
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+            If you use tools that support OpenAI API (such as Codex), you need to set the following
+            environment variables:
           </p>
 
           <div class="space-y-4">
@@ -1492,18 +1555,20 @@
               <p class="mb-2">Try the following solutions:</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>
-                  Install with sudo: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Install with sudo:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >sudo npm install -g @anthropic-ai/claude-code</code
                   >
                 </li>
                 <li>
-                  Or configure npm to use user directory: <code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Or configure npm to use user directory:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >npm config set prefix ~/.npm-global</code
                   >
                 </li>
                 <li>
-                  Then add to PATH: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Then add to PATH:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >export PATH=~/.npm-global/bin:$PATH</code
                   >
                 </li>
@@ -1547,7 +1612,8 @@
                   <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
                 </li>
                 <li>
-                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  Verify settings:
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
                     >echo $ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -1564,10 +1630,12 @@
     >
       <h5 class="mb-2 text-lg font-semibold sm:text-xl">🎉 Congratulations!</h5>
       <p class="mb-3 text-sm text-blue-100 sm:mb-4 sm:text-base">
-        You have successfully installed and configured Claude Code. Now you can start enjoying the convenience brought by AI programming assistant.
+        You have successfully installed and configured Claude Code. Now you can start enjoying the
+        convenience brought by AI programming assistant.
       </p>
       <p class="text-xs text-blue-200 sm:text-sm">
-        If you encounter any issues during use, you can check the official documentation or community discussions for help.
+        If you encounter any issues during use, you can check the official documentation or
+        community discussions for help.
       </p>
     </div>
   </div>