正好近做了一系列的重構和優化生態

之前一直在做 lowcode 和可視化相關的項目，也圍繞可視化技術輸出了一系列技術文章，今天我繼續和大家來聊聊可視化平臺相關的話題mdash，mdash，組件商店。這個需求其實很早在我開源 H5—Dooring 之后就有網友提出過 issue ，如下:

正好最近也做了一系列的重構和優化，覺得是時侯著手組件商店了，所以借此機會和大家詳細聊聊如何設計可視化搭建平臺的組件商店。

按照我一向的寫作風格，我會在下面列出文章的大綱，以便大家有選擇且高效率的閱讀和學習:

什么是組件商店，為什么要設計組件商店

組件商店工作流設計

組件商店工作流具體方案實現

可視化搭建平臺組件商店總結及后期規劃

文章視圖如下，大家在平時在工作中也可以通過思維導圖的方式來整理思路。

什么是組件商店， 為什么要設計組件商店

商店大家也許并不陌生，對用戶而言，其基本用途是滿足正常的消費需求，對供應商而言，商店提供了一種銷售自身產品的營銷推廣渠道，對商店自身而言，一方面獲得了客流和利潤，另一方面還能提供自身價值在空間上的延伸。

通過以上的圖例說明，我們很容易想到一個詞mdash，mdash，生態因為每一個環節都在相互促進，相互影響那么對于商店這個實體有了具象的認知之后，我們再來看看技術領域的組件商店

對于可視化搭建平臺而言，其中一個核心的環節就是組件資產用戶在設計搭建頁面時會消費各種各樣的組件，但是對于不同的用戶而言，組件的需求往往是不一樣的，大部分的 lowcode 或者 nocode 平臺都不能很好的解決用戶這些定制化的組件需求，所以為了解決這一問題，組件商店就孕育而生

我們需要在平臺中提供一種機制，支撐生產者生產組件，定義組件，同時管理者可以對生產者生產的組件進行分類管理。做過電商系統的朋友可能會發現，它和電商平臺的商品發布上線是一個邏輯流程:

那么接下來我就帶大家一起設計一個這樣的流程，供大家參考。

組件更新/發布模塊

組件管理

有了以上4塊的支持，基本的組件商店就可以 work 了。具體流程如下:

組件商店工作流具體方案實現

在有了具體的規劃和設計之后，我們就可以一步步來實現了。

react—monaco—editor react—codemirror2 ace

大家可以選擇以上任意一種方案，這里筆者采用 react—codemirror2 來實現。實現后的效果如下:

由上圖可以看到我們可以在線編寫React，Css，Js 代碼，并且可以配置組件信息。首先我們來安轉一下插件:

yarnaddreact—codemirror2codemirror2

importUnControlledasCodeMirrorfrom'react—codemirror2'，require，constreact_code=`importstylesfrom'./index.less'，importReact，memo，useStatefrom'react'，importReactDOMfrom'react—dom'，constMenuCp=memo=gt，constvisible，list，bgColor，top=props，returnReactDOM.createPortal.parentNode，))`constReactEditPanel=()=gt，constcodeEditorChange=(_editor:CodeMirror.Editor，_data:CodeMirror.EditorChange，value:string，type:string)=gt，console.log(_data，value，type)returncodeEditorChange(editor，data，value，'react')/gt，

2.組件提交方案設計

當 生產者 編寫好組件代碼之后，需要對組件自身進行定義因為可視化平臺組件物料很依賴平臺的組件開發協議，我們需要按照平臺的規范去上傳規范的自定義組件，這樣平臺才能更好的理解應用組件，保持用戶認知的一致性

組件描述信息筆者這里設計了如下字段:

組件名稱 組件名 (英文，方便存庫) 組件分類 (基礎，可視化，營銷，媒體等) 組件默認大小 (寬高) 組件圖標 (方便用戶認知，查找)

大家也可以根據自己的平臺特性來定義和規范，這樣我們就可以提交一個完整的組件數據了。

目前我的做法是將用戶提交的完整的組件數據存在庫中，以便審核轉化為可視化平臺可以消費的組件，當然大家也可以用更智能的方式，自動對組件代碼信息進行提取轉化，其缺點就是誤差率無法控制，以及無法對組件進行準確的描述。以下是我提交的效果:

組件提交邏輯也很簡單:

form.validateFields.then(values=gt，codeRef.current('form')=...values，icon:values.icon(0).url，req.post('/visible/cp/save'，codeRef.current).then(res=gt，setIsModalVisible(false)，)).catch(errorInfo=gt，console.log(errorInfo)setCurTab("4"))

我們只需要用 antd 的Form 將用戶填寫的數據收集起來提交給后臺接口即可由于我的后臺采用 nodejs 實現，上傳接口無非就是保存組件數據，實現比較簡單，這里就不一一介紹了對 nodejs 感興趣的朋友可以參考我之前的開源項目從零搭建全棧CMS系統

3.組件審批方案設計

組件審批主要由網站管理人員來操作，當用戶組件提交成功之后，客戶端會通過消息信令通知管理員，管理員收到消息后會審核組件。那么整個過程也很簡單，我們可以使用 websocket 來實現消息雙向通信，完整流程如下:

我們先來實現 socket 通信，這里我就采用市面比較成熟的 socket.io，來簡單打通一個客戶端， 服務端的雙向通信流程。

首先我們先按照一下依賴:

#服務端yarnaddsocket.io#客戶端yarnaddsocket.io—client

對于服務端，我們需要進行如下改寫:

對于客戶端，邏輯如下:

importiofrom'socket.io—client'importserverUrlfrom'/utils/tool'constsocket=io，//...一些邏輯useEffect(()=gt，socket.on('connect'，function()console.log('connect'))，socket.on('htmlWorked'，function(data)constresult，message=dataif(result!'error')//...else//...)，socket.on('disconnect'，function(e)console.log('disconnect'，e))，，())

通過以上的實現方式客戶端和服務端就可以隨時進行通信了。接下來我們看看審批的效果:

用戶在 H5—Dooring 平臺提交的組件都會流入管理后臺，管理員可以對組件進行審查以及下載源碼等操作審批同樣會用到 codemirror 這個庫，主要是將存到數據庫的字符串代碼進行回顯當然還可以實現線上預覽組件上線后的效果，這塊大家感興趣的可以自己嘗試一下實現方案，原理也很簡單

4. 組件上架更新方案

組件上架的方案也有很多，比如可以手動上架更新，也可以用程序自動化的完成那么這里我介紹一下我的線上自動化上架的方案，這里還是需要借助上面介紹的 socket.io 和 nodejs

首先我們需要對 nodejs 的父子進程有一定的了解，比如 child_process我會使用child_process 的 exec 實現解析并執行命令行指令，如果大家對 nodejs 的父子進程不太熟悉，也可以參考我之前的文章 基于NodeJS從零構建線上自動化打包工作流

因為整個過程需要自動化的去處理，不能像我們之前打包項目一樣，手動執行 npm run build 或者 yarn build 。我們需要程序自動幫我們執行這個命令行指令，具體方案如下:

importexecfrom'child_process'constoutWorkDir=resolveconstfid=uuid(8，16)constcmdStr=`cd$outWorkDiramp，amp，yarnbuild$fid`router.post(api.generalConfig，auth，ctx=gt，//...exec(cmdStr，function(err，stdout，stderr)if(err)console.log('apierror:'+stderr)，io.emit('htmlWorked'，result:'error'，message:stderr)elseio.emit('componentupdatesuccess'，result:'success'，message:'xxxx'))//...)，

通過以上的方式，我們就可以線上打包更新我們的項目基座，并植入任何參數，如果需要動態寫入文件，我們只需要用 fs 模塊處理即可，通過這樣的線上工作流，我們還可以實現更復雜的邏輯，甚至實現一個小型的前端CI工作流那么大家如果有更優雅更好的方案，也是可以隨時在評論區交流

可視化搭建平臺組件商店總結及后期規劃

以上所有的設計方案實現都是基于實際需求來設計的，當然還有很多細節需要處理和優化，伴隨著需求和，業務的復雜，后期還會做組件統計，組件數據分析，組件監控等能力，大家也可以參考以上的設計方案，設計自己的組件商店。