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>

web/admin-spa/src/components/apistats/ApiKeyInput.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="api-input-wide-card glass-strong rounded-3xl p-6 mb-8 shadow-xl">
+    <!-- 标题区域 -->
+    <div class="wide-card-title text-center mb-6">
+      <h2 class="text-2xl font-bold mb-2">
+        <i class="fas fa-chart-line mr-3"></i>
+        使用统计查询
+      </h2>
+      <p class="text-base text-gray-600">查询您的 API Key 使用情况和统计数据</p>
+    </div>
+    
+    <!-- 输入区域 -->
+    <div class="max-w-4xl mx-auto">
+      <div class="api-input-grid grid grid-cols-1 lg:grid-cols-4">
+        <!-- API Key 输入 -->
+        <div class="lg:col-span-3">
+          <label class="block text-sm font-medium mb-2 text-gray-700">
+            <i class="fas fa-key mr-2"></i>
+            输入您的 API Key
+          </label>
+          <input 
+            v-model="apiKey" 
+            type="password" 
+            placeholder="请输入您的 API Key (cr_...)"
+            class="wide-card-input w-full"
+            @keyup.enter="queryStats"
+            :disabled="loading"
+          >
+        </div>
+        
+        <!-- 查询按钮 -->
+        <div class="lg:col-span-1">
+          <label class="hidden lg:block text-sm font-medium mb-2 text-gray-700">
+            &nbsp;
+          </label>
+          <button 
+            @click="queryStats"
+            :disabled="loading || !apiKey.trim()"
+            class="btn btn-primary btn-query w-full h-full flex items-center justify-center gap-2"
+          >
+            <i v-if="loading" class="fas fa-spinner loading-spinner"></i>
+            <i v-else class="fas fa-search"></i>
+            {{ loading ? '查询中...' : '查询统计' }}
+          </button>
+        </div>
+      </div>
+      
+      <!-- 安全提示 -->
+      <div class="security-notice mt-4">
+        <i class="fas fa-shield-alt mr-2"></i>
+        您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+
+const apiStatsStore = useApiStatsStore()
+const { apiKey, loading } = storeToRefs(apiStatsStore)
+const { queryStats } = apiStatsStore
+</script>
+
+<style scoped>
+/* 宽卡片样式 */
+.api-input-wide-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(25px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.api-input-wide-card:hover {
+  box-shadow: 
+    0 32px 64px -12px rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  transform: translateY(-1px);
+}
+
+/* 标题样式 */
+.wide-card-title h2 {
+  color: #1f2937;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-weight: 700;
+}
+
+.wide-card-title p {
+  color: #4b5563;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.wide-card-title .fas.fa-chart-line {
+  color: #3b82f6;
+  text-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
+}
+
+/* 网格布局 */
+.api-input-grid {
+  align-items: end;
+  gap: 1rem;
+}
+
+/* 输入框样式 */
+.wide-card-input {
+  background: rgba(255, 255, 255, 0.95);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-radius: 12px;
+  padding: 14px 16px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  color: #1f2937;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.wide-card-input::placeholder {
+  color: #9ca3af;
+}
+
+.wide-card-input:focus {
+  outline: none;
+  border-color: #60a5fa;
+  box-shadow: 
+    0 0 0 3px rgba(96, 165, 250, 0.2),
+    0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  background: white;
+}
+
+/* 按钮样式 */
+.btn {
+  font-weight: 500;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  letter-spacing: 0.025em;
+}
+
+/* 查询按钮特定样式 */
+.btn-query {
+  padding: 14px 24px;
+  font-size: 16px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  box-shadow: 
+    0 10px 15px -3px rgba(102, 126, 234, 0.3),
+    0 4px 6px -2px rgba(102, 126, 234, 0.05);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 
+    0 20px 25px -5px rgba(102, 126, 234, 0.3),
+    0 10px 10px -5px rgba(102, 126, 234, 0.1);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 安全提示样式 */
+.security-notice {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 12px 16px;
+  color: #374151;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+}
+
+.security-notice:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.security-notice .fas.fa-shield-alt {
+  color: #10b981;
+  text-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
+}
+
+/* 加载动画 */
+.loading-spinner {
+  animation: spin 1s linear infinite;
+  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+  .api-input-wide-card {
+    padding: 1.25rem;
+  }
+  
+  .wide-card-title {
+    margin-bottom: 1.25rem;
+  }
+  
+  .wide-card-title h2 {
+    font-size: 1.5rem;
+  }
+  
+  .wide-card-title p {
+    font-size: 0.875rem;
+  }
+  
+  .api-input-grid {
+    gap: 1rem;
+  }
+  
+  .wide-card-input {
+    padding: 12px 14px;
+    font-size: 15px;
+  }
+  
+  .btn-query {
+    padding: 12px 20px;
+    font-size: 15px;
+  }
+  
+  .security-notice {
+    padding: 10px 14px;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .api-input-wide-card {
+    padding: 1rem;
+  }
+  
+  .wide-card-title h2 {
+    font-size: 1.25rem;
+  }
+  
+  .wide-card-title p {
+    font-size: 0.8rem;
+  }
+  
+  .wide-card-input {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+  
+  .btn-query {
+    padding: 10px 16px;
+    font-size: 14px;
+  }
+}
+</style>

web/admin-spa/src/components/apistats/LimitConfig.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <!-- 限制配置 -->
+    <div class="card p-6">
+      <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
+        <i class="fas fa-shield-alt mr-3 text-red-500"></i>
+        限制配置
+      </h3>
+      <div class="space-y-3">
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">Token 限制</span>
+          <span class="font-medium text-gray-900">{{ statsData.limits.tokenLimit > 0 ? formatNumber(statsData.limits.tokenLimit) : '无限制' }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">并发限制</span>
+          <span class="font-medium text-gray-900">{{ statsData.limits.concurrencyLimit > 0 ? statsData.limits.concurrencyLimit : '无限制' }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">速率限制</span>
+          <span class="font-medium text-gray-900">
+            {{ statsData.limits.rateLimitRequests > 0 && statsData.limits.rateLimitWindow > 0 
+                ? `${statsData.limits.rateLimitRequests}次/${statsData.limits.rateLimitWindow}分钟` 
+                : '无限制' }}
+          </span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">每日费用限制</span>
+          <span class="font-medium text-gray-900">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">模型限制</span>
+          <span class="font-medium text-gray-900">
+            <span v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
+                  class="text-orange-600">
+              <i class="fas fa-exclamation-triangle mr-1"></i>
+              限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
+            </span>
+            <span v-else class="text-green-600">
+              <i class="fas fa-check-circle mr-1"></i>
+              允许所有模型
+            </span>
+          </span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">客户端限制</span>
+          <span class="font-medium text-gray-900">
+            <span v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
+                  class="text-orange-600">
+              <i class="fas fa-exclamation-triangle mr-1"></i>
+              限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
+            </span>
+            <span v-else class="text-green-600">
+              <i class="fas fa-check-circle mr-1"></i>
+              允许所有客户端
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详细限制信息 -->
+    <div v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) || 
+               (statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)" 
+         class="card p-6 mt-6">
+      <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
+        <i class="fas fa-list-alt mr-3 text-amber-500"></i>
+        详细限制信息
+      </h3>
+      
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- 模型限制详情 -->
+        <div v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
+             class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+          <h4 class="font-bold text-amber-800 mb-3 flex items-center">
+            <i class="fas fa-robot mr-2"></i>
+            受限模型列表
+          </h4>
+          <div class="space-y-2">
+            <div v-for="model in statsData.restrictions.restrictedModels" 
+                 :key="model" 
+                 class="bg-white rounded px-3 py-2 text-sm border border-amber-200">
+              <i class="fas fa-ban mr-2 text-red-500"></i>
+              <span class="text-gray-800">{{ model }}</span>
+            </div>
+          </div>
+          <p class="text-xs text-amber-700 mt-3">
+            <i class="fas fa-info-circle mr-1"></i>
+            此 API Key 不能访问以上列出的模型
+          </p>
+        </div>
+        
+        <!-- 客户端限制详情 -->
+        <div v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
+             class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h4 class="font-bold text-blue-800 mb-3 flex items-center">
+            <i class="fas fa-desktop mr-2"></i>
+            允许的客户端
+          </h4>
+          <div class="space-y-2">
+            <div v-for="client in statsData.restrictions.allowedClients" 
+                 :key="client" 
+                 class="bg-white rounded px-3 py-2 text-sm border border-blue-200">
+              <i class="fas fa-check mr-2 text-green-500"></i>
+              <span class="text-gray-800">{{ client }}</span>
+            </div>
+          </div>
+          <p class="text-xs text-blue-700 mt-3">
+            <i class="fas fa-info-circle mr-1"></i>
+            此 API Key 只能被以上列出的客户端使用
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+
+const apiStatsStore = useApiStatsStore()
+const { statsData } = storeToRefs(apiStatsStore)
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (typeof num !== 'number') {
+    num = parseInt(num) || 0
+  }
+  
+  if (num === 0) return '0'
+  
+  // 大数字使用简化格式
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  } else {
+    return num.toLocaleString()
+  }
+}
+</script>
+
+<style scoped>
+/* 卡片样式 */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+}
+</style>

web/admin-spa/src/components/apistats/ModelUsageStats.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="card p-6">
+    <div class="mb-6">
+      <h3 class="text-xl font-bold flex items-center text-gray-900">
+        <i class="fas fa-robot mr-3 text-indigo-500"></i>
+        模型使用统计 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
+      </h3>
+    </div>
+
+    <!-- 模型统计加载状态 -->
+    <div v-if="modelStatsLoading" class="text-center py-8">
+      <i class="fas fa-spinner loading-spinner text-2xl mb-2 text-gray-600"></i>
+      <p class="text-gray-600">加载模型统计数据中...</p>
+    </div>
+
+    <!-- 模型统计数据 -->
+    <div v-else-if="modelStats.length > 0" class="space-y-4">
+      <div 
+        v-for="(model, index) in modelStats" 
+        :key="index"
+        class="model-usage-item"
+      >
+        <div class="flex justify-between items-start mb-3">
+          <div>
+            <h4 class="font-bold text-lg text-gray-900">{{ model.model }}</h4>
+            <p class="text-gray-600 text-sm">{{ model.requests }} 次请求</p>
+          </div>
+          <div class="text-right">
+            <div class="text-lg font-bold text-green-600">{{ model.formatted?.total || '$0.000000' }}</div>
+            <div class="text-sm text-gray-600">总费用</div>
+          </div>
+        </div>
+        
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+          <div class="bg-gray-50 rounded p-2">
+            <div class="text-gray-600">输入 Token</div>
+            <div class="font-medium text-gray-900">{{ formatNumber(model.inputTokens) }}</div>
+          </div>
+          <div class="bg-gray-50 rounded p-2">
+            <div class="text-gray-600">输出 Token</div>
+            <div class="font-medium text-gray-900">{{ formatNumber(model.outputTokens) }}</div>
+          </div>
+          <div class="bg-gray-50 rounded p-2">
+            <div class="text-gray-600">缓存创建</div>
+            <div class="font-medium text-gray-900">{{ formatNumber(model.cacheCreateTokens) }}</div>
+          </div>
+          <div class="bg-gray-50 rounded p-2">
+            <div class="text-gray-600">缓存读取</div>
+            <div class="font-medium text-gray-900">{{ formatNumber(model.cacheReadTokens) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 无模型数据 -->
+    <div v-else class="text-center py-8 text-gray-500">
+      <i class="fas fa-chart-pie text-3xl mb-3"></i>
+      <p>暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+
+const apiStatsStore = useApiStatsStore()
+const { statsPeriod, modelStats, modelStatsLoading } = storeToRefs(apiStatsStore)
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (typeof num !== 'number') {
+    num = parseInt(num) || 0
+  }
+  
+  if (num === 0) return '0'
+  
+  // 大数字使用简化格式
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  } else {
+    return num.toLocaleString()
+  }
+}
+</script>
+
+<style scoped>
+/* 卡片样式 */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+}
+
+/* 模型使用项样式 */
+.model-usage-item {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.model-usage-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.model-usage-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 加载动画 */
+.loading-spinner {
+  animation: spin 1s linear infinite;
+  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+  .model-usage-item .grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .model-usage-item .grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

web/admin-spa/src/components/apistats/StatsOverview.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+    <!-- API Key 基本信息 -->
+    <div class="card p-6">
+      <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
+        <i class="fas fa-info-circle mr-3 text-blue-500"></i>
+        API Key 信息
+      </h3>
+      <div class="space-y-3">
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">名称</span>
+          <span class="font-medium text-gray-900">{{ statsData.name }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">状态</span>
+          <span :class="statsData.isActive ? 'text-green-600' : 'text-red-600'" class="font-medium">
+            <i :class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'" class="mr-1"></i>
+            {{ statsData.isActive ? '活跃' : '已停用' }}
+          </span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">权限</span>
+          <span class="font-medium text-gray-900">{{ formatPermissions(statsData.permissions) }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">创建时间</span>
+          <span class="font-medium text-gray-900">{{ formatDate(statsData.createdAt) }}</span>
+        </div>
+        <div class="flex justify-between items-center">
+          <span class="text-gray-600">过期时间</span>
+          <div v-if="statsData.expiresAt">
+            <div v-if="isApiKeyExpired(statsData.expiresAt)" class="text-red-600 font-medium">
+              <i class="fas fa-exclamation-circle mr-1"></i>
+              已过期
+            </div>
+            <div v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)" class="text-orange-600 font-medium">
+              <i class="fas fa-clock mr-1"></i>
+              {{ formatExpireDate(statsData.expiresAt) }}
+            </div>
+            <div v-else class="text-gray-900 font-medium">
+              {{ formatExpireDate(statsData.expiresAt) }}
+            </div>
+          </div>
+          <div v-else class="text-gray-400 font-medium">
+            <i class="fas fa-infinity mr-1"></i>
+            永不过期
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用统计概览 -->
+    <div class="card p-6">
+      <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
+        <i class="fas fa-chart-bar mr-3 text-green-500"></i>
+        使用统计概览 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
+      </h3>
+      <div class="grid grid-cols-2 gap-4">
+        <div class="stat-card text-center">
+          <div class="text-3xl font-bold text-green-600">{{ formatNumber(currentPeriodData.requests) }}</div>
+          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-3xl font-bold text-blue-600">{{ formatNumber(currentPeriodData.allTokens) }}</div>
+          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-3xl font-bold text-purple-600">{{ currentPeriodData.formattedCost || '$0.000000' }}</div>
+          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用</div>
+        </div>
+        <div class="stat-card text-center">
+          <div class="text-3xl font-bold text-yellow-600">{{ formatNumber(currentPeriodData.inputTokens) }}</div>
+          <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+import dayjs from 'dayjs'
+
+const apiStatsStore = useApiStatsStore()
+const { statsData, statsPeriod, currentPeriodData } = storeToRefs(apiStatsStore)
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '无'
+  
+  try {
+    const date = dayjs(dateString)
+    return date.format('YYYY年MM月DD日 HH:mm')
+  } catch (error) {
+    return '格式错误'
+  }
+}
+
+// 格式化过期日期
+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'
+  })
+}
+
+// 检查 API Key 是否已过期
+const isApiKeyExpired = (expiresAt) => {
+  if (!expiresAt) return false
+  return new Date(expiresAt) < new Date()
+}
+
+// 检查 API Key 是否即将过期（7天内）
+const isApiKeyExpiringSoon = (expiresAt) => {
+  if (!expiresAt) return false
+  const expireDate = new Date(expiresAt)
+  const now = new Date()
+  const daysUntilExpire = (expireDate - now) / (1000 * 60 * 60 * 24)
+  return daysUntilExpire > 0 && daysUntilExpire <= 7
+}
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (typeof num !== 'number') {
+    num = parseInt(num) || 0
+  }
+  
+  if (num === 0) return '0'
+  
+  // 大数字使用简化格式
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  } else {
+    return num.toLocaleString()
+  }
+}
+
+// 格式化权限
+const formatPermissions = (permissions) => {
+  const permissionMap = {
+    'claude': 'Claude',
+    'gemini': 'Gemini', 
+    'all': '全部模型'
+  }
+  
+  return permissionMap[permissions] || permissions || '未知'
+}
+</script>
+
+<style scoped>
+/* 卡片样式 */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+}
+
+/* 统计卡片样式 */
+.stat-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 24px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.stat-card:hover::before {
+  opacity: 1;
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+  .card {
+    margin-bottom: 1rem;
+  }
+  
+  .stat-card {
+    padding: 0.75rem;
+  }
+  
+  .stat-card .text-3xl {
+    font-size: 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .card {
+    padding: 1rem;
+  }
+  
+  .stat-card {
+    padding: 0.5rem;
+  }
+  
+  .stat-card .text-3xl {
+    font-size: 1.25rem;
+  }
+  
+  .stat-card .text-sm {
+    font-size: 0.75rem;
+  }
+}
+</style>

web/admin-spa/src/components/apistats/TokenDistribution.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="card p-6">
+    <h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
+      <i class="fas fa-coins mr-3 text-yellow-500"></i>
+      Token 使用分布 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
+    </h3>
+    <div class="space-y-3">
+      <div class="flex justify-between items-center">
+        <span class="text-gray-600 flex items-center">
+          <i class="fas fa-arrow-right mr-2 text-green-500"></i>
+          输入 Token
+        </span>
+        <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
+      </div>
+      <div class="flex justify-between items-center">
+        <span class="text-gray-600 flex items-center">
+          <i class="fas fa-arrow-left mr-2 text-blue-500"></i>
+          输出 Token
+        </span>
+        <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
+      </div>
+      <div class="flex justify-between items-center">
+        <span class="text-gray-600 flex items-center">
+          <i class="fas fa-save mr-2 text-purple-500"></i>
+          缓存创建 Token
+        </span>
+        <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
+      </div>
+      <div class="flex justify-between items-center">
+        <span class="text-gray-600 flex items-center">
+          <i class="fas fa-download mr-2 text-orange-500"></i>
+          缓存读取 Token
+        </span>
+        <span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
+      </div>
+    </div>
+    <div class="mt-4 pt-4 border-t border-gray-200">
+      <div class="flex justify-between items-center font-bold text-gray-900">
+        <span>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
+        <span class="text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useApiStatsStore } from '@/stores/apistats'
+
+const apiStatsStore = useApiStatsStore()
+const { statsPeriod, currentPeriodData } = storeToRefs(apiStatsStore)
+
+// 格式化数字
+const formatNumber = (num) => {
+  if (typeof num !== 'number') {
+    num = parseInt(num) || 0
+  }
+  
+  if (num === 0) return '0'
+  
+  // 大数字使用简化格式
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M'
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K'
+  } else {
+    return num.toLocaleString()
+  }
+}
+</script>
+
+<style scoped>
+/* 卡片样式 */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 
+    0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.08);
+}
+</style>