chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-02 19:00:49 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
89099b58ffc3eb2adf698db307b86b17502a8993
Cli-Proxy-API-Management-Ce…/README_CN.md
Supra4E8C 89099b58ff update README
2025-10-26 14:56:54 +08:00

5.9 KiB
Raw Blame History

Cli-Proxy-API-Management-Center

这是一个用于管理 CLI Proxy API 的现代化 Web 界面。

主项目 https://github.com/router-for-me/CLIProxyAPI

示例网站: https://remote.router-for.me/

最低可用版本 ≥ 6.0.0

推荐版本 ≥ 6.2.32

自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 文件
  • 下载现有认证文件
  • 删除单个或所有认证文件
  • 显示文件详细信息

使用统计

  • 实时分析: 通过交互式图表跟踪 API 使用情况
  • 请求趋势: 按小时/天可视化请求模式
  • Token 使用: 监控 Token 消耗随时间变化
  • API 详情: 每个 API 端点的详细统计
  • 成功率/失败率: 跟踪 API 可靠性指标

系统信息

  • 连接状态: 实时连接监控
  • 配置状态: 跟踪配置加载状态
  • 服务器信息: 显示服务器地址和管理密钥
  • 最后更新: 显示数据最后刷新时间

使用方法

1. 在CLI Proxy API程序启动后使用 （推荐）

在启动了CLI Proxy API程序后 访问http://您的服务器IP:8317/management.html使用

2. 直接使用

直接用浏览器打开 index.html 文件即可使用。

3. 使用本地服务器

方法A：使用 Node.js (npm)

# 安装依赖
npm install

# 使用默认端口(3000）
npm start

方法B：使用 Python

# Python 3.x
python -m http.server 8000

然后在浏览器中打开 http://localhost:8000。

3. 配置连接

  1. 打开管理界面
  2. 在登录界面上输入：
    • 远程地址: 现版本远程地址将会自动从您的访问地址中获取 当然您也可以自定义
    • 管理密钥: 您的管理密钥
  3. 点击"连接"按钮
  4. 连接成功后即可使用所有功能

界面说明

导航菜单

  • 基础设置: 调试、代理、重试等基本配置
  • API 密钥: 各种 API 服务的密钥管理
  • AI 提供商: AI 服务提供商配置
  • 认证文件: 认证文件的上传下载管理
  • 使用统计: 实时分析和使用统计，包含交互式图表
  • 系统信息: 连接状态和系统信息

登录界面

  • 自动连接: 使用保存的凭据自动尝试连接
  • 自定义连接: 手动配置 API 基础地址
  • 当前地址检测: 自动检测并使用当前访问地址
  • 语言切换: 支持多种语言（英文/中文）
  • 主题切换: 支持明暗主题

特性亮点

现代化 UI

  • 响应式设计，支持各种屏幕尺寸
  • 美观的渐变色彩和阴影效果
  • 流畅的动画和过渡效果
  • 直观的图标和状态指示
  • 明暗主题支持，自动检测系统偏好
  • 移动端友好的侧边栏和遮罩

实时更新

  • 配置更改立即生效
  • 实时状态反馈
  • 自动数据刷新
  • 实时使用统计和交互式图表
  • 实时连接状态监控

安全特性

  • 密钥遮蔽显示
  • 安全凭据存储
  • 加密本地存储自动登录

响应式设计

  • 完美适配桌面和移动设备
  • 自适应布局，可折叠侧边栏
  • 触摸友好的交互
  • 移动端菜单和遮罩

分析与监控

  • Chart.js 驱动的交互式图表
  • 实时使用统计
  • 请求趋势可视化
  • Token 消耗跟踪
  • API 性能指标

技术栈

  • 前端: 纯 HTML、CSS、JavaScript (ES6+)
  • 样式: CSS3 + Flexbox/Grid，支持 CSS 变量
  • 图标: Font Awesome 6.4.0
  • 图表: Chart.js 交互式数据可视化
  • 字体: Segoe UI 系统字体
  • API: RESTful API 调用，自动认证
  • 国际化: 自定义 i18n 系统，支持中英文
  • 主题系统: CSS 自定义属性动态主题
  • 存储: LocalStorage 用户偏好和凭据存储

故障排除

连接问题

  1. 确认 CLI Proxy API 服务正在运行
  2. 检查 API 地址是否正确
  3. 验证管理密钥是否有效
  4. 确认防火墙设置允许连接

数据不更新

  1. 点击"刷新全部"按钮
  2. 检查网络连接
  3. 查看浏览器控制台错误信息

开发说明

文件结构

webui/
├── index.html          # 主页面，响应式布局
├── styles.css          # 样式文件，支持主题
├── app.js              # 应用逻辑和 API 管理
├── i18n.js             # 国际化支持（中英文）
├── package.json        # 项目配置
├── build.js            # 生产环境构建脚本
├── bundle-entry.js     # 打包入口文件
├── build-scripts/      # 构建工具
│   └── prepare-html.js # HTML 准备脚本
├── logo.jpg            # 应用图标
├── LICENSE             # MIT 许可证
├── README.md           # 英文文档
├── README_CN.md        # 中文文档
└── BUILD_RELEASE.md    # 构建和发布说明

API 调用

所有 API 调用都通过 ManagerAPI 类的 makeRequest 方法处理，包含：

  • 自动添加认证头
  • 错误处理
  • JSON 响应解析

状态管理

  • 本地存储保存 API 地址和密钥
  • 内存中维护连接状态
  • 实时数据刷新机制

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！我们欢迎更多的大佬来对这个WebUI进行更新！

本项目采用MIT许可

Reference in New Issue View Git Blame Copy Permalink