refactor: 优化 API Keys 管理界面布局和用户体验

主要改进:
- 移除 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 <noreply@anthropic.com>
This commit is contained in:
Edric Li
2025-09-08 15:37:16 +08:00
parent bd2f25dc19
commit bed7b7f000
2 changed files with 266 additions and 288 deletions

View File

@@ -3,7 +3,7 @@
<!-- 当前图标显示 -->
<div
class="icon-display"
:class="{ 'has-icon': currentIcon }"
:class="[{ 'has-icon': currentIcon }, `size-${size}`]"
:title="currentIcon ? '点击更换图标' : '点击选择图标'"
@click="showPicker = true"
>
@@ -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;
}