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

- 完成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

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' ? '今日' : '本月' }})</span
>({{ statsPeriod === 'daily' ? t('apiStats.today') : t('apiStats.thisMonth') }})</span
>
</h3>
@@ -33,7 +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) }}</span>
<span>{{ formatNumber(getStatUsage(stat)?.requests || 0) }}{{ t('apiStats.requests') }}</span>
<span>{{ getStatUsage(stat)?.formattedCost || '$0.00' }}</span>
</div>
</div>
@@ -41,7 +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>其他 {{ otherKeysCount }} 个Keys</span>
<span>{{ t('apiStats.otherKeys') }} {{ otherKeysCount }} {{ t('apiStats.individual') }}{{ t('apiStats.keys') }}</span>
<span>{{ otherPercentage }}%</span>
</div>
</div>
@@ -54,7 +54,7 @@
>
<div class="text-center">
<i class="fas fa-chart-pie mb-2 text-2xl" />
<p>使用占比仅在多Key查询时显示</p>
<p>{{ t('apiStats.usageRatioOnlyInMultiMode') }}</p>
</div>
</div>
@@ -63,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>
@@ -71,8 +71,11 @@
<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)