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/README.md

@@ -6,25 +6,52 @@ AI 网关管理前端，提供供应商配置和用量统计界面。
 
 - **运行时**: Bun
 - **构建工具**: Vite
-- **语言**: TypeScript
+- **语言**: TypeScript (strict mode)
 - **框架**: React
-- **样式**: SCSS
+- **UI 组件库**: Ant Design 5
+- **路由**: React Router v7
+- **数据获取**: TanStack Query v5
+- **样式**: SCSS Modules（禁止使用纯 CSS）
+- **测试**: Vitest + React Testing Library + Playwright
 
 ## 项目结构
 
 ```
 frontend/
 ├── src/
-│   ├── api/
-│   │   └── client.ts        # API 客户端封装
+│   ├── api/                    # API 层
+│   │   ├── client.ts           # 统一 request<T>() + 字段转换
+│   │   ├── providers.ts        # Provider CRUD
+│   │   ├── models.ts           # Model CRUD
+│   │   └── stats.ts            # Stats 查询
+│   ├── components/
+│   │   └── AppLayout/          # 顶部导航布局
+│   ├── hooks/                  # TanStack Query hooks
+│   │   ├── useProviders.ts
+│   │   ├── useModels.ts
+│   │   └── useStats.ts
 │   ├── pages/
-│   │   ├── ProvidersPage.tsx  # 供应商管理页面
-│   │   └── StatsPage.tsx      # 统计查看页面
-│   ├── App.tsx              # 主应用组件
-│   ├── App.css              # 样式
-│   └── main.tsx             # 入口文件
-├── package.json
-└── README.md
+│   │   ├── Providers/          # 供应商管理（含内嵌模型管理）
+│   │   ├── Stats/              # 用量统计
+│   │   └── NotFound.tsx
+│   ├── routes/
+│   │   └── index.tsx           # 路由配置
+│   ├── types/
+│   │   └── index.ts            # 类型定义
+│   ├── __tests__/              # 测试
+│   │   ├── setup.ts
+│   │   ├── api/
+│   │   ├── hooks/
+│   │   └── components/
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.scss
+├── e2e/                        # Playwright E2E 测试
+├── vitest.config.ts
+├── playwright.config.ts
+├── tsconfig.json
+├── vite.config.ts
+└── package.json
 ```
 
 ## 运行方式
@@ -41,7 +68,7 @@ bun install
 bun run dev
 ```
 
-前端将在端口 5173 启动。
+前端将在端口 5173 启动，API 请求通过 Vite proxy 转发到后端（localhost:9826）。
 
 ### 构建生产版本
 
@@ -49,37 +76,60 @@ bun run dev
 bun run build
 ```
 
+### 代码检查
+
+```bash
+bun run lint
+```
+
+## 测试
+
+### 单元测试 + 组件测试
+
+```bash
+bun run test            # 运行所有测试
+bun run test:watch      # 监听模式
+bun run test:coverage   # 生成覆盖率报告
+```
+
+### E2E 测试
+
+```bash
+bun run test:e2e
+```
+
 ## 功能
 
 ### 供应商管理
 
-- 查看供应商列表
-- 添加新供应商
+- 查看供应商列表（Ant Design Table）
+- 添加新供应商（Modal Form）
 - 编辑供应商配置
-- 删除供应商
-- 启用/禁用供应商
+- 删除供应商（Popconfirm 确认）
+- API Key 脱敏显示
+- 启用/禁用状态标签
 
 ### 模型管理
 
-- 查看模型列表
-- 添加新模型
-- 编辑模型配置
-- 删除模型
-- 按供应商过滤模型
+- 展开供应商行查看关联模型
+- 添加/编辑/删除模型
+- 按供应商筛选模型
 
 ### 用量统计
 
 - 查看统计数据
-- 按供应商过滤
-- 按模型过滤
-- 按日期范围过滤
-- 查看聚合统计
+- 按供应商筛选
+- 按模型筛选
+- 按日期范围筛选（DatePicker.RangePicker）
 
-## API 配置
+## 开发规范
 
-API 基础地址默认为 `http://localhost:9826/api`，可在 `src/api/client.ts` 中修改。
-
-## 开发
+- 所有样式使用 SCSS，禁止使用纯 CSS 文件
+- 组件级样式使用 SCSS Modules（*.module.scss）
+- 图标优先使用 @ant-design/icons
+- TypeScript strict 模式，禁止 any 类型
+- API 层自动处理 snake_case ↔ camelCase 字段转换
+- 使用路径别名 `@/` 引用 src 目录
 
 ### 环境要求
 
@@ -87,6 +137,7 @@ API 基础地址默认为 `http://localhost:9826/api`，可在 `src/api/client.t
 
 ### 添加新页面
 
-1. 在 `src/pages/` 创建页面组件
-2. 在 `src/App.tsx` 添加路由
-3. 在导航栏添加链接
+1. 在 `src/pages/` 创建页面目录和组件
+2. 在 `src/hooks/` 创建对应的 TanStack Query hook
+3. 在 `src/routes/index.tsx` 添加路由
+4. 在 `src/components/AppLayout/index.tsx` 的 menuItems 添加导航项