github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 09:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增ApiKey查询页面

Browse Source
This commit is contained in:
KevinLiao
2025-07-27 17:38:12 +08:00
parent da4d6d24f6
commit a04dd06be9
4 changed files with 1706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
src/routes/web.js
View File

@@ -6,6 +6,8 @@ const fs = require('fs');
const redis = require('../models/redis'); const redis = require('../models/redis');
const logger = require('../utils/logger'); const logger = require('../utils/logger');
const config = require('../../config/config'); const config = require('../../config/config');
const apiKeyService = require('../services/apiKeyService');
const CostCalculator = require('../utils/costCalculator');
const router = express.Router(); const router = express.Router();
@@ -25,6 +27,18 @@ const ALLOWED_FILES = {
'style.css': { 'style.css': {
path: path.join(__dirname, '../../web/admin/style.css'), path: path.join(__dirname, '../../web/admin/style.css'),
contentType: 'text/css; charset=utf-8' contentType: 'text/css; charset=utf-8'
},
'userStats.html': {
path: path.join(__dirname, '../../web/userStats/index.html'),
contentType: 'text/html; charset=utf-8'
},
'userStats.js': {
path: path.join(__dirname, '../../web/userStats/app.js'),
contentType: 'application/javascript; charset=utf-8'
},
'userStats.css': {
path: path.join(__dirname, '../../web/userStats/style.css'),
contentType: 'text/css; charset=utf-8'
} }
}; };
@@ -400,6 +414,334 @@ router.get('/style.css', (req, res) => {
serveWhitelistedFile(req, res, 'style.css'); serveWhitelistedFile(req, res, 'style.css');
}); });
// 📊 用户统计页面路由
router.get('/userStats', (req, res) => {
serveWhitelistedFile(req, res, 'userStats.html');
});
router.get('/userStats.js', (req, res) => {
serveWhitelistedFile(req, res, 'userStats.js');
});
router.get('/userStats.css', (req, res) => {
serveWhitelistedFile(req, res, 'userStats.css');
});
// 📊 用户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();
const currentMonth = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`;
// 获取所有月度模型统计（与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'
});
}
});
// 🔑 Gemini OAuth 回调页面 // 🔑 Gemini OAuth 回调页面
module.exports = router; module.exports = router;

497
web/userStats/app.js Normal file
View File

@@ -0,0 +1,497 @@
// 初始化 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('/web/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('/web/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('/web/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 '格式错误';
}
},
// 🔢 格式化数字
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');

428
web/userStats/index.html Normal file
View File

@@ -0,0 +1,428 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Key 使用统计 - Claude Relay Service</title>
<!-- 🎨 样式 -->
<link rel="stylesheet" href="/web/userStats.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>
<style>
/* 自定义样式 */
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card {
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.input-field {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
}
.input-field::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.input-field:focus {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
outline: none;
}
.btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
}
.model-usage-item {
transition: all 0.3s ease;
}
.model-usage-item:hover {
transform: translateX(4px);
background: rgba(255, 255, 255, 0.05);
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.chart-container {
position: relative;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
}
</style>
</head>
<body class="gradient-bg min-h-screen text-white">
<div id="app">
<!-- 🎯 顶部标题 -->
<div class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold mb-2">
<i class="fas fa-chart-line mr-3"></i>
API Key 使用统计
</h1>
<p class="text-white/80 text-lg">查询您的 API Key 使用情况和统计数据</p>
</div>
<!-- 🔑 API Key 输入区域 -->
<div class="max-w-2xl mx-auto mb-8">
<div class="card bg-white/10 rounded-xl p-6 backdrop-blur-md">
<div class="mb-4">
<label class="block text-sm font-medium mb-2">
<i class="fas fa-key mr-2"></i>
输入您的 API Key
</label>
<div class="flex gap-3">
<input
v-model="apiKey"
type="password"
placeholder="请输入您的 API Key (cr_...)"
class="input-field flex-1 px-4 py-3 rounded-lg focus:ring-2 focus:ring-purple-500"
@keyup.enter="queryStats"
:disabled="loading"
>
<button
@click="queryStats"
:disabled="loading || !apiKey.trim()"
class="btn-primary px-6 py-3 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-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="text-sm text-white/70 bg-white/5 rounded-lg p-3">
<i class="fas fa-shield-alt mr-2 text-green-400"></i>
您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途
</div>
</div>
</div>
<!-- 📅 时间范围选择器（数据展示前显示） -->
<div v-if="statsData" class="max-w-4xl mx-auto mb-8">
<div class="card bg-white/10 rounded-xl p-4 backdrop-blur-md">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<i class="fas fa-clock text-blue-400 text-lg"></i>
<span class="text-lg font-medium">统计时间范围</span>
</div>
<div class="flex gap-2">
<button
@click="switchPeriod('daily')"
:class="{
'bg-blue-500 text-white shadow-lg': statsPeriod === 'daily',
'bg-white/10 text-white/80 hover:bg-white/20': statsPeriod !== 'daily'
}"
class="px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 flex items-center gap-2"
:disabled="loading || modelStatsLoading"
>
<i class="fas fa-calendar-day"></i>
今日
</button>
<button
@click="switchPeriod('monthly')"
:class="{
'bg-blue-500 text-white shadow-lg': statsPeriod === 'monthly',
'bg-white/10 text-white/80 hover:bg-white/20': statsPeriod !== 'monthly'
}"
class="px-6 py-2 rounded-lg text-sm font-medium transition-all duration-300 flex items-center gap-2"
:disabled="loading || modelStatsLoading"
>
<i class="fas fa-calendar-alt"></i>
本月
</button>
</div>
</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="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- API Key 基本信息 -->
<div class="card bg-white/10 rounded-xl p-6 backdrop-blur-md">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-info-circle mr-3 text-blue-400"></i>
API Key 信息
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-white/80">名称</span>
<span class="font-medium">{{ statsData.name }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80">状态</span>
<span :class="statsData.isActive ? 'text-green-400' : 'text-red-400'" 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-white/80">权限</span>
<span class="font-medium">{{ formatPermissions(statsData.permissions) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80">创建时间</span>
<span class="font-medium">{{ formatDate(statsData.createdAt) }}</span>
</div>
<div v-if="statsData.expiresAt" class="flex justify-between items-center">
<span class="text-white/80">过期时间</span>
<span class="font-medium">{{ formatDate(statsData.expiresAt) }}</span>
</div>
</div>
</div>
<!-- 使用统计概览 -->
<div class="card bg-white/10 rounded-xl p-6 backdrop-blur-md">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-chart-bar mr-3 text-green-400"></i>
使用统计概览 <span class="text-sm font-normal text-white/70 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="stat-card p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-green-400">{{ formatNumber(currentPeriodData.requests) }}</div>
<div class="text-sm text-white/80">{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数</div>
</div>
<div class="stat-card p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-blue-400">{{ formatNumber(currentPeriodData.allTokens) }}</div>
<div class="text-sm text-white/80">{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数</div>
</div>
<div class="stat-card p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-purple-400">{{ currentPeriodData.formattedCost || '$0.000000' }}</div>
<div class="text-sm text-white/80">{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用</div>
</div>
<div class="stat-card p-4 rounded-lg text-center">
<div class="text-2xl font-bold text-yellow-400">{{ formatNumber(currentPeriodData.inputTokens) }}</div>
<div class="text-sm text-white/80">{{ 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 bg-white/10 rounded-xl p-6 backdrop-blur-md">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-coins mr-3 text-yellow-400"></i>
Token 使用分布 <span class="text-sm font-normal text-white/70 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-white/80 flex items-center">
<i class="fas fa-arrow-right mr-2 text-green-400"></i>
输入 Token
</span>
<span class="font-medium">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80 flex items-center">
<i class="fas fa-arrow-left mr-2 text-blue-400"></i>
输出 Token
</span>
<span class="font-medium">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80 flex items-center">
<i class="fas fa-save mr-2 text-purple-400"></i>
缓存创建 Token
</span>
<span class="font-medium">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80 flex items-center">
<i class="fas fa-download mr-2 text-orange-400"></i>
缓存读取 Token
</span>
<span class="font-medium">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-white/20">
<div class="flex justify-between items-center font-bold">
<span>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
</div>
<!-- 限制设置 -->
<div class="card bg-white/10 rounded-xl p-6 backdrop-blur-md">
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-shield-alt mr-3 text-red-400"></i>
限制配置
</h3>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-white/80">Token 限制</span>
<span class="font-medium">{{ statsData.limits.tokenLimit > 0 ? formatNumber(statsData.limits.tokenLimit) : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80">并发限制</span>
<span class="font-medium">{{ statsData.limits.concurrencyLimit > 0 ? statsData.limits.concurrencyLimit : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-white/80">速率限制</span>
<span class="font-medium">
{{ 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-white/80">每日费用限制</span>
<span class="font-medium">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
</div>
</div>
</div>
</div>
<!-- 📊 模型使用统计 -->
<div class="card bg-white/10 rounded-xl p-6 backdrop-blur-md mb-8">
<div class="mb-6">
<h3 class="text-xl font-bold flex items-center">
<i class="fas fa-robot mr-3 text-indigo-400"></i>
模型使用统计 <span class="text-sm font-normal text-white/70 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"></i>
<p class="text-white/80">加载模型统计数据中...</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 bg-white/5 rounded-lg p-4 border border-white/10"
>
<div class="flex justify-between items-start mb-3">
<div>
<h4 class="font-bold text-lg">{{ model.model }}</h4>
<p class="text-white/70 text-sm">{{ model.requests }} 次请求</p>
</div>
<div class="text-right">
<div class="text-lg font-bold text-green-400">{{ model.formatted?.total || '$0.000000' }}</div>
<div class="text-sm text-white/70">总费用</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<div class="bg-white/5 rounded p-2">
<div class="text-white/70">输入 Token</div>
<div class="font-medium">{{ formatNumber(model.inputTokens) }}</div>
</div>
<div class="bg-white/5 rounded p-2">
<div class="text-white/70">输出 Token</div>
<div class="font-medium">{{ formatNumber(model.outputTokens) }}</div>
</div>
<div class="bg-white/5 rounded p-2">
<div class="text-white/70">缓存创建</div>
<div class="font-medium">{{ formatNumber(model.cacheCreateTokens) }}</div>
</div>
<div class="bg-white/5 rounded p-2">
<div class="text-white/70">缓存读取</div>
<div class="font-medium">{{ formatNumber(model.cacheReadTokens) }}</div>
</div>
</div>
</div>
</div>
<!-- 无模型数据 -->
<div v-else class="text-center py-8 text-white/60">
<i class="fas fa-chart-pie text-3xl mb-3"></i>
<p>暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据</p>
</div>
</div>
</div>
<!-- 🔗 返回链接 -->
<div class="text-center mt-8">
<a href="/" class="inline-flex items-center text-white/80 hover:text-white transition-colors">
<i class="fas fa-arrow-left mr-2"></i>
返回管理后台
</a>
</div>
</div>
</div>
<!-- 📱 JavaScript -->
<script src="/web/userStats.js"></script>
</body>
</html>

439
web/userStats/style.css Normal file
View File

@@ -0,0 +1,439 @@
/* 🎨 用户统计页面自定义样式 */
/* 📱 响应式布局优化 */
@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;
}
}
/* 🌈 渐变背景增强 */
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: 200% 200%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ✨ 卡片样式增强 */
.card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 40px rgba(31, 38, 135, 0.5);
border-color: rgba(255, 255, 255, 0.3);
}
/* 🎯 统计卡片样式 */
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::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;
}
.stat-card:hover::before {
left: 100%;
}
.stat-card:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* 🔍 输入框增强 */
.input-field {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.input-field::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.input-field:focus {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
/* 🎨 按钮增强 */
.btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
background-size: 200% 200%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-primary::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;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
background-position: 100% 0;
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(79, 70, 229, 0.4);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}
/* 📊 模型使用项增强 */
.model-usage-item {
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.model-usage-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
transition: left 0.6s;
}
.model-usage-item:hover::before {
left: 100%;
}
.model-usage-item:hover {
transform: translateX(8px) translateY(-2px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* 🔄 加载动画增强 */
.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%; }
}
/* 📱 触摸设备优化 */
@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);
}
}
/* 🎯 打印样式 */
@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;
}
}