Cli-Proxy-API-Management-Center/README.md

Cli-Proxy-API-Management-Center

这是一个用于管理 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. 使用本地服务器

# 安装依赖
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 文件遇到跨域问题，请使用本地服务器模式：

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 来改进这个项目！