OpenCC

OpenCC 是一个功能强大的跨平台桌面应用，旨在简化 Claude Code 代理服务的管理和监控。通过图形化界面，用户可以轻松配置代理服务、查看运行日志、监控 Token 消耗、管理对话历史等。

• 🎯 图形化配置 - 无需手动编辑配置文件，通过界面轻松配置代理服务
• 📊 实时监控 - 实时查看运行日志、Token 消耗、请求统计
• 💬 对话历史 - 查看和管理所有对话历史，支持搜索和导出
• 🔧 环境检查 - 自动检测本地环境，确保依赖完整
• 📈 数据统计 - 可视化展示 Token 消耗、请求耗时、成功率等数据
• 🎨 极简设计 - 采用全新的极简主义设计系统，提供清晰的视觉层次和信息架构
• 🌓 暗黑模式 - 原生支持深色模式，可跟随系统自动切换或手动设置
• 🔌 插件管理 - 完善的 MCP (Model Context Protocol) 和 Skills 管理功能
• 🔄 多模型支持 - 支持 Claude Code 和 Codex CLI 双客户端

• 操作系统: macOS 10.15 (Catalina) 或更高版本 / Windows 10/11
• Node.js: v16.0.0 或更高版本
• Claude Code: 已安装并配置

1. 访问 Releases 页面
2. 下载最新版本的 OpenCC-x.x.x.dmg（macOS）或 OpenCC-x.x.x.exe（Windows）
3. 双击打开安装文件
4. 将应用拖拽到 Applications 文件夹（macOS）或按向导安装（Windows）
5. 打开应用，开始使用

# 1. 克隆仓库
git clone https://github.com/jiashuaiLu/opencc.git
cd opencc

# 2. 安装依赖
npm install

# 3. 开发模式运行
npm run electron:dev

# 4. 构建生产版本
npm run electron:build

首次使用时，需要进行基础配置：

1. 打开应用，进入"配置管理"页面
2. 输入配置名称（如："OpenAI-Production"）
3. 输入 API Key（例如：sk-xxxxx）
4. 选择或输入 Base URL（例如：https://api.openai.com/v1）
5. 设置代理端口（默认：8787）
6. 点击"保存配置"

配置完成后：

1. 回到"仪表盘"页面
2. 点击"启动服务"按钮
3. 等待服务启动完成（状态变为"运行中"）
4. 现在可以使用 Claude Code 了！

在"运行日志"页面可以：

• 查看实时运行日志
• 按级别过滤日志（INFO/WARN/ERROR）
• 搜索特定日志
• 导出日志文件

在"仪表盘"页面可以查看：

• 总请求数
• 成功率
• Token 消耗
• 平均响应时间

在"对话历史"页面可以：

• 查看所有对话记录
• 搜索特定对话
• 查看对话详情
• 删除历史记录

• MCP 管理: 配置和管理 Model Context Protocol 服务器
• Skills 管理: 管理和发现 Claude Code 技能插件，支持从 ZIP 安装、扫描本地目录或从仓库安装

opencc/
├── src/
│   ├── main/                 # Electron 主进程
│   │   ├── index.ts         # 主进程入口
│   │   ├── preload.ts       # Preload 脚本
│   │   ├── proxy/           # 代理服务
│   │   ├── database/        # 数据库
│   │   ├── logger/          # 日志系统
│   │   └── ipc/             # IPC 通信
│   ├── renderer/            # 渲染进程（React）
│   │   ├── index.tsx        # 渲染进程入口
│   │   ├── App.tsx          # 应用根组件
│   │   ├── pages/           # 页面组件
│   │   ├── components/      # 通用组件
│   │   ├── styles/          # 样式文件 (common.css, global.css 等)
│   │   ├── theme/           # 主题配置
│   │   └── context/         # React Context (ThemeContext 等)
│   └── shared/              # 共享代码
│       └── types.ts         # 类型定义
├── resources/               # 资源文件
│   └── icons/              # 应用图标
├── tests/                  # 测试文件
├── package.json           # 项目配置
├── tsconfig.json          # TypeScript 配置
├── vite.config.ts         # Vite 配置
├── DESIGN_SYSTEM.md       # 设计规范文档
└── README.md              # 项目文档

• 前端框架: React 18 + TypeScript
• 桌面框架: Electron
• UI 组件: Ant Design 5
• 样式方案: CSS Variables + Ant Design Token
• 状态管理: Zustand + React Context
• 路由: React Router
• 图表: Recharts
• 数据库: LowDB
• 日志: Winston
• 构建工具: Vite + Electron Builder

# 开发模式
npm run dev                  # 启动 Vite 开发服务器
npm run electron:dev         # 启动 Electron 开发模式

# 构建
npm run build               # 构建前端代码
npm run electron:build      # 构建并打包应用

# 代码质量
npm run lint                # 运行 ESLint
npm run lint:fix            # 自动修复 ESLint 问题
npm run format              # 格式化代码

• 基础框架搭建
• 代理服务管理
• 配置管理
• 日志查看
• 基础统计
• 对话历史
• MCP & Skills 管理
• 全新 UI/UX 设计
• 暗黑模式支持
• Codex CLI 支持
• 多配置管理
• 配置导入/导出

• 高级统计分析
• 性能优化
• 插件系统增强
• 主题定制增强
• 自动更新功能

• 选 OpenCC：你需要协议转换（如 OpenAI 格式转 Anthropic 格式）、请求级监控统计、或需要一个本地代理层来统一管理 API 转发。
• 选 CC Switch：你同时使用多个 AI CLI 工具（不只是 Claude Code），需要在多家第三方供应商之间频繁切换，或需要跨设备云同步配置。

我们欢迎所有形式的贡献！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

• 使用 TypeScript 编写代码
• 遵循 ESLint 规则
• 使用 Prettier 格式化代码
• 编写清晰的提交信息

本项目采用 MIT 许可证 - 详见 LICENSE 文件

感谢以下开源项目：

• Electron
• React
• Ant Design
• Vite
• TypeScript
• Recharts

• GitHub: @jiashuaiLu