主要步骤：
-
设计器搭建，参考文档，下载demo-general进行基础工程搭建（github.com/alibaba/low…
-
设计器功能扩展和修改主要通过注册插件进行，/src/index.ts中的registerPlugins函数用于加载插件和调用全局api处理相关功能，registerPlugins中可加入以下功能：
- 通过@alilc/lowcode-engine调用物料material api，在设计器辅助层（画布中组件选中时）添加功能
- 删除框架中不必要的插件配置项目，比如删除右上角的某个功能按钮plugins.delete('插件id')
- 创建左侧抽屉弹层、在画布工具栏加入操作按钮
- 创建功能插件实现导入sketch设计稿转dsl
- 通过调用node的getDOMNode获取画布上的dom，通过html2canvas完成dom转缩略图
- 通过context中project api的exportSchema方法获取整个画布的dsl
- 基于intro开发新手引导功能
- 通过context中的project.onChangeDocument监听画布中dsl dom的变化，实时保存操作
- 初始化物料配置
- 通过event api使用发布订阅模式在不同插件中调用全局加载状态和弹窗的显示
- 把官方插件代码拉到本地进行二次开发，从而实现修改图标样式配置显示、修改功能，比如修改左侧源码按钮图标，修改平台logo，修改回退、前进功能图标等
- 对官方组件库插件进行二次开发，实现自定义的组件显示布局
-
物料库开发，通过lowcode-engine.cn/site/docs/g… 初始化物料库，物料中每个组件的开发过程为：
- 在/components下参考模板创建组件基础样式，配置组件入参
- 执行build脚手架会自动生成对应的meta配置文件，该文件在/lowcode下
- 物料库组件在设计器中的使用关键在于meta.ts中configure.props的配置，每个配置项对应了设计器中在画布操作组件时，右侧面板显示的组件可操作项目，props下每个对象代表一个配置参数，配置参数对象主要通过setter属性控制其应用类型，比如setter.componentName为BoolSetter代表开关功能、StringSetter字符串输入、ArraySetter数组参数
配置举例：
{
title: {
label: {
type: 'i18n',
'en-US': 'options',
'zh-CN': '配置举例',
},
},
name: 'options',
setter: {
componentName: 'ArraySetter', // 数组项目
props: {
itemSetter: {
componentName: 'ObjectSetter', // 每一项为对象结构
props: {
config: {
items: [
{
title: {
label: {
type: 'i18n',
'en-US': 'text',
'zh-CN': '文本',
},
},
name: 'title',
setter: {
componentName: 'StringSetter', // 字符串输入
isRequired: true,
initialValue: '',
},
},
{
title: {
label: {
type: 'i18n',
'en-US': 'slot',
'zh-CN': 'dsl插槽',
},
},
name: 'content',
setter: {
componentName: 'SlotSetter', // dsl输入，组件的插槽类型，用于容纳dsl值
initialValue: {
type: 'JSSlot',
value: [],
},
},
},
],
},
},
},
},
},
}
-
组件库发布后，在设计器工程中安装为依赖，并在/src/services/assets.js下参考组件库配置完成引入配置
-
通过直接更改引擎源码，实现对基础功能的二次开发 github.com/alibaba/low… ，流程参考 lowcode-engine.cn/site/docs/p…
-
lowcode-engine引擎修改后，通过执行build打包，把打包后结果packages/engine/dist/css和packages/engine/dist/js中的内容拷贝到设计器的public下，修改index.ejs的引用配置，进行引擎本地引用或发成npm包使用。（engine项目build报lowcode-shell的ts错误，可考虑把/scripts/build.sh中的--scope @alilc/lowcode-shell放到lerna run build:umd下）
-
通过直接修改engine-ext插件集合github.com/alibaba/low… ，可实现对组件选中后右侧编辑区的自定义修改，同样打包后，可将dist下内容复制到设计器直接进行本地引用配置
