一个可视化低代码页面构建工具，支持拖拽式组件编排、实时属性配置和 JSON 数据驱动渲染。
🌐 在线演示: https://weave-dream.vercel.app/
织梦（WeaveDream）是一个企业级可视化低代码编辑器，允许用户通过直观的拖拽界面快速构建页面结构。编辑器采用 JSON 数据驱动架构，支持组件树管理、实时预览、历史记录等核心功能，适用于快速原型开发、页面配置化生成等场景。如同编织梦想，让创意在画布上自由绽放。
- 🚀 提升开发效率：通过可视化编辑替代传统手写代码，大幅缩短页面开发周期
- 📦 JSON 数据驱动：编辑结果导出为标准 JSON 格式，易于存储、传输和渲染
- 🔧 高度可扩展：基于注册表模式的插件化架构，支持轻松扩展组件和功能
- 💎 类型安全：完整的 TypeScript 类型系统，保障开发体验和代码质量
- 支持从组件库拖拽组件到画布
- 实时可视化反馈，所见即所得
- 支持嵌套组件结构，灵活构建复杂页面
- 选中组件后实时编辑属性
- 9 种基础组件类型，每种都有专属属性编辑器
- 属性变更即时生效，无需手动刷新
- 可视化组件树结构
- 支持组件选择、删除、移动操作
- 智能工具栏定位，提供快捷操作入口
- 完整的历史记录管理（最多 50 步）
- 支持撤销/重做操作，快速回退错误编辑
- 键盘快捷键支持（Ctrl+Z / Ctrl+Y）
- 支持组件及其子树的复制粘贴
- 智能 ID 生成，确保数据结构完整性
- 键盘快捷键支持（Ctrl+C / Ctrl+V）
- 一键预览最终渲染效果
- 模态窗口展示，不影响编辑流程
- 基于实际组件树数据渲染
- 一键导出完整的组件树 JSON 数据
- 标准格式，易于集成到后端系统
- 自动生成带时间戳的文件名
Ctrl+Z/Ctrl+Y：撤销/重做Ctrl+C/Ctrl+V：复制/粘贴组件Delete：删除选中组件
| 分类 | 技术 | 版本 | 用途 |
|---|---|---|---|
| 前端框架 | React | 19.1.1 | UI 框架 |
| 类型系统 | TypeScript | 5.8.3 | 类型安全 |
| 构建工具 | Vite | 7.1.2 | 构建和开发服务器 |
| 样式方案 | TailwindCSS | 4.1.13 | 原子化 CSS 框架 |
| 状态管理 | Zustand | 5.0.8 | 轻量级状态管理 |
| 拖拽功能 | React DnD | 16.0.1 | 拖拽交互实现 |
| 布局组件 | Allotment | 1.20.4 | 可调整大小的分栏布局 |
| UI 组件 | Ant Design | 5.27.3 | 企业级 UI 组件库 |
┌─────────────────────────────────────────────────────────────┐
│ 应用层 (App) │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Header │ │ Material │ │ EditArea │ │ Setting │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 状态管理层 (Store) │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ components.tsx │ │ component-config │ │
│ │ (组件树状态) │ │ (组件配置注册) │ │
│ └────────────────────┘ └────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 物料组件层 (Materials) │
│ Page │ Container │ Button │ Text │ Input │ Image │ ... │
├─────────────────────────────────────────────────────────────┤
│ 属性编辑器层 (PropertyEditor) │
│ 注册表模式 │ 编辑器映射 │ 类型定义 │ 统一接口 │
└─────────────────────────────────────────────────────────────┘
- 组件注册：物料组件通过
component-config.tsx注册到系统 - 拖拽添加：用户拖拽组件 → 触发
addComponent→ 更新组件树 - 属性编辑：选择组件 → 路由到对应编辑器 → 更新组件属性
- 状态同步：所有变更通过 Zustand Store 统一管理
- 数据导出：组件树序列化为 JSON 格式导出
- 清晰的分层架构：UI 层、物料层、状态层、工具层职责分明
- 组件化开发：每个功能模块独立封装，低耦合高内聚
- 插件化扩展：基于注册表模式，支持组件和编辑器动态注册
// 组件注册示例
registerComponent('Button', {
name: 'Button',
defaultProps: { text: '按钮', type: 'primary' },
component: Button
});- Zustand 轻量级状态管理：相比 Redux 更简洁，性能优异
- JSON 数据驱动：编辑器的本质是编辑 JSON 数据
- 历史记录管理：自动保存编辑历史，支持撤销/重做
- 类型安全：完整的 TypeScript 类型定义，编译时检查
- 文件行数限制：单个文件不超过 300 行，组件文件不超过 200 行
- 单一职责原则：每个文件只负责一个功能
- 代码重构成果：PropertyEditor 从 1036 行重构为模块化结构（主文件约 50 行）
- ESLint 规范：严格的代码检查，保障代码质量
- 注册表模式：组件和编辑器通过注册表统一管理
- 编辑器路由：自动根据组件类型路由到对应编辑器
- 类型安全扩展：通过 TypeScript 接口约束，确保扩展的一致性
// 编辑器注册表
const editorRegistry: EditorRegistry = {
'Button': ButtonEditor,
'Text': TextEditor,
// ... 更多编辑器
};- 实时反馈：属性变更即时生效，无需手动刷新
- 键盘快捷键：完整的快捷键支持，提升操作效率
- 智能工具栏：自动定位到选中组件，提供快捷操作
- 空状态处理：友好的空画布提示
- Node.js >= 16.0.0
- pnpm >= 8.0.0（推荐使用 pnpm，也可使用 npm 或 yarn）
pnpm installpnpm dev访问 http://localhost:5173 即可使用编辑器。
pnpm build构建产物将输出到 dist/ 目录。
pnpm lint项目已配置好 Vercel 部署，可以通过以下方式部署：
- 将项目推送到 GitHub/GitLab/Bitbucket
- 访问 Vercel
- 导入项目，Vercel 会自动检测到 Vite 项目
- 部署即可（Vercel 会自动运行
pnpm install和pnpm build）
# 安装 Vercel CLI
npm i -g vercel
# 部署
vercel
# 生产环境部署
vercel --prod项目已包含 vercel.json 配置文件，支持 SPA 路由重写，可直接部署使用。
weavedream-editor/
├── src/
│ ├── editor/ # 编辑器核心模块
│ │ ├── components/ # UI 组件
│ │ │ ├── Header/ # 顶部工具栏
│ │ │ ├── Material/ # 组件库面板
│ │ │ ├── EditArea/ # 画布编辑区域
│ │ │ │ ├── hooks/ # 自定义 Hooks
│ │ │ │ ├── utils/ # 工具函数
│ │ │ │ └── components/ # 子组件
│ │ │ ├── Setting/ # 配置面板
│ │ │ └── PropertyEditor/ # 属性编辑器
│ │ │ ├── editors/ # 各组件属性编辑器
│ │ │ └── editorRegistry.tsx # 编辑器注册表
│ │ ├── materials/ # 物料组件（9 种基础组件）
│ │ ├── stores/ # Zustand 状态管理
│ │ └── hooks/ # 全局 Hooks
│ └── main.tsx # 应用入口
├── docs/ # 项目文档
│ ├── architecture/ # 架构文档
│ ├── development/ # 开发指南
│ ├── components/ # 组件文档
│ └── agents/ # AI 代理说明
├── openspec/ # OpenSpec 规范
└── README.md # 项目说明
项目内置 9 种基础组件：
- Page：页面容器组件
- Container：布局容器组件
- Card：卡片组件
- Button：按钮组件
- Text：文本组件
- Title：标题组件
- Input：输入框组件
- Image：图片组件
- Divider：分割线组件
完整的项目文档位于 docs/ 目录：
详细文档索引请查看 文档索引。
项目遵循严格的开发规范，保障代码质量：
- ✅ TypeScript 类型安全：完整的类型定义，避免运行时错误
- ✅ ESLint 代码检查：统一的代码风格和质量标准
- ✅ 文件行数限制：单个文件不超过 300 行，保持代码可读性
- ✅ 单一职责原则：每个模块职责清晰，易于维护
- ✅ 中文注释规范：所有注释使用简体中文
更多开发规范请参考 代码规范文档。
- 快速原型开发：快速搭建页面原型，验证产品思路
- 页面配置化生成：通过 JSON 配置动态生成页面
- 低代码平台：作为低代码平台的核心编辑器模块
- CMS 内容管理：可视化的内容编辑和管理工具
- 教学演示：前端工程化、架构设计的教学案例
项目采用 OpenSpec 进行规范驱动的开发：
- 📋 OpenSpec 项目配置 - 项目上下文和技术栈
- 📝 变更记录 - 所有功能变更提案
- 🤖 OpenSpec 代理指南 - 规范驱动开发流程
欢迎贡献代码！在开始之前，请先阅读：
本项目采用 MIT 许可证。详见 LICENSE 文件。
⭐ 如果这个项目对你有帮助，欢迎 Star！
Made with ❤️ by [WildBlue58]