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

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

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

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { BrowserRouter } from 'react-router';
+import { AppLayout } from '@/components/AppLayout';
+
+vi.mock('@/contexts/ThemeContext', () => ({
+  useTheme: vi.fn(() => ({ mode: 'light', toggleTheme: vi.fn() })),
+}));
+
+const renderWithRouter = (component: React.ReactNode) => {
+  return render(<BrowserRouter>{component}</BrowserRouter>);
+};
+
+describe('AppLayout', () => {
+  it('renders sidebar with app name', () => {
+    renderWithRouter(<AppLayout />);
+
+    const appNames = screen.getAllByText('AI Gateway');
+    expect(appNames.length).toBeGreaterThan(0);
+  });
+
+  it('renders navigation menu items', () => {
+    renderWithRouter(<AppLayout />);
+
+    expect(screen.getByText('供应商管理')).toBeInTheDocument();
+    expect(screen.getByText('用量统计')).toBeInTheDocument();
+  });
+
+  it('renders theme toggle button', () => {
+    renderWithRouter(<AppLayout />);
+
+    const themeButton = screen.getByRole('button', { name: 'moon' });
+    expect(themeButton).toBeInTheDocument();
+  });
+
+  it('renders content outlet', () => {
+    const { container } = renderWithRouter(<AppLayout />);
+
+    expect(container.querySelector('.ant-layout-content')).toBeInTheDocument();
+  });
+
+  it('renders sidebar', () => {
+    const { container } = renderWithRouter(<AppLayout />);
+
+    expect(container.querySelector('.ant-layout-sider')).toBeInTheDocument();
+  });
+
+  it('renders header with page title', () => {
+    const { container } = renderWithRouter(<AppLayout />);
+
+    expect(container.querySelector('.ant-layout-header')).toBeInTheDocument();
+  });
+});