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

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

@@ -9,7 +9,9 @@
             >
               <i class="fas fa-clock text-white" />
             </div>
-            <h3 class="text-xl font-bold text-gray-900">续期 API Key</h3>
+            <h3 class="text-xl font-bold text-gray-900">
+              {{ $t('apiKeys.renewApiKeyModal.title') }}
+            </h3>
           </div>
           <button
             class="text-gray-400 transition-colors hover:text-gray-600"
@@ -28,13 +30,18 @@
                 <i class="fas fa-info text-sm text-white" />
               </div>
               <div>
-                <h4 class="mb-1 font-semibold text-gray-800">API Key 信息</h4>
+                <h4 class="mb-1 font-semibold text-gray-800">
+                  {{ $t('apiKeys.renewApiKeyModal.apiKeyInfo') }}
+                </h4>
                 <p class="text-sm text-gray-700">
                   {{ apiKey.name }}
                 </p>
                 <p class="mt-1 text-xs text-gray-600">
-                  当前过期时间：{{
-                    apiKey.expiresAt ? formatExpireDate(apiKey.expiresAt) : '永不过期'
+                  {{ $t('apiKeys.renewApiKeyModal.currentExpiry')
+                  }}{{
+                    apiKey.expiresAt
+                      ? formatExpireDate(apiKey.expiresAt)
+                      : $t('apiKeys.renewApiKeyModal.neverExpires')
                   }}
                 </p>
               </div>
@@ -42,19 +49,21 @@
           </div>
 
           <div>
-            <label class="mb-3 block text-sm font-semibold text-gray-700">续期时长</label>
+            <label class="mb-3 block text-sm font-semibold text-gray-700">{{
+              $t('apiKeys.renewApiKeyModal.renewDuration')
+            }}</label>
             <select
               v-model="form.renewDuration"
               class="form-input w-full"
               @change="updateRenewExpireAt"
             >
-              <option value="7d">延长 7 天</option>
-              <option value="30d">延长 30 天</option>
-              <option value="90d">延长 90 天</option>
-              <option value="180d">延长 180 天</option>
-              <option value="365d">延长 365 天</option>
-              <option value="custom">自定义日期</option>
-              <option value="permanent">设为永不过期</option>
+              <option value="7d">{{ $t('apiKeys.renewApiKeyModal.extend7Days') }}</option>
+              <option value="30d">{{ $t('apiKeys.renewApiKeyModal.extend30Days') }}</option>
+              <option value="90d">{{ $t('apiKeys.renewApiKeyModal.extend90Days') }}</option>
+              <option value="180d">{{ $t('apiKeys.renewApiKeyModal.extend180Days') }}</option>
+              <option value="365d">{{ $t('apiKeys.renewApiKeyModal.extend365Days') }}</option>
+              <option value="custom">{{ $t('apiKeys.renewApiKeyModal.customDate') }}</option>
+              <option value="permanent">{{ $t('apiKeys.renewApiKeyModal.setPermanent') }}</option>
             </select>
             <div v-if="form.renewDuration === 'custom'" class="mt-3">
               <input
@@ -66,7 +75,8 @@
               />
             </div>
             <p v-if="form.newExpiresAt" class="mt-2 text-xs text-gray-500">
-              新的过期时间：{{ formatExpireDate(form.newExpiresAt) }}
+              {{ $t('apiKeys.renewApiKeyModal.newExpiry')
+              }}{{ formatExpireDate(form.newExpiresAt) }}
             </p>
           </div>
         </div>
@@ -77,7 +87,7 @@
             type="button"
             @click="$emit('close')"
           >
-            取消
+            {{ $t('apiKeys.renewApiKeyModal.cancel') }}
           </button>
           <button
             class="btn btn-primary flex-1 px-6 py-3 font-semibold"
@@ -87,7 +97,11 @@
           >
             <div v-if="loading" class="loading-spinner mr-2" />
             <i v-else class="fas fa-clock mr-2" />
-            {{ loading ? '续期中...' : '确认续期' }}
+            {{
+              loading
+                ? $t('apiKeys.renewApiKeyModal.renewing')
+                : $t('apiKeys.renewApiKeyModal.confirmRenew')
+            }}
           </button>
         </div>
       </div>
@@ -97,9 +111,12 @@
 
 <script setup>
 import { ref, reactive, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 
+const { t } = useI18n()
+
 const props = defineProps({
   apiKey: {
     type: Object,
@@ -133,7 +150,10 @@ const minDateTime = computed(() => {
 // 格式化过期日期
 const formatExpireDate = (dateString) => {
   const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
+  // 根据当前语言设置选择合适的locale
+  const locale =
+    t('common.locale') === 'en' ? 'en-US' : t('common.locale') === 'zh-TW' ? 'zh-TW' : 'zh-CN'
+  return date.toLocaleString(locale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
@@ -209,14 +229,14 @@ const renewApiKey = async () => {
     const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}`, data)
 
     if (result.success) {
-      showToast('API Key 续期成功', 'success')
+      showToast(t('apiKeys.renewApiKeyModal.renewSuccess'), 'success')
       emit('success')
       emit('close')
     } else {
-      showToast(result.message || '续期失败', 'error')
+      showToast(result.message || t('apiKeys.renewApiKeyModal.renewFailed'), 'error')
     }
   } catch (error) {
-    showToast('续期失败', 'error')
+    showToast(t('apiKeys.renewApiKeyModal.renewFailed'), 'error')
   } finally {
     loading.value = false
   }