Claude Code Web GUI 平台

基于 Claude Code CLI 的 Web 图形化界面 - 让 AI 编程工具人人可用

---

📋 项目概述

将 Claude Code 命令行工具转换为 Web 图形界面，降低使用门槛，让非程序员也能方便使用 AI 编程助手。

核心特性

• ✅ 智能CLI指令系统（指令说明 + 快捷按钮）
• ✅ 美观的科技风UI设计（React + Ant Design）
• ✅ 多用户配置管理（本地数据库）
• ✅ 本地文件系统访问
• ✅ 实时终端输出（xterm.js）
• ✅ 完全 Web 化（可远程部署）

---

🏗️ 项目结构

claude-code-web/
├── backend/                 # 后端服务
│   ├── src/
│   │   ├── server.ts       # Express 服务器
│   │   ├── socket/         # Socket.IO 服务
│   │   ├── cli/            # CLI 包装器
│   │   ├── api/            # REST API
│   │   ├── db/             # 数据库层
│   │   └── utils/          # 工具函数
│   ├── package.json
│   └── tsconfig.json
├── frontend/                # 前端应用
│   ├── src/
│   │   ├── components/     # React 组件
│   │   ├── pages/          # 页面组件
│   │   ├── services/       # API 服务
│   │   ├── hooks/          # 自定义 Hooks
│   │   ├── utils/          # 工具函数
│   │   └── App.tsx
│   ├── package.json
│   └── vite.config.ts
├── docker-compose.yml      # Docker 部署配置
├── Dockerfile
└── README.md

---

🚀 快速开始

环境要求

• Node.js >= 18
• Bun >= 1.2.0 (可选，用于运行 Claude Code CLI)
• SQLite (默认) / MySQL / PostgreSQL

安装依赖

# 后端
cd backend
npm install

# 前端
cd ../frontend
npm install

配置环境变量

创建 .env 文件：

# 服务器配置
PORT=3000
NODE_ENV=development

# 数据库配置
DB_TYPE=sqlite
DB_PATH=./data/claude.db

# Claude Code CLI 路径
CLAUDE_CODE_CLI_PATH=/Volumes/KINGSTON/faber_mac/claude-code/dist/cli.js

# 工作目录（可访问的本地目录）
WORK_DIR=/Volumes/KINGSTON/faber_mac

# JWT 密钥
JWT_SECRET=your-secret-key-here

启动服务

# 后端
cd backend
npm run dev

# 前端（新终端）
cd frontend
npm run dev

访问 http://localhost:5173

---

📖 使用文档

基础功能

1. 会话管理

• 创建新会话
• 查看会话列表
• 恢复历史会话
• 删除会话

2. 命令执行

• 智能指令快捷按钮
• 终端实时输出
• 命令历史记录
• 一键常用命令

3. 文件操作

• 浏览本地文件
• 编辑文件内容
• 上传/下载文件
• 代码高亮显示

4. 配置管理

• 添加模型配置
• 编辑/删除配置
• 设置默认模型
• 导入/导出配置

---

🛠️ 开发指南

技术栈

后端:

• Node.js + TypeScript
• Express.js (HTTP 服务器)
• Socket.IO (实时通信)
• Sequelize.js ORM (数据库)
• node-pty (伪终端)

前端:

• React + TypeScript
• Ant Design 5.x
• xterm.js (终端模拟)
• Socket.IO-client
• Vite (构建工具)

API 文档

详见 backend/API.md

数据库表设计

详见 backend/DATABASE.md

---

📦 部署指南

Docker 部署

# 构建镜像
docker-compose build

# 启动服务
docker-compose up -d

# 查看日志
docker-compose logs -f

Nginx 反向代理

详见 docs/NGINX.md

---

📚 文档

• 部署指南
• 运维文档
• API 文档
• 数据库设计

---

🎯 项目进度

• Phase 1: 数据库设计
• Phase 1: 项目脚手架
• Phase 1: CLI 包装器
• Phase 1: Socket.IO 服务
• Phase 1: 前端基础界面
• Phase 2: 完整功能实现
• Phase 2: 文件管理
• Phase 2: 用户认证
• Phase 3: 优化和文档

---

🔧 故障排查

常见问题和解决方案，详见 docs/TROUBLESHOOTING.md

---

📝 许可证

MIT License

---

开始时间: 2026-04-01 版本: v0.1.0-alpha 状态: 开发中