Merge pull request #97 from kevinconan/main

feat: 新增APIKeys统计页面，并修复一系列问题

VERSION

@@ -1 +1 @@
-1.1.32
+1.1.34

src/app.js

@@ -16,6 +16,7 @@ const pricingService = require('./services/pricingService');
 const apiRoutes = require('./routes/api');
 const adminRoutes = require('./routes/admin');
 const webRoutes = require('./routes/web');
+const apiStatsRoutes = require('./routes/apiStats');
 const geminiRoutes = require('./routes/geminiRoutes');
 const openaiGeminiRoutes = require('./routes/openaiGeminiRoutes');
 const openaiClaudeRoutes = require('./routes/openaiClaudeRoutes');
@@ -120,13 +121,14 @@ class Application {
       this.app.use('/claude', apiRoutes); // /claude 路由别名，与 /api 功能相同
       this.app.use('/admin', adminRoutes);
       this.app.use('/web', webRoutes);
+      this.app.use('/apiStats', apiStatsRoutes);
       this.app.use('/gemini', geminiRoutes);
       this.app.use('/openai/gemini', openaiGeminiRoutes);
       this.app.use('/openai/claude', openaiClaudeRoutes);
       
-      // 🏠 根路径重定向到管理界面
+      // 🏠 根路径重定向到API统计页面
       this.app.get('/', (req, res) => {
-        res.redirect('/web');
+        res.redirect('/apiStats');
       });
       
       // 🏥 增强的健康检查端点

src/routes/apiStats.js

@@ -0,0 +1,365 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const redis = require('../models/redis');
+const logger = require('../utils/logger');
+const apiKeyService = require('../services/apiKeyService');
+const CostCalculator = require('../utils/costCalculator');
+
+const router = express.Router();
+
+// 🛡️ 安全文件服务函数
+function serveStaticFile(req, res, filename, contentType) {
+  const filePath = path.join(__dirname, '../../web/apiStats', filename);
+  
+  try {
+    // 检查文件是否存在
+    if (!fs.existsSync(filePath)) {
+      logger.error(`❌ API Stats file not found: ${filePath}`);
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    // 读取并返回文件内容
+    const content = fs.readFileSync(filePath, 'utf8');
+    res.setHeader('Content-Type', contentType);
+    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    res.send(content);
+    
+    logger.info(`📄 Served API Stats file: ${filename}`);
+  } catch (error) {
+    logger.error(`❌ Error serving API Stats file ${filename}:`, error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+}
+
+// 🏠 API Stats 主页面
+router.get('/', (req, res) => {
+  serveStaticFile(req, res, 'index.html', 'text/html; charset=utf-8');
+});
+
+// 📱 JavaScript 文件
+router.get('/app.js', (req, res) => {
+  serveStaticFile(req, res, 'app.js', 'application/javascript; charset=utf-8');
+});
+
+// 🎨 CSS 文件
+router.get('/style.css', (req, res) => {
+  serveStaticFile(req, res, 'style.css', 'text/css; charset=utf-8');
+});
+
+// 📊 用户API Key统计查询接口 - 安全的自查询接口
+router.post('/api/user-stats', async (req, res) => {
+  try {
+    const { apiKey } = req.body;
+    
+    if (!apiKey) {
+      logger.security(`🔒 Missing API key in user stats query from ${req.ip || 'unknown'}`);
+      return res.status(400).json({
+        error: 'API Key is required',
+        message: 'Please provide your API Key'
+      });
+    }
+
+    // 基本API Key格式验证
+    if (typeof apiKey !== 'string' || apiKey.length < 10 || apiKey.length > 512) {
+      logger.security(`🔒 Invalid API key format in user stats query from ${req.ip || 'unknown'}`);
+      return res.status(400).json({
+        error: 'Invalid API key format',
+        message: 'API key format is invalid'
+      });
+    }
+
+    // 验证API Key（重用现有的验证逻辑）
+    const validation = await apiKeyService.validateApiKey(apiKey);
+    
+    if (!validation.valid) {
+      const clientIP = req.ip || req.connection?.remoteAddress || 'unknown';
+      logger.security(`🔒 Invalid API key in user stats query: ${validation.error} from ${clientIP}`);
+      return res.status(401).json({
+        error: 'Invalid API key',
+        message: validation.error
+      });
+    }
+
+    const keyData = validation.keyData;
+
+    // 记录合法查询
+    logger.api(`📊 User stats query from key: ${keyData.name} (${keyData.id}) from ${req.ip || 'unknown'}`);
+
+    // 获取验证结果中的完整keyData（包含isActive状态和cost信息）
+    const fullKeyData = validation.keyData;
+    
+    // 计算总费用 - 使用与模型统计相同的逻辑（按模型分别计算）
+    let totalCost = 0;
+    let formattedCost = '$0.000000';
+    
+    try {
+      const client = redis.getClientSafe();
+      
+      // 获取所有月度模型统计（与model-stats接口相同的逻辑）
+      const allModelKeys = await client.keys(`usage:${fullKeyData.id}:model:monthly:*:*`);
+      const modelUsageMap = new Map();
+      
+      for (const key of allModelKeys) {
+        const modelMatch = key.match(/usage:.+:model:monthly:(.+):(\d{4}-\d{2})$/);
+        if (!modelMatch) continue;
+        
+        const model = modelMatch[1];
+        const data = await client.hgetall(key);
+        
+        if (data && Object.keys(data).length > 0) {
+          if (!modelUsageMap.has(model)) {
+            modelUsageMap.set(model, {
+              inputTokens: 0,
+              outputTokens: 0,
+              cacheCreateTokens: 0,
+              cacheReadTokens: 0
+            });
+          }
+          
+          const modelUsage = modelUsageMap.get(model);
+          modelUsage.inputTokens += parseInt(data.inputTokens) || 0;
+          modelUsage.outputTokens += parseInt(data.outputTokens) || 0;
+          modelUsage.cacheCreateTokens += parseInt(data.cacheCreateTokens) || 0;
+          modelUsage.cacheReadTokens += parseInt(data.cacheReadTokens) || 0;
+        }
+      }
+      
+      // 按模型计算费用并汇总
+      for (const [model, usage] of modelUsageMap) {
+        const usageData = {
+          input_tokens: usage.inputTokens,
+          output_tokens: usage.outputTokens,
+          cache_creation_input_tokens: usage.cacheCreateTokens,
+          cache_read_input_tokens: usage.cacheReadTokens
+        };
+        
+        const costResult = CostCalculator.calculateCost(usageData, model);
+        totalCost += costResult.costs.total;
+      }
+      
+      // 如果没有模型级别的详细数据，回退到总体数据计算
+      if (modelUsageMap.size === 0 && fullKeyData.usage?.total?.allTokens > 0) {
+        const usage = fullKeyData.usage.total;
+        const costUsage = {
+          input_tokens: usage.inputTokens || 0,
+          output_tokens: usage.outputTokens || 0,
+          cache_creation_input_tokens: usage.cacheCreateTokens || 0,
+          cache_read_input_tokens: usage.cacheReadTokens || 0
+        };
+        
+        const costResult = CostCalculator.calculateCost(costUsage, 'claude-3-5-sonnet-20241022');
+        totalCost = costResult.costs.total;
+      }
+      
+      formattedCost = CostCalculator.formatCost(totalCost);
+      
+    } catch (error) {
+      logger.warn(`Failed to calculate detailed cost for key ${fullKeyData.id}:`, error);
+      // 回退到简单计算
+      if (fullKeyData.usage?.total?.allTokens > 0) {
+        const usage = fullKeyData.usage.total;
+        const costUsage = {
+          input_tokens: usage.inputTokens || 0,
+          output_tokens: usage.outputTokens || 0,
+          cache_creation_input_tokens: usage.cacheCreateTokens || 0,
+          cache_read_input_tokens: usage.cacheReadTokens || 0
+        };
+        
+        const costResult = CostCalculator.calculateCost(costUsage, 'claude-3-5-sonnet-20241022');
+        totalCost = costResult.costs.total;
+        formattedCost = costResult.formatted.total;
+      }
+    }
+
+    // 构建响应数据（只返回该API Key自己的信息，确保不泄露其他信息）
+    const responseData = {
+      id: fullKeyData.id,
+      name: fullKeyData.name,
+      description: keyData.description || '',
+      isActive: true, // 如果能通过validateApiKey验证，说明一定是激活的
+      createdAt: keyData.createdAt,
+      expiresAt: keyData.expiresAt,
+      permissions: fullKeyData.permissions,
+      
+      // 使用统计（使用验证结果中的完整数据）
+      usage: {
+        total: {
+          ...(fullKeyData.usage?.total || {
+            requests: 0,
+            tokens: 0,
+            allTokens: 0,
+            inputTokens: 0,
+            outputTokens: 0,
+            cacheCreateTokens: 0,
+            cacheReadTokens: 0
+          }),
+          cost: totalCost,
+          formattedCost: formattedCost
+        }
+      },
+      
+      // 限制信息（只显示配置，不显示当前使用量）
+      limits: {
+        tokenLimit: fullKeyData.tokenLimit || 0,
+        concurrencyLimit: fullKeyData.concurrencyLimit || 0,
+        rateLimitWindow: fullKeyData.rateLimitWindow || 0,
+        rateLimitRequests: fullKeyData.rateLimitRequests || 0,
+        dailyCostLimit: fullKeyData.dailyCostLimit || 0
+      },
+      
+      // 绑定的账户信息（只显示ID，不显示敏感信息）
+      accounts: {
+        claudeAccountId: fullKeyData.claudeAccountId && fullKeyData.claudeAccountId !== '' ? fullKeyData.claudeAccountId : null,
+        geminiAccountId: fullKeyData.geminiAccountId && fullKeyData.geminiAccountId !== '' ? fullKeyData.geminiAccountId : null
+      },
+      
+      // 模型和客户端限制信息
+      restrictions: {
+        enableModelRestriction: fullKeyData.enableModelRestriction || false,
+        restrictedModels: fullKeyData.restrictedModels || [],
+        enableClientRestriction: fullKeyData.enableClientRestriction || false,
+        allowedClients: fullKeyData.allowedClients || []
+      }
+    };
+
+    res.json({
+      success: true,
+      data: responseData
+    });
+
+  } catch (error) {
+    logger.error('❌ Failed to process user stats query:', error);
+    res.status(500).json({
+      error: 'Internal server error',
+      message: 'Failed to retrieve API key statistics'
+    });
+  }
+});
+
+// 📊 用户模型统计查询接口 - 安全的自查询接口
+router.post('/api/user-model-stats', async (req, res) => {
+  try {
+    const { apiKey, period = 'monthly' } = req.body;
+    
+    if (!apiKey) {
+      logger.security(`🔒 Missing API key in user model stats query from ${req.ip || 'unknown'}`);
+      return res.status(400).json({
+        error: 'API Key is required',
+        message: 'Please provide your API Key'
+      });
+    }
+
+    // 验证API Key
+    const validation = await apiKeyService.validateApiKey(apiKey);
+    
+    if (!validation.valid) {
+      const clientIP = req.ip || req.connection?.remoteAddress || 'unknown';
+      logger.security(`🔒 Invalid API key in user model stats query: ${validation.error} from ${clientIP}`);
+      return res.status(401).json({
+        error: 'Invalid API key',
+        message: validation.error
+      });
+    }
+
+    const keyData = validation.keyData;
+    logger.api(`📊 User model stats query from key: ${keyData.name} (${keyData.id}) for period: ${period}`);
+
+    // 重用管理后台的模型统计逻辑，但只返回该API Key的数据
+    const client = redis.getClientSafe();
+    const today = new Date().toISOString().split('T')[0];
+    const currentMonth = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`;
+    
+    const pattern = period === 'daily' ? 
+      `usage:${keyData.id}:model:daily:*:${today}` : 
+      `usage:${keyData.id}:model:monthly:*:${currentMonth}`;
+    
+    const keys = await client.keys(pattern);
+    const modelStats = [];
+    
+    for (const key of keys) {
+      const match = key.match(period === 'daily' ? 
+        /usage:.+:model:daily:(.+):\d{4}-\d{2}-\d{2}$/ : 
+        /usage:.+:model:monthly:(.+):\d{4}-\d{2}$/
+      );
+      
+      if (!match) continue;
+      
+      const model = match[1];
+      const data = await client.hgetall(key);
+      
+      if (data && Object.keys(data).length > 0) {
+        const usage = {
+          input_tokens: parseInt(data.inputTokens) || 0,
+          output_tokens: parseInt(data.outputTokens) || 0,
+          cache_creation_input_tokens: parseInt(data.cacheCreateTokens) || 0,
+          cache_read_input_tokens: parseInt(data.cacheReadTokens) || 0
+        };
+        
+        const costData = CostCalculator.calculateCost(usage, model);
+        
+        modelStats.push({
+          model,
+          requests: parseInt(data.requests) || 0,
+          inputTokens: usage.input_tokens,
+          outputTokens: usage.output_tokens,
+          cacheCreateTokens: usage.cache_creation_input_tokens,
+          cacheReadTokens: usage.cache_read_input_tokens,
+          allTokens: parseInt(data.allTokens) || 0,
+          costs: costData.costs,
+          formatted: costData.formatted,
+          pricing: costData.pricing
+        });
+      }
+    }
+
+    // 如果没有详细的模型数据，尝试从总体usage中生成
+    if (modelStats.length === 0 && keyData.usage?.total) {
+      const usageData = keyData.usage.total;
+      
+      if (usageData.allTokens > 0) {
+        const usage = {
+          input_tokens: usageData.inputTokens || 0,
+          output_tokens: usageData.outputTokens || 0,
+          cache_creation_input_tokens: usageData.cacheCreateTokens || 0,
+          cache_read_input_tokens: usageData.cacheReadTokens || 0
+        };
+        
+        const costData = CostCalculator.calculateCost(usage, 'claude-3-5-sonnet-20241022');
+        
+        modelStats.push({
+          model: '总体使用 (历史数据)',
+          requests: usageData.requests || 0,
+          inputTokens: usageData.inputTokens || 0,
+          outputTokens: usageData.outputTokens || 0,
+          cacheCreateTokens: usageData.cacheCreateTokens || 0,
+          cacheReadTokens: usageData.cacheReadTokens || 0,
+          allTokens: usageData.allTokens || 0,
+          costs: costData.costs,
+          formatted: costData.formatted,
+          pricing: costData.pricing
+        });
+      }
+    }
+
+    // 按总token数降序排列
+    modelStats.sort((a, b) => b.allTokens - a.allTokens);
+
+    res.json({
+      success: true,
+      data: modelStats,
+      period: period
+    });
+
+  } catch (error) {
+    logger.error('❌ Failed to process user model stats query:', error);
+    res.status(500).json({
+      error: 'Internal server error',
+      message: 'Failed to retrieve model statistics'
+    });
+  }
+});
+
+module.exports = router;

src/routes/web.js

@@ -25,7 +25,7 @@ const ALLOWED_FILES = {
   'style.css': {
     path: path.join(__dirname, '../../web/admin/style.css'),
     contentType: 'text/css; charset=utf-8'
-  }
+  },
 };
 
 // 🛡️ 安全文件服务函数
@@ -400,6 +400,9 @@ router.get('/style.css', (req, res) => {
   serveWhitelistedFile(req, res, 'style.css');
 });
 
+
+
+
 // 🔑 Gemini OAuth 回调页面
 
 module.exports = router;

src/services/apiKeyService.js

@@ -147,6 +147,9 @@ class ApiKeyService {
         keyData: {
           id: keyData.id,
           name: keyData.name,
+          description: keyData.description,
+          createdAt: keyData.createdAt,
+          expiresAt: keyData.expiresAt,
           claudeAccountId: keyData.claudeAccountId,
           geminiAccountId: keyData.geminiAccountId,
           permissions: keyData.permissions || 'all',

web/admin/app.js

@@ -2065,11 +2065,11 @@ const app = createApp({
                     method: 'POST',
                     body: JSON.stringify({
                         name: this.apiKeyForm.name,
-                        tokenLimit: this.apiKeyForm.tokenLimit && this.apiKeyForm.tokenLimit.trim() ? parseInt(this.apiKeyForm.tokenLimit) : null,
+                        tokenLimit: this.apiKeyForm.tokenLimit && this.apiKeyForm.tokenLimit.toString().trim() ? parseInt(this.apiKeyForm.tokenLimit) : null,
                         description: this.apiKeyForm.description || '',
-                        concurrencyLimit: this.apiKeyForm.concurrencyLimit && this.apiKeyForm.concurrencyLimit.trim() ? parseInt(this.apiKeyForm.concurrencyLimit) : 0,
+                        concurrencyLimit: this.apiKeyForm.concurrencyLimit && this.apiKeyForm.concurrencyLimit.toString().trim() ? parseInt(this.apiKeyForm.concurrencyLimit) : 0,
-                        rateLimitWindow: this.apiKeyForm.rateLimitWindow && this.apiKeyForm.rateLimitWindow.trim() ? parseInt(this.apiKeyForm.rateLimitWindow) : null,
+                        rateLimitWindow: this.apiKeyForm.rateLimitWindow && this.apiKeyForm.rateLimitWindow.toString().trim() ? parseInt(this.apiKeyForm.rateLimitWindow) : null,
-                        rateLimitRequests: this.apiKeyForm.rateLimitRequests && this.apiKeyForm.rateLimitRequests.trim() ? parseInt(this.apiKeyForm.rateLimitRequests) : null,
+                        rateLimitRequests: this.apiKeyForm.rateLimitRequests && this.apiKeyForm.rateLimitRequests.toString().trim() ? parseInt(this.apiKeyForm.rateLimitRequests) : null,
                         claudeAccountId: this.apiKeyForm.claudeAccountId || null,
                         geminiAccountId: this.apiKeyForm.geminiAccountId || null,
                         permissions: this.apiKeyForm.permissions || 'all',
@@ -2078,7 +2078,7 @@ const app = createApp({
                         enableClientRestriction: this.apiKeyForm.enableClientRestriction,
                         allowedClients: this.apiKeyForm.allowedClients,
                         expiresAt: this.apiKeyForm.expiresAt,
-                        dailyCostLimit: this.apiKeyForm.dailyCostLimit && this.apiKeyForm.dailyCostLimit.trim() ? parseFloat(this.apiKeyForm.dailyCostLimit) : 0
+                        dailyCostLimit: this.apiKeyForm.dailyCostLimit && this.apiKeyForm.dailyCostLimit.toString().trim() ? parseFloat(this.apiKeyForm.dailyCostLimit) : 0
                     })
                 });
                 

web/apiStats/app.js

@@ -0,0 +1,525 @@
+// 初始化 dayjs 插件
+dayjs.extend(dayjs_plugin_relativeTime);
+dayjs.extend(dayjs_plugin_timezone);
+dayjs.extend(dayjs_plugin_utc);
+
+const { createApp } = Vue;
+
+const app = createApp({
+    data() {
+        return {
+            // 用户输入
+            apiKey: '',
+            
+            // 状态控制
+            loading: false,
+            modelStatsLoading: false,
+            error: '',
+            
+            // 时间范围控制
+            statsPeriod: 'daily', // 默认今日
+            
+            // 数据
+            statsData: null,
+            modelStats: [],
+            
+            // 分时间段的统计数据
+            dailyStats: null,
+            monthlyStats: null
+        };
+    },
+    
+    methods: {
+        // 🔍 查询统计数据
+        async queryStats() {
+            if (!this.apiKey.trim()) {
+                this.error = '请输入 API Key';
+                return;
+            }
+            
+            this.loading = true;
+            this.error = '';
+            this.statsData = null;
+            this.modelStats = [];
+            
+            try {
+                const response = await fetch('/apiStats/api/user-stats', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        apiKey: this.apiKey
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (!response.ok) {
+                    throw new Error(result.message || '查询失败');
+                }
+                
+                if (result.success) {
+                    this.statsData = result.data;
+                    
+                    // 同时加载今日和本月的统计数据
+                    await this.loadAllPeriodStats();
+                    
+                    // 清除错误信息
+                    this.error = '';
+                } else {
+                    throw new Error(result.message || '查询失败');
+                }
+                
+            } catch (error) {
+                console.error('Query stats error:', error);
+                this.error = error.message || '查询统计数据失败，请检查您的 API Key 是否正确';
+                this.statsData = null;
+                this.modelStats = [];
+            } finally {
+                this.loading = false;
+            }
+        },
+        
+        // 📊 加载所有时间段的统计数据
+        async loadAllPeriodStats() {
+            if (!this.apiKey.trim()) {
+                return;
+            }
+            
+            // 并行加载今日和本月的数据
+            await Promise.all([
+                this.loadPeriodStats('daily'),
+                this.loadPeriodStats('monthly')
+            ]);
+            
+            // 加载当前选择时间段的模型统计
+            await this.loadModelStats(this.statsPeriod);
+        },
+        
+        // 📊 加载指定时间段的统计数据
+        async loadPeriodStats(period) {
+            try {
+                const response = await fetch('/apiStats/api/user-model-stats', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        apiKey: this.apiKey,
+                        period: period
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (response.ok && result.success) {
+                    // 计算汇总数据
+                    const modelData = result.data || [];
+                    const summary = {
+                        requests: 0,
+                        inputTokens: 0,
+                        outputTokens: 0,
+                        cacheCreateTokens: 0,
+                        cacheReadTokens: 0,
+                        allTokens: 0,
+                        cost: 0,
+                        formattedCost: '$0.000000'
+                    };
+                    
+                    modelData.forEach(model => {
+                        summary.requests += model.requests || 0;
+                        summary.inputTokens += model.inputTokens || 0;
+                        summary.outputTokens += model.outputTokens || 0;
+                        summary.cacheCreateTokens += model.cacheCreateTokens || 0;
+                        summary.cacheReadTokens += model.cacheReadTokens || 0;
+                        summary.allTokens += model.allTokens || 0;
+                        summary.cost += model.costs?.total || 0;
+                    });
+                    
+                    summary.formattedCost = this.formatCost(summary.cost);
+                    
+                    // 存储到对应的时间段数据
+                    if (period === 'daily') {
+                        this.dailyStats = summary;
+                    } else {
+                        this.monthlyStats = summary;
+                    }
+                } else {
+                    console.warn(`Failed to load ${period} stats:`, result.message);
+                }
+                
+            } catch (error) {
+                console.error(`Load ${period} stats error:`, error);
+            }
+        },
+        
+        // 📊 加载模型统计数据
+        async loadModelStats(period = 'daily') {
+            if (!this.apiKey.trim()) {
+                return;
+            }
+            
+            this.modelStatsLoading = true;
+            
+            try {
+                const response = await fetch('/apiStats/api/user-model-stats', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        apiKey: this.apiKey,
+                        period: period
+                    })
+                });
+                
+                const result = await response.json();
+                
+                if (!response.ok) {
+                    throw new Error(result.message || '加载模型统计失败');
+                }
+                
+                if (result.success) {
+                    this.modelStats = result.data || [];
+                } else {
+                    throw new Error(result.message || '加载模型统计失败');
+                }
+                
+            } catch (error) {
+                console.error('Load model stats error:', error);
+                this.modelStats = [];
+                // 不显示错误，因为模型统计是可选的
+            } finally {
+                this.modelStatsLoading = false;
+            }
+        },
+        
+        // 🔄 切换时间范围
+        async switchPeriod(period) {
+            if (this.statsPeriod === period || this.modelStatsLoading) {
+                return;
+            }
+            
+            this.statsPeriod = period;
+            
+            // 如果对应时间段的数据还没有加载，则加载它
+            if ((period === 'daily' && !this.dailyStats) || 
+                (period === 'monthly' && !this.monthlyStats)) {
+                await this.loadPeriodStats(period);
+            }
+            
+            // 加载对应的模型统计
+            await this.loadModelStats(period);
+        },
+        
+        // 📅 格式化日期
+        formatDate(dateString) {
+            if (!dateString) return '无';
+            
+            try {
+                // 使用 dayjs 格式化日期
+                const date = dayjs(dateString);
+                return date.format('YYYY年MM月DD日 HH:mm');
+            } catch (error) {
+                return '格式错误';
+            }
+        },
+        
+        // 📅 格式化过期日期
+        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 是否已过期
+        isApiKeyExpired(expiresAt) {
+            if (!expiresAt) return false;
+            return new Date(expiresAt) < new Date();
+        },
+        
+        // ⏰ 检查 API Key 是否即将过期（7天内）
+        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;
+        },
+        
+        // 🔢 格式化数字
+        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();
+            }
+        },
+        
+        // 💰 格式化费用
+        formatCost(cost) {
+            if (typeof cost !== 'number' || cost === 0) {
+                return '$0.000000';
+            }
+            
+            // 根据数值大小选择精度
+            if (cost >= 1) {
+                return '$' + cost.toFixed(2);
+            } else if (cost >= 0.01) {
+                return '$' + cost.toFixed(4);
+            } else {
+                return '$' + cost.toFixed(6);
+            }
+        },
+        
+        // 🔐 格式化权限
+        formatPermissions(permissions) {
+            const permissionMap = {
+                'claude': 'Claude',
+                'gemini': 'Gemini', 
+                'all': '全部模型'
+            };
+            
+            return permissionMap[permissions] || permissions || '未知';
+        },
+        
+        // 💾 处理错误
+        handleError(error, defaultMessage = '操作失败') {
+            console.error('Error:', error);
+            
+            let errorMessage = defaultMessage;
+            
+            if (error.response) {
+                // HTTP 错误响应
+                if (error.response.data && error.response.data.message) {
+                    errorMessage = error.response.data.message;
+                } else if (error.response.status === 401) {
+                    errorMessage = 'API Key 无效或已过期';
+                } else if (error.response.status === 403) {
+                    errorMessage = '没有权限访问该数据';
+                } else if (error.response.status === 429) {
+                    errorMessage = '请求过于频繁，请稍后再试';
+                } else if (error.response.status >= 500) {
+                    errorMessage = '服务器内部错误，请稍后再试';
+                }
+            } else if (error.message) {
+                errorMessage = error.message;
+            }
+            
+            this.error = errorMessage;
+        },
+        
+        // 📋 复制到剪贴板
+        async copyToClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text);
+                this.showToast('已复制到剪贴板', 'success');
+            } catch (error) {
+                console.error('Copy failed:', error);
+                this.showToast('复制失败', 'error');
+            }
+        },
+        
+        // 🍞 显示 Toast 通知
+        showToast(message, type = 'info') {
+            // 简单的 toast 实现
+            const toast = document.createElement('div');
+            toast.className = `fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg text-white transform transition-all duration-300 ${
+                type === 'success' ? 'bg-green-500' : 
+                type === 'error' ? 'bg-red-500' : 
+                'bg-blue-500'
+            }`;
+            toast.textContent = message;
+            
+            document.body.appendChild(toast);
+            
+            // 显示动画
+            setTimeout(() => {
+                toast.style.transform = 'translateX(0)';
+                toast.style.opacity = '1';
+            }, 100);
+            
+            // 自动隐藏
+            setTimeout(() => {
+                toast.style.transform = 'translateX(100%)';
+                toast.style.opacity = '0';
+                setTimeout(() => {
+                    document.body.removeChild(toast);
+                }, 300);
+            }, 3000);
+        },
+        
+        // 🧹 清除数据
+        clearData() {
+            this.statsData = null;
+            this.modelStats = [];
+            this.dailyStats = null;
+            this.monthlyStats = null;
+            this.error = '';
+            this.statsPeriod = 'daily'; // 重置为默认值
+        },
+        
+        // 🔄 刷新数据
+        async refreshData() {
+            if (this.statsData && this.apiKey) {
+                await this.queryStats();
+            }
+        },
+        
+        // 📊 刷新当前时间段数据
+        async refreshCurrentPeriod() {
+            if (this.apiKey) {
+                await this.loadPeriodStats(this.statsPeriod);
+                await this.loadModelStats(this.statsPeriod);
+            }
+        }
+    },
+    
+    computed: {
+        // 📊 当前时间段的数据
+        currentPeriodData() {
+            if (this.statsPeriod === 'daily') {
+                return this.dailyStats || {
+                    requests: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    cacheCreateTokens: 0,
+                    cacheReadTokens: 0,
+                    allTokens: 0,
+                    cost: 0,
+                    formattedCost: '$0.000000'
+                };
+            } else {
+                return this.monthlyStats || {
+                    requests: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    cacheCreateTokens: 0,
+                    cacheReadTokens: 0,
+                    allTokens: 0,
+                    cost: 0,
+                    formattedCost: '$0.000000'
+                };
+            }
+        },
+        
+        // 📊 使用率计算（基于当前时间段）
+        usagePercentages() {
+            if (!this.statsData || !this.currentPeriodData) {
+                return {
+                    tokenUsage: 0,
+                    costUsage: 0,
+                    requestUsage: 0
+                };
+            }
+            
+            const current = this.currentPeriodData;
+            const limits = this.statsData.limits;
+            
+            return {
+                tokenUsage: limits.tokenLimit > 0 ? Math.min((current.allTokens / limits.tokenLimit) * 100, 100) : 0,
+                costUsage: limits.dailyCostLimit > 0 ? Math.min((current.cost / limits.dailyCostLimit) * 100, 100) : 0,
+                requestUsage: limits.rateLimitRequests > 0 ? Math.min((current.requests / limits.rateLimitRequests) * 100, 100) : 0
+            };
+        },
+        
+        // 📈 统计摘要（基于当前时间段）
+        statsSummary() {
+            if (!this.statsData || !this.currentPeriodData) return null;
+            
+            const current = this.currentPeriodData;
+            
+            return {
+                totalRequests: current.requests || 0,
+                totalTokens: current.allTokens || 0,
+                totalCost: current.cost || 0,
+                formattedCost: current.formattedCost || '$0.000000',
+                inputTokens: current.inputTokens || 0,
+                outputTokens: current.outputTokens || 0,
+                cacheCreateTokens: current.cacheCreateTokens || 0,
+                cacheReadTokens: current.cacheReadTokens || 0
+            };
+        }
+    },
+    
+    watch: {
+        // 监听 API Key 变化
+        apiKey(newValue) {
+            if (!newValue) {
+                this.clearData();
+            }
+            // 清除之前的错误
+            if (this.error) {
+                this.error = '';
+            }
+        }
+    },
+    
+    mounted() {
+        // 页面加载完成后的初始化
+        console.log('User Stats Page loaded');
+        
+        // 检查 URL 参数是否有预填的 API Key（用于开发测试）
+        const urlParams = new URLSearchParams(window.location.search);
+        const presetApiKey = urlParams.get('apiKey');
+        if (presetApiKey && presetApiKey.length > 10) {
+            this.apiKey = presetApiKey;
+        }
+        
+        // 添加键盘快捷键
+        document.addEventListener('keydown', (event) => {
+            // Ctrl/Cmd + Enter 查询
+            if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+                if (!this.loading && this.apiKey.trim()) {
+                    this.queryStats();
+                }
+                event.preventDefault();
+            }
+            
+            // ESC 清除数据
+            if (event.key === 'Escape') {
+                this.clearData();
+                this.apiKey = '';
+            }
+        });
+        
+        // 定期清理无效的 toast 元素
+        setInterval(() => {
+            const toasts = document.querySelectorAll('[class*="fixed top-4 right-4"]');
+            toasts.forEach(toast => {
+                if (toast.style.opacity === '0') {
+                    try {
+                        document.body.removeChild(toast);
+                    } catch (e) {
+                        // 忽略已经被移除的元素
+                    }
+                }
+            });
+        }, 5000);
+    },
+    
+    // 组件销毁前清理
+    beforeUnmount() {
+        // 清理事件监听器
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+});
+
+// 挂载应用
+app.mount('#app');

web/apiStats/index.html

@@ -0,0 +1,450 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Claude Relay Service - API Key 统计</title>
+    
+    <!-- 🎨 样式 -->
+    <link rel="stylesheet" href="/apiStats/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- 🔧 Vue 3 -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    
+    <!-- 📊 Charts -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
+    <!-- 🧮 工具库 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/dayjs.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/plugin/relativeTime.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/plugin/timezone.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.9/plugin/utc.min.js"></script>
+</head>
+<body class="min-h-screen text-white">
+    <div id="app">
+        <!-- 🎯 顶部导航 -->
+        <div class="container mx-auto px-4 py-8">
+            <div class="glass-strong rounded-3xl p-6 mb-8 shadow-xl">
+                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+                    <div class="flex items-center gap-4">
+                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-gray-300/30 rounded-xl flex items-center justify-center backdrop-blur-sm flex-shrink-0">
+                            <i class="fas fa-cloud text-xl text-gray-700"></i>
+                        </div>
+                        <div class="flex flex-col justify-center min-h-[48px]">
+                            <div class="flex items-center gap-3">
+                                <h1 class="text-2xl font-bold text-white header-title leading-tight">Claude Relay Service</h1>
+                            </div>
+                            <p class="text-white/80 text-sm leading-tight">API Key 使用统计</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <a href="/web" class="glass-button rounded-xl px-4 py-2 text-white hover:bg-white/20 transition-colors flex items-center gap-2">
+                            <i class="fas fa-cog text-sm"></i>
+                            <span class="text-sm font-medium">管理后台</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 🔑 API Key 输入区域 -->
+            <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">查询您的 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">
+                            <button 
+                                @click="queryStats"
+                                :disabled="loading || !apiKey.trim()"
+                                class="btn btn-primary w-full px-6 py-3 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>
+
+            <!-- ❌ 错误提示 -->
+            <div v-if="error" class="max-w-2xl mx-auto mb-8">
+                <div class="bg-red-500/20 border border-red-500/30 rounded-lg p-4 text-red-200">
+                    <i class="fas fa-exclamation-triangle mr-2"></i>
+                    {{ error }}
+                </div>
+            </div>
+
+            <!-- 📊 统计数据展示区域 -->
+            <div v-if="statsData" class="fade-in">
+                <!-- 主要内容卡片 -->
+                <div class="glass-strong rounded-3xl p-6">
+                    <!-- 📅 时间范围选择器 -->
+                    <div class="mb-6 pb-6 border-b border-gray-200">
+                        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                            <div class="flex items-center gap-3">
+                                <i class="fas fa-clock text-blue-500 text-lg"></i>
+                                <span class="text-lg font-medium text-gray-700">统计时间范围</span>
+                            </div>
+                            <div class="flex gap-2">
+                                <button 
+                                    @click="switchPeriod('daily')"
+                                    :class="['period-btn', { 'active': statsPeriod === 'daily' }]"
+                                    class="px-6 py-2 text-sm font-medium flex items-center gap-2"
+                                    :disabled="loading || modelStatsLoading"
+                                >
+                                    <i class="fas fa-calendar-day"></i>
+                                    今日
+                                </button>
+                                <button 
+                                    @click="switchPeriod('monthly')"
+                                    :class="['period-btn', { 'active': statsPeriod === 'monthly' }]"
+                                    class="px-6 py-2 text-sm font-medium flex items-center gap-2"
+                                    :disabled="loading || modelStatsLoading"
+                                >
+                                    <i class="fas fa-calendar-alt"></i>
+                                    本月
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 📈 基本信息卡片 -->
+                    <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-2xl 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-2xl 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-2xl 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-2xl font-bold text-yellow-600">{{ formatNumber(currentPeriodData.inputTokens) }}</div>
+                                    <div class="text-sm text-gray-600">{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 📋 详细使用数据 -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                        <!-- Token 分类统计 -->
+                        <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>
+
+                        <!-- 限制设置 -->
+                        <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>
+
+                    <!-- 📋 详细限制信息 -->
+                    <div v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) || 
+                               (statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)" 
+                         class="card p-6 mb-8">
+                        <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 class="card p-6 mb-8">
+                        <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>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <!-- 📱 JavaScript -->
+    <script src="/apiStats/app.js"></script>
+</body>
+</html>

web/apiStats/style.css

@@ -0,0 +1,870 @@
+/* 🎨 用户统计页面自定义样式 - 与管理页面保持一致 */
+
+/* CSS 变量 - 与管理页面保持一致 */
+:root {
+    --primary-color: #667eea;
+    --secondary-color: #764ba2;
+    --accent-color: #f093fb;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+    --surface-color: rgba(255, 255, 255, 0.95);
+    --glass-color: rgba(255, 255, 255, 0.1);
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* 📱 响应式布局优化 */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .card {
+        margin-bottom: 1rem;
+    }
+    
+    .grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .stat-card {
+        padding: 0.75rem;
+    }
+    
+    .stat-card .text-2xl {
+        font-size: 1.5rem;
+    }
+    
+    .model-usage-item .grid {
+        grid-template-columns: 1fr 1fr;
+        gap: 0.5rem;
+    }
+    
+    .text-4xl {
+        font-size: 2rem;
+    }
+    
+    .input-field, .btn-primary {
+        padding: 0.75rem 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    
+    .text-4xl {
+        font-size: 1.75rem;
+    }
+    
+    .text-lg {
+        font-size: 1rem;
+    }
+    
+    .card {
+        padding: 1rem;
+    }
+    
+    .stat-card {
+        padding: 0.5rem;
+    }
+    
+    .stat-card .text-2xl {
+        font-size: 1.25rem;
+    }
+    
+    .stat-card .text-sm {
+        font-size: 0.75rem;
+    }
+    
+    .model-usage-item .grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .flex.gap-3 {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+    
+    .btn-primary {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* 🌈 渐变背景 - 与管理页面一致 */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
+    background-attachment: fixed;
+    min-height: 100vh;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(circle at 20% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.gradient-bg {
+    /* 移除原有的渐变，使用body的背景 */
+}
+
+/* ✨ 卡片样式 - 与管理页面一致 */
+.glass {
+    background: var(--glass-color);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border-color);
+    box-shadow: 
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.glass-strong {
+    background: var(--surface-color);
+    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);
+}
+
+.card {
+    background: var(--surface-color);
+    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;
+}
+
+/* 🔍 输入框样式 - 与管理页面一致 */
+.form-input {
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+    padding: 16px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    color: var(--text-primary);
+}
+
+.form-input::placeholder {
+    color: var(--text-secondary);
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 
+        0 0 0 3px rgba(102, 126, 234, 0.1),
+        0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+}
+
+/* 兼容旧的 input-field 类名 */
+.input-field {
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+    padding: 16px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    color: var(--text-primary);
+}
+
+.input-field::placeholder {
+    color: var(--text-secondary);
+}
+
+.input-field:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 
+        0 0 0 3px rgba(102, 126, 234, 0.1),
+        0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+}
+
+/* ====== 系统标题样式 ====== */
+.header-title {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+    letter-spacing: -0.025em;
+}
+
+/* ====== 玻璃按钮样式 ====== */
+.glass-button {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+    -webkit-backdrop-filter: blur(10px) !important;
+    border-radius: 12px !important;
+    transition: all 0.3s ease !important;
+    color: white !important;
+    text-decoration: none !important;
+    box-shadow: 
+        0 10px 15px -3px rgba(102, 126, 234, 0.3),
+        0 4px 6px -2px rgba(102, 126, 234, 0.05) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.glass-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.glass-button:hover::before {
+    left: 100%;
+}
+
+.glass-button:hover {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 
+        0 20px 25px -5px rgba(102, 126, 234, 0.3),
+        0 10px 10px -5px rgba(102, 126, 234, 0.1) !important;
+    color: white !important;
+    text-decoration: none !important;
+}
+
+/* 🎨 按钮样式 - 与管理页面一致 */
+.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::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.3s ease, height 0.3s ease;
+}
+
+.btn:active::before {
+    width: 300px;
+    height: 300px;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 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 {
+    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;
+}
+
+/* 🎯 修复时间范围按钮样式 */
+.btn-primary {
+    border-radius: 12px !important;
+}
+
+.btn {
+    border-radius: 12px !important;
+}
+
+/* 🎯 时间范围按钮 - 与管理页面 tab-btn 样式一致 */
+.period-btn {
+    position: relative;
+    overflow: hidden;
+    border-radius: 12px;
+    font-weight: 500;
+    letter-spacing: 0.025em;
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+}
+
+.period-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.period-btn:hover::before {
+    left: 100%;
+}
+
+.period-btn.active {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 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);
+    transform: translateY(-1px);
+}
+
+.period-btn:not(.active) {
+    color: #374151;
+    background: transparent;
+}
+
+.period-btn:not(.active):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #1f2937;
+}
+
+/* 📊 模型使用项样式 - 与管理页面保持一致 */
+.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); }
+}
+
+/* 🌟 动画效果 */
+.fade-in {
+    animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(30px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+
+.slide-in {
+    animation: slideIn 0.4s ease-out;
+}
+
+@keyframes slideIn {
+    from { 
+        opacity: 0; 
+        transform: translateX(-30px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateX(0); 
+    }
+}
+
+/* 🎯 焦点样式增强 */
+.input-field:focus-visible,
+.btn-primary:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+}
+
+/* 📱 滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+/* 🚨 错误状态样式 */
+.error-border {
+    border-color: #ef4444 !important;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* 🎉 成功状态样式 */
+.success-border {
+    border-color: #10b981 !important;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+/* 🌙 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+    .card {
+        background: rgba(0, 0, 0, 0.2);
+        border-color: rgba(255, 255, 255, 0.15);
+    }
+    
+    .stat-card {
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    }
+    
+    .input-field {
+        background: rgba(0, 0, 0, 0.3);
+        border-color: rgba(255, 255, 255, 0.3);
+    }
+}
+
+/* 🔍 高对比度模式支持 */
+@media (prefers-contrast: high) {
+    .card {
+        border-width: 2px;
+        border-color: rgba(255, 255, 255, 0.5);
+    }
+    
+    .input-field {
+        border-width: 2px;
+        border-color: rgba(255, 255, 255, 0.6);
+    }
+    
+    .btn-primary {
+        border: 2px solid rgba(255, 255, 255, 0.5);
+    }
+}
+
+/* 📊 数据可视化增强 */
+.chart-container {
+    position: relative;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+/* 🎨 图标动画 */
+.fas {
+    transition: transform 0.3s ease;
+}
+
+.card:hover .fas {
+    transform: scale(1.1);
+}
+
+/* 💫 悬浮效果 */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* 🎯 选中状态 */
+.selected {
+    background: rgba(255, 255, 255, 0.2) !important;
+    border-color: rgba(255, 255, 255, 0.4) !important;
+    transform: scale(1.02);
+}
+
+/* 🌈 彩虹边框效果 */
+.rainbow-border {
+    position: relative;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+    padding: 2px;
+    border-radius: 12px;
+}
+
+.rainbow-border > * {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+}
+
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* 🎯 单层宽卡片样式优化 */
+.api-input-wide-card {
+    background: var(--surface-color);
+    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 !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    font-weight: 700;
+}
+
+.wide-card-title p {
+    color: #4b5563 !important;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.wide-card-title .fas.fa-chart-line {
+    color: #3b82f6 !important;
+    text-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
+}
+
+/* 🎯 网格布局优化 */
+.api-input-grid {
+    align-items: end;
+    gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+    .api-input-grid {
+        grid-template-columns: 3fr 1fr;
+        gap: 1.5rem;
+    }
+}
+
+/* 🎯 输入框在宽卡片中的样式调整 */
+.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: var(--text-primary);
+    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;
+}
+
+/* 🎯 安全提示样式优化 */
+.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 !important;
+    text-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
+}
+
+/* 🎯 时间范围选择器在卡片内的样式优化 */
+.time-range-section {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.time-range-section:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* 📱 响应式优化 - 宽卡片布局 */
+@media (max-width: 768px) {
+    .api-input-wide-card {
+        padding: 1.25rem !important;
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+    
+    .wide-card-title {
+        margin-bottom: 1.25rem !important;
+    }
+    
+    .wide-card-title h2 {
+        font-size: 1.5rem !important;
+    }
+    
+    .wide-card-title p {
+        font-size: 0.875rem !important;
+    }
+    
+    .api-input-grid {
+        grid-template-columns: 1fr !important;
+        gap: 1rem !important;
+    }
+    
+    .wide-card-input {
+        padding: 12px 14px !important;
+        font-size: 16px !important;
+    }
+    
+    .security-notice {
+        padding: 10px 14px !important;
+        font-size: 0.8rem !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .api-input-wide-card {
+        padding: 1rem !important;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+    
+    .wide-card-title h2 {
+        font-size: 1.25rem !important;
+    }
+    
+    .wide-card-title p {
+        font-size: 0.8rem !important;
+    }
+}
+
+/* 📱 响应式优化 - 时间范围选择器 */
+@media (max-width: 768px) {
+    .time-range-section .flex {
+        flex-direction: column;
+        align-items: flex-start !important;
+        gap: 1rem;
+    }
+    
+    .time-range-section .flex .flex {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .period-btn {
+        flex: 1;
+        justify-content: center;
+    }
+}
+
+/* 📱 触摸设备优化 */
+@media (hover: none) and (pointer: coarse) {
+    .card:hover {
+        transform: none;
+        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+    }
+    
+    .btn-primary:hover {
+        transform: none;
+        background-position: 0% 0;
+    }
+    
+    .model-usage-item:hover {
+        transform: none;
+        background: rgba(255, 255, 255, 0.05);
+    }
+    
+    .time-range-section:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    .query-title-section:hover {
+        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
+        border-color: rgba(59, 130, 246, 0.1);
+    }
+    
+    .api-input-wide-card:hover {
+        transform: none;
+        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);
+    }
+    
+    .security-notice:hover {
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.25);
+    }
+}
+
+/* 🎯 打印样式 */
+@media print {
+    .gradient-bg {
+        background: white !important;
+        color: black !important;
+    }
+    
+    .card {
+        border: 1px solid #ccc !important;
+        background: white !important;
+        box-shadow: none !important;
+    }
+    
+    .btn-primary {
+        display: none !important;
+    }
+    
+    .input-field {
+        border: 1px solid #ccc !important;
+        background: white !important;
+    }
+}