cu-lowcode-plugin-template

低代码插件开发模板 lowcode-plugin-template

开发

环境准备

启动

npm i & npm start

调试

启动后直接打开下面链接，会自动注入插件，可以进行调试 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/demo-general/index.html?debug

开发注意事项

请使用fusion来开发插件，请勿使用antd。

发布

先修改build.umd.plugin.js 中的library name

发布npmjs

npm run pub

使用

方式一：注册插件

import { plugins } from '@alilc/lowcode-engine';
import LowcodePluginTemplate from 'cu-lowcode-plugin-template';

// 注册到引擎
plugins.register(LowcodePluginTemplate);

方式二:从搭建中心添加

低代码sdk搭建中心->配置管理->依赖管理->添加插件

规范

1、插件面板的配置

在src文件夹下的index.tsx中可以对插件面板的一些属性进行配置， 插件面板宽度推荐使用默认值：600px 插件的图标大小需使用30px宽*30px高的svg，并将svg内容替换src文件夹下icon.tsx中的svg内容

2、插件的使用指南

在userGuide->UserGuideIcon中可以添加插件的使用指南链接，帮助使用者更好的使用插件。

方式一、可以直接通过图标点击跳转到使用文档的地址，例如

<Icon type="help" style={{ marginLeft: '5px', cursor: "pointer" }} onClick={() => { window.open("https://lowcode-engine.cn/site/docs/demoUsage/intro", "_blank") }} />

如果采用这种方式可以将userGuide->index.tsx删除，并删除"react-markdown": "8.0.7" 依赖

方式二、同样还可以使用UsageGuide组件，该组件支持点击时在右边抽屉打开使用文档，如图所示；该组件可以将public下面的UseGuide.md自动渲染出来，需要注意的是在编写UseGuide.md时图片资源需方在public->images 目录下, 如不希望使用该组件可以将"react-markdown": "8.0.7"依赖包移除

// 1、需要在packagejson中添加依赖[email protected]
// 2、使用组件，需要传入插件的发布地址，
<UsageGuide
     usageGuideUrl={'https://unpkg.com/[email protected]'}/>
// 3、若是已经有在线的使用指南markdown地址，也可以通过下述方式使用

方式三、同样使用UsageGuide组件，但此方式支持使用Markdown文档的实际全路径

<UsageGuide
     usageGuideUrl={'https://unpkg.com/[email protected]/README.md'}
     urlType={'realUrl'}/>