From 4aae4aaec0ef2756a0d85f2bc32953a0219f915c Mon Sep 17 00:00:00 2001
From: Wangnov <w15365132161@gmail.com>
Date: Mon, 8 Sep 2025 19:21:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90API=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=95=B4=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 完成6个apistats组件的全面国际化改造
  * ModelUsageStats.vue - 模型使用统计
  * AggregatedStatsCard.vue - 聚合统计卡片
  * StatsOverview.vue - 统计概览
  * LimitConfig.vue - 限制配置
  * TokenDistribution.vue - Token使用分布
  * ApiKeyInput.vue - API Key输入组件

- 扩展三语言翻译支持(zh-cn/zh-tw/en)
  * 新增100+专业翻译键涵盖所有UI文字
  * 台湾本地化的繁体中文翻译
  * 技术专业的英文术语翻译
  * 支持参数化翻译处理动态内容

- 技术优化
  * 统一使用Vue 3 Composition API的useI18n()模式
  * 智能日期格式国际化处理
  * 完全消除硬编码中文文字
  * 支持条件性翻译和动态时间段显示

现在整个API统计功能模块支持完整的多语言切换体验
---
 .../apistats/AggregatedStatsCard.vue          |  15 +-
 .../src/components/apistats/ApiKeyInput.vue   |  33 +++--
 .../src/components/apistats/LimitConfig.vue   |  57 ++++----
 .../components/apistats/ModelUsageStats.vue   |  23 ++--
 .../src/components/apistats/StatsOverview.vue |  75 +++++-----
 .../components/apistats/TokenDistribution.vue |  17 ++-
 web/admin-spa/src/i18n/locales/en.js          | 130 +++++++++++++++++-
 web/admin-spa/src/i18n/locales/zh-cn.js       | 130 +++++++++++++++++-
 web/admin-spa/src/i18n/locales/zh-tw.js       | 130 +++++++++++++++++-
 9 files changed, 505 insertions(+), 105 deletions(-)

diff --git a/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue b/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
index 5b857f8e..20c693ad 100644
--- a/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
+++ b/web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
@@ -5,10 +5,10 @@
     >
       <span class="flex items-center">
         <i class="fas fa-chart-pie mr-2 text-sm text-orange-500 md:mr-3 md:text-base" />
-        使用占比
+        {{ t('apiStats.usageRatio') }}
       </span>
       <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-        >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
+        >({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
       >
     </h3>
 
@@ -33,7 +33,7 @@
         <div
           class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
         >
-          <span>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}次</span>
+          <span>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}{{ t('apiStats.requests') }}</span>
           <span>{{ getStatUsage(stat)?.formattedCost || '$0.00' }}</span>
         </div>
       </div>
@@ -41,7 +41,7 @@
       <!-- 其他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>其他 {{ otherKeysCount }} 个Keys</span>
+          <span>{{ t('apiStats.otherKeys') }} {{ otherKeysCount }} {{ t('apiStats.individual') }}{{ t('apiStats.keys') }}</span>
           <span>{{ otherPercentage }}%</span>
         </div>
       </div>
@@ -54,7 +54,7 @@
     >
       <div class="text-center">
         <i class="fas fa-chart-pie mb-2 text-2xl" />
-        <p>使用占比仅在多Key查询时显示</p>
+        <p>{{ t('apiStats.usageRatioOnlyInMultiMode') }}</p>
       </div>
     </div>
 
@@ -63,7 +63,7 @@
       class="flex h-32 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
     >
       <i class="fas fa-chart-pie mr-2" />
-      暂无数据
+      {{ t('apiStats.noData') }}
     </div>
   </div>
 </template>
@@ -71,8 +71,11 @@
 <script setup>
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const { aggregatedStats, individualStats, statsPeriod, multiKeyMode } = storeToRefs(apiStatsStore)
 
diff --git a/web/admin-spa/src/components/apistats/ApiKeyInput.vue b/web/admin-spa/src/components/apistats/ApiKeyInput.vue
index 5a0cfc99..0366e492 100644
--- a/web/admin-spa/src/components/apistats/ApiKeyInput.vue
+++ b/web/admin-spa/src/components/apistats/ApiKeyInput.vue
@@ -4,9 +4,9 @@
     <div class="wide-card-title mb-6">
       <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-200">
         <i class="fas fa-chart-line mr-3" />
-        使用统计查询
+        {{ t('apiStats.usageStatsQuery') }}
       </h2>
-      <p class="text-base text-gray-600 dark:text-gray-400">查询您的 API Key 使用情况和统计数据</p>
+      <p class="text-base text-gray-600 dark:text-gray-400">{{ t('apiStats.apiKeyDescription') }}</p>
     </div>
 
     <!-- 输入区域 -->
@@ -16,7 +16,7 @@
         <!-- API Key 标签 -->
         <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
           <i class="fas fa-key mr-2" />
-          {{ multiKeyMode ? '输入您的 API Keys（每行一个或用逗号分隔）' : '输入您的 API Key' }}
+          {{ multiKeyMode ? t('apiStats.enterApiKeys') : t('apiStats.enterApiKey') }}
         </label>
 
         <!-- 模式切换和查询按钮组 -->
@@ -28,20 +28,20 @@
             <button
               class="mode-switch-btn"
               :class="{ active: !multiKeyMode }"
-              title="单一模式"
+              :title="t('apiStats.singleModeTitle')"
               @click="multiKeyMode = false"
             >
               <i class="fas fa-key" />
-              <span class="ml-2 hidden sm:inline">单一</span>
+              <span class="ml-2 hidden sm:inline">{{ t('apiStats.singleMode') }}</span>
             </button>
             <button
               class="mode-switch-btn"
               :class="{ active: multiKeyMode }"
-              title="聚合模式"
+              :title="t('apiStats.aggregateModeTitle')"
               @click="multiKeyMode = true"
             >
               <i class="fas fa-layer-group" />
-              <span class="ml-2 hidden sm:inline">聚合</span>
+              <span class="ml-2 hidden sm:inline">{{ t('apiStats.aggregateMode') }}</span>
               <span
                 v-if="multiKeyMode && parsedApiKeys.length > 0"
                 class="ml-1 rounded-full bg-white/20 px-1.5 py-0.5 text-xs font-semibold"
@@ -62,7 +62,7 @@
             v-model="apiKey"
             class="wide-card-input w-full"
             :disabled="loading"
-            placeholder="请输入您的 API Key (cr_...)"
+            :placeholder="t('apiStats.apiKeyPlaceholder')"
             type="password"
             @keyup.enter="queryStats"
           />
@@ -73,14 +73,14 @@
               v-model="apiKey"
               class="wide-card-input w-full resize-y"
               :disabled="loading"
-              placeholder="请输入您的 API Keys，支持以下格式：&#10;cr_xxx&#10;cr_yyy&#10;或&#10;cr_xxx, cr_yyy"
+              :placeholder="t('apiStats.apiKeysPlaceholder')"
               rows="4"
               @keyup.ctrl.enter="queryStats"
             />
             <button
               v-if="apiKey && !loading"
               class="absolute right-2 top-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
-              title="清空输入"
+              :title="t('apiStats.clearInput')"
               @click="clearInput"
             >
               <i class="fas fa-times-circle" />
@@ -97,7 +97,7 @@
           >
             <i v-if="loading" class="fas fa-spinner loading-spinner" />
             <i v-else class="fas fa-search" />
-            {{ loading ? '查询中...' : '查询统计' }}
+            {{ loading ? t('common.loading') : t('apiStats.queryButton') }}
           </button>
         </div>
       </div>
@@ -105,11 +105,7 @@
       <!-- 安全提示 -->
       <div class="security-notice mt-4">
         <i class="fas fa-shield-alt mr-2" />
-        {{
-          multiKeyMode
-            ? '您的 API Keys 仅用于查询统计数据，不会被存储。聚合模式下部分个体化信息将不显示。'
-            : '您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途'
-        }}
+        {{ multiKeyMode ? t('apiStats.securityNoticeMulti') : t('apiStats.securityNoticeSingle') }}
       </div>
 
       <!-- 多 Key 模式额外提示 -->
@@ -118,7 +114,7 @@
         class="mt-2 rounded-lg bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
       >
         <i class="fas fa-lightbulb mr-2" />
-        <span>提示：最多支持同时查询 30 个 API Keys。使用 Ctrl+Enter 快速查询。</span>
+        <span>{{ t('apiStats.multiKeyTip') }}</span>
       </div>
     </div>
   </div>
@@ -127,8 +123,11 @@
 <script setup>
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const { apiKey, loading, multiKeyMode } = storeToRefs(apiStatsStore)
 const { queryStats, clearInput } = apiStatsStore
diff --git a/web/admin-spa/src/components/apistats/LimitConfig.vue b/web/admin-spa/src/components/apistats/LimitConfig.vue
index 44e0b554..a59255df 100644
--- a/web/admin-spa/src/components/apistats/LimitConfig.vue
+++ b/web/admin-spa/src/components/apistats/LimitConfig.vue
@@ -6,7 +6,7 @@
         class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
       >
         <i class="fas fa-shield-alt mr-2 text-sm text-red-500 md:mr-3 md:text-base" />
-        {{ multiKeyMode ? '限制配置（聚合查询模式）' : '限制配置' }}
+        {{ multiKeyMode ? t('apiStats.limitConfigAggregate') : t('apiStats.limitConfig') }}
       </h3>
 
       <!-- 多 Key 模式下的聚合统计信息 -->
@@ -18,7 +18,7 @@
           <div class="mb-3 flex items-center justify-between">
             <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
               <i class="fas fa-layer-group mr-2 text-blue-500" />
-              API Keys 概况
+              {{ t('apiStats.apiKeysOverview') }}
             </span>
             <span
               class="rounded-full bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-800 dark:text-blue-200"
@@ -31,13 +31,13 @@
               <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">总计 Keys</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">激活 Keys</div>
+              <div class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiStats.activeKeys') }}</div>
             </div>
           </div>
         </div>
@@ -48,13 +48,13 @@
         >
           <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">聚合统计摘要</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">
               <span class="text-xs text-gray-600 dark:text-gray-400">
                 <i class="fas fa-database mr-1 text-gray-400" />
-                总请求数
+                {{ t('apiStats.totalRequests') }}
               </span>
               <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
                 {{ formatNumber(aggregatedStats.usage.requests) }}
@@ -63,7 +63,7 @@
             <div class="flex items-center justify-between">
               <span class="text-xs text-gray-600 dark:text-gray-400">
                 <i class="fas fa-coins mr-1 text-yellow-500" />
-                总 Tokens
+                {{ t('apiStats.totalTokens') }}
               </span>
               <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
                 {{ formatNumber(aggregatedStats.usage.allTokens) }}
@@ -72,7 +72,7 @@
             <div class="flex items-center justify-between">
               <span class="text-xs text-gray-600 dark:text-gray-400">
                 <i class="fas fa-dollar-sign mr-1 text-green-500" />
-                总费用
+                {{ t('apiStats.totalCost') }}
               </span>
               <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
                 {{ aggregatedStats.usage.formattedCost }}
@@ -88,7 +88,7 @@
         >
           <i class="fas fa-exclamation-triangle mr-2 text-red-600 dark:text-red-400" />
           <span class="text-red-700 dark:text-red-300">
-            {{ invalidKeys.length }} 个无效的 API Key
+            {{ t('apiStats.invalidKeysCount', { count: invalidKeys.length }) }}
           </span>
         </div>
 
@@ -97,7 +97,7 @@
           class="rounded-lg bg-gray-50 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
         >
           <i class="fas fa-info-circle mr-1" />
-          每个 API Key 有独立的限制设置，聚合模式下不显示单个限制配置
+          {{ t('apiStats.aggregateStatsNote') }}
         </div>
       </div>
 
@@ -107,7 +107,7 @@
         <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"
-              >每日费用限制</span
+              >{{ 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">
@@ -149,7 +149,7 @@
             :current-cost="statsData.limits.currentWindowCost"
             :current-requests="statsData.limits.currentWindowRequests"
             :current-tokens="statsData.limits.currentWindowTokens"
-            label="时间窗口限制"
+            :label="t('apiStats.timeWindowLimit')"
             :rate-limit-window="statsData.limits.rateLimitWindow"
             :request-limit="statsData.limits.rateLimitRequests"
             :show-progress="true"
@@ -163,19 +163,19 @@
           <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
             <i class="fas fa-info-circle mr-1" />
             <span v-if="statsData.limits.rateLimitCost > 0">
-              请求次数和费用限制为"或"的关系，任一达到限制即触发限流
+              {{ t('apiStats.orRelationshipRequests') }}
             </span>
             <span v-else-if="statsData.limits.tokenLimit > 0">
-              请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
+              {{ t('apiStats.orRelationshipTokens') }}
             </span>
-            <span v-else> 仅限制请求次数 </span>
+            <span v-else>{{ t('apiStats.onlyRequestsLimit') }}</span>
           </div>
         </div>
 
         <!-- 其他限制信息 -->
         <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">并发限制</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 +186,7 @@
             </span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">模型限制</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,16 +196,16 @@
                 class="text-orange-600"
               >
                 <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-                限制 {{ 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" />
-                允许所有模型
+                {{ t('apiStats.allowAllModels') }}
               </span>
             </span>
           </div>
           <div class="flex items-center justify-between">
-            <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">客户端限制</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,11 +215,11 @@
                 class="text-orange-600"
               >
                 <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-                限制 {{ 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" />
-                允许所有客户端
+                {{ t('apiStats.allowAllClients') }}
               </span>
             </span>
           </div>
@@ -241,7 +241,7 @@
         class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
       >
         <i class="fas fa-list-alt mr-2 text-sm text-amber-500 md:mr-3 md:text-base" />
-        详细限制信息
+        {{ t('apiStats.detailedLimitInfo') }}
       </h3>
 
       <div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2">
@@ -257,7 +257,7 @@
             class="mb-2 flex items-center text-sm font-bold text-amber-800 dark:text-amber-300 md:mb-3 md:text-base"
           >
             <i class="fas fa-robot mr-1 text-xs md:mr-2 md:text-sm" />
-            受限模型列表
+            {{ t('apiStats.restrictedModelsList') }}
           </h4>
           <div class="space-y-1 md:space-y-2">
             <div
@@ -271,7 +271,7 @@
           </div>
           <p class="mt-2 text-xs text-amber-700 dark:text-amber-400 md:mt-3">
             <i class="fas fa-info-circle mr-1" />
-            此 API Key 不能访问以上列出的模型
+            {{ t('apiStats.restrictedModelsNote') }}
           </p>
         </div>
 
@@ -287,7 +287,7 @@
             class="mb-2 flex items-center text-sm font-bold text-blue-800 dark:text-blue-300 md:mb-3 md:text-base"
           >
             <i class="fas fa-desktop mr-1 text-xs md:mr-2 md:text-sm" />
-            允许的客户端
+            {{ t('apiStats.allowedClientsList') }}
           </h4>
           <div class="space-y-1 md:space-y-2">
             <div
@@ -301,7 +301,7 @@
           </div>
           <p class="mt-2 text-xs text-blue-700 dark:text-blue-400 md:mt-3">
             <i class="fas fa-info-circle mr-1" />
-            此 API Key 只能被以上列出的客户端使用
+            {{ t('apiStats.allowedClientsNote') }}
           </p>
         </div>
       </div>
@@ -311,9 +311,12 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 import WindowCountdown from '@/components/apikeys/WindowCountdown.vue'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const { statsData, multiKeyMode, aggregatedStats, invalidKeys } = storeToRefs(apiStatsStore)
 
diff --git a/web/admin-spa/src/components/apistats/ModelUsageStats.vue b/web/admin-spa/src/components/apistats/ModelUsageStats.vue
index 837f7eb7..b6c5c611 100644
--- a/web/admin-spa/src/components/apistats/ModelUsageStats.vue
+++ b/web/admin-spa/src/components/apistats/ModelUsageStats.vue
@@ -6,10 +6,10 @@
       >
         <span class="flex items-center">
           <i class="fas fa-robot mr-2 text-sm text-indigo-500 md:mr-3 md:text-base" />
-          模型使用统计
+          {{ t('apiStats.modelUsageStats') }}
         </span>
         <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-          >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
+          >({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
         >
       </h3>
     </div>
@@ -19,7 +19,7 @@
       <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">加载模型统计数据中...</p>
+      <p class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.loadingModelStats') }}</p>
     </div>
 
     <!-- 模型统计数据 -->
@@ -31,38 +31,38 @@
               {{ model.model }}
             </h4>
             <p class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-              {{ model.requests }} 次请求
+              {{ model.requests }}{{ t('apiStats.requestCount') }}
             </p>
           </div>
           <div class="ml-3 flex-shrink-0 text-right">
             <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">总费用</div>
+            <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">{{ t('apiStats.totalCost') }}</div>
           </div>
         </div>
 
         <div class="grid grid-cols-2 gap-2 text-xs md:grid-cols-4 md:gap-3 md:text-sm">
           <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">输入 Token</div>
+            <div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.inputTokens') }}</div>
             <div class="font-medium text-gray-900 dark:text-gray-100">
               {{ formatNumber(model.inputTokens) }}
             </div>
           </div>
           <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">输出 Token</div>
+            <div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.outputTokens') }}</div>
             <div class="font-medium text-gray-900 dark:text-gray-100">
               {{ formatNumber(model.outputTokens) }}
             </div>
           </div>
           <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">缓存创建</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>
           </div>
           <div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
-            <div class="text-gray-600 dark:text-gray-400">缓存读取</div>
+            <div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.cacheReadTokens') }}</div>
             <div class="font-medium text-gray-900 dark:text-gray-100">
               {{ formatNumber(model.cacheReadTokens) }}
             </div>
@@ -75,7 +75,7 @@
     <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">
-        暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
+        {{ t('apiStats.noModelData', { period: statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }) }}
       </p>
     </div>
   </div>
@@ -83,8 +83,11 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const { statsPeriod, modelStats, modelStatsLoading } = storeToRefs(apiStatsStore)
 
diff --git a/web/admin-spa/src/components/apistats/StatsOverview.vue b/web/admin-spa/src/components/apistats/StatsOverview.vue
index 5d4a9a6d..447cce99 100644
--- a/web/admin-spa/src/components/apistats/StatsOverview.vue
+++ b/web/admin-spa/src/components/apistats/StatsOverview.vue
@@ -11,45 +11,45 @@
             multiKeyMode ? 'fas fa-layer-group text-purple-500' : 'fas fa-info-circle text-blue-500'
           "
         />
-        {{ multiKeyMode ? '批量查询概要' : 'API Key 信息' }}
+        {{ multiKeyMode ? t('apiStats.batchQuerySummary') : t('apiStats.apiKeyInfo') }}
       </h3>
 
       <!-- 多 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">查询 Keys 数</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 }} 个
+            {{ 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">有效 Keys 数</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 }} 个
+            {{ 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">无效 Keys 数</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 }} 个
+            {{ 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">总请求数</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">总 Token 数</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">总费用</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 +60,7 @@
           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">各 Key 贡献占比</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 +79,14 @@
       <!-- 单 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">名称</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">状态</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'"
@@ -95,17 +95,17 @@
               class="mr-1 text-xs md:text-sm"
               :class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
             />
-            {{ statsData.isActive ? '活跃' : '已停用' }}
+            {{ statsData.isActive ? t('apiStats.active') : t('apiStats.inactive') }}
           </span>
         </div>
         <div class="flex items-center justify-between">
-          <span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">权限</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">创建时间</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
@@ -113,7 +113,7 @@
         </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"
-            >过期时间</span
+            >{{ t('apiStats.expiresAt') }}</span
           >
           <!-- 未激活状态 -->
           <div
@@ -121,9 +121,9 @@
             class="text-sm font-medium text-amber-600 dark:text-amber-500 md:text-base"
           >
             <i class="fas fa-pause-circle mr-1 text-xs md:text-sm" />
-            未激活
+            {{ t('apiStats.notActivated') }}
             <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
-              >(首次使用后{{ statsData.activationDays || 30 }}天过期)</span
+              >({{ t('apiStats.firstUseDays', { days: statsData.activationDays || 30 }) }})</span
             >
           </div>
           <!-- 已设置过期时间 -->
@@ -133,7 +133,7 @@
               class="text-sm font-medium text-red-600 md:text-base"
             >
               <i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
-              已过期
+              {{ t('apiStats.expired') }}
             </div>
             <div
               v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
@@ -152,7 +152,7 @@
           <!-- 永不过期 -->
           <div v-else class="text-sm font-medium text-gray-400 dark:text-gray-500 md:text-base">
             <i class="fas fa-infinity mr-1 text-xs md:text-sm" />
-            永不过期
+            {{ t('apiStats.neverExpires') }}
           </div>
         </div>
       </div>
@@ -165,10 +165,10 @@
       >
         <span class="flex items-center">
           <i class="fas fa-chart-bar mr-2 text-sm text-green-500 md:mr-3 md:text-base" />
-          使用统计概览
+          {{ t('apiStats.usageStatsOverview') }}
         </span>
         <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-          >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
+          >({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
         >
       </h3>
       <div class="grid grid-cols-2 gap-3 md:gap-4">
@@ -177,7 +177,7 @@
             {{ formatNumber(currentPeriodData.requests) }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
+            {{ statsPeriod === 'daily' ? t('apiStats.todayRequests') : t('apiStats.monthlyRequests') }}
           </div>
         </div>
         <div class="stat-card text-center">
@@ -185,7 +185,7 @@
             {{ formatNumber(currentPeriodData.allTokens) }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
+            {{ statsPeriod === 'daily' ? t('apiStats.todayTokens') : t('apiStats.monthlyTokens') }}
           </div>
         </div>
         <div class="stat-card text-center">
@@ -193,7 +193,7 @@
             {{ currentPeriodData.formattedCost || '$0.000000' }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
+            {{ statsPeriod === 'daily' ? t('apiStats.todayCost') : t('apiStats.monthlyCost') }}
           </div>
         </div>
         <div class="stat-card text-center">
@@ -201,7 +201,7 @@
             {{ formatNumber(currentPeriodData.inputTokens) }}
           </div>
           <div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
-            {{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
+            {{ statsPeriod === 'daily' ? t('apiStats.todayInputTokens') : t('apiStats.monthlyInputTokens') }}
           </div>
         </div>
       </div>
@@ -213,9 +213,12 @@
 /* eslint-disable no-unused-vars */
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 import dayjs from 'dayjs'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const {
   statsData,
@@ -245,13 +248,21 @@ const calculateContribution = (stat) => {
 
 // 格式化日期
 const formatDate = (dateString) => {
-  if (!dateString) return '无'
+  if (!dateString) return t('apiStats.none')
 
   try {
     const date = dayjs(dateString)
-    return date.format('YYYY年MM月DD日 HH:mm')
+    // 根据当前语言环境选择日期格式
+    const locale = t('common.locale', 'zh-CN')
+    if (locale === 'en') {
+      return date.format('YYYY-MM-DD HH:mm')
+    } else if (locale === 'zh-TW') {
+      return date.format('YYYY年MM月DD日 HH:mm')
+    } else {
+      return date.format('YYYY年MM月DD日 HH:mm')
+    }
   } catch (error) {
-    return '格式错误'
+    return t('apiStats.formatError')
   }
 }
 
@@ -306,10 +317,10 @@ const formatPermissions = (permissions) => {
   const permissionMap = {
     claude: 'Claude',
     gemini: 'Gemini',
-    all: '全部模型'
+    all: t('apiStats.allModels')
   }
 
-  return permissionMap[permissions] || permissions || '未知'
+  return permissionMap[permissions] || permissions || t('apiStats.unknown')
 }
 </script>
 
diff --git a/web/admin-spa/src/components/apistats/TokenDistribution.vue b/web/admin-spa/src/components/apistats/TokenDistribution.vue
index 56baa2bc..a08850d3 100644
--- a/web/admin-spa/src/components/apistats/TokenDistribution.vue
+++ b/web/admin-spa/src/components/apistats/TokenDistribution.vue
@@ -5,17 +5,17 @@
     >
       <span class="flex items-center">
         <i class="fas fa-coins mr-2 text-sm text-yellow-500 md:mr-3 md:text-base" />
-        Token 使用分布
+        {{ t('apiStats.tokenDistribution') }}
       </span>
       <span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
-        >({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
+        >({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
       >
     </h3>
     <div class="space-y-2 md:space-y-3">
       <div class="flex items-center justify-between">
         <span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
           <i class="fas fa-arrow-right mr-1 text-xs text-green-500 md:mr-2 md:text-sm" />
-          输入 Token
+          {{ t('apiStats.inputToken') }}
         </span>
         <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
           formatNumber(currentPeriodData.inputTokens)
@@ -24,7 +24,7 @@
       <div class="flex items-center justify-between">
         <span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
           <i class="fas fa-arrow-left mr-1 text-xs text-blue-500 md:mr-2 md:text-sm" />
-          输出 Token
+          {{ t('apiStats.outputToken') }}
         </span>
         <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
           formatNumber(currentPeriodData.outputTokens)
@@ -33,7 +33,7 @@
       <div class="flex items-center justify-between">
         <span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
           <i class="fas fa-save mr-1 text-xs text-purple-500 md:mr-2 md:text-sm" />
-          缓存创建 Token
+          {{ t('apiStats.cacheCreateToken') }}
         </span>
         <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
           formatNumber(currentPeriodData.cacheCreateTokens)
@@ -42,7 +42,7 @@
       <div class="flex items-center justify-between">
         <span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
           <i class="fas fa-download mr-1 text-xs text-orange-500 md:mr-2 md:text-sm" />
-          缓存读取 Token
+          {{ t('apiStats.cacheReadToken') }}
         </span>
         <span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
           formatNumber(currentPeriodData.cacheReadTokens)
@@ -52,7 +52,7 @@
     <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' ? '今日' : '本月' }}总计</span
+          >{{ statsPeriod === 'daily' ? t('apiStats.todayTotal') : t('apiStats.monthlyTotal') }}</span
         >
         <span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
       </div>
@@ -62,8 +62,11 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useApiStatsStore } from '@/stores/apistats'
 
+const { t } = useI18n()
+
 const apiStatsStore = useApiStatsStore()
 const { statsPeriod, currentPeriodData } = storeToRefs(apiStatsStore)
 
diff --git a/web/admin-spa/src/i18n/locales/en.js b/web/admin-spa/src/i18n/locales/en.js
index 671af8ec..d5620f24 100644
--- a/web/admin-spa/src/i18n/locales/en.js
+++ b/web/admin-spa/src/i18n/locales/en.js
@@ -9,7 +9,8 @@ export default {
     create: 'Create',
     update: 'Update',
     search: 'Search',
-    reset: 'Reset'
+    reset: 'Reset',
+    locale: 'en'
   },
   language: {
     zh: '简体中文',
@@ -33,6 +34,131 @@ export default {
     tutorial: 'Tutorial',
     timeRange: 'Statistics Time Range',
     today: 'Today',
-    thisMonth: 'This Month'
+    thisMonth: 'This Month',
+    
+    // API Key Input
+    usageStatsQuery: 'Usage Statistics Query',
+    apiKeyDescription: 'Query your API Key usage and statistical data',
+    enterApiKey: 'Enter your API Key',
+    enterApiKeys: 'Enter your API Keys (one per line or comma separated)',
+    singleMode: 'Single',
+    aggregateMode: 'Aggregate',
+    singleModeTitle: 'Single Mode',
+    aggregateModeTitle: 'Aggregate Mode',
+    queryButton: 'Query',
+    
+    // Stats Overview
+    batchQuerySummary: 'Batch Query Summary',
+    apiKeyInfo: 'API Key Information',
+    queryKeysCount: 'Query Keys Count',
+    activeKeysCount: 'Active Keys Count',
+    invalidKeysCount: 'Invalid Keys Count',
+    totalRequests: 'Total Requests',
+    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...',
+    requestCount: ' requests',
+    totalCost: 'Total Cost',
+    inputTokens: 'Input Tokens',
+    outputTokens: 'Output Tokens',
+    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)',
+    apiKeysOverview: 'API Keys Overview',
+    totalKeys: 'Total Keys',
+    activeKeys: 'Active Keys',
+    aggregatedStats: 'Aggregated Statistics',
+    dailyLimit: 'Daily Limit',
+    monthlyLimit: 'Monthly Limit',
+    usageToday: 'Usage Today',
+    usageThisMonth: 'Usage This Month',
+    remaining: 'Remaining',
+    
+    // Stats Overview - Additional keys
+    name: 'Name',
+    status: 'Status',
+    permissions: 'Permissions',
+    createdAt: 'Created At',
+    expiresAt: 'Expires At',
+    active: 'Active',
+    inactive: 'Inactive',
+    notActivated: 'Not Activated',
+    expired: 'Expired',
+    neverExpires: 'Never Expires',
+    allModels: 'All Models',
+    unknown: 'Unknown',
+    none: 'None',
+    formatError: 'Format Error',
+    usageStatsOverview: 'Usage Statistics Overview',
+    keyContribution: 'Key Contribution Ratio',
+    firstUseDays: 'Expires {days} days after first use',
+    todayRequests: 'Today Requests',
+    todayTokens: 'Today Tokens',
+    todayCost: 'Today Cost',
+    todayInputTokens: 'Today Input Tokens',
+    monthlyRequests: 'Monthly Requests',
+    monthlyTokens: 'Monthly Tokens',
+    monthlyCost: 'Monthly Cost',
+    monthlyInputTokens: 'Monthly Input Tokens',
+    
+    // Limit Config - Additional keys
+    dailyCostLimit: 'Daily Cost Limit',
+    concurrencyLimit: 'Concurrency Limit',
+    modelLimit: 'Model Limit',
+    clientLimit: 'Client Limit',
+    restrictedModelsCount: 'Restricted {count} models',
+    allowAllModels: 'Allow All Models',
+    restrictedClientsCount: 'Restricted {count} clients',
+    allowAllClients: 'Allow All Clients',
+    detailedLimitInfo: 'Detailed Limit Information',
+    restrictedModelsList: 'Restricted Models List',
+    restrictedModelsNote: 'This API Key cannot access the models listed above',
+    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',
+    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',
+    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',
+    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.'
   }
 }
diff --git a/web/admin-spa/src/i18n/locales/zh-cn.js b/web/admin-spa/src/i18n/locales/zh-cn.js
index 38b3d997..b3a9a729 100644
--- a/web/admin-spa/src/i18n/locales/zh-cn.js
+++ b/web/admin-spa/src/i18n/locales/zh-cn.js
@@ -9,7 +9,8 @@ export default {
     create: '创建',
     update: '更新',
     search: '搜索',
-    reset: '重置'
+    reset: '重置',
+    locale: 'zh-CN'
   },
   language: {
     zh: '简体中文',
@@ -33,6 +34,131 @@ export default {
     tutorial: '使用教程',
     timeRange: '统计时间范围',
     today: '今日',
-    thisMonth: '本月'
+    thisMonth: '本月',
+    
+    // API Key Input
+    usageStatsQuery: '使用统计查询',
+    apiKeyDescription: '查询您的 API Key 使用情况和统计数据',
+    enterApiKey: '输入您的 API Key',
+    enterApiKeys: '输入您的 API Keys（每行一个或用逗号分隔）',
+    singleMode: '单一',
+    aggregateMode: '聚合',
+    singleModeTitle: '单一模式',
+    aggregateModeTitle: '聚合模式',
+    queryButton: '查询',
+    
+    // Stats Overview
+    batchQuerySummary: '批量查询概要',
+    apiKeyInfo: 'API Key 信息',
+    queryKeysCount: '查询 Keys 数',
+    activeKeysCount: '有效 Keys 数',
+    invalidKeysCount: '无效 Keys 数',
+    totalRequests: '总请求数',
+    totalTokens: '总 Token 数',
+    totalCost: '总费用',
+    individual: '个',
+    
+    // Aggregated Stats Card
+    usageRatio: '使用占比',
+    requests: '次',
+    otherKeys: '其他',
+    keys: 'Keys',
+    
+    // Model Usage Stats
+    modelUsageStats: '模型使用统计',
+    loadingModelStats: '加载模型统计数据中...',
+    requestCount: '次请求',
+    totalCost: '总费用',
+    inputTokens: '输入 Token',
+    outputTokens: '输出 Token',
+    cacheCreateTokens: '缓存创建',
+    cacheReadTokens: '缓存读取',
+    noModelData: '暂无{period}模型使用数据',
+    
+    // Token Distribution
+    tokenDistribution: 'Token 使用分布',
+    inputToken: '输入 Token',
+    outputToken: '输出 Token',
+    cacheCreateToken: '缓存创建 Token',
+    cacheReadToken: '缓存读取 Token',
+    
+    // Limit Config
+    limitConfig: '限制配置',
+    limitConfigAggregate: '限制配置（聚合查询模式）',
+    apiKeysOverview: 'API Keys 概况',
+    totalKeys: '总计 Keys',
+    activeKeys: '激活 Keys',
+    aggregatedStats: '聚合统计',
+    dailyLimit: '日限制',
+    monthlyLimit: '月限制',
+    usageToday: '今日使用',
+    usageThisMonth: '本月使用',
+    remaining: '剩余',
+    
+    // Stats Overview - Additional keys
+    name: '名称',
+    status: '状态',
+    permissions: '权限',
+    createdAt: '创建时间',
+    expiresAt: '过期时间',
+    active: '活跃',
+    inactive: '已停用',
+    notActivated: '未激活',
+    expired: '已过期',
+    neverExpires: '永不过期',
+    allModels: '全部模型',
+    unknown: '未知',
+    none: '无',
+    formatError: '格式错误',
+    usageStatsOverview: '使用统计概览',
+    keyContribution: '各 Key 贡献占比',
+    firstUseDays: '首次使用后{days}天过期',
+    todayRequests: '今日请求数',
+    todayTokens: '今日Token数',
+    todayCost: '今日费用',
+    todayInputTokens: '今日输入Token',
+    monthlyRequests: '本月请求数',
+    monthlyTokens: '本月Token数',
+    monthlyCost: '本月费用',
+    monthlyInputTokens: '本月输入Token',
+    
+    // Limit Config - Additional keys
+    dailyCostLimit: '每日费用限制',
+    concurrencyLimit: '并发限制',
+    modelLimit: '模型限制',
+    clientLimit: '客户端限制',
+    restrictedModelsCount: '限制 {count} 个模型',
+    allowAllModels: '允许所有模型',
+    restrictedClientsCount: '限制 {count} 个客户端',
+    allowAllClients: '允许所有客户端',
+    detailedLimitInfo: '详细限制信息',
+    restrictedModelsList: '受限模型列表',
+    restrictedModelsNote: '此 API Key 不能访问以上列出的模型',
+    allowedClientsList: '允许的客户端',
+    allowedClientsNote: '此 API Key 只能被以上列出的客户端使用',
+    timeWindowLimit: '时间窗口限制',
+    aggregateStatsNote: '每个 API Key 有独立的限制设置，聚合模式下不显示单个限制配置',
+    aggregateStatsSummary: '聚合统计摘要',
+    invalidKeysCount: '{count} 个无效的 API Key',
+    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 仅用于查询统计数据，不会被存储。聚合模式下部分个体化信息将不显示。',
+    multiKeyTip: '提示：最多支持同时查询 30 个 API Keys。使用 Ctrl+Enter 快速查询。'
   }
 }
diff --git a/web/admin-spa/src/i18n/locales/zh-tw.js b/web/admin-spa/src/i18n/locales/zh-tw.js
index 4290241d..55e2ab17 100644
--- a/web/admin-spa/src/i18n/locales/zh-tw.js
+++ b/web/admin-spa/src/i18n/locales/zh-tw.js
@@ -9,7 +9,8 @@ export default {
     create: '建立',
     update: '更新',
     search: '搜尋',
-    reset: '重置'
+    reset: '重置',
+    locale: 'zh-TW'
   },
   language: {
     zh: '簡體中文',
@@ -33,6 +34,131 @@ export default {
     tutorial: '使用教學',
     timeRange: '統計時間範圍',
     today: '今日',
-    thisMonth: '本月'
+    thisMonth: '本月',
+    
+    // API Key Input
+    usageStatsQuery: '使用統計查詢',
+    apiKeyDescription: '查詢您的 API Key 使用情況和統計資料',
+    enterApiKey: '輸入您的 API Key',
+    enterApiKeys: '輸入您的 API Keys（每行一個或用逗號分隔）',
+    singleMode: '單一',
+    aggregateMode: '彙整',
+    singleModeTitle: '單一模式',
+    aggregateModeTitle: '彙整模式',
+    queryButton: '查詢',
+    
+    // Stats Overview
+    batchQuerySummary: '批次查詢概要',
+    apiKeyInfo: 'API Key 資訊',
+    queryKeysCount: '查詢 Keys 數',
+    activeKeysCount: '有效 Keys 數',
+    invalidKeysCount: '無效 Keys 數',
+    totalRequests: '總請求數',
+    totalTokens: '總 Token 數',
+    totalCost: '總費用',
+    individual: '個',
+    
+    // Aggregated Stats Card
+    usageRatio: '使用占比',
+    requests: '次',
+    otherKeys: '其他',
+    keys: 'Keys',
+    
+    // Model Usage Stats
+    modelUsageStats: '模型使用統計',
+    loadingModelStats: '載入模型統計資料中...',
+    requestCount: '次請求',
+    totalCost: '總費用',
+    inputTokens: '輸入 Token',
+    outputTokens: '輸出 Token',
+    cacheCreateTokens: '快取建立',
+    cacheReadTokens: '快取讀取',
+    noModelData: '暫無{period}模型使用資料',
+    
+    // Token Distribution
+    tokenDistribution: 'Token 使用分佈',
+    inputToken: '輸入 Token',
+    outputToken: '輸出 Token',
+    cacheCreateToken: '快取建立 Token',
+    cacheReadToken: '快取讀取 Token',
+    
+    // Limit Config
+    limitConfig: '限制設定',
+    limitConfigAggregate: '限制設定（彙整查詢模式）',
+    apiKeysOverview: 'API Keys 概況',
+    totalKeys: '總計 Keys',
+    activeKeys: '啟用 Keys',
+    aggregatedStats: '彙整統計',
+    dailyLimit: '日限制',
+    monthlyLimit: '月限制',
+    usageToday: '今日使用',
+    usageThisMonth: '本月使用',
+    remaining: '剩餘',
+    
+    // Stats Overview - Additional keys
+    name: '名稱',
+    status: '狀態',
+    permissions: '權限',
+    createdAt: '建立時間',
+    expiresAt: '過期時間',
+    active: '活躍',
+    inactive: '已停用',
+    notActivated: '未啓動',
+    expired: '已過期',
+    neverExpires: '永不過期',
+    allModels: '全部模型',
+    unknown: '未知',
+    none: '無',
+    formatError: '格式錯誤',
+    usageStatsOverview: '使用統計概覽',
+    keyContribution: '各 Key 貢獻占比',
+    firstUseDays: '首次使用後{days}天過期',
+    todayRequests: '今日請求數',
+    todayTokens: '今日Token數',
+    todayCost: '今日費用',
+    todayInputTokens: '今日輸入Token',
+    monthlyRequests: '本月請求數',
+    monthlyTokens: '本月Token數',
+    monthlyCost: '本月費用',
+    monthlyInputTokens: '本月輸入Token',
+    
+    // Limit Config - Additional keys
+    dailyCostLimit: '每日費用限制',
+    concurrencyLimit: '並發限制',
+    modelLimit: '模型限制',
+    clientLimit: '用戶端限制',
+    restrictedModelsCount: '限制 {count} 個模型',
+    allowAllModels: '允許所有模型',
+    restrictedClientsCount: '限制 {count} 個用戶端',
+    allowAllClients: '允許所有用戶端',
+    detailedLimitInfo: '詳細限制資訊',
+    restrictedModelsList: '受限模型清單',
+    restrictedModelsNote: '此 API Key 不能存取以上列出的模型',
+    allowedClientsList: '允許的用戶端',
+    allowedClientsNote: '此 API Key 只能被以上列出的用戶端使用',
+    timeWindowLimit: '時間視窗限制',
+    aggregateStatsNote: '每個 API Key 有獨立的限制設定，彙整模式下不顯示單個限制配置',
+    aggregateStatsSummary: '彙整統計摘要',
+    invalidKeysCount: '{count} 個無效的 API Key',
+    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 僅用於查詢統計資料，不會被儲存。彙整模式下部分個體化資訊將不顯示。',
+    multiKeyTip: '提示：最多支援同時查詢 30 個 API Keys。使用 Ctrl+Enter 快速查詢。'
   }
 }