lanyuanxiaoyao
870004af23
- 重构 AppLayout 为可折叠侧边栏导航布局 - 实现统计仪表盘：统计摘要卡片 + 请求趋势图表 - Provider 页面使用 Card 包裹优化视觉层次 - 主题切换按钮移至侧边栏底部，支持折叠态 - Header 适配暗色主题，添加分隔线优化视觉过渡 - 添加全局样式重置（SCSS） - 完善组件测试和 E2E 测试覆盖 - 同步 OpenSpec 规范到主 specs
78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
# 统计仪表盘
|
||
|
||
## Purpose
|
||
|
||
TBD - 提供统计仪表盘页面，展示统计摘要卡片、请求趋势图表和详细数据表格
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 提供统计摘要卡片
|
||
|
||
前端 SHALL 在统计页面顶部展示统计摘要卡片行，展示关键指标的聚合数据。
|
||
|
||
#### Scenario: 显示统计摘要
|
||
|
||
- **WHEN** 加载统计页面
|
||
- **THEN** 前端 SHALL 在页面顶部使用 Ant Design `Row` + `Col` 栅格布局展示统计卡片
|
||
- **THEN** 每个卡片 SHALL 使用 Ant Design `Card` + `Statistic` 组件
|
||
- **THEN** 卡片 SHALL 展示以下指标：总请求量、活跃模型数、活跃供应商数、今日请求量
|
||
- **THEN** 指标数据 SHALL 从 `useStats` 返回的 `UsageStats[]` 数据中前端聚合计算
|
||
|
||
#### Scenario: 统计数据聚合计算
|
||
|
||
- **WHEN** 前端接收到 stats 数据
|
||
- **THEN** 总请求量 SHALL 为所有记录的 requestCount 之和
|
||
- **THEN** 活跃模型数 SHALL 为去重后不同 modelName 的数量
|
||
- **THEN** 活跃供应商数 SHALL 为去重后不同 providerId 的数量
|
||
- **THEN** 今日请求量 SHALL 为 date 等于当日日期的记录的 requestCount 之和
|
||
|
||
#### Scenario: 统计卡片响应式布局
|
||
|
||
- **WHEN** 在不同屏幕宽度下查看统计卡片
|
||
- **THEN** 卡片 SHALL 使用 Ant Design `Col` 的响应式 span 适配不同宽度
|
||
- **THEN** 卡片之间 SHALL 有合理的间距（Row 的 gutter）
|
||
|
||
### Requirement: 提供请求趋势图表
|
||
|
||
前端 SHALL 在统计页面展示请求量随时间变化的趋势图表。
|
||
|
||
#### Scenario: 显示趋势图表
|
||
|
||
- **WHEN** 加载统计页面
|
||
- **THEN** 前端 SHALL 在统计摘要卡片下方展示趋势图表
|
||
- **THEN** 图表 SHALL 使用 `@ant-design/charts` 的 `Line` 组件
|
||
- **THEN** 图表 SHALL 包裹在 Ant Design `Card` 组件中
|
||
- **THEN** 图表 SHALL 展示请求量随日期的变化趋势
|
||
|
||
#### Scenario: 图表数据格式
|
||
|
||
- **WHEN** 准备图表数据
|
||
- **THEN** X 轴 SHALL 为日期（date 字段）
|
||
- **THEN** Y 轴 SHALL 为请求计数（requestCount）
|
||
- **THEN** 数据 SHALL 按日期聚合，同一天的请求量求和
|
||
- **THEN** 数据 SHALL 按日期升序排列
|
||
|
||
#### Scenario: 图表主题适配
|
||
|
||
- **WHEN** 用户切换亮色/暗色主题
|
||
- **THEN** 图表 SHALL 自动适配当前主题
|
||
- **THEN** 图表文字和背景 SHALL 与当前主题协调
|
||
|
||
### Requirement: 仪表盘页面布局
|
||
|
||
前端 SHALL 将统计页面组织为仪表盘布局，按从上到下的顺序排列各区域。
|
||
|
||
#### Scenario: 仪表盘区域排列
|
||
|
||
- **WHEN** 渲染统计页面
|
||
- **THEN** 页面 SHALL 按以下顺序从上到下排列：统计摘要卡片、趋势图表、筛选栏和数据表格
|
||
- **THEN** 各区域之间 SHALL 有合理的垂直间距
|
||
- **THEN** 筛选栏和数据表格 SHALL 保持在同一个 `Card` 中
|
||
|
||
#### Scenario: 数据联动
|
||
|
||
- **WHEN** 用户通过筛选栏修改筛选条件
|
||
- **THEN** 统计摘要卡片和趋势图表 SHALL 随筛选条件变化更新
|
||
- **THEN** 数据表格 SHALL 同步更新
|
||
- **THEN** 所有区域 SHALL 共享同一份筛选后的数据
|