01 低代码平台概述

概念发展历程主流产品对比核心价值

⚡ 可视化编辑器定位

02 编辑器技术选型

React/Vue/Angular拖拽库状态管理

⚙️ 框架对比 · dnd-kit

03 项目初始化与架构设计

Vite搭建目录规划模块划分MVC/MVVM

🏗️ 设计模式选择

04 核心数据结构设计

组件树属性面板模型SchemaJSON规范

📐 页面数据模型

05 渲染引擎基础

React Reconciler自定义渲染器虚拟DOM工厂模式

⚛️ 渲染映射

06 拖拽系统实现 (上)

HTML5拖拽API拖拽源/目标预览事件处理

🖱️ 原生拖拽基础

07 拖拽系统实现 (下)

自定义行为约束/对齐多选拖拽撤销重做

✨ 高级拖拽

08 组件面板开发

分类搜索预览卡片拖拽到画布动态加载

🧩 组件物料

09 画布编辑器开发

缩放平移网格系统参考线/吸附多画布

🖼️ 编辑区核心

10 选中与框选机制

单击选中Shift多选框选算法状态手柄

🎯 选区交互

11 缩放与旋转手柄

8方向缩放旋转控制宽高比最小尺寸

🔄 变换操作

12 属性面板开发 (上)

文本/数字/颜色表单控件双向同步

🎛️ 基础属性

13 属性面板开发 (下)

条件显示嵌套编辑自定义编辑器验证

🧪 高级属性

14 样式编辑系统

内联样式CSS类名响应式断点继承覆盖

🎨 样式管理

15 事件与交互配置

事件绑定动作编辑器自定义事件冒泡模拟

⚡ 交互编排

16 层级管理 (大纲树)

层级展示拖拽排序显示/隐藏锁定分组

🌲 大纲视图

17 撤销与重做系统

命令模式历史栈合并操作内存优化

↩️ 操作历史

18 快捷键系统

注册分发组合键冲突解决自定义配置

⌨️ 键盘增强

19 组件间通信

Props传递Context/Provider事件总线Zustand

📡 通信方案

20 模板与预设

页面模板组件预设变量替换导入/导出

📋 快速复用

21 国际化 (i18n) 实现

多语言文案语言切换日期/数字RTL布局

🌍 本地化

22 主题与换肤

CSS变量主题定义动态切换组件覆盖

🎭 皮肤系统

23 代码生成器

生成React/VueJSX模板代码格式化预览下载

📦 出码引擎

24 预览与调试

实时预览多端模拟控制台日志元素审查

🔍 调试利器

25 版本管理

版本号生成Diff对比版本回滚发布集成

📌 版本控制

26 插件系统

生命周期API设计插件市场热插拔

🔌 扩展机制

27 性能优化

虚拟列表懒加载防抖节流Web Worker内存排查

⚡ 流畅体验

28 测试策略

单元测试组件测试E2E拖拽测试

🧪 质量保障

29 打包与部署

Code SplittingCDNDockerCI/CD

🚀 发布流水线

30 项目实战与总结

从零搭建编辑器坑点复盘未来趋势

🏁 收官 · 展望