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

feat(admin-spa): 在API视图中添加每日费用和总费用的排序，并默认按照每日费用排序

Browse Source
This commit is contained in:
sususu
2025-09-04 14:15:21 +08:00
parent 0cc8714c3c
commit 9d94475d3f
1 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/admin-spa/src/views/ApiKeysView.vue
View File

@@ -244,22 +244,39 @@
<th <th
class="w-[17%] min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300" class="w-[17%] min-w-[140px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
> >
使用统计 <div class="flex items-center gap-2">
<span <span>使用统计</span>
class="cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600" <span
@click="sortApiKeys('cost')" class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
> @click="sortApiKeys('dailyCost')"
(费用 >
<i 今日费用
v-if="apiKeysSortBy === 'cost'" <i
:class="[ v-if="apiKeysSortBy === 'dailyCost'"
'fas', :class="[
apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down', 'fas',
'ml-1' apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
]" 'ml-0.5 text-[10px]'
/> ]"
<i v-else class="fas fa-sort ml-1 text-gray-400" />) />
</span> <i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
</span>
<span
class="cursor-pointer rounded px-1.5 py-0.5 text-xs normal-case hover:bg-gray-100 dark:hover:bg-gray-600"
@click="sortApiKeys('totalCost')"
>
总费用
<i
v-if="apiKeysSortBy === 'totalCost'"
:class="[
'fas',
apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
'ml-0.5 text-[10px]'
]"
/>
<i v-else class="fas fa-sort ml-0.5 text-[10px] text-gray-400" />
</span>
</div>
</th> </th>
<th <th
class="w-[10%] min-w-[90px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600" class="w-[10%] min-w-[90px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
@@ -465,6 +482,12 @@
>${{ (key.dailyCost || 0).toFixed(4) }}</span >${{ (key.dailyCost || 0).toFixed(4) }}</span
> >
</div> </div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">总费用</span>
<span class="font-semibold text-blue-600"
>${{ (key.totalCost || 0).toFixed(4) }}</span
>
</div>
<div class="flex items-center justify-between text-sm"> <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">最后使用</span>
<span class="font-medium text-gray-700 dark:text-gray-300">{{ <span class="font-medium text-gray-700 dark:text-gray-300">{{
@@ -1590,8 +1613,8 @@ const apiKeyStatsTimeRange = ref('today')
const activeTab = ref('active') const activeTab = ref('active')
const deletedApiKeys = ref([]) const deletedApiKeys = ref([])
const deletedApiKeysLoading = ref(false) const deletedApiKeysLoading = ref(false)
const apiKeysSortBy = ref('') const apiKeysSortBy = ref('dailyCost')
const apiKeysSortOrder = ref('asc') const apiKeysSortOrder = ref('desc')
const expandedApiKeys = ref({}) const expandedApiKeys = ref({})
const apiKeyModelStats = ref({}) const apiKeyModelStats = ref({})
const apiKeyDateFilters = ref({}) const apiKeyDateFilters = ref({})
@@ -1696,9 +1719,12 @@ const sortedApiKeys = computed(() => {
if (apiKeysSortBy.value === 'status') { if (apiKeysSortBy.value === 'status') {
aVal = a.isActive ? 1 : 0 aVal = a.isActive ? 1 : 0
bVal = b.isActive ? 1 : 0 bVal = b.isActive ? 1 : 0
} else if (apiKeysSortBy.value === 'cost') { } else if (apiKeysSortBy.value === 'dailyCost') {
aVal = parseFloat(calculateApiKeyCost(a.usage).replace('$', '')) aVal = a.dailyCost || 0
bVal = parseFloat(calculateApiKeyCost(b.usage).replace('$', '')) bVal = b.dailyCost || 0
} else if (apiKeysSortBy.value === 'totalCost') {
aVal = a.totalCost || 0
bVal = b.totalCost || 0
} else if (apiKeysSortBy.value === 'createdAt' || apiKeysSortBy.value === 'expiresAt') { } else if (apiKeysSortBy.value === 'createdAt' || apiKeysSortBy.value === 'expiresAt') {
aVal = aVal ? new Date(aVal).getTime() : 0 aVal = aVal ? new Date(aVal).getTime() : 0
bVal = bVal ? new Date(bVal).getTime() : 0 bVal = bVal ? new Date(bVal).getTime() : 0
@@ -1883,13 +1909,6 @@ const formatNumber = (num) => {
return num.toLocaleString('zh-CN') return num.toLocaleString('zh-CN')
} }
// 计算API Key费用
const calculateApiKeyCost = (usage) => {
if (!usage || !usage.total) return '$0.0000'
const cost = usage.total.cost || 0
return `$${cost.toFixed(4)}`
}
// 获取绑定账户名称 // 获取绑定账户名称
const getBoundAccountName = (accountId) => { const getBoundAccountName = (accountId) => {
if (!accountId) return '未知账户' if (!accountId) return '未知账户'