8a1ccb9877
- 将配置文件统一迁移至configs目录 - 更新所有相关代码中对配置文件的引用路径 - 删除不再使用的run-docker脚本文件 - 更新文档中关于配置文件路径的说明 - 调整默认配置参数和路径引用方式
238 lines
8.2 KiB
Markdown
238 lines
8.2 KiB
Markdown
# AIClient2API 可视化管理控制台
|
||
|
||
## 概述
|
||
|
||
AIClient2API 现在包含一个功能完整的可视化 Web UI 管理控制台，允许您通过浏览器轻松管理配置、监控提供商池状态、查看实时日志、配置AI模型提供商等。
|
||
|
||
## 功能特性
|
||
|
||
### 🎨 现代化界面
|
||
- 响应式设计，支持桌面和移动设备
|
||
- 直观的仪表盘展示系统统计信息
|
||
- 侧边栏导航，方便快速切换功能模块
|
||
- 协议标签切换（OpenAI协议/Claude协议）
|
||
|
||
### 📊 实时监控
|
||
- **仪表盘**：显示运行时间、系统信息、Node.js版本、服务器时间、内存使用
|
||
- **提供商池管理**：查看各提供商账户状态、使用统计、错误率
|
||
- **活动统计**：活动连接、活跃提供商、健康提供商数量
|
||
|
||
### ⚙️ 配置管理
|
||
- 在线修改 API 密钥、监听地址、端口
|
||
- 支持多种模型提供商：
|
||
- **Gemini CLI OAuth** - 支持突破限制的Gemini访问
|
||
- **OpenAI Custom** - 自定义OpenAI API配置
|
||
- **Claude Custom** - 自定义Claude API配置
|
||
- **Claude Kiro OAuth** - 突破限制/免费使用的Claude服务
|
||
- **Qwen OAuth** - 通义千问OAuth认证
|
||
- **OpenAI Responses** - OpenAI新版本API
|
||
- 编辑系统提示词
|
||
- 高级配置选项：
|
||
- 系统提示文件路径和模式
|
||
- 提示日志配置
|
||
- 请求重试机制（最大重试次数、基础延迟）
|
||
- OAuth令牌自动刷新设置
|
||
- 提供商池配置文件路径
|
||
|
||
### 🔧 配置管理
|
||
- 搜索配置文件功能
|
||
- 按关联状态过滤（已关联/未关联）
|
||
- 配置文件列表展示
|
||
- 配置统计信息（总数、已关联数、未关联数）
|
||
- 实时刷新配置列表
|
||
|
||
### 🛣️ 路径路由调用示例
|
||
- **即时切换**：通过修改URL路径即可切换不同的AI模型提供商
|
||
- **跨协议调用**：支持OpenAI协议调用Claude模型，或Claude协议调用OpenAI模型
|
||
- **客户端配置指导**：为Cherry-Studio、NextChat、Cline等客户端提供配置示例
|
||
- 提供完整的curl使用示例
|
||
- 一键复制端点路径功能
|
||
|
||
支持的路由路径示例：
|
||
- `/gemini-cli-oauth/v1/chat/completions` - Gemini CLI OAuth (OpenAI协议)
|
||
- `/gemini-cli-oauth/v1/messages` - Gemini CLI OAuth (Claude协议)
|
||
- `/openai-qwen-oauth/v1/chat/completions` - Qwen OAuth (OpenAI协议)
|
||
- `/openai-qwen-oauth/v1/messages` - Qwen OAuth (Claude协议)
|
||
- `/claude-custom/v1/chat/completions` - Claude Custom (OpenAI协议)
|
||
- `/claude-custom/v1/messages` - Claude Custom (Claude协议)
|
||
- `/claude-kiro-oauth/v1/chat/completions` - Claude Kiro OAuth (OpenAI协议)
|
||
- `/claude-kiro-oauth/v1/messages` - Claude Kiro OAuth (Claude协议)
|
||
- `/openai-custom/v1/chat/completions` - OpenAI Custom (OpenAI协议)
|
||
- `/openai-custom/v1/messages` - OpenAI Custom (Claude协议)
|
||
|
||
### 📜 实时日志
|
||
- 实时显示服务器输出日志
|
||
- 清空日志功能
|
||
- 自动滚动和手动滚动切换
|
||
- 日志缓冲区管理
|
||
|
||
### 🔔 通知系统
|
||
- 操作成功/失败提示
|
||
- 优雅的 Toast 通知
|
||
- 3秒自动消失
|
||
|
||
## 快速开始
|
||
|
||
### 启动服务器
|
||
|
||
服务器启动时会自动打开浏览器到管理控制台：
|
||
|
||
```bash
|
||
node src/api-server.js --port 3000 --api-key 123456
|
||
```
|
||
|
||
访问地址：http://127.0.0.1:3000/
|
||
|
||
### 界面导航
|
||
|
||
1. **仪表盘** - 系统概览、统计信息和路径路由示例
|
||
2. **配置管理** - 修改服务器配置和提供商设置
|
||
3. **提供商池管理** - 管理多个API提供商账户
|
||
4. **配置管理** - 管理配置文件和搜索过滤
|
||
5. **实时日志** - 查看服务器运行日志
|
||
|
||
## API 端点
|
||
|
||
管理控制台使用以下 RESTful API 端点：
|
||
|
||
### 配置管理
|
||
- `GET /api/config` - 获取当前配置
|
||
- `POST /api/config` - 更新配置
|
||
- `GET /api/configs` - 获取配置文件列表
|
||
- `POST /api/configs/search` - 搜索配置文件
|
||
|
||
### 系统信息
|
||
- `GET /api/system` - 获取系统信息
|
||
- `GET /api/providers` - 获取提供商池信息
|
||
|
||
### 实时数据
|
||
- `GET /api/events` - Server-Sent Events 流，用于实时更新
|
||
|
||
### 静态文件
|
||
- `GET /` - 主页面
|
||
- `GET /index.html` - HTML页面
|
||
- `GET /app/styles.css` - 样式文件
|
||
- `GET /app/mobile.css` - 移动端样式
|
||
- `GET /app/app.js` - JavaScript主逻辑
|
||
- `GET /app/utils.js` - 工具函数
|
||
- `GET /app/config-manager.js` - 配置管理
|
||
- `GET /app/provider-manager.js` - 提供商管理
|
||
- `GET /app/event-stream.js` - 事件流处理
|
||
- `GET /app/event-handlers.js` - 事件处理器
|
||
- `GET /app/navigation.js` - 导航逻辑
|
||
- `GET /app/modal.js` - 模态框组件
|
||
- `GET /app/file-upload.js` - 文件上传
|
||
- `GET /app/upload-config-manager.js` - 配置管理
|
||
- `GET /app/routing-examples.js` - 路由示例
|
||
- `GET /app/constants.js` - 常量定义
|
||
|
||
## 技术实现
|
||
|
||
### 前端技术栈
|
||
- **HTML5** - 语义化结构，支持无障碍访问
|
||
- **CSS3** - 现代化样式（CSS Variables、Flexbox、Grid）
|
||
- **JavaScript (ES6+)** - 模块化交互逻辑
|
||
- **Server-Sent Events** - 实时数据推送
|
||
- **Font Awesome 6.4.0** - 图标库
|
||
|
||
### 后端集成
|
||
- 集成到现有 `api-server.js` 中
|
||
- 零额外依赖
|
||
- ES 模块语法
|
||
- 异步处理
|
||
|
||
### 实时通信
|
||
使用 Server-Sent Events 实现实时双向通信：
|
||
- 自动广播日志到所有连接的客户端
|
||
- 每5秒发送统计更新
|
||
- 轻量级实现，无需 WebSocket
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
static/
|
||
├── index.html # 主页面
|
||
└── app/
|
||
├── styles.css # 主样式文件
|
||
├── mobile.css # 移动端样式
|
||
├── app.js # 主应用逻辑
|
||
├── constants.js # 常量定义
|
||
├── utils.js # 工具函数
|
||
├── config-manager.js # 配置管理
|
||
├── provider-manager.js # 提供商管理
|
||
├── upload-config-manager.js # 上传配置管理
|
||
├── event-stream.js # 事件流处理
|
||
├── event-handlers.js # 事件处理器
|
||
├── navigation.js # 导航逻辑
|
||
├── modal.js # 模态框组件
|
||
├── file-upload.js # 文件上传
|
||
└── routing-examples.js # 路由示例
|
||
```
|
||
|
||
## 支持的提供商
|
||
|
||
### 突破限制类型
|
||
- **Gemini CLI OAuth** - 通过OAuth突破Gemini API限制
|
||
- **Claude Kiro OAuth** - 免费使用的Claude服务
|
||
- **Qwen OAuth** - 通义千问OAuth认证
|
||
|
||
### 官方API/三方类型
|
||
- **OpenAI Custom** - 自定义OpenAI API端点
|
||
- **Claude Custom** - 自定义Claude API端点
|
||
- **OpenAI Responses** - OpenAI最新版本API
|
||
|
||
## 浏览器兼容性
|
||
|
||
- Chrome 60+
|
||
- Firefox 55+
|
||
- Safari 11+
|
||
- Edge 79+
|
||
|
||
## 常见问题
|
||
|
||
### Q: 服务器启动后浏览器没有自动打开？
|
||
A: 检查是否使用 localhost 或 127.0.0.1 启动服务器。自动打开仅在本地部署时启用。
|
||
|
||
### Q: 如何使用路径路由功能？
|
||
A: 在仪表盘的"路径路由调用示例"中，查看不同提供商的使用示例。修改客户端的API端点URL即可切换不同的AI模型。
|
||
|
||
### Q: 如何配置OAuth提供商？
|
||
A: 在配置管理页面选择对应的OAuth提供商，填写项目ID和OAuth凭据（支持文件路径或Base64编码）。
|
||
|
||
### Q: 上传配置文件有什么作用？
|
||
A: 上传配置文件可以将本地配置文件上传到服务器，方便管理和在不同环境间同步配置。
|
||
|
||
### Q: 如何查看更详细的提供商信息？
|
||
A: 在"提供商池"页面可以看到每个提供商的使用次数、错误次数、最后使用时间等详细信息。
|
||
|
||
### Q: 配置修改后需要重启服务器吗？
|
||
A: 大部分配置（如系统提示、API密钥）会立即生效，但网络端口等更改需要重启服务器。
|
||
|
||
### Q: 支持哪些客户端配置？
|
||
A: 支持Cherry-Studio、NextChat、Cline等主流AI客户端，只需将API端点设置为对应的路由路径即可。
|
||
|
||
## 路由使用指南
|
||
|
||
### 1. 选择提供商
|
||
根据需要访问的AI模型选择对应的提供商路径。
|
||
|
||
### 2. 选择协议格式
|
||
- **OpenAI协议**：使用 `/v1/chat/completions` 端点
|
||
- **Claude协议**：使用 `/v1/messages` 端点
|
||
|
||
### 3. 配置客户端
|
||
在AI客户端中设置：
|
||
- **API端点**：`http://localhost:3000/{提供商路径}/{协议路径}`
|
||
- **API密钥**：对应提供商的密钥
|
||
- **模型名称**：使用提供商支持的具体模型
|
||
|
||
### 4. 发送请求
|
||
使用对应的协议格式发送请求，可以实现跨协议调用。
|
||
|
||
## 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request 来改进这个管理控制台！
|
||
|
||
## 许可证
|
||
|
||
本项目使用与主项目相同的许可证。
|