之前一直忙着调研lowcode平台，开发了以下两个项目：H5编辑器H5-Dooring，可视化大屏编辑器V6.Dooring没有太多时间在PC端搭建项目，还好很多原理搭建平台很常见，所以早在去年我就开发了面向PC的编辑器PC-Dooring，虽然在设计上还存在一些不足（后面的内容会提到），但是已经实现了基本模型，并且那我就分享给大家看看具体的实现吧。为了保证文章的整体逻辑性和条理性，我将可视化平台的具体实现分为以下几个部分：PC编辑器效果展示整体技术架构可视化构建技术实现方法编辑器核心思想编辑如何开发标准素材组件editorPC端编辑器效果展示pc-dooring上面的演示中，组件库的方式和H5-Dooring类似，只是组件库作者使用的是PC端专属的组件库antd，所以我们可以集成任何支持的组件antd进入PC-Dooring。整体技术架构与H5-Dooring类非常相似，也遵循了作者的产品设计理念——不让用户思考。降低所有的拖拽复杂度，采用智能网格的交互方式实现（这种设计方式有一定的局限性，仅供参考，当然也可以使用V6.Dooring的自由布局方式）。整体结构如下图所示：image.png如上图所示我们可以看到编辑器主要分为以下几个部分：组件材质画布区域属性编辑区域功能辅助其他当前组件材质主要实现基础组件，视觉组件和媒体组件，其他类型的组件实现类似，整体的技术实现我们将在下面介绍。可视化构建技术的image.png前端框架我们还是使用React。当然你也可以使用Vue3.0。原理是一样的，不同的插件也提供了对多种框架的支持。编辑浏览器的核心部分之一是组件拖动。这里笔者使用了社区中比较强大稳定的库react-dnd。拖拽分为两部分，一是从组件区拖拽到画布区，二是画布区内部组件的自由拖放。我们可以使用原生的H5拖拽API来实现第一部分的功能。本质是将拖动源携带的数据传送到画布的指定区域，目标源监听事件获取携带的数据并动态渲染。实际组件。流程如下：image.png当然，深入研究过react-dnd的朋友都知道，以上两个功能都可以通过react-dnd来实现。具体实现过程可以参考其官网react-dnd官网进行学习和研究，也可以直接参考PC-Dooring源码。至于组件库，我们可以使用任何我们熟悉的组件库，比如antd、element、zant等，组件素材需要遵循我们约定的DSL协议。这里可以参考工业级协议标准odata规范。有了一定的规格，我们就可以打包标准的元器件材料，集成第三方元器件库。至于功能辅助模块和状态管理，我们可以使用mobx、redux、dva等来实现，最终目的是让编辑器的不同部分能够相互关联，实时更新组件状态，并返回数据能力。EditorcoreideaEditorcoreimplementationidea笔者之前也分析了几个现有的方案，发现字节魔方的思路很贴切。下面是一个示意图：image.png的核心是编辑器生成的有效词法数据，以便渲染器解析并渲染成可用的HTML页面。编辑器整体架构模型编辑器整体架构模型主要是让大家全局了解可视化编辑器的实现思路，以及未来的规划方向，笔者做了一个基本的草图，如下：image.png如何开发标准材质组件开发标准组件素材，需要遵循我们编辑器里面的数据协议和组件开发规范，在PC-Dooring中开发组件主要包括以下几个部分：组件代码schema定义模板定义组件代码是里面的具体实现组件，如下情况：})=>{const{align,text,fontSize,color,lineHeight,isTpl}=props;return(<>{isTpl?(
