opencode-config-switcher
v0.1.1
Published
Local web application for managing and switching full OpenCode JSONC profiles.
Maintainers
cmoon-cylReadme
OpenCode Config Switcher
一个本地化的 OpenCode 配置文件管理工具，支持 Web UI 与 ocs CLI — 像管理浏览器书签一样管理你的配置
功能特性 • 工作原理 • 界面预览 • 本地开发 • 技术栈
🤔 为什么需要这个工具？
如果你是一个经常折腾配置的人，你一定遇到过这些问题：
- 🔄 想在不同项目之间快速切换 API Key、模型配置
- 🧪 想试验新配置但又怕搞乱当前好用的设置
- 😰 手动编辑 JSON 文件时不小心改坏了想回到上一个版本
- 📦 想把某套配置备份下来，以后随时恢复
OpenCode Config Switcher 就是为了解决这些问题而生的。
把
opencode.json变成可以随时切换、对比、备份的「配置档案」。
✨ 功能特性
📁 多档案管理
存储多套完整的 OpenCode 配置档案，随时切换。就像浏览器的配置文件一样——工作用一套，个人用一套，实验用一套。
📥 灵活导入
从当前在线配置直接导入，或者上传 JSON/JSONC 文件。一键把现有配置变成可管理的档案。
✏️ JSONC 编辑器
基于 Monaco Editor（VS Code 同款）的专业编辑器。支持 JSONC 注释、语法高亮、自动补全。
🔍 配置对比
将保存的档案与当前在线配置逐行对比。一眼看出差异，精准切换。
⚡ 一键应用
选中一个档案，点击应用，自动备份旧配置并写入新的。安全无忧。
🛡️ 自动备份
每次应用新配置前，自动备份当前配置。改坏了？随时恢复。
更多特性
- 漂移检测 — 自动检测保存的档案与在线配置之间的差异
- 档案管理 — 重命名、删除档案
- 中英文切换 — 支持 UI 语言切换
- 文件上传导入 — 支持拖拽或选择本地 JSON/JSONC 文件导入
- CLI 工具 — 支持
ocs web、ocs list、ocs add、ocs switch、ocs remove、ocs path
🏗️ 工作原理
graph TB
subgraph "📂 配置档案库"
P1[档案: 生产环境<br/>GPT-4 + 高精度]
P2[档案: 开发环境<br/>本地模型 + 快速响应]
P3[档案: 实验环境<br/>新模型测试]
end
subgraph "🔧 OpenCode Config Switcher"
EDITOR[Monaco JSONC 编辑器]
DIFF[配置对比引擎]
APPLY[应用 & 备份引擎]
STORAGE[本地存储<br/>%APPDATA%/opencode-config-switcher]
end
subgraph "💻 文件系统"
LIVE[opencode.json<br/>在线配置]
BACKUP[backups/<br/>自动备份]
end
P1 --> EDITOR
P2 --> EDITOR
P3 --> EDITOR
EDITOR --> |编辑| P1
DIFF --> |对比| LIVE
APPLY --> |读取| P1
APPLY --> |备份| BACKUP
APPLY --> |写入| LIVE
STORAGE --> |持久化| P1
STORAGE --> |持久化| P2
STORAGE --> |持久化| P3
style P1 fill:#e8f5e9,stroke:#4caf50
style P2 fill:#e3f2fd,stroke:#2196f3
style P3 fill:#fff3e0,stroke:#ff9800
style LIVE fill:#fce4ec,stroke:#e91e63
style BACKUP fill:#f3e5f5,stroke:#9c27b0核心流程
sequenceDiagram
participant User
participant UI as Web UI
participant API as Next.js API
participant FS as 文件系统
Note over User,FS: 📥 导入配置
User->>UI: 导入在线配置 / 上传文件
UI->>API: POST /api/import/live
API->>FS: 读取 opencode.json
FS-->>API: JSONC 内容
API->>FS: 保存为档案
API-->>UI: 档案列表更新
Note over User,FS: ✏️ 编辑档案
User->>UI: 在 Monaco 编辑器中修改
UI->>API: PUT /api/profiles/:id
API->>FS: 更新档案文件
Note over User,FS: 🔍 对比差异
User->>UI: 选择档案查看 Diff
UI->>API: GET /api/state
API->>FS: 读取档案 + 在线配置
API-->>UI: 返回差异数据
Note over User,FS: ⚡ 应用配置
User->>UI: 点击「应用」
UI->>API: POST /api/profiles/:id/apply
API->>FS: 备份当前在线配置
API->>FS: 写入新配置
API-->>UI: 应用成功🖥️ 界面预览
布局结构
┌─────────────────────────────────────────────────────────┐
│ 📥 导入 💾 保存 ⚡ 应用 ⚙️ 偏好 │ ← 顶部工具栏
├─────────────────────────────────────────────────────────┤
│ 🟢 在线配置状态：已同步 / ⚠️ 存在差异 │ ← 状态条
├──────┬──────────────────────────────────────────────────┤
│ │ │
│ 📁 │ ┌─────────┬──────────┬─────────┐ │
│ 档 │ │ 概览 │ 编辑器 │ 对比 │ │ ← 标签页
│ 案 │ ├─────────┴──────────┴─────────┤ │
│ 列 │ │ │ │
│ 表 │ │ 📝 Monaco JSONC 编辑器 │ │
│ │ │ │ │
│ 📁 │ │ 或 │ │
│ 档 │ │ │ │
│ 案 │ │ 📊 Diff 对比视图 │ │
│ A │ │ │ │
│ │ └──────────────────────────────┘ │
│ 📁 │ │
│ 档 │ │
│ 案 │ │
│ B │ ┌──────────────────────────────┐ │
│ │ │ 🌐 语言 + 当前配置路径设置 │ │ ← 偏好面板
└──────┴──┴──────────────────────────────┴───────────────┘📂 项目结构
opencode-config-switcher/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── page.tsx # 首页 → AppShell
│ │ ├── layout.tsx # 全局布局
│ │ ├── globals.css # 全局样式
│ │ └── api/ # API 路由
│ │ ├── profiles/
│ │ │ ├── route.ts # POST 创建档案
│ │ │ └── [id]/
│ │ │ ├── route.ts # PUT/DELETE 单个档案
│ │ │ └── apply/
│ │ │ └── route.ts # POST 应用档案
│ │ ├── import/
│ │ │ ├── live/route.ts # 从在线配置导入
│ │ │ └── file/route.ts # 从文件导入
│ │ └── state/route.ts # 获取应用状态
│ │
│ ├── components/ # React 组件
│ │ ├── app-shell.tsx # 应用主框架
│ │ ├── header-bar.tsx # 顶部工具栏
│ │ ├── live-status-strip.tsx # 在线状态条
│ │ ├── profile-list.tsx # 档案列表
│ │ ├── profile-editor.tsx # Monaco 编辑器
│ │ ├── profile-overview.tsx # 档案概览
│ │ ├── profile-diff.tsx # Diff 对比视图
│ │ ├── apply-dialog.tsx # 应用确认对话框
│ │ ├── import-dialog.tsx # 导入对话框
│ │ ├── rename-profile-dialog.tsx # 重命名对话框
│ │ ├── delete-profile-dialog.tsx # 删除确认对话框
│ │ ├── language-switcher.tsx # 语言切换
│ │ ├── preferences-panel.tsx # 偏好设置面板
│ │ └── ui/ # shadcn/ui 基础组件
│ │
│ └── lib/
│ ├── config/ # 配置管理核心逻辑
│ ├── i18n/ # 国际化
│ └── utils.ts # 工具函数
│
├── src/cli/ # `ocs` CLI
│ ├── index.ts # CLI 入口
│ ├── commands.ts # 子命令实现
│ └── web.ts # 打开/启动网页端
│
├── tests/
│ ├── unit/ # Jest 单元测试
│ │ ├── app-shell.test.tsx
│ │ ├── cli.test.ts
│ │ ├── cli-smoke.test.ts
│ │ ├── jsonc.test.ts
│ │ ├── schema.test.ts
│ │ └── storage.test.ts
│ └── e2e/
│ └── smoke.spec.ts # Playwright E2E 测试
│
├── package.json
├── next.config.ts
├── tsconfig.json
├── playwright.config.ts
├── jest.config.ts
└── eslint.config.mjs🚀 本地开发
前置条件
- Node.js ≥ 18
- npm / pnpm / yarn
安装 & 启动
# 克隆仓库
git clone https://github.com/Cmoon-cyl/opencode-config-switcher.git
cd opencode-config-switcher
# 安装依赖
npm install
# 启动开发服务器
npm run dev打开 http://localhost:3000 🎉
可用脚本
| 命令 | 说明 |
|------|------|
| npm run dev | 启动开发服务器（Turbopack） |
| npm run build:cli | 构建 ocs CLI |
| npm run build | 生产构建 |
| npm run start | 启动生产服务器 |
| npm run lint | ESLint 代码检查 |
| npm test | 运行 Jest 单元测试 |
| npm run test:watch | Jest 监听模式 |
| npm run test:e2e | 运行 Playwright E2E 测试 |
完整验证
npm run lint && npm test && npm run build && npm run test:e2e🧰 CLI 用法
安装为全局命令
在项目目录中执行：
npm run build:cli
npm install -g .安装完成后可直接使用：
ocs help常用命令
ocs web
ocs list
ocs add <path> [name]
ocs add --cur [name]
ocs switch <name-or-id>
ocs remove <name-or-id>
ocs path --show
ocs path --default
ocs path --dir <directory>
ocs path --file <file>命令说明
ocs web：打开网页版ocs list：列出所有已保存档案ocs add <path> [name]：从指定opencode.json/ JSONC 文件导入ocs add --cur [name]：从当前 liveopencode.json导入ocs switch <name-or-id>：切换到某个已保存档案ocs remove <name-or-id>：显示档案名、ID、实际文件路径，并要求输入y/n确认删除ocs path --show：查看当前生效的 live config 路径ocs path --default：切回平台默认路径ocs path --dir <directory>：设置目录模式，自动拼接opencode.jsonocs path --file <file>：设置完整文件路径
每个命令的帮助
ocs add --help
ocs switch --help
ocs remove --help
ocs path --help🔧 技术栈
| 层面 | 技术 | 说明 | |------|------|------| | 框架 | Next.js 16 | App Router + Server Components | | UI 库 | React 19 | 最新 React 特性 | | 语言 | TypeScript 5 | 类型安全 | | 样式 | Tailwind CSS 4 | 原子化 CSS | | 组件库 | shadcn/ui | 高质量可定制组件 | | 编辑器 | Monaco Editor | VS Code 同款编辑器 | | JSON 处理 | jsonc-parser | JSONC 解析 | | 验证 | AJV | JSON Schema 验证 | | 单元测试 | Jest + Testing Library | 组件 & 逻辑测试 | | E2E 测试 | Playwright | 端到端测试 |
💾 数据存储
默认路径
在线配置目标（默认按平台推断，可在 Preferences 或 CLI 中覆盖）：
Windows: %USERPROFILE%\.config\opencode\opencode.json
macOS: ~/.config/opencode/opencode.json
Linux: ~/.config/opencode/opencode.json
应用数据目录：
Windows: %APPDATA%\opencode-config-switcher\
macOS/Linux: ~/.opencode-config-switcher/路径覆盖方式
你可以通过两种方式修改当前 live config 路径：
- Web UI 左下角
Preferences - CLI
ocs path --default|--dir|--file
数据目录结构
%APPDATA%\opencode-config-switcher\
├── index.json # 档案索引
├── profiles/ # 配置档案
│ ├── profile-a.json
│ └── profile-b.json
└── backups/ # 自动备份
├── 2026-04-01_14-30-00.json
└── 2026-04-02_09-15-00.json🔐 安全说明
⚠️ 当前版本中，档案内的敏感信息（如 API Key）以明文存储在本地文件中。
如果你的机器有被他人访问的风险，请注意这一点。
📄 License
MIT
配置管理，可以很简单。
Made with ⚡ by CMoon