1
0

Merge branch 'dev-frontend-optimization'

This commit is contained in:
2026-04-22 13:31:37 +08:00
26 changed files with 154 additions and 175 deletions

View File

@@ -15,7 +15,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 加载供应商管理页面
- **THEN** 前端 SHALL 使用 TDesign Table 显示所有已配置供应商
- **THEN** 每个供应商 SHALL 显示 name、base_url 和 enabled 状态(使用 Tag 组件)
- **THEN** API Key SHALL 被脱敏显示(掩码处理)
- **THEN** API Key SHALL 显示完整值(不进行掩码处理)
- **THEN** 表格 SHALL 支持展开行以显示关联模型
#### Scenario: 表格列宽约束
@@ -23,7 +23,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 渲染供应商表格
- **THEN** 名称列 SHALL 固定宽度 180px 并启用 ellipsis超长文本显示省略号hover 显示 Tooltip
- **THEN** Base URL 列 SHALL 不设固定宽度(浮动填充剩余空间)并启用 ellipsis + Tooltip
- **THEN** API Key 列 SHALL 固定宽度 120px 并启用 ellipsis
- **THEN** API Key 列 SHALL 不设固定宽度(浮动填充剩余空间)并启用 ellipsis + Tooltip
- **THEN** 状态列 SHALL 固定宽度 80px
- **THEN** 操作列 SHALL 固定宽度 160px
@@ -37,18 +37,28 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户点击"添加供应商"按钮
- **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示输入表单
- **THEN** 表单 SHALL 包含 id、name、api_key、base_url 字段,带校验规则
- **THEN** Dialog SHALL 禁用蒙版点击关闭closeOnOverlayClick={false}
- **THEN** Dialog SHALL 禁用 ESC 键关闭closeOnEscKeydown={false}
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交包含有效数据的表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
- **THEN** 失败 SHALL 显示错误提示
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示MessagePlugin.error
#### Scenario: 编辑现有供应商
- **WHEN** 用户点击供应商的"编辑"按钮
- **THEN** 前端 SHALL 使用 TDesign Dialog + Form 显示预填充数据的表单
- **THEN** API Key SHALL 回显当前值(完整值)
- **THEN** API Key 输入框 SHALL 为普通文本输入(不使用 password 类型)
- **THEN** API Key 字段 SHALL 始终为必填
- **THEN** Dialog SHALL 禁用蒙版点击关闭closeOnOverlayClick={false}
- **THEN** Dialog SHALL 禁用 ESC 键关闭closeOnEscKeydown={false}
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交包含更新数据的表单
- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新供应商列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示MessagePlugin.error
#### Scenario: 删除供应商
@@ -81,19 +91,25 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **THEN** provider_id SHALL 自动关联当前供应商
- **THEN** 供应商选择 SHALL 使用 `options` 属性
- **THEN** 创建表单 SHALL NOT 包含 ID 输入框(后端自动生成 UUID
- **THEN** Dialog SHALL 禁用蒙版点击关闭closeOnOverlayClick={false}
- **THEN** Dialog SHALL 禁用 ESC 键关闭closeOnEscKeydown={false}
- **WHEN** 用户提交表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 成功后 SHALL 刷新模型列表
- **THEN** 前端 SHALL 通过 mutateAsync 调用创建 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示MessagePlugin.error
#### Scenario: 编辑模型
- **WHEN** 用户点击模型的"编辑"
- **THEN** 前端 SHALL 显示编辑表单
- **THEN** 编辑表单 SHALL 显示统一模型 ID(只读)
- **THEN** ID 字段 SHALL 禁用状态
- **THEN** 编辑表单 SHALL NOT 包含统一模型 ID 字段
- **THEN** Dialog SHALL 禁用蒙版点击关闭closeOnOverlayClick={false}
- **THEN** Dialog SHALL 禁用 ESC 键关闭closeOnEscKeydown={false}
- **THEN** Dialog SHALL 设置 lazy={false} 禁用懒加载
- **WHEN** 用户提交表单
- **THEN** 前端 SHALL 通过 useMutation 调用更新 API
- **THEN** 成功后 SHALL 刷新模型列表
- **THEN** 前端 SHALL 通过 mutateAsync 调用更新 API
- **THEN** 成功后 SHALL 关闭 Dialog 并刷新模型列表
- **THEN** 失败 SHALL 保持 Dialog 打开并显示错误提示MessagePlugin.error
#### Scenario: 删除模型
@@ -124,24 +140,17 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 显示统一模型 ID
前端 SHALL 在所有显示模型的地方使用统一模型 ID。
前端 SHALL 在所有显示模型的地方使用统一模型 ID。
#### Scenario: 模型表格显示统一 ID 列
#### Scenario: 模型表格显示统一 ID 列
- **WHEN** 渲染模型表格
- **THEN** 表格 SHALL 包含统一模型 ID 列
- **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
- **THEN** 统一模型 ID 列 SHALL 启用 ellipsis超长文本显示省略号hover 显示 Tooltip
- **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
- **WHEN** 渲染模型表格
- **THEN** 表格 SHALL 包含统一模型 ID 列
- **THEN** 统一模型 ID 列 SHALL 显示 `provider_id/model_name` 格式
- **THEN** 统一模型 ID 列 SHALL 启用 ellipsis超长文本显示省略号hover 显示 Tooltip
- **THEN** 统一模型 ID 列 SHALL 固定宽度 250px
#### Scenario: 编辑模型显示统一 ID
- **WHEN** 编辑模型表单
- **THEN** 表单 SHALL 显示统一模型 ID 字段
- **THEN** 统一模型 ID 字段 SHALL 为只读disabled
- **THEN** 统一模型 ID 字段 SHALL 显示格式说明 "格式provider_id/model_name"
#### Scenario: 统一模型 ID 降级显示
#### Scenario: 统一模型 ID 降级显示
- **WHEN** 后端未返回 unified_id 字段
- **THEN** 前端 SHALL 拼接 providerId 和 modelName 显示
@@ -333,6 +342,23 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户使用浏览器后退按钮
- **THEN** 前端 SHALL 正确导航到上一个页面
### Requirement: React 19 适配器
前端 SHALL 导入 TDesign react-19-adapter 以支持 React 19。
#### Scenario: 导入适配器
- **WHEN** 应用启动
- **THEN** main.tsx SHALL 导入 'tdesign-react/es/_util/react-19-adapter'
- **THEN** MessagePlugin、DialogPlugin 等插件式调用 SHALL 正常工作
#### Scenario: 错误提示显示
- **WHEN** API 请求失败
- **THEN** MessagePlugin.error SHALL 正确渲染错误提示
- **THEN** 错误提示 SHALL 显示在页面顶部placement: top
- **THEN** 错误提示 SHALL 在 3 秒后自动消失
### Requirement: 使用 React 和 TypeScript
前端 SHALL 使用 React 和 TypeScript 实现,遵循 strict 模式。

View File

@@ -37,7 +37,7 @@
- **WHEN** 向 `/api/providers` 发送 POST 请求携带有效的供应商数据id, name, api_key, base_url, protocol
- **THEN** 网关 SHALL 在数据库中创建新的供应商记录
- **THEN** 网关 SHALL 返回创建的供应商,状态码为 201
- **THEN** 网关 SHALL 返回创建的供应商api_key 为完整值),状态码为 201
- **THEN** 供应商 SHALL 默认启用
- **THEN** protocol 字段 SHALL 为必填项,值为 "openai" 或 "anthropic"
@@ -99,8 +99,8 @@
- **WHEN** 向 `/api/providers` 发送 GET 请求
- **THEN** 网关 SHALL 返回所有供应商的列表
- **THEN** 每个供应商 SHALL 包含 id, name, api_key已掩码, base_url, protocol, enabled, created_at, updated_at
- **THEN** api_key SHALL 被掩码(仅显示最后 4 个字符
- **THEN** 每个供应商 SHALL 包含 id, name, api_key完整值, base_url, protocol, enabled, created_at, updated_at
- **THEN** api_key SHALL 返回完整值(不进行掩码处理
**变更说明:** 数据访问从 config 包迁移到 ProviderRepository。API 接口保持不变。
@@ -113,7 +113,7 @@
- **WHEN** 向 `/api/providers/:id` 发送 GET 请求,携带有效的供应商 ID
- **THEN** 网关 SHALL 返回供应商详情
- **THEN** SHALL 包含 protocol 字段
- **THEN** api_key SHALL 被掩码
- **THEN** api_key SHALL 返回完整值(不进行掩码处理)
#### Scenario: 获取不存在的供应商
@@ -130,7 +130,7 @@
- **WHEN** 向 `/api/providers/:id` 发送 PUT 请求,携带有效的供应商数据
- **THEN** 网关 SHALL 更新数据库中的供应商记录
- **THEN** 网关 SHALL 返回更新后的供应商
- **THEN** 网关 SHALL 返回更新后的供应商api_key 为完整值)
- **THEN** 更新 SHALL 支持修改 protocol 字段
**变更说明:** 通过 ProviderService 和 ProviderRepository 实现。API 接口保持不变。