feat: 优化 API Keys 页面的分组显示和使用统计展示

- 修复分组调度显示,正确展示分组名称
- 重新设计使用统计列,添加进度条显示每日费用和窗口限制
- 创建使用详情弹窗组件,展示完整统计信息
- 优化时间窗口限制显示,支持请求次数和Token双维度进度条
- 改进移动端自适应布局
- 修复 ESLint 警告,提升代码质量

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-04 10:31:59 +08:00
parent e95ca78942
commit 2ceac331dd
6 changed files with 733 additions and 240 deletions

View File

@@ -183,7 +183,9 @@
class="form-input flex-1"
required
>
<option value="">请选择分组</option>
<option value="">
请选择分组
</option>
<option
v-for="group in filteredGroups"
:key="group.id"
@@ -191,14 +193,19 @@
>
{{ group.name }} ({{ group.memberCount || 0 }} 个成员)
</option>
<option value="__new__">+ 新建分组</option>
<option value="__new__">
+ 新建分组
</option>
</select>
<button
type="button"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
@click="refreshGroups"
>
<i class="fas fa-sync-alt" :class="{ 'animate-spin': loadingGroups }" />
<i
class="fas fa-sync-alt"
:class="{ 'animate-spin': loadingGroups }"
/>
</button>
</div>
</div>
@@ -561,7 +568,9 @@
class="form-input flex-1"
required
>
<option value="">请选择分组</option>
<option value="">
请选择分组
</option>
<option
v-for="group in filteredGroups"
:key="group.id"
@@ -569,14 +578,19 @@
>
{{ group.name }} ({{ group.memberCount || 0 }} 个成员)
</option>
<option value="__new__">+ 新建分组</option>
<option value="__new__">
+ 新建分组
</option>
</select>
<button
type="button"
class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
@click="refreshGroups"
>
<i class="fas fa-sync-alt" :class="{ 'animate-spin': loadingGroups }" />
<i
class="fas fa-sync-alt"
:class="{ 'animate-spin': loadingGroups }"
/>
</button>
</div>
</div>

View File

@@ -38,7 +38,9 @@
v-if="showCreateForm"
class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200"
>
<h4 class="text-lg font-semibold text-gray-900 mb-4">创建新分组</h4>
<h4 class="text-lg font-semibold text-gray-900 mb-4">
创建新分组
</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">分组名称 *</label>
@@ -113,7 +115,9 @@
class="text-center py-8"
>
<div class="loading-spinner-lg mx-auto mb-4" />
<p class="text-gray-500">加载中...</p>
<p class="text-gray-500">
加载中...
</p>
</div>
<div
@@ -121,7 +125,9 @@
class="text-center py-8 bg-gray-50 rounded-lg"
>
<i class="fas fa-layer-group text-4xl text-gray-300 mb-4" />
<p class="text-gray-500">暂无分组</p>
<p class="text-gray-500">
暂无分组
</p>
</div>
<div
@@ -135,8 +141,12 @@
>
<div class="flex items-start justify-between mb-3">
<div class="flex-1">
<h4 class="font-semibold text-gray-900">{{ group.name }}</h4>
<p class="text-sm text-gray-500 mt-1">{{ group.description || '暂无描述' }}</p>
<h4 class="font-semibold text-gray-900">
{{ group.name }}
</h4>
<p class="text-sm text-gray-500 mt-1">
{{ group.description || '暂无描述' }}
</p>
</div>
<div class="flex items-center gap-2 ml-4">
<span
@@ -194,7 +204,9 @@
>
<div class="modal-content w-full max-w-lg p-4 sm:p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-gray-900">编辑分组</h3>
<h3 class="text-lg font-bold text-gray-900">
编辑分组
</h3>
<button
class="text-gray-400 hover:text-gray-600 transition-colors"
@click="cancelEdit"