AI Gateway Frontend
AI 网关管理前端，提供供应商配置和用量统计界面。
技术栈
- 运行时: Bun
- 构建工具: Vite
- 语言: TypeScript (strict mode)
- 框架: React
- UI 组件库: Ant Design 5
- 路由: React Router v7
- 数据获取: TanStack Query v5
- 样式: SCSS Modules（禁止使用纯 CSS）
- 测试: Vitest + React Testing Library + Playwright
项目结构
frontend/
├── src/
│ ├── 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/
│ │ ├── 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
运行方式
安装依赖
bun install
开发模式
bun run dev
前端将在端口 5173 启动，API 请求通过 Vite proxy 转发到后端（localhost:9826）。
构建生产版本
bun run build
代码检查
bun run lint
测试
单元测试 + 组件测试
bun run test # 运行所有测试
bun run test:watch # 监听模式
bun run test:coverage # 生成覆盖率报告
E2E 测试
bun run test:e2e
功能
供应商管理
- 查看供应商列表（Ant Design Table）
- 添加新供应商（Modal Form）
- 编辑供应商配置
- 删除供应商（Popconfirm 确认）
- API Key 脱敏显示
- 启用/禁用状态标签
模型管理
- 展开供应商行查看关联模型
- 添加/编辑/删除模型
- 按供应商筛选模型
用量统计
- 查看统计数据
- 按供应商筛选
- 按模型筛选
- 按日期范围筛选（DatePicker.RangePicker）
开发规范
- 所有样式使用 SCSS，禁止使用纯 CSS 文件
- 组件级样式使用 SCSS Modules（*.module.scss）
- 图标优先使用 @ant-design/icons
- TypeScript strict 模式，禁止 any 类型
- API 层自动处理 snake_case ↔ camelCase 字段转换
- 使用路径别名
@/引用 src 目录
环境要求
- Bun 1.0 或更高版本
添加新页面
- 在
src/pages/创建页面目录和组件 - 在
src/hooks/创建对应的 TanStack Query hook - 在
src/routes/index.tsx添加路由 - 在
src/components/AppLayout/index.tsx的 menuItems 添加导航项