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

2026-01-22 16:43:35 +00:00 · 2025-09-10 18:13:27 +08:00
parent 022724336b
commit d5b9f809b0
20 changed files with 410 additions and 300 deletions
--- a/web/admin-spa/components.d.ts
+++ b/web/admin-spa/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
    CreateApiKeyModal: typeof import('./src/components/apikeys/CreateApiKeyModal.vue')['default']
    CustomDropdown: typeof import('./src/components/common/CustomDropdown.vue')['default']
    EditApiKeyModal: typeof import('./src/components/apikeys/EditApiKeyModal.vue')['default']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ExpiryEditModal: typeof import('./src/components/apikeys/ExpiryEditModal.vue')['default']
--- a/web/admin-spa/src/components/common/AccountSelector.vue
+++ b/web/admin-spa/src/components/common/AccountSelector.vue
@@ -41,7 +41,7 @@
                ref="searchInput"
                v-model="searchQuery"
                class="form-input w-full border-gray-300 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                placeholder="搜索账号名称..."
+                :placeholder="$t('common.accountSelector.searchPlaceholder')"
                style="padding-left: 40px; padding-right: 36px"
                type="text"
                @input="handleSearch"
@@ -68,7 +68,9 @@
              :class="{ 'bg-blue-50 dark:bg-blue-900/20': !modelValue }"
              @click="selectAccount(null)"
            >
-              <span class="text-gray-700 dark:text-gray-300">{{ defaultOptionText }}</span>
+              <span class="text-gray-700 dark:text-gray-300">{{
+                props.defaultOptionText || $t('common.accountSelector.useSharedPool')
+              }}</span>
            </div>

            <!-- 分组选项 -->
@@ -76,7 +78,7 @@
              <div
                class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-400"
              >
-                调度分组
+                {{ $t('common.accountSelector.schedulingGroups') }}
              </div>
              <div
                v-for="group in filteredGroups"
@@ -88,7 +90,8 @@
                <div class="flex items-center justify-between">
                  <span class="text-gray-700 dark:text-gray-300">{{ group.name }}</span>
                  <span class="text-xs text-gray-500 dark:text-gray-400"
-                    >{{ group.memberCount || 0 }} 个成员</span
+                    >{{ group.memberCount || 0
+                    }}{{ $t('common.accountSelector.membersUnit') }}</span
                  >
                </div>
              </div>
@@ -101,10 +104,8 @@
              >
                {{
                  platform === 'claude'
-                    ? 'Claude OAuth 专属账号'
-                    : platform === 'openai'
-                      ? 'OpenAI 专属账号'
-                      : 'OAuth 专属账号'
+                    ? $t('common.accountSelector.claudeOAuthAccounts')
+                    : $t('common.accountSelector.oauthAccounts')
                }}
              </div>
              <div
@@ -142,7 +143,7 @@
              <div
                class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-400"
              >
-                Claude Console 专属账号
+                {{ $t('common.accountSelector.claudeConsoleAccounts') }}
              </div>
              <div
                v-for="account in filteredConsoleAccounts"
@@ -176,52 +177,13 @@
              </div>
            </div>

-            <!-- OpenAI-Responses 账号（仅 OpenAI） -->
-            <div v-if="platform === 'openai' && filteredOpenAIResponsesAccounts.length > 0">
-              <div
-                class="bg-gray-50 px-4 py-2 text-xs font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-400"
-              >
-                OpenAI-Responses 专属账号
-              </div>
-              <div
-                v-for="account in filteredOpenAIResponsesAccounts"
-                :key="account.id"
-                class="cursor-pointer px-4 py-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
-                :class="{
-                  'bg-blue-50 dark:bg-blue-900/20': modelValue === `responses:${account.id}`
-                }"
-                @click="selectAccount(`responses:${account.id}`)"
-              >
-                <div class="flex items-center justify-between">
-                  <div>
-                    <span class="text-gray-700 dark:text-gray-300">{{ account.name }}</span>
-                    <span
-                      class="ml-2 rounded-full px-2 py-0.5 text-xs"
-                      :class="
-                        account.isActive === 'true' || account.isActive === true
-                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-                          : account.status === 'rate_limited'
-                            ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
-                            : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-                      "
-                    >
-                      {{ getAccountStatusText(account) }}
-                    </span>
-                  </div>
-                  <span class="text-xs text-gray-400 dark:text-gray-500">
-                    {{ formatDate(account.createdAt) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-
            <!-- 无搜索结果 -->
            <div
              v-if="searchQuery && !hasResults"
              class="px-4 py-8 text-center text-gray-500 dark:text-gray-400"
            >
              <i class="fas fa-search mb-2 text-2xl" />
-              <p class="text-sm">没有找到匹配的账号</p>
+              <p class="text-sm">{{ $t('common.accountSelector.noResultsFound') }}</p>
            </div>
          </div>
        </div>
@@ -232,6 +194,9 @@

 <script setup>
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t: $t } = useI18n()

 const props = defineProps({
  modelValue: {
@@ -241,7 +206,7 @@ const props = defineProps({
  platform: {
    type: String,
    required: true,
-    validator: (value) => ['claude', 'gemini', 'openai', 'bedrock'].includes(value)
+    validator: (value) => ['claude', 'gemini'].includes(value)
  },
  accounts: {
    type: Array,
@@ -257,11 +222,11 @@ const props = defineProps({
  },
  placeholder: {
    type: String,
-    default: '请选择账号'
+    default: null
  },
  defaultOptionText: {
    type: String,
-    default: '使用共享账号池'
+    default: null
  }
 })

@@ -278,13 +243,16 @@ const lastDirection = ref('') // 记住上次的显示方向
 // 获取选中的标签
 const selectedLabel = computed(() => {
  // 如果没有选中值，显示默认选项文本
-  if (!props.modelValue) return props.defaultOptionText
+  if (!props.modelValue)
+    return props.defaultOptionText || $t('common.accountSelector.useSharedPool')

  // 分组
  if (props.modelValue.startsWith('group:')) {
    const groupId = props.modelValue.substring(6)
    const group = props.groups.find((g) => g.id === groupId)
-    return group ? `${group.name} (${group.memberCount || 0} 个成员)` : ''
+    return group
+      ? `${group.name} (${group.memberCount || 0}${$t('common.accountSelector.membersUnit')})`
+      : ''
  }

  // Console 账号
@@ -296,15 +264,6 @@ const selectedLabel = computed(() => {
    return account ? `${account.name} (${getAccountStatusText(account)})` : ''
  }

-  // OpenAI-Responses 账号
-  if (props.modelValue.startsWith('responses:')) {
-    const accountId = props.modelValue.substring(10)
-    const account = props.accounts.find(
-      (a) => a.id === accountId && a.platform === 'openai-responses'
-    )
-    return account ? `${account.name} (${getAccountStatusText(account)})` : ''
-  }
-
  // OAuth 账号
  const account = props.accounts.find((a) => a.id === props.modelValue)
  return account ? `${account.name} (${getAccountStatusText(account)})` : ''
@@ -312,36 +271,26 @@ const selectedLabel = computed(() => {

 // 获取账户状态文本
 const getAccountStatusText = (account) => {
-  if (!account) return '未知'
-
-  // 处理 OpenAI-Responses 账号（isActive 可能是字符串）
-  const isActive = account.isActive === 'true' || account.isActive === true
+  if (!account) return $t('common.accountSelector.accountStatus.unknown')

  // 优先使用 isActive 判断
-  if (!isActive) {
+  if (account.isActive === false) {
    // 根据 status 提供更详细的状态信息
    switch (account.status) {
      case 'unauthorized':
-        return '未授权'
+        return $t('common.accountSelector.accountStatus.unauthorized')
      case 'error':
-        return 'Token错误'
+        return $t('common.accountSelector.accountStatus.tokenError')
      case 'created':
-        return '待验证'
+        return $t('common.accountSelector.accountStatus.pending')
      case 'rate_limited':
-        return '限流中'
-      case 'quota_exceeded':
-        return '额度超限'
+        return $t('common.accountSelector.accountStatus.rateLimited')
      default:
-        return '异常'
+        return $t('common.accountSelector.accountStatus.error')
    }
  }

-  // 对于激活的账号，如果是限流状态也要显示
-  if (account.status === 'rate_limited') {
-    return '限流中'
-  }
-
-  return '正常'
+  return $t('common.accountSelector.accountStatus.active')
 }

 // 按创建时间倒序排序账号
@@ -353,42 +302,18 @@ const sortedAccounts = computed(() => {
  })
 })

-// 过滤的分组（根据平台类型过滤）
+// 过滤的分组
 const filteredGroups = computed(() => {
-  // 只显示与当前平台匹配的分组
-  let groups = props.groups.filter((group) => {
-    // 如果分组有platform属性，则必须匹配当前平台
-    // 如果没有platform属性，则认为是旧数据，根据平台判断
-    if (group.platform) {
-      return group.platform === props.platform
-    }
-    // 向后兼容：如果没有platform字段，通过其他方式判断
-    return true
-  })
-
-  if (searchQuery.value) {
+  if (!searchQuery.value) return props.groups
  const query = searchQuery.value.toLowerCase()
-    groups = groups.filter((group) => group.name.toLowerCase().includes(query))
-  }
-
-  return groups
+  return props.groups.filter((group) => group.name.toLowerCase().includes(query))
 })

 // 过滤的 OAuth 账号
 const filteredOAuthAccounts = computed(() => {
-  let accounts = []
-
-  if (props.platform === 'claude') {
-    accounts = sortedAccounts.value.filter((a) => a.platform === 'claude-oauth')
-  } else if (props.platform === 'openai') {
-    // 对于 OpenAI，只显示 openai 类型的账号
-    accounts = sortedAccounts.value.filter((a) => a.platform === 'openai')
-  } else {
-    // 其他平台显示所有非特殊类型的账号
-    accounts = sortedAccounts.value.filter(
-      (a) => !['claude-oauth', 'claude-console', 'openai-responses'].includes(a.platform)
+  let accounts = sortedAccounts.value.filter((a) =>
+    props.platform === 'claude' ? a.platform === 'claude-oauth' : a.platform !== 'claude-console'
  )
-  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
@@ -412,27 +337,12 @@ const filteredConsoleAccounts = computed(() => {
  return accounts
 })

-// 过滤的 OpenAI-Responses 账号
-const filteredOpenAIResponsesAccounts = computed(() => {
-  if (props.platform !== 'openai') return []
-
-  let accounts = sortedAccounts.value.filter((a) => a.platform === 'openai-responses')
-
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase()
-    accounts = accounts.filter((account) => account.name.toLowerCase().includes(query))
-  }
-
-  return accounts
-})
-
 // 是否有搜索结果
 const hasResults = computed(() => {
  return (
    filteredGroups.value.length > 0 ||
    filteredOAuthAccounts.value.length > 0 ||
-    filteredConsoleAccounts.value.length > 0 ||
-    filteredOpenAIResponsesAccounts.value.length > 0
+    filteredConsoleAccounts.value.length > 0
  )
 })

@@ -444,12 +354,12 @@ const formatDate = (dateString) => {
  const diffInHours = (now - date) / (1000 * 60 * 60)

  if (diffInHours < 24) {
-    return '今天创建'
+    return $t('common.accountSelector.dateFormat.today')
  } else if (diffInHours < 48) {
-    return '昨天创建'
+    return $t('common.accountSelector.dateFormat.yesterday')
  } else if (diffInHours < 168) {
    // 7天内
-    return `${Math.floor(diffInHours / 24)} 天前`
+    return `${Math.floor(diffInHours / 24)}${$t('common.accountSelector.dateFormat.daysAgo')}`
  } else {
    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
  }
--- a/web/admin-spa/src/components/common/ConfirmDialog.vue
+++ b/web/admin-spa/src/components/common/ConfirmDialog.vue
@@ -49,22 +49,26 @@

 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+// 国际化
+const { t } = useI18n()

 // 状态
 const isVisible = ref(false)
 const isProcessing = ref(false)
 const title = ref('')
 const message = ref('')
-const confirmText = ref('确认')
-const cancelText = ref('取消')
+const confirmText = ref(t('common.confirmDialog.confirm'))
+const cancelText = ref(t('common.confirmDialog.cancel'))
 let resolvePromise = null

 // 显示确认对话框
 const showConfirm = (
  titleText,
  messageText,
-  confirmTextParam = '确认',
-  cancelTextParam = '取消'
+  confirmTextParam = t('common.confirmDialog.confirm'),
+  cancelTextParam = t('common.confirmDialog.cancel')
 ) => {
  return new Promise((resolve) => {
    title.value = titleText
--- a/web/admin-spa/src/components/common/ConfirmModal.vue
+++ b/web/admin-spa/src/components/common/ConfirmModal.vue
@@ -40,6 +40,10 @@
 </template>

 <script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 defineProps({
  show: {
    type: Boolean,
@@ -55,11 +59,11 @@ defineProps({
  },
  confirmText: {
    type: String,
-    default: '继续'
+    default: () => t('common.confirmModal.continue')
  },
  cancelText: {
    type: String,
-    default: '取消'
+    default: () => t('common.confirmModal.cancel')
  }
 })

--- a/web/admin-spa/src/components/common/CustomDropdown.vue
+++ b/web/admin-spa/src/components/common/CustomDropdown.vue
@@ -65,6 +65,9 @@

 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()

 const props = defineProps({
  modelValue: {
@@ -77,7 +80,7 @@ const props = defineProps({
  },
  placeholder: {
    type: String,
-    default: '请选择'
+    default: () => t('common.customDropdown.placeholder')
  },
  icon: {
    type: String,
--- a/web/admin-spa/src/components/common/LanguageSwitch.vue
+++ b/web/admin-spa/src/components/common/LanguageSwitch.vue
@@ -110,6 +110,7 @@

 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useLocaleStore } from '@/stores/locale'

 // 定义组件属性
@@ -130,13 +131,14 @@ const props = defineProps({
 const emit = defineEmits(['change'])

 // 存储和响应式数据
+const { t } = useI18n()
 const localeStore = useLocaleStore()
 const showDropdown = ref(false)
 const dropdownTrigger = ref(null)

 // 计算属性
-const currentLocaleInfo = computed(() => localeStore.getCurrentLocaleInfo())
-const supportedLocales = computed(() => localeStore.getSupportedLocales())
+const currentLocaleInfo = computed(() => localeStore.getCurrentLocaleInfo(t))
+const supportedLocales = computed(() => localeStore.getSupportedLocales(t))

 const containerClass = computed(() => {
  const classes = []
--- a/web/admin-spa/src/components/common/LogoTitle.vue
+++ b/web/admin-spa/src/components/common/LogoTitle.vue
@@ -7,7 +7,7 @@
      <template v-if="!loading">
        <img
          v-if="logoSrc"
-          alt="Logo"
+          :alt="$t('common.logoTitle.logoAlt')"
          class="h-8 w-8 object-contain"
          :src="logoSrc"
          @error="handleLogoError"
--- a/web/admin-spa/src/components/common/ThemeToggle.vue
+++ b/web/admin-spa/src/components/common/ThemeToggle.vue
@@ -69,6 +69,7 @@
 <script setup>
 import { computed } from 'vue'
 import { useThemeStore } from '@/stores/theme'
+import { useI18n } from 'vue-i18n'

 // Props
 defineProps({
@@ -88,32 +89,37 @@ defineProps({
 // Store
 const themeStore = useThemeStore()

+// i18n
+const { t } = useI18n()
+
 // 主题选项配置
-const themeOptions = [
+const themeOptions = computed(() => [
  {
    value: 'light',
-    label: '浅色模式',
-    shortLabel: '浅色',
+    label: t('common.themeToggle.light.label'),
+    shortLabel: t('common.themeToggle.light.shortLabel'),
    icon: 'fas fa-sun'
  },
  {
    value: 'dark',
-    label: '深色模式',
-    shortLabel: '深色',
+    label: t('common.themeToggle.dark.label'),
+    shortLabel: t('common.themeToggle.dark.shortLabel'),
    icon: 'fas fa-moon'
  },
  {
    value: 'auto',
-    label: '跟随系统',
-    shortLabel: '自动',
+    label: t('common.themeToggle.auto.label'),
+    shortLabel: t('common.themeToggle.auto.shortLabel'),
    icon: 'fas fa-circle-half-stroke'
  }
-]
+])

 // 计算属性
 const themeTooltip = computed(() => {
-  const current = themeOptions.find((opt) => opt.value === themeStore.themeMode)
-  return current ? `点击切换主题 - ${current.label}` : '切换主题'
+  const current = themeOptions.value.find((opt) => opt.value === themeStore.themeMode)
+  return current
+    ? `${t('common.themeToggle.clickToSwitch')} - ${current.label}`
+    : t('common.themeToggle.toggleTheme')
 })

 // 方法
--- a/web/admin-spa/src/components/common/ToastNotification.vue
+++ b/web/admin-spa/src/components/common/ToastNotification.vue
@@ -12,8 +12,8 @@
            <i :class="getIconClass(toast.type)" />
          </div>
          <div class="toast-body">
-            <div v-if="toast.title" class="toast-title">
-              {{ toast.title }}
+            <div v-if="toast.title || getDefaultTitle(toast.type)" class="toast-title">
+              {{ toast.title || getDefaultTitle(toast.type) }}
            </div>
            <div class="toast-message">
              {{ toast.message }}
@@ -35,6 +35,9 @@

 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()

 // 状态
 const toasts = ref([])
@@ -51,6 +54,11 @@ const getIconClass = (type) => {
  return iconMap[type] || iconMap.info
 }

+// 获取默认标题
+const getDefaultTitle = (type) => {
+  return t(`common.toastNotification.defaultTitles.${type}`)
+}
+
 // 添加Toast
 const addToast = (message, type = 'info', title = null, duration = 5000) => {
  const id = ++toastIdCounter
--- a/web/admin-spa/src/components/dashboard/ModelDistribution.vue
+++ b/web/admin-spa/src/components/dashboard/ModelDistribution.vue
@@ -3,12 +3,16 @@
    <div class="mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
      <h2 class="flex items-center text-xl font-bold text-gray-800">
        <i class="fas fa-robot mr-2 text-purple-500" />
-        模型使用分布
+        {{ $t('dashboard.modelDistribution.title') }}
      </h2>

      <el-radio-group v-model="modelPeriod" size="small" @change="handlePeriodChange">
-        <el-radio-button label="daily"> 今日 </el-radio-button>
-        <el-radio-button label="total"> 累计 </el-radio-button>
+        <el-radio-button label="daily">
+          {{ $t('dashboard.modelDistribution.periods.daily') }}
+        </el-radio-button>
+        <el-radio-button label="total">
+          {{ $t('dashboard.modelDistribution.periods.total') }}
+        </el-radio-button>
      </el-radio-group>
    </div>

@@ -17,16 +21,16 @@
      class="py-12 text-center text-gray-500"
    >
      <i class="fas fa-chart-pie mb-3 text-4xl opacity-30" />
-      <p>暂无模型使用数据</p>
+      <p>{{ $t('dashboard.modelDistribution.noData') }}</p>
    </div>

    <div v-else class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-      <!-- 饼图 -->
+      <!-- Pie Chart -->
      <div class="relative" style="height: 300px">
        <canvas ref="chartCanvas" />
      </div>

-      <!-- 数据列表 -->
+      <!-- Data List -->
      <div class="space-y-3">
        <div
          v-for="(stat, index) in sortedStats"
@@ -38,8 +42,14 @@
            <span class="font-medium text-gray-700">{{ stat.model }}</span>
          </div>
          <div class="text-right">
-            <p class="font-semibold text-gray-800">{{ formatNumber(stat.requests) }} 请求</p>
-            <p class="text-sm text-gray-500">{{ formatNumber(stat.totalTokens) }} tokens</p>
+            <p class="font-semibold text-gray-800">
+              {{ formatNumber(stat.requests) }}
+              {{ $t('dashboard.modelDistribution.units.requests') }}
+            </p>
+            <p class="text-sm text-gray-500">
+              {{ formatNumber(stat.totalTokens) }}
+              {{ $t('dashboard.modelDistribution.units.tokens') }}
+            </p>
          </div>
        </div>
      </div>
@@ -50,10 +60,13 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { Chart } from 'chart.js/auto'
+import { useI18n } from 'vue-i18n'
 import { useDashboardStore } from '@/stores/dashboard'
 import { useChartConfig } from '@/composables/useChartConfig'
 import { formatNumber } from '@/utils/format'

+const { t } = useI18n()
+
 const dashboardStore = useDashboardStore()
 const chartCanvas = ref(null)
 let chart = null
@@ -110,8 +123,8 @@ const createChart = () => {
              ).toFixed(1)
              return [
                `${stat.model}: ${percentage}%`,
-                `请求: ${formatNumber(stat.requests)}`,
-                `Tokens: ${formatNumber(stat.totalTokens)}`
+                `${t('dashboard.modelDistribution.chart.tooltip.requests')}: ${formatNumber(stat.requests)}`,
+                `${t('dashboard.modelDistribution.chart.tooltip.tokens')}: ${formatNumber(stat.totalTokens)}`
              ]
            }
          }
--- a/web/admin-spa/src/components/dashboard/UsageTrend.vue
+++ b/web/admin-spa/src/components/dashboard/UsageTrend.vue
@@ -3,13 +3,17 @@
    <div class="mb-6 flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
      <h2 class="flex items-center text-xl font-bold text-gray-800">
        <i class="fas fa-chart-area mr-2 text-blue-500" />
-        使用趋势
+        {{ $t('dashboard.usageTrend.title') }}
      </h2>

      <div class="flex items-center gap-3">
        <el-radio-group v-model="granularity" size="small" @change="handleGranularityChange">
-          <el-radio-button label="day"> 按天 </el-radio-button>
-          <el-radio-button label="hour"> 按小时 </el-radio-button>
+          <el-radio-button label="day">
+            {{ $t('dashboard.usageTrend.granularity.byDay') }}
+          </el-radio-button>
+          <el-radio-button label="hour">
+            {{ $t('dashboard.usageTrend.granularity.byHour') }}
+          </el-radio-button>
        </el-radio-group>

        <el-select
@@ -21,7 +25,7 @@
          <el-option
            v-for="period in periodOptions"
            :key="period.days"
-            :label="`最近${period.days}天`"
+            :label="$t('dashboard.usageTrend.periodOptions.recentDays', { days: period.days })"
            :value="period.days"
          />
        </el-select>
@@ -35,23 +39,25 @@
 </template>

 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { Chart } from 'chart.js/auto'
 import { useDashboardStore } from '@/stores/dashboard'
 import { useChartConfig } from '@/composables/useChartConfig'
+import { useI18n } from 'vue-i18n'

 const dashboardStore = useDashboardStore()
 const chartCanvas = ref(null)
 let chart = null
+const { t } = useI18n()

 const trendPeriod = ref(7)
 const granularity = ref('day')

-const periodOptions = [
-  { days: 1, label: '24小时' },
-  { days: 7, label: '7天' },
-  { days: 30, label: '30天' }
-]
+const periodOptions = computed(() => [
+  { days: 1, label: t('dashboard.usageTrend.periodOptions.last24Hours') },
+  { days: 7, label: t('dashboard.usageTrend.periodOptions.last7Days') },
+  { days: 30, label: t('dashboard.usageTrend.periodOptions.last30Days') }
+])

 const createChart = () => {
  if (!chartCanvas.value || !dashboardStore.trendData.length) return
@@ -81,7 +87,7 @@ const createChart = () => {
      labels,
      datasets: [
        {
-          label: '请求次数',
+          label: t('dashboard.usageTrend.chartLabels.requests'),
          data: dashboardStore.trendData.map((item) => item.requests),
          borderColor: '#667eea',
          backgroundColor: getGradient(ctx, '#667eea', 0.1),
@@ -89,7 +95,7 @@ const createChart = () => {
          tension: 0.4
        },
        {
-          label: 'Token使用量',
+          label: t('dashboard.usageTrend.chartLabels.tokens'),
          data: dashboardStore.trendData.map((item) => item.tokens),
          borderColor: '#f093fb',
          backgroundColor: getGradient(ctx, '#f093fb', 0.1),
@@ -127,7 +133,7 @@ const createChart = () => {
          position: 'left',
          title: {
            display: true,
-            text: '请求次数'
+            text: t('dashboard.usageTrend.chartLabels.requestsAxis')
          }
        },
        y1: {
@@ -136,7 +142,7 @@ const createChart = () => {
          position: 'right',
          title: {
            display: true,
-            text: 'Token使用量'
+            text: t('dashboard.usageTrend.chartLabels.tokensAxis')
          },
          grid: {
            drawOnChartArea: false
--- a/web/admin-spa/src/components/layout/AppHeader.vue
+++ b/web/admin-spa/src/components/layout/AppHeader.vue
@@ -60,7 +60,7 @@
            @click="userMenuOpen = !userMenuOpen"
          >
            <i class="fas fa-user-circle text-sm sm:text-base" />
-            <span class="hidden sm:inline">{{ currentUser.username || 'Admin' }}</span>
+            <span class="hidden sm:inline">{{ currentUser.username || t('common.admin') }}</span>
            <i
              class="fas fa-chevron-down ml-1 text-xs transition-transform duration-200"
              :class="{ 'rotate-180': userMenuOpen }"
@@ -191,7 +191,7 @@
            class="form-input w-full cursor-not-allowed bg-gray-100 dark:bg-gray-700 dark:text-gray-300"
            disabled
            type="text"
-            :value="currentUser.username || 'Admin'"
+            :value="currentUser.username || t('common.admin')"
          />
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            {{ t('header.changePasswordModal.currentUsernameHint') }}
@@ -298,7 +298,7 @@ const authStore = useAuthStore()
 const { t } = useI18n()

 // 当前用户信息
-const currentUser = computed(() => authStore.user || { username: 'Admin' })
+const currentUser = computed(() => authStore.user || {})

 // OEM设置
 const oemSettings = computed(() => authStore.oemSettings || {})
--- a/web/admin-spa/src/components/layout/MainLayout.vue
+++ b/web/admin-spa/src/components/layout/MainLayout.vue
@@ -22,10 +22,13 @@
 <script setup>
 import { ref, watch, nextTick, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
 import AppHeader from './AppHeader.vue'
 import TabBar from './TabBar.vue'

+const { t } = useI18n()
+
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
@@ -124,7 +127,7 @@ const handleTabChange = async (tabKey) => {
  } catch (err) {
    // 如果路由切换失败，恢复activeTab状态
    if (err.name !== 'NavigationDuplicated') {
-      console.error('路由切换失败:', err)
+      console.error(t('layout.mainLayout.routing.routeChangeError'), err)
      // 恢复到当前路由对应的tab
      initActiveTab()
    }
--- a/web/admin-spa/src/components/layout/TabBar.vue
+++ b/web/admin-spa/src/components/layout/TabBar.vue
@@ -38,8 +38,11 @@

 <script setup>
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'

+const { t } = useI18n()
+
 defineProps({
  activeTab: {
    type: String,
@@ -54,24 +57,49 @@ const authStore = useAuthStore()
 // 根据 LDAP 配置动态生成 tabs
 const tabs = computed(() => {
  const baseTabs = [
-    { key: 'dashboard', name: '仪表板', shortName: '仪表板', icon: 'fas fa-tachometer-alt' },
-    { key: 'apiKeys', name: 'API Keys', shortName: 'API', icon: 'fas fa-key' },
-    { key: 'accounts', name: '账户管理', shortName: '账户', icon: 'fas fa-user-circle' }
+    {
+      key: 'dashboard',
+      name: t('layout.tabBar.tabs.dashboard.name'),
+      shortName: t('layout.tabBar.tabs.dashboard.shortName'),
+      icon: 'fas fa-tachometer-alt'
+    },
+    {
+      key: 'apiKeys',
+      name: t('layout.tabBar.tabs.apiKeys.name'),
+      shortName: t('layout.tabBar.tabs.apiKeys.shortName'),
+      icon: 'fas fa-key'
+    },
+    {
+      key: 'accounts',
+      name: t('layout.tabBar.tabs.accounts.name'),
+      shortName: t('layout.tabBar.tabs.accounts.shortName'),
+      icon: 'fas fa-user-circle'
+    }
  ]

  // 只有在 LDAP 启用时才显示用户管理
  if (authStore.oemSettings?.ldapEnabled) {
    baseTabs.push({
      key: 'userManagement',
-      name: '用户管理',
-      shortName: '用户',
+      name: t('layout.tabBar.tabs.userManagement.name'),
+      shortName: t('layout.tabBar.tabs.userManagement.shortName'),
      icon: 'fas fa-users'
    })
  }

  baseTabs.push(
-    { key: 'tutorial', name: '使用教程', shortName: '教程', icon: 'fas fa-graduation-cap' },
-    { key: 'settings', name: '系统设置', shortName: '设置', icon: 'fas fa-cogs' }
+    {
+      key: 'tutorial',
+      name: t('layout.tabBar.tabs.tutorial.name'),
+      shortName: t('layout.tabBar.tabs.tutorial.shortName'),
+      icon: 'fas fa-graduation-cap'
+    },
+    {
+      key: 'settings',
+      name: t('layout.tabBar.tabs.settings.name'),
+      shortName: t('layout.tabBar.tabs.settings.shortName'),
+      icon: 'fas fa-cogs'
+    }
  )

  return baseTabs
--- a/web/admin-spa/src/components/user/CreateApiKeyModal.vue
+++ b/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')
  }
 }

--- a/web/admin-spa/src/components/user/UserApiKeysManager.vue
+++ b/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
--- a/web/admin-spa/src/components/user/UserUsageStats.vue
+++ b/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
  }
--- a/web/admin-spa/src/components/user/ViewApiKeyModal.vue
+++ b/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', {
+  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>
--- a/web/admin-spa/src/i18n/index.js
+++ b/web/admin-spa/src/i18n/index.js
@@ -35,6 +35,28 @@ function getBrowserLocale() {
 const savedLocale = localStorage.getItem('app-locale')
 const defaultLocale = savedLocale || getBrowserLocale()

+// 创建一个函数来获取本地化的语言信息
+export function getSupportedLocalesWithI18n(t) {
+  return {
+    'zh-cn': {
+      name: t('common.languageSwitch.zhCnName'),
+      flag: t('common.languageSwitch.zhCnFlag'),
+      shortName: t('common.languageSwitch.zhCnFlag')
+    },
+    'zh-tw': {
+      name: t('common.languageSwitch.zhTwName'),
+      flag: t('common.languageSwitch.zhTwFlag'),
+      shortName: t('common.languageSwitch.zhTwFlag')
+    },
+    en: {
+      name: t('common.languageSwitch.enName'),
+      flag: t('common.languageSwitch.enFlag'),
+      shortName: t('common.languageSwitch.enFlag')
+    }
+  }
+}
+
+// 保持原有的SUPPORTED_LOCALES作为默认值，用于不依赖i18n的场景
 export const SUPPORTED_LOCALES = {
  'zh-cn': {
    name: '简体中文',
--- a/web/admin-spa/src/stores/locale.js
+++ b/web/admin-spa/src/stores/locale.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import { i18n, SUPPORTED_LOCALES } from '@/i18n'
+import { i18n, SUPPORTED_LOCALES, getSupportedLocalesWithI18n } from '@/i18n'

 export const useLocaleStore = defineStore('locale', () => {
  const currentLocale = ref(i18n.global.locale.value)
@@ -20,14 +20,19 @@ export const useLocaleStore = defineStore('locale', () => {
    document.documentElement.setAttribute('lang', locale)
  }

-  // 获取当前语言信息
-  const getCurrentLocaleInfo = () => {
+  // 获取当前语言信息（兼容i18n）
+  const getCurrentLocaleInfo = (t = null) => {
+    if (t) {
+      const supportedLocales = getSupportedLocalesWithI18n(t)
+      return supportedLocales[currentLocale.value] || supportedLocales['zh-cn']
+    }
    return SUPPORTED_LOCALES[currentLocale.value] || SUPPORTED_LOCALES['zh-cn']
  }

-  // 获取所有支持的语言
-  const getSupportedLocales = () => {
-    return Object.entries(SUPPORTED_LOCALES).map(([key, value]) => ({
+  // 获取所有支持的语言（兼容i18n）
+  const getSupportedLocales = (t = null) => {
+    const supportedLocales = t ? getSupportedLocalesWithI18n(t) : SUPPORTED_LOCALES
+    return Object.entries(supportedLocales).map(([key, value]) => ({
      code: key,
      ...value
    }))