github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 00:53:33 +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

24
web/admin-spa/src/components/admin/ChangeRoleModal.vue
View File

@@ -64,7 +64,9 @@
<!-- Role Selection -->
<form class="space-y-4" @submit.prevent="handleSubmit">
<div>
<label class="mb-2 block text-sm font-medium text-gray-700"> {{ $t('user.changeRoleModal.newRole') }} </label>
<label class="mb-2 block text-sm font-medium text-gray-700">
{{ $t('user.changeRoleModal.newRole') }}
</label>
<div class="space-y-2">
<label class="flex items-center">
<input
@@ -75,8 +77,12 @@
value="user"
/>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900">{{ $t('user.changeRoleModal.roles.user') }}</div>
<div class="text-xs text-gray-500">{{ $t('user.changeRoleModal.roles.userDesc') }}</div>
<div class="text-sm font-medium text-gray-900">
{{ $t('user.changeRoleModal.roles.user') }}
</div>
<div class="text-xs text-gray-500">
{{ $t('user.changeRoleModal.roles.userDesc') }}
</div>
</div>
</label>
<label class="flex items-center">
@@ -88,8 +94,12 @@
value="admin"
/>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900">{{ $t('user.changeRoleModal.roles.admin') }}</div>
<div class="text-xs text-gray-500">{{ $t('user.changeRoleModal.roles.adminDesc') }}</div>
<div class="text-sm font-medium text-gray-900">
{{ $t('user.changeRoleModal.roles.admin') }}
</div>
<div class="text-xs text-gray-500">
{{ $t('user.changeRoleModal.roles.adminDesc') }}
</div>
</div>
</label>
</div>
@@ -111,7 +121,9 @@
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800">{{ $t('user.changeRoleModal.roleChangeWarning.title') }}</h3>
<h3 class="text-sm font-medium text-yellow-800">
{{ $t('user.changeRoleModal.roleChangeWarning.title') }}
</h3>
<div class="mt-2 text-sm text-yellow-700">
<p v-if="selectedRole === 'admin'">
{{ $t('user.changeRoleModal.roleChangeWarning.grantAdmin') }}

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

@@ -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: {