[第100期]【自荐】基于React的组件可视化拖拽页面编辑与代码生成工具

[anye931123]

项目名称：react-visual-editor
项目地址：https://github.com/anye931123/react-visual-editor
在线预览：https://anye931123.github.io/react-visual-editor

截图

介绍

react-visual-editor 是一款基于umi block个人开源的工具类项目，技术实现：React Hook+Typescript+Dva+Umi+Antd(但不限组件库)，开源时间为2020.2.22，其目的是为了解决不会React技术栈的人员可以通过拖拽生成React页面与页面代码。 工具通过React合成事件对React组件做了拖拽属性等的默认包装使组件支持拖拽等功能，实现了组件可视化随意拖拽嵌套，并生成可运行的代码的功能。项目通过简单的配置可以对接切换任何React组件库或者自定义组件，并且支持PC端与移动端多设配展示效果的切换。

目前实现的功能

1、任意拖拽嵌套：通过组件预览面板拖拽组件到设计面板实现任意嵌套，设计面板中的组件也可以随意拖拽嵌套。

2、实时预览：设计面板中会实时渲染展示组件的真实效果，并且与真实页面无异，可完美实现UI设计稿。

3、dom树展示：或者说组件树展示，页面组件树的展示，并实现dom节点实时追踪效果与设计面板相互映射。

4、可视化属性配置：结合React特性和JS语法定制了一套属性类型，并且类型与映射组件使其可视化，实现了复杂数据结构的可视化操作。

5、可视化样式配置：根据CSS样式值与CSS属性效果不同，做了部分CSS可视化展示，实现了样式值的改变实时映射到设计面板页面中呈现样式效果。

6、模板功能：可以在设计面板或者dom树展示面板选中局部或者整个页面节点作为可复用的模板保存，减少重复组件的配置，提高配置效率，减少重复工作。

7、组件约束：根据组件特性，可以配置组件的父组件约束与子组件约束，解决组件间的错误嵌套和报错。

8、预览与代码生成：实际上设计面板中的组件与原始组件可以说没有区别，但是为了确保页面真实效果，将配置好的页面信息又重新用原始组件解析渲染了一遍并展示在预览弹窗中，并且做了解析生成页面代码与样式代码一并展示。

9、多平台支持：工具实现了PC端与移动端多型号设备的展示与切换，移动端设备可通过简单的配置做增删。

10、组件库替换：工具本身除了部分antd组件作为支撑UI展示外，不依赖其他组件库，整体为一个可扩展的，组件库插拔式框架，可通过简单的配置，引入任何React组件库或者自定义组件，使这些组件支持拖拽生成页面。

未来功能

1、代码在线编辑实时预览。

2、代码解析生成项目所需要的页面配置信息，实现代码到配置信息，以及配置信息到代码的双向映射。