From 8f43b9367be01160b87b5a423595fefa9ec891b6 Mon Sep 17 00:00:00 2001
From: Edric Li <edricli.dev@gmail.com>
Date: Sun, 7 Sep 2025 08:33:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96Excel=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=B8=93=E6=B3=A8=E7=94=A8?=
 =?UTF-8?q?=E9=87=8F=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化导出内容，仅包含用量相关数据
- 保留API Key名称和所有者信息
- 导出详细的分模型用量统计：
  * 今日各模型请求数、费用、输入/输出/总Token
  * 累计各模型请求数、费用、输入/输出/总Token
  * 根据时间筛选条件导出对应周期的模型统计
- 文件名包含时间筛选条件，便于识别数据范围
- 动态设置列宽，优化Excel显示效果
- 移除冗余的配置信息，专注核心用量数据

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/admin-spa/package-lock.json         | 106 ++++++++++++++++-
 web/admin-spa/package.json              |   3 +-
 web/admin-spa/src/views/ApiKeysView.vue | 151 ++++++++++++++++++++++++
 3 files changed, 258 insertions(+), 2 deletions(-)

diff --git a/web/admin-spa/package-lock.json b/web/admin-spa/package-lock.json
index 30b46f1e..d7e96011 100644
--- a/web/admin-spa/package-lock.json
+++ b/web/admin-spa/package-lock.json
@@ -15,7 +15,8 @@
         "element-plus": "^2.4.4",
         "pinia": "^2.1.7",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@playwright/test": "^1.55.0",
@@ -1366,6 +1367,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -1643,6 +1653,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
@@ -1710,6 +1733,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -1766,6 +1798,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2497,6 +2541,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4083,6 +4136,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
@@ -5126,6 +5191,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -5244,6 +5327,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/web/admin-spa/package.json b/web/admin-spa/package.json
index 4881e1b3..7496b966 100644
--- a/web/admin-spa/package.json
+++ b/web/admin-spa/package.json
@@ -18,7 +18,8 @@
     "element-plus": "^2.4.4",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 687a16db..e6f26c13 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -168,6 +168,18 @@
                 <span>{{ showCheckboxes ? '取消选择' : '选择' }}</span>
               </button>
 
+              <!-- 导出数据按钮 -->
+              <button
+                class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-gray-500 sm:w-auto"
+                @click="exportToExcel"
+              >
+                <div
+                  class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-emerald-500 to-green-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+                ></div>
+                <i class="fas fa-file-excel relative text-emerald-500" />
+                <span class="relative">导出数据</span>
+              </button>
+
               <!-- 批量编辑按钮 - 移到刷新按钮旁边 -->
               <button
                 v-if="selectedApiKeys.length > 0"
@@ -1754,6 +1766,7 @@ import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 import { useClientsStore } from '@/stores/clients'
 import { useAuthStore } from '@/stores/auth'
+import * as XLSX from 'xlsx'
 import CreateApiKeyModal from '@/components/apikeys/CreateApiKeyModal.vue'
 import EditApiKeyModal from '@/components/apikeys/EditApiKeyModal.vue'
 import RenewApiKeyModal from '@/components/apikeys/RenewApiKeyModal.vue'
@@ -3207,6 +3220,13 @@ const getWeeklyOpusCostProgressColor = (key) => {
   return 'bg-green-500'
 }
 
+// 获取总费用进度 - 暂时不用
+// const getTotalCostProgress = (key) => {
+//   if (!key.totalCostLimit || key.totalCostLimit === 0) return 0
+//   const percentage = ((key.totalCost || 0) / key.totalCostLimit) * 100
+//   return Math.min(percentage, 100)
+// }
+
 // 显示使用详情
 const showUsageDetails = (apiKey) => {
   selectedApiKeyForDetail.value = apiKey
@@ -3232,6 +3252,137 @@ const clearSearch = () => {
   currentPage.value = 1
 }
 
+// 导出数据到Excel
+const exportToExcel = () => {
+  try {
+    // 准备导出的数据 - 仅导出用量数据
+    const exportData = sortedApiKeys.value.map((key) => {
+      // 基础数据
+      const baseData = {
+        'API Key名称': key.name || '',
+        所有者: key.ownerDisplayName || '',
+
+        // 当前筛选时间段的统计
+        请求总数: getPeriodRequests(key),
+        '总费用($)': calculatePeriodCost(key).toFixed(4),
+        总Token数: getPeriodTokens(key),
+
+        // 今日统计
+        今日请求数: key.usage?.daily?.requests || 0,
+        '今日费用($)': (key.dailyCost || 0).toFixed(4),
+        今日Token数: key.usage?.daily?.totalTokens || 0,
+
+        // 累计总统计
+        累计总请求数: key.usage?.total?.requests || 0,
+        '累计总费用($)': (key.totalCost || 0).toFixed(4),
+        累计总Token数: key.usage?.total?.totalTokens || 0
+      }
+
+      // 添加分模型统计（如果有）
+      const modelStats = {}
+
+      // 处理每日模型统计
+      if (key.usage?.daily?.models) {
+        Object.entries(key.usage.daily.models).forEach(([model, stats]) => {
+          const modelName = model.replace(/[:/]/g, '_') // 处理模型名中的特殊字符
+          modelStats[`今日_${modelName}_请求数`] = stats.requests || 0
+          modelStats[`今日_${modelName}_费用($)`] = (stats.cost || 0).toFixed(4)
+          modelStats[`今日_${modelName}_输入Token`] = stats.inputTokens || 0
+          modelStats[`今日_${modelName}_输出Token`] = stats.outputTokens || 0
+          modelStats[`今日_${modelName}_总Token`] = stats.totalTokens || 0
+        })
+      }
+
+      // 处理总计模型统计
+      if (key.usage?.total?.models) {
+        Object.entries(key.usage.total.models).forEach(([model, stats]) => {
+          const modelName = model.replace(/[:/]/g, '_')
+          modelStats[`累计_${modelName}_请求数`] = stats.requests || 0
+          modelStats[`累计_${modelName}_费用($)`] = (stats.cost || 0).toFixed(4)
+          modelStats[`累计_${modelName}_输入Token`] = stats.inputTokens || 0
+          modelStats[`累计_${modelName}_输出Token`] = stats.outputTokens || 0
+          modelStats[`累计_${modelName}_总Token`] = stats.totalTokens || 0
+        })
+      }
+
+      // 处理筛选时间段的模型统计
+      if (globalDateFilter.preset === '7days' && key.usage?.weekly?.models) {
+        Object.entries(key.usage.weekly.models).forEach(([model, stats]) => {
+          const modelName = model.replace(/[:/]/g, '_')
+          modelStats[`本周_${modelName}_请求数`] = stats.requests || 0
+          modelStats[`本周_${modelName}_费用($)`] = (stats.cost || 0).toFixed(4)
+          modelStats[`本周_${modelName}_输入Token`] = stats.inputTokens || 0
+          modelStats[`本周_${modelName}_输出Token`] = stats.outputTokens || 0
+          modelStats[`本周_${modelName}_总Token`] = stats.totalTokens || 0
+        })
+      } else if (globalDateFilter.preset === '30days' && key.usage?.monthly?.models) {
+        Object.entries(key.usage.monthly.models).forEach(([model, stats]) => {
+          const modelName = model.replace(/[:/]/g, '_')
+          modelStats[`本月_${modelName}_请求数`] = stats.requests || 0
+          modelStats[`本月_${modelName}_费用($)`] = (stats.cost || 0).toFixed(4)
+          modelStats[`本月_${modelName}_输入Token`] = stats.inputTokens || 0
+          modelStats[`本月_${modelName}_输出Token`] = stats.outputTokens || 0
+          modelStats[`本月_${modelName}_总Token`] = stats.totalTokens || 0
+        })
+      }
+
+      return { ...baseData, ...modelStats }
+    })
+
+    // 创建工作簿
+    const ws = XLSX.utils.json_to_sheet(exportData)
+
+    // 动态设置列宽
+    const headers = Object.keys(exportData[0] || {})
+    const colWidths = headers.map((header) => {
+      if (header.includes('名称') || header.includes('所有者')) return { wch: 20 }
+      if (header.includes('费用')) return { wch: 15 }
+      if (header.includes('Token')) return { wch: 15 }
+      if (header.includes('请求')) return { wch: 12 }
+      return { wch: 15 }
+    })
+    ws['!cols'] = colWidths
+
+    // 创建工作簿
+    const wb = XLSX.utils.book_new()
+    XLSX.utils.book_append_sheet(wb, ws, '用量统计')
+
+    // 生成文件名（包含时间戳和筛选条件）
+    const now = new Date()
+    const timestamp =
+      now.getFullYear() +
+      String(now.getMonth() + 1).padStart(2, '0') +
+      String(now.getDate()).padStart(2, '0') +
+      '_' +
+      String(now.getHours()).padStart(2, '0') +
+      String(now.getMinutes()).padStart(2, '0') +
+      String(now.getSeconds()).padStart(2, '0')
+
+    let timeRangeLabel = ''
+    if (globalDateFilter.type === 'preset') {
+      const presetLabels = {
+        today: '今日',
+        '7days': '最近7天',
+        '30days': '最近30天',
+        all: '全部时间'
+      }
+      timeRangeLabel = presetLabels[globalDateFilter.preset] || globalDateFilter.preset
+    } else {
+      timeRangeLabel = '自定义时间'
+    }
+
+    const filename = `API_Keys_用量统计_${timeRangeLabel}_${timestamp}.xlsx`
+
+    // 导出文件
+    XLSX.writeFile(wb, filename)
+
+    showToast(`成功导出 ${exportData.length} 条API Key用量数据`, 'success')
+  } catch (error) {
+    console.error('导出失败:', error)
+    showToast('导出失败，请重试', 'error')
+  }
+}
+
 // 监听筛选条件变化，重置页码和选中状态
 // 监听筛选条件变化（不包括搜索），清空选中状态
 watch([selectedTagFilter, apiKeyStatsTimeRange], () => {