fix: doc format issues, replace wrong links, replace image cdn

alibaba · Dec 1, 2022 · f3e4d28 · f3e4d28
1 parent 51f69de
commit f3e4d28
Show file tree

Hide file tree

Showing 79 changed files with 1,757 additions and 1,240 deletions.
diff --git a/docs/community/issue.md b/docs/community/issue.md
@@ -65,7 +65,7 @@ window.AliLowCodeEngine.project.openDocument('docl4xkca5b')
 
 期望：
 
-- 页面中的xxx部分和预期不符合，期望的效果是 xxx
+- 页面中的 xxx 部分和预期不符合，期望的效果是 xxx
 
 #### 【支持稍慢】通过线上 demo + 完整操作步骤可复现
 **示例**

diff --git a/docs/docs/api/common.md b/docs/docs/api/common.md
@@ -43,7 +43,7 @@ common.utils.startTransaction(() => {
 ```
 
 ### createIntl
-i18n相关工具
+i18n 相关工具
 *引擎版本 >= 1.0.17
 ```typescript
 import { common } from '@alilc/lowcode-engine';

diff --git a/docs/docs/api/datasource.md b/docs/docs/api/datasource.md
@@ -4,7 +4,7 @@ sidebar_position: 12
 ---
 ### 请求数据源
 ```javascript
-// 请求userList （userList在数据源面板中定义）
+// 请求 userList（userList 在数据源面板中定义）
 
 this.dataSourceMap['userList'].load({
 	data: {}
@@ -22,7 +22,7 @@ const { userList } = this.state;
 // 获取数据源面板中定义的值
 const { user } = this.state;
 
-// 修改state值
+// 修改 state 值
 this.setState({
 	user: {}
 });

diff --git a/docs/docs/api/event.md b/docs/docs/api/event.md
@@ -74,7 +74,7 @@ import { event } from '@alilc/lowcode-engine';
 class SetterB extends React.Component {
   bindFunction = () => {
     const { field, value } = this.props;
-    // 这里展示的和插件进行通信, 事件规则是插件名 + 方法
+    // 这里展示的和插件进行通信，事件规则是插件名 + 方法
     event.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
   }
 }

diff --git a/docs/docs/api/init.md b/docs/docs/api/init.md
@@ -41,7 +41,7 @@ interface EngineOptions {
    */
   enableCanvasLock?: boolean;
   /**
-   * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效， 默认值为：false
+   * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效，默认值为：false
    */
   enableLockedNodeSetting?: boolean;
   /**

diff --git a/docs/docs/api/logger.md b/docs/docs/api/logger.md
@@ -35,7 +35,7 @@ import { logger } from '@alilc/lowcode-engine';
 
 // 内部实现：logger = getLogger({ level: 'warn', bizName: 'designer:pluginManager' })
 
-// 若在url query中增加 `__logConf__` 可改变打印日志级别和限定业务类型日志
+// 若在 url query 中增加 `__logConf__` 可改变打印日志级别和限定业务类型日志
 // 默认：__logConf__=warn:*
 logger.log('log');          // 不输出
 logger.warn('warn');        // 输出

diff --git a/docs/docs/api/material.md b/docs/docs/api/material.md
@@ -12,7 +12,7 @@ sidebar_position: 2
 # 方法签名（functions）
 ## 资产包
 ### setAssets
-设置「[资产包](https://www.yuque.com/lce/doc/vgcyf1)」结构
+设置「[资产包](/site/docs/specs/lowcode-spec#2-协议结构)」结构
 
 **类型定义**
 ```typescript

diff --git a/docs/docs/api/setters.md b/docs/docs/api/setters.md
@@ -83,7 +83,7 @@ interface AltStringSetterProps {
   value: string;
   // 默认值
   initialValue: string;
-  // setter唯一输出
+  // setter 唯一输出
   onChange: (val: string) => void;
   // AltStringSetter 特殊配置
   placeholder: string;
@@ -254,7 +254,7 @@ interface AltStringSetterProps {
   value: string;
   // 默认值
   initialValue: string;
-  // setter唯一输出
+  // setter 唯一输出
   onChange: (val: string) => void;
   // AltStringSetter 特殊配置
   placeholder: string;

diff --git a/docs/docs/api/skeleton.md b/docs/docs/api/skeleton.md
@@ -3,23 +3,57 @@ title: skeleton - 面板 API
 sidebar_position: 1
 ---
 ## 模块简介
-面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1645442085447-d1822e7f-9e5a-4e06-a770-04b1023d5daf.png#clientId=u9aca70b6-1a98-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=498&id=u2dd3deb2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=996&originWidth=1780&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1549904&status=done&style=none&taskId=u28659b69-981c-416e-bed6-b2f06b8e6fc&title=&width=890)<br />页面上可以扩展的区域共 5 个，具体如下：<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1645431386085-2710d33d-0652-450a-a993-c804368da1ce.png#clientId=u1724eb73-4c0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=487&id=ud138f866&margin=%5Bobject%20Object%5D&name=image.png&originHeight=974&originWidth=1892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=228235&status=done&style=none&taskId=u265d50a5-3700-406e-84b2-0158ebadaae&title=&width=946)
+面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。
+
+![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1645442085447-d1822e7f-9e5a-4e06-a770-04b1023d5daf.png#clientId=u9aca70b6-1a98-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=498&id=u2dd3deb2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=996&originWidth=1780&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1549904&status=done&style=none&taskId=u28659b69-981c-416e-bed6-b2f06b8e6fc&title=&width=890)
+
+页面上可以扩展的区域共 5 个，具体如下：
+![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1645431386085-2710d33d-0652-450a-a993-c804368da1ce.png#clientId=u1724eb73-4c0c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=487&id=ud138f866&margin=%5Bobject%20Object%5D&name=image.png&originHeight=974&originWidth=1892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=228235&status=done&style=none&taskId=u265d50a5-3700-406e-84b2-0158ebadaae&title=&width=946)
 ### 基本概念
-#### 扩展区域位置(area)
+#### 扩展区域位置 (area)
 ##### topArea
-展示在设计器的顶部区域，常见的相关区域的插件主要是：<br />1）注册设计器 Logo；<br />2）设计器操作回退和撤销按钮；<br />3）全局操作按钮，例如：保存、预览等；
+
+展示在设计器的顶部区域，常见的相关区域的插件主要是：
+1. 注册设计器 Logo；
+2. 设计器操作回退和撤销按钮；
+3. 全局操作按钮，例如：保存、预览等；
 ##### leftArea
-左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。<br />该区域相关插件的主要有：<br />1）大纲树展示，展示该设计器设计页面的大纲。<br />2）组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。<br />3）数据源面板<br />4）JS 等代码面板。<br />可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
+
+左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。
+
+该区域相关插件的主要有：
+1. 大纲树展示，展示该设计器设计页面的大纲。
+2. 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。
+3. 数据源面板
+4. JS 等代码面板。
+
+可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
+
 ##### centerArea
-画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：<br />1）画布大小修改<br />2）物料选中扩展区域修改
+
+画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：
+1. 画布大小修改
+2. 物料选中扩展区域修改
 ##### rightArea
+
 右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。
 ##### toolbar
+
 跟 topArea 类似，按需放置面板插件~
-#### 展示类型(type)
-展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为PanelDock、Widget、Dock，另有Panel类型目前不推荐使用。
+#### 展示类型 (type)
+
+展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为 PanelDock、Widget、Dock，另有 Panel 类型目前不推荐使用。
 ##### PanelDock
-PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。<br />下图是组件库插件的展示效果。<br />![Feb-08-2022 19-44-15.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644320663827-ee9c54a1-f684-40e2-8a6b-875103d04b31.gif#clientId=u221f0bd4-c19e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=555&id=u5292d9cc&margin=%5Bobject%20Object%5D&name=Feb-08-2022%2019-44-15.gif&originHeight=790&originWidth=1536&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1381641&status=done&style=stroke&taskId=ub28a13a4-3d80-4a02-bcaa-cc9d6127243&title=&width=1080)<br />其中右上角可以进行固定，可以对弹出的宽度做设定<br />接入可以参考代码
+
+PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。
+
+下图是组件库插件的展示效果。
+
+![Feb-08-2022 19-44-15.gif](https://img.alicdn.com/imgextra/i2/O1CN01i66G5O27bK37nlpxV_!!6000000007815-1-tps-1536-790.gif)
+
+其中右上角可以进行固定，可以对弹出的宽度做设定
+
+接入可以参考代码
 ```javascript
 import { skeleton } from "@alilc/lowcode-engine";
 
@@ -31,30 +65,35 @@ skeleton.add({
   props: {
     align: "left",
     icon: "wenjian",
-    description: "JS面板",
+    description: "JS 面板",
   },
   panelProps: {
     floatable: true, // 是否可浮动
     height: 300,
     hideTitleBar: false,
     maxHeight: 800,
     maxWidth: 1200,
-    title: "JS面板",
+    title: "JS 面板",
     width: 600,
   },
 });
 ```
 ##### Widget
-Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644320068765-47efc836-30c2-452f-8104-b98b1ea3533d.png#clientId=u221f0bd4-c19e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=51&id=P60UE&margin=%5Bobject%20Object%5D&name=image.png&originHeight=94&originWidth=1988&originalType=binary&ratio=1&rotation=0&showTitle=false&size=58410&status=done&style=stroke&taskId=u4eadd643-2e63-4be7-8736-b27b9c82b81&title=&width=1080)<br />接入可以参考代码：
+Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。
+
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01IRQIZp1m5AJPwBKDv_!!6000000004902-2-tps-1988-94.png)
+
+接入可以参考代码：
+
 ```javascript
 import {skeleton} from "@alilc/lowcode-engine";
 // 注册 logo 面板
 skeleton.add({
   area: "topArea",
   type: "Widget",
   name: "logo",
-  content: Logo, // Widget 组件实例
-  contentProps: { //  Widget 插件props
+  content: Logo,  // Widget 组件实例
+  contentProps: { // Widget 插件 props
     logo:
     "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png",
     href: "/",
@@ -66,7 +105,9 @@ skeleton.add({
 });
 ```
 ##### Dock
-一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景
+
+一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。
+
 ```javascript
 import { skeleton } from "@alilc/lowcode-engine";
 
@@ -75,7 +116,7 @@ skeleton.add({
   type: "Dock",
   name: "opener",
   content: Opener, // Widget 组件实例
-  contentProps: { //  Widget 插件props
+  contentProps: {  // Widget 插件 props
     xxx: "1",
   },
   props: {
@@ -89,11 +130,14 @@ skeleton.add({
   }
 });
 ```
-#### <br />
+
 ## 变量（variables）
+
 无
 ## 方法签名（functions）
+
 ### 1. add
+
 ```tsx
 add(config: IWidgetBaseConfig & {
   area?: string;
@@ -116,8 +160,6 @@ IWidgetBaseConfig 定义如下：
 | index | 面板的位置，不传默认按插件注册顺序 |  |
 
 
-
-
 ### 2. remove
 
 remove(config: IWidgetBaseConfig)
@@ -150,13 +192,17 @@ hideWidget(name: string)
 
 enableWidget(name: string)
 
-将 widget 启用。<br />注：该函数将会触发全局事件 'skeleton.widget.enable'
+将 widget 启用。
+
+注：该函数将会触发全局事件 'skeleton.widget.enable'
 
 ### 8. disableWidget
 
 disableWidget(name: string)
 
-将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。<br />适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。
+将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。
+
+适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。
 
 ## 事件（events）
 ### 1. onShowPanel
@@ -166,7 +212,8 @@ onShowPanel(listener: (...args: unknown[]) => void)
 监听 Panel 实例显示事件
 
 ### 2. onHidePanel
-<br />onHidePanel(listener: (...args: unknown[]) => void)
+
+onHidePanel(listener: (...args: unknown[]) => void)
 
 监听 Panel 实例隐藏事件
 
@@ -177,10 +224,12 @@ onShowWidget(listener: (...args: unknown[]) => void)
 监听 Widget 实例显示事件
 
 ### 4. onHideWidget
-<br />onHideWidget(listener: (...args: unknown[]) => void)
+
+onHideWidget(listener: (...args: unknown[]) => void)
 
 监听 Widget 实例隐藏事件
 ## 使用示例
+
 ```typescript
 import { skeleton } from '@alilc/lowcode-engine';
 
@@ -199,7 +248,7 @@ skeleton.add({
   props: {
     align: 'top',
     icon: 'wenjian',
-    description: 'JS面板',
+    description: 'JS 面板',
   },
   panelProps: {
     floatable: true,
@@ -208,7 +257,7 @@ skeleton.add({
     hideTitleBar: false,
     maxHeight: 800,
     maxWidth: 1200,
-    title: 'JS面板',
+    title: 'JS 面板',
     width: 600,
   },
   content: SourceEditor,

diff --git a/docs/docs/article/index.md b/docs/docs/article/index.md
@@ -13,26 +13,26 @@ title: 低代码引擎相关文章资料
 - [2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)
 - [阿里低代码引擎 LowCodeEngine 正式开源！](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA)
 
-## Portal设计项目实战
+## Portal 设计项目实战
 #### 直播回放
 [https://www.bilibili.com/video/BV1AS4y1K7DP/](https://www.bilibili.com/video/BV1AS4y1K7DP/)
 
 #### 示例项目
-- 前端: [https://github.com/mark-ck/lowcode-portal](https://github.com/mark-ck/lowcode-portal)
-- 后端: [https://github.com/mark-ck/document-solution-site](https://github.com/mark-ck/document-solution-site)
+- 前端： [https://github.com/mark-ck/lowcode-portal](https://github.com/mark-ck/lowcode-portal)
+- 后端： [https://github.com/mark-ck/document-solution-site](https://github.com/mark-ck/document-solution-site)
 - 组件库：[https://github.com/mark-ck/portal-components](https://github.com/mark-ck/portal-components)
 
 **注意**
 1. 前端项目要把代码里请求接口的域名改成本地或者自己的域名；
 2. 后端项目要把 config.default.js 里的 yuque 和 oss 配置补全；
 
 #### 视频链接
-- [阿里低代码引擎项目实战(1)-引擎 demo 部署到 faas 服务](https://www.bilibili.com/video/BV1B44y1P7GM/)
-- [【有翻车】阿里低代码引擎项目实战(2)-保存页面到远端存储](https://www.bilibili.com/video/BV1AS4y1K7DP/)
-- [阿里巴巴低代码引擎项目实战(3)-自定义组件接入](https://www.bilibili.com/video/BV1dZ4y1m76S/)
-- [阿里低代码引擎项目实战(4)-自定义插件-页面管理](https://www.bilibili.com/video/BV17a411i73f/)
-- [阿里低代码引擎项目实战(4)-用户登录](https://www.bilibili.com/video/BV1Wu411e7EQ/)
-- [【有翻车】阿里低代码引擎项目实战(5)-表单回显](https://www.bilibili.com/video/BV1UY4y1v7D7/)
-- [阿里低代码引擎项目实战(6)-自定义插件-页面管理-后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
-- [阿里低代码引擎项目实战(6)-自定义插件-页面管理-前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
-- [阿里低代码引擎项目实战(7)-自定义插件-页面管理(完结)](https://www.bilibili.com/video/BV13Y4y1e7EV/)
+- [阿里低代码引擎项目实战 (1)-引擎 demo 部署到 faas 服务](https://www.bilibili.com/video/BV1B44y1P7GM/)
+- [【有翻车】阿里低代码引擎项目实战 (2)-保存页面到远端存储](https://www.bilibili.com/video/BV1AS4y1K7DP/)
+- [阿里巴巴低代码引擎项目实战 (3)-自定义组件接入](https://www.bilibili.com/video/BV1dZ4y1m76S/)
+- [阿里低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/)
+- [阿里低代码引擎项目实战 (4)-用户登录](https://www.bilibili.com/video/BV1Wu411e7EQ/)
+- [【有翻车】阿里低代码引擎项目实战 (5)-表单回显](https://www.bilibili.com/video/BV1UY4y1v7D7/)
+- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
+- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
+- [阿里低代码引擎项目实战 (7)-自定义插件 - 页面管理 (完结)](https://www.bilibili.com/video/BV13Y4y1e7EV/)
diff --git a/docs/docs/demoUsage/appendix/loop.md b/docs/docs/demoUsage/appendix/loop.md
@@ -3,15 +3,15 @@ title: 如何使用循环值
 sidebar_position: 0
 ---
 1.设置循环数据
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1655975447215-026bd3ae-ae2a-4f90-805e-df0d5c4bb7d2.png#clientId=ubd100ffc-952a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=950&id=u6413eee5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1900&originWidth=3840&originalType=binary&ratio=1&rotation=0&showTitle=false&size=339030&status=done&style=none&taskId=ued46d732-83a2-441f-a80f-23061587689&title=&width=1920)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01Gw1kXO1qaXulQCWap_!!6000000005512-2-tps-3840-1900.png)
 
 2.给需要的变量绑定 this.item
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1655975499246-f9d14ef4-6736-46a5-8b24-8eedd4477617.png#clientId=ubd100ffc-952a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=946&id=u0b50f02a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1892&originWidth=3840&originalType=binary&ratio=1&rotation=0&showTitle=false&size=451804&status=done&style=none&taskId=uf4916102-2e3d-4277-ac81-604c6761615&title=&width=1920)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01RpP2Ev24lRxjqpHdY_!!6000000007431-2-tps-3840-1892.png)
 
 绑定之后的效果如下：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1655975540038-ccf3aabc-3f7c-4e33-a701-a9b005b1cf25.png#clientId=uc887596b-8aed-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=942&id=u32901b3a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1884&originWidth=3840&originalType=binary&ratio=1&rotation=0&showTitle=false&size=333998&status=done&style=none&taskId=u2853d459-4432-4d0a-ba12-494e79e892a&title=&width=1920)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN019qa1J31m7ugsXcnaA_!!6000000004908-2-tps-3840-1884.png)
 
 其中 this.item 的 item 是可以配置的。配置不同的 key 可以方便在多层循环中使用不同层级的循环 item 值。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1655975569197-33d90389-7394-4e65-bc6a-582b7ceb9fee.png#clientId=uc887596b-8aed-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=948&id=u6e6741d2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1896&originWidth=3840&originalType=binary&ratio=1&rotation=0&showTitle=false&size=311961&status=done&style=none&taskId=u14bbcfbb-e7cf-4307-a58d-3cb58afe8f7&title=&width=1920)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01XQfnYL1P4wxn01oXv_!!6000000001788-2-tps-3840-1896.png)
 
 this.index 是当前循环的索引值。