github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-22 16:43:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增用户统计页面，并作为默认路由

Browse Source
This commit is contained in:
KevinLiao
2025-07-27 18:12:50 +08:00
parent a04dd06be9
commit 85a8cae5ab
7 changed files with 950 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.js
View File

@@ -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');
});
// 🏥 增强的健康检查端点

366
src/routes/apiStats.js Normal file
View File

@@ -0,0 +1,366 @@
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();
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'
});
}
});
module.exports = router;

337
src/routes/web.js
View File

@@ -28,18 +28,6 @@ const ALLOWED_FILES = {
path: path.join(__dirname, '../../web/admin/style.css'),
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'
}
};
// 🛡️ 安全文件服务函数
@@ -414,332 +402,7 @@ router.get('/style.css', (req, res) => {
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 回调页面

6
web/userStats/app.js → web/apiStats/app.js
View File

@@ -43,7 +43,7 @@ const app = createApp({
this.modelStats = [];
try {
const response = await fetch('/web/api/user-stats', {
const response = await fetch('/apiStats/api/user-stats', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
@@ -100,7 +100,7 @@ const app = createApp({
// 📊 加载指定时间段的统计数据
async loadPeriodStats(period) {
try {
const response = await fetch('/web/api/user-model-stats', {
const response = await fetch('/apiStats/api/user-model-stats', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
@@ -163,7 +163,7 @@ const app = createApp({
this.modelStatsLoading = true;
try {
const response = await fetch('/web/api/user-model-stats', {
const response = await fetch('/apiStats/api/user-model-stats', {
method: 'POST',
headers: {
'Content-Type': 'application/json'

333
web/apiStats/index.html Normal file
View File

@@ -0,0 +1,333 @@
<!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="/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="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="glass-strong rounded-3xl p-6">
<div class="mb-4">
<label class="block text-sm font-medium mb-2 text-gray-700">
<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="form-input flex-1"
@keyup.enter="queryStats"
:disabled="loading"
>
<button
@click="queryStats"
:disabled="loading || !apiKey.trim()"
class="btn btn-primary px-6 py-3 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-gray-600 bg-white/20 rounded-lg p-3">
<i class="fas fa-shield-alt mr-2 text-green-500"></i>
您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途
</div>
</div>
</div>
<!-- 📅 时间范围选择器（数据展示前显示） -->
<div v-if="statsData" class="max-w-4xl mx-auto mb-8">
<div class="glass-strong rounded-3xl p-4">
<div class="flex items-center justify-between">
<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>
<!-- ❌ 错误提示 -->
<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="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 v-if="statsData.expiresAt" class="flex justify-between items-center">
<span class="text-gray-600">过期时间</span>
<span class="font-medium text-gray-900">{{ formatDate(statsData.expiresAt) }}</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-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>
</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 class="text-center mt-8">
<a href="/web" class="inline-flex items-center glass rounded-2xl px-6 py-3 text-white hover:bg-white/20 transition-colors">
<i class="fas fa-cog mr-2"></i>
访问管理后台
</a>
</div>
</div>
</div>
<!-- 📱 JavaScript -->
<script src="/apiStats/app.js"></script>
</body>
</html>

317
web/userStats/style.css → web/apiStats/style.css
View File

@@ -1,4 +1,19 @@
/* 🎨 用户统计页面自定义样式 */
/* 🎨 用户统计页面自定义样式 - 与管理页面保持一致 */
/* 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) {
@@ -83,93 +98,242 @@
}
}
/* 🌈 渐变背景增强 */
/* 🌈 渐变背景 - 与管理页面一致 */
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 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: 200% 200%;
animation: gradientShift 15s ease infinite;
/* 移除原有的渐变，使用body的背景 */
}
@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);
/* ✨ 卡片样式 - 与管理页面一致 */
.glass {
background: var(--glass-color);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
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(-4px) scale(1.02);
box-shadow: 0 20px 40px rgba(31, 38, 135, 0.5);
border-color: rgba(255, 255, 255, 0.3);
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.15) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
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: 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%;
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 {
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);
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);
}
/* 🔍 输入框增强 */
.input-field {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
.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: rgba(255, 255, 255, 0.6);
color: var(--text-secondary);
}
.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);
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);
}
/* 🎨 按钮增强 */
.btn-primary {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
background-size: 200% 200%;
/* 🎨 按钮样式 - 与管理页面一致 */
.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-primary::before {
.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;
@@ -180,25 +344,36 @@
transition: left 0.5s;
}
.btn-primary:hover::before {
.period-btn: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);
.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);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
.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;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
@@ -207,22 +382,18 @@
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%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
.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);
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);
}
/* 🔄 加载动画增强 */

428
web/userStats/index.html
View File

@@ -1,428 +0,0 @@
<!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>