mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-11 18:42:56 +00:00
build: upgrade docs deps
This commit is contained in:
1ncounter
parent
fedbbca845
commit
3592356c90
@ -2,27 +2,20 @@
|
||||
|
||||
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
|
||||
1. npm run build
|
||||
2. npm publish # 记得改下版本号，比如 1.0.1
|
||||
@ -34,12 +27,13 @@ $ yarn build
|
||||
5. lowcode-engine.cn 站点生效
|
||||
```
|
||||
|
||||
|
||||
## 功能
|
||||
|
||||
- [x] 支持本地离线搜索
|
||||
- [x] 版本化文档管理
|
||||
- [x] 离线静态部署
|
||||
- [x] 主题（fork 宜搭开发者中心）
|
||||
|
||||
## 使用文档
|
||||
|
||||
https://docusaurus.io/zh-CN/docs/docs-introduction
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/**
|
||||
* 此配置的修改，如未生效，可以重新启动下即可
|
||||
*/
|
||||
module.exports = {
|
||||
import type * as Preset from '@docusaurus/preset-classic';
|
||||
|
||||
const navbar: Preset.ThemeConfig['navbar'] = {
|
||||
title: '',
|
||||
logo: {
|
||||
alt: 'LowCode-Engine',
|
||||
@ -63,7 +62,6 @@ module.exports = {
|
||||
// position: 'right',
|
||||
// dropdownActiveClassDisabled: true,
|
||||
// },
|
||||
// {
|
||||
{
|
||||
href: 'https://github.com/alibaba/lowcode-engine',
|
||||
position: 'right',
|
||||
@ -82,3 +80,5 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default navbar;
|
||||
@ -1,23 +1,6 @@
|
||||
/*
|
||||
* 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');
|
||||
import getDocsFromDir from '../scripts/getDocsFromDir';
|
||||
|
||||
module.exports = {
|
||||
// 手动配置的导航
|
||||
// guide: [
|
||||
// 'guide/quickStart/intro',
|
||||
// 'guide/quickStart/start',
|
||||
// {
|
||||
// type: 'category',
|
||||
// label: 'FAQ',
|
||||
// collapsed: false,
|
||||
// items: getDocsFromDir('guide/quickStart/faq'),
|
||||
// },
|
||||
// ],
|
||||
const sidebars = {
|
||||
/**
|
||||
* 根据当前目录自动生成导航配置
|
||||
*/
|
||||
@ -39,7 +22,9 @@ module.exports = {
|
||||
type: 'category',
|
||||
label: '扩展编辑器',
|
||||
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',
|
||||
@ -109,3 +94,5 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default sidebars;
|
||||
@ -1,4 +1,4 @@
|
||||
module.exports = {
|
||||
export default {
|
||||
community: [
|
||||
{
|
||||
type: 'autogenerated',
|
||||
@ -6,6 +6,7 @@ sidebar_position: 10
|
||||
> **@since** v1.3.0
|
||||
|
||||
## 简介
|
||||
|
||||
CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。
|
||||
|
||||
## 组件列表
|
||||
@ -14,51 +15,50 @@ CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开
|
||||
|
||||
提示组件
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|--------------|---------------------------------------|--------|
|
||||
| className | className | string (optional) | |
|
||||
| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | |
|
||||
| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | |
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ---------- | -------------------------------------- | ------ |
|
||||
| className | className | string (optional) | |
|
||||
| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | |
|
||||
| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | |
|
||||
|
||||
### HelpTip
|
||||
|
||||
带 help icon 的提示组件
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|--------|-----------------------------------|--------|
|
||||
| help | 描述 | IPublicTypeHelpTipConfig | |
|
||||
| direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' |
|
||||
| size | 方向 | IconProps['size'] | 'small'|
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ---- | --------------------------------- | ------- |
|
||||
| help | 描述 | IPublicTypeHelpTipConfig | |
|
||||
| direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' |
|
||||
| size | 方向 | IconProps['size'] | 'small' |
|
||||
|
||||
### Title
|
||||
|
||||
标题组件
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|------------|-----------------------------|--------|
|
||||
| title | 标题内容 | IPublicTypeTitleContent | |
|
||||
| className | className | string (optional) | |
|
||||
| onClick | 点击事件 | () => void (optional) | |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | --------- | ----------------------- | ------ |
|
||||
| title | 标题内容 | IPublicTypeTitleContent | |
|
||||
| className | className | string (optional) | |
|
||||
| onClick | 点击事件 | () => void (optional) | |
|
||||
|
||||
### ContextMenu
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|--------|----------------------------------------------------|------------------------------------|--------|
|
||||
| menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | |
|
||||
| children | 组件的子元素 | React.ReactElement[] | |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ------------------------ | ------------------------------ | ------ |
|
||||
| menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | |
|
||||
| children | 组件的子元素 | React.ReactElement[] | |
|
||||
|
||||
**IPublicTypeContextMenuAction Interface**
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------|
|
||||
| name | 动作的唯一标识符<br/>Unique identifier for the action | string | |
|
||||
| title | 显示的标题，可以是字符串或国际化数据<br/>Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | |
|
||||
| type | 菜单项类型<br/>Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM |
|
||||
| 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) | |
|
||||
| condition | 显示条件函数<br/>Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | |
|
||||
| disabled | 禁用条件函数，可选<br/>Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- |
|
||||
| name | 动作的唯一标识符<br/>Unique identifier for the action | string | |
|
||||
| title | 显示的标题，可以是字符串或国际化数据 <br/> Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | |
|
||||
| type | 菜单项类型 <br/> Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM |
|
||||
| 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)` | |
|
||||
| condition | 显示条件函数 <br/> Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | |
|
||||
| disabled | 禁用条件函数，可选<br/>Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | |
|
||||
|
||||
**ContextMenu 示例**
|
||||
|
||||
@ -127,84 +127,109 @@ export default App;
|
||||
详细文档： [Balloon Documentation](https://fusion.design/pc/component/balloon)
|
||||
|
||||
### Breadcrumb
|
||||
|
||||
详细文档： [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb)
|
||||
|
||||
### Button
|
||||
|
||||
详细文档： [Button Documentation](https://fusion.design/pc/component/button)
|
||||
|
||||
### Card
|
||||
|
||||
详细文档：[Card Documentation](https://fusion.design/pc/component/card)
|
||||
|
||||
### Checkbox
|
||||
|
||||
详细文档：[Checkbox Documentation](https://fusion.design/pc/component/checkbox)
|
||||
|
||||
### DatePicker
|
||||
|
||||
详细文档：[DatePicker Documentation](https://fusion.design/pc/component/datepicker)
|
||||
|
||||
### Dialog
|
||||
|
||||
详细文档：[Dialog Documentation](https://fusion.design/pc/component/dialog)
|
||||
|
||||
### Dropdown
|
||||
|
||||
详细文档：[Dropdown Documentation](https://fusion.design/pc/component/dropdown)
|
||||
|
||||
### Form
|
||||
|
||||
详细文档：[Form Documentation](https://fusion.design/pc/component/form)
|
||||
|
||||
### Icon
|
||||
|
||||
详细文档：[Icon Documentation](https://fusion.design/pc/component/icon)
|
||||
|
||||
引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133
|
||||
|
||||
|
||||
### Input
|
||||
|
||||
详细文档：[Input Documentation](https://fusion.design/pc/component/input)
|
||||
|
||||
### Loading
|
||||
|
||||
详细文档：[Loading Documentation](https://fusion.design/pc/component/loading)
|
||||
|
||||
### Message
|
||||
|
||||
详细文档：[Message Documentation](https://fusion.design/pc/component/message)
|
||||
|
||||
### Overlay
|
||||
|
||||
详细文档：[Overlay Documentation](https://fusion.design/pc/component/overlay)
|
||||
|
||||
### Pagination
|
||||
|
||||
详细文档：[Pagination Documentation](https://fusion.design/pc/component/pagination)
|
||||
|
||||
### Radio
|
||||
|
||||
详细文档：[Radio Documentation](https://fusion.design/pc/component/radio)
|
||||
|
||||
### Search
|
||||
|
||||
详细文档：[Search Documentation](https://fusion.design/pc/component/search)
|
||||
|
||||
### Select
|
||||
|
||||
详细文档：[Select Documentation](https://fusion.design/pc/component/select)
|
||||
|
||||
### SplitButton
|
||||
|
||||
详细文档：[SplitButton Documentation](https://fusion.design/pc/component/splitbutton)
|
||||
|
||||
### Step
|
||||
|
||||
详细文档：[Step Documentation](https://fusion.design/pc/component/step)
|
||||
|
||||
### Switch
|
||||
|
||||
详细文档：[Switch Documentation](https://fusion.design/pc/component/switch)
|
||||
|
||||
### Tab
|
||||
|
||||
详细文档：[Tab Documentation](https://fusion.design/pc/component/tab)
|
||||
|
||||
### Table
|
||||
|
||||
详细文档：[Table Documentation](https://fusion.design/pc/component/table)
|
||||
|
||||
### Tree
|
||||
|
||||
详细文档：[Tree Documentation](https://fusion.design/pc/component/tree)
|
||||
|
||||
### TreeSelect
|
||||
|
||||
详细文档：[TreeSelect Documentation](https://fusion.design/pc/component/treeselect)
|
||||
|
||||
### Upload
|
||||
|
||||
详细文档：[Upload Documentation](https://fusion.design/pc/component/upload)
|
||||
|
||||
### Divider
|
||||
|
||||
详细文档：[Divider Documentation](https://fusion.design/pc/component/divider)
|
||||
|
||||
## 说明
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
---
|
||||
title: MixedSetter
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
可以让属性同时支持多个 setter
|
||||
|
||||
## 展示
|
||||
@ -10,6 +12,6 @@ title: MixedSetter
|
||||
|
||||
## 配置
|
||||
|
||||
| **属性名** | **类型** | **说明** |
|
||||
| --- | --- | --- |
|
||||
| setters | Array<String\> | SetterName |
|
||||
| **属性名** | **类型** | **说明** |
|
||||
| ---------- | --------------- | ---------- |
|
||||
| setters | `Array<String>` | SetterName |
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
---
|
||||
title: RadioGroupSetter
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
用于直观的展示选择并选择。
|
||||
|
||||
## 展示
|
||||
|
||||
<img src="https://img.alicdn.com/imgextra/i2/O1CN01rId9td25yYv0my5Hd_!!6000000007595-2-tps-564-98.png" width="300"/>
|
||||
|
||||
## setter 配置
|
||||
| 属性名 | 说明 |
|
||||
| --- | --- |
|
||||
| defaultValue | 默认值 |
|
||||
| options | 传入的数据源，**参数格式**: [{img: 'url', value: 'text', label/title: 'text'}, ...] \| [ 'text', 'text', ...] |
|
||||
|
||||
| 属性名 | 说明 |
|
||||
| ------------ | ------------------------------------------------------------------------------------ | ----------------------- |
|
||||
| defaultValue | 默认值 |
|
||||
| options | 传入的数据源，**参数格式**: `[{img: 'url', value: 'text', label/title: 'text'}, ...] | [ 'text', 'text', ...]` |
|
||||
|
||||
## 返回类型
|
||||
|
||||
String | Number | Boolean
|
||||
会返回 options 中的 value 值
|
||||
|
||||
@ -1,18 +1,22 @@
|
||||
---
|
||||
title: SelectSetter
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
用来选择组件。在限定的可选性内进行选择，核心能力是选择
|
||||
|
||||
## 展示
|
||||
|
||||
<img src="https://img.alicdn.com/imgextra/i4/O1CN013arqCy1f1JfwdTGQo_!!6000000003946-2-tps-574-602.png" width="300"/>
|
||||
|
||||
## setter 配置
|
||||
| 属性名 | 说明 |
|
||||
| --- | --- |
|
||||
| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
|
||||
| defaultValue | 默认值 |
|
||||
| options | 传入的数据源，**参数格式**: [ {label/title: '文字', value: 'text'}, ...] |
|
||||
|
||||
| 属性名 | 说明 |
|
||||
| ------------ | -------------------------------------------------------------------------- |
|
||||
| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
|
||||
| defaultValue | 默认值 |
|
||||
| options | 传入的数据源，**参数格式**: `[ {label/title: '文字', value: 'text'}, ...]` |
|
||||
|
||||
## 返回类型
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
---
|
||||
title: SlotSetter
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。
|
||||
|
||||
## 展示
|
||||
@ -15,14 +17,15 @@ title: SlotSetter
|
||||
|
||||
## setter 配置
|
||||
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
|
||||
| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[]不同 |
|
||||
| checkedText | string | switch 选中文案，默认显示"启用" |
|
||||
| unCheckedText | string | switch 取消文案，默认显示"关闭" |
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| initialValue | Object | 默认值 `{ "type": "JSSlot", "params": [ "module" ], "value": [] }` params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
|
||||
| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[] 不同 |
|
||||
| checkedText | string | switch 选中文案，默认显示"启用" |
|
||||
| unCheckedText | string | switch 取消文案，默认显示"关闭" |
|
||||
|
||||
## 配置示例
|
||||
|
||||
### 配置
|
||||
|
||||
```typescript
|
||||
@ -40,6 +43,7 @@ title: SlotSetter
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 组件
|
||||
|
||||
```typescript
|
||||
@ -47,7 +51,9 @@ function A(props) {
|
||||
return props.propName;
|
||||
}
|
||||
```
|
||||
|
||||
## 带参数的插槽示例
|
||||
|
||||
### 配置
|
||||
|
||||
```typescript
|
||||
@ -66,6 +72,7 @@ function A(props) {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 组件
|
||||
|
||||
组件需要传参数进行渲染，和普通示例的使用不一样。
|
||||
@ -76,6 +83,7 @@ function A(props) {
|
||||
return props.propName(module);
|
||||
}
|
||||
```
|
||||
|
||||
### param 使用示例
|
||||
|
||||
1.开启插槽
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
---
|
||||
title: StyleSetter
|
||||
---
|
||||
|
||||
## 简介
|
||||
|
||||
通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。
|
||||
|
||||
## 展示
|
||||
@ -10,19 +12,19 @@ title: StyleSetter
|
||||
|
||||
## setter 配置
|
||||
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| 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 |
|
||||
| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
|
||||
| isShowCssCode | Boolean | 默认值: true, 是否展示css源码编辑 |
|
||||
| layoutPropsConfig | Object | 布局样式设置 |
|
||||
| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] <img src="https://img.alicdn.com/imgextra/i3/O1CN01nucfjP1gT5Iu6IMua_!!6000000004142-2-tps-474-72.png" width="250"/> 可按需展示 |
|
||||
| layoutPropsConfig.isShowPadding | String | 默认值 true <img src="https://img.alicdn.com/imgextra/i4/O1CN01frOzt81uLfVjYIR8I_!!6000000006021-2-tps-548-382.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"/> 是否展示宽高 |
|
||||
| fontPropsConfig | Object | 文字样式设置 |
|
||||
| fontPropsConfig.fontFamilyList | Array | [ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项 |
|
||||
| positionPropsConfig | Object | 位置样式设置 |
|
||||
| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
|
||||
| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |
|
||||
| 属性名 | 类型 | 说明 |
|
||||
| ----------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
|
||||
| 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 |
|
||||
| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
|
||||
| isShowCssCode | Boolean | 默认值: true, 是否展示css源码编辑 |
|
||||
| layoutPropsConfig | Object | 布局样式设置 |
|
||||
| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] <img src="https://img.alicdn.com/imgextra/i3/O1CN01nucfjP1gT5Iu6IMua_!!6000000004142-2-tps-474-72.png" width="250"/> 可按需展示 |
|
||||
| layoutPropsConfig.isShowPadding | String | 默认值 true <img src="https://img.alicdn.com/imgextra/i4/O1CN01frOzt81uLfVjYIR8I_!!6000000006021-2-tps-548-382.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"/> 是否展示宽高 |
|
||||
| fontPropsConfig | Object | 文字样式设置 |
|
||||
| fontPropsConfig.fontFamilyList | Array | `[ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' }]` 可以定制文字字体选项 |
|
||||
| positionPropsConfig | Object | 位置样式设置 |
|
||||
| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
|
||||
| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |
|
||||
|
||||
@ -2,28 +2,29 @@
|
||||
title: 预置设置器列表
|
||||
sidebar_position: 4
|
||||
---
|
||||
| 预置 Setter | 返回类型 | 用途 | 截图 |
|
||||
| --- | --- | --- | --- |
|
||||
| [ArraySetter](./setterDetails/array) | T[] | 列表数组行数据设置器 |  |
|
||||
| [BoolSetter](./setterDetails/behavior) | boolean | 布尔型数据设置器， |  |
|
||||
| ClassNameSetter | string | 样式名设置器 |  |
|
||||
| [ColorSetter](./setterDetails/color) | string | 颜色设置器 |  |
|
||||
| DateMonthSetter | | 日期型 - 月数据设置器 | |
|
||||
| DateRangeSetter | | 日期型数据设置器，可选择时间区间 | |
|
||||
| DateSetter | | 日期型数据设置器 | |
|
||||
| DateYearSetter || 日期型 - 年数据设置器 | |
|
||||
| [EventSetter](./setterDetails/event) | function | 事件绑定设置器 |  |
|
||||
| [IconSetter](./setterDetails/icon) | string | 图标设置器 |  |
|
||||
| [FunctionSetter](./setterDetails/function) | function | 函数型数据设置器 |  |
|
||||
| JsonSetter | object | json 型数据设置器 |  |
|
||||
| [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 |  |
|
||||
| [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 |  |
|
||||
| ObjectSetter | Record<string, any> | 对象数据设置器，一般内嵌在 ArraySetter 中 ||
|
||||
| [RadioGroupSetter](./setterDetails/radioGroup)| string | number | boolean | 枚举型数据设置器，采用 tab 选择的形式展现 ||  |
|
||||
| [SelectSetter](./setterDetails/select) | string | number | boolean | 枚举型数据设置器，采用下拉的形式展现 |  |
|
||||
| [SlotSetter](./setterDetails/slot) | Element | Element[] | 节点型数据设置器 |  |
|
||||
| [StringSetter](./setterDetails/string) | string | 短文本型数据设置器，不可换行 |  |
|
||||
| StyleSetter || 样式设置器 |  |
|
||||
| [TextAreaSetter](./setterDetails/textArea) | string | 长文本型数据设置器，可换行 |  |
|
||||
| TimePicker | | 时间型数据设置器 ||
|
||||
| [VariableSetter](./setterDetails/variable) | any | 变量型数据设置器， |  |
|
||||
|
||||
| 预置 Setter | 返回类型 | 用途 | 截图 |
|
||||
| ---------------------------------------------- | ----------------------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| [ArraySetter](./setterDetails/array) | T[] | 列表数组行数据设置器 |  |
|
||||
| [BoolSetter](./setterDetails/behavior) | boolean | 布尔型数据设置器， |  |
|
||||
| ClassNameSetter | string | 样式名设置器 |  |
|
||||
| [ColorSetter](./setterDetails/color) | string | 颜色设置器 |  |
|
||||
| DateMonthSetter | | 日期型 - 月数据设置器 | |
|
||||
| DateRangeSetter | | 日期型数据设置器，可选择时间区间 | |
|
||||
| DateSetter | | 日期型数据设置器 | |
|
||||
| DateYearSetter | | 日期型 - 年数据设置器 | |
|
||||
| [EventSetter](./setterDetails/event) | function | 事件绑定设置器 |  |
|
||||
| [IconSetter](./setterDetails/icon) | string | 图标设置器 |  |
|
||||
| [FunctionSetter](./setterDetails/function) | function | 函数型数据设置器 |  |
|
||||
| JsonSetter | object | json 型数据设置器 |  |
|
||||
| [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 |  |
|
||||
| [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 |  |
|
||||
| ObjectSetter | object | 对象数据设置器，一般内嵌在 ArraySetter 中 | |
|
||||
| [RadioGroupSetter](./setterDetails/radioGroup) | string | number | boolean | 枚举型数据设置器，采用 tab 选择的形式展现 | |  |
|
||||
| [SelectSetter](./setterDetails/select) | string | number | boolean | 枚举型数据设置器，采用下拉的形式展现 |  |
|
||||
| [SlotSetter](./setterDetails/slot) | Element | Element[] | 节点型数据设置器 |  |
|
||||
| [StringSetter](./setterDetails/string) | string | 短文本型数据设置器，不可换行 |  |
|
||||
| StyleSetter | | 样式设置器 |  |
|
||||
| [TextAreaSetter](./setterDetails/textArea) | string | 长文本型数据设置器，可换行 |  |
|
||||
| TimePicker | | 时间型数据设置器 | |
|
||||
| [VariableSetter](./setterDetails/variable) | any | 变量型数据设置器， |  |
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
title: 物料扩展
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
## 物料简述
|
||||
|
||||
物料是页面搭建的原料，按照粒度可分为组件、区块和模板：
|
||||
|
||||
1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
|
||||
@ -10,8 +12,11 @@ sidebar_position: 1
|
||||
3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；
|
||||
|
||||
低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。
|
||||
|
||||
## 资产包配置
|
||||
|
||||
### 什么是低代码资产包
|
||||
|
||||
|
||||
在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。
|
||||
**_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_**
|
||||
@ -32,32 +37,41 @@ export interface ComponentSort {
|
||||
export interface RemoteComponentDescription {
|
||||
exportName: string; // 组件描述导出名字，可以通过 window[exportName] 获取到组件描述的 Object 内容；
|
||||
url: string; // 组件描述的资源链接；
|
||||
package: { // 组件 (库) 的 npm 信息；
|
||||
package: {
|
||||
// 组件 (库) 的 npm 信息；
|
||||
npm: string;
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
资产包协议 TS 描述
|
||||
|
||||
### 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)
|
||||
|
||||
这份资产包里的物料是我们内部沉淀出的，用户可以通过这套资产包体验引擎提供的搭建、配置能力。
|
||||
**_在项目中正常注册资产包：_**
|
||||
|
||||
```typescript
|
||||
import { material } from '@alilc/lowcode-engine';
|
||||
// 以任何方式引入 assets
|
||||
material.setAssets(assets);
|
||||
```
|
||||
|
||||
**_以支持调试的方式注册资产包：_**
|
||||
|
||||
> 这样启动并部署出来的项目，可以通过在预览地址加上 ?debug 来调试本地物料。
|
||||
> 例如：
|
||||
>
|
||||
> - 通过插件初始化一个物料
|
||||
> - 按照参考文章配置物料支持调试
|
||||
> - 启动物料
|
||||
> - 访问：[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
|
||||
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，我们就能做到配置资产包：
|
||||
|
||||
- packages 对象：我们需要在其中定义这个包的获取方式，如果不定义，就不会被低代码引擎动态加载并对应上组件实例。定义方式是 UMD 的包，低代码引擎会尝试在 window 上寻找对应 library 的实例；
|
||||
- components 对象：我们需要在其中定义物料描述，物料描述我们将在下一节继续讲解。
|
||||
|
||||
## 物料描述配置
|
||||
|
||||
### 什么是物料描述
|
||||
|
||||
在低代码平台中，用户是不同的，有可能是开发、测试、运营、设计，也有可能是销售、行政、HR 等等各种角色。他们大多数不具备专业的前端开发知识，对于低代码平台来说，我们使用组件的流程如下：
|
||||
|
||||
1. 用户通过拖拽/选择组件，在画布中看到组件；
|
||||
@ -88,7 +106,9 @@ await material.setAssets(await injectAssets(assets));
|
||||
3. 能力配置/体验增强：推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。
|
||||
|
||||
因此，我们设计了[**《中后台低代码组件描述协议》**](/site/docs/specs/material-spec)来描述一个低代码编辑器中可被配置的内容。
|
||||
|
||||
### Demo 中的物料描述
|
||||
|
||||
我们可以从 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)；
|
||||
@ -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)；
|
||||
|
||||
**_引擎中，会尝试调用对应 meta 文件，并注入到全局：_**
|
||||
|
||||
```tsx
|
||||
const src = 'https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.5/build/lowcode/meta.js';
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
```
|
||||
|
||||
然后在 window 上就能拿到对应的物料描述内容了：
|
||||
|
||||
手工配置物料描述时，可以用这样的方式参考一下 Demo 中的物料描述是如何实现的。
|
||||
|
||||
### 手工配置物料描述
|
||||
|
||||
详见：“物料描述详解”章节。
|
||||
|
||||
## 物料的低代码开发
|
||||
|
||||
> _**注意：引擎提供的 cli 并未对 windows 系统做适配，windows 环境必须使用 **_[_**WSL**_](https://docs.microsoft.com/zh-cn/windows/wsl/install)_**，其他终端不保证能正常运行**_
|
||||
|
||||
您可以通过本节内容，完成一个组件在低代码编辑器中的配置和调试。
|
||||
|
||||
### 前言（必读）
|
||||
引擎提供的物料开发脚手架内置了**_入料模块_**，初始化的时候会自动根据源码解析出一份_**低代码描述**_，但是从源码解析出来的低代码描述让用户直接使用是不够精细的，因为源码包含的信息不够，它没办法完全包含配置项的交互；
|
||||
|
||||
引擎提供的物料开发脚手架内置了**_入料模块_**，初始化的时候会自动根据源码解析出一份**_低代码描述_**，但是从源码解析出来的低代码描述让用户直接使用是不够精细的，因为源码包含的信息不够，它没办法完全包含配置项的交互；
|
||||
|
||||
比如设计师出了上面的设计稿，这里面除了有哪些 props 可被配置，通过哪个设置器配置，还包含了 props 之间的聚合、排序，甚至有自定义 setter，这些信息源码里是不具备的，需要在低代码描述里进行开发；
|
||||
**_因此我们建议只把 cli 初始化的低代码描述作为启动，要根据用户习惯对配置项进行设计，然后人工地去开发调试直接的低代码描述。_**
|
||||
|
||||
### 新开发组件
|
||||
|
||||
#### 组件项目初始化
|
||||
|
||||
```bash
|
||||
npm init @alilc/element your-material-name
|
||||
```
|
||||
|
||||
#### 选择组件类型
|
||||
> 组件 -> <组件组织方式>
|
||||
|
||||
> 组件 -> 组件组织方式
|
||||
|
||||
|
||||
这里我们选择 react-组件库，之后便生出我们的组件库项目，目录结构如下：
|
||||
|
||||
```
|
||||
my-materials
|
||||
├── README.md
|
||||
@ -146,7 +180,9 @@ my-materials
|
||||
│ │ └── package.json // 【必选】
|
||||
└── └── ExampleComponent2 // 业务组件2
|
||||
```
|
||||
|
||||
#### 组件开发与调试
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
@ -157,54 +193,68 @@ npm run lowcode:dev
|
||||
# 构建低代码产物
|
||||
npm run lowcode:build
|
||||
```
|
||||
|
||||
执行上述命令后会在组件 (库) 根目录生成一个 `lowcode` 文件夹，里面会包含每个组件的低代码描述：
|
||||
|
||||
|
||||
在 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（上一个章节介绍的设置器，也可以定制设置器用到物料中）；
|
||||
- 新增组件配置项;
|
||||
- 更改当前配置项；
|
||||
|
||||
#### 配置示例
|
||||
|
||||
隐藏一个 prop
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: 'dataSource',
|
||||
condition: () => false,
|
||||
}
|
||||
```
|
||||
|
||||
展示样式
|
||||
|
||||
```typescript
|
||||
{
|
||||
name: 'dataSource',
|
||||
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 应置于 lowcode 而非 lowcode/<component-name\> 目录下
|
||||
|
||||
注意：如果是单组件，而非组件库模式的话，view.tsx 应置于 lowcode 而非 `lowcode/<component-name>` 目录下
|
||||
|
||||
#### 发布组件
|
||||
|
||||
```bash
|
||||
# 在组件根目录下，执行
|
||||
$ npm publish
|
||||
```
|
||||
|
||||
### 现存组件低代码化
|
||||
|
||||
组件低代码化是指，在引入低代码平台之前，我们大多数都是使用源码开发的组件，也就是 ProCode 组件。
|
||||
|
||||
在引入低代码平台之后，原来的源码组件是需要转化为低代码物料，这样才能在低代码平台进行消费。
|
||||
|
||||
所以接下来会说明，对于已有的源码组件，我们如何把它低代码化。
|
||||
|
||||
#### 配置低代码开发环境
|
||||
|
||||
在您的组件开发环境中，安装 [build-scripts](https://github.com/ice-lab/build-scripts) 和它的低代码开发插件：
|
||||
|
||||
```bash
|
||||
npm install -D @alifd/build-plugin-lowcode @alib/build-scripts --save-dev
|
||||
```
|
||||
|
||||
新增 build-scripts 配置文件：build.lowcode.js
|
||||
|
||||
```javascript
|
||||
@ -214,21 +264,24 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
[
|
||||
"@alifd/build-plugin-lowcode",
|
||||
'@alifd/build-plugin-lowcode',
|
||||
{
|
||||
engineScope: '@alilc',
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
在 package.json 中定义低代码开发相关命令
|
||||
|
||||
```javascript
|
||||
"lowcode:dev": "build-scripts start --config ./build.lowcode.js",
|
||||
"lowcode:build": "build-scripts build --config ./build.lowcode.js",
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 开发调试
|
||||
|
||||
```bash
|
||||
@ -246,20 +299,24 @@ npm run lowcode:build
|
||||
```
|
||||
|
||||
#### 发布组件
|
||||
|
||||
```bash
|
||||
# 在组件根目录下，执行
|
||||
npm publish
|
||||
```
|
||||
|
||||
## 在项目中引入组件 (库)
|
||||
|
||||
> 以下内容可观看[《阿里巴巴低代码引擎项目实战 (3)-自定义组件接入》](https://www.bilibili.com/video/BV1dZ4y1m76S/)直播回放
|
||||
|
||||
对于平台或者用户来说，可能所需要的组件集合是不同的。如果需要自定义组件集合，就需要定制资产包，定制的资产包是配置了一系列组件的，将这份资产包用于引擎即可在引擎中使用自定义的组件集合。
|
||||
|
||||
### 管理一份资产包
|
||||
|
||||
项目中使用的组件相关资源都需要在资产包中定义，那么我们自己开发的组件库如果要在项目中使用，只需要把组件构建好的相关资源 merge 到 assets.json 中就可以；
|
||||
|
||||
#### 自定义组件加入到资产包
|
||||
|
||||
通过官方脚手架自定义组件构建发布之后，npm 包里会出现一个 `build/lowcode/assets-prod.json`文件，我们只需要把该文件的内容 merge 到项目的 assets.json 中就可以；
|
||||
|
||||
#### 资产包托管
|
||||
@ -269,24 +326,29 @@ npm publish
|
||||
- 再高级一点的做法是实现一个资产包管理的服务，能够通过用户界面去更新资产包的内容；
|
||||
|
||||
### 在项目中引入资产包
|
||||
|
||||
```typescript
|
||||
import { material, plugins } from '@alilc/lowcode-engine';
|
||||
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
|
||||
|
||||
// 动态加载 assets
|
||||
plugins.register((ctx: IPublicModelPluginContext) => {
|
||||
return {
|
||||
name: 'ext-assets',
|
||||
async init() {
|
||||
try {
|
||||
// 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入，还是通过其他途径如直接引入物料描述
|
||||
const res = await window.fetch('https://fusion.alicdn.com/assets/default@0.1.95/assets.json');
|
||||
const assets = await res.text();
|
||||
material.setAssets(assets);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
}
|
||||
}).catch(err => console.error(err));
|
||||
plugins
|
||||
.register((ctx: IPublicModelPluginContext) => {
|
||||
return {
|
||||
name: 'ext-assets',
|
||||
async init() {
|
||||
try {
|
||||
// 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入，还是通过其他途径如直接引入物料描述
|
||||
const res = await window.fetch(
|
||||
'https://fusion.alicdn.com/assets/default@0.1.95/assets.json',
|
||||
);
|
||||
const assets = await res.text();
|
||||
material.setAssets(assets);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
};
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
```
|
||||
|
||||
@ -45,7 +45,7 @@ n 14.17.0
|
||||
|
||||
### 下载 Demo
|
||||
|
||||
可以前往 github（<https://github.com/alibaba/lowcode-demo>）将 DEMO 下载到本地。
|
||||
可以前往 Github [lowcode-demo](https://github.com/alibaba/lowcode-demo)将 DEMO 下载到本地。
|
||||
|
||||
#### git clone
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
title: 《低代码引擎资产包协议规范》
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
## 1 介绍
|
||||
|
||||
### 1.1 本协议规范涉及的问题域
|
||||
@ -75,26 +76,26 @@ sidebar_position: 2
|
||||
|
||||
定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
|
||||
|
||||
| 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 |
|
||||
| -------------------- | --------------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| packages[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 |
|
||||
| packages[].title? | 资源标题 | String | A | 资源标题 |
|
||||
| packages[].package | npm 包名 | String | A | 组件资源唯一标识 |
|
||||
| packages[].version | npm 包版本号 | String | A | 组件资源版本号 |
|
||||
| packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode |
|
||||
| packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） |
|
||||
| packages[].deps | 当前资源包的依赖资源的唯一标识列表 | Array<String\> | A | 唯一标识为 id 或者 package 对应的值 |
|
||||
| packages[].library | 作为全局变量引用时的名称，用来定义全局变量名 | String | A | 低代码引擎通过该字段获取组件实例 |
|
||||
| packages[].editUrls | 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css | Array<String\> | A | 低代码引擎编辑器会加载这些 url |
|
||||
| packages[].urls | 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css | Array<String\> | AA | 低代码引擎渲染模块会加载这些 url |
|
||||
| packages[].advancedEditUrls | 组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls |
|
||||
| packages[].advancedUrls | 组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls |
|
||||
| packages[].external | 当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念) | Boolean | AAA | 某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源 |
|
||||
| packages[].loadEnv | 指定当前资源加载的环境 | Array<String\> | AAA | 主要用于指定 external 资源加载的环境，取值为 design(设计态)、runtime(预览态) 中的一个或多个 |
|
||||
| packages[].exportSourceId | 标识当前 package 内容是从哪个 package 导出来的 | String | AAA | 此时 urls 无效 |
|
||||
| packages[].exportSourceLibrary | 标识当前 package 是从 window 上的哪个属性导出来的 | String | AAA | exportSourceId 的优先级高于exportSourceLibrary ,此时 urls 无效 |
|
||||
| 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[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 |
|
||||
| packages[].title? | 资源标题 | String | A | 资源标题 |
|
||||
| packages[].package | npm 包名 | String | A | 组件资源唯一标识 |
|
||||
| packages[].version | npm 包版本号 | String | A | 组件资源版本号 |
|
||||
| packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode |
|
||||
| packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） |
|
||||
| packages[].deps | 当前资源包的依赖资源的唯一标识列表 | `Array<String>` | A | 唯一标识为 id 或者 package 对应的值 |
|
||||
| packages[].library | 作为全局变量引用时的名称，用来定义全局变量名 | String | A | 低代码引擎通过该字段获取组件实例 |
|
||||
| packages[].editUrls | 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css | `Array<String>` | A | 低代码引擎编辑器会加载这些 url |
|
||||
| packages[].urls | 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css | `Array<String>` | AA | 低代码引擎渲染模块会加载这些 url |
|
||||
| packages[].advancedEditUrls | 组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls |
|
||||
| packages[].advancedUrls | 组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls |
|
||||
| packages[].external | 当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念) | Boolean | AAA | 某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源 |
|
||||
| packages[].loadEnv | 指定当前资源加载的环境 | `Array<String>` | AAA | 主要用于指定 external 资源加载的环境，取值为 design(设计态)、runtime(预览态) 中的一个或多个 |
|
||||
| packages[].exportSourceId | 标识当前 package 内容是从哪个 package 导出来的 | String | AAA | 此时 urls 无效 |
|
||||
| packages[].exportSourceLibrary | 标识当前 package 是从 window 上的哪个属性导出来的 | String | AAA | exportSourceId 的优先级高于exportSourceLibrary ,此时 urls 无效 |
|
||||
| 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 的导出内容 |
|
||||
|
||||
描述举例：
|
||||
|
||||
@ -272,25 +273,25 @@ sidebar_position: 2
|
||||
"library": "Atest1"
|
||||
},
|
||||
{
|
||||
"library":"UiPaaSServerless3",
|
||||
"advancedUrls":{
|
||||
"default":[
|
||||
"https://g.alicdn.com/legao-comp/serverless3/1.1.0/env-staging-d224466e-0614-497d-8cd5-e4036dc50b70/main.js"
|
||||
]
|
||||
"library": "UiPaaSServerless3",
|
||||
"advancedUrls": {
|
||||
"default": [
|
||||
"https://g.alicdn.com/legao-comp/serverless3/1.1.0/env-staging-d224466e-0614-497d-8cd5-e4036dc50b70/main.js"
|
||||
]
|
||||
},
|
||||
"id":"UiPaaSServerless3-view",
|
||||
"type":"procode",
|
||||
"version":"1.0.0"
|
||||
"id": "UiPaaSServerless3-view",
|
||||
"type": "procode",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
{
|
||||
"package":"react-color",
|
||||
"library":"ReactColor",
|
||||
"id":"react-color",
|
||||
"type":"procode",
|
||||
"version":"2.19.3",
|
||||
"async":true,
|
||||
"exportMode":"functionCall",
|
||||
"exportSourceId":"UiPaaSServerless3-view"
|
||||
"package": "react-color",
|
||||
"library": "ReactColor",
|
||||
"id": "react-color",
|
||||
"type": "procode",
|
||||
"version": "2.19.3",
|
||||
"async": true,
|
||||
"exportMode": "functionCall",
|
||||
"exportSourceId": "UiPaaSServerless3-view"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@ sidebar_position: 0
|
||||
- utils { Array } 工具类扩展映射关系
|
||||
- i18n { Object } 国际化语料
|
||||
- constants { Object } 应用范围内的全局常量
|
||||
- css { string } 应用范围内的全局样式
|
||||
- css { String } 应用范围内的全局样式
|
||||
- config: { Object } 当前应用配置信息
|
||||
- meta: { Object } 当前应用元数据信息
|
||||
- dataSource: { Array } 当前应用的公共数据源
|
||||
@ -427,18 +427,18 @@ import { Input as CustomInput } from '@ali/custom/lib/input';
|
||||
|
||||
##### 2.3.1.4 ComponentDataSourceItem 对象描述
|
||||
|
||||
| 参数 | 说明 | 类型 | 支持变量 | 默认值 | 备注 |
|
||||
| -------------- | ---------------------------- | ---------------------------------------------------- | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| id | 数据请求 ID 标识 | String | - | - | |
|
||||
| isInit | 是否为初始数据 | Boolean | ✅ | true | 值为 true 时，将在组件初始化渲染时自动发送当前数据请求 |
|
||||
| isSync | 是否需要串行执行 | Boolean | ✅ | false | 值为 true 时，当前请求将被串行执行 |
|
||||
| type | 数据请求类型 | String | - | fetch | 支持四种类型：fetch/mtop/jsonp/custom |
|
||||
| shouldFetch | 本次请求是否可以正常请求 | (options: ComponentDataSourceItemOptions) => boolean | - | `() => true` | function 参数参考 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
|
||||
| willFetch | 单个数据结果请求参数处理函数 | Function | - | options => options | 只接受一个参数（options），返回值作为请求的 options，当处理异常时，使用原 options。也可以返回一个 Promise，resolve 的值作为请求的 options，reject 时，使用原 options |
|
||||
| requestHandler | 自定义扩展的外部请求处理器 | Function | - | - | 仅 type='custom' 时生效 |
|
||||
| dataHandler | request 成功后的回调函数 | Function | - | `response => response.data` | 参数：请求成功后 promise 的 value 值 | |
|
||||
| errorHandler | request 失败后的回调函数 | Function | - | - | 参数：请求出错 promise 的 error 内容 |
|
||||
| options {} | 请求参数 | **ComponentDataSourceItemOptions** | - | - | 每种请求类型对应不同参数，详见 | 每种请求类型对应不同参数，详见 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
|
||||
| 参数 | 说明 | 类型 | 支持变量 | 默认值 | 备注 |
|
||||
| -------------- | ---------------------------- | ------------------------------------------------------ | -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| id | 数据请求 ID 标识 | String | - | - | |
|
||||
| isInit | 是否为初始数据 | Boolean | ✅ | true | 值为 true 时，将在组件初始化渲染时自动发送当前数据请求 |
|
||||
| isSync | 是否需要串行执行 | Boolean | ✅ | false | 值为 true 时，当前请求将被串行执行 |
|
||||
| type | 数据请求类型 | String | - | fetch | 支持四种类型：fetch/mtop/jsonp/custom |
|
||||
| shouldFetch | 本次请求是否可以正常请求 | `(options: ComponentDataSourceItemOptions) => boolean` | - | `() => true` | function 参数参考 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
|
||||
| willFetch | 单个数据结果请求参数处理函数 | Function | - | `options => options` | 只接受一个参数（options），返回值作为请求的 options，当处理异常时，使用原 options。也可以返回一个 Promise，resolve 的值作为请求的 options，reject 时，使用原 options |
|
||||
| requestHandler | 自定义扩展的外部请求处理器 | Function | - | - | 仅 type='custom' 时生效 |
|
||||
| dataHandler | request 成功后的回调函数 | Function | - | `response => response.data` | 参数：请求成功后 promise 的 value 值 |
|
||||
| errorHandler | request 失败后的回调函数 | Function | - | - | 参数：请求出错 promise 的 error 内容 |
|
||||
| options | 请求参数 | **ComponentDataSourceItemOptions** | - | - | 每种请求类型对应不同参数，详见 [ComponentDataSourceItemOptions 对象描述](#2315-componentdatasourceitemoptions-对象描述) |
|
||||
|
||||
**关于 dataHandler 与 errorHandler 的细节说明：**
|
||||
|
||||
@ -1051,7 +1051,7 @@ type Ti18n = {
|
||||
| _this_.dataSourceMap | 三种容器实例的数据源对象 Map | Object | 单个请求的 id 为 key, value 详见下文 [DataSourceMapItem 结构描述](#datasourcemapitem-结构描述) |
|
||||
| _this_.reloadDataSource | 三种容器实例的初始化异步数据请求重载 | Function | 返回 Promise |
|
||||
| **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.component** | 当前低代码业务组件容器的实例对象 | Class Instance | |
|
||||
| _this.component_.props | 读取低代码业务组件容器的外部传入的 props | Object | |
|
||||
@ -1333,7 +1333,7 @@ path（页面路径）是浏览器URL的组成部分，同时大部分网站的
|
||||
**redirect** 字段有三种填入类型，分别是 `String`、`Object`、`Function`：
|
||||
|
||||
1. 字符串(`String`)格式下默认处理为重定向到路径，支持传入 '/xxx'、'/xxx?ab=c'。
|
||||
2. 对象(`String`)格式下可传入路由对象，如 { name: 'xxx' }、{ path: '/xxx' }，可重定向到对应的路由对象。
|
||||
2. 对象(`String`)格式下可传入路由对象，如 `{ name: 'xxx' }`、`{ path: '/xxx' }`，可重定向到对应的路由对象。
|
||||
3. 函数`Function`格式为`(to) => Route`，它的入参为当前路由项信息，支持返回一个 Route 对象或者字符串，存在一些特殊情况，在重定向的时候需要对重定向之后的路径进行处理的情况下，需要使用函数声明。
|
||||
|
||||
```json
|
||||
@ -1497,13 +1497,13 @@ webpack.config.js # 项目工程配置，包含插件配置及自定义 webpack
|
||||
|
||||
##### Router 结构说明
|
||||
|
||||
| API | 函数签名 | 说明 |
|
||||
| ---------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息，RouteLocation 结构详见下面说明 |
|
||||
| push | (target: string \| Route) => void | 路由跳转方法，跳转到指定的路径或者 Route |
|
||||
| replace | (target: string \| Route) => void | 路由跳转方法，与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 |
|
||||
| beforeRouteLeave | (guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void | 路由跳转前的守卫方法，详见下面说明 |
|
||||
| afterRouteChange | (fn: (to: RouteLocation, from: RouteLocation) => void) => void | 路由跳转后的钩子函数，会在每次路由改变后执行 |
|
||||
| API | 函数签名 | 说明 |
|
||||
| ---------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息，RouteLocation 结构详见下面说明 |
|
||||
| push | `(target: string | Route) => void` | 路由跳转方法，跳转到指定的路径或者 Route |
|
||||
| replace | `(target: string | Route) => void` | 路由跳转方法，与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 |
|
||||
| beforeRouteLeave | `(guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void` | 路由跳转前的守卫方法，详见下面说明 |
|
||||
| afterRouteChange | `(fn: (to: RouteLocation, from: RouteLocation) => void) => void` | 路由跳转后的钩子函数，会在每次路由改变后执行 |
|
||||
|
||||
##### 3.2.1.1 RouteLocation（路由信息）结构说明
|
||||
|
||||
@ -1575,11 +1575,11 @@ webpack.config.js # 项目工程配置，包含插件配置及自定义 webpack
|
||||
|
||||
#### 3.2.3 国际化相关 API
|
||||
|
||||
| API | 函数签名 | 说明 |
|
||||
| -------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
|
||||
| this.i18n | (i18nKey: string, params?: { [paramName: string]: string; }) => string | i18nKey 是语料的标识符，params 可选，是用来做模版字符串替换的。返回语料字符串 |
|
||||
| this.getLocale | () => string | 返回当前环境语言 code |
|
||||
| this.setLocale | (locale: string) => void | 设置当前环境语言 code |
|
||||
| API | 函数签名 | 说明 |
|
||||
| -------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
|
||||
| this.i18n | `(i18nKey: string, params?: { [paramName: string]: string; }) => string` | i18nKey 是语料的标识符，params 可选，是用来做模版字符串替换的。返回语料字符串 |
|
||||
| this.getLocale | `() => string` | 返回当前环境语言 code |
|
||||
| this.setLocale | `(locale: string) => void` | 设置当前环境语言 code |
|
||||
|
||||
**使用范例：**
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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
89
docs/docusaurus.config.ts
Normal 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;
|
||||
@ -3,6 +3,7 @@
|
||||
"version": "1.2.35",
|
||||
"description": "低代码引擎版本化文档",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"files": [
|
||||
"build"
|
||||
],
|
||||
@ -20,21 +21,23 @@
|
||||
"syncOss": "node ./scripts/sync-oss.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.2.0",
|
||||
"@docusaurus/preset-classic": "^2.2.0",
|
||||
"@docusaurus/core": "^3.1.1",
|
||||
"@docusaurus/preset-classic": "^3.1.1",
|
||||
"@docusaurus/plugin-content-docs": "^3.1.1",
|
||||
"@easyops-cn/docusaurus-search-local": "^0.32.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@mdx-js/react": "^3.0.1",
|
||||
"axios": "^1.1.3",
|
||||
"clsx": "^1.2.1",
|
||||
"fs-extra": "^10.1.0",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"prism-react-renderer": "^2.3.0",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "^2.2.0",
|
||||
"@tsconfig/docusaurus": "^1.0.5",
|
||||
"typescript": "^4.7.4"
|
||||
"@docusaurus/module-type-aliases": "^3.1.1",
|
||||
"@docusaurus/tsconfig": "^3.1.1",
|
||||
"@docusaurus/types": "^3.1.1",
|
||||
"fast-glob": "^3.3.2",
|
||||
"gray-matter": "^4.0.3"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
@ -43,13 +46,13 @@
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
"last 3 chrome version",
|
||||
"last 3 firefox version",
|
||||
"last 5 safari version"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.14"
|
||||
"node": ">=18.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const glob = require('glob');
|
||||
const matter = require('gray-matter');
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import * as glob from 'fast-glob';
|
||||
import matter from 'gray-matter';
|
||||
|
||||
module.exports = function getDocsFromDir(dir, cateList) {
|
||||
export default function getDocsFromDir(dir: string, cateList: any[] = []) {
|
||||
// docs/
|
||||
const baseDir = path.join(__dirname, '../docs/');
|
||||
const docsDir = path.join(baseDir, dir);
|
||||
@ -43,7 +43,7 @@ module.exports = function getDocsFromDir(dir, cateList) {
|
||||
return id;
|
||||
});
|
||||
|
||||
(cateList || []).forEach((item) => {
|
||||
cateList.forEach((item) => {
|
||||
const { dir, subCategory, ...otherConfig } = item;
|
||||
const indexList = glob.sync('index.md?(x)', {
|
||||
cwd: path.join(baseDir, dir),
|
||||
@ -63,4 +63,4 @@ module.exports = function getDocsFromDir(dir, cateList) {
|
||||
});
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
#!/usr/bin/env node
|
||||
const http = require('http');
|
||||
const package = require('../package.json');
|
||||
const { version, name } = package;
|
||||
import http from 'node:http';
|
||||
import packageJson from '../package.json';
|
||||
|
||||
const { version, name } = packageJson;
|
||||
const options = {
|
||||
method: 'PUT',
|
||||
hostname: 'uipaas-node.alibaba-inc.com',
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
// 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": {
|
||||
"baseUrl": "."
|
||||
"baseUrl": ".",
|
||||
"resolveJsonModule": true
|
||||
}
|
||||
}
|
||||
|
||||
13
package.json
13
package.json
@ -13,6 +13,7 @@
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "pnpm --filter playground dev",
|
||||
"build": "./scripts/build.sh",
|
||||
"build:npm": "lerna run build --stream",
|
||||
"build:umd": "lerna run build:umd --stream",
|
||||
@ -48,24 +49,24 @@
|
||||
"devDependencies": {
|
||||
"@alilc/build-plugin-lce": "^0.0.5",
|
||||
"@alilc/lowcode-test-mate": "^1.0.1",
|
||||
"@changesets/cli": "^2.27.1",
|
||||
"@types/node": "^20.11.30",
|
||||
"@types/react-router": "5.1.18",
|
||||
"babel-jest": "^26.5.2",
|
||||
"del": "^6.1.1",
|
||||
"execa": "^5.1.1",
|
||||
"execa": "^8.0.1",
|
||||
"f2elint": "^4.2.1",
|
||||
"gulp": "^4.0.2",
|
||||
"husky": "^7.0.4",
|
||||
"lerna": "^4.0.0",
|
||||
"husky": "^9.0.11",
|
||||
"typescript": "^5.4.2",
|
||||
"yarn": "^1.22.17",
|
||||
"prettier": "^3.2.5",
|
||||
"rimraf": "^3.0.2",
|
||||
"rimraf": "^5.0.2",
|
||||
"rollup": "^4.13.0",
|
||||
"vite": "^5.1.6",
|
||||
"vitest": "^1.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
"node": ">=18"
|
||||
},
|
||||
"repository": "git@github.com:alibaba/lowcode-engine.git"
|
||||
}
|
||||
|
||||
12
playground/index.html
Normal file
12
playground/index.html
Normal 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
8
playground/package.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "playground",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite"
|
||||
}
|
||||
}
|
||||
4
pnpm-workspace.yaml
Normal file
4
pnpm-workspace.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
packages:
|
||||
- 'runtime/*'
|
||||
- 'playground'
|
||||
- 'docs'
|
||||
@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"paths": {
|
||||
"@alilc/*": ["runtime/*"],
|
||||
"@alilc/renderer-core": ["runtime/renderer-core"],
|
||||
"@alilc/runtime-router": ["runtime/router"]
|
||||
}
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"paths": {
|
||||
"@alilc/*": ["runtime/*"]
|
||||
"@alilc/renderer-core": ["runtime/renderer-core"],
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user