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

feat: 完成web/admin-spa/src/components/apikeys的国际化并修复语法错误和警告

Browse Source
This commit is contained in:
Wangnov
2025-09-10 16:03:01 +08:00
parent 9836f88068
commit 97b94eeff9
35 changed files with 4766 additions and 2061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/admin-spa/src/components/apikeys/UsageDetailModal.vue
View File

@@ -17,7 +17,7 @@
<i class="fas fa-chart-line text-sm text-white sm:text-base" />
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
使用统计详情 - {{ apiKey.name }}
{{ t('apiKeys.usageDetailModal.title') }} - {{ apiKey.name }}
</h3>
</div>
<button class="p-1 text-gray-400 transition-colors hover:text-gray-600" @click="close">
@@ -34,14 +34,17 @@
class="rounded-lg border border-blue-200 bg-gradient-to-br from-blue-50 to-blue-100 p-4 dark:border-blue-700 dark:from-blue-900/20 dark:to-blue-800/20"
>
<div class="mb-3 flex items-center justify-between">
<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('apiKeys.usageDetailModal.totalRequests')
}}</span>
<i class="fas fa-paper-plane text-blue-500" />
</div>
<div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
{{ formatNumber(totalRequests) }}
</div>
<div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
今日: {{ formatNumber(dailyRequests) }} 次
{{ t('apiKeys.usageDetailModal.today') }}: {{ formatNumber(dailyRequests) }}
{{ t('apiKeys.usageDetailModal.times') }}
</div>
</div>
@@ -50,14 +53,16 @@
class="rounded-lg border border-green-200 bg-gradient-to-br from-green-50 to-green-100 p-4 dark:border-green-700 dark:from-green-900/20 dark:to-green-800/20"
>
<div class="mb-3 flex items-center justify-between">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">总Token数</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{
t('apiKeys.usageDetailModal.totalTokens')
}}</span>
<i class="fas fa-coins text-green-500" />
</div>
<div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
{{ formatTokenCount(totalTokens) }}
</div>
<div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
今日: {{ formatTokenCount(dailyTokens) }}
{{ t('apiKeys.usageDetailModal.today') }}: {{ formatTokenCount(dailyTokens) }}
</div>
</div>
@@ -66,14 +71,16 @@
class="rounded-lg border border-yellow-200 bg-gradient-to-br from-yellow-50 to-yellow-100 p-4 dark:border-yellow-700 dark:from-yellow-900/20 dark:to-yellow-800/20"
>
<div class="mb-3 flex items-center justify-between">
<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('apiKeys.usageDetailModal.totalCost')
}}</span>
<i class="fas fa-dollar-sign text-yellow-600" />
</div>
<div class="text-2xl font-bold text-gray-900 dark:text-gray-100">
${{ totalCost.toFixed(4) }}
</div>
<div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
今日: ${{ dailyCost.toFixed(4) }}
{{ t('apiKeys.usageDetailModal.today') }}: ${{ dailyCost.toFixed(4) }}
</div>
</div>
@@ -82,7 +89,9 @@
class="rounded-lg border border-purple-200 bg-gradient-to-br from-purple-50 to-purple-100 p-4 dark:border-purple-700 dark:from-purple-900/20 dark:to-purple-800/20"
>
<div class="mb-3 flex items-center justify-between">
<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('apiKeys.usageDetailModal.averageRate')
}}</span>
<i class="fas fa-tachometer-alt text-purple-500" />
</div>
<div class="space-y-1 text-sm">
@@ -104,13 +113,15 @@
class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
>
<i class="fas fa-chart-pie mr-2 text-indigo-500" />
Token 使用分布
{{ t('apiKeys.usageDetailModal.tokenDistribution') }}
</h4>
<div class="space-y-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-arrow-down mr-2 text-green-500" />
<span class="text-sm text-gray-600 dark:text-gray-400">输入 Token</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.inputTokens')
}}</span>
</div>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
{{ formatTokenCount(inputTokens) }}
@@ -119,7 +130,9 @@
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-arrow-up mr-2 text-blue-500" />
<span class="text-sm text-gray-600 dark:text-gray-400">输出 Token</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.outputTokens')
}}</span>
</div>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
{{ formatTokenCount(outputTokens) }}
@@ -128,7 +141,9 @@
<div v-if="cacheCreateTokens > 0" class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-save mr-2 text-purple-500" />
<span class="text-sm text-gray-600 dark:text-gray-400">缓存创建 Token</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.cacheCreateTokens')
}}</span>
</div>
<span class="text-sm font-semibold text-purple-600">
{{ formatTokenCount(cacheCreateTokens) }}
@@ -137,7 +152,9 @@
<div v-if="cacheReadTokens > 0" class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-download mr-2 text-purple-500" />
<span class="text-sm text-gray-600 dark:text-gray-400">缓存读取 Token</span>
<span class="text-sm text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.cacheReadTokens')
}}</span>
</div>
<span class="text-sm font-semibold text-purple-600">
{{ formatTokenCount(cacheReadTokens) }}
@@ -152,12 +169,14 @@
class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
>
<i class="fas fa-shield-alt mr-2 text-red-500" />
限制设置
{{ t('apiKeys.usageDetailModal.limitSettings') }}
</h4>
<div class="space-y-3 rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
<div v-if="apiKey.dailyCostLimit > 0" class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">每日费用限制</span>
<span class="text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.dailyCostLimit')
}}</span>
<span class="font-semibold text-gray-900 dark:text-gray-100">
${{ apiKey.dailyCostLimit.toFixed(2) }}
</span>
@@ -176,7 +195,11 @@
/>
</div>
<div class="text-right text-xs text-gray-500 dark:text-gray-400">
已使用 {{ dailyCostPercentage.toFixed(1) }}%
{{
t('apiKeys.usageDetailModal.usedPercentage', {
percentage: dailyCostPercentage.toFixed(1)
})
}}
</div>
</div>
@@ -184,7 +207,9 @@
v-if="apiKey.concurrencyLimit > 0"
class="flex items-center justify-between text-sm"
>
<span class="text-gray-600 dark:text-gray-400">并发限制</span>
<span class="text-gray-600 dark:text-gray-400">{{
t('apiKeys.usageDetailModal.concurrencyLimit')
}}</span>
<span class="font-semibold text-purple-600">
{{ apiKey.currentConcurrency || 0 }} / {{ apiKey.concurrencyLimit }}
</span>
@@ -193,14 +218,14 @@
<div v-if="apiKey.rateLimitWindow > 0" class="space-y-2">
<h5 class="text-sm font-medium text-gray-700 dark:text-gray-300">
<i class="fas fa-clock mr-1 text-blue-500" />
时间窗口限制
{{ t('apiKeys.usageDetailModal.timeWindowLimit') }}
</h5>
<WindowCountdown
:cost-limit="apiKey.rateLimitCost"
:current-cost="apiKey.currentWindowCost"
:current-requests="apiKey.currentWindowRequests"
:current-tokens="apiKey.currentWindowTokens"
label="窗口状态"
:label="t('apiKeys.usageDetailModal.windowStatus')"
:rate-limit-window="apiKey.rateLimitWindow"
:request-limit="apiKey.rateLimitRequests"
:show-progress="true"
@@ -218,7 +243,7 @@
<!-- 底部按钮 -->
<div class="mt-4 flex justify-end gap-2 sm:mt-6 sm:gap-3">
<button class="btn btn-secondary px-4 py-2 text-sm" type="button" @click="close">
关闭
{{ t('apiKeys.usageDetailModal.close') }}
</button>
</div>
</div>
@@ -228,8 +253,11 @@
<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import WindowCountdown from './WindowCountdown.vue'
const { t } = useI18n()
const props = defineProps({
show: {
type: Boolean,
@@ -274,7 +302,9 @@ const dailyCostPercentage = computed(() => {
// 方法
const formatNumber = (num) => {
if (!num && num !== 0) return '0'
return num.toLocaleString('zh-CN')
// 根据当前语言环境自动选择合适的地区设置
const currentLocale = t('common.locale')
return num.toLocaleString(currentLocale)
}
// 格式化Token数量（使用K/M单位）