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>