feat: 完成前端重构，采用 Ant Design 5 和完整测试体系

- 采用 Ant Design 5 作为 UI 组件库，替换自定义组件
- 集成 React Router v7 提供路由导航
- 使用 TanStack Query v5 管理数据获取和缓存
- 建立 Vitest + React Testing Library 测试体系
- 添加 Playwright E2E 测试覆盖
- 使用 MSW mock API 响应
- 配置 TypeScript strict 模式
- 采用 SCSS Modules 组织样式
- 更新 OpenSpec 规格以反映前端架构变更
- 归档 frontend-refactor 变更记录

frontend/src/components/AppLayout/index.tsx

@@ -0,0 +1,36 @@
+import { Layout, Menu } from 'antd';
+import {
+  CloudServerOutlined,
+  BarChartOutlined,
+} from '@ant-design/icons';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import styles from './AppLayout.module.scss';
+
+const menuItems = [
+  { key: '/providers', label: '供应商管理', icon: <CloudServerOutlined /> },
+  { key: '/stats', label: '用量统计', icon: <BarChartOutlined /> },
+];
+
+export function AppLayout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <Layout className={styles.layout}>
+      <Layout.Header className={styles.header}>
+        <div className={styles.logo}>AI Gateway</div>
+        <Menu
+          theme="dark"
+          mode="horizontal"
+          selectedKeys={[location.pathname]}
+          items={menuItems}
+          onClick={({ key }) => navigate(key)}
+          className={styles.menu}
+        />
+      </Layout.Header>
+      <Layout.Content className={styles.content}>
+        <Outlet />
+      </Layout.Content>
+    </Layout>
+  );
+}