# 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许可