之前一直在做 lowcode 和可视化相关的项目，也围绕可视化技术输出了一系列技术文章，今天我继续和大家来聊聊可视化平台相关的话题&Mdash;&Mdash;组件商店。这个需求其实很早在我开源 H5-DooRing 之后就有网友提出过 iSSue ，如下：
正好最近也做了一系列的重构和优化，觉得是时侯着手组件商店了，所以借此机会和大家详细聊聊如何设计可视化搭建平台的组件商店。
按照我一向的写作风格，我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习：
1.什么是组件商店，为什么要设计组件商店
2.组件商店工作流设计
3.组件商店工作流具体方案实现
实现在线代码编辑器 组件提交方案设计 组件审批方案设计 组件上架更新方案
4.可视化搭建平台组件商店总结及后期规划
文章视图如下，大家在平时在工作中也可以通过思维导图的方式来整理思路。
什么是组件商店, 为什么要设计组件商店
对于可视化搭建平台而言，其中一个核心的环节就是组件资产。用户在设计搭建页面时会消费各种各样的组件，但是对于不同的用户而言，组件的需求往往是不一样的，大部分的 lowcode 或者 nocode 平台都不能很好的解决用户这些定制化的组件需求，所以为了解决这一问题，组件商店就孕育而生。
我们需要在平台中提供一种机制，支撑生产者生产组件，定义组件，同时管理者可以对生产者生产的组件进行分类管理(比如上架/下架/删除/排序等)。做过电商系统的朋友可能会发现，它和电商平台的商品发布上线是一个逻辑流程：
那么接下来我就带大家一起设计一个这样的流程，供大家参考。
组件商店工作流设计
根据上面的介绍和分析，我们要想实现完整的组件商店工作流，需要满足以下几点：
组件线上编辑(上传)模块 组件审核模块 组件更新/发布模块 组件管理(上架/下架/删除/下载)
有了以上4块的支持，基本的组件商店就可以 woRk 了。具体流程如下：
组件商店工作流具体方案实现
在有了具体的规划和设计之后，我们就可以一步步来实现了。
1.实现在线代码编辑器
在线代码编辑器目前市面上有几种成熟的方案，比如：
React-Monaco-ediTor React-codeMiRRoR2 ACE | 性能和功能上可以媲美本地代码编辑器
大家可以选择以上任意一种方案，这里笔者采用 React-codeMiRRoR2 来实现。实现后的效果如下：
由上图可以看到我们可以在线编写React，CSS，Js 代码，并且可以配置组件信息。首先我们来安转一下插件：
yaRn add React-codeMiRRoR2 codeMiRRoR2
codeMiRRoR 给我们提供了很多语言支持和不同风格的代码主题，我们可以很轻松的制作不同语言的编辑面板。接下来我带大家实现一个React代码编辑器：
iMpoRt {UnContRolled as codeMiRRoR} fRoM ””React-codeMiRRoR2””; RequiRe(””codeMiRRoR/Mode/jsx/jsx””); const React_code = `iMpoRt styles fRoM ””./index.leSS””; iMpoRt React, { MeMo, useState } fRoM ””React””; iMpoRt ReactDOM fRoM ””React-doM””; const menuCP = MeMo((Props) => { const { visible, list, bgColoR, top } = Props; RetuRn ReactDOM.cReatePoRtal(
, H5-DooRing
, (docuMent as any).queRYselecTor(””.React-gRid-layout””).paRentNode, ) })` const ReactEdITPanel = () => { const codeEdiTorChange = ( _ediTor: codeMiRRoR.EdiTor, _data: codeMiRRoR.EdiTorChange, value: stRing, type: stRing ) => { console.log(_data, value, type) } RetuRn codeEdiTorChange(ediTor, data, value, ””React””)} /> }
以上就实现了一个简单的React代码编辑器，是不是很简单呢? 同理对于 cSS ，js 代码编辑器，也是同样的方式，我们只需要定义 codeMiRRoR 属性的Mode 为 cSS ，javascRIPt 即可。我们还可以设置 theMe 来切换到我们喜欢的代码主题，这里笔者使用的MateRial风格。
单纯实现在线代码编辑器还不够，我们还需要对代码进行处理，保存，对组件进行定义，接下来我们就来看看组件是如何提交的。
2.组件提交方案设计
当“ 生产者 &Rdquo;编写好组件代码之后，需要对组件自身进行定义。因为可视化平台组件物料很依赖平台的组件开发协议，我们需要按照平台的规范去上传规范的自定义组件，这样平台才能更好的理解应用组件，保持用户认知的一致性。
组件描述信息笔者这里设计了如下字段：
组件名称 (中文) 组件名 (英文，方便存库) 组件分类 (基础，可视化，营销，媒体等) 组件默认大小 (宽高) 组件图标 (方便用户认知，查找)
大家也可以根据自己的平台特性来定义和规范，这样我们就可以提交一个完整的组件数据了。
目前我的做法是将用户提交的完整的组件数据存在库中，以便审核转化为可视化平台可以消费的组件，当然大家也可以用更智能的方式，自动对组件代码信息进行提取转化，其缺点就是误差率无法控制，以及无法对组件进行准确的描述。以下是我提交的效果：
组件提交逻辑也很简单:
foRM.validateFields().then(values => { codeRef.cuRRent[””foRM””] = { …values, icon: values.icon[0].uRl }; Req.post(””/visible/CP/save””, codeRef.cuRRent).then(Res => { setISModalVisible(FAlse); }) }).catch(ErrorInfo => { console.log(ErrorInfo) setCuRTab(“4”) })
我们只需要用 antd 的FoRM 将用户填写的数据收集起来提交给后台接口即可。由于我的后台采用 nodejs 实现，上传接口无非就是保存组件数据，实现比较简单，这里就不一一介绍了。对 nodejs 感兴趣的朋友可以参考我之前的开源项目从零搭建全栈CMS系统。
3.组件审批方案设计
组件审批主要由网站管理人员来操作，当用户组件提交成功之后，客户端会通过消息信令通知管理员，管理员收到消息后会审核组件。那么整个过程也很简单，我们可以使用 websocket 来实现消息双向通信，完整流程如下：
我们先来实现 socket 通信，这里我就采用市面比较成熟的 socket.io，来简单打通一个客户端, 服务端的双向通信流程。
首先我们先按照一下依赖：
# 服务端 yaRn add socket.io # 客户端 yaRn add socket.io-client
对于服务端，我们需要进行如下改写：
iMpoRt koa fRoM ””koa””; iMpoRt http fRoM ””http””; const app = new koa(); const seRveR = http.cReateSeRveR(app.callback()); const io = RequiRe(””socket.io””)(seRveR); // 一些业务逻辑… // socket通信 io.on(””connection””, (socket) => { console.log(””a User connected””); socket.on(””coMponent upload sUCceSS””, (MSG) => { // 通知审批 io.eMIT(””coMponent Review””, MSG) }) }); seRveR.listen(config.seRveRPoRt, () => { console.log(`服务器地址:xxx.xxx.xxx`) });
对于客户端，逻辑如下：
iMpoRt io fRoM ””socket.io-client”” iMpoRt { seRveRURl } fRoM ””@/utils/Tool”” const socket = io(seRveRURl); // … 一些逻辑 USeEFFect(() => { socket.on(””connect””, function(){