style: 修复前端 UI 细节问题
- 供应商/模型/统计表格增加列宽约束和 ellipsis 省略号 - 修复主题切换按钮在暗色侧边栏中不可见 - 表格添加 scroll 属性防止窄屏溢出 - 自定义表格空状态提示文案
This commit is contained in:
@@ -17,6 +17,21 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
|
||||
- **THEN** 每个供应商 SHALL 显示 name、base_url 和 enabled 状态(使用 Tag 组件)
|
||||
- **THEN** API Key SHALL 被脱敏显示(掩码处理)
|
||||
- **THEN** 表格 SHALL 支持展开行以显示关联模型
|
||||
- **THEN** 表格 SHALL 设置 `scroll={{ x: 'max-content' }}` 防止窄屏溢出
|
||||
|
||||
#### Scenario: 表格列宽约束
|
||||
|
||||
- **WHEN** 渲染供应商表格
|
||||
- **THEN** 名称列 SHALL 固定宽度 180px 并启用 ellipsis(超长文本显示省略号,hover 显示 Tooltip)
|
||||
- **THEN** Base URL 列 SHALL 不设固定宽度(浮动填充剩余空间)并启用 ellipsis + Tooltip
|
||||
- **THEN** API Key 列 SHALL 固定宽度 120px 并启用 ellipsis
|
||||
- **THEN** 状态列 SHALL 固定宽度 80px
|
||||
- **THEN** 操作列 SHALL 固定宽度 160px
|
||||
|
||||
#### Scenario: 表格空状态
|
||||
|
||||
- **WHEN** 供应商列表为空
|
||||
- **THEN** 表格 SHALL 显示自定义空状态文案 "暂无供应商,点击上方按钮添加"
|
||||
|
||||
#### Scenario: 添加新供应商
|
||||
|
||||
@@ -53,6 +68,12 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
|
||||
- **WHEN** 展开供应商行
|
||||
- **THEN** 前端 SHALL 显示该供应商的模型列表
|
||||
- **THEN** 每个模型 SHALL 显示 model_name 和 enabled 状态
|
||||
- **THEN** 模型名称列 SHALL 启用 ellipsis(超长文本显示省略号,hover 显示 Tooltip)
|
||||
|
||||
#### Scenario: 模型表格空状态
|
||||
|
||||
- **WHEN** 模型列表为空
|
||||
- **THEN** 表格 SHALL 显示自定义空状态文案 "暂无模型,点击上方按钮添加"
|
||||
|
||||
#### Scenario: 为供应商添加模型
|
||||
|
||||
@@ -91,6 +112,20 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
|
||||
- **THEN** 前端 SHALL 显示请求趋势折线图
|
||||
- **THEN** 前端 SHALL 使用 Ant Design Table 显示统计数据
|
||||
- **THEN** 统计数据 SHALL 按供应商和模型显示请求计数
|
||||
- **THEN** 统计表格 SHALL 设置 `scroll={{ x: 'max-content' }}` 防止窄屏溢出
|
||||
|
||||
#### Scenario: 统计表格列宽约束
|
||||
|
||||
- **WHEN** 渲染统计表格
|
||||
- **THEN** 供应商列 SHALL 固定宽度 180px 并启用 ellipsis + Tooltip
|
||||
- **THEN** 模型列 SHALL 固定宽度 250px 并启用 ellipsis + Tooltip
|
||||
- **THEN** 日期列 SHALL 固定宽度 120px
|
||||
- **THEN** 请求数列 SHALL 固定宽度 100px 并右对齐
|
||||
|
||||
#### Scenario: 统计表格空状态
|
||||
|
||||
- **WHEN** 统计数据为空
|
||||
- **THEN** 表格 SHALL 显示自定义空状态文案 "暂无统计数据"
|
||||
|
||||
#### Scenario: 按供应商过滤统计
|
||||
|
||||
|
||||
@@ -67,6 +67,7 @@
|
||||
- **THEN** 前端 SHALL 在 Sider 底部显示主题切换按钮
|
||||
- **THEN** 按钮 SHALL 使用 Ant Design Button 组件(type="text")
|
||||
- **THEN** 按钮图标 SHALL 根据当前主题显示(亮色模式显示月亮图标,暗色模式显示太阳图标)
|
||||
- **THEN** 按钮颜色 SHALL 在暗色侧边栏中保持可见(使用 `rgba(255, 255, 255, 0.85)` 或等效浅色)
|
||||
|
||||
#### Scenario: 主题切换按钮交互
|
||||
|
||||
@@ -79,6 +80,7 @@
|
||||
- **WHEN** 侧边栏处于折叠状态
|
||||
- **THEN** 主题切换按钮 SHALL 保持可见且可点击
|
||||
- **THEN** 按钮 SHALL 仅显示图标(Tooltip 保持可用)
|
||||
- **THEN** 按钮颜色 SHALL 保持可见
|
||||
|
||||
### Requirement: 使用 React Context 管理主题状态
|
||||
|
||||
|
||||
Reference in New Issue
Block a user