feat: 升级 Ant Design 6 并实现主题切换功能
- 升级 antd 从 5.24.9 到 6.3.5,@ant-design/icons 从 5.6.1 到 6.1.1 - 新增 ThemeContext 和 ThemeToggle 组件,支持明暗主题切换 - 移除自定义 SCSS 样式,采用 Ant Design 主题系统 - 测试环境从 jsdom 切换到 happy-dom,提升测试性能 - 更新 AppLayout、ModelForm、ProviderForm 以适配新主题系统
This commit is contained in:
@@ -133,37 +133,45 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
|
||||
|
||||
### Requirement: 使用无组件库的最小 UI
|
||||
|
||||
前端 SHALL 使用 Ant Design 5 作为 UI 组件库。
|
||||
前端 SHALL 使用 Ant Design 6 作为 UI 组件库。
|
||||
|
||||
#### Scenario: Ant Design 组件使用
|
||||
|
||||
- **WHEN** 实现前端
|
||||
- **THEN** 它 SHALL 使用 Ant Design 5 组件(Table、Form、Modal、Menu、Tag、Popconfirm、DatePicker、Button、Select 等)
|
||||
- **THEN** 它 SHALL 使用 Ant Design 6 组件(Table、Form、Modal、Menu、Tag、Popconfirm、DatePicker、Button、Select 等)
|
||||
- **THEN** 它 SHALL 使用 @ant-design/icons 提供图标
|
||||
- **THEN** 图标 SHALL 优先使用图标库中已有的图标
|
||||
|
||||
#### Scenario: Ant Design 默认主题
|
||||
#### Scenario: Ant Design 主题支持
|
||||
|
||||
- **WHEN** 配置 Ant Design 主题
|
||||
- **THEN** 前端 SHALL 使用 Ant Design 默认主题,不进行自定义主题色配置
|
||||
- **THEN** 前端 SHALL NOT 支持暗色模式切换
|
||||
- **THEN** 前端 SHALL 支持亮色和暗色模式切换
|
||||
- **THEN** 前端 SHALL 使用 Ant Design v6 的 theme.darkAlgorithm 和 theme.defaultAlgorithm
|
||||
- **THEN** 前端 SHALL 通过 ConfigProvider 动态切换主题
|
||||
|
||||
### Requirement: SCSS 样式
|
||||
### Requirement: 样式体系
|
||||
|
||||
前端样式 SHALL 全部使用 SCSS,禁止使用纯 CSS 文件。
|
||||
前端样式 SHALL 优先使用 Ant Design 样式体系,SCSS 作为补充工具。
|
||||
|
||||
#### Scenario: 样式文件规范
|
||||
#### Scenario: Ant Design 样式优先
|
||||
|
||||
- **WHEN** 编写样式
|
||||
- **THEN** 前端 SHALL 使用 SCSS(*.scss 文件)
|
||||
- **WHEN** 实现组件样式
|
||||
- **THEN** 前端 SHALL 优先使用 Ant Design 组件的 style prop
|
||||
- **THEN** 前端 SHALL 优先使用 Ant Design v6 的语义化样式(classNames 和 styles props)
|
||||
- **THEN** 前端 SHALL 使用 Ant Design Layout 组件处理布局
|
||||
|
||||
#### Scenario: SCSS 补充使用
|
||||
|
||||
- **WHEN** Ant Design 样式体系无法满足需求
|
||||
- **THEN** 前端 MAY 使用 SCSS 作为补充
|
||||
- **THEN** SCSS 文件 SHALL 使用 *.module.scss(SCSS Modules)
|
||||
- **THEN** 前端 SHALL NOT 使用纯 CSS 文件(*.css)
|
||||
- **THEN** 前端 SHALL NOT 使用 CSS-in-JS 方案
|
||||
|
||||
#### Scenario: SCSS Modules 使用
|
||||
#### Scenario: 移除冗余 SCSS
|
||||
|
||||
- **WHEN** 编写组件级样式
|
||||
- **THEN** 前端 SHALL 使用 SCSS Modules(*.module.scss)
|
||||
- **THEN** 全局样式仅保留 index.scss 做 reset 和 CSS variables
|
||||
- **WHEN** SCSS 文件仅实现 Ant Design 已有的功能
|
||||
- **THEN** 前端 SHALL 移除该 SCSS 文件
|
||||
- **THEN** 前端 SHALL 使用 Ant Design 内置功能替代
|
||||
|
||||
### Requirement: 提供导航
|
||||
|
||||
|
||||
Reference in New Issue
Block a user