feat: 完成web/admin-spa/src/components/apikeys的国际化并修复语法错误和警告

web/admin-spa/src/components/apikeys/ExpiryEditModal.vue

@@ -18,9 +18,11 @@
               <i class="fas fa-clock text-white" />
             </div>
             <div>
-              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">修改过期时间</h3>
+              <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
+                {{ $t('apiKeys.expiryEditModal.title') }}
+              </h3>
               <p class="text-sm text-gray-600 dark:text-gray-400">
-                为 "{{ apiKey.name || 'API Key' }}" 设置新的过期时间
+                {{ $t('apiKeys.expiryEditModal.subtitle', { name: apiKey.name || 'API Key' }) }}
               </p>
             </div>
           </div>
@@ -39,14 +41,20 @@
           >
             <div class="flex items-center justify-between">
               <div>
-                <p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">当前状态</p>
+                <p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">
+                  {{ $t('apiKeys.expiryEditModal.currentStatus') }}
+                </p>
                 <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                   <!-- 未激活状态 -->
                   <template v-if="apiKey.expirationMode === 'activation' && !apiKey.isActivated">
                     <i class="fas fa-pause-circle mr-1 text-blue-500" />
-                    未激活
+                    {{ $t('apiKeys.expiryEditModal.notActivated') }}
                     <span class="ml-2 text-xs font-normal text-gray-600">
-                      (激活后 {{ apiKey.activationDays || 30 }} 天过期)
+                      {{
+                        $t('apiKeys.expiryEditModal.activationDaysHint', {
+                          days: apiKey.activationDays || 30
+                        })
+                      }}
                     </span>
                   </template>
                   <!-- 已设置过期时间 -->
@@ -63,7 +71,7 @@
                   <!-- 永不过期 -->
                   <template v-else>
                     <i class="fas fa-infinity mr-1 text-gray-500" />
-                    永不过期
+                    {{ $t('apiKeys.expiryEditModal.neverExpire') }}
                   </template>
                 </p>
               </div>
@@ -89,19 +97,23 @@
               @click="handleActivateNow"
             >
               <i class="fas fa-rocket mr-2" />
-              立即激活 (激活后 {{ apiKey.activationDays || 30 }} 天过期)
+              {{
+                $t('apiKeys.expiryEditModal.activateButton', { days: apiKey.activationDays || 30 })
+              }}
             </button>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
               <i class="fas fa-info-circle mr-1" />
-              点击立即激活此 API Key，激活后将在 {{ apiKey.activationDays || 30 }} 天后过期
+              {{
+                $t('apiKeys.expiryEditModal.activationInfo', { days: apiKey.activationDays || 30 })
+              }}
             </p>
           </div>
 
           <!-- 快捷选项 -->
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >选择新的期限</label
-            >
+            <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300">
+              {{ $t('apiKeys.expiryEditModal.selectNewDuration') }}
+            </label>
             <div class="mb-3 grid grid-cols-3 gap-2">
               <button
                 v-for="option in quickOptions"
@@ -126,16 +138,16 @@
                 @click="selectQuickOption('custom')"
               >
                 <i class="fas fa-calendar-alt mr-1" />
-                自定义
+                {{ $t('apiKeys.expiryEditModal.custom') }}
               </button>
             </div>
           </div>
 
           <!-- 自定义日期选择 -->
           <div v-if="localForm.expireDuration === 'custom'" class="animate-fadeIn">
-            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-              >选择日期和时间</label
-            >
+            <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
+              {{ $t('apiKeys.expiryEditModal.selectDateAndTime') }}
+            </label>
             <input
               v-model="localForm.customExpireDate"
               class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
@@ -144,7 +156,7 @@
               @change="updateCustomExpiryPreview"
             />
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              选择一个未来的日期和时间作为过期时间
+              {{ $t('apiKeys.expiryEditModal.selectFutureDateTime') }}
             </p>
           </div>
 
@@ -157,7 +169,7 @@
               <div>
                 <p class="mb-1 text-xs font-medium text-blue-700 dark:text-blue-400">
                   <i class="fas fa-arrow-right mr-1" />
-                  新的过期时间
+                  {{ $t('apiKeys.expiryEditModal.newExpiryTime') }}
                 </p>
                 <p class="text-sm font-semibold text-blue-900 dark:text-blue-200">
                   <template v-if="localForm.expiresAt">
@@ -172,7 +184,7 @@
                   </template>
                   <template v-else>
                     <i class="fas fa-infinity mr-1" />
-                    永不过期
+                    {{ $t('apiKeys.expiryEditModal.neverExpire') }}
                   </template>
                 </p>
               </div>
@@ -190,7 +202,7 @@
               class="flex-1 rounded-lg bg-gray-100 px-4 py-2.5 font-semibold text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
               @click="$emit('close')"
             >
-              取消
+              {{ $t('apiKeys.expiryEditModal.cancel') }}
             </button>
             <button
               class="btn btn-primary flex-1 px-4 py-2.5 font-semibold"
@@ -199,7 +211,11 @@
             >
               <div v-if="saving" class="loading-spinner mr-2" />
               <i v-else class="fas fa-save mr-2" />
-              {{ saving ? '保存中...' : '保存更改' }}
+              {{
+                saving
+                  ? $t('apiKeys.expiryEditModal.saving')
+                  : $t('apiKeys.expiryEditModal.saveChanges')
+              }}
             </button>
           </div>
         </div>
@@ -210,6 +226,9 @@
 
 <script setup>
 import { ref, reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const props = defineProps({
   show: {
@@ -235,14 +254,14 @@ const localForm = reactive({
 
 // 快捷选项
 const quickOptions = [
-  { value: '', label: '永不过期' },
-  { value: '1d', label: '1 天' },
-  { value: '7d', label: '7 天' },
-  { value: '30d', label: '30 天' },
-  { value: '90d', label: '90 天' },
-  { value: '180d', label: '180 天' },
-  { value: '365d', label: '1 年' },
-  { value: '730d', label: '2 年' }
+  { value: '', label: t('apiKeys.expiryEditModal.neverExpireOption') },
+  { value: '1d', label: t('apiKeys.expiryEditModal.oneDay') },
+  { value: '7d', label: t('apiKeys.expiryEditModal.sevenDays') },
+  { value: '30d', label: t('apiKeys.expiryEditModal.thirtyDays') },
+  { value: '90d', label: t('apiKeys.expiryEditModal.ninetyDays') },
+  { value: '180d', label: t('apiKeys.expiryEditModal.oneHundredEightyDays') },
+  { value: '365d', label: t('apiKeys.expiryEditModal.threeSixtyFiveDays') },
+  { value: '730d', label: t('apiKeys.expiryEditModal.twoYears') }
 ]
 
 // 计算最小日期时间
@@ -337,13 +356,17 @@ const updateCustomExpiryPreview = () => {
 const formatExpireDate = (dateString) => {
   if (!dateString) return ''
   const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+  const { locale } = useI18n()
+  return date.toLocaleString(
+    locale.value === 'zh-cn' ? 'zh-CN' : locale.value === 'zh-tw' ? 'zh-TW' : 'en-US',
+    {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    }
+  )
 }
 
 // 检查是否已过期
@@ -363,22 +386,22 @@ const getExpiryStatus = (expiresAt) => {
 
   if (diffMs < 0) {
     return {
-      text: '已过期',
+      text: t('apiKeys.expiryEditModal.expired'),
       class: 'text-red-600'
     }
   } else if (diffDays <= 7) {
     return {
-      text: `${diffDays} 天后过期`,
+      text: t('apiKeys.expiryEditModal.daysToExpire', { days: diffDays }),
       class: 'text-orange-600'
     }
   } else if (diffDays <= 30) {
     return {
-      text: `${diffDays} 天后过期`,
+      text: t('apiKeys.expiryEditModal.daysToExpire', { days: diffDays }),
       class: 'text-yellow-600'
     }
   } else {
     return {
-      text: `${Math.ceil(diffDays / 30)} 个月后过期`,
+      text: t('apiKeys.expiryEditModal.monthsToExpire', { months: Math.ceil(diffDays / 30) }),
       class: 'text-green-600'
     }
   }
@@ -399,15 +422,19 @@ const handleActivateNow = async () => {
   let confirmed = true
   if (window.showConfirm) {
     confirmed = await window.showConfirm(
-      '激活 API Key',
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`,
-      '确定激活',
-      '取消'
+      t('apiKeys.expiryEditModal.activateConfirmTitle'),
+      t('apiKeys.expiryEditModal.activateConfirmMessage', {
+        days: props.apiKey.activationDays || 30
+      }),
+      t('apiKeys.expiryEditModal.confirmActivate'),
+      t('apiKeys.expiryEditModal.confirmCancel')
     )
   } else {
     // 降级方案
     confirmed = confirm(
-      `确定要立即激活此 API Key 吗？激活后将在 ${props.apiKey.activationDays || 30} 天后自动过期。`
+      t('apiKeys.expiryEditModal.activateConfirmMessage', {
+        days: props.apiKey.activationDays || 30
+      })
     )
   }