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

@@ -142,6 +142,22 @@
- **THEN** SHALL 覆盖 useProviders、useModels、useStats 的查询和变更逻辑
- **THEN** SHALL 验证缓存失效和自动刷新行为
### Requirement: 统计仪表盘组件测试
前端 SHALL 为统计仪表盘的新增组件建立测试覆盖。
#### Scenario: StatCards 组件测试
- **WHEN** 运行 StatCards 组件测试
- **THEN** SHALL 验证统计数据正确渲染(总请求量、活跃模型数、活跃供应商数、今日请求量)
- **THEN** SHALL 验证空数据时的渲染行为
#### Scenario: UsageChart 组件测试
- **WHEN** 运行 UsageChart 组件测试
- **THEN** SHALL 验证图表组件正确渲染
- **THEN** SHALL 验证空数据时的渲染行为
### Requirement: 建立前端组件测试覆盖
前端 SHALL 使用 React Testing Library 建立组件测试覆盖。
@@ -153,6 +169,8 @@
- **THEN** SHALL 覆盖 ProviderForm 的表单校验和提交
- **THEN** SHALL 覆盖 ModelForm 的表单校验和提交
- **THEN** SHALL 覆盖 StatsTable 的筛选和数据展示
- **THEN** SHALL 覆盖 StatCards 的统计摘要渲染
- **THEN** SHALL 覆盖 UsageChart 的趋势图表渲染
### Requirement: 建立前端 E2E 测试覆盖
@@ -169,6 +187,13 @@
- **WHEN** 运行 E2E 测试
- **THEN** SHALL 覆盖统计页面的加载和筛选查询流程
- **THEN** SHALL 覆盖页面间的导航切换
- **THEN** SHALL 覆盖统计摘要卡片的展示
#### Scenario: 侧边栏导航 E2E 覆盖
- **WHEN** 运行 E2E 测试
- **THEN** SHALL 覆盖侧边栏菜单导航的页面切换
- **THEN** SHALL 覆盖侧边栏折叠和展开操作
### Requirement: 前端测试集成到构建流程