mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 18:50:49 +08:00
142 lines
3.5 KiB
Markdown
142 lines
3.5 KiB
Markdown
# Cli-Proxy-API-Management-Center
|
||
这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
|
||
主项目
|
||
https://github.com/router-for-me/CLIProxyAPI
|
||
|
||
示例网站:
|
||
https://remote.router-for.me/
|
||
|
||
最低可用版本 ≥ 5.0.0
|
||
推荐版本 ≥ 5.2.6
|
||
自6.0.19起WebUI已经集成在主程序中 可以通过/management.html访问
|
||
|
||
## 功能特点
|
||
|
||
### 认证管理
|
||
- 支持管理密钥认证
|
||
- 可配置 API 基础地址
|
||
- 实时连接状态检测
|
||
|
||
### 基础设置
|
||
- **调试模式**: 开启/关闭调试功能
|
||
- **代理设置**: 配置代理服务器 URL
|
||
- **请求重试**: 设置请求重试次数
|
||
- **配额管理**: 配置超出配额时的行为
|
||
- **本地访问**: 管理本地未认证访问
|
||
|
||
### API 密钥管理
|
||
- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
|
||
- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
|
||
- **Codex API**: 管理 OpenAI Codex API 配置
|
||
- **Claude API**: 管理 Anthropic Claude API 配置
|
||
- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
|
||
|
||
### 认证文件管理
|
||
- 上传认证 JSON 文件
|
||
- 下载现有认证文件
|
||
- 删除单个或所有认证文件
|
||
- 显示文件详细信息
|
||
|
||
|
||
## 使用方法
|
||
|
||
### 1. 直接使用（推荐）
|
||
直接用浏览器打开 `index.html` 文件即可使用。
|
||
|
||
### 2. 使用本地服务器
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 使用默认端口(3000）
|
||
npm start
|
||
```
|
||
|
||
### 3. 配置 API 连接
|
||
1. 打开管理界面
|
||
2. 在登录界面上输入：
|
||
- **远程地址**: `http://localhost:8317`/v0/management将会自动为您补全
|
||
- **管理密钥**: 您的管理密钥
|
||
3. 点击"连接"按钮
|
||
4. 连接成功后即可使用所有功能
|
||
|
||
## 界面说明
|
||
|
||
### 导航菜单
|
||
- **基础设置**: 调试、代理、重试等基本配置
|
||
- **API 密钥**: 各种 API 服务的密钥管理
|
||
- **AI 提供商**: AI 服务提供商配置
|
||
- **认证文件**: 认证文件的上传下载管理
|
||
- **系统信息**: 连接状态和系统信息
|
||
|
||
## 特性亮点
|
||
|
||
### 现代化 UI
|
||
- 响应式设计，支持各种屏幕尺寸
|
||
- 美观的渐变色彩和阴影效果
|
||
- 流畅的动画和过渡效果
|
||
- 直观的图标和状态指示
|
||
|
||
### 实时更新
|
||
- 配置更改立即生效
|
||
- 实时状态反馈
|
||
- 自动数据刷新
|
||
|
||
### 安全特性
|
||
- 密钥遮蔽显示
|
||
|
||
### 响应式设计
|
||
- 完美适配桌面和移动设备
|
||
- 自适应布局
|
||
- 触摸友好的交互
|
||
|
||
## 技术栈
|
||
|
||
- **前端**: 纯 HTML、CSS、JavaScript
|
||
- **样式**: CSS3 + Flexbox/Grid
|
||
- **图标**: Font Awesome 6.4.0
|
||
- **字体**: Segoe UI 系统字体
|
||
- **API**: RESTful API 调用
|
||
|
||
## 故障排除
|
||
|
||
### 连接问题
|
||
1. 确认 CLI Proxy API 服务正在运行
|
||
2. 检查 API 地址是否正确
|
||
3. 验证管理密钥是否有效
|
||
4. 确认防火墙设置允许连接
|
||
|
||
### 数据不更新
|
||
1. 点击"刷新全部"按钮
|
||
2. 检查网络连接
|
||
3. 查看浏览器控制台错误信息
|
||
|
||
## 开发说明
|
||
|
||
### 文件结构
|
||
```
|
||
webui/
|
||
├── index.html # 主页面
|
||
├── styles.css # 样式文件
|
||
├── app.js # 应用逻辑
|
||
├── package.json # 项目配置
|
||
├── i18n.js # 国际化支持
|
||
└── README.md # 说明文档
|
||
```
|
||
|
||
### API 调用
|
||
所有 API 调用都通过 `ManagerAPI` 类的 `makeRequest` 方法处理，包含：
|
||
- 自动添加认证头
|
||
- 错误处理
|
||
- JSON 响应解析
|
||
|
||
### 状态管理
|
||
- 本地存储保存 API 地址和密钥
|
||
- 内存中维护连接状态
|
||
- 实时数据刷新机制
|
||
|
||
## 贡献
|
||
欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个WebUI进行更新！
|
||
|
||
本项目采用MIT许可
|