feat: add comprehensive i18n support across all pages

- Add i18n support to admin sidebar, breadcrumbs, and nav-footer
- Add i18n support to admin pages: system-settings, users, versions, risk-control, sessions, cloud-variables, cloud-constants
- Add i18n support to auth pages: login, register
- Add i18n support to install and profile pages
- Add i18n support to agent pages: dashboard, finance, users, apps, cards
- Replace all hard-coded Chinese text with i18n translation keys
- Add comprehensive translation keys to zh.json and en.json
- Fix date formatting to use locale-agnostic toLocaleDateString()
- Pass t function as parameter for i18n in non-component files

frontend/src/pages/agent/cards/create.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { Loader2 } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 
 import api from '@/services/api'
 
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
@@ -43,21 +45,21 @@ onMounted(async () => {
     }
   }
   catch (error) {
-    console.error('获取数据失败:', error)
+    console.error('Load data failed:', error)
   }
 })
 
 async function handleGenerate() {
   if (!form.value.app_id) {
-    toast.error('请选择应用')
+    toast.error(t('agent.cards.create.selectApp'))
     return
   }
   if (!form.value.card_type_id) {
-    toast.error('请选择卡类')
+    toast.error(t('agent.cards.create.selectCardType'))
     return
   }
   if (form.value.quantity < 1 || form.value.quantity > 100) {
-    toast.error('生成数量需要在 1-100 之间')
+    toast.error(t('agent.cards.create.quantityRange'))
     return
   }
 
@@ -69,17 +71,17 @@ async function handleGenerate() {
       quantity: form.value.quantity,
     })
 
-    toast.success(`成功生成 ${data.codes.length} 张卡密`)
+    toast.success(t('agent.cards.create.generateSuccess', { count: data.codes.length }))
 
     const codesText = data.codes.join('\n')
     await navigator.clipboard.writeText(codesText)
-    toast.success('卡密已复制到剪贴板')
+    toast.success(t('agent.cards.create.copiedToClipboard'))
 
     router.push('/agent/cards')
   }
   catch (error: any) {
-    console.error('生成卡密失败:', error)
-    toast.error(error.message || '生成失败')
+    console.error('Generate cards failed:', error)
+    toast.error(error.message || t('agent.cards.create.generateFailed'))
   }
   finally {
     loading.value = false
@@ -91,26 +93,26 @@ async function handleGenerate() {
   <div class="space-y-6">
     <div>
       <h1 class="text-2xl font-bold">
-        生成卡密
+        {{ t('agent.cards.create.title') }}
       </h1>
       <p class="text-muted-foreground">
-        为授权应用生成卡密
+        {{ t('agent.cards.create.description') }}
       </p>
     </div>
 
     <UiCard class="max-w-xl">
       <UiCardHeader>
-        <UiCardTitle>生成设置</UiCardTitle>
+        <UiCardTitle>{{ t('agent.cards.create.generateSettings') }}</UiCardTitle>
         <UiCardDescription>
-          选择应用和卡类，设置生成数量
+          {{ t('agent.cards.create.settingsDesc') }}
         </UiCardDescription>
       </UiCardHeader>
       <UiCardContent class="space-y-6">
         <div class="space-y-2">
-          <UiLabel>选择应用</UiLabel>
+          <UiLabel>{{ t('agent.cards.create.selectAppLabel') }}</UiLabel>
           <UiSelect v-model="form.app_id">
             <UiSelectTrigger>
-              <UiSelectValue placeholder="请选择应用" />
+              <UiSelectValue :placeholder="t('agent.cards.create.selectAppPlaceholder')" />
             </UiSelectTrigger>
             <UiSelectContent>
               <UiSelectItem v-for="app in apps" :key="app.id" :value="String(app.id)">
@@ -121,36 +123,36 @@ async function handleGenerate() {
         </div>
 
         <div v-if="form.app_id" class="space-y-2">
-          <UiLabel>选择卡类</UiLabel>
+          <UiLabel>{{ t('agent.cards.create.selectCardTypeLabel') }}</UiLabel>
           <UiSelect v-model="form.card_type_id">
             <UiSelectTrigger>
-              <UiSelectValue placeholder="请选择卡类" />
+              <UiSelectValue :placeholder="t('agent.cards.create.selectCardTypePlaceholder')" />
             </UiSelectTrigger>
             <UiSelectContent>
               <UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
-                {{ ct.name }} - {{ ct.duration_days }}天 - ¥{{ ct.price }}
+                {{ ct.name }} - {{ ct.duration_days }}{{ t('agent.apps.detail.days') }} - ¥{{ ct.price }}
               </UiSelectItem>
             </UiSelectContent>
           </UiSelect>
         </div>
 
         <div class="space-y-2">
-          <UiLabel>生成数量</UiLabel>
+          <UiLabel>{{ t('agent.cards.create.quantity') }}</UiLabel>
           <UiInput
             v-model.number="form.quantity"
             type="number"
             :min="1"
             :max="100"
-            placeholder="请输入生成数量"
+            :placeholder="t('agent.cards.create.quantityPlaceholder')"
           />
           <p class="text-xs text-muted-foreground">
-            单次最多生成 100 张卡密
+            {{ t('agent.cards.create.quantityHint') }}
           </p>
         </div>
 
         <div v-if="totalPrice > 0" class="p-4 rounded-lg bg-muted/50">
           <div class="flex items-center justify-between">
-            <span class="text-muted-foreground">预计费用</span>
+            <span class="text-muted-foreground">{{ t('agent.cards.create.estimatedCost') }}</span>
             <span class="text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
           </div>
         </div>
@@ -158,7 +160,7 @@ async function handleGenerate() {
         <div class="flex gap-3">
           <UiButton variant="outline" as-child>
             <router-link to="/agent/cards">
-              取消
+              {{ t('agent.cards.create.cancel') }}
             </router-link>
           </UiButton>
           <UiButton
@@ -166,7 +168,7 @@ async function handleGenerate() {
             @click="handleGenerate"
           >
             <Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
-            {{ loading ? '生成中...' : '生成卡密' }}
+            {{ loading ? t('agent.cards.create.generating') : t('agent.cards.create.generateBtn') }}
           </UiButton>
         </div>
       </UiCardContent>

frontend/src/pages/agent/cards/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { Key, Loader2, Plus } from 'lucide-vue-next'
 import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import api from '@/services/api'
 
+const { t } = useI18n()
+
 interface Card {
   id: number
   code: string
@@ -23,7 +26,7 @@ onMounted(async () => {
     cards.value = data || []
   }
   catch (error) {
-    console.error('获取卡密列表失败:', error)
+    console.error('Load cards failed:', error)
   }
   finally {
     loading.value = false
@@ -33,15 +36,15 @@ onMounted(async () => {
 function formatDate(dateStr: string | null) {
   if (!dateStr)
     return '-'
-  return new Date(dateStr).toLocaleDateString('zh-CN')
+  return new Date(dateStr).toLocaleDateString()
 }
 
 function getStatusBadge(status: string) {
   const map: Record<string, { label: string, class: string }> = {
-    unused: { label: '未使用', class: 'bg-green-500/10 text-green-500' },
-    used: { label: '已使用', class: 'bg-blue-500/10 text-blue-500' },
-    expired: { label: '已过期', class: 'bg-red-500/10 text-red-500' },
-    disabled: { label: '已禁用', class: 'bg-gray-500/10 text-gray-500' },
+    unused: { label: t('agent.cards.unused'), class: 'bg-green-500/10 text-green-500' },
+    used: { label: t('agent.cards.used'), class: 'bg-blue-500/10 text-blue-500' },
+    expired: { label: t('agent.cards.expired'), class: 'bg-red-500/10 text-red-500' },
+    disabled: { label: t('agent.cards.disabled'), class: 'bg-gray-500/10 text-gray-500' },
   }
   return map[status] || { label: status, class: '' }
 }
@@ -52,16 +55,16 @@ function getStatusBadge(status: string) {
     <div class="flex items-center justify-between">
       <div>
         <h1 class="text-2xl font-bold">
-          卡密管理
+          {{ t('agent.cards.title') }}
         </h1>
         <p class="text-muted-foreground">
-          管理您生成的卡密
+          {{ t('agent.cards.description') }}
         </p>
       </div>
       <UiButton as-child>
         <router-link to="/agent/cards/create">
           <Plus class="mr-2 h-4 w-4" />
-          生成卡密
+          {{ t('agent.cards.generateCards') }}
         </router-link>
       </UiButton>
     </div>
@@ -74,10 +77,10 @@ function getStatusBadge(status: string) {
 
         <div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
           <Key class="size-16 mx-auto mb-4 opacity-30" />
-          <p>暂无卡密记录</p>
+          <p>{{ t('agent.cards.noCards') }}</p>
           <UiButton class="mt-4" as-child>
             <router-link to="/agent/cards/create">
-              生成卡密
+              {{ t('agent.cards.generateCards') }}
             </router-link>
           </UiButton>
         </div>
@@ -87,22 +90,22 @@ function getStatusBadge(status: string) {
             <thead class="bg-muted/50">
               <tr>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  卡密
+                  {{ t('agent.cards.cardCode') }}
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  应用
+                  {{ t('agent.cards.app') }}
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  卡类
+                  {{ t('agent.cards.cardType') }}
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  状态
+                  {{ t('agent.cards.status') }}
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  创建时间
+                  {{ t('agent.cards.createTime') }}
                 </th>
                 <th class="px-4 py-3 text-left text-sm font-medium">
-                  使用时间
+                  {{ t('agent.cards.useTime') }}
                 </th>
               </tr>
             </thead>