feat: 完善管理界面功能和用户体验

- 添加 API Key 窗口倒计时组件 (WindowCountdown)
- 添加自定义下拉菜单组件 (CustomDropdown)
- 优化账户和 API Key 管理界面交互
- 改进教程页面布局和说明文字
- 完善账户状态显示和错误处理

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -442,48 +442,71 @@
               </label>
             </div>
 
-            <div
-              v-if="form.enableModelRestriction"
-              class="space-y-2 rounded-lg border border-red-200 bg-red-50 p-3"
-            >
+            <div v-if="form.enableModelRestriction" class="space-y-3">
               <div>
-                <label class="mb-1 block text-xs font-medium text-gray-700">限制的模型列表</label>
-                <div class="mb-2 flex min-h-[24px] flex-wrap gap-1">
+                <label class="mb-2 block text-sm font-medium text-gray-600">限制的模型列表</label>
+                <div
+                  class="mb-3 flex min-h-[32px] flex-wrap gap-2 rounded-lg border border-gray-200 bg-gray-50 p-2"
+                >
                   <span
                     v-for="(model, index) in form.restrictedModels"
                     :key="index"
-                    class="inline-flex items-center rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
+                    class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm text-red-800"
                   >
                     {{ model }}
                     <button
-                      class="ml-1 text-red-600 hover:text-red-800"
+                      class="ml-2 text-red-600 hover:text-red-800"
                       type="button"
                       @click="removeRestrictedModel(index)"
                     >
                       <i class="fas fa-times text-xs" />
                     </button>
                   </span>
-                  <span v-if="form.restrictedModels.length === 0" class="text-xs text-gray-400">
+                  <span v-if="form.restrictedModels.length === 0" class="text-sm text-gray-400">
                     暂无限制的模型
                   </span>
                 </div>
-                <div class="flex gap-2">
-                  <input
-                    v-model="form.modelInput"
-                    class="form-input flex-1 text-sm"
-                    placeholder="输入模型名称，按回车添加"
-                    type="text"
-                    @keydown.enter.prevent="addRestrictedModel"
-                  />
-                  <button
-                    class="rounded-lg bg-red-500 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-600"
-                    type="button"
-                    @click="addRestrictedModel"
-                  >
-                    <i class="fas fa-plus" />
-                  </button>
+                <div class="space-y-3">
+                  <!-- 快速添加按钮 -->
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="model in availableQuickModels"
+                      :key="model"
+                      class="flex-shrink-0 rounded-lg bg-gray-100 px-3 py-1 text-xs text-gray-700 transition-colors hover:bg-gray-200 sm:text-sm"
+                      type="button"
+                      @click="quickAddRestrictedModel(model)"
+                    >
+                      {{ model }}
+                    </button>
+                    <span
+                      v-if="availableQuickModels.length === 0"
+                      class="text-sm italic text-gray-400"
+                    >
+                      所有常用模型已在限制列表中
+                    </span>
+                  </div>
+
+                  <!-- 手动输入 -->
+                  <div class="flex gap-2">
+                    <input
+                      v-model="form.modelInput"
+                      class="form-input flex-1"
+                      placeholder="输入模型名称，按回车添加"
+                      type="text"
+                      @keydown.enter.prevent="addRestrictedModel"
+                    />
+                    <button
+                      class="rounded-lg bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600"
+                      type="button"
+                      @click="addRestrictedModel"
+                    >
+                      <i class="fas fa-plus" />
+                    </button>
+                  </div>
                 </div>
-                <p class="mt-1 text-xs text-gray-500">例如：claude-opus-4-20250514</p>
+                <p class="mt-2 text-xs text-gray-500">
+                  设置此API Key无法访问的模型，例如：claude-opus-4-20250514
+                </p>
               </div>
             </div>
           </div>
@@ -769,6 +792,21 @@ const removeRestrictedModel = (index) => {
   form.restrictedModels.splice(index, 1)
 }
 
+// 常用模型列表
+const commonModels = ref(['claude-opus-4-20250514', 'claude-opus-4-1-20250805'])
+
+// 可用的快捷模型（过滤掉已在限制列表中的）
+const availableQuickModels = computed(() => {
+  return commonModels.value.filter((model) => !form.restrictedModels.includes(model))
+})
+
+// 快速添加限制的模型
+const quickAddRestrictedModel = (model) => {
+  if (!form.restrictedModels.includes(model)) {
+    form.restrictedModels.push(model)
+  }
+}
+
 // 标签管理方法
 const addTag = () => {
   if (newTag.value && newTag.value.trim()) {

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

@@ -238,6 +238,27 @@
             <p class="mt-2 text-xs text-gray-500">设置此 API Key 可同时处理的最大请求数</p>
           </div>
 
+          <!-- 激活账号 -->
+          <div>
+            <div class="mb-3 flex items-center">
+              <input
+                id="editIsActive"
+                v-model="form.isActive"
+                class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-blue-500"
+                type="checkbox"
+              />
+              <label
+                class="ml-2 cursor-pointer text-sm font-semibold text-gray-700"
+                for="editIsActive"
+              >
+                激活账号
+              </label>
+            </div>
+            <p class="mb-4 text-xs text-gray-500">
+              取消勾选将禁用此 API Key，暂停所有请求，客户端返回 401 错误
+            </p>
+          </div>
+
           <div>
             <label class="mb-3 block text-sm font-semibold text-gray-700">服务权限</label>
             <div class="flex gap-4">
@@ -511,7 +532,8 @@ const form = reactive({
   modelInput: '',
   enableClientRestriction: false,
   allowedClients: [],
-  tags: []
+  tags: [],
+  isActive: true
 })
 
 // 添加限制的模型
@@ -628,6 +650,9 @@ const updateApiKey = async () => {
     data.enableClientRestriction = form.enableClientRestriction
     data.allowedClients = form.allowedClients
 
+    // 活跃状态
+    data.isActive = form.isActive
+
     const result = await apiClient.put(`/admin/api-keys/${props.apiKey.id}`, data)
 
     if (result.success) {
@@ -737,6 +762,8 @@ onMounted(async () => {
   // 从后端数据中获取实际的启用状态，而不是根据数组长度推断
   form.enableModelRestriction = props.apiKey.enableModelRestriction || false
   form.enableClientRestriction = props.apiKey.enableClientRestriction || false
+  // 初始化活跃状态，默认为 true
+  form.isActive = props.apiKey.isActive !== undefined ? props.apiKey.isActive : true
 })
 </script>
 

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

@@ -0,0 +1,254 @@
+<template>
+  <div class="space-y-1">
+    <div class="flex items-center justify-between text-xs">
+      <span class="text-gray-500">{{ label }}</span>
+      <span v-if="windowState === 'active'" class="font-medium text-gray-700">
+        <i class="fas fa-clock mr-1 text-blue-500" />
+        {{ formatTime(remainingSeconds) }}
+      </span>
+      <span v-else-if="windowState === 'expired'" class="font-medium text-orange-600">
+        <i class="fas fa-sync-alt mr-1" />
+        窗口已过期
+      </span>
+      <span v-else-if="windowState === 'notStarted'" class="font-medium text-gray-500">
+        <i class="fas fa-pause-circle mr-1" />
+        窗口未激活
+      </span>
+      <span v-else class="font-medium text-gray-400"> {{ rateLimitWindow }} 分钟 </span>
+    </div>
+
+    <!-- 进度条（仅在有限制时显示） -->
+    <div v-if="showProgress" class="space-y-0.5">
+      <div v-if="hasRequestLimit" class="space-y-0.5">
+        <div class="flex items-center justify-between text-xs">
+          <span class="text-gray-400">请求</span>
+          <span class="text-gray-600"> {{ currentRequests || 0 }}/{{ requestLimit }} </span>
+        </div>
+        <div class="h-1 w-full rounded-full bg-gray-200">
+          <div
+            class="h-1 rounded-full transition-all duration-300"
+            :class="getRequestProgressColor()"
+            :style="{ width: getRequestProgress() + '%' }"
+          />
+        </div>
+      </div>
+
+      <div v-if="hasTokenLimit" class="space-y-0.5">
+        <div class="flex items-center justify-between text-xs">
+          <span class="text-gray-400">Token</span>
+          <span class="text-gray-600">
+            {{ formatTokenCount(currentTokens || 0) }}/{{ formatTokenCount(tokenLimit) }}
+          </span>
+        </div>
+        <div class="h-1 w-full rounded-full bg-gray-200">
+          <div
+            class="h-1 rounded-full transition-all duration-300"
+            :class="getTokenProgressColor()"
+            :style="{ width: getTokenProgress() + '%' }"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 额外提示信息 -->
+    <div v-if="windowState === 'active' && showTooltip" class="text-xs text-gray-500">
+      <i class="fas fa-info-circle mr-1" />
+      <span v-if="remainingSeconds < 60">即将重置</span>
+      <span v-else-if="remainingSeconds < 300"
+        >{{ Math.ceil(remainingSeconds / 60) }} 分钟后重置</span
+      >
+      <span v-else>{{ formatDetailedTime(remainingSeconds) }}后重置</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '窗口限制'
+  },
+  rateLimitWindow: {
+    type: Number,
+    required: true
+  },
+  windowStartTime: {
+    type: Number,
+    default: null
+  },
+  windowEndTime: {
+    type: Number,
+    default: null
+  },
+  windowRemainingSeconds: {
+    type: Number,
+    default: null
+  },
+  currentRequests: {
+    type: Number,
+    default: 0
+  },
+  requestLimit: {
+    type: Number,
+    default: 0
+  },
+  currentTokens: {
+    type: Number,
+    default: 0
+  },
+  tokenLimit: {
+    type: Number,
+    default: 0
+  },
+  showProgress: {
+    type: Boolean,
+    default: true
+  },
+  showTooltip: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 响应式数据
+const remainingSeconds = ref(props.windowRemainingSeconds)
+let intervalId = null
+
+// 计算属性
+const windowState = computed(() => {
+  if (props.windowStartTime === null) {
+    return 'notStarted' // 窗口未开始
+  }
+  if (remainingSeconds.value === 0) {
+    return 'expired' // 窗口已过期
+  }
+  if (remainingSeconds.value > 0) {
+    return 'active' // 窗口活跃中
+  }
+  return 'unknown'
+})
+
+const hasRequestLimit = computed(() => props.requestLimit > 0)
+const hasTokenLimit = computed(() => props.tokenLimit > 0)
+
+// 方法
+const formatTime = (seconds) => {
+  if (seconds === null || seconds === undefined) return '--:--'
+
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`
+  } else if (minutes > 0) {
+    return `${minutes}m ${secs}s`
+  } else {
+    return `${secs}s`
+  }
+}
+
+const formatDetailedTime = (seconds) => {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+
+  if (hours > 0) {
+    return `${hours}小时${minutes}分钟`
+  } else {
+    return `${minutes}分钟`
+  }
+}
+
+const formatTokenCount = (count) => {
+  if (count >= 1000000) {
+    return (count / 1000000).toFixed(1) + 'M'
+  } else if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'K'
+  }
+  return count.toString()
+}
+
+const getRequestProgress = () => {
+  if (!props.requestLimit || props.requestLimit === 0) return 0
+  const percentage = ((props.currentRequests || 0) / props.requestLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+const getRequestProgressColor = () => {
+  const progress = getRequestProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-blue-500'
+}
+
+const getTokenProgress = () => {
+  if (!props.tokenLimit || props.tokenLimit === 0) return 0
+  const percentage = ((props.currentTokens || 0) / props.tokenLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+const getTokenProgressColor = () => {
+  const progress = getTokenProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-purple-500'
+}
+
+// 更新倒计时
+const updateCountdown = () => {
+  if (props.windowEndTime && remainingSeconds.value > 0) {
+    const now = Date.now()
+    const remaining = Math.max(0, Math.floor((props.windowEndTime - now) / 1000))
+    remainingSeconds.value = remaining
+
+    if (remaining === 0) {
+      // 窗口已过期，停止倒计时
+      if (intervalId) {
+        clearInterval(intervalId)
+        intervalId = null
+      }
+    }
+  }
+}
+
+// 监听props变化
+watch(
+  () => props.windowRemainingSeconds,
+  (newVal) => {
+    remainingSeconds.value = newVal
+  }
+)
+
+watch(
+  () => props.windowEndTime,
+  (newVal) => {
+    if (newVal) {
+      // 重新计算剩余时间
+      updateCountdown()
+
+      // 如果窗口活跃且没有定时器，启动定时器
+      if (!intervalId && remainingSeconds.value > 0) {
+        intervalId = setInterval(updateCountdown, 1000)
+      }
+    }
+  }
+)
+
+// 生命周期钩子
+onMounted(() => {
+  if (props.windowEndTime && remainingSeconds.value > 0) {
+    // 立即更新一次
+    updateCountdown()
+    // 启动定时器
+    intervalId = setInterval(updateCountdown, 1000)
+  }
+})
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+</script>