lanyuanxiaoyao
870004af23
- 重构 AppLayout 为可折叠侧边栏导航布局 - 实现统计仪表盘：统计摘要卡片 + 请求趋势图表 - Provider 页面使用 Card 包裹优化视觉层次 - 主题切换按钮移至侧边栏底部，支持折叠态 - Header 适配暗色主题，添加分隔线优化视觉过渡 - 添加全局样式重置（SCSS） - 完善组件测试和 E2E 测试覆盖 - 同步 OpenSpec 规范到主 specs
3.0 KiB
3.0 KiB
统计仪表盘
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 共享同一份筛选后的数据