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

feat: 完成API统计组件完整国际化支持

Browse Source 
- 完成6个apistats组件的全面国际化改造
  * ModelUsageStats.vue - 模型使用统计
  * AggregatedStatsCard.vue - 聚合统计卡片
  * StatsOverview.vue - 统计概览
  * LimitConfig.vue - 限制配置
  * TokenDistribution.vue - Token使用分布
  * ApiKeyInput.vue - API Key输入组件

- 扩展三语言翻译支持(zh-cn/zh-tw/en)
  * 新增100+专业翻译键涵盖所有UI文字
  * 台湾本地化的繁体中文翻译
  * 技术专业的英文术语翻译
  * 支持参数化翻译处理动态内容

- 技术优化
  * 统一使用Vue 3 Composition API的useI18n()模式
  * 智能日期格式国际化处理
  * 完全消除硬编码中文文字
  * 支持条件性翻译和动态时间段显示

现在整个API统计功能模块支持完整的多语言切换体验
This commit is contained in:
Wangnov
2025-09-08 19:21:41 +08:00
parent c7e1a3429d
commit 4aae4aaec0
9 changed files with 505 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
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 ? '限制配置（聚合查询模式）' : '限制配置' }}
{{ multiKeyMode ? t('apiStats.limitConfigAggregate') : t('apiStats.limitConfig') }}
</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" />
API Keys 概况
{{ t('apiStats.apiKeysOverview') }}
</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,13 +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">总计 Keys</div>
<div class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiStats.totalKeys') }}</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">激活 Keys</div>
<div class="text-xs text-gray-600 dark:text-gray-400">{{ t('apiStats.activeKeys') }}</div>
</div>
</div>
</div>
@@ -48,13 +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">聚合统计摘要</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('apiStats.aggregateStatsSummary') }}</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) }}
@@ -63,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" />
总 Tokens
{{ t('apiStats.totalTokens') }}
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
{{ formatNumber(aggregatedStats.usage.allTokens) }}
@@ -72,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 }}
@@ -88,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">
{{ invalidKeys.length }} 个无效的 API Key
{{ t('apiStats.invalidKeysCount', { count: invalidKeys.length }) }}
</span>
</div>
@@ -97,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" />
每个 API Key 有独立的限制设置，聚合模式下不显示单个限制配置
{{ t('apiStats.aggregateStatsNote') }}
</div>
</div>
@@ -107,7 +107,7 @@
<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"
>每日费用限制</span
>{{ t('apiStats.dailyCostLimit') }}</span
>
<span class="text-xs text-gray-500 dark:text-gray-400 md:text-sm">
<span v-if="statsData.limits.dailyCostLimit > 0">
@@ -149,7 +149,7 @@
:current-cost="statsData.limits.currentWindowCost"
:current-requests="statsData.limits.currentWindowRequests"
:current-tokens="statsData.limits.currentWindowTokens"
label="时间窗口限制"
:label="t('apiStats.timeWindowLimit')"
:rate-limit-window="statsData.limits.rateLimitWindow"
:request-limit="statsData.limits.rateLimitRequests"
:show-progress="true"
@@ -163,19 +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">
请求次数和Token使用量为"或"的关系，任一达到限制即触发限流
{{ t('apiStats.orRelationshipTokens') }}
</span>
<span v-else> 仅限制请求次数 </span>
<span v-else>{{ t('apiStats.onlyRequestsLimit') }}</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">并发限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.concurrencyLimit') }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span v-if="statsData.limits.concurrencyLimit > 0">
{{ statsData.limits.concurrencyLimit }}
@@ -186,7 +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">模型限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.modelLimit') }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="
@@ -196,16 +196,16 @@
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.restrictedModels.length }} 个模型
{{ t('apiStats.restrictedModelsCount', { count: 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">客户端限制</span>
<span class="text-sm text-gray-600 dark:text-gray-400 md:text-base">{{ t('apiStats.clientLimit') }}</span>
<span class="text-sm font-medium text-gray-900 md:text-base">
<span
v-if="
@@ -215,11 +215,11 @@
class="text-orange-600"
>
<i class="fas fa-exclamation-triangle mr-1 text-xs md:text-sm" />
限制 {{ statsData.restrictions.allowedClients.length }} 个客户端
{{ t('apiStats.restrictedClientsCount', { count: 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>
@@ -241,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">
@@ -257,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
@@ -271,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" />
此 API Key 不能访问以上列出的模型
{{ t('apiStats.restrictedModelsNote') }}
</p>
</div>
@@ -287,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
@@ -301,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" />
此 API Key 只能被以上列出的客户端使用
{{ t('apiStats.allowedClientsNote') }}
</p>
</div>
</div>
@@ -311,9 +311,12 @@
<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)