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

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
   }