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

Revert "Merge pull request #424 from Wangnov/feat/i18n"

Browse Source 
This reverts commit 1d915d8327, reversing
changes made to 009f7c84f6.
This commit is contained in:
shaw
2025-09-12 09:21:53 +08:00
parent 1d915d8327
commit 9c4dc714f8
80 changed files with 7026 additions and 19087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/admin-spa/src/components/apistats/AggregatedStatsCard.vue
View File

@@ -5,10 +5,10 @@
>
<span class="flex items-center">
<i class="fas fa-chart-pie mr-2 text-sm text-orange-500 md:mr-3 md:text-base" />
{{ t('apiStats.usageRatio') }}
使用占比
</span>
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
@@ -33,9 +33,7 @@
<div
class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
>
<span
>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}{{ t('apiStats.requests') }}</span
>
<span>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}次</span>
<span>{{ getStatUsage(stat)?.formattedCost || '$0.00' }}</span>
</div>
</div>
@@ -43,10 +41,7 @@
<!-- 其他Keys汇总 -->
<div v-if="otherKeysCount > 0" class="border-t border-gray-200 pt-2 dark:border-gray-700">
<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<span
>{{ t('apiStats.otherKeys') }} {{ otherKeysCount }} {{ t('apiStats.individual')
}}{{ t('apiStats.keys') }}</span
>
<span>其他 {{ otherKeysCount }} 个Keys</span>
<span>{{ otherPercentage }}%</span>
</div>
</div>
@@ -59,7 +54,7 @@
>
<div class="text-center">
<i class="fas fa-chart-pie mb-2 text-2xl" />
<p>{{ t('apiStats.usageRatioOnlyInMultiMode') }}</p>
<p>使用占比仅在多Key查询时显示</p>
</div>
</div>
@@ -68,7 +63,7 @@
class="flex h-32 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
>
<i class="fas fa-chart-pie mr-2" />
{{ t('apiStats.noData') }}
暂无数据
</div>
</div>
</template>
@@ -76,11 +71,8 @@
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const { aggregatedStats, individualStats, statsPeriod, multiKeyMode } = storeToRefs(apiStatsStore)

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

@@ -4,11 +4,9 @@
<div class="wide-card-title mb-6">
<h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-200">
<i class="fas fa-chart-line mr-3" />
{{ t('apiStats.usageStatsQuery') }}
使用统计查询
</h2>
<p class="text-base text-gray-600 dark:text-gray-400">
{{ t('apiStats.apiKeyDescription') }}
</p>
<p class="text-base text-gray-600 dark:text-gray-400">查询您的 API Key 使用情况和统计数据</p>
</div>
<!-- 输入区域 -->
@@ -18,7 +16,7 @@
<!-- API Key 标签 -->
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">
<i class="fas fa-key mr-2" />
{{ multiKeyMode ? t('apiStats.enterApiKeys') : t('apiStats.enterApiKey') }}
{{ multiKeyMode ? '输入您的 API Keys（每行一个或用逗号分隔）' : '输入您的 API Key' }}
</label>
<!-- 模式切换和查询按钮组 -->
@@ -30,20 +28,20 @@
<button
class="mode-switch-btn"
:class="{ active: !multiKeyMode }"
:title="t('apiStats.singleModeTitle')"
title="单一模式"
@click="multiKeyMode = false"
>
<i class="fas fa-key" />
<span class="ml-2 hidden sm:inline">{{ t('apiStats.singleMode') }}</span>
<span class="ml-2 hidden sm:inline">单一</span>
</button>
<button
class="mode-switch-btn"
:class="{ active: multiKeyMode }"
:title="t('apiStats.aggregateModeTitle')"
title="聚合模式"
@click="multiKeyMode = true"
>
<i class="fas fa-layer-group" />
<span class="ml-2 hidden sm:inline">{{ t('apiStats.aggregateMode') }}</span>
<span class="ml-2 hidden sm:inline">聚合</span>
<span
v-if="multiKeyMode && parsedApiKeys.length > 0"
class="ml-1 rounded-full bg-white/20 px-1.5 py-0.5 text-xs font-semibold"
@@ -64,7 +62,7 @@
v-model="apiKey"
class="wide-card-input w-full"
:disabled="loading"
:placeholder="t('apiStats.apiKeyPlaceholder')"
placeholder="请输入您的 API Key (cr_...)"
type="password"
@keyup.enter="queryStats"
/>
@@ -75,14 +73,14 @@
v-model="apiKey"
class="wide-card-input w-full resize-y"
:disabled="loading"
:placeholder="t('apiStats.apiKeysPlaceholder')"
placeholder="请输入您的 API Keys，支持以下格式：&#10;cr_xxx&#10;cr_yyy&#10;或&#10;cr_xxx, cr_yyy"
rows="4"
@keyup.ctrl.enter="queryStats"
/>
<button
v-if="apiKey && !loading"
class="absolute right-2 top-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
:title="t('apiStats.clearInput')"
title="清空输入"
@click="clearInput"
>
<i class="fas fa-times-circle" />
@@ -99,7 +97,7 @@
>
<i v-if="loading" class="fas fa-spinner loading-spinner" />
<i v-else class="fas fa-search" />
{{ loading ? t('common.loading') : t('apiStats.queryButton') }}
{{ loading ? '查询中...' : '查询统计' }}
</button>
</div>
</div>
@@ -107,7 +105,11 @@
<!-- 安全提示 -->
<div class="security-notice mt-4">
<i class="fas fa-shield-alt mr-2" />
{{ multiKeyMode ? t('apiStats.securityNoticeMulti') : t('apiStats.securityNoticeSingle') }}
{{
multiKeyMode
? '您的 API Keys 仅用于查询统计数据，不会被存储。聚合模式下部分个体化信息将不显示。'
: '您的 API Key 仅用于查询自己的统计数据，不会被存储或用于其他用途'
}}
</div>
<!-- 多 Key 模式额外提示 -->
@@ -116,7 +118,7 @@
class="mt-2 rounded-lg bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
>
<i class="fas fa-lightbulb mr-2" />
<span>{{ t('apiStats.multiKeyTip') }}</span>
<span>提示：最多支持同时查询 30 个 API Keys。使用 Ctrl+Enter 快速查询。</span>
</div>
</div>
</div>
@@ -125,11 +127,8 @@
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const { apiKey, loading, multiKeyMode } = storeToRefs(apiStatsStore)
const { queryStats, clearInput } = apiStatsStore

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

@@ -6,7 +6,7 @@
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" />
{{ multiKeyMode ? t('apiStats.limitConfigAggregate') : t('apiStats.limitConfig') }}
{{ multiKeyMode ? '限制配置（聚合查询模式）' : '限制配置' }}
</h3>
<!-- 多 Key 模式下的聚合统计信息 -->
@@ -18,7 +18,7 @@
<div class="mb-3 flex items-center justify-between">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
<i class="fas fa-layer-group mr-2 text-blue-500" />
{{ t('apiStats.apiKeysOverview') }}
API Keys 概况
</span>
<span
class="rounded-full bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-800 dark:text-blue-200"
@@ -31,17 +31,13 @@
<div class="text-lg font-bold text-gray-900 dark:text-gray-100">
{{ aggregatedStats.totalKeys }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
{{ t('apiStats.totalKeys') }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">总计 Keys</div>
</div>
<div class="text-center">
<div class="text-lg font-bold text-green-600">
{{ aggregatedStats.activeKeys }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">
{{ t('apiStats.activeKeys') }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400">激活 Keys</div>
</div>
</div>
</div>
@@ -52,15 +48,13 @@
>
<div class="mb-3 flex items-center">
<i class="fas fa-chart-pie mr-2 text-purple-500" />
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
t('apiStats.aggregateStatsSummary')
}}</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">聚合统计摘要</span>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<span class="text-xs text-gray-600 dark:text-gray-400">
<i class="fas fa-database mr-1 text-gray-400" />
{{ t('apiStats.totalRequests') }}
总请求数
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(aggregatedStats.usage.requests) }}
@@ -69,7 +63,7 @@
<div class="flex items-center justify-between">
<span class="text-xs text-gray-600 dark:text-gray-400">
<i class="fas fa-coins mr-1 text-yellow-500" />
{{ t('apiStats.totalTokens') }}
总 Tokens
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(aggregatedStats.usage.allTokens) }}
@@ -78,7 +72,7 @@
<div class="flex items-center justify-between">
<span class="text-xs text-gray-600 dark:text-gray-400">
<i class="fas fa-dollar-sign mr-1 text-green-500" />
{{ t('apiStats.totalCost') }}
总费用
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
{{ aggregatedStats.usage.formattedCost }}
@@ -94,7 +88,7 @@
>
<i class="fas fa-exclamation-triangle mr-2 text-red-600 dark:text-red-400" />
<span class="text-red-700 dark:text-red-300">
{{ t('apiStats.invalidKeysCount', { count: invalidKeys.length }) }}
{{ invalidKeys.length }} 个无效的 API Key
</span>
</div>
@@ -103,7 +97,7 @@
class="rounded-lg bg-gray-50 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
>
<i class="fas fa-info-circle mr-1" />
{{ t('apiStats.aggregateStatsNote') }}
每个 API Key 有独立的限制设置，聚合模式下不显示单个限制配置
</div>
</div>
@@ -112,9 +106,9 @@
<!-- 每日费用限制 -->
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-gray-600 dark:text-gray-400 md:text-base">{{
t('apiStats.dailyCostLimit')
}}</span>
<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) }} / ${{
@@ -155,7 +149,7 @@
:current-cost="statsData.limits.currentWindowCost"
:current-requests="statsData.limits.currentWindowRequests"
:current-tokens="statsData.limits.currentWindowTokens"
:label="t('apiStats.timeWindowLimit')"
label="时间窗口限制"
:rate-limit-window="statsData.limits.rateLimitWindow"
:request-limit="statsData.limits.rateLimitRequests"
:show-progress="true"
@@ -169,21 +163,19 @@
<div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-1" />
<span v-if="statsData.limits.rateLimitCost > 0">
{{ t('apiStats.orRelationshipRequests') }}
请求次数和费用限制为"或"的关系，任一达到限制即触发限流
</span>
<span v-else-if="statsData.limits.tokenLimit > 0">
{{ t('apiStats.orRelationshipTokens') }}
请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
</span>
<span v-else>{{ t('apiStats.onlyRequestsLimit') }}</span>
<span v-else> 仅限制请求次数 </span>
</div>
</div>
<!-- 其他限制信息 -->
<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 dark:text-gray-400 md:text-base">{{
t('apiStats.concurrencyLimit')
}}</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 }}
@@ -194,9 +186,7 @@
</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
t('apiStats.modelLimit')
}}</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="
@@ -206,22 +196,16 @@
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
{{
t('apiStats.restrictedModelsCount', {
count: statsData.restrictions.restrictedModels.length
})
}}
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
</span>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
{{ t('apiStats.allowAllModels') }}
允许所有模型
</span>
</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{
t('apiStats.clientLimit')
}}</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="
@@ -231,15 +215,11 @@
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
{{
t('apiStats.restrictedClientsCount', {
count: statsData.restrictions.allowedClients.length
})
}}
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
</span>
<span v-else class="text-green-600">
<i class="fas fa-check-circle mr-1 text-xs md:text-sm" />
{{ t('apiStats.allowAllClients') }}
允许所有客户端
</span>
</span>
</div>
@@ -261,7 +241,7 @@
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" />
{{ t('apiStats.detailedLimitInfo') }}
详细限制信息
</h3>
<div class="grid grid-cols-1 gap-4 md:gap-6 lg:grid-cols-2">
@@ -277,7 +257,7 @@
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" />
{{ t('apiStats.restrictedModelsList') }}
受限模型列表
</h4>
<div class="space-y-1 md:space-y-2">
<div
@@ -291,7 +271,7 @@
</div>
<p class="mt-2 text-xs text-amber-700 dark:text-amber-400 md:mt-3">
<i class="fas fa-info-circle mr-1" />
{{ t('apiStats.restrictedModelsNote') }}
此 API Key 不能访问以上列出的模型
</p>
</div>
@@ -307,7 +287,7 @@
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" />
{{ t('apiStats.allowedClientsList') }}
允许的客户端
</h4>
<div class="space-y-1 md:space-y-2">
<div
@@ -321,7 +301,7 @@
</div>
<p class="mt-2 text-xs text-blue-700 dark:text-blue-400 md:mt-3">
<i class="fas fa-info-circle mr-1" />
{{ t('apiStats.allowedClientsNote') }}
此 API Key 只能被以上列出的客户端使用
</p>
</div>
</div>
@@ -331,12 +311,9 @@
<script setup>
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
import WindowCountdown from '@/components/apikeys/WindowCountdown.vue'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const { statsData, multiKeyMode, aggregatedStats, invalidKeys } = storeToRefs(apiStatsStore)

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

@@ -6,10 +6,10 @@
>
<span class="flex items-center">
<i class="fas fa-robot mr-2 text-sm text-indigo-500 md:mr-3 md:text-base" />
{{ t('apiStats.modelUsageStats') }}
模型使用统计
</span>
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
</div>
@@ -19,9 +19,7 @@
<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">
{{ t('apiStats.loadingModelStats') }}
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 md:text-base">加载模型统计数据中...</p>
</div>
<!-- 模型统计数据 -->
@@ -33,42 +31,38 @@
{{ model.model }}
</h4>
<p class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ model.requests }}{{ t('apiStats.requestCount') }}
{{ 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 dark:text-gray-400 md:text-sm">
{{ t('apiStats.totalCost') }}
</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 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.inputTokens') }}</div>
<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 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.outputTokens') }}</div>
<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 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">
{{ t('apiStats.cacheCreateTokens') }}
</div>
<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 dark:bg-gray-700">
<div class="text-gray-600 dark:text-gray-400">{{ t('apiStats.cacheReadTokens') }}</div>
<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>
@@ -81,11 +75,7 @@
<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">
{{
t('apiStats.noModelData', {
period: statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth')
})
}}
暂无{{ statsPeriod === 'daily' ? '今日' : '本月' }}模型使用数据
</p>
</div>
</div>
@@ -93,11 +83,8 @@
<script setup>
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const { statsPeriod, modelStats, modelStatsLoading } = storeToRefs(apiStatsStore)

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

@@ -11,57 +11,45 @@
multiKeyMode ? 'fas fa-layer-group text-purple-500' : 'fas fa-info-circle text-blue-500'
"
/>
{{ multiKeyMode ? t('apiStats.batchQuerySummary') : t('apiStats.apiKeyInfo') }}
{{ 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">{{
t('apiStats.queryKeysCount')
}}</span>
<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 }} {{ t('apiStats.individual') }}
{{ 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">{{
t('apiStats.activeKeysCount')
}}</span>
<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 }} {{ t('apiStats.individual') }}
{{ 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">{{
t('apiStats.invalidKeysCount')
}}</span>
<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 }} {{ t('apiStats.individual') }}
{{ 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">{{
t('apiStats.totalRequests')
}}</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 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">{{
t('apiStats.totalTokens')
}}</span>
<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">{{
t('apiStats.totalCost')
}}</span>
<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>
@@ -72,9 +60,7 @@
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">
{{ t('apiStats.keyContribution') }}
</div>
<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"
@@ -93,18 +79,14 @@
<!-- 单 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">{{
t('apiStats.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 dark:text-gray-400 md:text-base">{{
t('apiStats.status')
}}</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'"
@@ -113,39 +95,35 @@
class="mr-1 text-xs md:text-sm"
:class="statsData.isActive ? 'fas fa-check-circle' : 'fas fa-times-circle'"
/>
{{ statsData.isActive ? t('apiStats.active') : t('apiStats.inactive') }}
{{ 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">{{
t('apiStats.permissions')
}}</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 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">{{
t('apiStats.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 dark:text-gray-400 md:text-base">{{
t('apiStats.expiresAt')
}}</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.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" />
{{ t('apiStats.notActivated') }}
未激活
<span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
>({{ t('apiStats.firstUseDays', { days: statsData.activationDays || 30 }) }})</span
>(首次使用后{{ statsData.activationDays || 30 }}天过期)</span
>
</div>
<!-- 已设置过期时间 -->
@@ -155,7 +133,7 @@
class="text-sm font-medium text-red-600 md:text-base"
>
<i class="fas fa-exclamation-circle mr-1 text-xs md:text-sm" />
{{ t('apiStats.expired') }}
已过期
</div>
<div
v-else-if="isApiKeyExpiringSoon(statsData.expiresAt)"
@@ -174,7 +152,7 @@
<!-- 永不过期 -->
<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" />
{{ t('apiStats.neverExpires') }}
永不过期
</div>
</div>
</div>
@@ -187,10 +165,10 @@
>
<span class="flex items-center">
<i class="fas fa-chart-bar mr-2 text-sm text-green-500 md:mr-3 md:text-base" />
{{ t('apiStats.usageStatsOverview') }}
使用统计概览
</span>
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
>({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span
>
</h3>
<div class="grid grid-cols-2 gap-3 md:gap-4">
@@ -199,9 +177,7 @@
{{ formatNumber(currentPeriodData.requests) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{
statsPeriod === 'daily' ? t('apiStats.todayRequests') : t('apiStats.monthlyRequests')
}}
{{ statsPeriod === 'daily' ? '今日' : '本月' }}请求数
</div>
</div>
<div class="stat-card text-center">
@@ -209,7 +185,7 @@
{{ formatNumber(currentPeriodData.allTokens) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? t('apiStats.todayTokens') : t('apiStats.monthlyTokens') }}
{{ statsPeriod === 'daily' ? '今日' : '本月' }}Token数
</div>
</div>
<div class="stat-card text-center">
@@ -217,7 +193,7 @@
{{ currentPeriodData.formattedCost || '$0.000000' }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{ statsPeriod === 'daily' ? t('apiStats.todayCost') : t('apiStats.monthlyCost') }}
{{ statsPeriod === 'daily' ? '今日' : '本月' }}费用
</div>
</div>
<div class="stat-card text-center">
@@ -225,11 +201,7 @@
{{ formatNumber(currentPeriodData.inputTokens) }}
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 md:text-sm">
{{
statsPeriod === 'daily'
? t('apiStats.todayInputTokens')
: t('apiStats.monthlyInputTokens')
}}
{{ statsPeriod === 'daily' ? '今日' : '本月' }}输入Token
</div>
</div>
</div>
@@ -241,12 +213,9 @@
/* eslint-disable no-unused-vars */
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
import dayjs from 'dayjs'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const {
statsData,
@@ -276,21 +245,13 @@ const calculateContribution = (stat) => {
// 格式化日期
const formatDate = (dateString) => {
if (!dateString) return t('apiStats.none')
if (!dateString) return '无'
try {
const date = dayjs(dateString)
// 根据当前语言环境选择日期格式
const locale = t('common.locale', 'zh-CN')
if (locale === 'en') {
return date.format('YYYY-MM-DD HH:mm')
} else if (locale === 'zh-TW') {
return date.format('YYYY年MM月DD日 HH:mm')
} else {
return date.format('YYYY年MM月DD日 HH:mm')
}
return date.format('YYYY年MM月DD日 HH:mm')
} catch (error) {
return t('apiStats.formatError')
return '格式错误'
}
}
@@ -345,10 +306,10 @@ const formatPermissions = (permissions) => {
const permissionMap = {
claude: 'Claude',
gemini: 'Gemini',
all: t('apiStats.allModels')
all: '全部模型'
}
return permissionMap[permissions] || permissions || t('apiStats.unknown')
return permissionMap[permissions] || permissions || '未知'
}
</script>

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

@@ -5,17 +5,17 @@
>
<span class="flex items-center">
<i class="fas fa-coins mr-2 text-sm text-yellow-500 md:mr-3 md:text-base" />
{{ t('apiStats.tokenDistribution') }}
Token 使用分布
</span>
<span class="text-xs font-normal text-gray-600 dark:text-gray-400 sm:ml-2 md:text-sm"
>({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
>({{ 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 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" />
{{ t('apiStats.inputToken') }}
输入 Token
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.inputTokens)
@@ -24,7 +24,7 @@
<div class="flex items-center justify-between">
<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" />
{{ t('apiStats.outputToken') }}
输出 Token
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.outputTokens)
@@ -33,7 +33,7 @@
<div class="flex items-center justify-between">
<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" />
{{ t('apiStats.cacheCreateToken') }}
缓存创建 Token
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.cacheCreateTokens)
@@ -42,7 +42,7 @@
<div class="flex items-center justify-between">
<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" />
{{ t('apiStats.cacheReadToken') }}
缓存读取 Token
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100 md:text-base">{{
formatNumber(currentPeriodData.cacheReadTokens)
@@ -51,9 +51,9 @@
</div>
<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' ? t('apiStats.todayTotal') : t('apiStats.monthlyTotal')
}}</span>
<span class="text-sm md:text-base"
>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span
>
<span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
@@ -62,11 +62,8 @@
<script setup>
import { storeToRefs } from 'pinia'
import { useI18n } from 'vue-i18n'
import { useApiStatsStore } from '@/stores/apistats'
const { t } = useI18n()
const apiStatsStore = useApiStatsStore()
const { statsPeriod, currentPeriodData } = storeToRefs(apiStatsStore)