1
0

refactor: 迁移前端 antd 组件至 v6 规范 API,消除废弃用法

- 迁移静态 message 到 App.useApp() 模式,使 message 感知 ConfigProvider 上下文
- Button type/danger 迁移为 variant/color 新 API
- Space direction 迁移为 vertical 布尔属性
- Select.Option 子组件迁移为 options 属性
- AppLayout 硬编码颜色替换为 antd design token
- 优化 useThemeConfig:default/dark 改为静态导出,减少不必要的 hook 调用
- 同步更新 openspec 主规范文档
This commit is contained in:
2026-04-17 00:59:36 +08:00
parent 49818ed4d8
commit 6eeb38c15e
19 changed files with 121 additions and 96 deletions

View File

@@ -8,7 +8,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 提供供应商管理页面
前端 SHALL 使用 Ant Design 组件提供供应商管理页面。
前端 SHALL 使用 Ant Design 组件提供供应商管理页面,所有组件 SHALL 遵循 antd v6 API 规范
#### Scenario: 显示供应商列表
@@ -41,7 +41,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户提交包含有效数据的表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 成功后 SHALL 关闭 Modal 并刷新供应商列表
- **THEN** 失败 SHALL 使用 message.error() 提示
- **THEN** 失败 SHALL 使用 `App.useApp()` 提供的 `message` 实例显示错误提示
#### Scenario: 编辑现有供应商
@@ -61,7 +61,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 提供模型管理界面
前端 SHALL 在供应商页面展开行中提供模型管理。
前端 SHALL 在供应商页面展开行中提供模型管理,所有组件 SHALL 遵循 antd v6 API 规范
#### Scenario: 显示供应商的模型
@@ -80,6 +80,7 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户在展开行中点击"添加模型"
- **THEN** 前端 SHALL 显示 Ant Design Modal + Form
- **THEN** provider_id SHALL 自动关联当前供应商
- **THEN** 供应商选择 SHALL 使用 `options` 属性而非 `Select.Option` 子组件
- **WHEN** 用户提交表单
- **THEN** 前端 SHALL 通过 useMutation 调用创建 API
- **THEN** 成功后 SHALL 刷新模型列表
@@ -141,12 +142,12 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 优雅处理 API 错误
前端 SHALL 处理 API 错误并显示用户友好的消息。
前端 SHALL 处理 API 错误并显示用户友好的消息message 组件 SHALL 通过 `App.useApp()` 获取
#### Scenario: API 请求失败
- **WHEN** API 请求失败网络错误、4xx、5xx
- **THEN** 前端 SHALL 使用 Ant Design 的 message.error() 显示全局错误提示
- **THEN** 前端 SHALL 使用 `App.useApp()` 提供的 `message` 实例显示全局错误提示
- **THEN** 错误消息 SHALL 具有描述性
#### Scenario: 验证错误
@@ -187,21 +188,24 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
### Requirement: 使用无组件库的最小 UI
前端 SHALL 使用 Ant Design 6 作为 UI 组件库。
前端 SHALL 使用 Ant Design 6 作为 UI 组件库,所有组件 SHALL 使用 antd v6 推荐的 API
#### Scenario: Ant Design 组件使用
- **WHEN** 实现前端
- **THEN** SHALL 使用 Ant Design 6 组件Table、Form、Modal、Menu、Tag、Popconfirm、DatePicker、Button、Select 等)
- **THEN** 它 SHALL 使用 @ant-design/icons 提供图标
- **THEN** Button 组件 SHALL 使用 `variant``color` 属性替代已废弃的 `type`link/text/dashed`danger` 属性
- **THEN** Button `type="link"` SHALL 替换为 `variant="link"`
- **THEN** Button `danger` 属性 SHALL 替换为 `color="danger"`
- **THEN** Space 组件 SHALL 使用 `vertical` 布尔属性替代已废弃的 `direction` 属性
- **THEN** Select 组件 SHALL 使用 `options` 属性替代 `Select.Option` 子组件
- **THEN** 图标 SHALL 优先使用图标库中已有的图标
#### Scenario: Ant Design 主题支持
#### Scenario: App 组件包裹
- **WHEN** 配置 Ant Design 主题
- **THEN** 前端 SHALL 支持亮色和暗色模式切换
- **THEN** 前端 SHALL 使用 Ant Design v6 的 theme.darkAlgorithm 和 theme.defaultAlgorithm
- **THEN** 前端 SHALL 通过 ConfigProvider 动态切换主题
- **WHEN** 应用初始化
- **THEN** `App.tsx` SHALL 在 `ConfigProvider` 内部使用 Ant Design `<App>` 组件包裹应用
- **THEN** hooks 中 SHALL 使用 `App.useApp()` 获取 `message` 实例
- **THEN** `message` 实例 SHALL NOT 通过静态 `import { message } from 'antd'` 获取
### Requirement: 样式体系
@@ -351,10 +355,10 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
- **WHEN** 用户执行创建、更新或删除操作
- **THEN** 前端 SHALL 使用 TanStack Query 的 useMutation hook
- **THEN** 操作成功后 SHALL 自动失效相关查询缓存
- **THEN** 操作失败 SHALL 使用 Ant Design message.error() 显示错误提示
- **THEN** 操作失败 SHALL 使用 `App.useApp()` 提供的 `message` 实例显示错误提示
#### Scenario: 错误提示
- **WHEN** API 请求失败网络错误、4xx、5xx
- **THEN** 前端 SHALL 使用 Ant Design 的 message.error() 显示全局错误提示
- **THEN** 前端 SHALL 使用 `App.useApp()` 提供的 `message` 实例显示全局错误提示
- **THEN** 错误消息 SHALL 具有描述性