nex/frontend

AI Gateway Frontend

AI 网关管理前端，提供供应商配置和用量统计界面。

技术栈

• 运行时: Bun
• 构建工具: Vite
• 语言: TypeScript
• 框架: React
• 样式: SCSS

项目结构

frontend/
├── src/
│   ├── api/
│   │   └── client.ts        # API 客户端封装
│   ├── pages/
│   │   ├── ProvidersPage.tsx  # 供应商管理页面
│   │   └── StatsPage.tsx      # 统计查看页面
│   ├── App.tsx              # 主应用组件
│   ├── App.css              # 样式
│   └── main.tsx             # 入口文件
├── package.json
└── README.md

运行方式

安装依赖

bun install

开发模式

bun run dev

前端将在端口 5173 启动。

构建生产版本

bun run build

功能

供应商管理

• 查看供应商列表
• 添加新供应商
• 编辑供应商配置
• 删除供应商
• 启用/禁用供应商

模型管理

• 查看模型列表
• 添加新模型
• 编辑模型配置
• 删除模型
• 按供应商过滤模型

用量统计

• 查看统计数据
• 按供应商过滤
• 按模型过滤
• 按日期范围过滤
• 查看聚合统计

API 配置

API 基础地址默认为 http://localhost:9826/api，可在 src/api/client.ts 中修改。

开发

环境要求

• Bun 1.0 或更高版本

添加新页面

1. 在 src/pages/ 创建页面组件
2. 在 src/App.tsx 添加路由
3. 在导航栏添加链接