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

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

frontend/src/pages/Stats/StatCards.tsx

@@ -0,0 +1,42 @@
+import { Row, Col, Card, Statistic } from 'antd';
+import type { UsageStats } from '@/types';
+
+interface StatCardsProps {
+  stats: UsageStats[];
+}
+
+export function StatCards({ stats }: StatCardsProps) {
+  const totalRequests = stats.reduce((sum, s) => sum + s.requestCount, 0);
+  const activeModels = new Set(stats.map((s) => s.modelName)).size;
+  const activeProviders = new Set(stats.map((s) => s.providerId)).size;
+
+  const today = new Date().toISOString().split('T')[0];
+  const todayRequests = stats
+    .filter((s) => s.date === today)
+    .reduce((sum, s) => sum + s.requestCount, 0);
+
+  return (
+    <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
+      <Col xs={24} sm={12} md={6}>
+        <Card>
+          <Statistic title="总请求量" value={totalRequests} />
+        </Card>
+      </Col>
+      <Col xs={24} sm={12} md={6}>
+        <Card>
+          <Statistic title="活跃模型数" value={activeModels} />
+        </Card>
+      </Col>
+      <Col xs={24} sm={12} md={6}>
+        <Card>
+          <Statistic title="活跃供应商数" value={activeProviders} />
+        </Card>
+      </Col>
+      <Col xs={24} sm={12} md={6}>
+        <Card>
+          <Statistic title="今日请求量" value={todayRequests} />
+        </Card>
+      </Col>
+    </Row>
+  );
+}