feat: 现代化 UI 布局,实现侧边栏导航和统计仪表盘
- 重构 AppLayout 为可折叠侧边栏导航布局 - 实现统计仪表盘:统计摘要卡片 + 请求趋势图表 - Provider 页面使用 Card 包裹优化视觉层次 - 主题切换按钮移至侧边栏底部,支持折叠态 - Header 适配暗色主题,添加分隔线优化视觉过渡 - 添加全局样式重置(SCSS) - 完善组件测试和 E2E 测试覆盖 - 同步 OpenSpec 规范到主 specs
This commit is contained in:
@@ -59,12 +59,12 @@
|
||||
|
||||
### Requirement: 提供主题切换 UI
|
||||
|
||||
前端 SHALL 在布局 Header 中提供主题切换按钮。
|
||||
前端 SHALL 在侧边栏底部提供主题切换按钮。
|
||||
|
||||
#### Scenario: 显示主题切换按钮
|
||||
|
||||
- **WHEN** 渲染 AppLayout Header
|
||||
- **THEN** 前端 SHALL 在 Header 右侧显示主题切换按钮
|
||||
- **WHEN** 渲染 AppLayout Sider
|
||||
- **THEN** 前端 SHALL 在 Sider 底部显示主题切换按钮
|
||||
- **THEN** 按钮 SHALL 使用 Ant Design Button 组件(type="text")
|
||||
- **THEN** 按钮图标 SHALL 根据当前主题显示(亮色模式显示月亮图标,暗色模式显示太阳图标)
|
||||
|
||||
@@ -74,6 +74,12 @@
|
||||
- **THEN** 前端 SHALL 切换主题模式
|
||||
- **THEN** 按钮 SHALL 显示 Tooltip 提示("切换到暗色模式"或"切换到亮色模式")
|
||||
|
||||
#### Scenario: 侧边栏折叠时的主题切换
|
||||
|
||||
- **WHEN** 侧边栏处于折叠状态
|
||||
- **THEN** 主题切换按钮 SHALL 保持可见且可点击
|
||||
- **THEN** 按钮 SHALL 仅显示图标(Tooltip 保持可用)
|
||||
|
||||
### Requirement: 使用 React Context 管理主题状态
|
||||
|
||||
前端 SHALL 使用 React Context 提供全局主题状态。
|
||||
|
||||
Reference in New Issue
Block a user