如何设计可视化搭建平台的组件商店？
发布时间：2021-12-10 12:59:39 所属栏目：大数据 来源：互联网
导读：ASP站长网 之前一直在做 lowcode 和可视化相关的项目，也围绕可视化技术输出了一系列技术文章，今天我继续和大家来聊聊可视化平台相关的话题组件商店。这个需求
|
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.组件提交方案设计 当“ 生产者 ”编写好组件代码之后，需要对组件自身进行定义。因为可视化平台组件物料很依赖平台的组件开发协议，我们需要按照平台的规范去上传规范的自定义组件，这样平台才能更好的理解应用组件，保持用户认知的一致性。 组件描述信息笔者这里设计了如下字段： 组件名称 (中文) 组件名 (英文，方便存库) 组件分类 (基础，可视化，营销，媒体等) 组件默认大小 (宽高) 组件图标 (方便用户认知，查找) 大家也可以根据自己的平台特性来定义和规范，这样我们就可以提交一个完整的组件数据了。
（编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
