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

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

frontend/src/pages/Stats/index.tsx

@@ -1,13 +1,45 @@
+import { useState, useMemo } from 'react';
+import type { Dayjs } from 'dayjs';
 import { useProviders } from '@/hooks/useProviders';
+import { useStats } from '@/hooks/useStats';
+import { StatCards } from './StatCards';
+import { UsageChart } from './UsageChart';
 import { StatsTable } from './StatsTable';
 
 export function StatsPage() {
   const { data: providers = [] } = useProviders();
 
+  const [providerId, setProviderId] = useState<string | undefined>();
+  const [modelName, setModelName] = useState<string | undefined>();
+  const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null] | null>(null);
+
+  const params = useMemo(
+    () => ({
+      providerId,
+      modelName,
+      startDate: dateRange?.[0]?.format('YYYY-MM-DD'),
+      endDate: dateRange?.[1]?.format('YYYY-MM-DD'),
+    }),
+    [providerId, modelName, dateRange],
+  );
+
+  const { data: stats = [], isLoading } = useStats(params);
+
   return (
     <div>
-      <h1>用量统计</h1>
-      <StatsTable providers={providers} />
+      <StatCards stats={stats} />
+      <UsageChart stats={stats} />
+      <StatsTable
+        providers={providers}
+        stats={stats}
+        loading={isLoading}
+        providerId={providerId}
+        modelName={modelName}
+        dateRange={dateRange}
+        onProviderIdChange={setProviderId}
+        onModelNameChange={setModelName}
+        onDateRangeChange={setDateRange}
+      />
     </div>
   );
 }