From bed7b7f00093c5d0e109ef929ede6a263e3bdec1 Mon Sep 17 00:00:00 2001 From: Edric Li Date: Mon, 8 Sep 2025 15:37:16 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20API=20Keys=20?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 主要改进： - 移除 API Key 图标功能，简化界面设计 - 新增独立的"所属账号"列，提高信息层次清晰度 - 统一所有数据列字体大小为 13px，改善可读性 - 优化列宽度分配：名称(14%)、状态(6%)、操作(27%)等 - 调整列显示顺序：费用 → Token → 请求数，更符合逻辑 - 费用显示精度从4位调整为2位小数 - 同步优化已删除 API Keys 表格布局 - 简化 Token 列标题（去掉"数"字） 技术细节： - 使用内联样式统一字体大小 - 保持活跃和已删除表格的一致性 - 清理冗余代码，减少约 30 行 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../src/components/common/IconPicker.vue | 14 +- web/admin-spa/src/views/ApiKeysView.vue | 540 ++++++++---------- 2 files changed, 266 insertions(+), 288 deletions(-) diff --git a/web/admin-spa/src/components/common/IconPicker.vue b/web/admin-spa/src/components/common/IconPicker.vue index 253f2fe2..d3628591 100644 --- a/web/admin-spa/src/components/common/IconPicker.vue +++ b/web/admin-spa/src/components/common/IconPicker.vue @@ -3,7 +3,7 @@
@@ -757,6 +757,18 @@ const applyCropAndSave = () => { transition: all 0.2s; } +.icon-display.size-small { + width: 24px; + height: 24px; + border-radius: 4px; +} + +.icon-display.size-large { + width: 40px; + height: 40px; + border-radius: 8px; +} + .dark .icon-display { background: #374151; } diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue index 22d90d91..25e30f3b 100644 --- a/web/admin-spa/src/views/ApiKeysView.vue +++ b/web/admin-spa/src/views/ApiKeysView.vue @@ -86,7 +86,7 @@ range-separator="至" size="small" start-placeholder="开始日期" - style="width: 320px" + style="width: 320px; height: 38px" type="datetimerange" :unlink-panels="false" value-format="YYYY-MM-DD HH:mm:ss" @@ -253,7 +253,7 @@
名称 @@ -267,13 +267,18 @@ /> + + 所属账号 + 标签 状态 @@ -288,22 +293,7 @@ - 请求数 - - - - 费用 @@ -318,10 +308,10 @@ - Token数 + Token + + 请求数 + + + 创建时间 @@ -363,7 +368,7 @@ 过期时间 @@ -378,7 +383,7 @@ 操作 @@ -401,212 +406,94 @@
-
- - -
- -
- {{ key.name }} -
- -
- - - - {{ - getClaudeBindingInfo(key) - .replace(/^🔒\s*专属-/, '') - .replace(/^⚠️\s*/, '') - }} - - - - - {{ - getClaudeBindingInfo(key) - .replace(/^🔒\s*专属-/, '') - .replace(/^⚠️\s*/, '') - }} - - - - - {{ getClaudeBindingInfo(key) }} - - - - - {{ - getGeminiBindingInfo(key) - .replace(/^🔒\s*专属-/, '') - .replace(/^⚠️\s*/, '') - }} - - - - - {{ getGeminiBindingInfo(key) }} - - - - - {{ - getOpenAIBindingInfo(key) - .replace(/^🔒\s*专属-/, '') - .replace(/^⚠️\s*/, '') - }} - - - - - {{ getOpenAIBindingInfo(key) }} - - - - - {{ - getBedrockBindingInfo(key) - .replace(/^🔒\s*专属-/, '') - .replace(/^⚠️\s*/, '') - }} - - - - - {{ getBedrockBindingInfo(key) }} - - - - - 共享池 - -
-
-
- -
- -
- - - Claude - - - {{ getClaudeBindingInfo(key) }} - -
- -
- - - Gemini - - - {{ getGeminiBindingInfo(key) }} - -
- -
- - - OpenAI - - - {{ getOpenAIBindingInfo(key) }} - -
- -
- - - Bedrock - - - {{ getBedrockBindingInfo(key) }} - -
+ +
+ {{ key.name }}
{{ key.ownerDisplayName }}
+ + +
+ +
+ + + Claude + + + {{ getClaudeBindingInfo(key) }} + +
+ +
+ + + Gemini + + + {{ getGeminiBindingInfo(key) }} + +
+ +
+ + + OpenAI + + + {{ getOpenAIBindingInfo(key) }} + +
+ +
+ + + Bedrock + + + {{ getBedrockBindingInfo(key) }} + +
+ +
+ + 共享池 +
+
+ +
- - -
- - {{ formatNumber(getPeriodRequests(key)) }} - - 次 -
- - +
- - ${{ getPeriodCost(key).toFixed(4) }} + + ${{ getPeriodCost(key).toFixed(2) }} @@ -714,40 +595,61 @@
- +
- + {{ formatTokenCount(getPeriodTokens(key)) }}
+ + +
+ + {{ formatNumber(getPeriodRequests(key)) }} + + 次 +
+ {{ formatLastUsed(key.lastUsedAt) }} - 从未使用 + 从未使用 {{ new Date(key.createdAt).toLocaleDateString() }} - +
- + 未激活 ({{ key.activationDays || 30 }}天) @@ -755,22 +657,25 @@ - + 已过期 - + {{ formatExpireDate(key.expiresAt) }} {{ formatExpireDate(key.expiresAt) }} @@ -780,14 +685,15 @@ - + 永不过期
- +
+ + +
+ +
+ + + Claude OAuth + +
+ +
+ + + Claude Console + +
+ +
+ + + Gemini + +
+ +
+ + 共享池 +
+
+ + -
+
- + 管理员 - + {{ key.userUsername }} - + 未知
+ {{ formatDate(key.createdAt) }} + -
+
- + {{ key.deletedBy }} - + {{ key.deletedBy }} - + {{ key.deletedBy }}
+ {{ formatDate(key.deletedAt) }} + + + + ${{ (key.usage?.total?.cost || 0).toFixed(2) }} + + + + + + {{ formatTokenCount(key.usage?.total?.tokens || 0) }} + + - +
- + {{ formatNumber(key.usage?.total?.requests || 0) }} 次
- - - - ${{ (key.usage?.total?.cost || 0).toFixed(4) }} - - - - - - {{ formatTokenCount(key.usage?.total?.tokens || 0) }} - - + - + {{ formatLastUsed(key.lastUsedAt) }} - 从未使用 + 从未使用
@@ -3418,7 +3384,7 @@ const exportToExcel = () => { 名称: key.name || '', 标签: key.tags && key.tags.length > 0 ? key.tags.join(', ') : '无', 请求总数: periodRequests, - '总费用($)': periodCost.toFixed(4), + '总费用($)': periodCost.toFixed(2), Token数: formatTokenCount(periodTokens), 输入Token: formatTokenCount(periodInputTokens), 输出Token: formatTokenCount(periodOutputTokens), @@ -3452,7 +3418,7 @@ const exportToExcel = () => { modelName = modelName.replace(/[:/]/g, '_') modelStats[`${modelName}_请求数`] = stats.requests || 0 - modelStats[`${modelName}_费用($)`] = (stats.cost || 0).toFixed(4) + modelStats[`${modelName}_费用($)`] = (stats.cost || 0).toFixed(2) modelStats[`${modelName}_Token`] = formatTokenCount(stats.totalTokens || 0) modelStats[`${modelName}_输入Token`] = formatTokenCount(stats.inputTokens || 0) modelStats[`${modelName}_输出Token`] = formatTokenCount(stats.outputTokens || 0)