远程文件编辑器

一个为 ComputerCraft: Tweaked (CC:Tweaked) 设计的远程文件编辑器，支持实时文件管理和代码编辑。

Demo: http://cc-web-edit.liulikeji.cn

你可以直接使用 Demo，这是开放的，但你也可以部署自己的服务器

🌟 特性

核心功能

• 远程文件管理：实时浏览、编辑和管理 CC:Tweaked 计算机中的文件
• Monaco 编辑器：基于 VS Code 的 Monaco 编辑器，提供专业的代码编辑体验
• 低延迟通信：WebSocket 控制消息 + HTTP 文件缓存下载

文件操作

• ✅ 文件/文件夹创建、重命名、删除
• ✅ 文本文件在线编辑和保存
• ✅ 文件上传（支持多文件，最大 1MB）
• ✅ 文件下载到本地
• ✅ 二进制文件识别（非文本文件显示为 [binary]）
• ✅ 文件树快照自动同步
• ✅ 文件内容按点击懒加载
• ✅ 刷新时保留文件夹折叠/展开状态

CC:Tweaked 集成

• 自动命令生成：根据 URL 参数自动生成连接命令
• 一键复制：点击即可复制连接命令到剪贴板
• 复制反馈：复制成功或失败都会显示明确提示
• 房间管理：支持创建和加入房间
• 实时通信：基于 WebSocket 常驻连接的低延迟双向同步

🚀 快速开始

项目结构

项目根目录/
├── PyServer/                 # Python 后端服务器
│   ├── main.py              # 主服务器文件
│   └── static/              # 静态文件目录（需手动创建）
│       └── Client/
│           └── cc/
│               └── main.lua # CC:Tweaked 客户端脚本
├── Frontend1/               # Vue 前端项目
│   ├── src/
│   │   ├── App.vue         # 主组件
│   │   └── mock-server.ts  # WebSocket 客户端
│   └── package.json
└── Client/                  # 客户端文件
    └── main.lua            # CC:Tweaked 客户端脚本

部署步骤

1. 部署后端服务器

# 进入后端目录
cd PyServer

# 创建静态文件目录
mkdir -p static/Client/cc

# 复制客户端脚本到静态目录
cp ../Client/main.lua static/Client/cc/main.lua

# 安装依赖
pip install -r requirements.txt

# 启动服务器（需要管理员权限绑定80端口）
python main.py

服务器将启动：

• HTTP 服务：端口 80（页面、静态资源、房间创建接口、文件缓存接口、WebSocket 握手）

2. 构建前端项目

# 进入前端目录
cd Frontend1

# 安装依赖
npm install

# 构建生产版本
npm run build

# 将构建产物复制到后端静态目录
cp -r dist/* ../PyServer/static/

3. 访问编辑器 打开浏览器访问 http://你的服务器地址 即可使用编辑器，页面会自动建立 ws:// 或 wss:// 连接。

CC:Tweaked 客户端连接

1. 获取连接命令

   • 访问编辑器页面会自动创建房间
   • 在页面底部点击命令文本即可复制连接命令

2. 在游戏中运行

# 粘贴复制的命令到CC:Tweaked计算机
# 命令格式类似：wget run http://服务器地址/Client/cc/main.lua ws://服务器地址/ws 房间ID

3. 刷新文件列表
   • 在 CC 客户端连接成功后
   • 返回编辑器页面点击刷新按钮即可请求客户端立即推送一份最新文件树快照
   • 刷新后会保留当前文件夹的折叠/展开状态

🔧 功能说明

当前支持的功能

• 📁 文件系统浏览和操作
• 📝 文本文件在线编辑
• 🖥️ 终端同步与远程输入
• ⬆️ 文件上传（≤1MB）
• ⬇️ 文件下载到本地
• 🔄 实时文件同步

限制说明

• 二进制文件：非文本文件会显示为 [binary]，无法在线编辑
• 单客户端：目前主要支持一个网页端和一个 CC 客户端的配对使用
• 文件大小：上传文件限制为 1MB
• 低延迟：WebSocket 常驻连接提供接近实时的控制消息响应
• 分包传输：普通 WebSocket 消息超过 131072 bytes 时会自动分包后再发送
• 文件内容分流：小文件内容优先直接走 WebSocket；较大文件内容会通过服务端文件缓存中转下载
• 安全保存：客户端保存文件时先写临时文件，成功后再替换原文件，避免写入失败时原文件被截断

⚙️ API 接口

HTTP / WebSocket 接口

• POST /api/room - 创建房间
• POST /api/file-cache - CC 客户端上传大文件内容到服务端临时缓存
• GET /api/file-cache/{token} - 前端下载一次性文件缓存内容
• GET /ws?role=frontend&room_id=房间ID - 前端加入房间 WebSocket
• GET /ws?role=client&room_id=房间ID - CC 客户端加入房间 WebSocket

通信机制

WebSocket + 文件缓存中转：

• 前端和 CC 客户端都使用常驻 WebSocket 长连接
• 单个 WebSocket 消息帧严格控制在 131072 bytes 以内
• 超大 JSON 消息会自动拆分为多个分包，到达对端后再重组
• 服务端会向前端广播房间内客户端在线状态
• 客户端每秒推送一次递归全量文件树快照
• 文件内容只在点击文件时单独请求
• fetch_file_content 会按大小分流：<= 100KB 的文本文件直接走 WebSocket 返回，> 100KB 的文本文件由 CC 客户端 POST /api/file-cache 上传后，前端再通过 GET /api/file-cache/{token} 下载
• 服务端文件缓存最大上传大小为 4194304 bytes
• 文件缓存为一次性下载：成功下载一次立即删除；若未下载，则会在 10 分钟内超时清理
• 前端刷新文件树时会保留当前文件夹折叠/展开状态
• 文件创建或保存失败时会将客户端返回的错误直接提示到前端

消息类型

• file_operation - 文件操作请求
• file_operation_response - 文件操作响应
• file_tree_snapshot - 客户端推送文件树快照
• room_status - 服务端推送房间在线状态

文件操作类型

• request_file_tree_snapshot - 请求客户端立即推送文件树快照
• fetch_file_content - 获取单个文件内容
• create_or_save_file - 创建/保存文件
• new_file - 创建新文件
• new_folder - 创建新文件夹
• rename - 重命名文件/文件夹
• delete_file - 删除文件/文件夹

🎯 使用流程

1. 访问编辑器：打开服务器地址，自动创建房间
2. 复制命令：点击编辑器主页的 CC:Tweaked 命令文本，复制到剪贴板，并显示复制成功或失败提示
3. CC 端连接：在游戏中粘贴并运行命令
4. 等待同步：CC 端连接后，文件树会自动开始同步
5. 手动刷新：需要立即更新时，点击刷新按钮请求一份最新快照
6. 开始编辑：点击文件时按需加载内容并进行编辑

🔒 注意事项

1. 权限要求：服务器需要绑定 80 端口
2. 网络访问：确保 CC:Tweaked 计算机可以访问你的服务器
3. 文件安全：保存时会先写入临时文件并在成功后替换原文件，尽量避免磁盘空间不足等异常导致原文件丢失

📄 技术说明

• 后端：Python + aiohttp HTTP/WebSocket Server
• 前端：Vue 3 + TypeScript + Monaco Editor
• 通信：WebSocket 双向通信 + 131072 bytes 上限分包传输 + 大文件 HTTP 缓存中转 + 房间在线状态广播
• 客户端：CC:Tweaked + WebSocket

贡献

欢迎提交 issues