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

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

frontend/src/__tests__/components/UsageChart.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { UsageChart } from '@/pages/Stats/UsageChart';
+import type { UsageStats } from '@/types';
+
+vi.mock('@ant-design/charts', () => ({
+  Line: vi.fn(() => <div data-testid="mock-line-chart" />),
+}));
+
+const mockStats: UsageStats[] = [
+  {
+    id: '1',
+    providerId: 'openai',
+    modelName: 'gpt-4o',
+    requestCount: 100,
+    date: '2024-01-01',
+  },
+  {
+    id: '2',
+    providerId: 'openai',
+    modelName: 'gpt-3.5-turbo',
+    requestCount: 200,
+    date: '2024-01-01',
+  },
+  {
+    id: '3',
+    providerId: 'anthropic',
+    modelName: 'claude-3',
+    requestCount: 150,
+    date: '2024-01-02',
+  },
+];
+
+describe('UsageChart', () => {
+  it('renders chart title', () => {
+    render(<UsageChart stats={mockStats} />);
+
+    expect(screen.getByText('请求趋势')).toBeInTheDocument();
+  });
+
+  it('renders with data', () => {
+    const { container } = render(<UsageChart stats={mockStats} />);
+
+    expect(container.querySelector('.ant-card')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-line-chart')).toBeInTheDocument();
+  });
+
+  it('renders empty state when no data', () => {
+    render(<UsageChart stats={[]} />);
+
+    expect(screen.getByText('暂无数据')).toBeInTheDocument();
+  });
+
+  it('aggregates data by date correctly', () => {
+    const { container } = render(<UsageChart stats={mockStats} />);
+
+    expect(container.querySelector('.ant-card')).toBeInTheDocument();
+  });
+});