mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 09:38:02 +00:00
feat: 完成web/admin-spa/src/components/apikeys的国际化并修复语法错误和警告
This commit is contained in:
Wangnov
@@ -8,7 +8,11 @@
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
{{ $t('user.usageStatsModal.titleWithUser', { displayName: user?.displayName || user?.username }) }}
|
||||
{{
|
||||
$t('user.usageStatsModal.titleWithUser', {
|
||||
displayName: user?.displayName || user?.username
|
||||
})
|
||||
}}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">@{{ user?.username }} • {{ user?.role }}</p>
|
||||
</div>
|
||||
@@ -34,7 +38,9 @@
|
||||
<option value="day">{{ $t('user.usageStatsModal.periodSelection.day') }}</option>
|
||||
<option value="week">{{ $t('user.usageStatsModal.periodSelection.week') }}</option>
|
||||
<option value="month">{{ $t('user.usageStatsModal.periodSelection.month') }}</option>
|
||||
<option value="quarter">{{ $t('user.usageStatsModal.periodSelection.quarter') }}</option>
|
||||
<option value="quarter">
|
||||
{{ $t('user.usageStatsModal.periodSelection.quarter') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -87,7 +93,9 @@
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="truncate text-sm font-medium text-blue-600">{{ $t('user.usageStatsModal.summaryCards.requests') }}</dt>
|
||||
<dt class="truncate text-sm font-medium text-blue-600">
|
||||
{{ $t('user.usageStatsModal.summaryCards.requests') }}
|
||||
</dt>
|
||||
<dd class="text-lg font-medium text-blue-900">
|
||||
{{ formatNumber(usageStats?.totalRequests || 0) }}
|
||||
</dd>
|
||||
@@ -117,7 +125,9 @@
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="truncate text-sm font-medium text-green-600">{{ $t('user.usageStatsModal.summaryCards.inputTokens') }}</dt>
|
||||
<dt class="truncate text-sm font-medium text-green-600">
|
||||
{{ $t('user.usageStatsModal.summaryCards.inputTokens') }}
|
||||
</dt>
|
||||
<dd class="text-lg font-medium text-green-900">
|
||||
{{ formatNumber(usageStats?.totalInputTokens || 0) }}
|
||||
</dd>
|
||||
@@ -147,7 +157,9 @@
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="truncate text-sm font-medium text-purple-600">{{ $t('user.usageStatsModal.summaryCards.outputTokens') }}</dt>
|
||||
<dt class="truncate text-sm font-medium text-purple-600">
|
||||
{{ $t('user.usageStatsModal.summaryCards.outputTokens') }}
|
||||
</dt>
|
||||
<dd class="text-lg font-medium text-purple-900">
|
||||
{{ formatNumber(usageStats?.totalOutputTokens || 0) }}
|
||||
</dd>
|
||||
@@ -177,7 +189,9 @@
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="truncate text-sm font-medium text-yellow-600">{{ $t('user.usageStatsModal.summaryCards.totalCost') }}</dt>
|
||||
<dt class="truncate text-sm font-medium text-yellow-600">
|
||||
{{ $t('user.usageStatsModal.summaryCards.totalCost') }}
|
||||
</dt>
|
||||
<dd class="text-lg font-medium text-yellow-900">
|
||||
${{ (usageStats?.totalCost || 0).toFixed(4) }}
|
||||
</dd>
|
||||
@@ -194,7 +208,9 @@
|
||||
class="rounded-lg border border-gray-200 bg-white"
|
||||
>
|
||||
<div class="border-b border-gray-200 px-4 py-5 sm:px-6">
|
||||
<h4 class="text-lg font-medium leading-6 text-gray-900">{{ $t('user.usageStatsModal.apiKeysTable.title') }}</h4>
|
||||
<h4 class="text-lg font-medium leading-6 text-gray-900">
|
||||
{{ $t('user.usageStatsModal.apiKeysTable.title') }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
@@ -253,21 +269,35 @@
|
||||
: 'bg-red-100 text-red-800'
|
||||
]"
|
||||
>
|
||||
{{ apiKey.isActive ? $t('user.usageStatsModal.apiKeysTable.status.active') : $t('user.usageStatsModal.apiKeysTable.status.disabled') }}
|
||||
{{
|
||||
apiKey.isActive
|
||||
? $t('user.usageStatsModal.apiKeysTable.status.active')
|
||||
: $t('user.usageStatsModal.apiKeysTable.status.disabled')
|
||||
}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
|
||||
{{ formatNumber(apiKey.usage?.requests || 0) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
|
||||
<div>{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.input') }}: {{ formatNumber(apiKey.usage?.inputTokens || 0) }}</div>
|
||||
<div>{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.output') }}: {{ formatNumber(apiKey.usage?.outputTokens || 0) }}</div>
|
||||
<div>
|
||||
{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.input') }}:
|
||||
{{ formatNumber(apiKey.usage?.inputTokens || 0) }}
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('user.usageStatsModal.apiKeysTable.tokensFormat.output') }}:
|
||||
{{ formatNumber(apiKey.usage?.outputTokens || 0) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
|
||||
${{ (apiKey.usage?.totalCost || 0).toFixed(4) }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
|
||||
{{ apiKey.lastUsedAt ? formatDate(apiKey.lastUsedAt) : $t('user.usageStatsModal.apiKeysTable.never') }}
|
||||
{{
|
||||
apiKey.lastUsedAt
|
||||
? formatDate(apiKey.lastUsedAt)
|
||||
: $t('user.usageStatsModal.apiKeysTable.never')
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -278,7 +308,9 @@
|
||||
<!-- Chart Placeholder -->
|
||||
<div class="rounded-lg border border-gray-200 bg-white">
|
||||
<div class="border-b border-gray-200 px-4 py-5 sm:px-6">
|
||||
<h4 class="text-lg font-medium leading-6 text-gray-900">{{ $t('user.usageStatsModal.usageTrend.title') }}</h4>
|
||||
<h4 class="text-lg font-medium leading-6 text-gray-900">
|
||||
{{ $t('user.usageStatsModal.usageTrend.title') }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div
|
||||
@@ -298,9 +330,13 @@
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">{{ $t('user.usageStatsModal.usageTrend.chartTitle') }}</h3>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">
|
||||
{{ $t('user.usageStatsModal.usageTrend.chartTitle') }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('user.usageStatsModal.usageTrend.dailyTrends', { period: selectedPeriod }) }}
|
||||
{{
|
||||
$t('user.usageStatsModal.usageTrend.dailyTrends', { period: selectedPeriod })
|
||||
}}
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-gray-400">
|
||||
{{ $t('user.usageStatsModal.usageTrend.chartNote') }}
|
||||
@@ -325,7 +361,9 @@
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">{{ $t('user.usageStatsModal.noData.title') }}</h3>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">
|
||||
{{ $t('user.usageStatsModal.noData.title') }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $t('user.usageStatsModal.noData.description') }}
|
||||
</p>
|
||||
@@ -349,9 +387,7 @@
|
||||
import { ref, watch } from 'vue'
|
||||
import { apiClient } from '@/config/api'
|
||||
import { showToast } from '@/utils/toast'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
// import { useI18n } from 'vue-i18n' - using $t in template instead
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
|
||||
Reference in New Issue
Block a user