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

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

openspec/config.yaml

@@ -1,6 +1,8 @@
 schema: spec-driven
 
 context: |
+  - 使用中文（注释、文档、交流），面向中文开发者
+  - openspec文档的关键字按openspec规范使用，不要翻译为中文
   - **优先阅读README.md**获取项目结构与开发规范，所有代码风格、命名、注解、依赖、API等规范以README为准
   - 涉及模块结构、API、实体等变更时同步更新README.md
   - 新增代码优先复用已有组件、工具、依赖库，不引入新依赖

openspec/specs/frontend-config-ui/spec.md

@@ -81,11 +81,14 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 
 ### Requirement: 提供统计查看页面
 
-前端 SHALL 使用 Ant Design 组件提供统计查看页面。
+前端 SHALL 使用 Ant Design 组件提供统计仪表盘页面。
 
 #### Scenario: 显示统计概览
 
 - **WHEN** 加载统计页面
+- **THEN** 前端 SHALL 在顶部显示统计摘要卡片（总请求量、活跃模型数、活跃供应商数、今日请求量）
+- **THEN** 统计摘要数据 SHALL 从 stats API 返回数据中前端聚合
+- **THEN** 前端 SHALL 显示请求趋势折线图
 - **THEN** 前端 SHALL 使用 Ant Design Table 显示统计数据
 - **THEN** 统计数据 SHALL 按供应商和模型显示请求计数
 
@@ -93,11 +96,13 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 
 - **WHEN** 用户从 Ant Design Select 选择供应商
 - **THEN** 前端 SHALL 自动查询并过滤统计
+- **THEN** 统计摘要卡片和趋势图表 SHALL 同步更新
 
 #### Scenario: 按日期范围过滤统计
 
 - **WHEN** 用户使用 Ant Design DatePicker.RangePicker 选择日期范围
 - **THEN** 前端 SHALL 自动查询并过滤统计
+- **THEN** 统计摘要卡片和趋势图表 SHALL 同步更新
 
 ### Requirement: 优雅处理 API 错误
 
@@ -117,20 +122,34 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 
 ### Requirement: 提供响应式布局
 
-前端 SHALL 使用 Ant Design Layout 提供顶部导航布局。
+前端 SHALL 使用 Ant Design Layout 提供侧边栏导航布局。
 
 #### Scenario: 桌面布局
 
-- **WHEN** 在桌面屏幕上查看前端
-- **THEN** 布局 SHALL 使用 Ant Design Layout.Header + Menu（horizontal 模式）
-- **THEN** 导航菜单 SHALL 在顶部水平排列
+- **WHEN** 在桌面屏幕上查看前端（宽度 >= 992px）
+- **THEN** 布局 SHALL 使用 Ant Design `Layout.Sider` + `Menu`（inline 模式）
+- **THEN** 侧边栏 SHALL 显示导航菜单，包含图标和文字标签
+- **THEN** 侧边栏 SHALL 可通过折叠按钮折叠为仅图标模式
+
+#### Scenario: 响应式折叠
+
+- **WHEN** 屏幕宽度小于 992px
+- **THEN** 侧边栏 SHALL 自动折叠为图标模式
+- **THEN** 折叠后侧边栏宽度 SHALL 为 80px
+- **THEN** 菜单项 SHALL 仅显示图标
 
 #### Scenario: 页面内容区域
 
 - **WHEN** 显示页面内容
-- **THEN** 内容区域 SHALL 有合理的最大宽度和内边距
+- **THEN** 内容区域 SHALL 在 `Layout.Content` 中渲染
 - **THEN** 页面之间 SHALL 通过 React Router Outlet 渲染
 
+#### Scenario: Header 区域
+
+- **WHEN** 渲染页面 Header
+- **THEN** Header SHALL 仅显示当前页面标题
+- **THEN** Header SHALL 不包含导航菜单
+
 ### Requirement: 使用无组件库的最小 UI
 
 前端 SHALL 使用 Ant Design 6 作为 UI 组件库。
@@ -173,6 +192,33 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 - **THEN** 前端 SHALL 移除该 SCSS 文件
 - **THEN** 前端 SHALL 使用 Ant Design 内置功能替代
 
+### Requirement: 提供侧边栏导航
+
+前端 SHALL 使用 Ant Design `Layout.Sider` 提供侧边栏导航。
+
+#### Scenario: 侧边栏内容
+
+- **WHEN** 渲染侧边栏
+- **THEN** 侧边栏顶部 SHALL 显示应用名称/Logo
+- **THEN** 侧边栏 SHALL 包含 inline 模式的导航菜单
+- **THEN** 导航菜单项 SHALL 包含：供应商管理（CloudServerOutlined 图标）、用量统计（BarChartOutlined 图标）
+- **THEN** 侧边栏底部 SHALL 放置主题切换按钮
+
+#### Scenario: 侧边栏折叠
+
+- **WHEN** 用户点击侧边栏折叠按钮
+- **THEN** 侧边栏 SHALL 切换折叠/展开状态
+- **THEN** 折叠状态下菜单项 SHALL 仅显示图标
+- **THEN** 折叠状态下应用名称/Logo SHALL 隐藏或缩小
+- **THEN** 折叠状态下主题切换按钮 SHALL 保持可见可点击
+
+#### Scenario: 导航菜单交互
+
+- **WHEN** 用户点击导航中的"供应商管理"
+- **THEN** 前端 SHALL 导航到 `/providers` 并高亮当前菜单项
+- **WHEN** 用户点击导航中的"用量统计"
+- **THEN** 前端 SHALL 导航到 `/stats` 并高亮当前菜单项
+
 ### Requirement: 提供导航
 
 前端 SHALL 使用 React Router v7 提供导航。

openspec/specs/frontend-testing/spec.md

@@ -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: 前端测试集成到构建流程
 

openspec/specs/stats-dashboard/spec.md

@@ -0,0 +1,77 @@
+# 统计仪表盘
+
+## 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 共享同一份筛选后的数据

openspec/specs/theme-toggle/spec.md

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