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

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

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 提供导航。