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

feat: 支持Dark Mode

Browse Source
This commit is contained in:
shaw
2025-08-22 22:09:38 +08:00
parent 8328b6ddac
commit d2f0ac37a9
37 changed files with 3226 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
web/admin-spa/src/components/apistats/ApiKeyInput.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="api-input-wide-card glass-strong mb-8 rounded-3xl p-6 shadow-xl">
<div class="api-input-wide-card mb-8 rounded-3xl p-6 shadow-xl">
<!-- 标题区域 -->
<div class="wide-card-title mb-6 text-center">
<h2 class="mb-2 text-2xl font-bold">
<h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
<i class="fas fa-chart-line mr-3" />
使用统计查询
</h2>
<p class="text-base text-gray-600">查询您的 API Key 使用情况和统计数据</p>
<p class="text-base text-gray-600 dark:text-gray-300">查询您的 API Key 使用情况和统计数据</p>
</div>
<!-- 输入区域 -->
@@ -14,7 +14,7 @@
<div class="api-input-grid grid grid-cols-1 lg:grid-cols-4">
<!-- API Key 输入 -->
<div class="lg:col-span-3">
<label class="mb-2 block text-sm font-medium text-gray-700">
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-200">
<i class="fas fa-key mr-2" />
输入您的 API Key
</label>
@@ -30,7 +30,9 @@
<!-- 查询按钮 -->
<div class="lg:col-span-1">
<label class="mb-2 hidden text-sm font-medium text-gray-700 lg:block"> &nbsp; </label>
<label class="mb-2 hidden text-sm font-medium text-gray-700 dark:text-gray-200 lg:block">
&nbsp;
</label>
<button
class="btn btn-primary btn-query flex h-full w-full items-center justify-center gap-2"
:disabled="loading || !apiKey.trim()"
@@ -62,11 +64,11 @@ const { queryStats } = apiStatsStore
</script>
<style scoped>
/* 宽卡片样式 */
/* 宽卡片样式 - 使用CSS变量 */
.api-input-wide-card {
background: rgba(255, 255, 255, 0.95);
background: var(--surface-color);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3);
border: 1px solid var(--border-color);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
@@ -74,6 +76,14 @@ const { queryStats } = apiStatsStore
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 暗夜模式宽卡片样式 */
:global(.dark) .api-input-wide-card {
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(75, 85, 99, 0.2),
inset 0 1px 0 rgba(107, 114, 128, 0.15);
}
.api-input-wide-card:hover {
box-shadow:
0 32px 64px -12px rgba(0, 0, 0, 0.35),
@@ -82,6 +92,13 @@ const { queryStats } = apiStatsStore
transform: translateY(-1px);
}
:global(.dark) .api-input-wide-card:hover {
box-shadow:
0 32px 64px -12px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(75, 85, 99, 0.25),
inset 0 1px 0 rgba(107, 114, 128, 0.3) !important;
}
/* 标题样式 */
.wide-card-title h2 {
color: #1f2937;
@@ -89,11 +106,21 @@ const { queryStats } = apiStatsStore
font-weight: 700;
}
:global(.dark) .wide-card-title h2 {
color: #f9fafb;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.wide-card-title p {
color: #4b5563;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
:global(.dark) .wide-card-title p {
color: #d1d5db;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.wide-card-title .fas.fa-chart-line {
color: #3b82f6;
text-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
@@ -105,23 +132,32 @@ const { queryStats } = apiStatsStore
gap: 1rem;
}
/* 输入框样式 */
/* 输入框样式 - 使用CSS变量 */
.wide-card-input {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 255, 255, 0.4);
background: var(--input-bg);
border: 2px solid var(--input-border);
border-radius: 12px;
padding: 14px 16px;
font-size: 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
color: #1f2937;
color: var(--text-primary);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
:global(.dark) .wide-card-input {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
color: #e5e7eb;
}
.wide-card-input::placeholder {
color: #9ca3af;
}
:global(.dark) .wide-card-input::placeholder {
color: #64748b;
}
.wide-card-input:focus {
outline: none;
border-color: #60a5fa;
@@ -129,6 +165,16 @@ const { queryStats } = apiStatsStore
0 0 0 3px rgba(96, 165, 250, 0.2),
0 10px 15px -3px rgba(0, 0, 0, 0.1);
background: white;
color: #1f2937;
}
:global(.dark) .wide-card-input:focus {
border-color: #60a5fa;
box-shadow:
0 0 0 3px rgba(96, 165, 250, 0.15),
0 10px 15px -3px rgba(0, 0, 0, 0.4);
background: rgba(31, 41, 55, 0.95);
color: #f3f4f6;
}
/* 按钮样式 */
@@ -172,8 +218,8 @@ const { queryStats } = apiStatsStore
/* 安全提示样式 */
.security-notice {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 12px 16px;
@@ -182,9 +228,22 @@ const { queryStats } = apiStatsStore
transition: all 0.3s ease;
}
:global(.dark) .security-notice {
background: rgba(31, 41, 55, 0.8) !important;
border: 1px solid rgba(75, 85, 99, 0.5) !important;
color: #d1d5db !important;
}
.security-notice:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.5);
color: #1f2937;
}
:global(.dark) .security-notice:hover {
background: rgba(31, 41, 55, 0.9) !important;
border-color: rgba(75, 85, 99, 0.6) !important;
color: #e5e7eb !important;
}
.security-notice .fas.fa-shield-alt {

62
web/admin-spa/src/components/apistats/LimitConfig.vue
View File

@@ -2,7 +2,9 @@
<div>
<!-- 限制配置 -->
<div class="card p-4 md:p-6">
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<h3
class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
>
<i class="fas fa-shield-alt mr-2 text-sm text-red-500 md:mr-3 md:text-base" />
限制配置
</h3>
@@ -10,8 +12,10 @@
<!-- 每日费用限制 -->
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-gray-600 md:text-base">每日费用限制</span>
<span class="text-xs text-gray-500 md:text-sm">
<span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base"
>每日费用限制</span
>
<span class="text-xs text-gray-500 dark:text-gray-400 md:text-sm">
<span v-if="statsData.limits.dailyCostLimit > 0">
${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{
statsData.limits.dailyCostLimit.toFixed(2)
@@ -24,7 +28,7 @@
</div>
<div
v-if="statsData.limits.dailyCostLimit > 0"
class="h-2 w-full rounded-full bg-gray-200"
class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700"
>
<div
class="h-2 rounded-full transition-all duration-300"
@@ -58,16 +62,16 @@
:window-start-time="statsData.limits.windowStartTime"
/>
<div class="mt-2 text-xs text-gray-500">
<div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-1" />
请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
</div>
</div>
<!-- 其他限制信息 -->
<div class="space-y-2 border-t border-gray-100 pt-2">
<div class="space-y-2 border-t border-gray-100 pt-2 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">并发限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">并发限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span v-if="statsData.limits.concurrencyLimit > 0">
{{ statsData.limits.concurrencyLimit }}
@@ -78,7 +82,7 @@
</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">模型限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">模型限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="
@@ -97,7 +101,7 @@
</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">客户端限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">客户端限制</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="
@@ -129,7 +133,9 @@
"
class="card mt-4 p-4 md:mt-6 md:p-6"
>
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<h3
class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
>
<i class="fas fa-list-alt mr-2 text-sm text-amber-500 md:mr-3 md:text-base" />
详细限制信息
</h3>
@@ -141,9 +147,11 @@
statsData.restrictions.enableModelRestriction &&
statsData.restrictions.restrictedModels.length > 0
"
class="rounded-lg border border-amber-200 bg-amber-50 p-3 md:p-4"
class="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20 md:p-4"
>
<h4 class="mb-2 flex items-center text-sm font-bold text-amber-800 md:mb-3 md:text-base">
<h4
class="mb-2 flex items-center text-sm font-bold text-amber-800 dark:text-amber-300 md:mb-3 md:text-base"
>
<i class="fas fa-robot mr-1 text-xs md:mr-2 md:text-sm" />
受限模型列表
</h4>
@@ -151,13 +159,13 @@
<div
v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="rounded border border-amber-200 bg-white px-2 py-1 text-xs md:px-3 md:py-2 md:text-sm"
class="rounded border border-amber-200 bg-white px-2 py-1 text-xs dark:border-amber-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
>
<i class="fas fa-ban mr-1 text-xs text-red-500 md:mr-2" />
<span class="break-all text-gray-800">{{ model }}</span>
<span class="break-all text-gray-800 dark:text-gray-200">{{ model }}</span>
</div>
</div>
<p class="mt-2 text-xs text-amber-700 md:mt-3">
<p class="mt-2 text-xs text-amber-700 dark:text-amber-400 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 不能访问以上列出的模型
</p>
@@ -169,9 +177,11 @@
statsData.restrictions.enableClientRestriction &&
statsData.restrictions.allowedClients.length > 0
"
class="rounded-lg border border-blue-200 bg-blue-50 p-3 md:p-4"
class="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20 md:p-4"
>
<h4 class="mb-2 flex items-center text-sm font-bold text-blue-800 md:mb-3 md:text-base">
<h4
class="mb-2 flex items-center text-sm font-bold text-blue-800 dark:text-blue-300 md:mb-3 md:text-base"
>
<i class="fas fa-desktop mr-1 text-xs md:mr-2 md:text-sm" />
允许的客户端
</h4>
@@ -179,13 +189,13 @@
<div
v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="rounded border border-blue-200 bg-white px-2 py-1 text-xs md:px-3 md:py-2 md:text-sm"
class="rounded border border-blue-200 bg-white px-2 py-1 text-xs dark:border-blue-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
>
<i class="fas fa-check mr-1 text-xs text-green-500 md:mr-2" />
<span class="break-all text-gray-800">{{ client }}</span>
<span class="break-all text-gray-800 dark:text-gray-200">{{ client }}</span>
</div>
</div>
<p class="mt-2 text-xs text-blue-700 md:mt-3">
<p class="mt-2 text-xs text-blue-700 dark:text-blue-400 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 只能被以上列出的客户端使用
</p>
@@ -222,11 +232,11 @@ const getDailyCostProgressColor = () => {
</script>
<style scoped>
/* 卡片样式 */
/* 卡片样式 - 使用CSS变量 */
.card {
background: rgba(255, 255, 255, 0.95);
background: var(--surface-color);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid var(--border-color);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -251,4 +261,10 @@ const getDailyCostProgressColor = () => {
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
:global(.dark) .card:hover {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 10px 10px -5px rgba(0, 0, 0, 0.35);
}
</style>

69
web/admin-spa/src/components/apistats/ModelUsageStats.vue
View File

@@ -2,13 +2,13 @@
<div class="card p-4 md:p-6">
<div class="mb-4 md:mb-6">
<h3
class="flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:text-xl"
class="flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-robot mr-2 text-sm text-indigo-500 md:mr-3 md:text-base" />
模型使用统计
</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
@@ -16,8 +16,10 @@
<!-- 模型统计加载状态 -->
<div v-if="modelStatsLoading" class="py-6 text-center md:py-8">
<i class="fas fa-spinner loading-spinner mb-2 text-xl text-gray-600 md:text-2xl" />
<p class="text-sm text-gray-600 md:text-base">加载模型统计数据中...</p>
<i
class="fas fa-spinner loading-spinner mb-2 text-xl text-gray-600 dark:text-gray-400 md:text-2xl"
/>
<p class="text-sm text-gray-600 dark:text-gray-400 md:text-base">加载模型统计数据中...</p>
</div>
<!-- 模型统计数据 -->
@@ -25,41 +27,43 @@
<div v-for="(model, index) in modelStats" :key="index" class="model-usage-item">
<div class="mb-2 flex items-start justify-between md:mb-3">
<div class="min-w-0 flex-1">
<h4 class="break-all text-base font-bold text-gray-900 md:text-lg">
<h4 class="break-all text-base font-bold text-gray-900 dark:text-gray-100 md:text-lg">
{{ model.model }}
</h4>
<p class="text-xs text-gray-600 md:text-sm">{{ model.requests }} 次请求</p>
<p class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ model.requests }} 次请求
</p>
</div>
<div class="ml-3 flex-shrink-0 text-right">
<div class="text-base font-bold text-green-600 md:text-lg">
{{ model.formatted?.total || '$0.000000' }}
</div>
<div class="text-xs text-gray-600 md:text-sm">总费用</div>
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">总费用</div>
</div>
</div>
<div class="grid grid-cols-2 gap-2 text-xs md:grid-cols-4 md:gap-3 md:text-sm">
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">输入 Token</div>
<div class="font-medium text-gray-900">
<div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">输入 Token</div>
<div class="font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(model.inputTokens) }}
</div>
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">输出 Token</div>
<div class="font-medium text-gray-900">
<div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">输出 Token</div>
<div class="font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(model.outputTokens) }}
</div>
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">缓存创建</div>
<div class="font-medium text-gray-900">
<div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">缓存创建</div>
<div class="font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(model.cacheCreateTokens) }}
</div>
</div>
<div class="rounded bg-gray-50 p-2">
<div class="text-gray-600">缓存读取</div>
<div class="font-medium text-gray-900">
<div class="rounded bg-gray-50 p-2 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">缓存读取</div>
<div class="font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(model.cacheReadTokens) }}
</div>
</div>
@@ -68,7 +72,7 @@
</div>
<!-- 无模型数据 -->
<div v-else class="py-6 text-center text-gray-500 md:py-8">
<div v-else class="py-6 text-center text-gray-500 dark:text-gray-400 md:py-8">
<i class="fas fa-chart-pie mb-3 text-2xl md:text-3xl" />
<p class="text-sm md:text-base">
暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
@@ -104,11 +108,11 @@ const formatNumber = (num) => {
</script>
<style scoped>
/* 卡片样式 */
/* 卡片样式 - 使用CSS变量 */
.card {
background: rgba(255, 255, 255, 0.95);
background: var(--surface-color);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid var(--border-color);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -134,10 +138,16 @@ const formatNumber = (num) => {
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
/* 模型使用项样式 */
:global(.dark) .card:hover {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 10px 10px -5px rgba(0, 0, 0, 0.35);
}
/* 模型使用项样式 - 使用CSS变量 */
.model-usage-item {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 12px;
transition: all 0.3s ease;
@@ -169,6 +179,13 @@ const formatNumber = (num) => {
border-color: rgba(255, 255, 255, 0.3);
}
:global(.dark) .model-usage-item:hover {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.4),
0 4px 6px -2px rgba(0, 0, 0, 0.25);
border-color: rgba(75, 85, 99, 0.6);
}
/* 加载动画 */
.loading-spinner {
animation: spin 1s linear infinite;

75
web/admin-spa/src/components/apistats/StatsOverview.vue
View File

@@ -2,19 +2,22 @@
<div class="mb-6 grid grid-cols-1 gap-4 md:mb-8 md:gap-6 lg:grid-cols-2">
<!-- API Key 基本信息 -->
<div class="card p-4 md:p-6">
<h3 class="mb-3 flex items-center text-lg font-bold text-gray-900 md:mb-4 md:text-xl">
<h3
class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
>
<i class="fas fa-info-circle mr-2 text-sm text-blue-500 md:mr-3 md:text-base" />
API Key 信息
</h3>
<div class="space-y-2 md:space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">名称</span>
<span class="break-all text-sm font-medium text-gray-900 md:text-base">{{
statsData.name
}}</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">名称</span>
<span
class="break-all text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base"
>{{ statsData.name }}</span
>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">状态</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">状态</span>
<span
class="text-sm font-medium md:text-base"
:class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
@@ -27,19 +30,22 @@
</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">权限</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">权限</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatPermissions(statsData.permissions)
}}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 md:text-base">创建时间</span>
<span class="break-all text-xs font-medium text-gray-900 md:text-base">{{
formatDate(statsData.createdAt)
}}</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">创建时间</span>
<span
class="break-all text-xs font-medium text-gray-900 dark:text-gray-100 md:text-base"
>{{ formatDate(statsData.createdAt) }}</span
>
</div>
<div class="flex items-start justify-between">
<span class="mt-1 flex-shrink-0 text-sm text-gray-600 md:text-base">过期时间</span>
<span class="mt-1 flex-shrink-0 text-sm text-gray-600 dark:text-gray-400 md:text-base"
>过期时间</span
>
<div v-if="statsData.expiresAt" class="text-right">
<div
v-if="isApiKeyExpired(statsData.expiresAt)"
@@ -55,11 +61,14 @@
<i class="fas fa-clock mr-1 text-xs md:text-sm" />
{{ formatExpireDate(statsData.expiresAt) }}
</div>
<div v-else class="break-all text-xs font-medium text-gray-900 md:text-base">
<div
v-else
class="break-all text-xs font-medium text-gray-900 dark:text-gray-100 md:text-base"
>
{{ formatExpireDate(statsData.expiresAt) }}
</div>
</div>
<div v-else class="text-sm font-medium text-gray-400 md:text-base">
<div v-else class="text-sm font-medium text-gray-400 dark:text-gray-500 md:text-base">
<i class="fas fa-infinity mr-1 text-xs md:text-sm" />
永不过期
</div>
@@ -70,13 +79,13 @@
<!-- 使用统计概览 -->
<div class="card p-4 md:p-6">
<h3
class="mb-3 flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:mb-4 md:text-xl"
class="mb-3 flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:mb-4 md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-chart-bar mr-2 text-sm text-green-500 md:mr-3 md:text-base" />
使用统计概览
</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
@@ -85,7 +94,7 @@
<div class="text-lg font-bold text-green-600 md:text-3xl">
{{ formatNumber(currentPeriodData.requests) }}
</div>
<div class="text-xs text-gray-600 md:text-sm">
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
</div>
</div>
@@ -93,7 +102,7 @@
<div class="text-lg font-bold text-blue-600 md:text-3xl">
{{ formatNumber(currentPeriodData.allTokens) }}
</div>
<div class="text-xs text-gray-600 md:text-sm">
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
</div>
</div>
@@ -101,7 +110,7 @@
<div class="text-lg font-bold text-purple-600 md:text-3xl">
{{ currentPeriodData.formattedCost || '$0.000000' }}
</div>
<div class="text-xs text-gray-600 md:text-sm">
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
</div>
</div>
@@ -109,7 +118,7 @@
<div class="text-lg font-bold text-yellow-600 md:text-3xl">
{{ formatNumber(currentPeriodData.inputTokens) }}
</div>
<div class="text-xs text-gray-600 md:text-sm">
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
</div>
</div>
@@ -197,11 +206,11 @@ const formatPermissions = (permissions) => {
</script>
<style scoped>
/* 卡片样式 */
/* 卡片样式 - 使用CSS变量 */
.card {
background: rgba(255, 255, 255, 0.95);
background: var(--surface-color);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid var(--border-color);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -227,11 +236,17 @@ const formatPermissions = (permissions) => {
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
/* 统计卡片样式 */
:global(.dark) .card:hover {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 10px 10px -5px rgba(0, 0, 0, 0.35);
}
/* 统计卡片样式 - 使用CSS变量 */
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
background: linear-gradient(135deg, var(--surface-color) 0%, var(--glass-strong-color) 100%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
border: 1px solid var(--border-color);
padding: 16px;
position: relative;
overflow: hidden;
@@ -264,6 +279,12 @@ const formatPermissions = (permissions) => {
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
:global(.dark) .stat-card:hover {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.4),
0 10px 10px -5px rgba(0, 0, 0, 0.25);
}
.stat-card:hover::before {
opacity: 1;
}

36
web/admin-spa/src/components/apistats/TokenDistribution.vue
View File

@@ -1,56 +1,56 @@
<template>
<div class="card p-4 md:p-6">
<h3
class="mb-3 flex flex-col text-lg font-bold text-gray-900 sm:flex-row sm:items-center md:mb-4 md:text-xl"
class="mb-3 flex flex-col text-lg font-bold text-gray-900 dark:text-gray-100 sm:flex-row sm:items-center md:mb-4 md:text-xl"
>
<span class="flex items-center">
<i class="fas fa-coins mr-2 text-sm text-yellow-500 md:mr-3 md:text-base" />
Token 使用分布
</span>
<span class="text-xs font-normal text-gray-600 sm:ml-2 md:text-sm"
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
<div class="space-y-2 md:space-y-3">
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
<i class="fas fa-arrow-right mr-1 text-xs text-green-500 md:mr-2 md:text-sm" />
输入 Token
</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.inputTokens)
}}</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
<i class="fas fa-arrow-left mr-1 text-xs text-blue-500 md:mr-2 md:text-sm" />
输出 Token
</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.outputTokens)
}}</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
<i class="fas fa-save mr-1 text-xs text-purple-500 md:mr-2 md:text-sm" />
缓存创建 Token
</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.cacheCreateTokens)
}}</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center text-sm text-gray-600 md:text-base">
<span class="flex items-center text-sm text-gray-600 dark:text-gray-400 md:text-base">
<i class="fas fa-download mr-1 text-xs text-orange-500 md:mr-2 md:text-sm" />
缓存读取 Token
</span>
<span class="text-sm font-medium text-gray-900 md:text-base">{{
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.cacheReadTokens)
}}</span>
</div>
</div>
<div class="mt-3 border-t border-gray-200 pt-3 md:mt-4 md:pt-4">
<div class="flex items-center justify-between font-bold text-gray-900">
<div class="mt-3 border-t border-gray-200 pt-3 dark:border-gray-700 md:mt-4 md:pt-4">
<div class="flex items-center justify-between font-bold text-gray-900 dark:text-gray-100">
<span class="text-sm md:text-base"
>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span
>
@@ -87,11 +87,11 @@ const formatNumber = (num) => {
</script>
<style scoped>
/* 卡片样式 */
/* 卡片样式 - 使用CSS变量 */
.card {
background: rgba(255, 255, 255, 0.95);
background: var(--surface-color);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid var(--border-color);
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -116,4 +116,10 @@ const formatNumber = (num) => {
0 20px 25px -5px rgba(0, 0, 0, 0.15),
0 10px 10px -5px rgba(0, 0, 0, 0.08);
}
:global(.dark) .card:hover {
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 10px 10px -5px rgba(0, 0, 0, 0.35);
}
</style>