feat: API Keys图标系统和UI优化

主要功能增强:
- 实现API Key自定义图标功能,支持图片上传、裁剪和智能压缩
- 新增IconPicker组件,提供内置图标选择和图片上传功能
- 支持固定尺寸裁剪区域,可拖拽定位选择头像区域
- 智能图片压缩:PNG保留透明度,JPEG用于不透明图片

UI/UX改进:
- 优化表格布局:移除账号列,在名称下方显示账号绑定信息
- 调整行高和字体大小,提升信息密度
- 最后使用时间改为相对时间显示,悬浮显示具体时间
- 过期时间编辑改为点击文本触发,带悬浮下划线效果
- 更新默认API Key图标为蓝色渐变设计
- 修复表格悬浮偏移和横向滚动条问题
- 将"TOKEN 数量"改为"Token数"

后端支持:
- apiKeyService增加icon字段持久化
- admin路由增加图标数据处理和验证

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Edric Li
2025-09-07 11:41:22 +08:00
parent fc5c60a9b4
commit 8c9d6381f3
6 changed files with 1313 additions and 207 deletions

View File

@@ -36,7 +36,8 @@ class ApiKeyService {
weeklyOpusCostLimit = 0,
tags = [],
activationDays = 0, // 新增激活后有效天数0表示不使用此功能
expirationMode = 'fixed' // 新增:过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
expirationMode = 'fixed', // 新增:过期模式 'fixed'(固定时间) 或 'activation'(首次使用后激活)
icon = '' // 新增图标base64编码
} = options
// 生成简单的API Key (64字符十六进制)
@@ -78,7 +79,8 @@ class ApiKeyService {
expiresAt: expirationMode === 'fixed' ? expiresAt || '' : '', // 固定模式才设置过期时间
createdBy: options.createdBy || 'admin',
userId: options.userId || '',
userUsername: options.userUsername || ''
userUsername: options.userUsername || '',
icon: icon || '' // 新增图标base64编码
}
// 保存API Key数据并建立哈希映射
@@ -410,7 +412,8 @@ class ApiKeyService {
'tags',
'userId', // 新增用户ID所有者变更
'userUsername', // 新增:用户名(所有者变更)
'createdBy' // 新增:创建者(所有者变更)
'createdBy', // 新增:创建者(所有者变更)
'icon' // 新增图标base64编码
]
const updatedData = { ...keyData }