AIClient-2-API/UI_README.md

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秒自动消失

快速开始

启动服务器

服务器启动时会自动打开浏览器到管理控制台：

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 来改进这个管理控制台！

许可证

本项目使用与主项目相同的许可证。