lanyuanxiaoyao
870004af23
- 重构 AppLayout 为可折叠侧边栏导航布局 - 实现统计仪表盘：统计摘要卡片 + 请求趋势图表 - Provider 页面使用 Card 包裹优化视觉层次 - 主题切换按钮移至侧边栏底部，支持折叠态 - Header 适配暗色主题，添加分隔线优化视觉过渡 - 添加全局样式重置（SCSS） - 完善组件测试和 E2E 测试覆盖 - 同步 OpenSpec 规范到主 specs
118 lines
4.1 KiB
Markdown
118 lines
4.1 KiB
Markdown
# 主题切换
|
||
|
||
## 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 在侧边栏底部提供主题切换按钮。
|
||
|
||
#### Scenario: 显示主题切换按钮
|
||
|
||
- **WHEN** 渲染 AppLayout Sider
|
||
- **THEN** 前端 SHALL 在 Sider 底部显示主题切换按钮
|
||
- **THEN** 按钮 SHALL 使用 Ant Design Button 组件（type="text"）
|
||
- **THEN** 按钮图标 SHALL 根据当前主题显示（亮色模式显示月亮图标，暗色模式显示太阳图标）
|
||
|
||
#### Scenario: 主题切换按钮交互
|
||
|
||
- **WHEN** 用户点击主题切换按钮
|
||
- **THEN** 前端 SHALL 切换主题模式
|
||
- **THEN** 按钮 SHALL 显示 Tooltip 提示（"切换到暗色模式"或"切换到亮色模式"）
|
||
|
||
#### 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 平滑过渡，无闪烁
|