1
0

feat: 现代化 UI 布局,实现侧边栏导航和统计仪表盘

- 重构 AppLayout 为可折叠侧边栏导航布局
- 实现统计仪表盘:统计摘要卡片 + 请求趋势图表
- Provider 页面使用 Card 包裹优化视觉层次
- 主题切换按钮移至侧边栏底部,支持折叠态
- Header 适配暗色主题,添加分隔线优化视觉过渡
- 添加全局样式重置(SCSS)
- 完善组件测试和 E2E 测试覆盖
- 同步 OpenSpec 规范到主 specs
This commit is contained in:
2026-04-16 19:24:02 +08:00
parent 5dd26d29a7
commit 870004af23
24 changed files with 983 additions and 153 deletions

View File

@@ -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 提供全局主题状态。