feat: 全新的Vue3管理后台(admin-spa)和路由重构

🎨 新增功能： - 使用Vue3 + Vite构建的全新管理后台界面 - 支持Tab切换的API统计页面（统计查询/使用教程） - 优雅的胶囊式Tab切换设计 - 同步了PR #106的会话窗口管理功能 - 完整的响应式设计和骨架屏加载状态 🔧 路由调整： - 新版管理后台部署在 /admin-next/ 路径 - 将根路径 / 重定向到 /admin-next/api-stats - 将 /web 页面路由重定向到新版，保留 /web/auth/* 认证路由 - 将 /apiStats 页面路由重定向到新版，保留API端点 🗑️ 清理工作： - 删除旧版 web/admin/ 静态文件 - 删除旧版 web/apiStats/ 静态文件 - 清理相关的文件服务代码 🐛 修复问题： - 修复重定向循环问题 - 修复环境变量配置 - 修复路由404错误 - 优化构建配置 🚀 生成方式：使用 Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-23 21:17:30 +00:00 · 2025-07-29 12:40:51 +08:00
parent c98de2aca5
commit 414856f152
70 changed files with 18748 additions and 10314 deletions
--- a/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/RenewApiKeyModal.vue
@@ -0,0 +1,224 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 modal z-50 flex items-center justify-center p-4">
+      <div class="modal-content w-full max-w-md p-8 mx-auto max-h-[90vh] flex flex-col">
+      <div class="flex items-center justify-between mb-6">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
+            <i class="fas fa-clock text-white"></i>
+          </div>
+          <h3 class="text-xl font-bold text-gray-900">续期 API Key</h3>
+        </div>
+        <button 
+          @click="$emit('close')"
+          class="text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <i class="fas fa-times text-xl"></i>
+        </button>
+      </div>
+      
+      <div class="space-y-6 modal-scroll-content custom-scrollbar flex-1">
+        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <div class="flex items-start gap-3">
+            <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
+              <i class="fas fa-info text-white text-sm"></i>
+            </div>
+            <div>
+              <h4 class="font-semibold text-gray-800 mb-1">API Key 信息</h4>
+              <p class="text-sm text-gray-700">{{ apiKey.name }}</p>
+              <p class="text-xs text-gray-600 mt-1">
+                当前过期时间：{{ apiKey.expiresAt ? formatExpireDate(apiKey.expiresAt) : '永不过期' }}
+              </p>
+            </div>
+          </div>
+        </div>
+        
+        <div>
+          <label class="block text-sm font-semibold text-gray-700 mb-3">续期时长</label>
+          <select 
+            v-model="form.renewDuration" 
+            @change="updateRenewExpireAt"
+            class="form-input w-full"
+          >
+            <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>
+          </select>
+          <div v-if="form.renewDuration === 'custom'" class="mt-3">
+            <input 
+              v-model="form.customExpireDate" 
+              type="datetime-local" 
+              class="form-input w-full"
+              :min="minDateTime"
+              @change="updateCustomRenewExpireAt"
+            >
+          </div>
+          <p v-if="form.newExpiresAt" class="text-xs text-gray-500 mt-2">
+            新的过期时间：{{ formatExpireDate(form.newExpiresAt) }}
+          </p>
+        </div>
+      </div>
+      
+      <div class="flex gap-3 pt-4">
+        <button 
+          type="button" 
+          @click="$emit('close')" 
+          class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-colors"
+        >
+          取消
+        </button>
+        <button 
+          type="button" 
+          @click="renewApiKey"
+          :disabled="loading || !form.renewDuration"
+          class="btn btn-primary flex-1 py-3 px-6 font-semibold"
+        >
+          <div v-if="loading" class="loading-spinner mr-2"></div>
+          <i v-else class="fas fa-clock mr-2"></i>
+          {{ loading ? '续期中...' : '确认续期' }}
+        </button>
+      </div>
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { showToast } from '@/utils/toast'
+import { useAuthStore } from '@/stores/auth'
+import { apiClient } from '@/config/api'
+
+const props = defineProps({
+  apiKey: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['close', 'success'])
+
+const authStore = useAuthStore()
+const loading = ref(false)
+
+// 表单数据
+const form = reactive({
+  renewDuration: '30d',
+  customExpireDate: '',
+  newExpiresAt: null
+})
+
+// 计算最小日期时间
+const minDateTime = computed(() => {
+  const now = new Date()
+  // 如果有当前过期时间且未过期，从当前过期时间开始
+  if (props.apiKey.expiresAt && new Date(props.apiKey.expiresAt) > now) {
+    return new Date(props.apiKey.expiresAt).toISOString().slice(0, 16)
+  }
+  // 否则从现在开始
+  now.setMinutes(now.getMinutes() + 1)
+  return now.toISOString().slice(0, 16)
+})
+
+// 格式化过期日期
+const formatExpireDate = (dateString) => {
+  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 updateRenewExpireAt = () => {
+  if (!form.renewDuration) {
+    form.newExpiresAt = null
+    return
+  }
+  
+  if (form.renewDuration === 'permanent') {
+    form.newExpiresAt = null
+    return
+  }
+  
+  if (form.renewDuration === 'custom') {
+    return
+  }
+  
+  // 计算新的过期时间
+  const baseDate = props.apiKey.expiresAt && new Date(props.apiKey.expiresAt) > new Date() 
+    ? new Date(props.apiKey.expiresAt) 
+    : new Date()
+  
+  const duration = form.renewDuration
+  const match = duration.match(/(\d+)([dhmy])/)
+  
+  if (match) {
+    const [, value, unit] = match
+    const num = parseInt(value)
+    
+    switch (unit) {
+      case 'd':
+        baseDate.setDate(baseDate.getDate() + num)
+        break
+      case 'h':
+        baseDate.setHours(baseDate.getHours() + num)
+        break
+      case 'm':
+        baseDate.setMonth(baseDate.getMonth() + num)
+        break
+      case 'y':
+        baseDate.setFullYear(baseDate.getFullYear() + num)
+        break
+    }
+    
+    form.newExpiresAt = baseDate.toISOString()
+  }
+}
+
+// 更新自定义续期时间
+const updateCustomRenewExpireAt = () => {
+  if (form.customExpireDate) {
+    form.newExpiresAt = new Date(form.customExpireDate).toISOString()
+  }
+}
+
+// 续期 API Key
+const renewApiKey = async () => {
+  loading.value = true
+  
+  try {
+    const data = {
+      expiresAt: form.renewDuration === 'permanent' ? null : form.newExpiresAt
+    }
+    
+    const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}/renew`, data)
+    
+    if (result.success) {
+      showToast('API Key 续期成功', 'success')
+      emit('success')
+      emit('close')
+    } else {
+      showToast(result.message || '续期失败', 'error')
+    }
+  } catch (error) {
+    showToast('续期失败', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化
+updateRenewExpireAt()
+</script>
+
+<style scoped>
+/* 表单样式由全局样式提供 */
+</style>