# 统计仪表盘

## 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 共享同一份筛选后的数据