绝了！低代码/零代码页面设计器和代码生成器

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

低代码/零代码页面设计器和代码生成器

二、实现功能

1. 无限嵌套布局支持：CraftDesigner 提供了无限嵌套布局的功能，这意味着您可以在页面中创建任意深度的布局结构。无论您需要多少层嵌套，CraftDesigner 都能满足您的需求，让您设计出更加复杂且具有层次感的页面。
2. 支持原生 HTML 标签拖拽布局：CraftDesigner 不仅支持原生的 HTML 标签，还可以通过简单的拖拽操作来布局这些标签。这意味着您可以轻松地将各种 HTML 元素放置到页面中，并通过拖拽来调整它们的位置和大小，从而实现自定义的布局效果。
3. 支持任意 React 组件拖拽布局：除了原生 HTML 标签外，CraftDesigner 还支持任意 React 组件的拖拽布局，包括开源组件和自定义组件，而且无需对现有组件进行修改。这意味着您可以在页面中使用各种现成的 React 组件，或者自己开发的组件，来实现更加丰富和个性化的布局效果。
4. 支持 iframe 嵌入组件：如果您需要在页面中嵌入其他网页或应用程序，CraftDesigner 也提供了对 iframe 的支持。您可以轻松地将 iframe 放置到页面中，并设置相应的属性来加载指定的网页内容，从而实现与外部资源的集成和交互。
5. 支持 ECharts 图形拖拽布局：CraftDesigner 还集成了对 ECharts 图形的支持，您可以通过简单的拖拽操作来布局和配置各种图形组件，从而快速创建各种数据可视化效果。
6. 页面序列化成 JSON 数据：CraftDesigner 设计的页面可以轻松序列化成 JSON 数据，而不是生成代码。这意味着您可以将整个页面的布局结构和配置信息保存为一个 JSON 对象，方便存储、传输和后续处理，同时也可以随时导入到 CraftDesigner 中进行编辑和调整。
7. CraftDesigner 作为普通 React 组件：CraftDesigner 本身也是一个普通的 React 组件，可以被轻松地集成到任意 React 项目中。无论您是正在开发新项目，还是想要为现有项目添加可视化布局功能，都可以通过简单的引入和配置来使用 CraftDesigner。
8. 服务端无关，只输出和输入 JSON 数据：CraftDesigner 的设计是服务端无关的，它只负责处理页面的布局和配置，不涉及任何与后端相关的逻辑。这意味着您可以在任何环境下使用 CraftDesigner，只需要输入和输出 JSON 数据即可，而不受限于特定的后端技术栈或框架。

三、技术选型

craft.js

Ant Design

React

storybook

react-markdown

四、界面展示











五、源码地址

私信回复：98