diff --git a/README.md b/README.md index 4cc183c..f632677 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,151 @@ # Cli-Proxy-API-Management-Center -这是一个基于Cli-Proxy-API的webui界面 为其配置修改 运行情况检查提供便利 +这是一个用于管理 CLI Proxy API 的现代化 Web 界面。 + +## 功能特点 + +### 认证管理 +- 支持管理密钥认证 +- 可配置 API 基础地址 +- 实时连接状态检测 + +### 基础设置 +- **调试模式**: 开启/关闭调试功能 +- **代理设置**: 配置代理服务器 URL +- **请求重试**: 设置请求重试次数 +- **配额管理**: 配置超出配额时的行为 +- **本地访问**: 允许本地未认证访问 + +### API 密钥管理 +- **代理服务认证密钥**: 管理用于代理服务的 API 密钥 +- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥 +- **Codex API**: 管理 OpenAI Codex API 配置 +- **Claude API**: 管理 Anthropic Claude API 配置 +- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商 + +### 认证文件管理 +- 上传认证 JSON 文件 +- 下载现有认证文件 +- 删除单个或所有认证文件 +- 显示文件详细信息 + +### 系统监控 +- 实时 API 连接状态 +- 最后更新时间跟踪 +- 详细的错误信息提示 + +## 使用方法 + +### 1. 直接使用(推荐) +直接用浏览器打开 `index.html` 文件即可使用。 + +### 2. 使用本地服务器 +```bash +# 安装依赖 +npm install + +# 使用默认端口(3000) +npm start +``` + +### 3. 配置 API 连接 +1. 打开管理界面 +2. 在认证配置区域输入: + - **API 地址**: `http://localhost:8317`/v0/management将会自动为您补全 + - **管理密钥**: 您的管理密钥 +3. 点击"测试连接"按钮 +4. 连接成功后即可使用所有功能 + +## 界面说明 + +### 导航菜单 +- **基础设置**: 调试、代理、重试等基本配置 +- **API 密钥**: 各种 API 服务的密钥管理 +- **AI 提供商**: AI 服务提供商配置 +- **认证文件**: 认证文件的上传下载管理 +- **系统信息**: 连接状态和系统信息 + +### 操作按钮 +- **刷新全部**: 重新加载所有配置数据 +- **连接状态**: 检查 API 连接状态 +- **添加**: 添加新的配置项 +- **编辑**: 编辑现有配置 +- **删除**: 删除配置项 + +## 特性亮点 + +### 现代化 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. 确认防火墙设置允许连接 + +### 跨域问题 +如果直接打开 HTML 文件遇到跨域问题,请使用本地服务器模式: +```bash +npm run dev +``` + +### 数据不更新 +1. 点击"刷新全部"按钮 +2. 检查网络连接 +3. 查看浏览器控制台错误信息 + +## 开发说明 + +### 文件结构 +``` +webui/ +├── index.html # 主页面 +├── styles.css # 样式文件 +├── app.js # 应用逻辑 +├── package.json # 项目配置 +└── README.md # 说明文档 +``` + +### API 调用 +所有 API 调用都通过 `CLIProxyManager` 类的 `makeRequest` 方法处理,包含: +- 自动添加认证头 +- 错误处理 +- JSON 响应解析 + +### 状态管理 +- 本地存储保存 API 地址和密钥 +- 内存中维护连接状态 +- 实时数据刷新机制 + +## 许可证 + +MIT License + +## 贡献 + +欢迎提交 Issue 和 Pull Request 来改进这个项目!