W7Panel Web IDE

基于 Codeblitz (OpenSumi) 的在线代码编辑器，为 W7Panel 提供容器内文件在线编辑功能。

技术栈

• React - UI 框架
• Codeblitz/OpenSumi - Web IDE 核心
• Monaco Editor - 代码编辑器
• WebDAV - 文件系统后端

项目结构

codeblitz/
├── src/                       # 源码
├── scripts/                   # 构建脚本
├── node_modules/@codeblitzjs/ide-core/bundle/  # WASM 文件
└── dist/                      # 构建输出

快速开始

环境要求

• Node.js 18+

安装依赖

cd codeblitz
npm install

开发模式

npm run dev

构建生产版本

npm run build

构建输出在 dist/ 目录，需要部署到插件目录：

mkdir -p $BASE_DIR/dist/kodata/plugin/codeblitz
cp -r dist/* $BASE_DIR/dist/kodata/plugin/codeblitz/
cp node_modules/@codeblitzjs/ide-core/bundle/*.wasm $BASE_DIR/dist/kodata/plugin/codeblitz/

功能特性

• 语法高亮 - 支持多种编程语言
• 文件管理 - WebDAV 协议访问容器内文件
• 在线编辑 - 直接修改文件内容
• 主题切换 - 支持浅色/深色主题
• 搜索替换 - 支持正则表达式

编辑器配置

访问 URL 格式：

http://localhost:8080/ui/plugin/codeblitz/editor.html?api-url={webdav-url}&api-token={token}&initial-path={path}

参数说明：

• api-url - WebDAV API 地址
• api-token - 认证 Token
• initial-path - 初始打开路径

相关文档

• 编辑器深度测试报告
• 文本编辑器测试报告