feat: 完成布局/仪表板/用户相关组件国际化与语言切换优化（TabBar/MainLayout/AppHeader、UsageTrend/ModelDistribution、User*、Common 组件、i18n/locale 增强）

web/admin-spa/src/components/user/CreateApiKeyModal.vue

@@ -8,7 +8,7 @@
     >
       <div class="mt-3">
         <div class="mb-4 flex items-center justify-between">
-          <h3 class="text-lg font-medium text-gray-900">Create New API Key</h3>
+          <h3 class="text-lg font-medium text-gray-900">{{ t('user.createApiKeyModal.title') }}</h3>
           <button class="text-gray-400 hover:text-gray-600" @click="$emit('close')">
             <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -23,13 +23,16 @@
 
         <form class="space-y-4" @submit.prevent="handleSubmit">
           <div>
-            <label class="block text-sm font-medium text-gray-700" for="name"> Name * </label>
+            <label class="block text-sm font-medium text-gray-700" for="name">
+              {{ t('user.createApiKeyModal.form.nameLabel') }}
+              {{ t('user.createApiKeyModal.form.nameRequired') }}
+            </label>
             <input
               id="name"
               v-model="form.name"
               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
               :disabled="loading"
-              placeholder="Enter API key name"
+              :placeholder="t('user.createApiKeyModal.form.namePlaceholder')"
               required
               type="text"
             />
@@ -37,14 +40,14 @@
 
           <div>
             <label class="block text-sm font-medium text-gray-700" for="description">
-              Description
+              {{ t('user.createApiKeyModal.form.descriptionLabel') }}
             </label>
             <textarea
               id="description"
               v-model="form.description"
               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
               :disabled="loading"
-              placeholder="Optional description"
+              :placeholder="t('user.createApiKeyModal.form.descriptionPlaceholder')"
               rows="3"
             ></textarea>
           </div>
@@ -73,7 +76,7 @@
               type="button"
               @click="$emit('close')"
             >
-              Cancel
+              {{ t('user.createApiKeyModal.buttons.cancel') }}
             </button>
             <button
               class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
@@ -101,9 +104,9 @@
                     fill="currentColor"
                   ></path>
                 </svg>
-                Creating...
+                {{ t('user.createApiKeyModal.buttons.creating') }}
               </span>
-              <span v-else>Create API Key</span>
+              <span v-else>{{ t('user.createApiKeyModal.buttons.createApiKey') }}</span>
             </button>
           </div>
         </form>
@@ -121,11 +124,13 @@
               </svg>
             </div>
             <div class="ml-3 flex-1">
-              <h4 class="text-sm font-medium text-green-800">API Key Created Successfully!</h4>
+              <h4 class="text-sm font-medium text-green-800">
+                {{ t('user.createApiKeyModal.success.title') }}
+              </h4>
               <div class="mt-3">
                 <p class="mb-2 text-sm text-green-700">
-                  <strong>Important:</strong> Copy your API key now. You won't be able to see it
-                  again!
+                  <strong>{{ t('user.createApiKeyModal.success.warning.important') }}</strong>
+                  {{ t('user.createApiKeyModal.success.warning.message') }}
                 </p>
                 <div class="rounded-md border border-green-300 bg-white p-3">
                   <div class="flex items-center justify-between">
@@ -149,7 +154,7 @@
                           stroke-width="2"
                         />
                       </svg>
-                      Copy
+                      {{ t('user.createApiKeyModal.buttons.copy') }}
                     </button>
                   </div>
                 </div>
@@ -159,7 +164,7 @@
                   class="rounded-md border border-transparent bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                   @click="handleClose"
                 >
-                  Done
+                  {{ t('user.createApiKeyModal.buttons.done') }}
                 </button>
               </div>
             </div>
@@ -172,6 +177,7 @@
 
 <script setup>
 import { ref, reactive, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { showToast } from '@/utils/toast'
 
@@ -184,6 +190,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'created'])
 
+const { t } = useI18n()
 const userStore = useUserStore()
 
 const loading = ref(false)
@@ -204,7 +211,7 @@ const resetForm = () => {
 
 const handleSubmit = async () => {
   if (!form.name.trim()) {
-    error.value = 'API key name is required'
+    error.value = t('user.createApiKeyModal.validation.nameRequired')
     return
   }
 
@@ -221,13 +228,14 @@ const handleSubmit = async () => {
 
     if (result.success) {
       newApiKey.value = result.apiKey
-      showToast('API key created successfully!', 'success')
+      showToast(t('user.createApiKeyModal.messages.createSuccess'), 'success')
     } else {
-      error.value = result.message || 'Failed to create API key'
+      error.value = result.message || t('user.createApiKeyModal.errors.createFailed')
     }
   } catch (err) {
     console.error('Create API key error:', err)
-    error.value = err.response?.data?.message || err.message || 'Failed to create API key'
+    error.value =
+      err.response?.data?.message || err.message || t('user.createApiKeyModal.errors.createFailed')
   } finally {
     loading.value = false
   }
@@ -236,10 +244,10 @@ const handleSubmit = async () => {
 const copyToClipboard = async (text) => {
   try {
     await navigator.clipboard.writeText(text)
-    showToast('API key copied to clipboard!', 'success')
+    showToast(t('user.createApiKeyModal.messages.copySuccess'), 'success')
   } catch (err) {
     console.error('Failed to copy:', err)
-    showToast('Failed to copy to clipboard', 'error')
+    showToast(t('user.createApiKeyModal.messages.copyFailed'), 'error')
   }
 }
 

web/admin-spa/src/components/user/UserApiKeysManager.vue

@@ -2,9 +2,11 @@
   <div class="space-y-6">
     <div class="sm:flex sm:items-center">
       <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-gray-900">My API Keys</h1>
+        <h1 class="text-2xl font-semibold text-gray-900">
+          {{ t('user.userApiKeysManager.title') }}
+        </h1>
         <p class="mt-2 text-sm text-gray-700">
-          Manage your API keys to access Claude Relay services
+          {{ t('user.userApiKeysManager.description') }}
         </p>
       </div>
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
@@ -21,7 +23,7 @@
               stroke-width="2"
             />
           </svg>
-          Create API Key
+          {{ t('user.userApiKeysManager.buttons.createApiKey') }}
         </button>
       </div>
     </div>
@@ -43,8 +45,7 @@
         </div>
         <div class="ml-3">
           <p class="text-sm text-yellow-700">
-            You have reached the maximum number of API keys ({{ maxApiKeys }}). Please delete an
-            existing key to create a new one.
+            {{ t('user.userApiKeysManager.warnings.maxKeysReached', { maxApiKeys }) }}
           </p>
         </div>
       </div>
@@ -72,7 +73,7 @@
           fill="currentColor"
         ></path>
       </svg>
-      <p class="mt-2 text-sm text-gray-500">Loading API keys...</p>
+      <p class="mt-2 text-sm text-gray-500">{{ t('user.userApiKeysManager.loading') }}</p>
     </div>
 
     <!-- API Keys List -->
@@ -100,29 +101,37 @@
                     v-if="apiKey.isDeleted === 'true' || apiKey.deletedAt"
                     class="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800"
                   >
-                    Deleted
+                    {{ t('user.userApiKeysManager.status.deleted') }}
                   </span>
                   <span
                     v-else-if="!apiKey.isActive"
                     class="ml-2 inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800"
                   >
-                    Deleted
+                    {{ t('user.userApiKeysManager.status.deleted') }}
                   </span>
                 </div>
                 <div class="mt-1">
-                  <p class="text-sm text-gray-500">{{ apiKey.description || 'No description' }}</p>
+                  <p class="text-sm text-gray-500">
+                    {{ apiKey.description || t('user.userApiKeysManager.status.noDescription') }}
+                  </p>
                   <div class="mt-1 flex items-center space-x-4 text-xs text-gray-400">
-                    <span>Created: {{ formatDate(apiKey.createdAt) }}</span>
+                    <span
+                      >{{ t('user.userApiKeysManager.dateLabels.created') }}:
+                      {{ formatDate(apiKey.createdAt) }}</span
+                    >
                     <span v-if="apiKey.isDeleted === 'true' || apiKey.deletedAt"
-                      >Deleted: {{ formatDate(apiKey.deletedAt) }}</span
+                      >{{ t('user.userApiKeysManager.dateLabels.deleted') }}:
+                      {{ formatDate(apiKey.deletedAt) }}</span
                     >
                     <span v-else-if="apiKey.lastUsedAt"
-                      >Last used: {{ formatDate(apiKey.lastUsedAt) }}</span
+                      >{{ t('user.userApiKeysManager.dateLabels.lastUsed') }}:
+                      {{ formatDate(apiKey.lastUsedAt) }}</span
                     >
-                    <span v-else>Never used</span>
+                    <span v-else>{{ t('user.userApiKeysManager.status.neverUsed') }}</span>
                     <span
                       v-if="apiKey.expiresAt && !(apiKey.isDeleted === 'true' || apiKey.deletedAt)"
-                      >Expires: {{ formatDate(apiKey.expiresAt) }}</span
+                      >{{ t('user.userApiKeysManager.dateLabels.expires') }}:
+                      {{ formatDate(apiKey.expiresAt) }}</span
                     >
                   </div>
                 </div>
@@ -131,7 +140,10 @@
             <div class="flex items-center space-x-2">
               <!-- Usage Stats -->
               <div class="text-right text-xs text-gray-500">
-                <div>{{ formatNumber(apiKey.usage?.requests || 0) }} requests</div>
+                <div>
+                  {{ formatNumber(apiKey.usage?.requests || 0) }}
+                  {{ t('user.userApiKeysManager.usage.requests') }}
+                </div>
                 <div v-if="apiKey.usage?.totalCost">${{ apiKey.usage.totalCost.toFixed(4) }}</div>
               </div>
 
@@ -139,7 +151,7 @@
               <div class="flex items-center space-x-1">
                 <button
                   class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-gray-600"
-                  title="View API Key"
+                  :title="t('user.userApiKeysManager.actions.viewApiKey')"
                   @click="showApiKey(apiKey)"
                 >
                   <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -165,7 +177,7 @@
                     allowUserDeleteApiKeys
                   "
                   class="inline-flex items-center rounded border border-transparent p-1 text-red-400 hover:text-red-600"
-                  title="Delete API Key"
+                  :title="t('user.userApiKeysManager.actions.deleteApiKey')"
                   @click="deleteApiKey(apiKey)"
                 >
                   <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -199,8 +211,12 @@
           stroke-width="2"
         />
       </svg>
-      <h3 class="mt-2 text-sm font-medium text-gray-900">No API keys</h3>
-      <p class="mt-1 text-sm text-gray-500">Get started by creating your first API key.</p>
+      <h3 class="mt-2 text-sm font-medium text-gray-900">
+        {{ t('user.userApiKeysManager.emptyState.title') }}
+      </h3>
+      <p class="mt-1 text-sm text-gray-500">
+        {{ t('user.userApiKeysManager.emptyState.description') }}
+      </p>
       <div class="mt-6">
         <button
           class="inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -214,7 +230,7 @@
               stroke-width="2"
             />
           </svg>
-          Create API Key
+          {{ t('user.userApiKeysManager.buttons.createApiKey') }}
         </button>
       </div>
     </div>
@@ -236,10 +252,10 @@
     <!-- Confirm Delete Modal -->
     <ConfirmModal
       confirm-class="bg-red-600 hover:bg-red-700"
-      confirm-text="Delete"
-      :message="`Are you sure you want to delete '${selectedApiKey?.name}'? This action cannot be undone.`"
+      :confirm-text="t('user.userApiKeysManager.buttons.delete')"
+      :message="t('user.userApiKeysManager.confirmDelete.message', { name: selectedApiKey?.name })"
       :show="showDeleteModal"
-      title="Delete API Key"
+      :title="t('user.userApiKeysManager.confirmDelete.title')"
       @cancel="showDeleteModal = false"
       @confirm="handleDeleteConfirm"
     />
@@ -248,12 +264,15 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { showToast } from '@/utils/toast'
 import CreateApiKeyModal from './CreateApiKeyModal.vue'
 import ViewApiKeyModal from './ViewApiKeyModal.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 
+const { t, locale } = useI18n()
+
 const userStore = useUserStore()
 
 const loading = ref(true)
@@ -291,7 +310,12 @@ const formatNumber = (num) => {
 
 const formatDate = (dateString) => {
   if (!dateString) return null
-  return new Date(dateString).toLocaleDateString('en-US', {
+  const localeMap = {
+    'zh-cn': 'zh-CN',
+    'zh-tw': 'zh-TW',
+    en: 'en-US'
+  }
+  return new Date(dateString).toLocaleDateString(localeMap[locale.value] || 'en-US', {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
@@ -306,7 +330,7 @@ const loadApiKeys = async () => {
     apiKeys.value = await userStore.getUserApiKeys(true) // Include deleted keys
   } catch (error) {
     console.error('Failed to load API keys:', error)
-    showToast('Failed to load API keys', 'error')
+    showToast(t('user.userApiKeysManager.messages.loadFailed'), 'error')
   } finally {
     loading.value = false
   }
@@ -327,12 +351,12 @@ const handleDeleteConfirm = async () => {
     const result = await userStore.deleteApiKey(selectedApiKey.value.id)
 
     if (result.success) {
-      showToast('API key deleted successfully', 'success')
+      showToast(t('user.userApiKeysManager.messages.deleteSuccess'), 'success')
       await loadApiKeys()
     }
   } catch (error) {
     console.error('Failed to delete API key:', error)
-    showToast('Failed to delete API key', 'error')
+    showToast(t('user.userApiKeysManager.messages.deleteFailed'), 'error')
   } finally {
     showDeleteModal.value = false
     selectedApiKey.value = null

web/admin-spa/src/components/user/UserUsageStats.vue

@@ -2,8 +2,8 @@
   <div class="space-y-6">
     <div class="sm:flex sm:items-center">
       <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-gray-900">Usage Statistics</h1>
-        <p class="mt-2 text-sm text-gray-700">View your API usage statistics and costs</p>
+        <h1 class="text-2xl font-semibold text-gray-900">{{ t('user.userUsageStats.title') }}</h1>
+        <p class="mt-2 text-sm text-gray-700">{{ t('user.userUsageStats.subtitle') }}</p>
       </div>
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
         <select
@@ -11,10 +11,10 @@
           class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
           @change="loadUsageStats"
         >
-          <option value="day">Last 24 Hours</option>
-          <option value="week">Last 7 Days</option>
-          <option value="month">Last 30 Days</option>
-          <option value="quarter">Last 90 Days</option>
+          <option value="day">{{ t('user.userUsageStats.periodSelection.day') }}</option>
+          <option value="week">{{ t('user.userUsageStats.periodSelection.week') }}</option>
+          <option value="month">{{ t('user.userUsageStats.periodSelection.month') }}</option>
+          <option value="quarter">{{ t('user.userUsageStats.periodSelection.quarter') }}</option>
         </select>
       </div>
     </div>
@@ -41,7 +41,7 @@
           fill="currentColor"
         ></path>
       </svg>
-      <p class="mt-2 text-sm text-gray-500">Loading usage statistics...</p>
+      <p class="mt-2 text-sm text-gray-500">{{ t('user.userUsageStats.loadingStats') }}</p>
     </div>
 
     <!-- Stats Cards -->
@@ -66,7 +66,9 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="truncate text-sm font-medium text-gray-500">Total Requests</dt>
+                <dt class="truncate text-sm font-medium text-gray-500">
+                  {{ t('user.userUsageStats.statsCards.totalRequests') }}
+                </dt>
                 <dd class="text-lg font-medium text-gray-900">
                   {{ formatNumber(usageStats?.totalRequests || 0) }}
                 </dd>
@@ -96,7 +98,9 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="truncate text-sm font-medium text-gray-500">Input Tokens</dt>
+                <dt class="truncate text-sm font-medium text-gray-500">
+                  {{ t('user.userUsageStats.statsCards.inputTokens') }}
+                </dt>
                 <dd class="text-lg font-medium text-gray-900">
                   {{ formatNumber(usageStats?.totalInputTokens || 0) }}
                 </dd>
@@ -126,7 +130,9 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="truncate text-sm font-medium text-gray-500">Output Tokens</dt>
+                <dt class="truncate text-sm font-medium text-gray-500">
+                  {{ t('user.userUsageStats.statsCards.outputTokens') }}
+                </dt>
                 <dd class="text-lg font-medium text-gray-900">
                   {{ formatNumber(usageStats?.totalOutputTokens || 0) }}
                 </dd>
@@ -156,7 +162,9 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="truncate text-sm font-medium text-gray-500">Total Cost</dt>
+                <dt class="truncate text-sm font-medium text-gray-500">
+                  {{ t('user.userUsageStats.statsCards.totalCost') }}
+                </dt>
                 <dd class="text-lg font-medium text-gray-900">
                   ${{ (usageStats?.totalCost || 0).toFixed(4) }}
                 </dd>
@@ -170,7 +178,9 @@
     <!-- Daily Usage Chart -->
     <div v-if="!loading && usageStats" class="rounded-lg bg-white shadow">
       <div class="px-4 py-5 sm:p-6">
-        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">Daily Usage Trend</h3>
+        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">
+          {{ t('user.userUsageStats.usageTrend.title') }}
+        </h3>
 
         <!-- Placeholder for chart - you can integrate Chart.js or similar -->
         <div
@@ -190,10 +200,14 @@
                 stroke-width="2"
               />
             </svg>
-            <h3 class="mt-2 text-sm font-medium text-gray-900">Usage Chart</h3>
-            <p class="mt-1 text-sm text-gray-500">Daily usage trends would be displayed here</p>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              {{ t('user.userUsageStats.usageTrend.chartTitle') }}
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              {{ t('user.userUsageStats.usageTrend.dailyTrendsDescription') }}
+            </p>
             <p class="mt-2 text-xs text-gray-400">
-              (Chart integration can be added with Chart.js, D3.js, or similar library)
+              {{ t('user.userUsageStats.usageTrend.chartIntegrationNote') }}
             </p>
           </div>
         </div>
@@ -206,7 +220,9 @@
       class="rounded-lg bg-white shadow"
     >
       <div class="px-4 py-5 sm:p-6">
-        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">Usage by Model</h3>
+        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">
+          {{ t('user.userUsageStats.modelUsage.title') }}
+        </h3>
         <div class="space-y-3">
           <div
             v-for="model in usageStats.modelStats"
@@ -222,7 +238,13 @@
               </div>
             </div>
             <div class="text-right">
-              <p class="text-sm text-gray-900">{{ formatNumber(model.requests) }} requests</p>
+              <p class="text-sm text-gray-900">
+                {{
+                  t('user.userUsageStats.modelUsage.requestsCount', {
+                    count: formatNumber(model.requests)
+                  })
+                }}
+              </p>
               <p class="text-xs text-gray-500">${{ model.cost.toFixed(4) }}</p>
             </div>
           </div>
@@ -233,7 +255,9 @@
     <!-- Detailed Usage Table -->
     <div v-if="!loading && userApiKeys.length > 0" class="rounded-lg bg-white shadow">
       <div class="px-4 py-5 sm:p-6">
-        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">Usage by API Key</h3>
+        <h3 class="mb-4 text-lg font-medium leading-6 text-gray-900">
+          {{ t('user.userUsageStats.apiKeyUsage.title') }}
+        </h3>
         <div class="overflow-hidden">
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
@@ -242,37 +266,37 @@
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  API Key
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.apiKey') }}
                 </th>
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  Requests
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.requests') }}
                 </th>
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  Input Tokens
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.inputTokens') }}
                 </th>
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  Output Tokens
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.outputTokens') }}
                 </th>
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  Cost
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.cost') }}
                 </th>
                 <th
                   class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                   scope="col"
                 >
-                  Status
+                  {{ t('user.userUsageStats.apiKeyUsage.headers.status') }}
                 </th>
               </tr>
             </thead>
@@ -307,10 +331,10 @@
                   >
                     {{
                       apiKey.isDeleted === 'true' || apiKey.deletedAt
-                        ? 'Deleted'
+                        ? t('user.userUsageStats.apiKeyUsage.status.deleted')
                         : apiKey.isActive
-                          ? 'Active'
-                          : 'Disabled'
+                          ? t('user.userUsageStats.apiKeyUsage.status.active')
+                          : t('user.userUsageStats.apiKeyUsage.status.disabled')
                     }}
                   </span>
                 </td>
@@ -339,10 +363,11 @@
           stroke-width="2"
         />
       </svg>
-      <h3 class="mt-2 text-sm font-medium text-gray-900">No usage data</h3>
+      <h3 class="mt-2 text-sm font-medium text-gray-900">
+        {{ t('user.userUsageStats.noData.title') }}
+      </h3>
       <p class="mt-1 text-sm text-gray-500">
-        You haven't made any API requests yet. Create an API key and start using the service to see
-        usage statistics.
+        {{ t('user.userUsageStats.noData.description') }}
       </p>
     </div>
   </div>
@@ -350,9 +375,12 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { showToast } from '@/utils/toast'
 
+const { t } = useI18n()
+
 const userStore = useUserStore()
 
 const loading = ref(true)
@@ -381,7 +409,7 @@ const loadUsageStats = async () => {
     userApiKeys.value = apiKeys
   } catch (error) {
     console.error('Failed to load usage stats:', error)
-    showToast('Failed to load usage statistics', 'error')
+    showToast(t('user.userUsageStats.loadFailed'), 'error')
   } finally {
     loading.value = false
   }

web/admin-spa/src/components/user/ViewApiKeyModal.vue

@@ -8,7 +8,7 @@
     >
       <div class="mt-3">
         <div class="mb-4 flex items-center justify-between">
-          <h3 class="text-lg font-medium text-gray-900">API Key Details</h3>
+          <h3 class="text-lg font-medium text-gray-900">{{ t('user.viewApiKeyModal.title') }}</h3>
           <button class="text-gray-400 hover:text-gray-600" @click="emit('close')">
             <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -24,29 +24,35 @@
         <div v-if="apiKey" class="space-y-4">
           <!-- API Key Name -->
           <div>
-            <label class="block text-sm font-medium text-gray-700">Name</label>
+            <label class="block text-sm font-medium text-gray-700">{{
+              t('user.viewApiKeyModal.fields.name')
+            }}</label>
             <p class="mt-1 text-sm text-gray-900">{{ apiKey.name }}</p>
           </div>
 
           <!-- Description -->
           <div v-if="apiKey.description">
-            <label class="block text-sm font-medium text-gray-700">Description</label>
+            <label class="block text-sm font-medium text-gray-700">{{
+              t('user.viewApiKeyModal.fields.description')
+            }}</label>
             <p class="mt-1 text-sm text-gray-900">{{ apiKey.description }}</p>
           </div>
 
           <!-- API Key -->
           <div>
-            <label class="block text-sm font-medium text-gray-700">API Key</label>
+            <label class="block text-sm font-medium text-gray-700">{{
+              t('user.viewApiKeyModal.fields.apiKey')
+            }}</label>
             <div class="mt-1 flex items-center space-x-2">
               <div class="flex-1">
                 <div v-if="showFullKey" class="rounded-md border border-gray-300 bg-gray-50 p-3">
                   <code class="break-all font-mono text-sm text-gray-900">{{
-                    apiKey.key || 'Not available'
+                    apiKey.key || t('user.viewApiKeyModal.apiKeyDisplay.notAvailable')
                   }}</code>
                 </div>
                 <div v-else class="rounded-md border border-gray-300 bg-gray-50 p-3">
                   <code class="font-mono text-sm text-gray-900">{{
-                    apiKey.keyPreview || 'cr_****'
+                    apiKey.keyPreview || t('user.viewApiKeyModal.apiKeyDisplay.keyPreview')
                   }}</code>
                 </div>
               </div>
@@ -90,7 +96,11 @@
                       stroke-width="2"
                     />
                   </svg>
-                  {{ showFullKey ? 'Hide' : 'Show' }}
+                  {{
+                    showFullKey
+                      ? t('user.viewApiKeyModal.buttons.hide')
+                      : t('user.viewApiKeyModal.buttons.show')
+                  }}
                 </button>
                 <button
                   v-if="showFullKey && apiKey.key"
@@ -105,18 +115,20 @@
                       stroke-width="2"
                     />
                   </svg>
-                  Copy
+                  {{ t('user.viewApiKeyModal.buttons.copy') }}
                 </button>
               </div>
             </div>
             <p v-if="!apiKey.key" class="mt-1 text-xs text-gray-500">
-              Full API key is only shown when first created or regenerated
+              {{ t('user.viewApiKeyModal.apiKeyDisplay.fullKeyNotice') }}
             </p>
           </div>
 
           <!-- Status -->
           <div>
-            <label class="block text-sm font-medium text-gray-700">Status</label>
+            <label class="block text-sm font-medium text-gray-700">{{
+              t('user.viewApiKeyModal.fields.status')
+            }}</label>
             <div class="mt-1">
               <span
                 :class="[
@@ -124,33 +136,47 @@
                   apiKey.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                 ]"
               >
-                {{ apiKey.isActive ? 'Active' : 'Disabled' }}
+                {{
+                  apiKey.isActive
+                    ? t('user.viewApiKeyModal.status.active')
+                    : t('user.viewApiKeyModal.status.disabled')
+                }}
               </span>
             </div>
           </div>
 
           <!-- Usage Stats -->
           <div v-if="apiKey.usage" class="border-t border-gray-200 pt-4">
-            <label class="mb-2 block text-sm font-medium text-gray-700">Usage Statistics</label>
+            <label class="mb-2 block text-sm font-medium text-gray-700">{{
+              t('user.viewApiKeyModal.fields.usageStatistics')
+            }}</label>
             <div class="grid grid-cols-2 gap-4 text-sm">
               <div>
-                <span class="text-gray-500">Requests:</span>
+                <span class="text-gray-500"
+                  >{{ t('user.viewApiKeyModal.usageStats.requests') }}:</span
+                >
                 <span class="ml-2 font-medium">{{ formatNumber(apiKey.usage.requests || 0) }}</span>
               </div>
               <div>
-                <span class="text-gray-500">Input Tokens:</span>
+                <span class="text-gray-500"
+                  >{{ t('user.viewApiKeyModal.usageStats.inputTokens') }}:</span
+                >
                 <span class="ml-2 font-medium">{{
                   formatNumber(apiKey.usage.inputTokens || 0)
                 }}</span>
               </div>
               <div>
-                <span class="text-gray-500">Output Tokens:</span>
+                <span class="text-gray-500"
+                  >{{ t('user.viewApiKeyModal.usageStats.outputTokens') }}:</span
+                >
                 <span class="ml-2 font-medium">{{
                   formatNumber(apiKey.usage.outputTokens || 0)
                 }}</span>
               </div>
               <div>
-                <span class="text-gray-500">Total Cost:</span>
+                <span class="text-gray-500"
+                  >{{ t('user.viewApiKeyModal.usageStats.totalCost') }}:</span
+                >
                 <span class="ml-2 font-medium"
                   >${{ (apiKey.usage.totalCost || 0).toFixed(4) }}</span
                 >
@@ -161,15 +187,17 @@
           <!-- Timestamps -->
           <div class="space-y-2 border-t border-gray-200 pt-4 text-sm">
             <div class="flex justify-between">
-              <span class="text-gray-500">Created:</span>
+              <span class="text-gray-500">{{ t('user.viewApiKeyModal.timestamps.created') }}:</span>
               <span class="text-gray-900">{{ formatDate(apiKey.createdAt) }}</span>
             </div>
             <div v-if="apiKey.lastUsedAt" class="flex justify-between">
-              <span class="text-gray-500">Last Used:</span>
+              <span class="text-gray-500"
+                >{{ t('user.viewApiKeyModal.timestamps.lastUsed') }}:</span
+              >
               <span class="text-gray-900">{{ formatDate(apiKey.lastUsedAt) }}</span>
             </div>
             <div v-if="apiKey.expiresAt" class="flex justify-between">
-              <span class="text-gray-500">Expires:</span>
+              <span class="text-gray-500">{{ t('user.viewApiKeyModal.timestamps.expires') }}:</span>
               <span
                 :class="[
                   'font-medium',
@@ -186,7 +214,7 @@
               class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               @click="emit('close')"
             >
-              Close
+              {{ t('user.viewApiKeyModal.buttons.close') }}
             </button>
           </div>
         </div>
@@ -197,8 +225,11 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 
+const { t } = useI18n()
+
 defineProps({
   show: {
     type: Boolean,
@@ -225,22 +256,26 @@ const formatNumber = (num) => {
 
 const formatDate = (dateString) => {
   if (!dateString) return null
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+  const { locale } = useI18n()
+  return new Date(dateString).toLocaleDateString(
+    locale.value === 'zh-cn' ? 'zh-CN' : locale.value === 'zh-tw' ? 'zh-TW' : 'en-US',
+    {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  )
 }
 
 const copyToClipboard = async (text) => {
   try {
     await navigator.clipboard.writeText(text)
-    showToast('Copied to clipboard!', 'success')
+    showToast(t('user.viewApiKeyModal.messages.copySuccess'), 'success')
   } catch (err) {
     console.error('Failed to copy:', err)
-    showToast('Failed to copy to clipboard', 'error')
+    showToast(t('user.viewApiKeyModal.messages.copyFailed'), 'error')
   }
 }
 </script>