CLI Proxy Manager - VSCode Extension

VSCode 扩展，用于管理 CLI Proxy API，提供侧栏管理界面、嵌入式 WebUI 和实时配额显示。

功能特性

🎯 主侧栏管理界面（全新）

• 配置管理：直接在侧栏中查看和编辑服务器地址、管理密钥
• 连接管理：一键连接到 CLI Proxy 服务器，实时显示连接状态
• 认证文件管理：查看所有认证文件的额度，可快速启用/禁用显示
• 配置自动生效：修改配置后自动刷新额度，无需重启

🌐 嵌入式管理界面

• 在 VSCode 中直接打开 CLI Proxy 管理面板
• 完整的 WebUI 功能，无需切换浏览器
• 支持所有管理操作：配置文件、认证文件、配额查看等
• 连接成功后自动打开管理面板

📊 增强的实时配额显示

• 智能过滤：点击状态栏选择要显示的模型，支持多选
• 总额度计算：只计算选中模型的平均额度
• 实时更新：配额信息自动刷新并同步到所有 UI
• 支持三种代理类型切换：
  • ant (Antigravity) - Google Daily Cloudcode API
  • code (Codex) - ChatGPT API
  • claudecode (Claude Code) - Google Cloudcode API
• 显示每个配置文件的独立配额（如：GEMINI3PRO、CLAUDE、GEMINI3FLASH）
• 鼠标悬停查看详细配额信息和进度条
• 自动刷新（可配置间隔）

⚙️ 灵活配置

• 自定义服务器地址
• 配置管理 API 密钥
• 调整配额刷新间隔
• 控制状态栏显示开关

安装

从源码安装

1. 克隆或下载此扩展代码
2. 进入扩展目录：

cd vscode-cliproxy-extension

3. 安装依赖：

npm install

4. 编译扩展：

npm run compile

5. 在 VSCode 中按 F5 启动调试，或打包安装：

npm install -g @vscode/vsce
vsce package
code --install-extension cliproxy-manager-0.1.0.vsix

使用方法

1. 打开侧栏管理界面

首次安装后，点击 VSCode 左侧活动栏的 云图标（☁） 打开 CLI Proxy Manager 侧栏。

侧栏包含三个主要部分：

• Configuration：配置服务器地址和管理密钥
• Connection：连接状态和连接/断开按钮
• Auth Files：认证文件列表及其额度

2. 配置连接信息

在侧栏的 Configuration 部分：

1. 点击 Server URL 右侧的编辑图标，输入 CLI Proxy 服务器地址（如 http://localhost:8317）
2. 点击 Management Key 右侧的编辑图标，输入管理密钥（密码输入）
3. 配置会自动保存并生效

替代方式 - 使用配置向导：

• 命令面板：Ctrl+Shift+P / Cmd+Shift+P → 输入 "CLI Proxy: Setup Configuration Wizard"

3. 连接到服务器

配置完成后，在侧栏的 Connection 部分点击 Connect 按钮：

1. 状态会变为 "Connecting..."
2. 连接成功后显示 "Connected ✓"
3. 自动刷新认证文件列表和额度信息
4. 自动打开管理面板（webview 标签页）

4. 管理认证文件显示

在侧栏的 Auth Files 部分：

• ✓ 表示该文件已启用，会计入总额度并显示在状态栏
• ○ 表示该文件已禁用，不会显示在状态栏
• 点击文件名可以快速切换启用/禁用状态
• 每个文件显示当前额度百分比

5. 查看和过滤状态栏额度

点击状态栏可以打开模型选择器：

• 使用多选模式选择要显示的模型
• 只有选中的模型会显示在状态栏
• 总额度只计算选中模型的平均值
• 选择会自动保存

状态栏显示格式：

• ☁ [ANT] GEMINI3PRO:85% | CLAUDE:92% (Avg:88%)
• 只显示启用的模型
• 显示选中模型的平均额度

切换代理类型：

• 使用命令 "CLI Proxy: Cycle Proxy Type" 在 ant、code、claudecode 之间切换

6. 手动配置（可选）

您也可以手动配置：

1. 打开 VSCode 设置（Ctrl+, 或 Cmd+,）
2. 搜索 "CLI Proxy"
3. 配置以下选项：
   • Server URL: CLI Proxy 服务器地址（默认：http://localhost:8317）
   • Management Key: 管理 API 密钥（必填）
   • Refresh Interval: 配额刷新间隔（秒，默认：60）
   • Show Status Bar: 是否显示状态栏（默认：开启）

或直接编辑 settings.json：

{
  "cliproxy.serverUrl": "http://localhost:8317",
  "cliproxy.managementKey": "your-management-key-here",
  "cliproxy.refreshInterval": 60,
  "cliproxy.showStatusBar": true
}

3. 打开管理面板

使用以下任一方式打开管理面板：

• 命令面板：Ctrl+Shift+P / Cmd+Shift+P → 输入 "CLI Proxy: Open Management Panel"
• 状态栏：点击右下角的配额状态栏项
• 命令：执行 cliproxy.openManagement

3. 查看配额信息

配额信息会自动显示在 VSCode 右下角状态栏：

• 显示格式：☁ [ANT] GEMINI3PRO:85% | CLAUDE:92% | GEMINI3FLASH:100% (Avg:92%)
• 代理类型标识：方括号中显示当前代理类型（ANT、CODE、CLAUDECODE）
• 配置文件配额：显示每个配置文件名和对应的剩余配额百分比
• 平均配额：显示所有配置文件的平均剩余配额
• 未配置时：⚠ CLI Proxy: Not Configured - 点击进入设置页面
• 出错时：❌ CLI Proxy: Error - 点击查看设置
• 鼠标悬停：查看每个配置文件的详细配额和进度条
• 点击状态栏：在三种代理类型之间循环切换（ant → code → claudecode）
• 手动刷新：命令面板 → "CLI Proxy: Refresh Quota"

代理类型说明

• ant (Antigravity)：使用 Google Daily Cloudcode API 查询配额
• code (Codex)：使用 ChatGPT Backend API 查询配额
• claudecode (Claude Code)：使用 Google Cloudcode API 查询配额

点击状态栏可以在这三种类型之间切换，扩展会记住您的选择。

4. 管理认证文件

在管理面板中可以：

• 查看所有认证文件
• 上传新的认证文件
• 删除不需要的文件
• 查看详细配额信息

可用命令

命令	描述
CLI Proxy: Open Management Panel	打开管理面板 webview
CLI Proxy: Refresh Quota	手动刷新配额
CLI Proxy: Open Settings	打开扩展设置
CLI Proxy: Setup Configuration Wizard	启动配置向导（用于首次配置或重新配置）
CLI Proxy: Cycle Proxy Type	在三种代理类型之间切换（ant → code → claudecode）
Edit Server URL	编辑服务器地址（侧栏）
Edit Management Key	编辑管理密钥（侧栏）
Connect	连接到服务器（侧栏）
Disconnect	断开连接（侧栏）
Toggle Auth File	切换认证文件启用状态（侧栏）
Refresh	刷新侧栏视图
Select Models to Display	选择要在状态栏显示的模型

配置选项

选项	类型	默认值	描述
cliproxy.serverUrl	string	http://localhost:8317	CLI Proxy 服务器地址
cliproxy.managementKey	string	""	管理 API 密钥
cliproxy.refreshInterval	number	60	配额刷新间隔（秒）
cliproxy.showStatusBar	boolean	true	是否显示状态栏

故障排除

激活后显示 "Not Configured"

这是正常的首次使用状态：

1. 方法一（推荐）：点击状态栏的 "⚠ CLI Proxy: Not Configured"，会打开设置页面
2. 方法二：使用命令面板 → "CLI Proxy: Setup Configuration Wizard" 启动配置向导
3. 方法三：手动在设置中配置 cliproxy.serverUrl 和 cliproxy.managementKey

配置完成后，扩展会自动刷新并显示配额。

管理面板无法加载

1. 确认 CLI Proxy 服务器正在运行
2. 检查 cliproxy.serverUrl 配置是否正确
3. 验证服务器地址可访问（在浏览器中打开）

配额信息不显示

1. 确认已配置 cliproxy.managementKey（使用配置向导或手动配置）
2. 检查管理密钥是否正确
3. 查看 VSCode 开发者控制台（Help → Toggle Developer Tools）的错误信息
4. 尝试手动刷新配额（命令面板 → "CLI Proxy: Refresh Quota"）

状态栏显示错误

• "Not Configured": 需要配置服务器地址和管理密钥，点击状态栏即可进入设置
• "Error": 无法连接到服务器或 API 调用失败，点击状态栏查看详细错误，检查网络和配置

开发

项目结构

vscode-cliproxy-extension/
├── src/
│   ├── extension.ts          # 扩展主入口，组件协调
│   ├── types.ts              # 共享类型定义
│   ├── configManager.ts      # 配置管理器
│   ├── modelFilter.ts        # 模型过滤器
│   ├── quotaManager.ts       # 额度管理器（API调用）
│   ├── sidebarProvider.ts    # 侧栏 TreeView 提供器
│   ├── quotaStatusBar.ts     # 状态栏配额显示
│   └── managementPanel.ts    # WebView 管理面板
├── package.json              # 扩展清单
├── tsconfig.json             # TypeScript 配置
└── README.md                 # 文档

架构设计

插件采用事件驱动架构：

用户操作（侧栏/状态栏）
    ↓
ConfigManager / ModelFilter 更新
    ↓
触发事件（onConfigChange / onFilterChange）
    ↓
QuotaManager 刷新额度
    ↓
触发事件（onQuotaUpdate）
    ↓
UI 自动更新（SidebarProvider + QuotaStatusBar）

核心组件：

• ConfigManager：管理配置，监听变化
• ModelFilter：管理模型显示过滤
• QuotaManager：处理所有 API 调用，管理额度数据
• SidebarProvider：实现侧栏 TreeView
• QuotaStatusBar：状态栏显示和交互
• ManagementPanel：webview 管理界面

编译和调试

# 安装依赖
npm install

# 编译
npm run compile

# 监听模式（自动重新编译）
npm run watch

# 在 VSCode 中按 F5 启动调试

打包发布

# 安装打包工具
npm install -g @vscode/vsce

# 打包
vsce package

# 生成 cliproxy-manager-0.1.0.vsix

技术栈

• TypeScript - 类型安全的开发
• VSCode Extension API - WebView、StatusBar 等
• Axios - HTTP 请求
• CLI Proxy Management API - 配额和认证管理

许可证

与 CLI Proxy 主项目保持一致

贡献

欢迎提交 Issue 和 Pull Request！

相关链接

• VSCode Extension API