Files

lanyuanxiaoyao 47ecbadc7c 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 以适配新主题系统

2026-04-16 13:32:57 +08:00

3.9 KiB

Raw Blame History

主题切换

Purpose

提供亮色/暗色模式切换功能，允许用户自定义界面主题并持久化偏好。

Requirements

Requirement: 提供主题切换功能

前端 SHALL 提供亮色/暗色模式切换功能，允许用户自定义界面主题。

Scenario: 初始加载默认主题

WHEN 用户首次访问前端应用
THEN 前端 SHALL 使用亮色模式作为默认主题
THEN 前端 SHALL 应用 Ant Design defaultAlgorithm

Scenario: 切换到暗色模式

WHEN 用户点击主题切换按钮（当前为亮色模式）
THEN 前端 SHALL 切换到暗色模式
THEN 前端 SHALL 应用 Ant Design darkAlgorithm
THEN 所有 Ant Design 组件 SHALL 自动应用暗色主题
THEN 主题切换按钮图标 SHALL 从月亮图标变为太阳图标

Scenario: 切换到亮色模式

WHEN 用户点击主题切换按钮（当前为暗色模式）
THEN 前端 SHALL 切换到亮色模式
THEN 前端 SHALL 应用 Ant Design defaultAlgorithm
THEN 所有 Ant Design 组件 SHALL 自动应用亮色主题
THEN 主题切换按钮图标 SHALL 从太阳图标变为月亮图标

Requirement: 持久化主题偏好

前端 SHALL 使用 localStorage 持久化用户的主题偏好。

Scenario: 保存主题偏好

WHEN 用户切换主题
THEN 前端 SHALL 将主题模式保存到 localStorage
THEN localStorage 键名 SHALL 为 'theme-mode'
THEN 值 SHALL 为 'light' 或 'dark'

Scenario: 恢复主题偏好

WHEN 用户重新访问前端应用
THEN 前端 SHALL 从 localStorage 读取 'theme-mode'
THEN 如果存在有效值，前端 SHALL 应用保存的主题
THEN 如果不存在或值无效，前端 SHALL 使用默认亮色模式

Scenario: 刷新页面保持主题

WHEN 用户在暗色模式下刷新浏览器
THEN 前端 SHALL 保持暗色模式
WHEN 用户在亮色模式下刷新浏览器
THEN 前端 SHALL 保持亮色模式

Requirement: 提供主题切换 UI

前端 SHALL 在布局 Header 中提供主题切换按钮。

Scenario: 显示主题切换按钮

WHEN 渲染 AppLayout Header
THEN 前端 SHALL 在 Header 右侧显示主题切换按钮
THEN 按钮 SHALL 使用 Ant Design Button 组件（type="text"）
THEN 按钮图标 SHALL 根据当前主题显示（亮色模式显示月亮图标，暗色模式显示太阳图标）

Scenario: 主题切换按钮交互

WHEN 用户点击主题切换按钮
THEN 前端 SHALL 切换主题模式
THEN 按钮 SHALL 显示 Tooltip 提示（"切换到暗色模式"或"切换到亮色模式"）

Requirement: 使用 React Context 管理主题状态

前端 SHALL 使用 React Context 提供全局主题状态。

Scenario: 主题 Context 提供

WHEN 应用初始化
THEN 前端 SHALL 创建 ThemeContext
THEN ThemeContext SHALL 提供 mode（当前主题模式）
THEN ThemeContext SHALL 提供 toggleTheme（切换主题方法）
THEN ThemeContext SHALL 提供 setTheme（设置主题方法）

Scenario: 主题 Context 使用

WHEN 组件需要访问或修改主题
THEN 组件 SHALL 使用 useTheme hook
THEN useTheme SHALL 返回当前主题状态和操作方法
THEN 在 ThemeProvider 外使用 useTheme SHALL 抛出错误

Requirement: 集成 Ant Design ConfigProvider

前端 SHALL 使用 ConfigProvider 应用主题到 Ant Design 组件。

Scenario: ConfigProvider 主题配置

WHEN 渲染应用
THEN 前端 SHALL 使用 ConfigProvider 包裹应用
THEN ConfigProvider theme.algorithm SHALL 根据当前主题设置（defaultAlgorithm 或 darkAlgorithm）

Scenario: 组件自动应用主题

WHEN 主题切换
THEN 所有 Ant Design 组件 SHALL 自动应用新主题
THEN 组件 SHALL 无需手动样式调整
THEN 主题切换 SHALL 平滑过渡，无闪烁

3.9 KiB Raw Blame History Unescape Escape