github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-12 11:20:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

build: upgrade docs deps

Browse Source
This commit is contained in:
1ncounter 2024-03-22 16:43:49 +08:00
parent fedbbca845
commit 3592356c90
30 changed files with 816 additions and 744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/README.md
View File

@ -2,27 +2,20 @@
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
### 安装
```
$ yarn
```
### 本地开发 ### 本地开发
``` ```
$ yarn start $ pnpm start
``` ```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
### 构建 ### 构建
``` ```
$ yarn build $ pnpm build
``` ```
### 部署 ### 部署
```bash ```bash
1. npm run build 1. npm run build
2. npm publish # 记得改下版本号，比如 1.0.1 2. npm publish # 记得改下版本号，比如 1.0.1
@ -34,12 +27,13 @@ $ yarn build
5. lowcode-engine.cn 站点生效 5. lowcode-engine.cn 站点生效
``` ```
## 功能 ## 功能
- [x] 支持本地离线搜索 - [x] 支持本地离线搜索
- [x] 版本化文档管理 - [x] 版本化文档管理
- [x] 离线静态部署 - [x] 离线静态部署
- [x] 主题（fork 宜搭开发者中心） - [x] 主题（fork 宜搭开发者中心）
## 使用文档 ## 使用文档
https://docusaurus.io/zh-CN/docs/docs-introduction https://docusaurus.io/zh-CN/docs/docs-introduction

10
docs/config/navbar.js → docs/config/navbar.ts
View File

@ -1,7 +1,6 @@
/** import type * as Preset from '@docusaurus/preset-classic';
* 此配置的修改，如未生效，可以重新启动下即可
*/ const navbar: Preset.ThemeConfig['navbar'] = {
module.exports = {
title: '', title: '',
logo: { logo: {
alt: 'LowCode-Engine', alt: 'LowCode-Engine',
@ -63,7 +62,6 @@ module.exports = {
// position: 'right', // position: 'right',
// dropdownActiveClassDisabled: true, // dropdownActiveClassDisabled: true,
// }, // },
// {
{ {
href: 'https://github.com/alibaba/lowcode-engine', href: 'https://github.com/alibaba/lowcode-engine',
position: 'right', position: 'right',
@ -82,3 +80,5 @@ module.exports = {
}, },
], ],
}; };
export default navbar;

27
docs/config/sidebars.js → docs/config/sidebars.ts
View File

@ -1,23 +1,6 @@
/* import getDocsFromDir from '../scripts/getDocsFromDir';
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const getDocsFromDir = require('../scripts/getDocsFromDir');
module.exports = { const sidebars = {
// 手动配置的导航
// guide: [
// 'guide/quickStart/intro',
// 'guide/quickStart/start',
// {
// type: 'category',
// label: 'FAQ',
// collapsed: false,
// items: getDocsFromDir('guide/quickStart/faq'),
// },
// ],
/** /**
* 根据当前目录自动生成导航配置 * 根据当前目录自动生成导航配置
*/ */
@ -39,7 +22,9 @@ module.exports = {
type: 'category', type: 'category',
label: '扩展编辑器', label: '扩展编辑器',
collapsed: false, collapsed: false,
items: getDocsFromDir('guide/expand/editor', [{ dir: 'guide/expand/editor/parts', label: 'Parts·造物' }]), items: getDocsFromDir('guide/expand/editor', [
{ dir: 'guide/expand/editor/parts', label: 'Parts·造物' },
]),
}, },
{ {
type: 'category', type: 'category',
@ -109,3 +94,5 @@ module.exports = {
}, },
], ],
}; };
export default sidebars;

2
docs/config/sidebarsCommunity.js → docs/config/sidebarsCommunity.ts
View File

@ -1,4 +1,4 @@
module.exports = { export default {
community: [ community: [
{ {
type: 'autogenerated', type: 'autogenerated',

41
docs/docs/api/commonUI.md
View File

@ -6,6 +6,7 @@ sidebar_position: 10
> **@since** v1.3.0 > **@since** v1.3.0
## 简介 ## 简介
CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。 CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。
## 组件列表 ## 组件列表
@ -15,18 +16,17 @@ CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开
提示组件 提示组件
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|--------------|---------------------------------------|--------| | --------- | ---------- | -------------------------------------- | ------ |
| className | className | string (optional) | | | className | className | string (optional) | |
| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | | | children | tip 的内容 | IPublicTypeI18nData \| ReactNode | |
| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | | | direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | |
### HelpTip ### HelpTip
带 help icon 的提示组件 带 help icon 的提示组件
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|--------|-----------------------------------|--------| | --------- | ---- | --------------------------------- | ------- |
| help | 描述 | IPublicTypeHelpTipConfig | | | help | 描述 | IPublicTypeHelpTipConfig | |
| direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' | | direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' |
| size | 方向 | IconProps['size'] | 'small' | | size | 方向 | IconProps['size'] | 'small' |
@ -36,7 +36,7 @@ CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开
标题组件 标题组件
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------|-----------------------------|--------| | --------- | --------- | ----------------------- | ------ |
| title | 标题内容 | IPublicTypeTitleContent | | | title | 标题内容 | IPublicTypeTitleContent | |
| className | className | string (optional) | | | className | className | string (optional) | |
| onClick | 点击事件 | () => void (optional) | | | onClick | 点击事件 | () => void (optional) | |
@ -44,19 +44,19 @@ CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开
### ContextMenu ### ContextMenu
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------|----------------------------------------------------|------------------------------------|--------| | -------- | ------------------------ | ------------------------------ | ------ |
| menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | | | menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | |
| children | 组件的子元素 | React.ReactElement[] | | | children | 组件的子元素 | React.ReactElement[] | |
**IPublicTypeContextMenuAction Interface** **IPublicTypeContextMenuAction Interface**
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------| | --------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- |
| name | 动作的唯一标识符<br/>Unique identifier for the action | string | | | name | 动作的唯一标识符<br/>Unique identifier for the action | string | |
| title | 显示的标题，可以是字符串或国际化数据 <br/> Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | | | title | 显示的标题，可以是字符串或国际化数据 <br/> Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | |
| type | 菜单项类型 <br/> Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM | | type | 菜单项类型 <br/> Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM |
| action | 点击时执行的动作，可选<br/>Action to execute on click, optional | (nodes: IPublicModelNode[]) => void (optional) | | | action | 点击时执行的动作，可选<br/>Action to execute on click, optional | (nodes: IPublicModelNode[]) => void (optional) | |
| items | 子菜单项或生成子节点的函数，可选，仅支持两级<br/>Sub-menu items or function to generate child node, optional | Omit<IPublicTypeContextMenuAction, 'items'>[] \| ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional) | | | items | 子菜单项或生成子节点的函数，可选，仅支持两级 <br/> Sub-menu items or function to generate child node, optional | `Omit<IPublicTypeContextMenuAction, 'items'>[] | ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional)` | |
| condition | 显示条件函数 <br/> Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | | condition | 显示条件函数 <br/> Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | |
| disabled | 禁用条件函数，可选<br/>Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | | disabled | 禁用条件函数，可选<br/>Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | |
@ -127,84 +127,109 @@ export default App;
详细文档： [Balloon Documentation](https://fusion.design/pc/component/balloon) 详细文档： [Balloon Documentation](https://fusion.design/pc/component/balloon)
### Breadcrumb ### Breadcrumb
详细文档： [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb) 详细文档： [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb)
### Button ### Button
详细文档： [Button Documentation](https://fusion.design/pc/component/button) 详细文档： [Button Documentation](https://fusion.design/pc/component/button)
### Card ### Card
详细文档：[Card Documentation](https://fusion.design/pc/component/card) 详细文档：[Card Documentation](https://fusion.design/pc/component/card)
### Checkbox ### Checkbox
详细文档：[Checkbox Documentation](https://fusion.design/pc/component/checkbox) 详细文档：[Checkbox Documentation](https://fusion.design/pc/component/checkbox)
### DatePicker ### DatePicker
详细文档：[DatePicker Documentation](https://fusion.design/pc/component/datepicker) 详细文档：[DatePicker Documentation](https://fusion.design/pc/component/datepicker)
### Dialog ### Dialog
详细文档：[Dialog Documentation](https://fusion.design/pc/component/dialog) 详细文档：[Dialog Documentation](https://fusion.design/pc/component/dialog)
### Dropdown ### Dropdown
详细文档：[Dropdown Documentation](https://fusion.design/pc/component/dropdown) 详细文档：[Dropdown Documentation](https://fusion.design/pc/component/dropdown)
### Form ### Form
详细文档：[Form Documentation](https://fusion.design/pc/component/form) 详细文档：[Form Documentation](https://fusion.design/pc/component/form)
### Icon ### Icon
详细文档：[Icon Documentation](https://fusion.design/pc/component/icon) 详细文档：[Icon Documentation](https://fusion.design/pc/component/icon)
引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133 引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133
### Input ### Input
详细文档：[Input Documentation](https://fusion.design/pc/component/input) 详细文档：[Input Documentation](https://fusion.design/pc/component/input)
### Loading ### Loading
详细文档：[Loading Documentation](https://fusion.design/pc/component/loading) 详细文档：[Loading Documentation](https://fusion.design/pc/component/loading)
### Message ### Message
详细文档：[Message Documentation](https://fusion.design/pc/component/message) 详细文档：[Message Documentation](https://fusion.design/pc/component/message)
### Overlay ### Overlay
详细文档：[Overlay Documentation](https://fusion.design/pc/component/overlay) 详细文档：[Overlay Documentation](https://fusion.design/pc/component/overlay)
### Pagination ### Pagination
详细文档：[Pagination Documentation](https://fusion.design/pc/component/pagination) 详细文档：[Pagination Documentation](https://fusion.design/pc/component/pagination)
### Radio ### Radio
详细文档：[Radio Documentation](https://fusion.design/pc/component/radio) 详细文档：[Radio Documentation](https://fusion.design/pc/component/radio)
### Search ### Search
详细文档：[Search Documentation](https://fusion.design/pc/component/search) 详细文档：[Search Documentation](https://fusion.design/pc/component/search)
### Select ### Select
详细文档：[Select Documentation](https://fusion.design/pc/component/select) 详细文档：[Select Documentation](https://fusion.design/pc/component/select)
### SplitButton ### SplitButton
详细文档：[SplitButton Documentation](https://fusion.design/pc/component/splitbutton) 详细文档：[SplitButton Documentation](https://fusion.design/pc/component/splitbutton)
### Step ### Step
详细文档：[Step Documentation](https://fusion.design/pc/component/step) 详细文档：[Step Documentation](https://fusion.design/pc/component/step)
### Switch ### Switch
详细文档：[Switch Documentation](https://fusion.design/pc/component/switch) 详细文档：[Switch Documentation](https://fusion.design/pc/component/switch)
### Tab ### Tab
详细文档：[Tab Documentation](https://fusion.design/pc/component/tab) 详细文档：[Tab Documentation](https://fusion.design/pc/component/tab)
### Table ### Table
详细文档：[Table Documentation](https://fusion.design/pc/component/table) 详细文档：[Table Documentation](https://fusion.design/pc/component/table)
### Tree ### Tree
详细文档：[Tree Documentation](https://fusion.design/pc/component/tree) 详细文档：[Tree Documentation](https://fusion.design/pc/component/tree)
### TreeSelect ### TreeSelect
详细文档：[TreeSelect Documentation](https://fusion.design/pc/component/treeselect) 详细文档：[TreeSelect Documentation](https://fusion.design/pc/component/treeselect)
### Upload ### Upload
详细文档：[Upload Documentation](https://fusion.design/pc/component/upload) 详细文档：[Upload Documentation](https://fusion.design/pc/component/upload)
### Divider ### Divider
详细文档：[Divider Documentation](https://fusion.design/pc/component/divider) 详细文档：[Divider Documentation](https://fusion.design/pc/component/divider)
## 说明 ## 说明

6
docs/docs/guide/appendix/setterDetails/mixed.md
View File

@ -1,7 +1,9 @@
--- ---
title: MixedSetter title: MixedSetter
--- ---
## 简介 ## 简介
可以让属性同时支持多个 setter 可以让属性同时支持多个 setter
## 展示 ## 展示
@ -11,5 +13,5 @@ title: MixedSetter
## 配置 ## 配置
| **属性名** | **类型** | **说明** | | **属性名** | **类型** | **说明** |
| --- | --- | --- | | ---------- | --------------- | ---------- |
| setters | Array<String\> | SetterName | | setters | `Array<String>` | SetterName |

9
docs/docs/guide/appendix/setterDetails/radioGroup.md
View File

@ -1,18 +1,23 @@
--- ---
title: RadioGroupSetter title: RadioGroupSetter
--- ---
## 简介 ## 简介
用于直观的展示选择并选择。 用于直观的展示选择并选择。
## 展示 ## 展示
<img src="https://img.alicdn.com/imgextra/i2/O1CN01rId9td25yYv0my5Hd_!!6000000007595-2-tps-564-98.png" width="300"/> <img src="https://img.alicdn.com/imgextra/i2/O1CN01rId9td25yYv0my5Hd_!!6000000007595-2-tps-564-98.png" width="300"/>
## setter 配置 ## setter 配置
| 属性名 | 说明 | | 属性名 | 说明 |
| --- | --- | | ------------ | ------------------------------------------------------------------------------------ | ----------------------- |
| defaultValue | 默认值 | | defaultValue | 默认值 |
| options | 传入的数据源，**参数格式**: [{img: 'url', value: 'text', label/title: 'text'}, ...] \| [ 'text', 'text', ...] | | options | 传入的数据源，**参数格式**: `[{img: 'url', value: 'text', label/title: 'text'}, ...] | [ 'text', 'text', ...]` |
## 返回类型 ## 返回类型
String | Number | Boolean String | Number | Boolean
会返回 options 中的 value 值 会返回 options 中的 value 值

8
docs/docs/guide/appendix/setterDetails/select.md
View File

@ -1,18 +1,22 @@
--- ---
title: SelectSetter title: SelectSetter
--- ---
## 简介 ## 简介
用来选择组件。在限定的可选性内进行选择，核心能力是选择 用来选择组件。在限定的可选性内进行选择，核心能力是选择
## 展示 ## 展示
<img src="https://img.alicdn.com/imgextra/i4/O1CN013arqCy1f1JfwdTGQo_!!6000000003946-2-tps-574-602.png" width="300"/> <img src="https://img.alicdn.com/imgextra/i4/O1CN013arqCy1f1JfwdTGQo_!!6000000003946-2-tps-574-602.png" width="300"/>
## setter 配置 ## setter 配置
| 属性名 | 说明 | | 属性名 | 说明 |
| --- | --- | | ------------ | -------------------------------------------------------------------------- |
| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' | | mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
| defaultValue | 默认值 | | defaultValue | 默认值 |
| options | 传入的数据源，**参数格式**: [ {label/title: '文字', value: 'text'}, ...] | | options | 传入的数据源，**参数格式**: `[ {label/title: '文字', value: 'text'}, ...]` |
## 返回类型 ## 返回类型

12
docs/docs/guide/appendix/setterDetails/slot.md
View File

@ -1,7 +1,9 @@
--- ---
title: SlotSetter title: SlotSetter
--- ---
## 简介 ## 简介
通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。 通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。
## 展示 ## 展示
@ -16,13 +18,14 @@ title: SlotSetter
## setter 配置 ## setter 配置
| 属性名 | 类型 | 说明 | | 属性名 | 类型 | 说明 |
| --- | --- | --- | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 | | initialValue | Object | 默认值 `{ "type": "JSSlot", "params": [ "module" ], "value": [] }` params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[] 不同 | | hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[] 不同 |
| checkedText | string | switch 选中文案，默认显示"启用" | | checkedText | string | switch 选中文案，默认显示"启用" |
| unCheckedText | string | switch 取消文案，默认显示"关闭" | | unCheckedText | string | switch 取消文案，默认显示"关闭" |
## 配置示例 ## 配置示例
### 配置 ### 配置
```typescript ```typescript
@ -40,6 +43,7 @@ title: SlotSetter
} }
} }
``` ```
### 组件 ### 组件
```typescript ```typescript
@ -47,7 +51,9 @@ function A(props) {
return props.propName; return props.propName;
} }
``` ```
## 带参数的插槽示例 ## 带参数的插槽示例
### 配置 ### 配置
```typescript ```typescript
@ -66,6 +72,7 @@ function A(props) {
} }
} }
``` ```
### 组件 ### 组件
组件需要传参数进行渲染，和普通示例的使用不一样。 组件需要传参数进行渲染，和普通示例的使用不一样。
@ -76,6 +83,7 @@ function A(props) {
return props.propName(module); return props.propName(module);
} }
``` ```
### param 使用示例 ### param 使用示例
1.开启插槽 1.开启插槽

6
docs/docs/guide/appendix/setterDetails/style.md
View File

@ -1,7 +1,9 @@
--- ---
title: StyleSetter title: StyleSetter
--- ---
## 简介 ## 简介
通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。 通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。
## 展示 ## 展示
@ -11,7 +13,7 @@ title: StyleSetter
## setter 配置 ## setter 配置
| 属性名 | 类型 | 说明 | | 属性名 | 类型 | 说明 |
| --- | --- | --- | | ----------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| unit | String | 默认值 px <img src="https://img.alicdn.com/imgextra/i4/O1CN014BRbq41TKIhXjQuOf_!!6000000002363-2-tps-576-98.png" width="250"/> | | unit | String | 默认值 px <img src="https://img.alicdn.com/imgextra/i4/O1CN014BRbq41TKIhXjQuOf_!!6000000002363-2-tps-576-98.png" width="250"/> |
| placeholderScale | Number | 默认计算尺寸缩放 默认值为 1 <img src="https://img.alicdn.com/imgextra/i4/O1CN01OLWb2g1Yd94uAC6ax_!!6000000003081-2-tps-250-98.png" width="100"/> 在没有设定数值的时候，系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下，例如手机场景，在编辑器展示的是 375 的实际宽度，但是实际设计尺寸是 750 的宽度，这个时候需要对这个计算尺寸设成 2 | | placeholderScale | Number | 默认计算尺寸缩放 默认值为 1 <img src="https://img.alicdn.com/imgextra/i4/O1CN01OLWb2g1Yd94uAC6ax_!!6000000003081-2-tps-250-98.png" width="100"/> 在没有设定数值的时候，系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下，例如手机场景，在编辑器展示的是 375 的实际宽度，但是实际设计尺寸是 750 的宽度，这个时候需要对这个计算尺寸设成 2 |
| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 | | showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
@ -22,7 +24,7 @@ title: StyleSetter
| layoutPropsConfig.isShowMargin | Boolean | 默认值 true <img src="https://img.alicdn.com/imgextra/i3/O1CN01H2qo0N1dVssDYT8EN_!!6000000003742-2-tps-536-482.png" width="250"/> 是否展示外边距（四个边） | | | layoutPropsConfig.isShowMargin | Boolean | 默认值 true <img src="https://img.alicdn.com/imgextra/i3/O1CN01H2qo0N1dVssDYT8EN_!!6000000003742-2-tps-536-482.png" width="250"/> 是否展示外边距（四个边） | |
| layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true <img src="https://img.alicdn.com/imgextra/i2/O1CN01A0pqoz1CAp2KUv230_!!6000000000041-2-tps-546-102.png" width="250"/> 是否展示宽高 | | layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true <img src="https://img.alicdn.com/imgextra/i2/O1CN01A0pqoz1CAp2KUv230_!!6000000000041-2-tps-546-102.png" width="250"/> 是否展示宽高 |
| fontPropsConfig | Object | 文字样式设置 | | fontPropsConfig | Object | 文字样式设置 |
| fontPropsConfig.fontFamilyList | Array | [ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项 | | fontPropsConfig.fontFamilyList | Array | `[ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' }]` 可以定制文字字体选项 |
| positionPropsConfig | Object | 位置样式设置 | | positionPropsConfig | Object | 位置样式设置 |
| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 | | positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 | | positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |

5
docs/docs/guide/appendix/setters.md
View File

@ -2,8 +2,9 @@
title: 预置设置器列表 title: 预置设置器列表
sidebar_position: 4 sidebar_position: 4
--- ---
| 预置 Setter | 返回类型 | 用途 | 截图 | | 预置 Setter | 返回类型 | 用途 | 截图 |
| --- | --- | --- | --- | | ---------------------------------------------- | ----------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| [ArraySetter](./setterDetails/array) | T[] | 列表数组行数据设置器 | ![](https://img.alicdn.com/imgextra/i1/O1CN01UNmb7429mtHsbTHg3_!!6000000008111-2-tps-584-362.png) | | [ArraySetter](./setterDetails/array) | T[] | 列表数组行数据设置器 | ![](https://img.alicdn.com/imgextra/i1/O1CN01UNmb7429mtHsbTHg3_!!6000000008111-2-tps-584-362.png) |
| [BoolSetter](./setterDetails/behavior) | boolean | 布尔型数据设置器， | ![](https://img.alicdn.com/imgextra/i2/O1CN01gZlHyx24MiZfjU61A_!!6000000007377-2-tps-320-82.png) | | [BoolSetter](./setterDetails/behavior) | boolean | 布尔型数据设置器， | ![](https://img.alicdn.com/imgextra/i2/O1CN01gZlHyx24MiZfjU61A_!!6000000007377-2-tps-320-82.png) |
| ClassNameSetter | string | 样式名设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01ResoVi1PtKWxwuww8_!!6000000001898-2-tps-502-180.png) | | ClassNameSetter | string | 样式名设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01ResoVi1PtKWxwuww8_!!6000000001898-2-tps-502-180.png) |
@ -18,7 +19,7 @@ sidebar_position: 4
| JsonSetter | object | json 型数据设置器 | ![](https://img.alicdn.com/imgextra/i2/O1CN01mQTFjY1YiBQzWYj64_!!6000000003092-2-tps-1076-1068.png) | | JsonSetter | object | json 型数据设置器 | ![](https://img.alicdn.com/imgextra/i2/O1CN01mQTFjY1YiBQzWYj64_!!6000000003092-2-tps-1076-1068.png) |
| [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 | ![](https://img.alicdn.com/imgextra/i1/O1CN01ZxomFY1JW4j7wIGuQ_!!6000000001035-2-tps-1552-480.png) | | [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 | ![](https://img.alicdn.com/imgextra/i1/O1CN01ZxomFY1JW4j7wIGuQ_!!6000000001035-2-tps-1552-480.png) |
| [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01dSfSgg1WS2EpbqJIO_!!6000000002786-2-tps-1152-328.png) | | [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01dSfSgg1WS2EpbqJIO_!!6000000002786-2-tps-1152-328.png) |
| ObjectSetter | Record<string, any> | 对象数据设置器，一般内嵌在 ArraySetter 中 || | ObjectSetter | object | 对象数据设置器，一般内嵌在 ArraySetter 中 | |
| [RadioGroupSetter](./setterDetails/radioGroup) | string &#124; number &#124; boolean | 枚举型数据设置器，采用 tab 选择的形式展现 | | ![](https://img.alicdn.com/imgextra/i4/O1CN01Z0Zgi51W10s5L2Hce_!!6000000002727-2-tps-564-98.png) | | [RadioGroupSetter](./setterDetails/radioGroup) | string &#124; number &#124; boolean | 枚举型数据设置器，采用 tab 选择的形式展现 | | ![](https://img.alicdn.com/imgextra/i4/O1CN01Z0Zgi51W10s5L2Hce_!!6000000002727-2-tps-564-98.png) |
| [SelectSetter](./setterDetails/select) | string &#124; number &#124; boolean | 枚举型数据设置器，采用下拉的形式展现 | ![](https://img.alicdn.com/imgextra/i1/O1CN01sfUEgZ1I0BXCl60LM_!!6000000000830-2-tps-582-282.png) | | [SelectSetter](./setterDetails/select) | string &#124; number &#124; boolean | 枚举型数据设置器，采用下拉的形式展现 | ![](https://img.alicdn.com/imgextra/i1/O1CN01sfUEgZ1I0BXCl60LM_!!6000000000830-2-tps-582-282.png) |
| [SlotSetter](./setterDetails/slot) | Element &#124; Element[] | 节点型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01wulNGt1qNip0IlEsF_!!6000000005484-2-tps-644-164.png) | | [SlotSetter](./setterDetails/slot) | Element &#124; Element[] | 节点型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01wulNGt1qNip0IlEsF_!!6000000005484-2-tps-644-164.png) |

96
docs/docs/guide/expand/editor/material.md
View File

@ -2,7 +2,9 @@
title: 物料扩展 title: 物料扩展
sidebar_position: 1 sidebar_position: 1
--- ---
## 物料简述 ## 物料简述
物料是页面搭建的原料，按照粒度可分为组件、区块和模板： 物料是页面搭建的原料，按照粒度可分为组件、区块和模板：
1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现； 1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
@ -10,8 +12,11 @@ sidebar_position: 1
3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面； 3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；
低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。 低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。
## 资产包配置 ## 资产包配置
### 什么是低代码资产包 ### 什么是低代码资产包
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01SQJfxh1Y8uwDXksaK_!!6000000003015-2-tps-3068-1646.png) ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01SQJfxh1Y8uwDXksaK_!!6000000003015-2-tps-3068-1646.png)
在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。 在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。
**_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_** **_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_**
@ -32,32 +37,41 @@ export interface ComponentSort {
export interface RemoteComponentDescription { export interface RemoteComponentDescription {
exportName: string; // 组件描述导出名字，可以通过 window[exportName] 获取到组件描述的 Object 内容； exportName: string; // 组件描述导出名字，可以通过 window[exportName] 获取到组件描述的 Object 内容；
url: string; // 组件描述的资源链接； url: string; // 组件描述的资源链接；
package: { // 组件 (库) 的 npm 信息； package: {
// 组件 (库) 的 npm 信息；
npm: string; npm: string;
} };
} }
``` ```
资产包协议 TS 描述 资产包协议 TS 描述
### Demo 中的资产包 ### Demo 中的资产包
在 Demo 项目中，自带了一份默认的资产包： 在 Demo 项目中，自带了一份默认的资产包：
> [https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/services/assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/services/assets.json) > [https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/services/assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/services/assets.json)
这份资产包里的物料是我们内部沉淀出的，用户可以通过这套资产包体验引擎提供的搭建、配置能力。 这份资产包里的物料是我们内部沉淀出的，用户可以通过这套资产包体验引擎提供的搭建、配置能力。
**_在项目中正常注册资产包：_** **_在项目中正常注册资产包：_**
```typescript ```typescript
import { material } from '@alilc/lowcode-engine'; import { material } from '@alilc/lowcode-engine';
// 以任何方式引入 assets // 以任何方式引入 assets
material.setAssets(assets); material.setAssets(assets);
``` ```
**_以支持调试的方式注册资产包：_** **_以支持调试的方式注册资产包：_**
> 这样启动并部署出来的项目，可以通过在预览地址加上 ?debug 来调试本地物料。 > 这样启动并部署出来的项目，可以通过在预览地址加上 ?debug 来调试本地物料。
> 例如： > 例如：
>
> - 通过插件初始化一个物料 > - 通过插件初始化一个物料
> - 按照参考文章配置物料支持调试 > - 按照参考文章配置物料支持调试
> - 启动物料 > - 启动物料
> - 访问：[https://lowcode-engine.cn/demo/demo-general/index.html?debug](https://lowcode-engine.cn/demo/demo-general/index.html) > - 访问：[https://lowcode-engine.cn/demo/demo-general/index.html?debug](https://lowcode-engine.cn/demo/demo-general/index.html)
> >
详细参考：[低代码生态脚手架 & 调试机制](https://lowcode-engine.cn/site/docs/guide/expand/editor/cli) > 详细参考：[低代码生态脚手架 & 调试机制](https://lowcode-engine.cn/site/docs/guide/expand/editor/cli)
```typescript ```typescript
import { material } from '@alilc/lowcode-engine'; import { material } from '@alilc/lowcode-engine';
@ -66,12 +80,16 @@ await material.setAssets(await injectAssets(assets));
``` ```
### 手工配置资产包 ### 手工配置资产包
参考 Demo 中的[基础 Fusion Assets 定义](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/assets.json)，如果我们修改 assets.json，我们就能做到配置资产包： 参考 Demo 中的[基础 Fusion Assets 定义](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/assets.json)，如果我们修改 assets.json，我们就能做到配置资产包：
- packages 对象：我们需要在其中定义这个包的获取方式，如果不定义，就不会被低代码引擎动态加载并对应上组件实例。定义方式是 UMD 的包，低代码引擎会尝试在 window 上寻找对应 library 的实例； - packages 对象：我们需要在其中定义这个包的获取方式，如果不定义，就不会被低代码引擎动态加载并对应上组件实例。定义方式是 UMD 的包，低代码引擎会尝试在 window 上寻找对应 library 的实例；
- components 对象：我们需要在其中定义物料描述，物料描述我们将在下一节继续讲解。 - components 对象：我们需要在其中定义物料描述，物料描述我们将在下一节继续讲解。
## 物料描述配置 ## 物料描述配置
### 什么是物料描述 ### 什么是物料描述
在低代码平台中，用户是不同的，有可能是开发、测试、运营、设计，也有可能是销售、行政、HR 等等各种角色。他们大多数不具备专业的前端开发知识，对于低代码平台来说，我们使用组件的流程如下： 在低代码平台中，用户是不同的，有可能是开发、测试、运营、设计，也有可能是销售、行政、HR 等等各种角色。他们大多数不具备专业的前端开发知识，对于低代码平台来说，我们使用组件的流程如下：
1. 用户通过拖拽/选择组件，在画布中看到组件； 1. 用户通过拖拽/选择组件，在画布中看到组件；
@ -88,7 +106,9 @@ await material.setAssets(await injectAssets(assets));
3. 能力配置/体验增强：推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。 3. 能力配置/体验增强：推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。
因此，我们设计了[**《中后台低代码组件描述协议》**](/site/docs/specs/material-spec)来描述一个低代码编辑器中可被配置的内容。 因此，我们设计了[**《中后台低代码组件描述协议》**](/site/docs/specs/material-spec)来描述一个低代码编辑器中可被配置的内容。
### Demo 中的物料描述 ### Demo 中的物料描述
我们可以从 Demo 中的 assets.json 找到如下三个物料描述： 我们可以从 Demo 中的 assets.json 找到如下三个物料描述：
- @alifd/pro-layout：布局组件，放在`window.AlifdProLayoutMeta`，[meta 文件地址](https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.5/build/lowcode/meta.js)； - @alifd/pro-layout：布局组件，放在`window.AlifdProLayoutMeta`，[meta 文件地址](https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.5/build/lowcode/meta.js)；
@ -96,36 +116,50 @@ await material.setAssets(await injectAssets(assets));
- @alilc/lowcode-materials：原子组件，放在 `window.AlilcLowcodeMaterialsMeta`，[meta 文件地址](https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.1/build/lowcode/meta.js)； - @alilc/lowcode-materials：原子组件，放在 `window.AlilcLowcodeMaterialsMeta`，[meta 文件地址](https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.1/build/lowcode/meta.js)；
**_引擎中，会尝试调用对应 meta 文件，并注入到全局：_** **_引擎中，会尝试调用对应 meta 文件，并注入到全局：_**
```tsx ```tsx
const src = 'https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.5/build/lowcode/meta.js'; const src = 'https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.5/build/lowcode/meta.js';
const script = document.createElement('script'); const script = document.createElement('script');
script.src = src; script.src = src;
document.head.appendChild(script); document.head.appendChild(script);
``` ```
然后在 window 上就能拿到对应的物料描述内容了： 然后在 window 上就能拿到对应的物料描述内容了：
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01DHSEOH1RwCEq19Ro9_!!6000000002175-2-tps-1896-1138.png) ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01DHSEOH1RwCEq19Ro9_!!6000000002175-2-tps-1896-1138.png)
手工配置物料描述时，可以用这样的方式参考一下 Demo 中的物料描述是如何实现的。 手工配置物料描述时，可以用这样的方式参考一下 Demo 中的物料描述是如何实现的。
### 手工配置物料描述 ### 手工配置物料描述
详见：“物料描述详解”章节。 详见：“物料描述详解”章节。
## 物料的低代码开发 ## 物料的低代码开发
> _**注意：引擎提供的 cli 并未对 windows 系统做适配，windows 环境必须使用 **_[_**WSL**_](https://docs.microsoft.com/zh-cn/windows/wsl/install)_**，其他终端不保证能正常运行**_ > _**注意：引擎提供的 cli 并未对 windows 系统做适配，windows 环境必须使用 **_[_**WSL**_](https://docs.microsoft.com/zh-cn/windows/wsl/install)_**，其他终端不保证能正常运行**_
您可以通过本节内容，完成一个组件在低代码编辑器中的配置和调试。 您可以通过本节内容，完成一个组件在低代码编辑器中的配置和调试。
### 前言（必读） ### 前言（必读）
引擎提供的物料开发脚手架内置了**_入料模块_**，初始化的时候会自动根据源码解析出一份_**低代码描述**_，但是从源码解析出来的低代码描述让用户直接使用是不够精细的，因为源码包含的信息不够，它没办法完全包含配置项的交互；
引擎提供的物料开发脚手架内置了**_入料模块_**，初始化的时候会自动根据源码解析出一份**_低代码描述_**，但是从源码解析出来的低代码描述让用户直接使用是不够精细的，因为源码包含的信息不够，它没办法完全包含配置项的交互；
![image.png](https://img.alicdn.com/imgextra/i1/O1CN010t0YzC1znDPQB1LUA_!!6000000006758-2-tps-802-1830.png) ![image.png](https://img.alicdn.com/imgextra/i1/O1CN010t0YzC1znDPQB1LUA_!!6000000006758-2-tps-802-1830.png)
比如设计师出了上面的设计稿，这里面除了有哪些 props 可被配置，通过哪个设置器配置，还包含了 props 之间的聚合、排序，甚至有自定义 setter，这些信息源码里是不具备的，需要在低代码描述里进行开发； 比如设计师出了上面的设计稿，这里面除了有哪些 props 可被配置，通过哪个设置器配置，还包含了 props 之间的聚合、排序，甚至有自定义 setter，这些信息源码里是不具备的，需要在低代码描述里进行开发；
**_因此我们建议只把 cli 初始化的低代码描述作为启动，要根据用户习惯对配置项进行设计，然后人工地去开发调试直接的低代码描述。_** **_因此我们建议只把 cli 初始化的低代码描述作为启动，要根据用户习惯对配置项进行设计，然后人工地去开发调试直接的低代码描述。_**
### 新开发组件 ### 新开发组件
#### 组件项目初始化 #### 组件项目初始化
```bash ```bash
npm init @alilc/element your-material-name npm init @alilc/element your-material-name
``` ```
#### 选择组件类型 #### 选择组件类型
> 组件 -> <组件组织方式>
> 组件 -> 组件组织方式
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01BTiMt51iLPtzDbuh8_!!6000000004396-2-tps-1596-464.png) ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01BTiMt51iLPtzDbuh8_!!6000000004396-2-tps-1596-464.png)
这里我们选择 react-组件库，之后便生出我们的组件库项目，目录结构如下： 这里我们选择 react-组件库，之后便生出我们的组件库项目，目录结构如下：
``` ```
my-materials my-materials
├── README.md ├── README.md
@ -146,7 +180,9 @@ my-materials
│ │ └── package.json // 【必选】 │ │ └── package.json // 【必选】
└── └── ExampleComponent2 // 业务组件2 └── └── ExampleComponent2 // 业务组件2
``` ```
#### 组件开发与调试 #### 组件开发与调试
```bash ```bash
# 安装依赖 # 安装依赖
npm install npm install
@ -157,54 +193,68 @@ npm run lowcode:dev
# 构建低代码产物 # 构建低代码产物
npm run lowcode:build npm run lowcode:build
``` ```
执行上述命令后会在组件 (库) 根目录生成一个 `lowcode` 文件夹，里面会包含每个组件的低代码描述： 执行上述命令后会在组件 (库) 根目录生成一个 `lowcode` 文件夹，里面会包含每个组件的低代码描述：
![image.png](https://img.alicdn.com/imgextra/i2/O1CN016m7gOK1DvpIcnlTvY_!!6000000000279-2-tps-1446-906.png) ![image.png](https://img.alicdn.com/imgextra/i2/O1CN016m7gOK1DvpIcnlTvY_!!6000000000279-2-tps-1446-906.png)
在 src/components 目录新增一个组件并在 src/index.tsx 中导出，然后再执行 npm run lowcode:dev 时，低代码插件会在 lowcode/<component-name\> 目录自动生成新增组件的低代码描述（meta.ts）。 在 `src/components` 目录新增一个组件并在 `src/index.tsx` 中导出，然后再执行 `npm run lowcode:dev` 时，低代码插件会在 `lowcode/<component-name>` 目录自动生成新增组件的低代码描述（meta.ts）。
用户可以直接修改低代码描述来修改组件的配置： 用户可以直接修改低代码描述来修改组件的配置：
- 设置组件的 setter（上一个章节介绍的设置器，也可以定制设置器用到物料中）； - 设置组件的 setter（上一个章节介绍的设置器，也可以定制设置器用到物料中）；
- 新增组件配置项; - 新增组件配置项;
- 更改当前配置项； - 更改当前配置项；
#### 配置示例 #### 配置示例
隐藏一个 prop 隐藏一个 prop
```typescript ```typescript
{ {
name: 'dataSource', name: 'dataSource',
condition: () => false, condition: () => false,
} }
``` ```
展示样式 展示样式
```typescript ```typescript
{ {
name: 'dataSource', name: 'dataSource',
display: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry', // 常用的是 inline(默认), block、entry display: 'accordion' | 'inline' | 'block' | 'plain' | 'popup' | 'entry', // 常用的是 inline(默认), block、entry
} }
``` ```
#### 编辑态视图 #### 编辑态视图
用户可以在 lowcode/<component-name\> 目录下新增 view.tsx 来增加编辑态视图。编辑态视图用于在编辑态时展示与真实预览不一样的视图。
用户可以在 `lowcode/<component-name>` 目录下新增 view.tsx 来增加编辑态视图。编辑态视图用于在编辑态时展示与真实预览不一样的视图。
view.tsx 输出的也是一个 React 组件。 view.tsx 输出的也是一个 React 组件。
注意：如果是单组件，而非组件库模式的话，view.tsx 应置于 lowcode 而非 lowcode/<component-name\> 目录下 注意：如果是单组件，而非组件库模式的话，view.tsx 应置于 lowcode 而非 `lowcode/<component-name>` 目录下
#### 发布组件 #### 发布组件
```bash ```bash
# 在组件根目录下，执行 # 在组件根目录下，执行
$ npm publish $ npm publish
``` ```
### 现存组件低代码化 ### 现存组件低代码化
组件低代码化是指，在引入低代码平台之前，我们大多数都是使用源码开发的组件，也就是 ProCode 组件。 组件低代码化是指，在引入低代码平台之前，我们大多数都是使用源码开发的组件，也就是 ProCode 组件。
在引入低代码平台之后，原来的源码组件是需要转化为低代码物料，这样才能在低代码平台进行消费。 在引入低代码平台之后，原来的源码组件是需要转化为低代码物料，这样才能在低代码平台进行消费。
所以接下来会说明，对于已有的源码组件，我们如何把它低代码化。 所以接下来会说明，对于已有的源码组件，我们如何把它低代码化。
#### 配置低代码开发环境 #### 配置低代码开发环境
在您的组件开发环境中，安装 [build-scripts](https://github.com/ice-lab/build-scripts) 和它的低代码开发插件： 在您的组件开发环境中，安装 [build-scripts](https://github.com/ice-lab/build-scripts) 和它的低代码开发插件：
```bash ```bash
npm install -D @alifd/build-plugin-lowcode @alib/build-scripts --save-dev npm install -D @alifd/build-plugin-lowcode @alib/build-scripts --save-dev
``` ```
新增 build-scripts 配置文件：build.lowcode.js 新增 build-scripts 配置文件：build.lowcode.js
```javascript ```javascript
@ -214,21 +264,24 @@ module.exports = {
}, },
plugins: [ plugins: [
[ [
"@alifd/build-plugin-lowcode", '@alifd/build-plugin-lowcode',
{ {
engineScope: '@alilc', engineScope: '@alilc',
} },
] ],
], ],
}; };
``` ```
在 package.json 中定义低代码开发相关命令 在 package.json 中定义低代码开发相关命令
```javascript ```javascript
"lowcode:dev": "build-scripts start --config ./build.lowcode.js", "lowcode:dev": "build-scripts start --config ./build.lowcode.js",
"lowcode:build": "build-scripts build --config ./build.lowcode.js", "lowcode:build": "build-scripts build --config ./build.lowcode.js",
``` ```
![image.png](https://img.alicdn.com/imgextra/i2/O1CN014iSa1P1dNdkUUtoMm_!!6000000003724-2-tps-1830-822.png) ![image.png](https://img.alicdn.com/imgextra/i2/O1CN014iSa1P1dNdkUUtoMm_!!6000000003724-2-tps-1830-822.png)
#### 开发调试 #### 开发调试
```bash ```bash
@ -246,20 +299,24 @@ npm run lowcode:build
``` ```
#### 发布组件 #### 发布组件
```bash ```bash
# 在组件根目录下，执行 # 在组件根目录下，执行
npm publish npm publish
``` ```
## 在项目中引入组件 (库) ## 在项目中引入组件 (库)
> 以下内容可观看[《阿里巴巴低代码引擎项目实战 (3)-自定义组件接入》](https://www.bilibili.com/video/BV1dZ4y1m76S/)直播回放 > 以下内容可观看[《阿里巴巴低代码引擎项目实战 (3)-自定义组件接入》](https://www.bilibili.com/video/BV1dZ4y1m76S/)直播回放
对于平台或者用户来说，可能所需要的组件集合是不同的。如果需要自定义组件集合，就需要定制资产包，定制的资产包是配置了一系列组件的，将这份资产包用于引擎即可在引擎中使用自定义的组件集合。 对于平台或者用户来说，可能所需要的组件集合是不同的。如果需要自定义组件集合，就需要定制资产包，定制的资产包是配置了一系列组件的，将这份资产包用于引擎即可在引擎中使用自定义的组件集合。
### 管理一份资产包 ### 管理一份资产包
项目中使用的组件相关资源都需要在资产包中定义，那么我们自己开发的组件库如果要在项目中使用，只需要把组件构建好的相关资源 merge 到 assets.json 中就可以； 项目中使用的组件相关资源都需要在资产包中定义，那么我们自己开发的组件库如果要在项目中使用，只需要把组件构建好的相关资源 merge 到 assets.json 中就可以；
#### 自定义组件加入到资产包 #### 自定义组件加入到资产包
通过官方脚手架自定义组件构建发布之后，npm 包里会出现一个 `build/lowcode/assets-prod.json`文件，我们只需要把该文件的内容 merge 到项目的 assets.json 中就可以； 通过官方脚手架自定义组件构建发布之后，npm 包里会出现一个 `build/lowcode/assets-prod.json`文件，我们只需要把该文件的内容 merge 到项目的 assets.json 中就可以；
#### 资产包托管 #### 资产包托管
@ -269,24 +326,29 @@ npm publish
- 再高级一点的做法是实现一个资产包管理的服务，能够通过用户界面去更新资产包的内容； - 再高级一点的做法是实现一个资产包管理的服务，能够通过用户界面去更新资产包的内容；
### 在项目中引入资产包 ### 在项目中引入资产包
```typescript ```typescript
import { material, plugins } from '@alilc/lowcode-engine'; import { material, plugins } from '@alilc/lowcode-engine';
import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { IPublicModelPluginContext } from '@alilc/lowcode-types';
// 动态加载 assets // 动态加载 assets
plugins.register((ctx: IPublicModelPluginContext) => { plugins
.register((ctx: IPublicModelPluginContext) => {
return { return {
name: 'ext-assets', name: 'ext-assets',
async init() { async init() {
try { try {
// 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入，还是通过其他途径如直接引入物料描述 // 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入，还是通过其他途径如直接引入物料描述
const res = await window.fetch('https://fusion.alicdn.com/assets/default@0.1.95/assets.json'); const res = await window.fetch(
'https://fusion.alicdn.com/assets/default@0.1.95/assets.json',
);
const assets = await res.text(); const assets = await res.text();
material.setAssets(assets); material.setAssets(assets);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
}, },
} };
}).catch(err => console.error(err)); })
.catch((err) => console.error(err));
``` ```

2
docs/docs/guide/quickStart/start.md
View File

@ -45,7 +45,7 @@ n 14.17.0
### 下载 Demo ### 下载 Demo
可以前往 github（<https://github.com/alibaba/lowcode-demo>）将 DEMO 下载到本地。 可以前往 Github [lowcode-demo](https://github.com/alibaba/lowcode-demo)将 DEMO 下载到本地。
#### git clone #### git clone

13
docs/docs/specs/assets-spec.md
View File

@ -2,6 +2,7 @@
title: 《低代码引擎资产包协议规范》 title: 《低代码引擎资产包协议规范》
sidebar_position: 2 sidebar_position: 2
--- ---
## 1 介绍 ## 1 介绍
### 1.1 本协议规范涉及的问题域 ### 1.1 本协议规范涉及的问题域
@ -76,25 +77,25 @@ sidebar_position: 2
定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等； 定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
| 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 | | 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 |
| -------------------- | --------------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- | | ------------------------------ | ----------------------------------------------------------------------------------------- | --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| packages[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 | | packages[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 |
| packages[].title? | 资源标题 | String | A | 资源标题 | | packages[].title? | 资源标题 | String | A | 资源标题 |
| packages[].package | npm 包名 | String | A | 组件资源唯一标识 | | packages[].package | npm 包名 | String | A | 组件资源唯一标识 |
| packages[].version | npm 包版本号 | String | A | 组件资源版本号 | | packages[].version | npm 包版本号 | String | A | 组件资源版本号 |
| packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode | | packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode |
| packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） | | packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） |
| packages[].deps | 当前资源包的依赖资源的唯一标识列表 | Array<String\> | A | 唯一标识为 id 或者 package 对应的值 | | packages[].deps | 当前资源包的依赖资源的唯一标识列表 | `Array<String>` | A | 唯一标识为 id 或者 package 对应的值 |
| packages[].library | 作为全局变量引用时的名称，用来定义全局变量名 | String | A | 低代码引擎通过该字段获取组件实例 | | packages[].library | 作为全局变量引用时的名称，用来定义全局变量名 | String | A | 低代码引擎通过该字段获取组件实例 |
| packages[].editUrls | 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css | Array<String\> | A | 低代码引擎编辑器会加载这些 url | | packages[].editUrls | 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css | `Array<String>` | A | 低代码引擎编辑器会加载这些 url |
| packages[].urls | 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css | Array<String\> | AA | 低代码引擎渲染模块会加载这些 url | | packages[].urls | 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css | `Array<String>` | AA | 低代码引擎渲染模块会加载这些 url |
| packages[].advancedEditUrls | 组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls | | packages[].advancedEditUrls | 组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls |
| packages[].advancedUrls | 组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls | | packages[].advancedUrls | 组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls |
| packages[].external | 当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念) | Boolean | AAA | 某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源 | | packages[].external | 当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念) | Boolean | AAA | 某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源 |
| packages[].loadEnv | 指定当前资源加载的环境 | Array<String\> | AAA | 主要用于指定 external 资源加载的环境，取值为 design(设计态)、runtime(预览态) 中的一个或多个 | | packages[].loadEnv | 指定当前资源加载的环境 | `Array<String>` | AAA | 主要用于指定 external 资源加载的环境，取值为 design(设计态)、runtime(预览态) 中的一个或多个 |
| packages[].exportSourceId | 标识当前 package 内容是从哪个 package 导出来的 | String | AAA | 此时 urls 无效 | | packages[].exportSourceId | 标识当前 package 内容是从哪个 package 导出来的 | String | AAA | 此时 urls 无效 |
| packages[].exportSourceLibrary | 标识当前 package 是从 window 上的哪个属性导出来的 | String | AAA | exportSourceId 的优先级高于exportSourceLibrary ,此时 urls 无效 | | packages[].exportSourceLibrary | 标识当前 package 是从 window 上的哪个属性导出来的 | String | AAA | exportSourceId 的优先级高于exportSourceLibrary ,此时 urls 无效 |
| packages[].async | 标识当前 package 资源加载在 window.library 上的是否是一个异步对象 | Boolean | A | async 为 true 时，需要通过 await 才能拿到真正内容 | | packages[].async | 标识当前 package 资源加载在 window.library 上的是否是一个异步对象 | Boolean | A | async 为 true 时，需要通过 await 才能拿到真正内容 |
| packages[].exportMode | 标识当前 package 从其他 package 的导出方式 | String | A | 目前只支持 `"functionCall"`, exportMode等于 `"functionCall"` 时，当前package 的内容以函数的方式从其他 package 中导出，具体导出接口如: (library: string, packageName: string, isRuntime?: boolean) => any | Promise<any\>, library 为当前 package 的 library, packageName 为当前的包名，返回值为当前 package 的导出内容 | | packages[].exportMode | 标识当前 package 从其他 package 的导出方式 | String | A | 目前只支持 `"functionCall"`, exportMode等于 `"functionCall"` 时，当前package 的内容以函数的方式从其他 package 中导出，具体导出接口如: `(library: string, packageName: string, isRuntime?: boolean) => any \| Promise<any>`, library 为当前 package 的 library, packageName 为当前的包名，返回值为当前 package 的导出内容 |
描述举例： 描述举例：

34
docs/docs/specs/lowcode-spec.md
View File

@ -114,7 +114,7 @@ sidebar_position: 0
- utils { Array } 工具类扩展映射关系 - utils { Array } 工具类扩展映射关系
- i18n { Object } 国际化语料 - i18n { Object } 国际化语料
- constants { Object } 应用范围内的全局常量 - constants { Object } 应用范围内的全局常量
- css { string } 应用范围内的全局样式 - css { String } 应用范围内的全局样式
- config: { Object } 当前应用配置信息 - config: { Object } 当前应用配置信息
- meta: { Object } 当前应用元数据信息 - meta: { Object } 当前应用元数据信息
- dataSource: { Array } 当前应用的公共数据源 - dataSource: { Array } 当前应用的公共数据源
@ -428,17 +428,17 @@ import { Input as CustomInput } from '@ali/custom/lib/input';
##### 2.3.1.4 ComponentDataSourceItem 对象描述 ##### 2.3.1.4 ComponentDataSourceItem 对象描述
| 参数 | 说明 | 类型 | 支持变量 | 默认值 | 备注 | | 参数 | 说明 | 类型 | 支持变量 | 默认值 | 备注 |
| -------------- | ---------------------------- | ---------------------------------------------------- | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | -------------- | ---------------------------- | ------------------------------------------------------ | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | 数据请求 ID 标识 | String | - | - | | | id | 数据请求 ID 标识 | String | - | - | |
| isInit | 是否为初始数据 | Boolean | ✅ | true | 值为 true 时，将在组件初始化渲染时自动发送当前数据请求 | | isInit | 是否为初始数据 | Boolean | ✅ | true | 值为 true 时，将在组件初始化渲染时自动发送当前数据请求 |
| isSync | 是否需要串行执行 | Boolean | ✅ | false | 值为 true 时，当前请求将被串行执行 | | isSync | 是否需要串行执行 | Boolean | ✅ | false | 值为 true 时，当前请求将被串行执行 |
| type | 数据请求类型 | String | - | fetch | 支持四种类型：fetch/mtop/jsonp/custom | | type | 数据请求类型 | String | - | fetch | 支持四种类型：fetch/mtop/jsonp/custom |
| shouldFetch | 本次请求是否可以正常请求 | (options: ComponentDataSourceItemOptions) => boolean | - | `() => true` | function 参数参考 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) | | shouldFetch | 本次请求是否可以正常请求 | `(options: ComponentDataSourceItemOptions) => boolean` | - | `() => true` | function 参数参考 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
| willFetch | 单个数据结果请求参数处理函数 | Function | - | options => options | 只接受一个参数（options），返回值作为请求的 options，当处理异常时，使用原 options。也可以返回一个 Promise，resolve 的值作为请求的 options，reject 时，使用原 options | | willFetch | 单个数据结果请求参数处理函数 | Function | - | `options => options` | 只接受一个参数（options），返回值作为请求的 options，当处理异常时，使用原 options。也可以返回一个 Promise，resolve 的值作为请求的 options，reject 时，使用原 options |
| requestHandler | 自定义扩展的外部请求处理器 | Function | - | - | 仅 type='custom' 时生效 | | requestHandler | 自定义扩展的外部请求处理器 | Function | - | - | 仅 type='custom' 时生效 |
| dataHandler | request 成功后的回调函数 | Function | - | `response => response.data` | 参数：请求成功后 promise 的 value 值 | | | dataHandler | request 成功后的回调函数 | Function | - | `response => response.data` | 参数：请求成功后 promise 的 value 值 |
| errorHandler | request 失败后的回调函数 | Function | - | - | 参数：请求出错 promise 的 error 内容 | | errorHandler | request 失败后的回调函数 | Function | - | - | 参数：请求出错 promise 的 error 内容 |
| options {} | 请求参数 | **ComponentDataSourceItemOptions** | - | - | 每种请求类型对应不同参数，详见 | 每种请求类型对应不同参数，详见 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) | | options | 请求参数 | **ComponentDataSourceItemOptions** | - | - | 每种请求类型对应不同参数，详见 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
**关于 dataHandler 与 errorHandler 的细节说明：** **关于 dataHandler 与 errorHandler 的细节说明：**
@ -1051,7 +1051,7 @@ type Ti18n = {
| _this_.dataSourceMap | 三种容器实例的数据源对象 Map | Object | 单个请求的 id 为 key, value 详见下文 [DataSourceMapItem 结构描述](#datasourcemapitem-结构描述) | | _this_.dataSourceMap | 三种容器实例的数据源对象 Map | Object | 单个请求的 id 为 key, value 详见下文 [DataSourceMapItem 结构描述](#datasourcemapitem-结构描述) |
| _this_.reloadDataSource | 三种容器实例的初始化异步数据请求重载 | Function | 返回 Promise | | _this_.reloadDataSource | 三种容器实例的初始化异步数据请求重载 | Function | 返回 Promise |
| **this.page** | 当前页面容器的实例对象 | Class Instance | | | **this.page** | 当前页面容器的实例对象 | Class Instance | |
| _this.page_.props | 读取页面路由，参数等相关信息 | Object | query 查询参数 { key: value } 形式；path 路径；uri 页面唯一标识；其它扩展字段 | | _this.page_.props | 读取页面路由，参数等相关信息 | Object | query 查询参数 `{ key: value }` 形式；path 路径；uri 页面唯一标识；其它扩展字段 |
| _this.page_.xxx | 继承 this 对象所有 API | | 此处 `xxx` 代指 `this.page` 中的其他 API | | _this.page_.xxx | 继承 this 对象所有 API | | 此处 `xxx` 代指 `this.page` 中的其他 API |
| **this.component** | 当前低代码业务组件容器的实例对象 | Class Instance | | | **this.component** | 当前低代码业务组件容器的实例对象 | Class Instance | |
| _this.component_.props | 读取低代码业务组件容器的外部传入的 props | Object | | | _this.component_.props | 读取低代码业务组件容器的外部传入的 props | Object | |
@ -1333,7 +1333,7 @@ path（页面路径）是浏览器URL的组成部分，同时大部分网站的
**redirect** 字段有三种填入类型，分别是 `String`、`Object`、`Function`： **redirect** 字段有三种填入类型，分别是 `String`、`Object`、`Function`：
1. 字符串(`String`)格式下默认处理为重定向到路径，支持传入 '/xxx'、'/xxx?ab=c'。 1. 字符串(`String`)格式下默认处理为重定向到路径，支持传入 '/xxx'、'/xxx?ab=c'。
2. 对象(`String`)格式下可传入路由对象，如 { name: 'xxx' }、{ path: '/xxx' }，可重定向到对应的路由对象。 2. 对象(`String`)格式下可传入路由对象，如 `{ name: 'xxx' }`、`{ path: '/xxx' }`，可重定向到对应的路由对象。
3. 函数`Function`格式为`(to) => Route`，它的入参为当前路由项信息，支持返回一个 Route 对象或者字符串，存在一些特殊情况，在重定向的时候需要对重定向之后的路径进行处理的情况下，需要使用函数声明。 3. 函数`Function`格式为`(to) => Route`，它的入参为当前路由项信息，支持返回一个 Route 对象或者字符串，存在一些特殊情况，在重定向的时候需要对重定向之后的路径进行处理的情况下，需要使用函数声明。
```json ```json
@ -1498,12 +1498,12 @@ webpack.config.js # 项目工程配置，包含插件配置及自定义 webpack
##### Router 结构说明 ##### Router 结构说明
| API | 函数签名 | 说明 | | API | 函数签名 | 说明 |
| ---------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | ---------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
| getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息，RouteLocation 结构详见下面说明 | | getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息，RouteLocation 结构详见下面说明 |
| push | (target: string \| Route) => void | 路由跳转方法，跳转到指定的路径或者 Route | | push | `(target: string | Route) => void` | 路由跳转方法，跳转到指定的路径或者 Route |
| replace | (target: string \| Route) => void | 路由跳转方法，与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 | | replace | `(target: string | Route) => void` | 路由跳转方法，与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 |
| beforeRouteLeave | (guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void | 路由跳转前的守卫方法，详见下面说明 | | beforeRouteLeave | `(guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void` | 路由跳转前的守卫方法，详见下面说明 |
| afterRouteChange | (fn: (to: RouteLocation, from: RouteLocation) => void) => void | 路由跳转后的钩子函数，会在每次路由改变后执行 | | afterRouteChange | `(fn: (to: RouteLocation, from: RouteLocation) => void) => void` | 路由跳转后的钩子函数，会在每次路由改变后执行 |
##### 3.2.1.1 RouteLocation（路由信息）结构说明 ##### 3.2.1.1 RouteLocation（路由信息）结构说明
@ -1576,10 +1576,10 @@ webpack.config.js # 项目工程配置，包含插件配置及自定义 webpack
#### 3.2.3 国际化相关 API #### 3.2.3 国际化相关 API
| API | 函数签名 | 说明 | | API | 函数签名 | 说明 |
| -------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | -------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| this.i18n | (i18nKey: string, params?: { [paramName: string]: string; }) => string | i18nKey 是语料的标识符，params 可选，是用来做模版字符串替换的。返回语料字符串 | | this.i18n | `(i18nKey: string, params?: { [paramName: string]: string; }) => string` | i18nKey 是语料的标识符，params 可选，是用来做模版字符串替换的。返回语料字符串 |
| this.getLocale | () => string | 返回当前环境语言 code | | this.getLocale | `() => string` | 返回当前环境语言 code |
| this.setLocale | (locale: string) => void | 设置当前环境语言 code | | this.setLocale | `(locale: string) => void` | 设置当前环境语言 code |
**使用范例：** **使用范例：**

373
docs/docs/specs/material-spec.md
View File

@ -16,7 +16,6 @@ sidebar_position: 1
- 定义中后台物料主题配置规范（AAA） - 定义中后台物料主题配置规范（AAA）
- 定义中后台物料无障碍访问规范（AAA） - 定义中后台物料无障碍访问规范（AAA）
### 1.2 协议草案起草人 ### 1.2 协议草案起草人
- 撰写：九神、大果、元彦、戊子、林熠、屹凡、金禅 - 撰写：九神、大果、元彦、戊子、林熠、屹凡、金禅
@ -34,7 +33,6 @@ sidebar_position: 1
- minor 是小版本号：用于发布向下兼容的协议功能新增 - minor 是小版本号：用于发布向下兼容的协议功能新增
- patch 是补丁号：用于发布向下兼容的协议问题修正 - patch 是补丁号：用于发布向下兼容的协议问题修正
### 1.5 协议中子规范 Level 定义 ### 1.5 协议中子规范 Level 定义
| 规范等级 | 实现要求 | | 规范等级 | 实现要求 |
@ -43,8 +41,8 @@ sidebar_position: 1
| AA | 推荐规范，推荐实现；遵守此类规范有助于业务未来的扩展性和跨团队合作研发效率的提升。 | | AA | 推荐规范，推荐实现；遵守此类规范有助于业务未来的扩展性和跨团队合作研发效率的提升。 |
| AAA | 参考规范，根据业务场景实际诉求实现；是集团层面鼓励的技术实现引导。 | | AAA | 参考规范，根据业务场景实际诉求实现；是集团层面鼓励的技术实现引导。 |
### 1.6 名词术语 ### 1.6 名词术语
- **物料**：能够被沉淀下来直接使用的前端能力，一般表现为业务组件、区块、模板。 - **物料**：能够被沉淀下来直接使用的前端能力，一般表现为业务组件、区块、模板。
- **业务组件（Business Component）**：业务领域内基于基础组件之上定义的组件，可能会包含特定业务域的交互或者是业务数据，对外仅暴露可配置的属性，且必须发布到公域（如阿里 NPM）；在同一个业务域内可以流通，但不需要确保可以跨业务域复用。 - **业务组件（Business Component）**：业务领域内基于基础组件之上定义的组件，可能会包含特定业务域的交互或者是业务数据，对外仅暴露可配置的属性，且必须发布到公域（如阿里 NPM）；在同一个业务域内可以流通，但不需要确保可以跨业务域复用。
- **低代码业务组件（Low-Code Business Component）**：通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑。 - **低代码业务组件（Low-Code Business Component）**：通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑。
@ -52,6 +50,7 @@ sidebar_position: 1
- **模板（Template）**：特定垂直业务领域内的业务组件、区块可组合为单个页面，或者是再配合路由组合为多个页面集，统称为模板。 - **模板（Template）**：特定垂直业务领域内的业务组件、区块可组合为单个页面，或者是再配合路由组合为多个页面集，统称为模板。
### 1.7 物料规范背景 ### 1.7 物料规范背景
目前集团业务融合频繁，而物料规范的不统一给业务融合带来额外的高成本，另一方面集团各个 BU 的前端物料也存在不同程度的重复建设。我们期望通过集团层面的物料通不阻碍业务融合的发展，同时通过集团层面的物料流通来提升物料丰富度，通过丰富物料的复用来提效中后台系统研发，同时也能给新业务场景提供高质量的启动物料。 目前集团业务融合频繁，而物料规范的不统一给业务融合带来额外的高成本，另一方面集团各个 BU 的前端物料也存在不同程度的重复建设。我们期望通过集团层面的物料通不阻碍业务融合的发展，同时通过集团层面的物料流通来提升物料丰富度，通过丰富物料的复用来提效中后台系统研发，同时也能给新业务场景提供高质量的启动物料。
### 1.8 物料规范定义 ### 1.8 物料规范定义
@ -65,7 +64,6 @@ sidebar_position: 1
#### 2.1.1 目录规范（A） #### 2.1.1 目录规范（A）
``` ```
component // 组件名称, 比如 biz-button component // 组件名称, 比如 biz-button
├── build // 【编译生成】【必选】 ├── build // 【编译生成】【必选】
@ -83,7 +81,6 @@ component // 组件名称, 比如 biz-button
└── package.json // 【必选】组件 package.json └── package.json // 【必选】组件 package.json
``` ```
##### README.md ##### README.md
- README.md 应该包含业务组件的源信息、使用说明以及 API，示例如下： - README.md 应该包含业务组件的源信息、使用说明以及 API，示例如下：
@ -105,8 +102,6 @@ npm install @alifd/ice-layout -S
| type | 类型 | String | `primary`、`normal` | `normal` | | type | 类型 | String | `primary`、`normal` | `normal` |
``` ```
- README.en-US.md（文件命名采取 [bcp47 规范](http://www.rfc-editor.org/rfc/bcp/bcp47.txt)）多语言的情况，可选 - README.en-US.md（文件命名采取 [bcp47 规范](http://www.rfc-editor.org/rfc/bcp/bcp47.txt)）多语言的情况，可选
``` ```
@ -127,6 +122,7 @@ npm install @alifd/ice-layout -S
``` ```
##### package.json ##### package.json
`package.json` 中包含了一些依赖信息和配置信息，示例如下： `package.json` 中包含了一些依赖信息和配置信息，示例如下：
```json ```json
@ -151,7 +147,8 @@ npm install @alifd/ice-layout -S
"peerDependencies": { "peerDependencies": {
"react": "^16.5.0" "react": "^16.5.0"
}, },
"componentConfig": { // 【私有字段】组件配置信息 "componentConfig": {
// 【私有字段】组件配置信息
"name": "button", // 组件英文名 "name": "button", // 组件英文名
"title": "按钮", // 组件中文名 "title": "按钮", // 组件中文名
"category": "form" // 组件分类 "category": "form" // 组件分类
@ -194,11 +191,12 @@ import Button, { Group } form '@scope/button';
``` ```
##### demo ##### demo
demo 目录存放的是组件的文档，无文档的业务组件无法带来任何价值，因此 demo 是必选项。demo 目录下的文件采取 markdown 的写法，可以是多个文件，示例（demo/basic.md）如下： demo 目录存放的是组件的文档，无文档的业务组件无法带来任何价值，因此 demo 是必选项。demo 目录下的文件采取 markdown 的写法，可以是多个文件，示例（demo/basic.md）如下：
demo/basic.md demo/basic.md
~~~ ````
--- ---
title: {按钮类型} title: {按钮类型}
order: {文档的排序，数字，0 最小，从小到大排序} order: {文档的排序，数字，0 最小，从小到大排序}
@ -230,7 +228,7 @@ ReactDOM.render(<div className="test">
background: #CCC; background: #CCC;
} }
``` ```
~~~ ````
#### 2.1.2 API 规范（A) #### 2.1.2 API 规范（A)
@ -244,7 +242,7 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
##### 通用命名 ##### 通用命名
| API 名称 | 类型 | 描述 | 常见变量 | | API 名称 | 类型 | 描述 | 常见变量 |
| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- | | :------------- | :------------- | :------------------------------------------------------------------ | :----------------------------------------------------- |
| shape | string | 形状，从组件的外形来看有区别的时候，使用 shape | | | shape | string | 形状，从组件的外形来看有区别的时候，使用 shape | |
| direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） | | direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） |
| align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br | | align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br |
@ -257,10 +255,9 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
| closable | bool/string | 允许关闭的方式 | | | closable | bool/string | 允许关闭的方式 | |
| htmlType | string | 当原生组件与 Fusion 组件的 type 产生冲突时，原生组件使用 `htmlType` | | | htmlType | string | 当原生组件与 Fusion 组件的 type 产生冲突时，原生组件使用 `htmlType` | |
| link | string | 链接 | | | link | string | 链接 | |
| dataSource | array | 列表数据源 | [{label, value}, {label, value}] | | dataSource | array | 列表数据源 | `[{label, value}, {label, value}]` |
| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 | | has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
##### 多选枚举 ##### 多选枚举
当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。 当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。
@ -293,7 +290,9 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart`  (AA) - 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart`  (AA)
##### 属性的传递 ##### 属性的传递
**1. 原子组件（Atomic Component）** **1. 原子组件（Atomic Component）**
> 最小粒子，不能再拆分的组件 > 最小粒子，不能再拆分的组件
举例：Input/Button/NumberPicker 举例：Input/Button/NumberPicker
@ -317,15 +316,15 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
复合组件一般由两个及以上的原子组件/复合组件构成，比如：Select 由 Inupt + 弹窗组成，Search 由 Select + Button 组成，TreeSelect 由 Tree + Select 组成。 复合组件一般由两个及以上的原子组件/复合组件构成，比如：Select 由 Inupt + 弹窗组成，Search 由 Select + Button 组成，TreeSelect 由 Tree + Select 组成。
为了提高组件使用的便利性，对 API 属性的要求如下： 为了提高组件使用的便利性，对 API 属性的要求如下：
1. 复合组件核心的原子组件（比如 Search 的核心原子组件是 Input）的属性以及使用频率高的属性建议扁平化，让复合组件可以直接使用其属性； 1. 复合组件核心的原子组件（比如 Search 的核心原子组件是 Input）的属性以及使用频率高的属性建议扁平化，让复合组件可以直接使用其属性；
2. 复合组件内的非核心原子组件，则通过 `xxxProps` （如 inputProps/btnProps）的方式，将参数传递到相应原子组件上。 2. 复合组件内的非核心原子组件，则通过 `xxxProps` （如 inputProps/btnProps）的方式，将参数传递到相应原子组件上。
**属性扁平化例子**： **属性扁平化例子**：
比如 `Search` 组件由 `Input` 和 `Button` 构成，但是 `Search` 更像是 `Input` ，因此把 `Input` 作为主要组件，将属性扁平化。即在 `Search` 组件上直接使用一些 `Input` 的属性。 `<Search innerBefore="before text">` 比如 `Search` 组件由 `Input` 和 `Button` 构成，但是 `Search` 更像是 `Input` ，因此把 `Input` 作为主要组件，将属性扁平化。即在 `Search` 组件上直接使用一些 `Input` 的属性。 `<Search innerBefore="before text">`
比如 `Select` `TreeSelect` 都有弹层部分，`Overlay` `Overlay.Popup` 的 `visible` 属性使用率较高，一般用于 fixed 布局下的弹窗滚动跟随。因此把该属性暴露到最外层，简化使用 `<Select visible={true}>`  比如 `Select` `TreeSelect` 都有弹层部分，`Overlay` `Overlay.Popup` 的 `visible` 属性使用率较高，一般用于 fixed 布局下的弹窗滚动跟随。因此把该属性暴露到最外层，简化使用 `<Select visible={true}>`
**xxxProps 例子**： **xxxProps 例子**：
比如 `Search` 组件由 `Input` 和 `Button` 构成，`Button` 的属性通过 `buttonProps` 传递给内部的 `Button`。`<Search buttonProps={{loading: true}}>` 比如 `Search` 组件由 `Input` 和 `Button` 构成，`Button` 的属性通过 `buttonProps` 传递给内部的 `Button`。`<Search buttonProps={{loading: true}}>`
@ -349,7 +348,6 @@ $ tnpm i iceworks -g
$ iceworks sync $ iceworks sync
``` ```
#### 2.1.4 国际化多语言支持规范（AA） #### 2.1.4 国际化多语言支持规范（AA）
文件命名采取 [bcp47](https://tools.ietf.org/html/bcp47) 规范 文件命名采取 [bcp47](https://tools.ietf.org/html/bcp47) 规范
@ -372,21 +370,21 @@ $ iceworks sync
```javascript ```javascript
// zh-CN.js // zh-CN.js
export default { export default {
hello: '你好，世界' hello: '你好，世界',
}; };
``` ```
```javascript ```javascript
// en-US.js // en-US.js
export default { export default {
hello: 'hello world' hello: 'hello world',
}; };
``` ```
```javascript ```javascript
// ja-JP.js // ja-JP.js
export default { export default {
hello: 'こんにちは、世界' hello: 'こんにちは、世界',
}; };
``` ```
@ -410,9 +408,7 @@ export default class BizHello extends Component {
render() { render() {
const { locale } = this.props; const { locale } = this.props;
return ( return <div>{locale.hello}</div>;
<div>{locale.hello}</div>
);
} }
} }
``` ```
@ -437,13 +433,11 @@ class BizHello extends Component {
render() { render() {
const { locale } = this.props; const { locale } = this.props;
return ( return <div>{locale.hello}</div>;
<div>{locale.hello}</div>
);
} }
} }
export default ConfigProvider.config(BizHello, { export default ConfigProvider.config(BizHello, {
componentName: 'BizHello' // 指定组件名称，默认取组件的 displayName componentName: 'BizHello', // 指定组件名称，默认取组件的 displayName
}); });
``` ```
@ -463,7 +457,6 @@ export default ConfigProvider.config(BizHello, {
} }
``` ```
#### 2.1.6 [Deprecated]支持转设计稿（AAA） #### 2.1.6 [Deprecated]支持转设计稿（AAA）
对接 sketch 插件（FusionCool）的目的是为了让开发产出的业务组件能够直接给设计师使用，用法类似现在 Fusion Next 基础组件。 对接 sketch 插件（FusionCool）的目的是为了让开发产出的业务组件能够直接给设计师使用，用法类似现在 Fusion Next 基础组件。
@ -476,24 +469,31 @@ import BizButton from '@alifd/biz-button';
export default { export default {
name: 'BizButton', name: 'BizButton',
editor: () => ({ editor: () => ({
props: [{ props: [
{
name: 'level', name: 'level',
type: 'enum', type: 'enum',
options: ['normal', 'primary', 'secondary'], options: ['normal', 'primary', 'secondary'],
}, { },
{
name: 'size', name: 'size',
type: 'enum', type: 'enum',
options: ['large', 'medium', 'small'], options: ['large', 'medium', 'small'],
default: 'medium', default: 'medium',
}], },
],
data: { data: {
default: 'hello', default: 'hello',
} },
}), // 内容编辑器 }), // 内容编辑器
adaptor: ({ data, level, size, ...others }) => { adaptor: ({ data, level, size, ...others }) => {
return <BizButton type={level} size={size}>{data}</BizButton>; return (
<BizButton type={level} size={size}>
{data}
</BizButton>
);
}, },
} };
``` ```
api 属性标准参考 [https://fusion.design/help.html#/dev-biz](https://fusion.design/help.html#/dev-biz) api 属性标准参考 [https://fusion.design/help.html#/dev-biz](https://fusion.design/help.html#/dev-biz)
@ -502,7 +502,6 @@ api 属性标准参考 [https://fusion.design/help.html#/dev-biz](https://fusio
无障碍需要符合 [WCAG 2.1 A 级标准](https://www.w3.org/TR/WCAG21/)，可参考 [W3C 无障碍最佳实践](https://www.w3.org/TR/wai-aria-practices-1.1/)、[Fusion 无障碍指引 2.3.1](https://alibaba-fusion.github.io/next/part1/basics.html) 章节等。 无障碍需要符合 [WCAG 2.1 A 级标准](https://www.w3.org/TR/WCAG21/)，可参考 [W3C 无障碍最佳实践](https://www.w3.org/TR/wai-aria-practices-1.1/)、[Fusion 无障碍指引 2.3.1](https://alibaba-fusion.github.io/next/part1/basics.html) 章节等。
##### 增加 a11y.md 无障碍 demo ##### 增加 a11y.md 无障碍 demo
必须借助 API 才能完成无障碍工作的组件必须为开发者提供无障碍的使用文档，请[参考](https://fusion.design/pc/component/select?themeid=2#accessibility-container)组件 API 中 `ARIA and Keyboard` ，建议在 `demo` 目录新增 `a11y.md` 文件用于演示组件的无障碍使用。 必须借助 API 才能完成无障碍工作的组件必须为开发者提供无障碍的使用文档，请[参考](https://fusion.design/pc/component/select?themeid=2#accessibility-container)组件 API 中 `ARIA and Keyboard` ，建议在 `demo` 目录新增 `a11y.md` 文件用于演示组件的无障碍使用。
@ -516,7 +515,6 @@ component
详细指引查看无障碍开发指南 [https://alibaba-fusion.github.io/next/part1/basics.html](https://alibaba-fusion.github.io/next/part1/basics.html)。 详细指引查看无障碍开发指南 [https://alibaba-fusion.github.io/next/part1/basics.html](https://alibaba-fusion.github.io/next/part1/basics.html)。
##### 通过键盘快速访问 ##### 通过键盘快速访问
一般键盘事件有 Up Arrow/Down Arrow/Enter/Esc/Tab 一般键盘事件有 Up Arrow/Down Arrow/Enter/Esc/Tab
@ -530,7 +528,6 @@ component
| Enter | 打开列表或选择当前项 | | Enter | 打开列表或选择当前项 |
| Esc | 关闭列表 | | Esc | 关闭列表 |
##### 对读屏软件友好 ##### 对读屏软件友好
- 对于组件，我们为开发者内置 `role` 和特定 `aria-_属性`，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 `role` 和 `aria-_参数`，但是要注意对应关系，请[参考](https://alibaba-fusion.github.io/next/part1/WAI-ARIA.html)。 - 对于组件，我们为开发者内置 `role` 和特定 `aria-_属性`，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 `role` 和 `aria-_参数`，但是要注意对应关系，请[参考](https://alibaba-fusion.github.io/next/part1/WAI-ARIA.html)。
@ -539,14 +536,12 @@ component
- autoFocus - 弹层自动聚焦，例如 `Dialog`，`Overlay`，`Dropdown` - autoFocus - 弹层自动聚焦，例如 `Dialog`，`Overlay`，`Dropdown`
- 传参数 - 有些组件需要根据具体的业务，实现不同的可访问性，这里为开发者内置一些参数，想使用无障碍的时候，用户只需要根据现有的需求，选择对应的内置参数，例如设置 aria-label，以下组件需要用户传参数才支持无障碍组件如下：`NumberPicker`、`Transfer` - 传参数 - 有些组件需要根据具体的业务，实现不同的可访问性，这里为开发者内置一些参数，想使用无障碍的时候，用户只需要根据现有的需求，选择对应的内置参数，例如设置 aria-label，以下组件需要用户传参数才支持无障碍组件如下：`NumberPicker`、`Transfer`
### 2.2 低代码规范 ### 2.2 低代码规范
#### 2.2.1 组件规范 #### 2.2.1 组件规范
通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑。 通过低代码编辑器搭建而来，有别于源码开发的业务组件，属于业务组件中的一种类型，遵循业务组件的定义；同时低代码业务组件还可以通过低代码编辑器继续多次编辑。
| 根属性描述 | 说明 | 类型 | | 根属性描述 | 说明 | 类型 |
| -------------- | ------------------------------------------------------------------------------------------------- | ------ | | -------------- | ------------------------------------------------------------------------------------------------- | ------ |
| version | 协议版本号 | String | | version | 协议版本号 | String |
@ -555,31 +550,35 @@ component
| utils | 工具类扩展映射关系 | Array | | utils | 工具类扩展映射关系 | Array |
| i18n | 国际化语料 | Object | | i18n | 国际化语料 | Object |
描述举例： 描述举例：
```json ```json
{ {
"version": "1.0.0", "version": "1.0.0",
"componentsMap": [{}], "componentsMap": [{}],
"componentsTree": [{ // 低代码业务组件树，顶层由低代码业务组件容器包裹； "componentsTree": [
{
// 低代码业务组件树，顶层由低代码业务组件容器包裹；
"componentName": "Component", // 低代码业务组件容器组件名 "componentName": "Component", // 低代码业务组件容器组件名
"fileName": "SearchComp", // 低代码业务组件文件名，同时会将首字母大写，作为低代码业务组件名 "fileName": "SearchComp", // 低代码业务组件文件名，同时会将首字母大写，作为低代码业务组件名
"props": {}, // 一般不定义，如果有数据用于模拟外部传入的属性值 "props": {}, // 一般不定义，如果有数据用于模拟外部传入的属性值
"css": "body {font-size: 12px;}", "css": "body {font-size: 12px;}",
"state": { "state": {
"name": "lucy", "name": "lucy"
}, },
"static": {}, // 用于定义自定组件的 static 属性 "static": {}, // 用于定义自定组件的 static 属性
"defaultProps": { // 默认 props：选填仅用于定义低代码业务组件的默认属性固定对象 "defaultProps": {
// 默认 props：选填仅用于定义低代码业务组件的默认属性固定对象
"name": "xxx" "name": "xxx"
}, },
"children": [{ "children": [
{
"componentName": "Div", "componentName": "Div",
"props": { "props": {
"className": "className1" "className": "className1"
}, },
"children": [{ "children": [
{
"componentName": "Button", "componentName": "Button",
"props": { "props": {
"text": "点击弹出我的姓名", "text": "点击弹出我的姓名",
@ -590,14 +589,18 @@ component
}" }"
} }
} }
}] }
}] ]
}], }
]
}
],
"i18n": {} "i18n": {}
} }
``` ```
#### 2.2.2 组件描述协议 #### 2.2.2 组件描述协议
对源码组件在低代码搭建平台中使用时所具备的配置能力和交互行为进行规范化描述，让不同平台对组件接入的实现保持一致，让组件针对不同的搭建平台接入时可以使用一份统一的描述内容，让组件在不同的业务中流通成为可能。 对源码组件在低代码搭建平台中使用时所具备的配置能力和交互行为进行规范化描述，让不同平台对组件接入的实现保持一致，让组件针对不同的搭建平台接入时可以使用一份统一的描述内容，让组件在不同的业务中流通成为可能。
##### 2.2.2.1 协议结构 ##### 2.2.2.1 协议结构
@ -611,7 +614,7 @@ component
##### 2.2.2.2 基础信息（A） ##### 2.2.2.2 基础信息（A）
| 字段 | 字段描述 | 字段类型 | 允许空 | | 字段 | 字段描述 | 字段类型 | 允许空 |
| ----------------- | --------------------- | ------------------------- | ------ | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------ |
| componentName | 组件名称 | String | 否 | | componentName | 组件名称 | String | 否 |
| title | 组件中文名称 | String | 否 | | title | 组件中文名称 | String | 否 |
| description | 组件描述 | String | 是 | | description | 组件描述 | String | 是 |
@ -633,26 +636,23 @@ component
| category | 用于描述组件位于组件面板同一 tab 的哪个区域 | String | 否 | | category | 用于描述组件位于组件面板同一 tab 的哪个区域 | String | 否 |
| priority | 用于描述组件在同一 category 中的排序 | String | 否 | | priority | 用于描述组件在同一 category 中的排序 | String | 否 |
##### 2.2.2.3 组件属性信息 props (A) ##### 2.2.2.3 组件属性信息 props (A)
描述组件属性信息，通常包含名称、类型、描述、默认值 4 项内容。 描述组件属性信息，通常包含名称、类型、描述、默认值 4 项内容。
| 字段 | 字段描述 | 字段类型 | 允许空 | | 字段 | 字段描述 | 字段类型 | 允许空 |
| ------------ | ---------- | --------------- | ------ | | ------------ | ---------- | ------------- | ------ |
| name | 属性名称 | String | 否 | | name | 属性名称 | String | 否 |
| propType | 属性类型 | String/Object | 否 | | propType | 属性类型 | String/Object | 否 |
| description | 属性描述 | String | 是 | | description | 属性描述 | String | 是 |
| defaultValue | 属性默认值 | Any | 是 | | defaultValue | 属性默认值 | Any | 是 |
propType 类型参考 [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)，存在**基本类型**和**复合类型**，描述如下： propType 类型参考 [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)，存在**基本类型**和**复合类型**，描述如下：
**基本类型** **基本类型**
| propType 值 | 类型描述 | 参考 PropTypes 类型 | | propType 值 | 类型描述 | 参考 PropTypes 类型 |
| ---------------------------------------------------- | ---------------------- | ------------------------- | | ------------------------------------------------------ | ---------------------- | ------------------------- |
| 'array' | 数组类型 | PropTypes.array | | 'array' | 数组类型 | PropTypes.array |
| 'bool' | 布尔类型 | PropTypes.bool | | 'bool' | 布尔类型 | PropTypes.bool |
| 'func' | 函数类型 | PropTypes.func | | 'func' | 函数类型 | PropTypes.func |
@ -662,13 +662,10 @@ propType 类型参考 [PropTypes](https://reactjs.org/docs/typechecking-with-pro
| 'node' | 节点类型 | PropTypes.node | | 'node' | 节点类型 | PropTypes.node |
| 'element' | 元素类型 | PropTypes.element | | 'element' | 元素类型 | PropTypes.element |
| 'any' | 任意值类型 | PropTypes.any | | 'any' | 任意值类型 | PropTypes.any |
| {<br />  type: 'xxx',<br />  isRequired: true<br />} | 指定类型，且是必要属性 | PropTypes.xxxx.isRequired | | `{<br />  type: 'xxx',<br />  isRequired: true<br />}` | 指定类型，且是必要属性 | PropTypes.xxxx.isRequired |
> 注意：上述类型均支持 PropTypes.xxx.isRequired 链式描述方式描述该属性是否为**必要属性**。 > 注意：上述类型均支持 PropTypes.xxx.isRequired 链式描述方式描述该属性是否为**必要属性**。
描述举例： 描述举例：
```javascript ```javascript
@ -711,16 +708,14 @@ export default class FusionForm extends PureComponent {
**复合类型** **复合类型**
| propType 值 | 类型描述 | PropTypes 类型 | | propType 值 | 类型描述 | PropTypes 类型 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------ | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------ |
| {<br />  type: 'oneOf',<br />  value: ['a', 'b', 'c', '...']<br />} | 枚举值类型 | PropTypes.oneOf(...) | | `<br />  type: 'oneOf',<br />  value: ['a', 'b', 'c', '...']<br />` | 枚举值类型 | PropTypes.oneOf(...) |
| {<br />  type: 'oneOfType',<br />  value: ['string', 'number', {<br />    type: 'array',<br />    isRequired: true<br />  }]<br />} | 指定类型中的一种，支持递归描述 | PropTypes.oneOfType(...) | | `<br />  type: 'oneOfType',<br />  value: ['string', 'number', {<br />    type: 'array',<br />    isRequired: true<br />  }]<br />` | 指定类型中的一种，支持递归描述 | PropTypes.oneOfType(...) |
| {<br />  type: 'arrayOf',<br />  value: 'number'<br />} | 指定统一成员**值类型**的数组类型 | PropTypes.arrayOf(...) | | `<br />  type: 'arrayOf',<br />  value: 'number'<br />` | 指定统一成员**值类型**的数组类型 | PropTypes.arrayOf(...) |
| {<br />  type: 'objectOf',<br />  value: 'string'<br />} | 指定统一对象属性**值类型**的对象类型 | PropTypes.objectOf(...) | | `<br />  type: 'objectOf',<br />  value: 'string'<br />` | 指定统一对象属性**值类型**的对象类型 | PropTypes.objectOf(...) |
| {<br />  type: 'shape',<br />  value: [{<br />    name: 'color',<br />    propType: 'string'<br />  }, {<br />    name: 'fontSize',<br />    propType: {<br />      type: 'number',<br />      isRequied: true  <br />    }  <br />  }]<br />} | 指定对象的部分**属性名**和**值类型**的对象类型 | PropTypes.shape(...) | | `<br />  type: 'shape',<br />  value: [{<br />    name: 'color',<br />    propType: 'string'<br />  }, {<br />    name: 'fontSize',<br />    propType: {<br />      type: 'number',<br />      isRequied: true  <br />    }  <br />  }]<br />` | 指定对象的部分**属性名**和**值类型**的对象类型 | PropTypes.shape(...) |
| {<br />  type: 'exact',<br />  value: [{<br />    name: 'name',<br />    propType: 'string'  <br />  }, {<br />    name: 'quantity',<br />    propType: 'number'<br />  }]<br />} | 严格指定对象全部**属性名**和**值类型**的对象类型 | PropTypes.exact(...) | | `<br />  type: 'exact',<br />  value: [{<br />    name: 'name',<br />    propType: 'string'  <br />  }, {<br />    name: 'quantity',<br />    propType: 'number'<br />  }]<br />` | 严格指定对象全部**属性名**和**值类型**的对象类型 | PropTypes.exact(...) |
描述举例： 描述举例：
@ -804,28 +799,24 @@ export default class FusionForm extends PureComponent {
} }
``` ```
##### 2.2.2.4 编辑体验增强 configure ##### 2.2.2.4 编辑体验增强 configure
推荐用于优化搭建产品的编辑体验，定制编辑能力的配置信息，通过能力抽象分类，主要包含如下几个维度的配置项： 推荐用于优化搭建产品的编辑体验，定制编辑能力的配置信息，通过能力抽象分类，主要包含如下几个维度的配置项：
| 字段 | 字段描述 | 字段类型 | 备注 | | 字段 | 字段描述 | 字段类型 | 备注 |
| ------------- | ---------------------- | -------- | ---------------------------------------------------------------------- | | ---------------------------- | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| props (A) | 属性面板配置 | Array | 用于属性面板能力描述 | | props (A) | 属性面板配置 | Array | 用于属性面板能力描述 |
| component(A) | 组件能力配置 | Object | 与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取 | | component(A) | 组件能力配置 | Object | 与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取 |
| supports (AA) | 通用扩展配置能力支持性 | Object | 用于通用扩展面板能力描述 | | supports (AA) | 通用扩展配置能力支持性 | Object | 用于通用扩展面板能力描述 |
| advanced (AAA) | 高级特性配置 | Object | 用户可以在这些配置通过引擎上下文控制组件在设计器中的表现，例如自动初始化组件的子组件、截获组件的操作事件进行个性化处理等 | | advanced (AAA) | 高级特性配置 | Object | 用户可以在这些配置通过引擎上下文控制组件在设计器中的表现，例如自动初始化组件的子组件、截获组件的操作事件进行个性化处理等 |
| 【已废弃】experimental (AAA) | 将引擎的一些实验性特性放在这个配置里 | Object | 用户可以提前体验这些特性 | | 【已废弃】experimental (AAA) | 将引擎的一些实验性特性放在这个配置里 | Object | 用户可以提前体验这些特性 |
###### 2.2.2.4.1 属性面板配置 props (A) ###### 2.2.2.4.1 属性面板配置 props (A)
props 数组下对象字段描述： props 数组下对象字段描述：
| 字段 | 字段描述 | 字段类型 | 备注 | | 字段 | 字段描述 | 字段类型 | 备注 |
| ---------- | -------------------------------------------------------------------------------------- | ----------------- | ------------------- | | ------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ |
| type | 指定类型 | Enum | 可选值为 `'field' | 'group'` ,默认为 'field' | | type | 指定类型 | Enum | 可选值为 `'field' | 'group'` ,默认为 'field' |
| display | 指定类型 | Enum | 可选值为 `'accordion' \| 'inline' \| 'block' \| 'plain' \| 'popup' \| 'entry'` ，默认为 'inline' | | display | 指定类型 | Enum | 可选值为 `'accordion' \| 'inline' \| 'block' \| 'plain' \| 'popup' \| 'entry'` ，默认为 'inline' |
| title | 分类标题 | 属性标题 | String | | | title | 分类标题 | 属性标题 | String | |
@ -840,10 +831,8 @@ props 数组下对象字段描述：
| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; | | extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; |
| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; | | extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; |
根据属性值类型 propType，确定对应控件类型 (setter) 。 根据属性值类型 propType，确定对应控件类型 (setter) 。
###### 2.2.2.4.2 通用扩展面板支持性配置 supports (AA) ###### 2.2.2.4.2 通用扩展面板支持性配置 supports (AA)
样式配置面板能力描述，描述是否支持行业样式编辑、是否支持类名设置等。 样式配置面板能力描述，描述是否支持行业样式编辑、是否支持类名设置等。
@ -860,20 +849,18 @@ props 数组下对象字段描述：
// 支持条件设置 // 支持条件设置
"condition": true, "condition": true,
// 支持样式设置 // 支持样式设置
"style": true, "style": true
} }
} }
} }
``` ```
###### 2.2.2.4.3 组件能力配置 component ###### 2.2.2.4.3 组件能力配置 component
与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取，包含如下字段： 与组件相关的能力、约束、行为等描述，有些信息可从组件视图实例上直接获取，包含如下字段：
| 字段 | 用途 | 类型 | | 字段 | 用途 | 类型 |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| isContainer(A) | 是否容器组件 | Boolean | | isContainer(A) | 是否容器组件 | Boolean |
| isModal(A) | 组件是否带浮层，浮层组件拖入设计器时会遮挡画布区域，此时应当辅助一些交互以防止阻挡 | Boolean | | isModal(A) | 组件是否带浮层，浮层组件拖入设计器时会遮挡画布区域，此时应当辅助一些交互以防止阻挡 | Boolean |
| descriptor(A) | 组件树描述信息 | String | | descriptor(A) | 组件树描述信息 | String |
@ -920,25 +907,23 @@ props 数组下对象字段描述：
组件在低代码引擎设计器中的事件回调和 hooks 等高级功能配置，包含如下字段： 组件在低代码引擎设计器中的事件回调和 hooks 等高级功能配置，包含如下字段：
| 字段 | 用途 | 类型 | 备注 | | 字段 | 用途 | 类型 | 备注 |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- | | --------------------------- | --------------------------------------------------------------------- | ------------------------------ | --------------------------------------------------- | --- | --- | --- | ---- | ---- | ---- | --------------------------------------------------------------------------- | ------------- | ---------- | ------------ | ---------------- |
| initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema | NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]); | | initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema | NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]); |
|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[]; | getResizingHandlers | 用于配置设计器中组件 resize 操作工具的样式和内容 | Function | `(currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> | ReactElement[];` |
|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback| - | callbacks | 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback | - |
|callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any | callbacks.onNodeAdd | 在容器中拖入组件时触发的事件回调 | Function | (e: MouseEvent, currentNode: any) => any |
|callbacks.onNodeRemove| 在容器中删除组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any | callbacks.onNodeRemove | 在容器中删除组件时触发的事件回调 | Function | (e: MouseEvent, currentNode: any) => any |
|callbacks.onResize| 调整容器尺寸时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义 | callbacks.onResize | 调整容器尺寸时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function | 详见 Types 定义 |
|callbacks.onResizeStart| 调整容器尺寸开始时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义 | callbacks.onResizeStart | 调整容器尺寸开始时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function | 详见 Types 定义 |
|callbacks.onResizeEnd| 调整容器尺寸结束时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义 | callbacks.onResizeEnd | 调整容器尺寸结束时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function | 详见 Types 定义 |
|callbacks.onSubtreeModified| 容器节点结构树发生变化时触发的回调 | Function| (currentNode: any, options: any) => void; | callbacks.onSubtreeModified | 容器节点结构树发生变化时触发的回调 | Function | (currentNode: any, options: any) => void; |
|callbacks.onMouseDownHook| 鼠标按下操作回调 | Function| (e: MouseEvent, currentNode: any) => any; | callbacks.onMouseDownHook | 鼠标按下操作回调 | Function | (e: MouseEvent, currentNode: any) => any; |
|callbacks.onClickHook| 鼠标单击操作回调 | Function| (e: MouseEvent, currentNode: any) => any; | callbacks.onClickHook | 鼠标单击操作回调 | Function | (e: MouseEvent, currentNode: any) => any; |
|callbacks.onDblClickHook| 鼠标双击操作回调 | Function| (e: MouseEvent, currentNode: any) => any; | callbacks.onDblClickHook | 鼠标双击操作回调 | Function | (e: MouseEvent, currentNode: any) => any; |
|callbacks.onMoveHook| 节点被拖动回调 | Function| (currentNode: any) => boolean; | callbacks.onMoveHook | 节点被拖动回调 | Function | (currentNode: any) => boolean; |
|callbacks.onHoverHook| 节点被 hover 回调 | Function| (currentNode: any) => boolean; | callbacks.onHoverHook | 节点被 hover 回调 | Function | (currentNode: any) => boolean; |
|callbacks.onChildMoveHook| 容器节点的子节点被拖动回调 | Function| (childNode: any, currentNode: any) => boolean; | callbacks.onChildMoveHook | 容器节点的子节点被拖动回调 | Function | (childNode: any, currentNode: any) => boolean; |
描述举例： 描述举例：
@ -1222,7 +1207,7 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等； 定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
| 字段 | 字段描述 | 字段类型 | 备注 | | 字段 | 字段描述 | 字段类型 | 备注 |
| --------------- | ---------------------- | -------- | ------------------------------------------------------------ | | ----------------------- | --------------------------------------------------- | --------------- | -------------------------------- |
| packages[].title? (A) | 资源标题 | String | 资源标题 | | packages[].title? (A) | 资源标题 | String | 资源标题 |
| packages[].package (A) | npm 包名 | String | 组件资源唯一标识 | | packages[].package (A) | npm 包名 | String | 组件资源唯一标识 |
| packages[].version(A) | npm 包版本号 | String | 组件资源版本号 | | packages[].version(A) | npm 包版本号 | String | 组件资源版本号 |
@ -1238,17 +1223,13 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
{ {
"package": "moment", "package": "moment",
"version": "2.24.0", "version": "2.24.0",
"urls": [ "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"],
"https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"
],
"library": "moment" "library": "moment"
}, },
{ {
"package": "lodash", "package": "lodash",
"library": "_", "library": "_",
"urls": [ "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"]
"https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"
]
}, },
{ {
"title": "fusion 组件库", "title": "fusion 组件库",
@ -1299,7 +1280,7 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
定义组件列表分组 定义组件列表分组
| 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 | | 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 |
| ---------- | ------ | ---------- | -------- | ------ | | ----------------- | -------- | -------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
| sort.groupList | String[] | 组件分组，用于组件面板 tab 展示 | - | ['精选组件', '原子组件'] | | sort.groupList | String[] | 组件分组，用于组件面板 tab 展示 | - | ['精选组件', '原子组件'] |
| sort.categoryList | String[] | 组件面板中同一个 tab 下的不同区间用 category 区分，category 的排序依照 categoryList 顺序排列 | - | ['通用', '数据展示', '表格类', '表单类'] | | sort.categoryList | String[] | 组件面板中同一个 tab 下的不同区间用 category 区分，category 的排序依照 categoryList 顺序排列 | - | ['通用', '数据展示', '表格类', '表单类'] |
@ -1336,27 +1317,17 @@ export interface RemoteComponentDescription {
#### 3.1.1 目录 (A) #### 3.1.1 目录 (A)
```html ```html
block/ block/ ├── build │   ├── index.css // 【编译生成】 │ ├── index.html //
├── build 【编译生成】【必选】可直接预览文件 │   ├── index.js // 【编译生成】 │   └── views // 【3A
│   ├── index.css // 【编译生成】 编译生成】html2sketch │   ├── block_view1.html // 【3A 编译生成】给 sketch 用的 html │   └──
│ ├── index.html // 【编译生成】【必选】可直接预览文件 block_view1.png // 【3A 编译生成】截图 ├── src // 【必选】区块源码 │ ├── index.jsx // 【必选】入口 │
│   ├── index.js // 【编译生成】 └── index.module.scss // 【可选】如有样式请使用 CSS Modules 避免冲突 ├── README.md //
│   └── views // 【3A 编译生成】html2sketch 【可选】无格式要求 └── package.json // 【必选】
│   ├── block_view1.html // 【3A 编译生成】给 sketch 用的 html
│   └── block_view1.png // 【3A 编译生成】截图
├── src // 【必选】区块源码
│ ├── index.jsx // 【必选】入口
│ └── index.module.scss // 【可选】如有样式请使用 CSS Modules 避免冲突
├── README.md // 【可选】无格式要求
└── package.json // 【必选】
``` ```
#### 3.1.2 package.json (A) #### 3.1.2 package.json (A)
```json ```json
{ {
"name": "", "name": "",
@ -1383,21 +1354,27 @@ block/
"title": "用户欢迎信息", "title": "用户欢迎信息",
"category": "form", "category": "form",
"screenshot": "https://unpkg.com/@icedesign/user-landing-block/screenshot.png", "screenshot": "https://unpkg.com/@icedesign/user-landing-block/screenshot.png",
"views": [{ // 区块视图，配置此项后会进入 fusion cool "views": [
{
// 区块视图，配置此项后会进入 fusion cool
"title": "视图 1 标题", // 区块视图标题 "title": "视图 1 标题", // 区块视图标题
"props": { // 区块支持的 props "props": {
// 区块支持的 props
"type": "primary" "type": "primary"
}, },
"screenshot": "build/views/block_view1.png", // 【编译自动填充】视图截图，会在 build 时自动生成 "screenshot": "build/views/block_view1.png", // 【编译自动填充】视图截图，会在 build 时自动生成
"html": "build/views/block_view1.html", // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成 "html": "build/views/block_view1.html" // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成
},{ },
{
"title": "视图 2 标题", // 区块视图标题 "title": "视图 2 标题", // 区块视图标题
"props": { // 区块支持的 props "props": {
// 区块支持的 props
"type": "sencondary" "type": "sencondary"
}, },
"screenshot": "build/views/block_view2.png", // 【编译自动填充】视图截图，会在 build 时自动生成 "screenshot": "build/views/block_view2.png", // 【编译自动填充】视图截图，会在 build 时自动生成
"html": "build/views/block_view2.html", // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成 "html": "build/views/block_view2.html" // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成
}] }
]
} }
} }
``` ```
@ -1414,14 +1391,15 @@ block/
| utils | 工具类扩展映射关系 | Array | | utils | 工具类扩展映射关系 | Array |
| i18n | 国际化语料 | Object | | i18n | 国际化语料 | Object |
描述举例 1： 描述举例 1：
```json ```json
{ {
"version": "1.0.0", "version": "1.0.0",
"componentsMap": [{}], "componentsMap": [{}],
"componentsTree": [{ // 区块组件树，顶层由区块容器组件包裹； "componentsTree": [
{
// 区块组件树，顶层由区块容器组件包裹；
"componentName": "Block", // 区块容器组件名 "componentName": "Block", // 区块容器组件名
"fileName": "block1", // 区块容器 1 "fileName": "block1", // 区块容器 1
"props": {}, "props": {},
@ -1429,12 +1407,14 @@ block/
"state": { "state": {
"name": "lucy" "name": "lucy"
}, },
"children": [{ "children": [
{
"componentName": "Div", "componentName": "Div",
"props": { "props": {
"className": "className1" "className": "className1"
}, },
"children": [{ "children": [
{
"componentName": "Button", "componentName": "Button",
"props": { "props": {
"text": "点击弹出我的姓名", "text": "点击弹出我的姓名",
@ -1445,9 +1425,12 @@ block/
}" }"
} }
} }
}] }
}] ]
}], }
]
}
],
"i18n": {} "i18n": {}
} }
``` ```
@ -1458,12 +1441,15 @@ block/
{ {
"version": "1.0.0", "version": "1.0.0",
"componentsMap": [{}], "componentsMap": [{}],
"componentsTree": [{ //区块组件树，由普通组件描述组合而成；无区块容器 "componentsTree": [
{
//区块组件树，由普通组件描述组合而成；无区块容器
"componentName": "Input", "componentName": "Input",
"props": { "props": {
"placeholder": "请输入搜索关键词" "placeholder": "请输入搜索关键词"
}
}, },
}, { {
"componentName": "Button", "componentName": "Button",
"props": { "props": {
"text": "搜索", "text": "搜索",
@ -1476,7 +1462,8 @@ block/
}" }"
} }
} }
}], }
],
"i18n": {} "i18n": {}
} }
``` ```
@ -1490,60 +1477,25 @@ block/
与标准源码 build-scripts 对齐 与标准源码 build-scripts 对齐
```html ```html
├── META/ # 低代码元数据信息，用于多分支冲突解决、数据回滚等功能 ├── META/ # 低代码元数据信息，用于多分支冲突解决、数据回滚等功能 ├── build │   ├── index.css #
├── build 【编译生成】 │ ├── index.html # 【编译生成】【必选】可直接预览文件 │   ├── index.js # 【编译生成】
│   ├── index.css # 【编译生成】 │   └── views # 【3A 编译生成】html2sketch │   ├── page1.html # 【3A 编译生成】给 sketch 用的 html
│ ├── index.html # 【编译生成】【必选】可直接预览文件 │   └── page1.png # 【3A 编译生成】截图 ├── public/ # 静态文件，构建时会 copy 到 build/ 目录 │ ├──
│   ├── index.js # 【编译生成】 index.html # 应用入口 HTML │ └── favicon.png # Favicon ├── src/ │ ├── components/ #
│   └── views # 【3A 编译生成】html2sketch 应用内的低代码业务组件 │ │ └── GuideComponent/ │ │ ├── index.js # 组件入口 │ │ ├── components.js #
│   ├── page1.html # 【3A 编译生成】给 sketch 用的 html 组件依赖的其他组件 │ │ ├── schema.js # schema 描述 │ │ └── index.scss # css 样式 │ ├── pages/ # 页面
│   └── page1.png # 【3A 编译生成】截图 │ │ └── HomePage/ # Home 页面 │ │ ├── index.js # 页面入口 │ │ └── index.scss # css 样式 │ ├──
├── public/ # 静态文件，构建时会 copy 到 build/ 目录 layouts/ │ │ └── BasicLayout/ # layout 组件名称 │ │ ├── index.js # layout 入口 │ │ ├── components.js
│ ├── index.html # 应用入口 HTML # layout 组件依赖的其他组件 │ │ ├── schema.js # layout schema 描述 │ │ └── index.scss # layout css
│ └── favicon.png # Favicon 样式 │ ├── config/ # 配置信息 │ │ ├── components.js # 应用上下文所有组件 │ │ ├── routes.js #
├── src/ 页面路由列表 │ │ └── constants.js # 全局常量定义 │ │ └── app.js # 应用配置文件 │ ├── utils/ # 工具库
│ ├── components/ # 应用内的低代码业务组件 │ │ └── index.js # 应用第三方扩展函数 │ ├── stores/ # [可选] 全局状态管理 │ │ └── user.js │ ├──
│ │ └── GuideComponent/ locales/ # [可选] 国际化资源 │ │ ├── en-US │ │ └── zh-CN │ ├── global.scss # 全局样式 │ └──
│ │ ├── index.js # 组件入口 index.jsx # 应用入口脚本，依赖 config/routes.js 的路由配置动态生成路由； ├── webpack.config.js #
│ │ ├── components.js # 组件依赖的其他组件 项目工程配置，包含插件配置及自定义 `webpack` 配置等 ├── README.md ├── package.json ├── .editorconfig
│ │ ├── schema.js # schema 描述 ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .stylelintignore └── .stylelintrc.js
│ │ └── index.scss # css 样式
│ ├── pages/ # 页面
│ │ └── HomePage/ # Home 页面
│ │ ├── index.js # 页面入口
│ │ └── index.scss # css 样式
│ ├── layouts/
│ │ └── BasicLayout/ # layout 组件名称
│ │ ├── index.js # layout 入口
│ │ ├── components.js # layout 组件依赖的其他组件
│ │ ├── schema.js # layout schema 描述
│ │ └── index.scss # layout css 样式
│ ├── config/ # 配置信息
│ │ ├── components.js # 应用上下文所有组件
│ │ ├── routes.js # 页面路由列表
│ │ └── constants.js # 全局常量定义
│ │ └── app.js # 应用配置文件
│ ├── utils/ # 工具库
│ │ └── index.js # 应用第三方扩展函数
│ ├── stores/ # [可选] 全局状态管理
│ │ └── user.js
│ ├── locales/ # [可选] 国际化资源
│ │ ├── en-US
│ │ └── zh-CN
│ ├── global.scss # 全局样式
│ └── index.jsx # 应用入口脚本，依赖 config/routes.js 的路由配置动态生成路由；
├── webpack.config.js # 项目工程配置，包含插件配置及自定义 `webpack` 配置等
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .stylelintignore
└── .stylelintrc.js
``` ```
##### 入口文件 ##### 入口文件
(/src/index.jsx) (/src/index.jsx)
@ -1557,7 +1509,10 @@ import router from './router';
import './index.scss'; import './index.scss';
const App = hot(router); const App = hot(router);
ReactDOM.render(<App />, document.getElementById(pkg.config && pkg.config.targetRootID || 'root')); ReactDOM.render(
<App />,
document.getElementById((pkg.config && pkg.config.targetRootID) || 'root'),
);
``` ```
##### 应用参数配置文件 ##### 应用参数配置文件
@ -1579,22 +1534,21 @@ ReactDOM.render(<App />, document.getElementById(pkg.config && pkg.config.target
- 支持配置渲染模块版本号：sdkVersion - 支持配置渲染模块版本号：sdkVersion
- 支持配置固定依赖组件列表：compDependencies - 支持配置固定依赖组件列表：compDependencies
```javascript ```javascript
export default { export default {
"sdkVersion": "1.0.3", sdkVersion: '1.0.3',
"historyMode": "hash", // 浏览器路由：browser 哈希路由：hash historyMode: 'hash', // 浏览器路由：browser 哈希路由：hash
"targetRootID": "ice-container", targetRootID: 'ice-container',
"layout": { layout: {
"componentName": "BasicLayout", componentName: 'BasicLayout',
"props": {}, props: {},
}, },
"theme": { theme: {
"package": "@alife/theme-fusion", package: '@alife/theme-fusion',
"version": "^0.1.0" version: '^0.1.0',
}, },
"compDependencies": [] compDependencies: [],
} };
``` ```
##### 应用扩展配置规范： ##### 应用扩展配置规范：
@ -1604,7 +1558,6 @@ export default {
- 支持 npm 包第三方扩展； - 支持 npm 包第三方扩展；
- 支持应用范围的自定义扩展函数； - 支持应用范围的自定义扩展函数；
```javascript ```javascript
import { Message, Dialog } from '@alifd/next'; import { Message, Dialog } from '@alifd/next';
import moment from 'moment'; import moment from 'moment';
@ -1625,8 +1578,8 @@ export default {
```javascript ```javascript
export default { export default {
"ISIDE": false ISIDE: false,
} };
``` ```
##### 应用样式配置 ##### 应用样式配置
@ -1655,17 +1608,21 @@ a {
"title": "用户欢迎信息", "title": "用户欢迎信息",
"category": "form", "category": "form",
"screenshot": "https://unpkg.com/@icedesign/user-landing-block/screenshot.png", "screenshot": "https://unpkg.com/@icedesign/user-landing-block/screenshot.png",
"views": [{ // 模板视图，配置此项后会进入 fusion cool "views": [
{
// 模板视图，配置此项后会进入 fusion cool
"title": "视图 1 标题", // 模板视图标题 "title": "视图 1 标题", // 模板视图标题
"path": "#/dashboard/monitor", // 读取路由列表生成，hash 路由必须加# "path": "#/dashboard/monitor", // 读取路由列表生成，hash 路由必须加#
"screenshot": "build/views/page0.png", // 【编译自动填充】视图截图，会在 build 时自动生成 "screenshot": "build/views/page0.png", // 【编译自动填充】视图截图，会在 build 时自动生成
"html": "build/views/page0.html", // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成 "html": "build/views/page0.html" // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成
},{ },
{
"title": "视图 2 标题", // 区块视图标题 "title": "视图 2 标题", // 区块视图标题
"path": "#/dashboard/list", // 读取路由列表生成，hash 路由必须加# "path": "#/dashboard/list", // 读取路由列表生成，hash 路由必须加#
"screenshot": "build/views/page1.png", // 【编译自动填充】视图截图，会在 build 时自动生成 "screenshot": "build/views/page1.png", // 【编译自动填充】视图截图，会在 build 时自动生成
"html": "build/views/page1.html", // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成 "html": "build/views/page1.html" // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成
}] }
]
} }
} }
``` ```

95
docs/docusaurus.config.js
View File

@ -1,95 +0,0 @@
/* eslint-disable @typescript-eslint/no-require-imports */
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const navbar = require('./config/navbar');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Low-Code Engine',
tagline: 'Low-Code Engine is awesome!',
url: 'https://lowcode-engine.cn',
baseUrl: '/site/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon:
'https://img.alicdn.com/imgextra/i2/O1CN01TNJDDg20pKniPOkN4_!!6000000006898-2-tps-66-78.png',
organizationName: 'alibaba', // Usually your GitHub org/user name.
projectName: 'lowcode-engine', // Usually your repo name.
i18n: {
defaultLocale: 'zh-Hans',
locales: ['zh-Hans'],
},
plugins: [
[
'@docusaurus/plugin-content-docs',
{
id: 'community',
path: 'community',
routeBasePath: 'community',
sidebarPath: require.resolve('./config/sidebarsCommunity.js'),
},
],
],
presets: [
[
'classic',
({
docs: {
sidebarPath: require.resolve('./config/sidebars.js'),
// lastVersion: 'current',
editUrl:
'https://github.com/alibaba/lowcode-engine/tree/develop/docs/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
({
docs: {
sidebar: {
hideable: true,
},
},
navbar,
footer: {
// style: 'dark',
copyright: `Copyright © ${new Date().getFullYear()} 阿里巴巴集团, Inc. Built with Docusaurus.`,
},
// 主题切换
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
// 语雀文档导出的图片，会进行 referrer 校验，这里设置关闭，不然加载不了语雀的图片
metadata: [{ name: 'referrer', content: 'no-referrer' }],
tableOfContents: {
minHeadingLevel: 2,
maxHeadingLevel: 6,
},
}),
themes: [
[
require.resolve('@easyops-cn/docusaurus-search-local'),
{
hashed: true,
// For Docs using Chinese, The `language` is recommended to set to:
// ```
language: ['en', 'zh'],
// ```
},
],
],
};
module.exports = config;

89
docs/docusaurus.config.ts Normal file
View File

@ -0,0 +1,89 @@
import { themes as prismThemes } from 'prism-react-renderer';
import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';
import navbar from './config/navbar';
const config: Config = {
title: 'Low-Code Engine',
tagline: 'Low-Code Engine is awesome!',
url: 'https://lowcode-engine.cn',
baseUrl: '/site/',
favicon:
'https://img.alicdn.com/imgextra/i2/O1CN01TNJDDg20pKniPOkN4_!!6000000006898-2-tps-66-78.png',
organizationName: 'alibaba', // Usually your GitHub org/user name.
projectName: 'lowcode-engine', // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
i18n: {
defaultLocale: 'zh-Hans',
locales: ['zh-Hans'],
},
presets: [
[
'classic',
{
docs: {
sidebarPath: './config/sidebars.ts',
editUrl: 'https://github.com/alibaba/lowcode-engine/tree/develop/docs/',
},
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
plugins: [
[
'@docusaurus/plugin-content-docs',
{
id: 'community',
path: 'community',
routeBasePath: 'community',
sidebarPath: './config/sidebarsCommunity.ts',
},
],
],
themeConfig: {
docs: {
sidebar: {
hideable: true,
},
},
navbar,
footer: {
copyright: `Copyright © ${new Date().getFullYear()} 阿里巴巴集团, Inc. Built with Docusaurus.`,
},
// 主题切换
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
},
// 语雀文档导出的图片，会进行 referrer 校验，这里设置关闭，不然加载不了语雀的图片
metadata: [{ name: 'referrer', content: 'no-referrer' }],
tableOfContents: {
minHeadingLevel: 2,
maxHeadingLevel: 6,
},
} satisfies Preset.ThemeConfig,
themes: [
[
'@easyops-cn/docusaurus-search-local',
{
hashed: true,
// For Docs using Chinese, The `language` is recommended to set to:
// ```
language: ['en', 'zh'],
// ```
},
],
],
};
module.exports = config;

31
docs/package.json
View File

@ -3,6 +3,7 @@
"version": "1.2.35", "version": "1.2.35",
"description": "低代码引擎版本化文档", "description": "低代码引擎版本化文档",
"license": "MIT", "license": "MIT",
"private": true,
"files": [ "files": [
"build" "build"
], ],
@ -20,21 +21,23 @@
"syncOss": "node ./scripts/sync-oss.js" "syncOss": "node ./scripts/sync-oss.js"
}, },
"dependencies": { "dependencies": {
"@docusaurus/core": "^2.2.0", "@docusaurus/core": "^3.1.1",
"@docusaurus/preset-classic": "^2.2.0", "@docusaurus/preset-classic": "^3.1.1",
"@docusaurus/plugin-content-docs": "^3.1.1",
"@easyops-cn/docusaurus-search-local": "^0.32.0", "@easyops-cn/docusaurus-search-local": "^0.32.0",
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^3.0.1",
"axios": "^1.1.3", "axios": "^1.1.3",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"fs-extra": "^10.1.0", "prism-react-renderer": "^2.3.0",
"prism-react-renderer": "^1.3.5", "react": "^18.0.2",
"react": "^17.0.2", "react-dom": "^18.0.2"
"react-dom": "^17.0.2"
}, },
"devDependencies": { "devDependencies": {
"@docusaurus/module-type-aliases": "^2.2.0", "@docusaurus/module-type-aliases": "^3.1.1",
"@tsconfig/docusaurus": "^1.0.5", "@docusaurus/tsconfig": "^3.1.1",
"typescript": "^4.7.4" "@docusaurus/types": "^3.1.1",
"fast-glob": "^3.3.2",
"gray-matter": "^4.0.3"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@ -43,13 +46,13 @@
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 3 chrome version",
"last 1 firefox version", "last 3 firefox version",
"last 1 safari version" "last 5 safari version"
] ]
}, },
"engines": { "engines": {
"node": ">=16.14" "node": ">=18.0"
}, },
"publishConfig": { "publishConfig": {
"access": "public", "access": "public",

14
docs/scripts/getDocsFromDir.js → docs/scripts/getDocsFromDir.ts
View File

@ -1,9 +1,9 @@
const fs = require('fs'); import * as fs from 'node:fs';
const path = require('path'); import * as path from 'node:path';
const glob = require('glob'); import * as glob from 'fast-glob';
const matter = require('gray-matter'); import matter from 'gray-matter';
module.exports = function getDocsFromDir(dir, cateList) { export default function getDocsFromDir(dir: string, cateList: any[] = []) {
// docs/ // docs/
const baseDir = path.join(__dirname, '../docs/'); const baseDir = path.join(__dirname, '../docs/');
const docsDir = path.join(baseDir, dir); const docsDir = path.join(baseDir, dir);
@ -43,7 +43,7 @@ module.exports = function getDocsFromDir(dir, cateList) {
return id; return id;
}); });
(cateList || []).forEach((item) => { cateList.forEach((item) => {
const { dir, subCategory, ...otherConfig } = item; const { dir, subCategory, ...otherConfig } = item;
const indexList = glob.sync('index.md?(x)', { const indexList = glob.sync('index.md?(x)', {
cwd: path.join(baseDir, dir), cwd: path.join(baseDir, dir),
@ -63,4 +63,4 @@ module.exports = function getDocsFromDir(dir, cateList) {
}); });
return result; return result;
}; }

7
docs/scripts/sync-oss.js
View File

@ -1,7 +1,8 @@
#!/usr/bin/env node #!/usr/bin/env node
const http = require('http'); import http from 'node:http';
const package = require('../package.json'); import packageJson from '../package.json';
const { version, name } = package;
const { version, name } = packageJson;
const options = { const options = {
method: 'PUT', method: 'PUT',
hostname: 'uipaas-node.alibaba-inc.com', hostname: 'uipaas-node.alibaba-inc.com',

5
docs/tsconfig.json
View File

@ -1,7 +1,8 @@
{ {
// This file is not used in compilation. It is here just for a nice editor experience. // This file is not used in compilation. It is here just for a nice editor experience.
"extends": "@tsconfig/docusaurus/tsconfig.json", "extends": "@docusaurus/tsconfig",
"compilerOptions": { "compilerOptions": {
"baseUrl": "." "baseUrl": ".",
"resolveJsonModule": true
} }
} }

13
package.json
View File

@ -13,6 +13,7 @@
] ]
}, },
"scripts": { "scripts": {
"dev": "pnpm --filter playground dev",
"build": "./scripts/build.sh", "build": "./scripts/build.sh",
"build:npm": "lerna run build --stream", "build:npm": "lerna run build --stream",
"build:umd": "lerna run build:umd --stream", "build:umd": "lerna run build:umd --stream",
@ -48,24 +49,24 @@
"devDependencies": { "devDependencies": {
"@alilc/build-plugin-lce": "^0.0.5", "@alilc/build-plugin-lce": "^0.0.5",
"@alilc/lowcode-test-mate": "^1.0.1", "@alilc/lowcode-test-mate": "^1.0.1",
"@changesets/cli": "^2.27.1",
"@types/node": "^20.11.30",
"@types/react-router": "5.1.18", "@types/react-router": "5.1.18",
"babel-jest": "^26.5.2", "babel-jest": "^26.5.2",
"del": "^6.1.1", "del": "^6.1.1",
"execa": "^5.1.1", "execa": "^8.0.1",
"f2elint": "^4.2.1", "f2elint": "^4.2.1",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"husky": "^7.0.4", "husky": "^9.0.11",
"lerna": "^4.0.0",
"typescript": "^5.4.2", "typescript": "^5.4.2",
"yarn": "^1.22.17",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"rimraf": "^3.0.2", "rimraf": "^5.0.2",
"rollup": "^4.13.0", "rollup": "^4.13.0",
"vite": "^5.1.6", "vite": "^5.1.6",
"vitest": "^1.3.1" "vitest": "^1.3.1"
}, },
"engines": { "engines": {
"node": ">=14.17.0" "node": ">=18"
}, },
"repository": "git@github.com:alibaba/lowcode-engine.git" "repository": "git@github.com:alibaba/lowcode-engine.git"
} }

12
playground/index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Playground</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>

8
playground/package.json Normal file
View File

@ -0,0 +1,8 @@
{
"name": "playground",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "vite"
}
}

0
examples/base/src/index.ts → playground/src/index.ts
View File

4
pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,4 @@
packages:
- 'runtime/*'
- 'playground'
- 'docs'

0
rollup.config.mjs → runtime/renderer-core/rollup.config.mjs
View File

2
runtime/renderer-react/tsconfig.json
View File

@ -3,7 +3,7 @@
"compilerOptions": { "compilerOptions": {
"outDir": "dist", "outDir": "dist",
"paths": { "paths": {
"@alilc/*": ["runtime/*"], "@alilc/renderer-core": ["runtime/renderer-core"],
"@alilc/runtime-router": ["runtime/router"] "@alilc/runtime-router": ["runtime/router"]
} }
}, },

2
runtime/router/tsconfig.json
View File

@ -3,7 +3,7 @@
"compilerOptions": { "compilerOptions": {
"outDir": "dist", "outDir": "dist",
"paths": { "paths": {
"@alilc/*": ["runtime/*"] "@alilc/renderer-core": ["runtime/renderer-core"],
} }
}, },
"include": ["src"] "include": ["src"]