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: 新增用户统计页面，并作为默认路由

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
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>