{"id":29022592,"url":"https://github.com/xxmudcloudxx/lowcode-editor","last_synced_at":"2026-05-07T02:34:24.098Z","repository":{"id":296678604,"uuid":"992712047","full_name":"xxMudCloudxx/lowcode-editor","owner":"xxMudCloudxx","description":"一个基于 React 和 TypeScript 构建的低代码编辑器","archived":false,"fork":false,"pushed_at":"2025-06-21T19:26:32.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-21T20:23:31.293Z","etag":null,"topics":["low-code","react","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"https://xxmudcloudxx.github.io/lowcode-editor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xxMudCloudxx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-29T15:38:06.000Z","updated_at":"2025-06-21T19:26:35.000Z","dependencies_parsed_at":"2025-06-01T17:38:25.566Z","dependency_job_id":"5c99e4b6-14d0-414d-909d-462e2d7e94f0","html_url":"https://github.com/xxMudCloudxx/lowcode-editor","commit_stats":null,"previous_names":["xxmudcloudxx/lowcode-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xxMudCloudxx/lowcode-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxMudCloudxx%2Flowcode-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxMudCloudxx%2Flowcode-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxMudCloudxx%2Flowcode-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxMudCloudxx%2Flowcode-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xxMudCloudxx","download_url":"https://codeload.github.com/xxMudCloudxx/lowcode-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxMudCloudxx%2Flowcode-editor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261990277,"owners_count":23241185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["low-code","react","typescript","vite","zustand"],"created_at":"2025-06-26T03:02:07.882Z","updated_at":"2026-05-07T02:34:24.089Z","avatar_url":"https://github.com/xxMudCloudxx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 轻量级低代码编辑器 (Low-Code Editor)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-18-blue\" alt=\"React\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-5.8-blueviolet\" alt=\"TypeScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Zustand-5.0-orange\" alt=\"Zustand\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-6.3-green\" alt=\"Vite\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React%20DND-16-purple\" alt=\"React DND\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/pnpm%20Monorepo-5pkg-lightgrey\" alt=\"Monorepo\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow\" alt=\"License\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e一款基于 React + TypeScript 构建的、高度可扩展的低代码编辑器。\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  通过\u003cstrong\u003e拖拽组件、配置属性\u003c/strong\u003e快速搭建 Web 应用原型，并一键导出完整可运行的 React + Vite 源码工程。\n  \u003cbr\u003e\n  核心设计思想：\u003cstrong\u003e协议驱动 UI\u003c/strong\u003e，编辑态与运行态彻底分离，iframe 沙盒隔离，增量补丁同步。\n\u003c/p\u003e\n\n---\n\n## 核心特性\n\n### 技术亮点\n\n- **pnpm Monorepo 五包架构** — `schema` / `materials` / `renderer` / `code-generator` / `editor` 职责明确，依赖单向，可独立发布。\n- **dev/prod 分离** — 每个物料包含编辑态 (`dev.tsx`) 和运行态 (`prod.tsx`)，编辑器逻辑与业务逻辑彻底解耦。\n- **增量补丁同步协议** — Host 与 iframe 之间通过 Immer patches 增量同步，高频拖拽时消息体积降低 90%+，配合 WAL 环形缓冲实现版本断层自愈。\n- **反向注册拖放** — 子物料通过 `parentTypes` 声明可被哪些容器接受，容器动态识别合法子物料，无需硬编码。\n- **自动化物料注册** — `import.meta.glob` 约定式扫描，新增物料无需修改任何注册代码。\n- **antd 元数据自动生成** — `gen:meta` 脚本通过 `react-docgen-typescript` 解析 antd Props，自动生成 `meta.tsx`。\n- **增量补丁历史（Undo/Redo）** — 自定义 `undoMiddleware` 捕获 Immer patches，`historyStore` 管理 past/future 栈，预留实时协同编辑接口。\n- **模块化出码引擎** — 参考 `alibaba/lowcode-engine` 的 Pipeline 架构，Schema → IR → 插件流水线 → React+Vite 工程包。\n- **状态持久化** — 组件树自动保存到 `localStorage`，刷新不丢失进度。\n\n### 编辑器体验\n\n- 可视化拖拽，从物料区拖入画布任意容器，所见即所得\n- 动态配置面板：属性 / 样式 / 事件三栏，由物料 `meta` 驱动，无需手写表单\n- 样式面板细分六组：布局、定位、字体、边框、背景、其他\n- 事件编排：支持调用其他组件方法（含传参）、弹出消息、跳转链接、执行自定义 JS\n- 自定义 JS 在 iframe 沙盒中安全执行，`sandbox=\"allow-scripts\"` 隔离，5s 超时保护\n- 画布尺寸预设：桌面 / 平板（768px）/ 移动（375px）\n- 组件大纲树：层级展示，支持点击定位和拖拽排序\n- 组件层级面包屑：面板顶部快速切换父子组件\n- 选中遮罩 + 悬浮提示：实时显示组件信息，提供父子导航快捷操作\n- 撤销/重做、复制/粘贴/删除全套快捷键\n- 一键预览，编辑态与预览态同构渲染，效果 100% 一致\n- 一键导出源码，下载完整 React + Vite 工程 `.zip`\n\n---\n\n## 快速开始\n\n**环境要求：** Node.js 18+，pnpm 9+\n\n```bash\n# 克隆仓库\ngit clone https://github.com/xxMudCloudxx/lowcode-editor.git\ncd lowcode-editor\n\n# 安装依赖（postinstall 会自动生成物料元数据）\npnpm install\n\n# 启动开发服务器\npnpm dev\n```\n\n访问 `http://localhost:5173` 即可使用编辑器。\n\n---\n\n## 项目结构\n\n```\nlowcode-editor/\n├── packages/\n│   ├── schema/          # @lowcode/schema    — 类型协议层（无依赖）\n│   ├── materials/       # @lowcode/materials — 物料组件库（34 个组件）\n│   ├── renderer/        # @lowcode/renderer  — 纯渲染引擎\n│   ├── code-generator/  # @lowcode/code-generator — 出码流水线\n│   └── editor/          # @lowcode/editor    — 编辑器主应用\n│       └── src/\n│           ├── editor/\n│           │   ├── components/   # 编辑器 UI（画布、面板、遮罩等）\n│           │   ├── stores/       # Zustand stores（components / history / ui）\n│           │   ├── simulator/    # Host/Renderer 通信协议\n│           │   ├── hooks/        # 自定义 Hooks\n│           │   └── utils/        # 工具函数（sandboxExecutor 等）\n│           ├── renderer/         # iframe 内的 RendererApp 入口\n│           └── theme/            # Antd 双令牌主题配置\n├── docs/                # 架构文档、产品文档、路线图\n└── pnpm-workspace.yaml\n```\n\n---\n\n## 架构概览\n\n### Monorepo 依赖拓扑\n\n```\n@lowcode/schema\n    ↑\n@lowcode/materials ── @lowcode/renderer\n    ↑                       ↑\n@lowcode/code-generator   @lowcode/editor（主应用）\n```\n\n### 状态管理三 Store 分离\n\n| Store | 中间件 | 职责 |\n|-------|--------|------|\n| `useComponentsStore` | immer + persist | 组件树 Master，范式化存储，版本号自增 |\n| `useHistoryStore` | 无 | 增量 patch 历史栈，undo/redo，协同预留接口 |\n| `useUIStore` | immer | 选中 id、模式、画布尺寸、剪切板（不持久化） |\n\n### Host ↔ Iframe 增量同步协议\n\n```\nuseComponentsStore\n    ↓ undoMiddleware 捕获 patches\npatchEventBus\n    ↓\nSimulatorHost ──postMessage(SYNC_COMPONENTS_PATCH)──→ SimulatorRenderer\n                                                            ↓\n                                                      版本校验\n                                                      ↓ 通过      ↓ 断层\n                                                  applyPatches  REQUEST_FULL_SNAPSHOT\n                                                                      ↓\n                                                              WAL 回放 or 全量快照\n```\n\n**Host 是 Store 的唯一 Master，Iframe 持有只读 Slave Replica，所有写操作通过 `DISPATCH_ACTION` 委托给 Host。**\n\n### 出码流水线\n\n```\nSchema → Parser → IR → Preprocessor → Component Plugins → Project Plugins\n                                                                ↓\n                                                        Postprocessor (prettier)\n                                                                ↓\n                                                        Publisher (JSZip → .zip)\n```\n\n---\n\n## 物料系统\n\n### 已有物料（34 个）\n\n| 分类 | 组件 |\n|------|------|\n| General | Button、Icon、Typography |\n| Layout | Container、Grid、GridColumn、Space |\n| Navigation | Breadcrumb、Dropdown、Menu、PageHeader、Pagination、Steps、TabPane |\n| DataEntry | Input、Radio、Select、Slider、Switch、Upload |\n| DataDisplay | Avatar、Card、Image、List、ListItem、TableColumn、Tooltip |\n| Feedback | Modal |\n| Page | Root 页面组件 |\n\n### 新增物料\n\n每个物料包含三个文件：\n\n```\nmaterials/\n└── YourComponent/\n    ├── dev.tsx    # 编辑态（含拖拽锚点、选中高亮）\n    ├── prod.tsx   # 运行态（纯业务逻辑）\n    └── meta.tsx   # 元数据（setter 配置、事件、方法、parentTypes）\n```\n\n新增后无需修改任何注册代码，`import.meta.glob` 自动发现。\n\n---\n\n## 常用命令\n\n```bash\n# 开发\npnpm dev                                    # 启动编辑器开发服务器\npnpm --filter @lowcode/materials gen:meta   # 生成 antd 组件元数据\n\n# 构建（顺序：schema → code-generator → editor）\npnpm build\n\n# 测试\npnpm test          # 全部包\npnpm test:coverage # 覆盖率报告\n\n# 代码检查\npnpm lint\n```\n\n---\n\n## 技术栈\n\n| 层次 | 技术 |\n|------|------|\n| 框架 | React 18 + TypeScript 5.8 |\n| 构建 | Vite 6.3 + pnpm Monorepo + tsup |\n| 状态 | Zustand 5 + Immer（patches + applyPatches） |\n| 拖拽 | React-DND 16 |\n| UI | Ant Design 5（CSS-in-JS 双令牌主题） |\n| 编辑器 | Monaco Editor 0.52 |\n| 出码 | JSZip + Prettier + 自研 Pipeline |\n| 测试 | Vitest + Testing Library |\n\n---\n\n## 路线图\n\n- **第一阶段** ✅ — 撤销/重做、复制粘贴删除、大纲树拖拽排序\n- **第二阶段** ✅ — 高级样式面板、栅格/Tabs/图表组件、Monorepo 重构、增量补丁同步协议\n- **第三阶段** 规划中 — 全局状态与数据源管理、数据绑定、多页面支持\n- **第四阶段** 规划中 — 实时协同编辑（WebSocket + 已预留 `applyRemotePatch` 接口）\n\n---\n\n## 贡献\n\n欢迎提交 Issue 和 PR。新增物料请遵循上方\"新增物料\"规范。\n\n---\n\n## 致谢\n\n- 初始架构参考了稀土掘金小册[《React 通关秘籍》](https://juejin.cn/book/7294082310658326565)（作者：zxg\\_神说要有光）\n- 出码引擎架构参考了 [alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine)\n- 感谢 Vite、React、Zustand、Ant Design 等开源项目\n\n## 许可证\n\n[MIT](https://github.com/xxMudCloudxx/lowcode-editor/blob/main/LICENSE) © 2025 xxMudCloudxx\n\n---\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=https://img.shields.io/github/stars/xxMudCloudxx/lowcode-editor?style=social alt=\"GitHub stars\"\u003e\n\u003cimg src=https://img.shields.io/github/forks/xxMudCloudxx/lowcode-editor?style=social alt=\"GitHub forks\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxxmudcloudxx%2Flowcode-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxxmudcloudxx%2Flowcode-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxxmudcloudxx%2Flowcode-editor/lists"}