如何设计可视化搭建平台的组件商店？

ASP站长网之前一直在做 lowcode 和可视化相关的项目，也围绕可视化技术输出了一系列技术文章，今天我继续和大家来聊聊可视化平台相关的话题——组件商店。这个需求其实很早在我开源 H5-Dooring 之后就有网友提出过 issue ，如下：
 
 
 
正好最近也做了一系列的重构和优化，觉得是时侯着手组件商店了，所以借此机会和大家详细聊聊如何设计可视化搭建平台的组件商店。
 
按照我一向的写作风格，我会在下面列出文章的大纲，以便大家有选择且高效率的阅读和学习：
 
什么是组件商店，为什么要设计组件商店
 
组件商店工作流设计
 
组件商店工作流具体方案实现
 
实现在线代码编辑器
组件提交方案设计
组件审批方案设计
组件上架更新方案
可视化搭建平台组件商店总结及后期规划
 
文章视图如下，大家在平时在工作中也可以通过思维导图的方式来整理思路。
 
 
 
什么是组件商店, 为什么要设计组件商店
“商店”大家也许并不陌生，对用户而言，其基本用途是满足正常的消费需求;对供应商而言，商店提供了一种销售自身产品的营销推广渠道;对商店自身而言，一方面获得了客流和利润，另一方面还能提供自身价值在空间上的延伸。
 
 
 
通过以上的图例说明，我们很容易想到一个词——生态。因为每一个环节都在相互促进，相互影响。那么对于商店这个实体有了具象的认知之后，我们再来看看技术领域的“组件商店”。
 
对于可视化搭建平台而言，其中一个核心的环节就是组件资产。用户在设计搭建页面时会消费各种各样的组件，但是对于不同的用户而言，组件的需求往往是不一样的，大部分的 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(
    <div className={styles.menuWrap} style={{display: visible ? 'block' : 'none', backgroundColor: bgColor, top: (top + 6) + 'px'}}>
      H5-Dooring
    </div>,
    (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 <CodeMirror
          value={react_code}
          className={styles.codeWrap}
          options={{
              mode: 'jsx',
              theme: 'material',
              lineNumbers: true
          }}
          onChange={(editor, data, value) => codeEditorChange(editor, data, value, 'react')}
      />
}
以上就实现了一个简单的React代码编辑器，是不是很简单呢? 同理对于 css ，js 代码编辑器，也是同样的方式，我们只需要定义 CodeMirror 属性的mode 为 css ，javascript 即可。我们还可以设置 theme 来切换到我们喜欢的代码主题，这里笔者使用的material风格。
 
单纯实现在线代码编辑器还不够，我们还需要对代码进行处理，保存，对组件进行定义，接下来我们就来看看组件是如何提交的。
 
2.组件提交方案设计
当“ 生产者 ”编写好组件代码之后，需要对组件自身进行定义。因为可视化平台组件物料很依赖平台的组件开发协议，我们需要按照平台的规范去上传规范的自定义组件，这样平台才能更好的理解应用组件，保持用户认知的一致性。
 
组件描述信息笔者这里设计了如下字段：
 
组件名称 (中文)
组件名 (英文，方便存库)
组件分类 (基础，可视化，营销，媒体等)
组件默认大小 (宽高)
组件图标 (方便用户认知，查找)
大家也可以根据自己的平台特性来定义和规范，这样我们就可以提交一个完整的组件数据了。