From 9d94475d3fc3332f6f53c1e63f24e3679d711b1f Mon Sep 17 00:00:00 2001
From: sususu <suchangshan@foxmail.com>
Date: Thu, 4 Sep 2025 14:15:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin-spa):=20=E5=9C=A8API=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=AF=8F=E6=97=A5=E8=B4=B9?=
 =?UTF-8?q?=E7=94=A8=E5=92=8C=E6=80=BB=E8=B4=B9=E7=94=A8=E7=9A=84=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=EF=BC=8C=E5=B9=B6=E9=BB=98=E8=AE=A4=E6=8C=89=E7=85=A7?=
 =?UTF-8?q?=E6=AF=8F=E6=97=A5=E8=B4=B9=E7=94=A8=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/admin-spa/src/views/ApiKeysView.vue | 75 ++++++++++++++++---------
 1 file changed, 47 insertions(+), 28 deletions(-)

diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 20e48a7a..d06cff76 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -244,22 +244,39 @@
                   <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"
                   >
-                    使用统计
-                    <span
-                      class="cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600"
-                      @click="sortApiKeys('cost')"
-                    >
-                      (费用
-                      <i
-                        v-if="apiKeysSortBy === 'cost'"
-                        :class="[
-                          'fas',
-                          apiKeysSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
-                          'ml-1'
-                        ]"
-                      />
-                      <i v-else class="fas fa-sort ml-1 text-gray-400" />)
-                    </span>
+                    <div class="flex items-center gap-2">
+                      <span>使用统计</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('dailyCost')"
+                      >
+                        今日费用
+                        <i
+                          v-if="apiKeysSortBy === 'dailyCost'"
+                          :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>
+                      <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
                     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
                             >
                           </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">
                             <span class="text-gray-600 dark:text-gray-400">最后使用</span>
                             <span class="font-medium text-gray-700 dark:text-gray-300">{{
@@ -1590,8 +1613,8 @@ const apiKeyStatsTimeRange = ref('today')
 const activeTab = ref('active')
 const deletedApiKeys = ref([])
 const deletedApiKeysLoading = ref(false)
-const apiKeysSortBy = ref('')
-const apiKeysSortOrder = ref('asc')
+const apiKeysSortBy = ref('dailyCost')
+const apiKeysSortOrder = ref('desc')
 const expandedApiKeys = ref({})
 const apiKeyModelStats = ref({})
 const apiKeyDateFilters = ref({})
@@ -1696,9 +1719,12 @@ const sortedApiKeys = computed(() => {
     if (apiKeysSortBy.value === 'status') {
       aVal = a.isActive ? 1 : 0
       bVal = b.isActive ? 1 : 0
-    } else if (apiKeysSortBy.value === 'cost') {
-      aVal = parseFloat(calculateApiKeyCost(a.usage).replace('$', ''))
-      bVal = parseFloat(calculateApiKeyCost(b.usage).replace('$', ''))
+    } else if (apiKeysSortBy.value === 'dailyCost') {
+      aVal = a.dailyCost || 0
+      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') {
       aVal = aVal ? new Date(aVal).getTime() : 0
       bVal = bVal ? new Date(bVal).getTime() : 0
@@ -1883,13 +1909,6 @@ const formatNumber = (num) => {
   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) => {
   if (!accountId) return '未知账户'