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: 优化移动端响应式设计

Browse Source 
- 优化所有页面的移动端适配（手机、平板、PC）
- 修复AccountsView移动端状态显示和按钮功能问题
- 修复ApiKeysView移动端详情展开显示问题
- 移除ApiKeysView不必要的查看按钮
- 修复Dashboard页面PC版时间筛选按钮布局
- 改进所有组件的响应式设计
- 删除dist目录避免构建文件冲突

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-03 01:09:26 +08:00
parent f22c8cbfcc
commit ecfc1050d3
23 changed files with 2775 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,66 +1,66 @@
<template>
<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" />
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-shield-alt mr-2 md:mr-3 text-red-500 text-sm md:text-base" />
限制配置
</h3>
<div class="space-y-3">
<div class="space-y-2 md: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>
<span class="text-gray-600 text-sm md:text-base">Token 限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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>
<span class="text-gray-600 text-sm md:text-base">并发限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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">
<span class="text-gray-600 text-sm md:text-base">速率限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
{{ 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>
<span class="text-gray-600 text-sm md:text-base">每日费用限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ statsData.limits.dailyCostLimit > 0 ? '$' + statsData.limits.dailyCostLimit : '无限制' }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">模型限制</span>
<span class="font-medium text-gray-900">
<span class="text-gray-600 text-sm md:text-base">模型限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<span
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1" />
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
</span>
<span
v-else
class="text-green-600"
>
<i class="fas fa-check-circle mr-1" />
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有模型
</span>
</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">客户端限制</span>
<span class="font-medium text-gray-900">
<span class="text-gray-600 text-sm md:text-base">客户端限制</span>
<span class="font-medium text-gray-900 text-sm md:text-base">
<span
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1" />
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
</span>
<span
v-else
class="text-green-600"
>
<i class="fas fa-check-circle mr-1" />
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
允许所有客户端
</span>
</span>
@@ -72,34 +72,34 @@
<div
v-if="(statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0) ||
(statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0)"
class="card p-6 mt-6"
class="card p-4 md:p-6 mt-4 md:mt-6"
>
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-3 text-amber-500" />
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-list-alt mr-2 md:mr-3 text-amber-500 text-sm md:text-base" />
详细限制信息
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
<!-- 模型限制详情 -->
<div
v-if="statsData.restrictions.enableModelRestriction && statsData.restrictions.restrictedModels.length > 0"
class="bg-amber-50 border border-amber-200 rounded-lg p-4"
class="bg-amber-50 border border-amber-200 rounded-lg p-3 md:p-4"
>
<h4 class="font-bold text-amber-800 mb-3 flex items-center">
<i class="fas fa-robot mr-2" />
<h4 class="font-bold text-amber-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-robot mr-1 md:mr-2 text-xs md:text-sm" />
受限模型列表
</h4>
<div class="space-y-2">
<div class="space-y-1 md:space-y-2">
<div
v-for="model in statsData.restrictions.restrictedModels"
:key="model"
class="bg-white rounded px-3 py-2 text-sm border border-amber-200"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-amber-200"
>
<i class="fas fa-ban mr-2 text-red-500" />
<span class="text-gray-800">{{ model }}</span>
<i class="fas fa-ban mr-1 md:mr-2 text-red-500 text-xs" />
<span class="text-gray-800 break-all">{{ model }}</span>
</div>
</div>
<p class="text-xs text-amber-700 mt-3">
<p class="text-xs text-amber-700 mt-2 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 不能访问以上列出的模型
</p>
@@ -108,23 +108,23 @@
<!-- 客户端限制详情 -->
<div
v-if="statsData.restrictions.enableClientRestriction && statsData.restrictions.allowedClients.length > 0"
class="bg-blue-50 border border-blue-200 rounded-lg p-4"
class="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4"
>
<h4 class="font-bold text-blue-800 mb-3 flex items-center">
<i class="fas fa-desktop mr-2" />
<h4 class="font-bold text-blue-800 mb-2 md:mb-3 flex items-center text-sm md:text-base">
<i class="fas fa-desktop mr-1 md:mr-2 text-xs md:text-sm" />
允许的客户端
</h4>
<div class="space-y-2">
<div class="space-y-1 md:space-y-2">
<div
v-for="client in statsData.restrictions.allowedClients"
:key="client"
class="bg-white rounded px-3 py-2 text-sm border border-blue-200"
class="bg-white rounded px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm border border-blue-200"
>
<i class="fas fa-check mr-2 text-green-500" />
<span class="text-gray-800">{{ client }}</span>
<i class="fas fa-check mr-1 md:mr-2 text-green-500 text-xs" />
<span class="text-gray-800 break-all">{{ client }}</span>
</div>
</div>
<p class="text-xs text-blue-700 mt-3">
<p class="text-xs text-blue-700 mt-2 md:mt-3">
<i class="fas fa-info-circle mr-1" />
此 API Key 只能被以上列出的客户端使用
</p>

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

@@ -1,19 +1,22 @@
<template>
<div class="card p-6">
<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" />
模型使用统计 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<div class="mb-4 md:mb-6">
<h3 class="text-lg md:text-xl font-bold flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-robot mr-2 md:mr-3 text-indigo-500 text-sm md:text-base" />
模型使用统计
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
</div>
<!-- 模型统计加载状态 -->
<div
v-if="modelStatsLoading"
class="text-center py-8"
class="text-center py-6 md:py-8"
>
<i class="fas fa-spinner loading-spinner text-2xl mb-2 text-gray-600" />
<p class="text-gray-600">
<i class="fas fa-spinner loading-spinner text-xl md:text-2xl mb-2 text-gray-600" />
<p class="text-gray-600 text-sm md:text-base">
加载模型统计数据中...
</p>
</div>
@@ -21,33 +24,33 @@
<!-- 模型统计数据 -->
<div
v-else-if="modelStats.length > 0"
class="space-y-4"
class="space-y-3 md: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">
<div class="flex justify-between items-start mb-2 md:mb-3">
<div class="flex-1 min-w-0">
<h4 class="font-bold text-base md:text-lg text-gray-900 break-all">
{{ model.model }}
</h4>
<p class="text-gray-600 text-sm">
<p class="text-gray-600 text-xs md:text-sm">
{{ model.requests }} 次请求
</p>
</div>
<div class="text-right">
<div class="text-lg font-bold text-green-600">
<div class="text-right flex-shrink-0 ml-3">
<div class="text-base md:text-lg font-bold text-green-600">
{{ model.formatted?.total || '$0.000000' }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
总费用
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 text-xs md:text-sm">
<div class="bg-gray-50 rounded p-2">
<div class="text-gray-600">
输入 Token
@@ -87,10 +90,12 @@
<!-- 无模型数据 -->
<div
v-else
class="text-center py-8 text-gray-500"
class="text-center py-6 md:py-8 text-gray-500"
>
<i class="fas fa-chart-pie text-3xl mb-3" />
<p>暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据</p>
<i class="fas fa-chart-pie text-2xl md:text-3xl mb-3" />
<p class="text-sm md:text-base">
暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
</p>
</div>
</div>
</template>
@@ -157,12 +162,18 @@ const formatNumber = (num) => {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 16px;
padding: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.model-usage-item {
padding: 16px;
}
}
.model-usage-item::before {
content: '';
position: absolute;
@@ -196,11 +207,14 @@ const formatNumber = (num) => {
@media (max-width: 768px) {
.model-usage-item .grid {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.model-usage-item {
padding: 10px;
}
.model-usage-item .grid {
grid-template-columns: 1fr;
}

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

@@ -1,66 +1,69 @@
<template>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md: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" />
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex items-center text-gray-900">
<i class="fas fa-info-circle mr-2 md:mr-3 text-blue-500 text-sm md:text-base" />
API Key 信息
</h3>
<div class="space-y-3">
<div class="space-y-2 md: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>
<span class="text-gray-600 text-sm md:text-base">名称</span>
<span class="font-medium text-gray-900 text-sm md:text-base break-all">{{ statsData.name }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">状态</span>
<span class="text-gray-600 text-sm md:text-base">状态</span>
<span
:class="statsData.isActive ? 'text-green-600' : 'text-red-600'"
class="font-medium"
class="font-medium text-sm md:text-base"
>
<i
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
class="mr-1"
class="mr-1 text-xs md:text-sm"
/>
{{ 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>
<span class="text-gray-600 text-sm md:text-base">权限</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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>
<span class="text-gray-600 text-sm md:text-base">创建时间</span>
<span class="font-medium text-gray-900 text-xs md:text-base break-all">{{ formatDate(statsData.createdAt) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">过期时间</span>
<div v-if="statsData.expiresAt">
<div class="flex justify-between items-start">
<span class="text-gray-600 text-sm md:text-base flex-shrink-0 mt-1">过期时间</span>
<div
v-if="statsData.expiresAt"
class="text-right"
>
<div
v-if="isApiKeyExpired(statsData.expiresAt)"
class="text-red-600 font-medium"
class="text-red-600 font-medium text-sm md:text-base"
>
<i class="fas fa-exclamation-circle mr-1" />
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
已过期
</div>
<div
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
class="text-orange-600 font-medium"
class="text-orange-600 font-medium text-xs md:text-base break-all"
>
<i class="fas fa-clock mr-1" />
<i class="fas fa-clock mr-1 text-xs md:text-sm" />
{{ formatExpireDate(statsData.expiresAt) }}
</div>
<div
v-else
class="text-gray-900 font-medium"
class="text-gray-900 font-medium text-xs md:text-base break-all"
>
{{ formatExpireDate(statsData.expiresAt) }}
</div>
</div>
<div
v-else
class="text-gray-400 font-medium"
class="text-gray-400 font-medium text-sm md:text-base"
>
<i class="fas fa-infinity mr-1" />
<i class="fas fa-infinity mr-1 text-xs md:text-sm" />
永不过期
</div>
</div>
@@ -68,41 +71,44 @@
</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" />
使用统计概览 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-chart-bar mr-2 md:mr-3 text-green-500 text-sm md:text-base" />
使用统计概览
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-3 md:gap-4">
<div class="stat-card text-center">
<div class="text-3xl font-bold text-green-600">
<div class="text-lg md:text-3xl font-bold text-green-600">
{{ formatNumber(currentPeriodData.requests) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-blue-600">
<div class="text-lg md:text-3xl font-bold text-blue-600">
{{ formatNumber(currentPeriodData.allTokens) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-purple-600">
<div class="text-lg md:text-3xl font-bold text-purple-600">
{{ currentPeriodData.formattedCost || '$0.000000' }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
</div>
</div>
<div class="stat-card text-center">
<div class="text-3xl font-bold text-yellow-600">
<div class="text-lg md:text-3xl font-bold text-yellow-600">
{{ formatNumber(currentPeriodData.inputTokens) }}
</div>
<div class="text-sm text-gray-600">
<div class="text-xs md:text-sm text-gray-600">
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
</div>
</div>
@@ -223,14 +229,21 @@ const formatPermissions = (permissions) => {
/* 统计卡片样式 */
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
border-radius: 20px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 24px;
padding: 16px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.stat-card {
border-radius: 20px;
padding: 24px;
}
}
.stat-card::before {
content: '';
position: absolute;
@@ -259,31 +272,11 @@ const formatPermissions = (permissions) => {
.card {
margin-bottom: 1rem;
}
.stat-card {
padding: 0.75rem;
}
.stat-card .text-3xl {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.card {
padding: 1rem;
}
.stat-card {
padding: 0.5rem;
}
.stat-card .text-3xl {
font-size: 1.25rem;
}
.stat-card .text-sm {
font-size: 0.75rem;
padding: 12px;
}
}
</style>

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

@@ -1,43 +1,46 @@
<template>
<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" />
Token 使用分布 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-coins mr-2 md:mr-3 text-yellow-500 text-sm md:text-base" />
Token 使用分布
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="space-y-3">
<div class="space-y-2 md: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" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-right mr-1 md:mr-2 text-green-500 text-xs md:text-sm" />
输入 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-left mr-1 md:mr-2 text-blue-500 text-xs md:text-sm" />
输出 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-save mr-1 md:mr-2 text-purple-500 text-xs md:text-sm" />
缓存创建 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ 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" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-download mr-1 md:mr-2 text-orange-500 text-xs md:text-sm" />
缓存读取 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-200">
<div class="mt-3 md:mt-4 pt-3 md: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>
<span class="text-sm md:text-base">{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
</div>