CLI Proxy API Management Center 标识 102269.xyz / CPA Case

Project 02 / Case Study / Control Panel

CLI Proxy API Management Center

这是一个给 CLI Proxy API 配套的 Web 管理面板案例。 它把配置、授权池、凭证文件、日志、配额和使用量统计整合进一套单文件交付的后台界面里, 目标不是“再做一个管理页”,而是把日常运维里最容易分散、最容易出错的流程重新组织起来。

management.html / dashboard

Server Connected
Current Pool production-auth-a
Version >= 6.8.x

Usage

把请求量、Token、成本趋势放在一眼能读懂的位置。

Auth Pool

单活授权池切换

  • 多池路径维护
  • 当前池快速切换
  • 文件启停与检索

Config

可视化 + YAML 双编辑模式

logs / incremental polling

provider routing / auth files

Gemini Claude Codex Vertex OpenAI OAuth Quota Logs

Why This Panel Exists

这个项目的价值,不在于“功能多”,而在于把高频运维动作压缩成更顺手的路径。

CLI Proxy API 本身承担的是服务层工作,但真正让人每天反复打开的, 往往是配置调整、授权池切换、日志排查、模型映射和配额观察。 如果这些能力只散落在配置文件、命令行和多个临时工具里,维护成本会非常高。

01

把“配置”从文本文件拉回到可读的界面里

保留 YAML 原始编辑能力,但补上可视化配置区块,降低日常改动门槛。

02

把“故障排查”从猜测变成可追踪的日志流程

支持日志轮询、搜索、隐藏管理流量和错误文件下载,让排查路径更短。

03

把“多账号 / 多模型 / 多提供商”收束进一个控制面板

授权池、模型别名、供应商配置和使用量统计不再分散在不同入口里。

Capability Deck

案例页里重点展示的,是这套后台最有辨识度的几块。

Dashboard + Usage

连接状态、快速统计、请求趋势和成本感知被合并成一条操作视线。

用户不需要先切页再拼装信息,打开面板就能知道当前服务是不是健康、资源耗用是不是异常、该先查哪里。

Auth Pool

把授权池切换做成主流程,而不是隐藏能力。

可以维护多个池路径、切换当前池、搜索池内账号,并快速启停授权文件。

Providers

同一界面管理多家模型提供商。

Gemini、Claude、Codex、Vertex、OpenAI-compatible 等配置都被统一到同一套界面语言中。

Config Editor

既给熟手留原始控制权,也给日常维护留轻量入口。

YAML 高亮、搜索和可视化编辑并存,适合从“快速改参数”到“精细校验”不同节奏的使用方式。

Logs + OAuth + Quota

运维后台该有的“后半段能力”,这次没有被省略掉。

日志轮询、OAuth 流程、凭证文件管理和配额面板,让它更接近真实维护工具,而不是只有首页和几个配置表单的样板后台。

Build Notes

实现上,我更在意这套后台能不能真正被拿去部署和维护。

所以这个项目选择了单文件构建方向,让最终产物可以作为 `management.html` 被直接打包进主程序里,同时保留现代前端需要的状态管理、图表、国际化和模块化组件结构。

Frontend React 19 + TypeScript 5.9
Tooling Vite 7 / Single-file build
State + Data Zustand / Axios / Management API
Interaction Chart.js / CodeMirror / HashRouter / i18next

Repository

如果你想看这个项目的真实代码和仓库结构,可以直接去 GitHub。

这个案例页展示的是我如何把一个真实运维后台重新组织成可阅读、可解释、也更适合作品集展示的项目页面。