From 5624202586a65ff6f0247a94c4bc99311c95df9c Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 11 Jan 2023 16:03:25 +0800 Subject: [PATCH] feat: add docs for Parts --- docs/config/sidebars.js | 2 +- docs/docs/guide/expand/editor/cli.md | 2 +- .../guide/expand/editor/parts/_category_.json | 4 + .../guide/expand/editor/parts/partsIntro.md | 18 ++ .../guide/expand/editor/parts/partsassets.md | 267 ++++++++++++++++++ .../guide/expand/editor/parts/partslcc.md | 92 ++++++ .../{partsIntro.md => parts/prototype.md} | 37 +-- .../guide/expand/editor/pluginContextMenu.md | 5 +- docs/docs/guide/expand/editor/pluginWidget.md | 37 +-- docs/docs/guide/expand/editor/setter.md | 2 +- 10 files changed, 421 insertions(+), 45 deletions(-) create mode 100644 docs/docs/guide/expand/editor/parts/_category_.json create mode 100644 docs/docs/guide/expand/editor/parts/partsIntro.md create mode 100644 docs/docs/guide/expand/editor/parts/partsassets.md create mode 100644 docs/docs/guide/expand/editor/parts/partslcc.md rename docs/docs/guide/expand/editor/{partsIntro.md => parts/prototype.md} (78%) diff --git a/docs/config/sidebars.js b/docs/config/sidebars.js index 95a79962f..77a2e1f22 100644 --- a/docs/config/sidebars.js +++ b/docs/config/sidebars.js @@ -39,7 +39,7 @@ module.exports = { type: 'category', label: '扩展编辑器', collapsed: false, - items: getDocsFromDir('guide/expand/editor'), + items: getDocsFromDir('guide/expand/editor', [{ dir: 'guide/expand/editor/parts', label: 'Parts·造物' }]), }, { type: 'category', diff --git a/docs/docs/guide/expand/editor/cli.md b/docs/docs/guide/expand/editor/cli.md index 74b9fa821..60f44ce87 100644 --- a/docs/docs/guide/expand/editor/cli.md +++ b/docs/docs/guide/expand/editor/cli.md @@ -1,6 +1,6 @@ --- title: 低代码生态脚手架 & 调试机制 -sidebar_position: 7 +sidebar_position: 8 --- ## 脚手架简述 diff --git a/docs/docs/guide/expand/editor/parts/_category_.json b/docs/docs/guide/expand/editor/parts/_category_.json new file mode 100644 index 000000000..005a3caf6 --- /dev/null +++ b/docs/docs/guide/expand/editor/parts/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Parts 造物", + "position": 1 +} diff --git a/docs/docs/guide/expand/editor/parts/partsIntro.md b/docs/docs/guide/expand/editor/parts/partsIntro.md new file mode 100644 index 000000000..a6fc6e881 --- /dev/null +++ b/docs/docs/guide/expand/editor/parts/partsIntro.md @@ -0,0 +1,18 @@ +--- +title: 介绍 +sidebar_position: 1 +--- +## 介绍 +![](https://gw.alicdn.com/imgextra/i2/O1CN01Gyq6AZ1nOENPTVXX7_!!6000000005079-2-tps-256-104.png) + + +「Parts·造物」是基于开源低代码引擎打造的次时代物料研发和集成工具，一方面作为低代码引擎搭建低代码平台的一个样板展示开源生态下的各个组件如何集合在一起形成生产力，另一方面也可以生产低代码平台所需的物料。 + +目前「Parts·造物」主要提供两大产品功能： + 1. React 组件导入低代码引擎：通过在线可视化的「物料描述」配置，任意工具开发的 React 组件都可以快速完成对低代码引擎的适配，导入到低代码引擎项目中进行使用。不必额外开发新的组件。 + 2. 低代码生产组件：通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。 + + +## 联系我们 + + diff --git a/docs/docs/guide/expand/editor/parts/partsassets.md b/docs/docs/guide/expand/editor/parts/partsassets.md new file mode 100644 index 000000000..a8525f64c --- /dev/null +++ b/docs/docs/guide/expand/editor/parts/partsassets.md @@ -0,0 +1,267 @@ +--- +title: 资产包管理 +sidebar_position: 4 +--- + +## 介绍 + +通过前述介绍，相信大家已经了解如何使用 「[Parts·造物](https://parts.lowcode-engine.cn/)」 来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。 + +大家在使用的过程中，可能会希望构建出来的资产包可以后续随时访问下载，或者希望构建资产包时各个组件的版本等信息可以持久化起来并且能够多人维护。 + +通过「[Parts·造物](https://parts.lowcode-engine.cn/)」的 `资产包` 管理功能帮助大家解决这个问题 + +![image.png](https://img.alicdn.com/imgextra/i3/O1CN01Fkaznh1zWj9wYKpcH_!!6000000006722-2-tps-1702-628.png) + +## 新建资产包 + +首先，我们在 我的资产包 tab 中点击 `新建资产包` +![image.png](https://img.alicdn.com/imgextra/i1/O1CN01qe8zfO1ilysebSfD5_!!6000000004454-2-tps-3064-1432.png) + +- 填写资产包名称 +- 配置资产包管理员，管理员拥有该资产包的所有权限，初始默认为资产包的创建者，还可以添加其他人作为管理员， +- 配置资产包描述(可选) +- 点击 `确定`, 即可完成资产包的创建 + +接下来需要为资产包添加一个或者多个组件。 + +## 添加组件 + +第二步：新建完资产包以后，我们就可以为其添加组件了，如果是新建资产包流程，新建完成之后会自动弹出组件配置的弹窗，当然，你可可以通过点击资产包卡片的方式打开组件配置的弹窗。 +![image.png](https://img.alicdn.com/imgextra/i3/O1CN01kqymdB1nkDQclPk7F_!!6000000005127-2-tps-965-261.png) + +- 点击弹窗中 `添加组件` 按钮，在弹出的组件选择面板中，选中需要添加的组件并点击 `下一步`。 + ![image.png](https://img.alicdn.com/imgextra/i1/O1CN014Baihf1r742Qi1Wel_!!6000000005583-2-tps-1856-1520.png) +- 进入组件版本以及描述协议版本选择界面，选择所需要的正确版本，点击 `安装` 即可完成一个组件的添加。 + ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01Y7aWWi1MMPDVlidgz_!!6000000001420-2-tps-1668-1462.png) + +## 构建资产包 + +添加完组件以后就点击 `保存并构建资产包` 进入资产包构建配置弹窗 +![image.png](https://img.alicdn.com/imgextra/i4/O1CN01iZf4Ue1PlXnyKYxnK_!!6000000001881-2-tps-1288-670.png) + +- `开启缓存` : 可充分利用之前的构建结果缓存来加速资产包的生成，我们会将每个组件的构建结果以 包名和版本号为 key 进行缓存。 +- `任务描述` : 当前构建任务的一些描述信息。 + +点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面: +![image.png](https://img.alicdn.com/imgextra/i2/O1CN01krDaFc1TuTztMPssI_!!6000000002442-2-tps-1726-696.png) +构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态， 操作列可以在构建成功时复制或者下载资产包结果 + +## 使用资产包 +你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换demo中原来的资产包文件： +例如，在 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/services/assets.json)，即可快速使用自己的物料了。 + +### 在编辑器中使用资产包 +在使用含有低代码组件的资产包注意 注意引擎版本必须大于等于 `1.1.0-beta.9`。 +然后直接替换 [lowcode-demo](https://github.com/alibaba/lowcode-demo) demo 中的 `assets.json` 文件即可。 + +### 在预览中使用资产包 +在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表(`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件， 具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。 +基于资产包进行预览的整体逻辑如下： [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/preview.tsx)： +```ts +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; +import { + getProjectSchemaFromLocalStorage, +} from './services/mockService'; +import assets from './services/assets.json'; +import { parseAssets } from './parse-assets'; + +const getScenarioName = function () { + if (location.search) { + return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index'; + } + return 'index'; +}; + +const SamplePreview = () => { + const [data, setData] = useState({}); + async function init() { + const scenarioName = getScenarioName(); + const projectSchema = getProjectSchemaFromLocalStorage(scenarioName); + const { componentsMap: componentsMapArray, componentsTree } = projectSchema; + const schema = componentsTree[0]; + const componentsMap: any = {}; + componentsMapArray.forEach((component: any) => { + componentsMap[component.componentName] = component; + }); + + // 特别提醒重点注意！！！：从资产包中解析出所有的 react 组件列表 + const { components } = await parseAssets(assets); + + setData({ + schema, + components, + }); + } + + const { schema, components } = data; + + if (!schema || !components) { + init(); + return ; + } + + return ( +
+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('ice-container')); +``` + +从资产包中解析 react 组件列表的逻辑如下, [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/parse-assets.ts)： +```ts +import { ComponentDescription, ComponentSchema, RemoteComponentDescription } from '@alilc/lowcode-types'; +import { buildComponents, AssetsJson, AssetLoader } from '@alilc/lowcode-utils'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { injectComponents } from '@alilc/lowcode-plugin-inject'; +import React, { createElement } from 'react'; + +export async function parseAssets(assets: AssetsJson) { + const { components: rawComponents, packages } = assets; + const libraryAsset = []; + const libraryMap = {}; + const packagesMap = {}; + packages.forEach(pkg => { + const { package: _package, library, urls, renderUrls, id } = pkg; + if (_package) { + libraryMap[id || _package] = library; + } + packagesMap[id || _package] = pkg; + if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + let newComponents = rawComponents; + if (rawComponents && rawComponents.length) { + const componentDescriptions: ComponentDescription[] = []; + const remoteComponentDescriptions: RemoteComponentDescription[] = []; + rawComponents.forEach((component: any) => { + if (!component) { + return; + } + if (component.exportName && component.url) { + remoteComponentDescriptions.push(component); + } else { + componentDescriptions.push(component); + } + }); + newComponents = [...componentDescriptions]; + + // 如果有远程组件描述协议，则自动加载并补充到资产包中，同时出发 designer.incrementalAssetsReady 通知组件面板更新数据 + if (remoteComponentDescriptions && remoteComponentDescriptions.length) { + await Promise.all( + remoteComponentDescriptions.map(async (component: any) => { + const { exportName, url, npm } = component; + await (new AssetLoader()).load(url); + function setAssetsComponent(component: any, extraNpmInfo: any = {}) { + const components = component.components; + if (Array.isArray(components)) { + components.forEach(d => { + newComponents = newComponents.concat({ + npm: { + ...npm, + ...extraNpmInfo, + }, + ...d, + } || []); + }); + return; + } + newComponents = newComponents.concat({ + npm: { + ...npm, + ...extraNpmInfo, + }, + ...component.components, + } || []); + } + + function setArrayAssets(value: any[], preExportName: string = '', preSubName: string = '') { + value.forEach((d: any, i: number) => { + const exportName = [preExportName, i.toString()].filter(d => !!d).join('.'); + const subName = [preSubName, i.toString()].filter(d => !!d).join('.'); + Array.isArray(d) ? setArrayAssets(d, exportName, subName) : setAssetsComponent(d, { + exportName, + subName, + }); + }); + } + if (window[exportName]) { + if (Array.isArray(window[exportName])) { + setArrayAssets(window[exportName] as any); + } else { + setAssetsComponent(window[exportName] as any); + } + } + return window[exportName]; + }), + ); + } + } + const lowcodeComponentsArray = []; + const proCodeComponentsMap = newComponents.reduce((acc, cur) => { + if ((cur.devMode || '').toLowerCase() === 'lowcode') { + lowcodeComponentsArray.push(cur); + } else { + acc[cur.componentName] = { + ...(cur.reference || cur.npm), + componentName: cur.componentName, + }; + } + return acc; + }, {}) + + function genLowCodeComponentsMap(components) { + const lowcodeComponentsMap = {}; + lowcodeComponentsArray.forEach((lowcode) => { + const id = lowcode.reference?.id; + const schema = packagesMap[id]?.schema; + const comp = genLowcodeComp(schema, {...components, ...lowcodeComponentsMap}); + lowcodeComponentsMap[lowcode.componentName] = comp; + }); + return lowcodeComponentsMap; + } + let components = await injectComponents(buildComponents(libraryMap, proCodeComponentsMap)); + const lowCodeComponents = genLowCodeComponentsMap(components); + return { + components: { ...components, ...lowCodeComponents } + } +} + +function genLowcodeComp(schema: ComponentSchema, components: any) { + return class LowcodeComp extends React.Component { + render(): React.ReactNode { + return createElement(ReactRenderer, { + ...this.props, + schema, + components, + designMode: '', + }); + } + }; +} +``` +## 联系我们 + + \ No newline at end of file diff --git a/docs/docs/guide/expand/editor/parts/partslcc.md b/docs/docs/guide/expand/editor/parts/partslcc.md new file mode 100644 index 000000000..39f5dd46f --- /dev/null +++ b/docs/docs/guide/expand/editor/parts/partslcc.md @@ -0,0 +1,92 @@ +--- +title: 低代码组件 +sidebar_position: 2 +--- +## 什么是低代码组件 +我们先了解一下什么是低代码组件，为什么要用低代码组件。 + +低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于ProCode开发体系（后续迭代）。 + +那么为什么我们要使用低代码的形式来开发组件： +* 首先：轻快，低代码组件只需通过浏览器秒级完成初始化工作，不需要ProCode繁重的环境准备；环境一致（低代码环境），同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。 +* 其次：通用能力可视化方式抽象，提升研发效能，比如获取远程数据、视图开发、依赖管理、生命周期、事件绑定等功能。 + +低代码组件不是用来替代 ProCode 的开发方式，而是让开发者可以从ProCode中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。 + +## 创建组件 + +环境准备：我们可以通过Parts提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。 + +点击开发新组件 --> 填写组件标题 --> 填写组件名称 --> 点击确定，完成组件创建工作。 + +![](https://img.alicdn.com/imgextra/i2/O1CN01OTQRew25y6WxuONIx_!!6000000007594-2-tps-3396-1696.png) + +## 组件开发 + +一张图速览低代码组件开发的功能模块，其中大部分功能可以参考[低代码引擎文档](https://lowcode-engine.cn/site/docs/guide/quickStart/intro)。 + +![](https://img.alicdn.com/imgextra/i1/O1CN01gx96E121qzv4smV2v_!!6000000007037-2-tps-3456-1930.png) + +### 依赖管理 + +依赖管理用于管理低代码组件本身的依赖（类似于dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。 + +![](https://img.alicdn.com/imgextra/i4/O1CN01wC9JPK1J9dKLca9wK_!!6000000000986-2-tps-1438-819.png) + +### 属性定义 + +用于定义组件接收外部传入的propTypes，组件内部可以通过this.props.${属性名称}的方式获取属性值。 + +属性定义前建议先阅读 [物料描述详解](https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec)、[预置设置器](https://lowcode-engine.cn/site/docs/guide/appendix/setters)。 + +![](https://img.alicdn.com/imgextra/i2/O1CN01wesIJA1nL1eSPrk7U_!!6000000005072-2-tps-1438-821.png) + +![](https://img.alicdn.com/imgextra/i3/O1CN01FZIRwv1es9lGplgIB_!!6000000003926-2-tps-1438-821.png) + +### 生命周期 + +低代码组件的开发支持componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount几个生命周期 + +![](https://img.alicdn.com/imgextra/i4/O1CN010bnrxJ1oLlujlfFqj_!!6000000005209-2-tps-1438-819.png) + +### 组件调试 + +我们提供了一套线上实时调试的方案，只需点击右上角的调试按钮，就能自动创建一个低代码应用，在这个应用中可以实时调试当前的低代码组件。 + +![](https://img.alicdn.com/imgextra/i2/O1CN01Tk96vp1xrDeNeIUJD_!!6000000006496-2-tps-1438-820.png) + +在低代码应用中使用，组件面板 --> 低代码组件， 找到对应的低代码组件拖入画布即可。 + +![](https://img.alicdn.com/imgextra/i2/O1CN01oGHLea1lzDAhZQQVO_!!6000000004889-2-tps-1438-819.png) + +### 组件发布 + +同时我们提供了组件发布的功能，用于组件版本管理，点击右上角的发布按钮即可发布组件 + +![](https://img.alicdn.com/imgextra/i2/O1CN017suVAD1NXEC8zQgO1_!!6000000001579-2-tps-1438-821.png) + +## 组件使用 + +组件的消费是通过资产包来管理的，详情请参考 [资产包管理](./partsassets)。 + +## 组件导出 + +开发好的低代码组件可以导出成为 React 组件，脱离低代码引擎独立使用。同时导出功能也为您的组件留出一份备份，您可以放心使用本产品的服务，而不用担心万一出现的不能服务的场景。 + +在物料列表页面，低代码组件会有一个导出的动作。 + +![](https://img.alicdn.com/imgextra/i2/O1CN016oUByO21spVHZvvw2_!!6000000007041-2-tps-1395-413.png) + +点击导出后，就会开启导出低代码组件的过程。这个过程持续 10s+，导出完成后会为您自动下载对应的 zip 包。 + +![](https://img.alicdn.com/imgextra/i1/O1CN01lctpIo1aDcEvu75Mo_!!6000000003296-2-tps-1399-512.png) + +zip 包解压后可以看到一个完整的组件脚手架工程，您可以在这个工程里继续开发调试，或者发布到合适的 npm 源中。 + +![](https://img.alicdn.com/imgextra/i1/O1CN010aAjsf1xYRPZBAh7d_!!6000000006455-2-tps-2154-1072.png) + +注意：目前导出功能暂不支持 低代码组件嵌套。 + +## 联系我们 + + \ No newline at end of file diff --git a/docs/docs/guide/expand/editor/partsIntro.md b/docs/docs/guide/expand/editor/parts/prototype.md similarity index 78% rename from docs/docs/guide/expand/editor/partsIntro.md rename to docs/docs/guide/expand/editor/parts/prototype.md index 174afc37a..71a4f3d01 100644 --- a/docs/docs/guide/expand/editor/partsIntro.md +++ b/docs/docs/guide/expand/editor/parts/prototype.md @@ -1,5 +1,5 @@ --- -title: 利用 Parts 造物快速使用 react 组件 +title: React 组件导入 sidebar_position: 3 --- ## 介绍 @@ -50,10 +50,8 @@ sidebar_position: 3 ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01klci7y1IUPflKpeVB_!!6000000000896-2-tps-1193-704.png) #### 给组件增加物料描述 -选中刚刚新增的 BlockPicker 组件，然后给它增加描述： - - 打开左侧 Setter 面板 -- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter） +- 按照组件的属性拖入需要 Setter 类型 （如图中组件的width属性，拖入数字Setter） - 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters) - 配置属性的基本信息（如图所示） - 配置完成后点击右上角的保存 @@ -102,31 +100,22 @@ sidebar_position: 3 - 点击确定发布完成 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01uwa8RH1QDwM7FN31k_!!6000000001943-2-tps-1431-734.png) - -## 资产包构建 - +## 资产包 第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。 #### 资产包构建 +有两种方式可以构建资产包: +- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets) +- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下： -- 选择需要构建的组件 -- 点击构建资产包按钮 -- 选择刚刚的物料描述配置 -- 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了 - -![image.png](https://img.alicdn.com/imgextra/i3/O1CN01Oc73aw1TH5vlJx9oj_!!6000000002356-2-tps-1431-770.png) + - 选择需要构建的组件 + - 点击构建资产包按钮 + - 选择刚刚的物料描述配置 + - 开始构建，构建完成后你将得到一份json文件（里面包含了物料描述和umd包），就可以到项目中使用了 #### 资产包使用 +详情请参考 [资产包管理](./partsassets#使用资产包) -**方式一、在 **[**lowcode-demo**](https://github.com/alibaba/lowcode-demo)**中直接引用，可直接替换 demo 中原来的资产包文件：** +## 联系我们 -例如，在 basic-fusion demo 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/assets.json)，即可快速使用自己的物料了。 - -**方式二、将新的资产包内容和现有的资产包内容融合：** - -将上面构建完成的资产包与你项目中的[assets.json 文件](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/assets.json)合并，主要合并 packages 和 components。 - -- packages 中是构建好的 umd 包； -- components 中是上面配置好的[物料描述](https://lowcode-engine.cn/material)，你也可以在基础上二次加工； - -![image.png](https://img.alicdn.com/imgextra/i3/O1CN01m7QkDN1P7hL86mjyH_!!6000000001794-2-tps-1140-744.png) + diff --git a/docs/docs/guide/expand/editor/pluginContextMenu.md b/docs/docs/guide/expand/editor/pluginContextMenu.md index 2f1ab737c..e9dbdf3c4 100644 --- a/docs/docs/guide/expand/editor/pluginContextMenu.md +++ b/docs/docs/guide/expand/editor/pluginContextMenu.md @@ -2,7 +2,9 @@ title: 插件扩展 - 编排扩展 sidebar_position: 6 --- + ## 场景一：扩展选中节点操作项 + ### 增加节点操作项 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01J7PrJc1S86XNDBIFQ_!!6000000002201-2-tps-1240-292.png) @@ -31,7 +33,7 @@ const addHelloAction = (ctx: IPublicModelPluginContext) => { }, important: true, }); - } + }, }; }; addHelloAction.pluginName = 'addHelloAction'; @@ -68,6 +70,7 @@ await plugins.register(removeCopyAction); 具体 API 参考：[API 文档](/site/docs/api/material#removebuiltincomponentaction) ## 实际案例 + ### 区块管理 - 仓库地址：[https://github.com/alibaba/lowcode-plugins](https://github.com/alibaba/lowcode-plugins) diff --git a/docs/docs/guide/expand/editor/pluginWidget.md b/docs/docs/guide/expand/editor/pluginWidget.md index c319bb2a3..7efaffcf0 100644 --- a/docs/docs/guide/expand/editor/pluginWidget.md +++ b/docs/docs/guide/expand/editor/pluginWidget.md @@ -2,6 +2,7 @@ title: 插件扩展 - 面板扩展 sidebar_position: 5 --- + ## 插件简述 插件功能赋予低代码引擎更高的灵活性，低代码引擎的生态提供了一些官方的插件，但是无法满足所有人的需求，所以提供了强大的插件定制功能。 @@ -23,7 +24,7 @@ import { IPublicModelPluginContext } from '@alilc/lowcode-types'; const pluginA = (ctx: IPublicModelPluginContext, options: any) => { return { init() { - console.log(options.key); + console.log(options.key); // 往引擎增加面板 ctx.skeleton.add({ // area 配置见下方说明 @@ -36,9 +37,9 @@ const pluginA = (ctx: IPublicModelPluginContext, options: any) => { }, destroy() { console.log('我被销毁了~'); - } - } -} + }, + }; +}; pluginA.pluginName = 'pluginA'; @@ -56,6 +57,7 @@ plugins.register(pluginA, { key: 'test' }); ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01y05ZHC1Gix0p4nXxH_!!6000000000657-2-tps-3068-1648.png) ### 展示区域 area + #### topArea 展示在设计器的顶部区域，常见的相关区域的插件主要是：、 @@ -76,6 +78,7 @@ plugins.register(pluginA, { key: 'test' }); 4. JS 等代码面板。 可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。 + #### centerArea 画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有： @@ -106,12 +109,12 @@ PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主 接入可以参考代码 ```javascript -import { skeleton } from "@alilc/lowcode-engine"; +import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ - area: "leftArea", // 插件区域 - type: "PanelDock", // 插件类型，弹出面板 - name: "sourceEditor", + area: 'leftArea', // 插件区域 + type: 'PanelDock', // 插件类型，弹出面板 + name: 'sourceEditor', content: SourceEditor, // 插件组件实例 props: { align: "left", @@ -139,12 +142,12 @@ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中 接入可以参考代码： ```javascript -import {skeleton} from "@alilc/lowcode-engine"; +import { skeleton } from '@alilc/lowcode-engine'; // 注册 logo 面板 skeleton.add({ - area: "topArea", - type: "Widget", - name: "logo", + area: 'topArea', + type: 'Widget', + name: 'logo', content: Logo, // Widget 组件实例 contentProps: { // Widget 插件 props logo: @@ -152,7 +155,7 @@ skeleton.add({ href: "/", }, props: { - align: "left", + align: 'left', width: 100, }, }); @@ -163,7 +166,7 @@ skeleton.add({ 一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。 ```javascript -import { skeleton } from "@alilc/lowcode-engine"; +import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ area: 'leftArea', @@ -176,12 +179,12 @@ skeleton.add({ props: { align: 'bottom', }, - onClick: function() { + onClick: function () { // 打开外部链接 window.open('https://lowcode-engine.cn'); // 显示 widget skeleton.showWidget('xxx'); - } + }, }); ``` @@ -211,4 +214,4 @@ skeleton.add({ - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - ICON 优化](https://www.bilibili.com/video/BV1zr4y1H7Km/) - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 自动截图](https://www.bilibili.com/video/BV1GZ4y117VH/) - [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 样式优化](https://www.bilibili.com/video/BV1Pi4y1S7ZT/) - - [阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR](https://www.bilibili.com/video/BV1hB4y1277o/) \ No newline at end of file + - [阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR](https://www.bilibili.com/video/BV1hB4y1277o/) diff --git a/docs/docs/guide/expand/editor/setter.md b/docs/docs/guide/expand/editor/setter.md index 6a720374f..01fd949bb 100644 --- a/docs/docs/guide/expand/editor/setter.md +++ b/docs/docs/guide/expand/editor/setter.md @@ -1,6 +1,6 @@ --- title: 设置器扩展 -sidebar_position: 4 +sidebar_position: 5 --- ## 设置器简述