mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 21:17:30 +00:00
4aae4aaec0
- 完成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统计功能模块支持完整的多语言切换体验
396 lines
16 KiB
Vue
396 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 限制配置 / 聚合模式提示 -->
|
|
<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="fas fa-shield-alt mr-2 text-sm text-red-500 md:mr-3 md:text-base" />
|
|
{{ multiKeyMode ? t('apiStats.limitConfigAggregate') : t('apiStats.limitConfig') }}
|
|
</h3>
|
|
|
|
<!-- 多 Key 模式下的聚合统计信息 -->
|
|
<div v-if="multiKeyMode && aggregatedStats" class="space-y-4">
|
|
<!-- API Keys 概况 -->
|
|
<div
|
|
class="rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 dark:from-blue-900/20 dark:to-indigo-900/20"
|
|
>
|
|
<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') }}
|
|
</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"
|
|
>
|
|
{{ aggregatedStats.activeKeys }}/{{ aggregatedStats.totalKeys }}
|
|
</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="text-center">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 聚合统计数据 -->
|
|
<div
|
|
class="rounded-lg bg-gradient-to-r from-purple-50 to-pink-50 p-4 dark:from-purple-900/20 dark:to-pink-900/20"
|
|
>
|
|
<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>
|
|
</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) }}
|
|
</span>
|
|
</div>
|
|
<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') }}
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{{ formatNumber(aggregatedStats.usage.allTokens) }}
|
|
</span>
|
|
</div>
|
|
<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 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 无效 Keys 提示 -->
|
|
<div
|
|
v-if="invalidKeys && invalidKeys.length > 0"
|
|
class="rounded-lg bg-red-50 p-3 text-sm dark:bg-red-900/20"
|
|
>
|
|
<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 }) }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 提示信息 -->
|
|
<div
|
|
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') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 仅在单 Key 模式下显示限制配置 -->
|
|
<div v-if="!multiKeyMode" class="space-y-4 md:space-y-5">
|
|
<!-- 每日费用限制 -->
|
|
<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-xs text-gray-500 dark:text-gray-400 md:text-sm">
|
|
<span v-if="statsData.limits.dailyCostLimit > 0">
|
|
${{ statsData.limits.currentDailyCost.toFixed(4) }} / ${{
|
|
statsData.limits.dailyCostLimit.toFixed(2)
|
|
}}
|
|
</span>
|
|
<span v-else class="flex items-center gap-1">
|
|
${{ statsData.limits.currentDailyCost.toFixed(4) }} / <i class="fas fa-infinity" />
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="statsData.limits.dailyCostLimit > 0"
|
|
class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700"
|
|
>
|
|
<div
|
|
class="h-2 rounded-full transition-all duration-300"
|
|
:class="getDailyCostProgressColor()"
|
|
:style="{ width: getDailyCostProgress() + '%' }"
|
|
/>
|
|
</div>
|
|
<div v-else class="h-2 w-full rounded-full bg-gray-200">
|
|
<div class="h-2 rounded-full bg-green-500" style="width: 0%" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间窗口限制 -->
|
|
<div
|
|
v-if="
|
|
statsData.limits.rateLimitWindow > 0 &&
|
|
(statsData.limits.rateLimitRequests > 0 ||
|
|
statsData.limits.tokenLimit > 0 ||
|
|
statsData.limits.rateLimitCost > 0)
|
|
"
|
|
>
|
|
<WindowCountdown
|
|
:cost-limit="statsData.limits.rateLimitCost"
|
|
:current-cost="statsData.limits.currentWindowCost"
|
|
:current-requests="statsData.limits.currentWindowRequests"
|
|
:current-tokens="statsData.limits.currentWindowTokens"
|
|
:label="t('apiStats.timeWindowLimit')"
|
|
:rate-limit-window="statsData.limits.rateLimitWindow"
|
|
:request-limit="statsData.limits.rateLimitRequests"
|
|
:show-progress="true"
|
|
:show-tooltip="true"
|
|
:token-limit="statsData.limits.tokenLimit"
|
|
:window-end-time="statsData.limits.windowEndTime"
|
|
:window-remaining-seconds="statsData.limits.windowRemainingSeconds"
|
|
:window-start-time="statsData.limits.windowStartTime"
|
|
/>
|
|
|
|
<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') }}
|
|
</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">{{ 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 }}
|
|
</span>
|
|
<span v-else class="flex items-center gap-1">
|
|
<i class="fas fa-infinity text-gray-400" />
|
|
</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.modelLimit') }}</span>
|
|
<span class="text-sm font-medium text-gray-900 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 text-xs md:text-sm" />
|
|
{{ 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">{{ t('apiStats.clientLimit') }}</span>
|
|
<span class="text-sm font-medium text-gray-900 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 text-xs md:text-sm" />
|
|
{{ 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详细限制信息 -->
|
|
<div
|
|
v-if="
|
|
(statsData.restrictions.enableModelRestriction &&
|
|
statsData.restrictions.restrictedModels.length > 0) ||
|
|
(statsData.restrictions.enableClientRestriction &&
|
|
statsData.restrictions.allowedClients.length > 0)
|
|
"
|
|
class="card mt-4 p-4 md:mt-6 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="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">
|
|
<!-- 模型限制详情 -->
|
|
<div
|
|
v-if="
|
|
statsData.restrictions.enableModelRestriction &&
|
|
statsData.restrictions.restrictedModels.length > 0
|
|
"
|
|
class="rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20 md:p-4"
|
|
>
|
|
<h4
|
|
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
|
|
v-for="model in statsData.restrictions.restrictedModels"
|
|
:key="model"
|
|
class="rounded border border-amber-200 bg-white px-2 py-1 text-xs dark:border-amber-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
|
|
>
|
|
<i class="fas fa-ban mr-1 text-xs text-red-500 md:mr-2" />
|
|
<span class="break-all text-gray-800 dark:text-gray-200">{{ model }}</span>
|
|
</div>
|
|
</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') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 客户端限制详情 -->
|
|
<div
|
|
v-if="
|
|
statsData.restrictions.enableClientRestriction &&
|
|
statsData.restrictions.allowedClients.length > 0
|
|
"
|
|
class="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20 md:p-4"
|
|
>
|
|
<h4
|
|
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
|
|
v-for="client in statsData.restrictions.allowedClients"
|
|
:key="client"
|
|
class="rounded border border-blue-200 bg-white px-2 py-1 text-xs dark:border-blue-700 dark:bg-gray-800 md:px-3 md:py-2 md:text-sm"
|
|
>
|
|
<i class="fas fa-check mr-1 text-xs text-green-500 md:mr-2" />
|
|
<span class="break-all text-gray-800 dark:text-gray-200">{{ client }}</span>
|
|
</div>
|
|
</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') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<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)
|
|
|
|
// 获取每日费用进度
|
|
const getDailyCostProgress = () => {
|
|
if (!statsData.value.limits.dailyCostLimit || statsData.value.limits.dailyCostLimit === 0)
|
|
return 0
|
|
const percentage =
|
|
(statsData.value.limits.currentDailyCost / statsData.value.limits.dailyCostLimit) * 100
|
|
return Math.min(percentage, 100)
|
|
}
|
|
|
|
// 获取每日费用进度条颜色
|
|
const getDailyCostProgressColor = () => {
|
|
const progress = getDailyCostProgress()
|
|
if (progress >= 100) return 'bg-red-500'
|
|
if (progress >= 80) return 'bg-yellow-500'
|
|
return 'bg-green-500'
|
|
}
|
|
|
|
// 格式化数字
|
|
const formatNumber = (num) => {
|
|
if (typeof num !== 'number') {
|
|
num = parseInt(num) || 0
|
|
}
|
|
|
|
if (num === 0) return '0'
|
|
|
|
// 大数字使用简化格式
|
|
if (num >= 1000000) {
|
|
return (num / 1000000).toFixed(1) + 'M'
|
|
} else if (num >= 1000) {
|
|
return (num / 1000).toFixed(1) + 'K'
|
|
} else {
|
|
return num.toLocaleString()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 卡片样式 - 使用CSS变量 */
|
|
.card {
|
|
background: var(--surface-color);
|
|
border-radius: 16px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.15),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
:global(.dark) .card:hover {
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.5),
|
|
0 10px 10px -5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
</style>
|