一个基于官方仓库二次创作的 Web 管理界面
本项目是基于官方 CLI Proxy API WebUI 进行开发的日志监控和数据可视化管理界面
本版本与官方版本其他功能保持一致,主要差异在于新增监控中心,对日志分析和查看的增强
管理界面展示
在你的 config.yaml 中修改以下配置:
remote-management:
panel-github-repository: "https://github.com/kongkongyo/Cli-Proxy-API-Management-Center"配置完成后,重启 CLI Proxy API 服务,访问 http://<host>:<api_port>/management.html 即可查看管理界面
详细配置说明请参考官方文档:https://help.router-for.me/cn/management/webui.html
这是本管理界面相对于官方版本的唯一新增功能,提供了全方位的数据可视化和监控能力
注意:CLI Proxy API 主程序目前没有数据持久化功能,重启程序后统计数据会丢失。需要先通过 API 使用相关服务产生数据后,才能在监控中心看到统计信息。
实时展示核心运营指标,支持按时间范围筛选:
- 请求数:总请求数、成功/失败统计、成功率百分比
- Token 数:总 Token 数、输入 Token、输出 Token
- 平均 TPM:每分钟 Token 使用量
- 平均 RPM:每分钟请求数
- 日均 RPD:日均请求数
所有指标都会根据选择的时间范围(今天/7天/14天/30天)动态计算,实时更新
直观的饼图展示不同模型的使用占比:
- 按请求数分布
- 按 Token 数分布
- 可切换查看请求占比或 Token 占比
详细的时间序列图表,展示每日用量变化趋势:
- 请求数趋势曲线
- 输入 Token 趋势
- 输出 Token 趋势
- 思考 Token 趋势(如支持)
- 缓存 Token 趋势
两个详细的小时级图表,帮助定位高峰时段:
每小时模型请求分布
- 柱状图展示不同模型在各小时的请求数
- 支持最近 6 小时/12 小时/24 小时/全部视图切换
每小时 Token 用量
- 堆叠柱状图展示 Token 使用构成
- 区分输入 Token、输出 Token、思考 Token、缓存 Token
详细表格展示各渠道(API Key/模型)的使用情况:
- 可按全部渠道/特定渠道筛选
- 可按全部模型/特定模型筛选
- 可按全部状态/仅成功/仅失败筛选
- 显示渠道名称、请求数、成功率
- 点击展开查看该渠道下各模型的详细统计
- 显示最近请求状态(最近 10 次请求的迷你状态条)
- 最近请求时间
帮助定位问题渠道和模型:
- 按渠道统计失败次数
- 显示最近失败时间
- 列出主要失败的模型
- 点击展开查看该渠道下所有失败的请求详情
功能强大的请求日志表格,支持海量数据流畅浏览
多维度筛选
- 按 API Key 筛选
- 按提供商类型筛选(OpenAI/Gemini/Claude 等)
- 按模型名称筛选
- 按来源渠道筛选
- 按请求状态筛选(全部/成功/失败)
独立时间范围
- 支持今天/7天/14天/30天/自定义日期范围
- 与主页面时间范围独立控制
虚拟滚动
- 支持 10 万+ 条日志流畅浏览
- 显示当前可见范围统计
- 性能优化,只渲染可见行
智能信息展示
- 自动匹配 API Key 到提供商名称(基于配置信息)
- 完整的渠道信息(提供商名称 + 掩码后的密钥)
- 请求类型/模型名称/请求状态
- 最近 10 次请求的状态可视化(绿点=成功,红点=失败)
- 成功率百分比
- 总请求数/输入 Token/输出 Token/总 Token
- 请求时间(完整时间戳)
自动刷新
- 支持手动刷新 / 5秒 / 10秒 / 15秒 / 30秒 / 60秒 自动刷新
- 倒计时显示下次刷新时间
- 独立数据加载,不阻塞主页面
一键禁用模型
- 支持直接在日志中禁用某渠道的某个模型
- 只对支持该操作的渠道类型生效
- 不支持时显示提示和手动操作指南
以下功能与官方版本一致,通过改进的界面提供更好的使用体验
- 连接状态实时监控
- 服务器版本和构建信息一目了然
- 使用数据快速概览,掌握全局
- 可用模型统计
- 添加、编辑、删除 API 密钥
- 管理代理服务认证
- Gemini:API 密钥管理、排除模型、模型前缀
- Claude:API 密钥和配置、自定义模型列表
- Codex:完整配置管理(API 密钥、Base URL、代理)
- Vertex:模型映射配置
- OpenAI 兼容:多密钥管理、模型别名导入、连通性测试
- Ampcode:上游集成和模型映射
- 上传、下载、删除 JSON 认证文件
- 支持多种提供商(Qwen、Gemini、Claude 等)
- 搜索、筛选、分页浏览
- 查看每个凭证支持的模型
- 一键启动 OAuth 授权流程
- 支持 Codex、Anthropic、Gemini CLI、Qwen、iFlow 等
- 自动保存认证文件
- 支持远程浏览器回调提交
- Antigravity 额度查询
- Codex 额度查询(5 小时、周限额、代码审查)
- Gemini CLI 额度查询
- 一键刷新所有额度
- 请求/Token 趋势图表
- 按模型和 API 的详细统计
- RPM/TPM 实时速率
- 缓存和推理 Token 分解
- 成本估算(支持自定义价格)
- 在线编辑
config.yaml - YAML 语法高亮
- 搜索和导航
- 保存和重载配置
- 实时日志流
- 搜索和过滤
- 自动刷新
- 下载错误日志
- 屏蔽管理端流量
- 连接状态检查
- 版本更新检查
- 可用模型列表展示
- 快捷链接入口
以下格式都可以,系统会自动识别
localhost:8317
http://192.168.1.10:8317
https://example.com:8317
管理密钥是验证管理操作的钥匙,和客户端使用的 API 密钥不一样
从非本地浏览器访问的时候,需要在服务器启用远程管理(allow-remote-management: true)
- 亮色模式
- 暗色模式
- 跟随系统
- 简体中文
- English
- 桌面端完整功能
- 移动端适配体验
- 侧边栏可折叠
Q: 如何使用这个自定义 UI?
A: 在 CLI Proxy API 的配置文件中添加以下配置即可
remote-management:
panel-github-repository: "https://github.com/kongkongyo/CLIProxyAPI-Web-Dashboard"Q: 无法连接到服务器?
A: 请检查以下内容
- API 地址是否正确
- 管理密钥是否正确
- 服务器是否启动
- 远程访问是否启用
Q: 日志页面不显示?
A: 需要去"基础设置"里开启"日志记录到文件"功能
Q: 某些功能显示"不支持"?
A: 可能是服务器版本太旧,升级到最新版本的 CLI Proxy API
Q: OpenAI 提供商测试失败?
A: 测试是在浏览器端执行的,可能会受到 CORS 限制,失败不一定代表服务器端不能用
Q: 这个版本和官方版本有什么区别?
A: 主要区别有两个:
- 界面风格:全新的视觉设计,UI 细节更精致
- 监控中心:这是唯一新增的功能模块,提供了强大的数据可视化和监控能力,包括 KPI 仪表盘、模型用量分布、趋势分析、小时级图表、渠道统计、失败分析和高级请求日志等功能
其他所有功能与官方版本保持一致
- 官方主程序: https://github.com/router-for-me/CLIProxyAPI
- 官方 WebUI: https://github.com/router-for-me/Cli-Proxy-API-Management-Center
- 本仓库: https://github.com/kongkongyo/CLIProxyAPI-Web-Dashboard
MIT License
