fix: 修复仪表盘和API统计页面的多个问题

- 修复仪表盘天粒度下7天/30天快捷选择无数据的问题
- 修复API Keys页面统计按钮链接路由错误(admin -> admin-next)
- 改进统计页面限制展示，使用3个进度条更直观显示使用情况
- 后端API响应增加当前使用量数据(currentWindowRequests/Tokens/DailyCost)
- 修复教程页面window.location.origin为空的兼容性问题
- 无限制时使用无穷符号(∞)展示，提升用户体验

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

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

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

@@ -6,64 +6,131 @@
         <i class="fas fa-shield-alt mr-2 md:mr-3 text-red-500 text-sm md:text-base" />
         限制配置
       </h3>
-      <div class="space-y-2 md:space-y-3">
-        <div class="flex justify-between items-center">
-          <span class="text-gray-600 text-sm md:text-base">Token 限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.tokenLimit > 0 ? formatNumber(statsData.limits.tokenLimit) : '无限制' }}</span>
-        </div>
-        <div class="flex justify-between items-center">
-          <span class="text-gray-600 text-sm md:text-base">并发限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.concurrencyLimit > 0 ? statsData.limits.concurrencyLimit : '无限制' }}</span>
-        </div>
-        <div class="flex justify-between items-center">
-          <span class="text-gray-600 text-sm md:text-base">速率限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">
-            {{ 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 text-sm md:text-base">每日费用限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
-        </div>
-        <div class="flex justify-between items-center">
-          <span class="text-gray-600 text-sm md:text-base">模型限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">
-            <span
-              v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
-              class="text-orange-600"
-            >
-              <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-              限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
+      <div class="space-y-4 md:space-y-5">
+        <!-- 每日费用限制 -->
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <span class="text-gray-600 text-sm md:text-base font-medium">每日费用限制</span>
+            <span class="text-xs md:text-sm text-gray-500">
+              <span v-if="statsData.limits.dailyCostLimit > 0">
+                ${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{ statsData.limits.dailyCostLimit.toFixed(2) }}
+              </span>
+              <span v-else class="flex items-center gap-1">
+                ${{ statsData.limits.currentDailyCost.toFixed(4) }} / <i class="fas fa-infinity" />
+              </span>
             </span>
-            <span
-              v-else
-              class="text-green-600"
-            >
-              <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
-              允许所有模型
-            </span>
-          </span>
+          </div>
+          <div v-if="statsData.limits.dailyCostLimit > 0" class="w-full bg-gray-200 rounded-full h-2">
+            <div 
+              :class="getDailyCostProgressColor()"
+              class="h-2 rounded-full transition-all duration-300"
+              :style="{ width: getDailyCostProgress() + '%' }"
+            />
+          </div>
+          <div v-else class="w-full bg-gray-200 rounded-full h-2">
+            <div class="bg-green-500 h-2 rounded-full" style="width: 0%" />
+          </div>
         </div>
-        <div class="flex justify-between items-center">
-          <span class="text-gray-600 text-sm md:text-base">客户端限制</span>
-          <span class="font-medium text-gray-900 text-sm md:text-base">
-            <span
-              v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
-              class="text-orange-600"
-            >
-              <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
-              限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
+        
+        <!-- 时间窗口限制 -->
+        <div v-if="statsData.limits.rateLimitWindow > 0 && (statsData.limits.rateLimitRequests > 0 || statsData.limits.tokenLimit > 0)">
+          <div class="flex justify-between items-center mb-2">
+            <span class="text-gray-600 text-sm md:text-base font-medium">
+              时间窗口限制 ({{ statsData.limits.rateLimitWindow }}分钟)
             </span>
-            <span
-              v-else
-              class="text-green-600"
-            >
-              <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
-              允许所有客户端
+          </div>
+          
+          <!-- 请求次数限制 -->
+          <div v-if="statsData.limits.rateLimitRequests > 0" class="space-y-1.5 mb-3">
+            <div class="flex justify-between items-center text-xs md:text-sm">
+              <span class="text-gray-500">请求次数</span>
+              <span class="text-gray-700">
+                {{ formatNumber(statsData.limits.currentWindowRequests) }} / {{ formatNumber(statsData.limits.rateLimitRequests) }}
+              </span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-1.5">
+              <div 
+                :class="getWindowRequestProgressColor()"
+                class="h-1.5 rounded-full transition-all duration-300"
+                :style="{ width: getWindowRequestProgress() + '%' }"
+              />
+            </div>
+          </div>
+          
+          <!-- Token使用量限制 -->
+          <div v-if="statsData.limits.tokenLimit > 0" class="space-y-1.5">
+            <div class="flex justify-between items-center text-xs md:text-sm">
+              <span class="text-gray-500">Token 使用量</span>
+              <span class="text-gray-700">
+                {{ formatNumber(statsData.limits.currentWindowTokens) }} / {{ formatNumber(statsData.limits.tokenLimit) }}
+              </span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-1.5">
+              <div 
+                :class="getWindowTokenProgressColor()"
+                class="h-1.5 rounded-full transition-all duration-300"
+                :style="{ width: getWindowTokenProgress() + '%' }"
+              />
+            </div>
+          </div>
+          
+          <div class="mt-2 text-xs text-gray-500">
+            <i class="fas fa-info-circle mr-1" />
+            请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
+          </div>
+        </div>
+        
+        <!-- 其他限制信息 -->
+        <div class="pt-2 border-t border-gray-100 space-y-2">
+          <div class="flex justify-between items-center">
+            <span class="text-gray-600 text-sm md:text-base">并发限制</span>
+            <span class="font-medium text-gray-900 text-sm md:text-base">
+              <span v-if="statsData.limits.concurrencyLimit > 0">
+                {{ statsData.limits.concurrencyLimit }}
+              </span>
+              <span v-else class="flex items-center gap-1">
+                <i class="fas fa-infinity text-gray-400" />
+              </span>
             </span>
-          </span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-gray-600 text-sm md:text-base">模型限制</span>
+            <span class="font-medium text-gray-900 text-sm md:text-base">
+              <span
+                v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0" 
+                class="text-orange-600"
+              >
+                <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
+                限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
+              </span>
+              <span
+                v-else
+                class="text-green-600"
+              >
+                <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
+                允许所有模型
+              </span>
+            </span>
+          </div>
+          <div class="flex justify-between items-center">
+            <span class="text-gray-600 text-sm md:text-base">客户端限制</span>
+            <span class="font-medium text-gray-900 text-sm md:text-base">
+              <span
+                v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0" 
+                class="text-orange-600"
+              >
+                <i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
+                限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
+              </span>
+              <span
+                v-else
+                class="text-green-600"
+              >
+                <i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
+                允许所有客户端
+              </span>
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -158,6 +225,51 @@ const formatNumber = (num) => {
     return num.toLocaleString()
   }
 }
+
+// 获取每日费用进度
+const getDailyCostProgress = () => {
+  if (!statsData.value.limits.dailyCostLimit || statsData.value.limits.dailyCostLimit === 0) return 0
+  const percentage = (statsData.value.limits.currentDailyCost / statsData.value.limits.dailyCostLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+// 获取每日费用进度条颜色
+const getDailyCostProgressColor = () => {
+  const progress = getDailyCostProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-green-500'
+}
+
+// 获取窗口请求进度
+const getWindowRequestProgress = () => {
+  if (!statsData.value.limits.rateLimitRequests || statsData.value.limits.rateLimitRequests === 0) return 0
+  const percentage = (statsData.value.limits.currentWindowRequests / statsData.value.limits.rateLimitRequests) * 100
+  return Math.min(percentage, 100)
+}
+
+// 获取窗口请求进度条颜色
+const getWindowRequestProgressColor = () => {
+  const progress = getWindowRequestProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-blue-500'
+}
+
+// 获取窗口Token进度
+const getWindowTokenProgress = () => {
+  if (!statsData.value.limits.tokenLimit || statsData.value.limits.tokenLimit === 0) return 0
+  const percentage = (statsData.value.limits.currentWindowTokens / statsData.value.limits.tokenLimit) * 100
+  return Math.min(percentage, 100)
+}
+
+// 获取窗口Token进度条颜色
+const getWindowTokenProgressColor = () => {
+  const progress = getWindowTokenProgress()
+  if (progress >= 100) return 'bg-red-500'
+  if (progress >= 80) return 'bg-yellow-500'
+  return 'bg-purple-500'
+}
 </script>
 
 <style scoped>