mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
style: 优化api-stats布局
This commit is contained in:
shaw
@@ -558,7 +558,6 @@ class ClaudeAccountService {
|
||||
|
||||
return {
|
||||
id: accountData.id,
|
||||
name: accountData.name,
|
||||
accountType: accountData.accountType || 'shared',
|
||||
platform: accountData.platform || 'claude',
|
||||
isActive: accountData.isActive === 'true',
|
||||
|
||||
@@ -833,7 +833,6 @@ async function getAccountOverview(accountId) {
|
||||
|
||||
return {
|
||||
id: accountData.id,
|
||||
name: accountData.name,
|
||||
accountType: accountData.accountType || 'shared',
|
||||
platform: accountData.platform || 'openai',
|
||||
isActive: accountData.isActive === 'true',
|
||||
|
||||
@@ -1,403 +1,397 @@
|
||||
<template>
|
||||
<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 dark:text-gray-100 md:mb-4 md:text-xl"
|
||||
>
|
||||
<i
|
||||
class="mr-2 text-sm md:mr-3 md:text-base"
|
||||
:class="
|
||||
multiKeyMode ? 'fas fa-layer-group text-purple-500' : 'fas fa-info-circle text-blue-500'
|
||||
"
|
||||
/>
|
||||
{{ multiKeyMode ? '批量查询概要' : 'API Key 信息' }}
|
||||
</h3>
|
||||
|
||||
<!-- 多 Key 模式下的概要信息 -->
|
||||
<div v-if="multiKeyMode && aggregatedStats" class="space-y-2 md:space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">查询 Keys 数</span>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
|
||||
{{ aggregatedStats.totalKeys }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">有效 Keys 数</span>
|
||||
<span class="text-sm font-medium text-green-600 md:text-base">
|
||||
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
|
||||
{{ aggregatedStats.activeKeys }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="invalidKeys.length > 0" class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">无效 Keys 数</span>
|
||||
<span class="text-sm font-medium text-red-600 md:text-base">
|
||||
<i class="fas fa-times-circle mr-1 text-xs md:text-sm" />
|
||||
{{ invalidKeys.length }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<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">
|
||||
{{ formatNumber(aggregatedStats.usage.requests) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总 Token 数</span>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
|
||||
{{ formatNumber(aggregatedStats.usage.allTokens) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总费用</span>
|
||||
<span class="text-sm font-medium text-indigo-600 md:text-base">
|
||||
{{ aggregatedStats.usage.formattedCost }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 各 Key 贡献占比（可选） -->
|
||||
<div
|
||||
v-if="individualStats.length > 1"
|
||||
class="border-t border-gray-200 pt-2 dark:border-gray-700"
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
<div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2 lg:items-start">
|
||||
<!-- API Key 基本信息 / 批量查询概要 -->
|
||||
<div class="card p-4 md:p-6">
|
||||
<h3
|
||||
class="mb-3 flex items-center text-lg font-bold text-gray-900 dark:text-gray-100 md:mb-4 md:text-xl"
|
||||
>
|
||||
<div class="mb-2 text-xs text-gray-500 dark:text-gray-400">各 Key 贡献占比</div>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
v-for="stat in topContributors"
|
||||
:key="stat.apiId"
|
||||
class="flex items-center justify-between text-xs"
|
||||
>
|
||||
<span class="truncate text-gray-600 dark:text-gray-400">{{ stat.name }}</span>
|
||||
<span class="text-gray-900 dark:text-gray-100"
|
||||
>{{ calculateContribution(stat) }}%</span
|
||||
<i
|
||||
class="mr-2 text-sm md:mr-3 md:text-base"
|
||||
:class="
|
||||
multiKeyMode
|
||||
? 'fas fa-layer-group text-purple-500'
|
||||
: 'fas fa-info-circle text-blue-500'
|
||||
"
|
||||
/>
|
||||
{{ multiKeyMode ? '批量查询概要' : 'API Key 信息' }}
|
||||
</h3>
|
||||
|
||||
<!-- 多 Key 模式下的概要信息 -->
|
||||
<div v-if="multiKeyMode && aggregatedStats" class="space-y-2 md:space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">查询 Keys 数</span>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
|
||||
{{ aggregatedStats.totalKeys }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">有效 Keys 数</span>
|
||||
<span class="text-sm font-medium text-green-600 md:text-base">
|
||||
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
|
||||
{{ aggregatedStats.activeKeys }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="invalidKeys.length > 0" class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">无效 Keys 数</span>
|
||||
<span class="text-sm font-medium text-red-600 md:text-base">
|
||||
<i class="fas fa-times-circle mr-1 text-xs md:text-sm" />
|
||||
{{ invalidKeys.length }} 个
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<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">
|
||||
{{ formatNumber(aggregatedStats.usage.requests) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总 Token 数</span>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">
|
||||
{{ formatNumber(aggregatedStats.usage.allTokens) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">总费用</span>
|
||||
<span class="text-sm font-medium text-indigo-600 md:text-base">
|
||||
{{ aggregatedStats.usage.formattedCost }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 各 Key 贡献占比（可选） -->
|
||||
<div
|
||||
v-if="individualStats.length > 1"
|
||||
class="border-t border-gray-200 pt-2 dark:border-gray-700"
|
||||
>
|
||||
<div class="mb-2 text-xs text-gray-500 dark:text-gray-400">各 Key 贡献占比</div>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
v-for="stat in topContributors"
|
||||
:key="stat.apiId"
|
||||
class="flex items-center justify-between text-xs"
|
||||
>
|
||||
<span class="truncate text-gray-600 dark:text-gray-400">{{ stat.name }}</span>
|
||||
<span class="text-gray-900 dark:text-gray-100"
|
||||
>{{ calculateContribution(stat) }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单 Key 模式下的详细信息 -->
|
||||
<div v-else class="space-y-2 md:space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<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 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'"
|
||||
>
|
||||
<i
|
||||
class="mr-1 text-xs md:text-sm"
|
||||
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
|
||||
/>
|
||||
{{ statsData.isActive ? '活跃' : '已停用' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<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 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 dark:text-gray-400 md:text-base"
|
||||
>过期时间</span
|
||||
>
|
||||
<!-- 未激活状态 -->
|
||||
<div
|
||||
v-if="statsData.expirationMode === 'activation' && !statsData.isActivated"
|
||||
class="text-sm font-medium text-amber-600 dark:text-amber-500 md:text-base"
|
||||
>
|
||||
<i class="fas fa-pause-circle mr-1 text-xs md:text-sm" />
|
||||
未激活
|
||||
<span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
|
||||
>(首次使用后
|
||||
{{ statsData.activationDays || (statsData.activationUnit === 'hours' ? 24 : 30)
|
||||
}}{{ statsData.activationUnit === 'hours' ? '小时' : '天' }}过期)</span
|
||||
>
|
||||
</div>
|
||||
<!-- 已设置过期时间 -->
|
||||
<div v-else-if="statsData.expiresAt" class="text-right">
|
||||
<div
|
||||
v-if="isApiKeyExpired(statsData.expiresAt)"
|
||||
class="text-sm font-medium text-red-600 md:text-base"
|
||||
>
|
||||
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
|
||||
已过期
|
||||
</div>
|
||||
<div
|
||||
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
|
||||
class="break-all text-xs font-medium text-orange-600 md:text-base"
|
||||
>
|
||||
<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 dark:text-gray-100 md:text-base"
|
||||
>
|
||||
{{ formatExpireDate(statsData.expiresAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 永不过期 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单 Key 模式下的详细信息 -->
|
||||
<div v-else class="space-y-2 md:space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<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 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'"
|
||||
>
|
||||
<i
|
||||
class="mr-1 text-xs md:text-sm"
|
||||
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
|
||||
/>
|
||||
{{ statsData.isActive ? '活跃' : '已停用' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<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 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 dark:text-gray-400 md:text-base"
|
||||
>过期时间</span
|
||||
>
|
||||
<!-- 未激活状态 -->
|
||||
<div
|
||||
v-if="statsData.expirationMode === 'activation' && !statsData.isActivated"
|
||||
class="text-sm font-medium text-amber-600 dark:text-amber-500 md:text-base"
|
||||
>
|
||||
<i class="fas fa-pause-circle mr-1 text-xs md:text-sm" />
|
||||
未激活
|
||||
<span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
|
||||
>(首次使用后
|
||||
{{ statsData.activationDays || (statsData.activationUnit === 'hours' ? 24 : 30)
|
||||
}}{{ statsData.activationUnit === 'hours' ? '小时' : '天' }}过期)</span
|
||||
>
|
||||
</div>
|
||||
<!-- 已设置过期时间 -->
|
||||
<div v-else-if="statsData.expiresAt" class="text-right">
|
||||
<div
|
||||
v-if="isApiKeyExpired(statsData.expiresAt)"
|
||||
class="text-sm font-medium text-red-600 md:text-base"
|
||||
>
|
||||
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
|
||||
已过期
|
||||
</div>
|
||||
<div
|
||||
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
|
||||
class="break-all text-xs font-medium text-orange-600 md:text-base"
|
||||
>
|
||||
<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 dark:text-gray-100 md:text-base"
|
||||
>
|
||||
{{ formatExpireDate(statsData.expiresAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 永不过期 -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="boundAccountList.length > 0"
|
||||
class="mt-4 rounded-2xl border border-indigo-100/60 bg-indigo-50/60 p-4 dark:border-indigo-500/40 dark:bg-indigo-500/10"
|
||||
<!-- 使用统计概览 -->
|
||||
<div class="card p-4 md:p-6">
|
||||
<h3
|
||||
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"
|
||||
>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fas fa-link text-sm text-indigo-500 md:text-base" />
|
||||
<span class="text-sm font-semibold text-indigo-900 dark:text-indigo-200 md:text-base"
|
||||
>专属账号运行状态</span
|
||||
>
|
||||
<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 dark:text-gray-400 sm:ml-2 md:text-sm"
|
||||
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
|
||||
>
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-3 md:gap-4">
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-green-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.requests) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
|
||||
</div>
|
||||
<span
|
||||
class="rounded-full bg-white/70 px-2 py-0.5 text-xs font-medium text-indigo-500 shadow-sm dark:bg-slate-900/40 dark:text-indigo-200"
|
||||
>实时速览</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<div
|
||||
v-for="account in boundAccountList"
|
||||
:key="account.id"
|
||||
class="rounded-xl bg-white/80 p-3 shadow-sm backdrop-blur dark:bg-slate-900/50 md:p-4"
|
||||
>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-white shadow-inner',
|
||||
account.platform === 'claude'
|
||||
? 'bg-gradient-to-br from-purple-500 to-purple-600'
|
||||
: 'bg-gradient-to-br from-sky-500 to-indigo-500'
|
||||
]"
|
||||
>
|
||||
<i :class="account.platform === 'claude' ? 'fas fa-meteor' : 'fas fa-robot'" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{{ account.name || '未命名账号' }}
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 text-[11px]">
|
||||
<span
|
||||
v-if="account.platform === 'claude'"
|
||||
class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 font-medium text-purple-700 dark:bg-purple-500/20 dark:text-purple-200"
|
||||
>Claude 专属</span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-200"
|
||||
>OpenAI 专属</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="getRateLimitDisplay(account.rateLimitStatus)"
|
||||
class="text-xs font-semibold"
|
||||
:class="getRateLimitDisplay(account.rateLimitStatus).class"
|
||||
>
|
||||
<i class="fas fa-tachometer-alt mr-1" />
|
||||
{{ getRateLimitDisplay(account.rateLimitStatus).text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="account.platform === 'claude'" class="mt-3 space-y-3">
|
||||
<div v-if="account.sessionWindow?.hasActiveWindow" class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 w-32 rounded-full bg-gray-200 dark:bg-gray-700">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getSessionProgressBarClass(
|
||||
account.sessionWindow?.sessionWindowStatus,
|
||||
account
|
||||
)
|
||||
]"
|
||||
:style="{
|
||||
width: `${Math.min(
|
||||
100,
|
||||
Math.max(0, account.sessionWindow?.progress || 0)
|
||||
)}%`
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-gray-700 dark:text-gray-200">
|
||||
{{
|
||||
Math.min(
|
||||
100,
|
||||
Math.max(0, Math.round(account.sessionWindow?.progress || 0))
|
||||
)
|
||||
}}%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-3 text-[11px] text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
formatSessionWindowRange(
|
||||
account.sessionWindow?.windowStart,
|
||||
account.sessionWindow?.windowEnd
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
v-if="account.sessionWindow?.remainingTime > 0"
|
||||
class="font-medium text-indigo-600 dark:text-indigo-400"
|
||||
>
|
||||
剩余 {{ formatSessionRemaining(account.sessionWindow.remainingTime) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg bg-white/60 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
|
||||
>
|
||||
暂无活跃会话窗口
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="account.platform === 'openai'" class="mt-3 space-y-3">
|
||||
<div v-if="account.codexUsage" class="space-y-3">
|
||||
<div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex min-w-[34px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
|
||||
>
|
||||
{{ getCodexWindowLabel('primary') }}
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getCodexUsageBarClass(account.codexUsage.primary)
|
||||
]"
|
||||
:style="{ width: getCodexUsageWidth(account.codexUsage.primary) }"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{{ formatCodexUsagePercent(account.codexUsage.primary) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
重置剩余 {{ formatCodexRemaining(account.codexUsage.primary) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex min-w-[34px] justify-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-600 dark:bg-blue-500/20 dark:text-blue-200"
|
||||
>
|
||||
{{ getCodexWindowLabel('secondary') }}
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getCodexUsageBarClass(account.codexUsage.secondary)
|
||||
]"
|
||||
:style="{ width: getCodexUsageWidth(account.codexUsage.secondary) }"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{{ formatCodexUsagePercent(account.codexUsage.secondary) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
重置剩余 {{ formatCodexRemaining(account.codexUsage.secondary) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg bg-white/60 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
|
||||
>
|
||||
暂无额度使用数据
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-blue-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.allTokens) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-purple-600 md:text-3xl">
|
||||
{{ currentPeriodData.formattedCost || '$0.000000' }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-yellow-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.inputTokens) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用统计概览 -->
|
||||
<div class="card p-4 md:p-6">
|
||||
<h3
|
||||
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 dark:text-gray-400 sm:ml-2 md:text-sm"
|
||||
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
|
||||
<div v-if="boundAccountList.length > 0" class="card p-4 md:p-6">
|
||||
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fas fa-link text-sm text-indigo-500 md:text-base" />
|
||||
<span class="text-sm font-semibold text-indigo-900 dark:text-indigo-200 md:text-base"
|
||||
>专属账号运行状态</span
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-200"
|
||||
>实时速览</span
|
||||
>
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-3 md:gap-4">
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-green-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.requests) }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3 md:gap-4 lg:grid-cols-2">
|
||||
<div
|
||||
v-for="account in boundAccountList"
|
||||
:key="account.id || account.key"
|
||||
class="rounded-xl border border-white/60 bg-white/85 p-4 shadow-sm backdrop-blur dark:border-slate-700/70 dark:bg-slate-900/60"
|
||||
>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
:class="[
|
||||
'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full text-white shadow-inner',
|
||||
account.platform === 'claude'
|
||||
? 'bg-gradient-to-br from-purple-500 to-purple-600'
|
||||
: 'bg-gradient-to-br from-sky-500 to-indigo-500'
|
||||
]"
|
||||
>
|
||||
<i :class="account.platform === 'claude' ? 'fas fa-meteor' : 'fas fa-robot'" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{{ getAccountTitle(account) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-[11px]">
|
||||
<span
|
||||
v-if="account.platform === 'claude'"
|
||||
class="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 font-medium text-purple-700 dark:bg-purple-500/20 dark:text-purple-200"
|
||||
>Claude 专用</span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-200"
|
||||
>OpenAI 专用</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="getRateLimitDisplay(account.rateLimitStatus)"
|
||||
class="text-xs font-semibold"
|
||||
:class="getRateLimitDisplay(account.rateLimitStatus).class"
|
||||
>
|
||||
<i class="fas fa-tachometer-alt mr-1" />
|
||||
{{ getRateLimitDisplay(account.rateLimitStatus).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
|
||||
|
||||
<div v-if="account.platform === 'claude'" class="mt-4 space-y-2">
|
||||
<div v-if="account.sessionWindow?.hasActiveWindow" class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-700">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getSessionProgressBarClass(
|
||||
account.sessionWindow?.sessionWindowStatus,
|
||||
account
|
||||
)
|
||||
]"
|
||||
:style="{
|
||||
width: `${Math.min(100, Math.max(0, account.sessionWindow?.progress || 0))}%`
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-xs font-semibold text-gray-700 dark:text-gray-200">
|
||||
{{
|
||||
Math.min(100, Math.max(0, Math.round(account.sessionWindow?.progress || 0)))
|
||||
}}%
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-3 text-[11px] text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
<span>
|
||||
{{
|
||||
formatSessionWindowRange(
|
||||
account.sessionWindow?.windowStart,
|
||||
account.sessionWindow?.windowEnd
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
v-if="account.sessionWindow?.remainingTime > 0"
|
||||
class="font-medium text-indigo-600 dark:text-indigo-400"
|
||||
>
|
||||
剩余 {{ formatSessionRemaining(account.sessionWindow.remainingTime) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg bg-white/70 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
|
||||
>
|
||||
暂无活跃会话窗口
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-blue-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.allTokens) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-purple-600 md:text-3xl">
|
||||
{{ currentPeriodData.formattedCost || '$0.000000' }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card text-center">
|
||||
<div class="text-lg font-bold text-yellow-600 md:text-3xl">
|
||||
{{ formatNumber(currentPeriodData.inputTokens) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
|
||||
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
|
||||
|
||||
<div v-else-if="account.platform === 'openai'" class="mt-4 space-y-3">
|
||||
<div v-if="account.codexUsage" class="space-y-3">
|
||||
<div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex min-w-[34px] justify-center rounded-full bg-indigo-100 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-300"
|
||||
>
|
||||
{{ getCodexWindowLabel('primary') }}
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getCodexUsageBarClass(account.codexUsage.primary)
|
||||
]"
|
||||
:style="{ width: getCodexUsageWidth(account.codexUsage.primary) }"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{{ formatCodexUsagePercent(account.codexUsage.primary) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
重置剩余 {{ formatCodexRemaining(account.codexUsage.primary) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-700/70">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex min-w-[34px] justify-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-600 dark:bg-blue-500/20 dark:text-blue-200"
|
||||
>
|
||||
{{ getCodexWindowLabel('secondary') }}
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-600">
|
||||
<div
|
||||
:class="[
|
||||
'h-2 rounded-full transition-all duration-300',
|
||||
getCodexUsageBarClass(account.codexUsage.secondary)
|
||||
]"
|
||||
:style="{ width: getCodexUsageWidth(account.codexUsage.secondary) }"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="w-12 text-right text-xs font-semibold text-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{{ formatCodexUsagePercent(account.codexUsage.secondary) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
|
||||
重置剩余 {{ formatCodexRemaining(account.codexUsage.secondary) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg bg-white/70 px-3 py-2 text-xs text-gray-500 dark:bg-slate-800/60 dark:text-gray-400"
|
||||
>
|
||||
暂无额度使用数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -528,7 +522,20 @@ const boundAccountList = computed(() => {
|
||||
return result
|
||||
})
|
||||
|
||||
// 将分钟格式化为易读文本
|
||||
// 专属账号标题
|
||||
const getAccountTitle = (account) => {
|
||||
if (!account) {
|
||||
return '专属账号'
|
||||
}
|
||||
|
||||
if (account.platform === 'openai') {
|
||||
return 'OpenAI 专属账号'
|
||||
}
|
||||
|
||||
return 'Claude 专属账号'
|
||||
}
|
||||
|
||||
// 格式化限流时间
|
||||
const formatRateLimitTime = (minutes) => {
|
||||
if (!minutes || minutes <= 0) {
|
||||
return ''
|
||||
|
||||
@@ -123,12 +123,20 @@
|
||||
<StatsOverview />
|
||||
|
||||
<!-- Token 分布和限制配置 -->
|
||||
<div class="mb-6 grid grid-cols-1 gap-4 md:mb-8 md:gap-6 lg:grid-cols-2">
|
||||
<TokenDistribution />
|
||||
<!-- 单key模式下显示限制配置 -->
|
||||
<LimitConfig v-if="!multiKeyMode" />
|
||||
<!-- 多key模式下显示聚合统计卡片，填充右侧空白 -->
|
||||
<AggregatedStatsCard v-if="multiKeyMode" />
|
||||
<div
|
||||
class="mb-6 grid grid-cols-1 gap-4 md:mb-8 md:gap-6 lg:auto-rows-max lg:grid-cols-2 lg:items-start"
|
||||
>
|
||||
<div class="lg:col-span-1">
|
||||
<TokenDistribution />
|
||||
</div>
|
||||
<!-- 单key模式下显示限制配置，使用整行避免出现大片空白 -->
|
||||
<div v-if="!multiKeyMode" class="lg:col-span-2">
|
||||
<LimitConfig />
|
||||
</div>
|
||||
<!-- 多key模式下显示聚合统计卡片，与 TokenDistribution 并排 -->
|
||||
<div v-if="multiKeyMode" class="lg:col-span-1">
|
||||
<AggregatedStatsCard />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模型使用统计 -->
|
||||
|
||||
Reference in New Issue
Block a user