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:
@@ -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 具有描述性
|
||||
|
||||
Reference in New Issue
Block a user