Merge pull request #3050 from alibaba/chore/update-codeowners

chore: update code owners

.eslintrc.js

@@ -15,12 +15,11 @@ module.exports = {
     'no-prototype-builtins': 1,
     'no-useless-constructor': 1,
     'no-empty-function': 1,
-    '@typescript-eslint/member-ordering': 0,
     'lines-between-class-members': 0,
     'no-await-in-loop': 0,
     'no-plusplus': 0,
     '@typescript-eslint/no-parameter-properties': 0,
-    '@typescript-eslint/no-unused-vars': 1,
+    'no-restricted-exports': ['error'],
     'no-multi-assign': 1,
     'no-dupe-class-members': 1,
     'react/no-deprecated': 1,
@@ -35,10 +34,26 @@ module.exports = {
     '@typescript-eslint/indent': 0,
     'import/no-cycle': 0,
     '@typescript-eslint/no-shadow': 0,
-    "@typescript-eslint/method-signature-style": 0,
-    "@typescript-eslint/consistent-type-assertions": 0,
-    "@typescript-eslint/no-useless-constructor": 0,
+    '@typescript-eslint/method-signature-style': 0,
+    '@typescript-eslint/consistent-type-assertions': 0,
+    '@typescript-eslint/no-useless-constructor': 0,
     '@typescript-eslint/dot-notation': 0, // for lint performance
     '@typescript-eslint/restrict-plus-operands': 0, // for lint performance
-  }
+    'no-unexpected-multiline': 1,
+    'no-multiple-empty-lines': ['error', { max: 1 }],
+    'lines-around-comment': ['error', {
+      beforeBlockComment: true,
+      afterBlockComment: false,
+      afterLineComment: false,
+      allowBlockStart: true,
+    }],
+    'comma-dangle': ['error', 'always-multiline'],
+    '@typescript-eslint/member-ordering': [
+      'error',
+      { default: ['signature', 'field', 'constructor', 'method'] }
+    ],
+    '@typescript-eslint/no-unused-vars': ['error'],
+    'no-redeclare': 0,
+    '@typescript-eslint/no-redeclare': 1,
+  },
 };

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence
-* @liujuping @JackLian
+* @liujuping @1ncounter
 
 /modules/material-parser @akirakai
-/modules/code-generator @leoyuan
+/modules/code-generator @qingniaotonghua

.github/workflows/check base branch.yml

@@ -0,0 +1,33 @@
+name: Check Base Branch
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  code-review:
+    name: Check
+    runs-on: ubuntu-latest
+
+    steps:
+      # 判断用户是否有写仓库权限
+      - name: 'Check User Permission'
+        uses: 'lannonbr/repo-permission-check-action@2.0.0'
+        with:
+          permission: 'write'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 'Check base branch name is develop or not'
+        if: github.event.pull_request.base.ref != 'develop'   # check the target branch if it's master
+        uses: actions-cool/issues-helper@v2
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            感谢你的 PR，根据引擎的 [研发协作流程](https://lowcode-engine.cn/site/docs/participate/flow)，请将目标合入分支设置为 **develop**。
+
+            Thanks in advance, according to the [Contribution Guideline](https://lowcode-engine.cn/site/docs/participate/flow), please set the base branch to **develop**.
+
+            @${{ github.event.pull_request.user.login }}

.github/workflows/cov packages.yml

@@ -71,4 +71,26 @@ jobs:
           working-directory: packages/react-simulator-renderer
           test-script: npm test -- --jest-ci --jest-json --jest-coverage --jest-testLocationInResults --jest-outputFile=report.json
           package-manager: yarn
+          annotations: none
+
+  cov-utils:
+    runs-on: ubuntu-latest
+    # skip fork's PR, otherwise it fails while making a comment
+    if: ${{ github.event.pull_request.head.repo.full_name == 'alibaba/lowcode-engine' }}
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - uses: ArtiomTr/jest-coverage-report-action@v2
+        with:
+          working-directory: packages/utils
+          test-script: npm test -- --jest-ci --jest-json --jest-coverage --jest-testLocationInResults --jest-outputFile=report.json
+          package-manager: yarn
           annotations: none

.github/workflows/help wanted.yml

@@ -1,4 +1,4 @@
-name: Issue Reply
+name: Help Wanted
 
 on:
   issues:

.github/workflows/insufficient information.yml

@@ -1,4 +1,4 @@
-name: Issue Reply
+name: Insufficient Info
 
 on:
   issues:
@@ -16,4 +16,4 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
-            你好 @${{ github.event.issue.user.login }}，由于缺乏必要的信息（如 bug 重现步骤、引擎版本信息 等），无法定位问题，请按照 [issue bug 模板](https://github.com/alibaba/lowcode-engine/blob/main/.github/ISSUE_TEMPLATE/bug-report.md) 补全信息，也可以通过阅读[引擎的 issue 说明](https://www.yuque.com/lce/doc/yvlxhs) 了解什么类型的 issue 可以获得更好、更快的支持。
+            你好 @${{ github.event.issue.user.login }}，由于缺乏必要的信息（如 bug 重现步骤、引擎版本信息 等），无法定位问题，请按照 [issue bug 模板](https://github.com/alibaba/lowcode-engine/blob/main/.github/ISSUE_TEMPLATE/bug-report.md) 补全信息，也可以通过阅读 [引擎的 issue 说明](https://lowcode-engine.cn/site/community/issue) 了解什么类型的 issue 可以获得更好、更快的支持。

.github/workflows/pr comment by chatgpt.yml

@@ -0,0 +1,23 @@
+name: Pull Request Review By ChatGPT
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  code-review:
+    name: Code Review
+    runs-on: ubuntu-latest
+
+    steps:
+      # 判断用户是否有写仓库权限
+      - name: 'Check User Permission'
+        uses: 'lannonbr/repo-permission-check-action@2.0.0'
+        with:
+          permission: 'write'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: opensumi/actions/.github/actions/code-review@main
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

.github/workflows/pre build.yml

@@ -0,0 +1,34 @@
+name: Pre Build
+
+on:
+  push:
+    paths:
+      - 'packages/**'
+      - '!packages/**.md'
+  pull_request:
+    paths:
+      - 'packages/**'
+      - '!packages/**.md'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Install dependencies and setup
+      run: npm install && npm run setup
+
+    - name: Build
+      run: npm run build
+
+    - name: Check build status
+      run: |
+        if [ $? -eq 0 ]; then
+          echo "Build succeeded!"
+        else
+          echo "Build failed!"
+          exit 1
+        fi

.github/workflows/publish docs.yml

@@ -0,0 +1,53 @@
+name: Update and Publish Docs
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'docs/docs/**'
+  workflow_dispatch:
+
+jobs:
+  publish-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          ref: 'develop'
+          node-version: '16'
+          registry-url: 'https://registry.npmjs.org'
+      - run: cd docs && npm install
+      - run: |
+          cd docs
+          npm version patch
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add package.json
+          git commit -m "chore(docs): publish documentation"
+          git push
+      - run: cd docs && npm run build && npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Get version
+        id: get_version
+        run: echo "version=$(node -p "require('./docs/package.json').version")" >> $GITHUB_OUTPUT
+
+  comment-pr:
+    needs: publish-docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Comment on PR
+        if: github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged == true
+        uses: actions/github-script@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            github.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '🚀 New version has been released: ' + '${{ needs.publish-docs.outputs.version }}'
+            })

.github/workflows/publish engine beta.yml

@@ -0,0 +1,30 @@
+name: Publish Engine Beta
+
+on:
+  push:
+    branches:
+      - 'release/[0-9]+.[0-9]+.[0-9]+-beta'
+    paths:
+      - 'packages/**'
+
+jobs:
+  publish-engine:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install && npm run setup
+      - run: |
+          npm run build
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+      - run: npm run pub:prerelease
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Get version
+        id: get_version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/publish engine.yml

@@ -0,0 +1,33 @@
+name: Publish Engine
+
+on:
+  workflow_dispatch:
+    inputs:
+      publishCommand:
+        description: 'publish command'
+        required: true
+
+jobs:
+  publish-engine:
+    runs-on: ubuntu-latest
+    if: >-
+      contains(github.ref, 'refs/heads/release/') &&
+      (github.actor == '1ncounter' || github.actor == 'liujuping')
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install && npm run setup
+      - run: |
+          npm run build
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+      - run: npm run ${{ github.event.inputs.publishCommand }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Get version
+        id: get_version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/test modules.yml

@@ -1,4 +1,4 @@
-name: lint & test
+name: Lint & Test (Mods)
 
 on:
   push:

.github/workflows/test packages.yml

@@ -1,4 +1,4 @@
-name: lint & test
+name: Lint & Test (Pkgs)
 
 on:
   push:
@@ -41,4 +41,100 @@ jobs:
         run: npm i && npm run setup:skip-build
 
       - name: test
-        run: cd packages/designer && npm test
+        run: cd packages/designer && npm test
+
+  test-editor-skeleton:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/editor-skeleton && npm test
+
+  test-renderer-core:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/renderer-core && npm test
+
+  test-react-simulator-renderer:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/react-simulator-renderer && npm test
+
+  test-utils:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/utils && npm test
+
+  test-editor-core:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/editor-core && npm test
+
+  test-plugin-command:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: install
+        run: npm i && npm run setup:skip-build
+
+      - name: test
+        run: cd packages/plugin-command && npm test

.gitignore

@@ -8,6 +8,7 @@ packages/*/output/
 packages/demo/
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
 deploy-space/packages
 deploy-space/.env
 
@@ -107,3 +108,5 @@ typings/
 # codealike
 codealike.json
 .node
+
+.must.config.js

CONTRIBUTOR.md

@@ -24,5 +24,6 @@
 - [Ychangqing](https://github.com/Ychangqing)
 - [yize](https://github.com/yize)
 - [youluna](https://github.com/youluna)
+- [ibreathebsb](https://github.com/ibreathebsb)
 
 如果您贡献过低代码引擎，但是没有看到您的名字，为我们的疏忽感到抱歉。欢迎您通过 PR 补充上自己的名字。

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+  ],
+};

docs/README.md

@@ -27,8 +27,8 @@ $ yarn build
 1. npm run build
 2. npm publish # 记得改下版本号，比如 1.0.1
 
-# 发布完后执行 tnpm sync
-3. tnpm sync
+# 发布完后执行 tnpm syncOss 同步到 uipaas CDN
+3. tnpm syncOss
 
 4. 更新 diamond 版本 1.0.1
 5. lowcode-engine.cn 站点生效
@@ -37,10 +37,9 @@ $ yarn build
 
 ## 功能
 - [x] 支持本地离线搜搜
-- [x] 版本化文档管理 
+- [x] 版本化文档管理
 - [x] 离线静态部署
 - [x] 主题（fork 宜搭开发者中心）
 
 ## 使用文档
 https://docusaurus.io/zh-CN/docs/docs-introduction
-

docs/community/issue.md

@@ -33,7 +33,7 @@ sidebar_position: 2
 ### 不同优先级的示例
 #### 【支持快】通过线上 Demo 地址 + 控制台输入 API 可复现。
 **示例**
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387671833-cd44507b-af59-45ec-b0da-f4f0ef61e92e.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=295&id=ub61f0ab8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1862&originWidth=3322&originalType=binary&ratio=1&rotation=0&showTitle=false&size=5033674&status=done&style=none&taskId=u3646a3b6-4b22-48e7-94e3-564a09cfa24&title=&width=527)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01np6ARb1KnJFOELjXg_!!6000000001208-2-tps-3322-1862.png)
 复现步骤：
 
 - 打开线上 demo
@@ -70,13 +70,13 @@ window.AliLowCodeEngine.project.openDocument('docl4xkca5b')
 #### 【支持稍慢】通过线上 demo + 完整操作步骤可复现
 **示例**
 1.使用 antd 组件
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387998779-9f621c7f-82cb-48ad-94fc-84c2cd46065c.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=906&id=u0ad0726a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1812&originWidth=3584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=838860&status=done&style=none&taskId=u0a0a9e20-f79e-4c8c-8c82-b304f7b7583&title=&width=1792)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN019dFe4Y24SDKbmpbdw_!!6000000007389-2-tps-3584-1812.png)
 
 2.拖拽这个组件
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656388046560-e07680ee-809a-4ad1-bc47-47c2c00fdd40.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=901&id=u23c8416a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1802&originWidth=3584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=890196&status=done&style=none&taskId=u7ac32b55-f32c-4215-ac1d-f81f5e986ac&title=&width=1792)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN0109SdxO1OtxSbpLn4Q_!!6000000001764-2-tps-3584-1802.png)
 
 3.配置该属性值为 100
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656388075312-7c06f15a-464a-49f0-beb5-19320ea0e454.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=900&id=ua91e7f85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1800&originWidth=3584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=882142&status=done&style=none&taskId=u61082c8a-1092-4b5b-a2ea-00486cadb71&title=&width=1792)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01WeVXpW1HBny0VmQcS_!!6000000000720-2-tps-3584-1800.png)
 
 期望效果：
 
@@ -84,26 +84,26 @@ window.AliLowCodeEngine.project.openDocument('docl4xkca5b')
 
 #### 【支持稍慢】通过线上 demo + 变更代码可复现，并清楚的说明变更代码的位置和内容
 **示例**
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387894830-6850815f-e2ee-46bf-a2bf-fdda4d166691.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u87419dd1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=754&originWidth=1892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=226627&status=done&style=none&taskId=u88b2bbb8-869c-482c-9510-9d513f6e191&title=&width=946)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01FL0Urq1tl1pLcYhJH_!!6000000005941-2-tps-1892-754.png)
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387911054-771dd7fc-db90-46ae-b1db-f5f9f7537ed4.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=389&id=u0a370108&margin=%5Bobject%20Object%5D&name=image.png&originHeight=778&originWidth=1917&originalType=binary&ratio=1&rotation=0&showTitle=false&size=229881&status=done&style=none&taskId=ucbc7af71-f0e1-4319-9097-8ad6b936c5e&title=&width=958.5)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01WIpR9V1i363wzyFzi_!!6000000004356-2-tps-1917-778.png)
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387922644-de3f1d64-0206-407d-82ad-2d1155374e37.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=127&id=u9c5921eb&margin=%5Bobject%20Object%5D&name=image.png&originHeight=253&originWidth=1836&originalType=binary&ratio=1&rotation=0&showTitle=false&size=58615&status=done&style=none&taskId=u5c8af90a-0d20-40c8-a1f2-e387f037d85&title=&width=918)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01ZDkR3n1MNmP2uk15t_!!6000000001423-2-tps-1836-253.png)
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656387931330-a5453ba1-264b-4325-b3a8-7cb6e22633ee.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=457&id=u687acf85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=914&originWidth=1912&originalType=binary&ratio=1&rotation=0&showTitle=false&size=129980&status=done&style=none&taskId=u3a706b70-0da6-484d-857d-1d086f7a4e5&title=&width=956)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01OKzt1Z28b9WZIbM6B_!!6000000007950-2-tps-1912-914.png)
 
 #### 【支持慢】有完整的项目地址，下载下来可直接安装依赖并启动复现的
 由于完整的项目中有很多冗余的信息，这部分排查起来十分耗时且困难。不推荐使用改方式。
 
 #### 【不保证提供支持】其他
 ##### 只有标题没有复现步骤
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656388351815-e086b980-0828-4c49-ba72-142446313d2d.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=510&id=u79a38c3b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1020&originWidth=2520&originalType=binary&ratio=1&rotation=0&showTitle=false&size=529258&status=done&style=none&taskId=u3540b08e-9dff-4c72-8ee5-123912439b0&title=&width=1260)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN017rO2gR1YKpEgIMBjh_!!6000000003041-2-tps-2520-1020.png)
 
 ##### 复现步骤不清晰
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656388451393-2168e5ca-20de-4781-9e51-20e282dbc0ca.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=833&id=ubaf001f6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1666&originWidth=3584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1228630&status=done&style=none&taskId=ub26ed4ff-e0cf-4644-9a65-00ddee4b9e5&title=&width=1792)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01vtHi5z225CC7aFVS2_!!6000000007068-2-tps-3584-1666.png)
 
 ##### 和引擎无关的
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1656388376995-0ab5d7c0-8ff9-49cf-8854-70e9bb3ff87a.png#clientId=uaa040ac3-dccc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=715&id=uffc59321&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1430&originWidth=2548&originalType=binary&ratio=1&rotation=0&showTitle=false&size=747119&status=done&style=none&taskId=u861d5fa6-f673-4091-8635-ff45adf680e&title=&width=1274)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01KxqT9M1vcu25xJHFP_!!6000000006194-2-tps-2548-1430.png)
 
 
 

docs/config/navbar.js

@@ -33,34 +33,24 @@ module.exports = {
       position: 'left',
       label: 'FAQ',
     },
-    {
-      type: 'doc',
-      docId: 'participate/index',
-      position: 'left',
-      label: '参与贡献',
-    },
     {
       type: 'doc',
       docId: 'article/index',
       position: 'left',
       label: '文章',
     },
+    {
+      type: 'doc',
+      docId: 'video/index',
+      position: 'left',
+      label: '视频',
+    },
     {
       type: 'doc',
       docId: 'demoUsage/intro',
       position: 'left',
       label: 'Demo 使用文档',
     },
-    {
-      position: 'left',
-      href: 'https://developer.aliyun.com/ebook/7507',
-      label: '技术白皮书',
-    },
-    {
-      position: 'left',
-      href: 'https://github.com/alibaba/lowcode-engine/releases',
-      label: '更新日志',
-    },
     {
       to: '/community/issue',
       position: 'left',
@@ -80,6 +70,12 @@ module.exports = {
       className: 'header-github-link',
       'aria-label': 'GitHub repository',
     },
+    {
+      type: 'doc',
+      docId: 'participate/index',
+      position: 'right',
+      label: '参与贡献',
+    },
     {
       type: 'search',
       position: 'right',

docs/config/sidebars.js

@@ -22,10 +22,61 @@ module.exports = {
    * 根据当前目录自动生成导航配置
    */
   guide: [
-    {
-      type: 'autogenerated',
-      dirName: 'guide', // '.' 即当前的文档文件夹
-    },
+    [
+      {
+        type: 'category',
+        label: '入门',
+        collapsed: false,
+        items: getDocsFromDir('guide/quickStart'),
+      },
+      {
+        type: 'category',
+        label: '创建编辑器',
+        collapsed: false,
+        items: getDocsFromDir('guide/create'),
+      },
+      {
+        type: 'category',
+        label: '扩展编辑器',
+        collapsed: false,
+        items: getDocsFromDir('guide/expand/editor', [{ dir: 'guide/expand/editor/parts', label: 'Parts·造物' }]),
+      },
+      {
+        type: 'category',
+        label: '扩展运行时',
+        collapsed: false,
+        items: getDocsFromDir('guide/expand/runtime'),
+      },
+      {
+        type: 'category',
+        label: '设计原理',
+        collapsed: false,
+        items: getDocsFromDir('guide/design'),
+      },
+      {
+        type: 'category',
+        label: '附录',
+        collapsed: false,
+        items: [
+          {
+            type: 'link',
+            label: '更新日志',
+            href: 'https://github.com/alibaba/lowcode-engine/releases',
+          },
+          ...getDocsFromDir('guide/appendix'),
+          {
+            type: 'category',
+            label: '预置设置器详情',
+            items: getDocsFromDir('guide/appendix/setterDetails'),
+          },
+        ],
+      },
+      {
+        type: 'link',
+        label: '技术白皮书',
+        href: 'https://developer.aliyun.com/ebook/7507',
+      },
+    ],
   ],
   api: [
     {
@@ -57,5 +108,4 @@ module.exports = {
       dirName: 'demoUsage',
     },
   ],
-  // api: getDocsFromDir('api'),
 };

docs/docs/api/canvas.md

@@ -0,0 +1,87 @@
+---
+title: canvas - 画布 API
+sidebar_position: 10
+---
+
+> **@types** [IPublicApiCanvas](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/canvas.ts)<br/>
+> **@since** v1.1.0
+
+
+## 模块简介
+
+通过该模块可以触达对画布拖拽相关的一些能力。
+
+## 变量
+
+### dragon
+
+获取拖拽操作对象的实例
+
+`@type {IPublicModelDragon | null}`
+
+
+相关类型：[IPublicModelDragon](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/dragon.ts)
+
+### activeTracker
+
+获取活动追踪器实例
+
+`@type {IPublicModelActiveTracker | null}`
+
+相关类型：[IPublicModelActiveTracker](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/active-tracker.ts)
+
+### isInLiveEditing
+
+是否处于 LiveEditing 状态
+
+`@type {boolean}`
+
+### clipboard
+全局剪贴板实例
+
+`@type {IPublicModelClipboard}`
+
+相关类型：[IPublicModelClipboard](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/clipboard.ts)
+
+## 方法
+
+### createLocation
+创建一个文档插入位置对象，该对象用来描述一个即将插入的节点在文档中的位置
+
+```typescript
+/**
+ * 创建一个文档插入位置对象，该对象用来描述一个即将插入的节点在文档中的位置
+ * create a drop location for document, drop location describes a location in document
+ * @since v1.1.0
+ */
+createLocation(locationData: IPublicTypeLocationData): IPublicModelDropLocation;
+```
+
+### createScroller
+创建一个滚动控制器 Scroller，赋予一个视图滚动的基本能力，
+```typescript
+/**
+ * 创建一个滚动控制器 Scroller，赋予一个视图滚动的基本能力，
+ * a Scroller is a controller that gives a view (IPublicTypeScrollable) the ability scrolling
+ * to some cordination by api scrollTo.
+ *
+ * when a scroller is inited, will need to pass is a scrollable, which has a scrollTarget.
+ * and when scrollTo(options: { left?: number; top?: number }) is called, scroller will
+ * move scrollTarget`s top-left corner to (options.left, options.top) that passed in.
+ * @since v1.1.0
+ */
+createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller;
+
+```
+
+### createScrollTarget
+创建一个 ScrollTarget，与 Scroller 一起发挥作用，详见 [createScroller](#createscroller) 中的描述
+
+```typescript
+/**
+ * 创建一个 ScrollTarget，与 Scroller 一起发挥作用，详见 createScroller 中的描述
+ * this works with Scroller, refer to createScroller`s description
+ * @since v1.1.0
+ */
+createScrollTarget(shell: HTMLDivElement): IPublicModelScrollTarget;
+```

docs/docs/api/command.md

@@ -0,0 +1,101 @@
+---
+title: command - 指令 API
+sidebar_position: 10
+---
+
+
+
+## 模块概览
+
+该模块使得与命令系统的交互成为可能，提供了一种全面的方式来处理、执行和管理应用程序中的命令。
+
+
+
+## 接口
+
+### IPublicApiCommand
+
+与命令交互的接口。它提供了注册、注销、执行和管理命令的方法。
+
+
+
+## 方法
+
+### registerCommand
+
+注册一个新命令及其处理函数。
+
+```
+typescriptCopy code
+/**
+ * 注册一个新的命令及其处理程序。
+ * @param command {IPublicTypeCommand} - 要注册的命令。
+ */
+registerCommand(command: IPublicTypeCommand): void;
+```
+
+### unregisterCommand
+
+注销一个已存在的命令。
+
+```
+typescriptCopy code
+/**
+ * 注销一个已存在的命令。
+ * @param name {string} - 要注销的命令的名称。
+ */
+unregisterCommand(name: string): void;
+```
+
+### executeCommand
+
+根据名称和提供的参数执行命令，确保参数符合命令的定义。
+
+```
+typescriptCopy code
+/**
+ * 根据名称和提供的参数执行命令。
+ * @param name {string} - 要执行的命令的名称。
+ * @param args {IPublicTypeCommandHandlerArgs} - 命令的参数。
+ */
+executeCommand(name: string, args?: IPublicTypeCommandHandlerArgs): void;
+```
+
+### batchExecuteCommand
+
+批量执行命令，在所有命令执行后进行重绘，历史记录中只记录一次。
+
+```
+typescriptCopy code
+/**
+ * 批量执行命令，随后进行重绘，历史记录中只记录一次。
+ * @param commands {Array} - 命令对象的数组，包含名称和可选参数。
+ */
+batchExecuteCommand(commands: { name: string; args?: IPublicTypeCommandHandlerArgs }[]): void;
+```
+
+### listCommands
+
+列出所有已注册的命令。
+
+```
+typescriptCopy code
+/**
+ * 列出所有已注册的命令。
+ * @returns {IPublicTypeListCommand[]} - 已注册命令的数组。
+ */
+listCommands(): IPublicTypeListCommand[];
+```
+
+### onCommandError
+
+为命令执行过程中的错误注册错误处理回调函数。
+
+```
+typescriptCopy code
+/**
+ * 为命令执行过程中的错误注册一个回调函数。
+ * @param callback {(name: string, error: Error) => void} - 错误处理的回调函数。
+ */
+onCommandError(callback: (name: string, error: Error) => void): void;
+```

docs/docs/api/common.md

@@ -1,50 +1,139 @@
 ---
 title: common - 通用 API
-sidebar_position: 11
+sidebar_position: 10
 ---
-# 模块简介
-通用模块里包含除了 9 大核心模块 API 之外的所有 API，比如通用 utils、面板扩展相关 等。
+
+> **@types** [IPublicApiCommon](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/common.ts)<br/>
+> **@since** v1.0.0
+
+
+## 模块简介
+通用模块里包含除了几大核心模块 API 之外的所有 API，比如通用 utils、面板扩展相关 等。
 > 高能预警：之所以叫 skeletonCabin / designerCabin 跟兼容上一个版本的引擎有关系。若有必要，后面将用更有意义的命名空间来组织这些 API。
 
-# 变量（variables）
-### utils
+## 变量
+#### utils
 通用 utils，详见下方方法签名
 
-### designerCabin
-设计器扩展相关，详见下方方法签名
+相关类型：[IPublicApiCommonUtils](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/common.ts)
 
-### skeletonCabin
+#### skeletonCabin
 面板扩展相关，详见下方方法签名
 
-# 方法签名（functions）
-## utils
-### isNodeSchema
+## 方法
+### utils
+#### isNodeSchema
 是否为合法的 schema 结构
 
-### isFormEvent
+```typscript
+/**
+  * 是否为合法的 schema 结构
+  * check if data is valid NodeSchema
+  *
+  * @param {*} data
+  * @returns {boolean}
+  */
+isNodeSchema(data: any): boolean;
+```
+
+#### isFormEvent
 是否为表单事件类型
 
-### getNodeSchemaById
-从 schema 结构中查找指定 id 节点
+```typescript
+/**
+ * 是否为表单事件类型
+ * check if e is a form event
+ * @param {(KeyboardEvent | MouseEvent)} e
+ * @returns {boolean}
+ */
+isFormEvent(e: KeyboardEvent | MouseEvent): boolean;
+```
 
-### executeTransaction
+#### getNodeSchemaById
+从 schema 结构中查找指定 id 节点
+```typescript
+/**
+ * 从 schema 结构中查找指定 id 节点
+ * get node schema from a larger schema with node id
+ * @param {IPublicTypeNodeSchema} schema
+ * @param {string} nodeId
+ * @returns {(IPublicTypeNodeSchema | undefined)}
+ */
+getNodeSchemaById(
+    schema: IPublicTypeNodeSchema,
+    nodeId: string,
+  ): IPublicTypeNodeSchema | undefined;
+```
+相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+#### executeTransaction
 批处理事务，用于优化特定场景的性能
-*引擎版本 >= 1.0.16
+
+```typescript
+/**
+ * 批处理事务，用于优化特定场景的性能
+ * excute something in a transaction for performence
+ *
+ * @param {() => void} fn
+ * @param {IPublicEnumTransitionType} type
+ * @since v1.0.16
+ */
+executeTransaction(fn: () => void, type: IPublicEnumTransitionType): void;
+```
+**@since v1.0.16**
+
+**示例**
 ```typescript
 import { common } from '@alilc/lowcode-engine';
-import { TransitionType } from '@alilc/lowcode-types';
+import { IPublicEnumTransitionType } from '@alilc/lowcode-types';
 
 common.utils.startTransaction(() => {
   node1.setProps();
   node2.setProps();
   node3.setProps();
   // ...
-}, TransitionType.repaint);
+}, IPublicEnumTransitionType.repaint);
 ```
 
-### createIntl
+#### getConvertedExtraKey
+
+props key 转化工具
+
+```typescript
+getConvertedExtraKey(key: string): string
+
+```
+
+**@since v1.0.17**
+
+#### createIntl
 i18n 相关工具
-*引擎版本 >= 1.0.17
+```typescript
+/**
+ * i18n 相关工具
+ * i18n tools
+ *
+ * @param {(string | object)} instance
+ * @returns {{
+ *     intlNode(id: string, params?: object): ReactNode;
+ *     intl(id: string, params?: object): string;
+ *     getLocale(): string;
+ *     setLocale(locale: string): void;
+ *   }}
+ * @since v1.0.17
+ */
+createIntl(instance: string | object): {
+  intlNode(id: string, params?: object): ReactNode;
+  intl(id: string, params?: object): string;
+  getLocale(): string;
+  setLocale(locale: string): void;
+};
+```
+
+**@since v1.0.17**
+
+**示例**
+
 ```typescript
 import { common } from '@alilc/lowcode-engine';
 import enUS from './en-US.json';
@@ -56,16 +145,31 @@ const { intl, getLocale, setLocale } = common.utils.createIntl({
 });
 
 ```
-## designerCabin
-### isSettingField
-是否是 SettingField 实例
 
-### TransformStage
-转换类型枚举对象，包含 init / upgrade / render 等类型，参考 [TransformStage](https://github.com/alibaba/lowcode-engine/blob/4f4ac5115d18357a7399632860808f6cffc33fad/packages/types/src/transform-stage.ts#L1)
-##
-## skeletonCabin
-### Workbench
+#### intl
+
+i18n 转换方法
+
+```typescript
+/**
+ * i18n 转换方法
+ */
+intl(data: IPublicTypeI18nData | string, params?: object): string;
+```
+
+**示例**
+```
+const title = common.utils.intl(node.title)
+```
+
+### skeletonCabin
+#### Workbench
 编辑器框架 View
 
-# 事件（events）
-无
+```typescript
+/**
+ * 编辑器框架 View
+ * get Workbench Component
+ */
+get Workbench(): Component;
+```

docs/docs/api/commonUI.md

@@ -0,0 +1,210 @@
+---
+title: commonUI - UI 组件库
+sidebar_position: 10
+---
+
+## 简介
+CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。
+
+## 组件列表
+
+### Tip
+
+提示组件
+
+| 参数      | 说明         | 类型                                  | 默认值 |
+|-----------|--------------|---------------------------------------|--------|
+| 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'|
+
+### Title
+
+标题组件
+
+| 参数      | 说明       | 类型                        | 默认值 |
+|-----------|------------|-----------------------------|--------|
+| title     | 标题内容   | IPublicTypeTitleContent     |        |
+| className | className  | string (optional)           |        |
+| onClick   | 点击事件   | () => void (optional)       |        |
+
+### ContextMenu
+
+| 参数   | 说明                                               | 类型                               | 默认值 |
+|--------|----------------------------------------------------|------------------------------------|--------|
+| 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)                                                              |                                        |
+
+**ContextMenu 示例**
+
+```typescript
+const App = () => {
+  const menuItems: IPublicTypeContextMenuAction[] = [
+    {
+      name: 'a',
+      title: '选项 1',
+      action: () => console.log('选项 1 被点击'),
+    },
+    {
+      name: 'b',
+      title: '选项 2',
+      action: () => console.log('选项 2 被点击'),
+    },
+  ];
+
+  const ContextMenu = ctx.commonUI.ContextMenu;
+
+  return (
+    <div>
+      <ContextMenu menus={menuItems}>
+        <div>右键点击这里</div>
+      </ContextMenu>
+    </div>
+  );
+};
+
+export default App;
+```
+
+**ContextMenu.create 示例**
+
+```typescript
+const App = () => {
+  const menuItems: IPublicTypeContextMenuAction[] = [
+    {
+      name: 'a',
+      title: '选项 1',
+      action: () => console.log('选项 1 被点击'),
+    },
+    {
+      name: 'b',
+      title: '选项 2',
+      action: () => console.log('选项 2 被点击'),
+    },
+  ];
+
+  const ContextMenu = ctx.commonUI.ContextMenu;
+
+  return (
+    <div>
+      <div onClick={(e) => {
+      	ContextMenu.create(menuItems, e);
+      }}>点击这里</div>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Balloon
+
+详细文档： [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)
+
+## 说明
+
+如果需要其他组件，可以提 issue 给我们。

docs/docs/api/config.md

@@ -1,22 +1,30 @@
 ---
 title: config - 配置 API
-sidebar_position: 8
+sidebar_position: 5
 ---
+
+> **@types** [IPublicModelEngineConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/engine-config.ts)<br/>
+> **@since** v1.0.0
+
+
 ## 模块简介
 配置模块，负责配置的读、写等操作。
-##
-## 变量（variables）
-无
-##
-## 方法签名（functions）
+
+## 方法
 ### get
 获取指定 key 的值
 
-**类型定义**
 ```typescript
-function get(key: string, defaultValue?: any): any
+/**
+ * 获取指定 key 的值
+ * get value by key
+ * @param key
+ * @param defaultValue
+ * @returns
+ */
+get(key: string, defaultValue?: any): any;
 ```
-**调用示例**
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
@@ -26,11 +34,16 @@ config.get('keyB', { a: 1 });
 ### set
 设置指定 key 的值
 
-**类型定义**
 ```typescript
-function set(key: string, value: any)
+/**
+ * 设置指定 key 的值
+ * set value for certain key
+ * @param key
+ * @param value
+ */
+set(key: string, value: any): void;
 ```
-**调用示例**
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
@@ -40,40 +53,88 @@ config.set('keyC', 1);
 ### has
 判断指定 key 是否有值
 
-**类型定义**
 ```typescript
-function has(key: string): boolean
+/**
+ * 判断指定 key 是否有值
+ * check if config has certain key configed
+ * @param key
+ * @returns
+ */
+has(key: string): boolean;
 ```
-**调用示例**
+
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
 config.has('keyD');
 ```
-###
+
 ### setConfig
 批量设值，set 的对象版本
 
-**类型定义**
 ```typescript
-function setConfig(config: { [key: string]: any })
+/**
+ * 批量设值，set 的对象版本
+ * set multiple config key-values
+ * @param config
+ */
+setConfig(config: { [key: string]: any }): void;
 ```
-**调用示例**
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
 config.setConfig({ keyA: false, keyB: 2 });
 ```
 
+### getPreference
+获取全局 Preference 管理器，用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住
+
+```typescript
+/**
+ * 获取全局 Preference, 用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住
+ * get global user preference manager, which can be use to store
+ * user`s preference in user localstorage, such as a panel is pinned or not.
+ * @returns {IPublicModelPreference}
+ * @since v1.1.0
+ */
+getPreference(): IPublicModelPreference;
+```
+相关类型：[IPublicModelPreference](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/preference.ts)
+
+**@since v1.1.0**
+
+示例
+
+```javascript
+import { config } from '@alilc/lowcode-engine';
+
+const panelName = 'outline-master-pane';
+
+// 设置大纲树面板钉住，在大纲树下次重新打开时生效
+config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleton')
+```
+
+## 事件
+
 ### onceGot
 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值
 注：此函数返回 Promise 实例
 
-**类型定义**
+
 ```typescript
-function onceGot(key: string): Promise<any>
+/**
+ * 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值
+ *  注：此函数返回 Promise 实例，只会执行（fullfill）一次
+ * wait until value of certain key is set, will only be
+ * triggered once.
+ * @param key
+ * @returns
+ */
+onceGot(key: string): Promise<any>;
 ```
-**调用示例**
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
@@ -88,11 +149,18 @@ const value = await config.onceGot('keyA');
 ### onGot
 获取指定 key 的值，函数回调模式，若多次被赋值，回调会被多次调用
 
-**类型定义**
 ```typescript
-function onGot(key: string, fn: (data: any) => void): () => void
+  /**
+   * 获取指定 key 的值，函数回调模式，若多次被赋值，回调会被多次调用
+   * set callback for event of value set for some key
+   * this will be called each time the value is set
+   * @param key
+   * @param fn
+   * @returns
+   */
+  onGot(key: string, fn: (data: any) => void): () => void;
 ```
-**调用示例**
+**示例**
 ```typescript
 import { config } from '@alilc/lowcode-engine';
 
@@ -102,6 +170,4 @@ config.onGot('keyA', (value) => {
 
 const.set('keyA', 1); // 'The value of keyA is 1'
 const.set('keyA', 2); // 'The value of keyA is 2'
-```
-## 事件（events）
-无
+```

docs/docs/api/configOptions.md

@@ -0,0 +1,306 @@
+---
+title: config options - 配置列表
+sidebar_position: 5
+---
+
+> **@types** [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)<br/>
+
+## 配置方式
+
+#### init API
+
+```javascript
+import { init } from '@alilc/lowcode-engine';
+
+init(document.getElementById('engine'), {
+  enableCondition: false,
+});
+```
+
+[**init api**](./init)
+
+#### config API
+
+```javascript
+import { config } from '@alilc/lowcode-engine';
+
+config.set('enableCondition', false)
+```
+
+[**config api**](./config)
+
+## 配置详情
+
+> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)
+
+
+### 画布
+
+#### locale - 语言
+
+`@type {string}`、`@default {zh-CN}`
+
+语言
+
+#### device - 设备类型
+
+`@type {string}`
+
+引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。
+
+插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。
+
+如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下：
+
+```css
+.lc-simulator-device-phone {
+  top: 16px;
+  bottom: 16px;
+  left: 50%;
+  width: 375px;
+  transform: translateX(-50%);
+  margin: auto;
+}
+```
+
+#### deviceClassName
+
+`@type {string}`
+
+指定初始化的 deviceClassName，挂载到画布的顶层节点上
+
+#### appHelper
+
+与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper
+
+
+#### enableCondition
+
+`@type {boolean}`
+
+是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
+
+#### disableAutoRender
+
+`@type {boolean}` `@default {false}`
+
+关闭画布自动渲染，在资产包多重异步加载的场景有效
+
+#### renderEnv - 渲染器类型
+
+渲染器类型
+
+`@type {string}`、`@default {react}`
+
+#### simulatorUrl
+
+`@type {string[]}`
+
+设置 simulator 相关的 url
+
+#### enableStrictNotFoundMode
+
+`@type {boolean}` `@default {false}`
+
+当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
+
+### 编排
+
+#### focusNodeSelector - 指定根组件
+
+配置指定节点为根组件
+
+类型定义
+
+```typescript
+  focusNodeSelector?: (rootNode: IPublicModelNode) => Node;
+```
+
+#### supportVariableGlobally - 全局变量配置
+
+`@type {boolean}` `@default {false}`
+
+设置所有属性支持变量配置
+
+开启拖拽组件时，即将被放入的容器是否有视觉反馈
+
+#### customizeIgnoreSelectors - 点击忽略
+
+配置画布中，需要屏蔽点击事件的元素，即配置的元素默认点击行为均不生效。
+
+类型定义:
+
+```typescript
+  customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[];
+```
+
+默认值:
+
+```javascript
+() => {
+  return [
+    '.next-input-group',
+    '.next-checkbox-group',
+    '.next-checkbox-wrapper',
+    '.next-date-picker',
+    '.next-input',
+    '.next-month-picker',
+    '.next-number-picker',
+    '.next-radio-group',
+    '.next-range',
+    '.next-range-picker',
+    '.next-rating',
+    '.next-select',
+    '.next-switch',
+    '.next-time-picker',
+    '.next-upload',
+    '.next-year-picker',
+    '.next-breadcrumb-item',
+    '.next-calendar-header',
+    '.next-calendar-table',
+    '.editor-container', // 富文本组件
+  ]
+}
+```
+
+#### enableCanvasLock
+
+`@type {boolean}` `@default {false}`
+
+打开画布的锁定操作
+
+#### enableLockedNodeSetting
+
+`@type {boolean}` `@default {false}`
+
+容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效
+
+#### enableMouseEventPropagationInCanvas
+
+`@type {boolean}` `@default {false}`
+
+鼠标事件（mouseover、mouseleave、mousemove）在画布中是否允许冒泡，默认不允许。
+
+#### enableReactiveContainer
+
+`@type {boolean}` `@default {false}`
+
+#### enableContextMenu - 开启右键菜单
+
+`@type {boolean}` `@default {false}`
+
+是否开启右键菜单
+
+#### disableDetecting
+
+`@type {boolean}` `@default {false}`
+
+关闭拖拽组件时的虚线响应，性能考虑
+
+
+#### disableDefaultSettingPanel
+
+`@type {boolean}` `@default {false}`
+
+禁止默认的设置面板
+
+#### disableDefaultSetters
+
+`@type {boolean}` `@default {false}`
+
+禁止默认的设置器
+
+#### stayOnTheSameSettingTab
+
+`@type {boolean}` `@default {false}`
+
+当选中节点切换时，是否停留在相同的设置 tab 上
+
+#### hideSettingsTabsWhenOnlyOneItem
+
+`@type {boolean}` `@default {false}`
+
+是否在只有一个 item 的时候隐藏设置 tabs
+
+#### hideComponentAction
+
+`@type {boolean}` `@default {false}`
+
+隐藏设计器辅助层
+
+#### thisRequiredInJSE
+
+`@type {boolean}` `@default {true}`
+
+JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false
+
+### 应用级设计器
+
+#### enableWorkspaceMode - 应用级设计模式
+
+`@type {boolean}` `@default {false}`
+
+开启应用级设计模式
+
+#### enableAutoOpenFirstWindow
+
+`@type {boolean}` `@default {true}`
+
+应用级设计模式下，自动打开第一个窗口
+
+#### workspaceEmptyComponent
+
+应用级设计模式下，当窗口为空时，展示的占位组件
+
+### 定制组件
+
+#### faultComponent
+
+组件渲染错误时的占位组件
+
+#### notFoundComponent
+
+组件不存在时的占位组件
+
+#### loadingComponent - loading 组件
+
+自定义 loading 组件
+
+### 插件
+
+#### defaultSettingPanelProps
+
+内置设置面板插件的 panelProps
+
+#### defaultOutlinePaneProps
+
+内置大纲树面板插件的 panelProps
+
+### 其他
+
+#### enableStrictPluginMode
+
+`@type {boolean}`
+
+开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项
+
+#### requestHandlersMap
+
+数据源引擎的请求处理器映射
+
+#### customPluginTransducer
+
+插件处理中间件，方便提供插件调试能力
+
+类型定义
+
+```typescript
+customPluginTransducer: async (originPlugin: IPublicTypePlugin, ctx: IPublicModelPluginContext, options): IPublicTypePlugin;
+```
+
+#### defaultOutlinePaneProps
+
+`@type {object}`
+
+大纲树插件面板默认 props
+

docs/docs/api/event.md

@@ -1,42 +1,78 @@
 ---
 title: event - 事件 API
-sidebar_position: 7
+sidebar_position: 10
 ---
+
+> **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)<br/>
+> **@since** v1.0.0
+
+
 ## 模块简介
 负责事件处理 API，支持自定义监听事件、触发事件。
 
-## 方法签名（functions）
+## 方法
 ### on
 监听事件
 
-**类型定义**
 ```typescript
-function on(event: string, listener: (...args: unknown[]) => void): void;
+/**
+ * 监听事件
+ * add monitor to a event
+ * @param event 事件名称
+ * @param listener 事件回调
+ */
+on(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable;
 ```
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### prependListener
+监听事件，会在其他回调函数之前执行
+
+```typescript
+/**
+ * 监听事件，会在其他回调函数之前执行
+ * @param event 事件名称
+ * @param listener 事件回调
+ */
+prependListener(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable;
+```
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
 
 ### off
 取消监听事件
 
-**类型定义**
 ```typescript
-function off(event: string, listener: (...args: unknown[]) => void): void;
+/**
+ * 取消监听事件
+ * cancel a monitor from a event
+ * @param event 事件名称
+ * @param listener 事件回调
+ */
+off(event: string, listener: (...args: any[]) => void): void;
 ```
 
 ### emit
 触发事件
 
-**类型定义**
-
 ```typescript
-function emit(event: string, ...args: unknown[]): void;
+/**
+ * 触发事件
+ * emit a message for a event
+ * @param event 事件名称
+ * @param args 事件参数
+ * @returns
+ */
+emit(event: string, ...args: any[]): void;
 ```
 
 ## 使用示例
 ### 事件触发和监听
+
 ```typescript
 const eventName = 'eventName';
 
 // 事件监听
+// 插件中发出的事件，默认以 `common` 为前缀，监听时需要注意下
 event.on(`common:${eventName}`);
 
 // 触发事件

docs/docs/api/hotkey.md

@@ -1,30 +1,37 @@
 ---
 title:  hotkey - 快捷键 API
-sidebar_position: 5
+sidebar_position: 10
 ---
+
+> **@types** [IPublicApiHotkey](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/hotkey.ts)<br/>
+> **@since** v1.0.0
+
 ## 模块简介
 绑定快捷键 API，可以自定义项目快捷键使用。
 
-## 方法签名（functions）
+## 方法
 ### bind
 绑定快捷键
 
-**类型定义**
 ```typescript
-function bind(
-	combos: string[] | string,
-	callback: (e: KeyboardEvent, combo?: string) => any | false,
-	action?: string
-): () => void;
+/**
+ * 绑定快捷键
+ * bind hotkey/hotkeys,
+ * @param combos 快捷键，格式如：['command + s'] 、['ctrl + shift + s'] 等
+ * @param callback 回调函数
+ * @param action
+ * @returns
+ */
+bind(
+    combos: string[] | string,
+    callback: IPublicTypeHotkeyCallback,
+    action?: string,
+  ): IPublicTypeDisposable;
 ```
+相关 types
+- [IPublicTypeHotkeyCallback](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/hotkey-callback.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
 
-**示例**
-```typescript
-hotkey.bind('command+s', (e) => {
-  e.preventDefault();
-  // command+s 快捷键按下时需要执行的逻辑
-});
-```
 
 ## 使用示例
 ### 基础示例
@@ -53,7 +60,7 @@ function saveSchema(schema) {
   // 保存 schema 相关操作
 }
 
-const saveSampleHotKey = (ctx: ILowCodePluginContext) => {
+const saveSampleHotKey = (ctx: IPublicModelPluginContext) => {
   return {
     name: 'saveSample',
     async init() {

docs/docs/api/index.md

@@ -3,14 +3,53 @@ title: API 总览
 sidebar_position: 0
 ---
 
-引擎直接提供 9 大类 API，以及若干间接的 API，具体如下图：
+引擎提供的公开 API 分为`命名空间`和`模型`两类，其中`命名空间`用于聚合一大类的 API，`模型`为各 API 涉及到的对象模型。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1645445575048-cc511d60-3b84-411d-a70e-21b7a596d09c.png#clientId=uaab5e9c4-fa7b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=695&id=u8e1d0318&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1390&originWidth=1278&originalType=binary&ratio=1&rotation=0&showTitle=false&size=410614&status=done&style=none&taskId=u9fdcdcfb-4e8b-4e22-8865-94181f458d0&title=&width=639)
+## 命名空间
 
-### API 设计约定
+引擎直接提供以下几大类 API
+
+- skeleton 面板 API
+- material 物料 API
+- project 模型 API
+- simulator-host 模拟器 API
+- hotkey 快捷键 API
+- setters 设置器 API
+- event 事件 API
+- config 配置 API
+- common 通用 API
+- logger 日志 API
+- init 初始化 API
+
+## 模型
+以下模型通过前面的 API 以返回值等形式间接透出。
+
+- document-model 文档
+- node 节点
+- node-children 节点孩子
+- props 属性集
+- prop 属性
+- setting-field 设置属性
+- setting-top-entry 设置属性集
+- component-meta 物料元数据
+- selection 画布选中
+- detecting 画布 hover
+- history 操作历史
+- window 低代码设计器窗口模型
+- detecting 画布节点悬停模型
+- modal-nodes-manager 模态节点管理器模型
+- plugin-instance 插件实例
+- drop-location 拖拽放置位置模型
+
+
+## API 设计约定
 一些 API 设计约定：
 
 1. 所有 API 命名空间都按照 variables / functions / events 来组织
 2. 事件（events）的命名格式为：on[Will|Did]VerbNoun?，参考 [https://code.visualstudio.com/api/references/vscode-api#events](https://code.visualstudio.com/api/references/vscode-api#events)
 3. 基于 Disposable 模式，对于事件的绑定、快捷键的绑定函数，返回值则是解绑函数
 4. 对于属性的导出，统一用 .xxx 的 getter 模式，（尽量）不使用 .getXxx()
+
+## experimental
+
+说明此模块处于公测阶段, API 可能会发生改变.

docs/docs/api/init.md

@@ -1,107 +1,25 @@
 ---
 title: init - 初始化 API
-sidebar_position: 10
+sidebar_position: 0
 ---
+
+> **@since** v1.0.0
+
+
 ## 模块简介
 提供 init 等方法
-## 方法签名
-#### 1. init
+## 方法
+#### init
 初始化引擎
 
 **方法定义**
 ```typescript
-function init(container?: Element, options?: EngineOptions): void
+function init(container?: Element, options?: IPublicTypeEngineOptions): void
 ```
 
-**初始化引擎的参数**
-```typescript
-interface EngineOptions {
-  /**
-   * 指定初始化的 device
-   */
-  device?: 'default' | 'mobile';
-  /**
-   * 指定初始化的 deviceClassName，挂载到画布的顶层节点上
-   */
-  deviceClassName?: string;
-  /**
-   * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
-   */
-  enableCondition?: boolean;
-  /**
-   * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false
-   */
-  enableReactiveContainer?: boolean;
-  /**
-   * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false
-   */
-  disableAutoRender?: boolean;
-  /**
-   * 打开画布的锁定操作，默认值：false
-   */
-  enableCanvasLock?: boolean;
-  /**
-   * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效，默认值为：false
-   */
-  enableLockedNodeSetting?: boolean;
-  /**
-   * 开启画布上的鼠标事件的冒泡，默认值：false
-   */
-  enableMouseEventPropagationInCanvas?: boolean;
-  /**
-   * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false
-   */
-  disableDetecting?: boolean;
-  /**
-   * 定制画布中点击被忽略的 selectors，默认值：undefined
-   */
-  customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[]) => string[];
-  /**
-   * 禁止默认的设置面板，默认值：false
-   */
-  disableDefaultSettingPanel?: boolean;
-  /**
-   * 禁止默认的设置器，默认值：false
-   */
-  disableDefaultSetters?: boolean;
-  /**
-   * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false
-   */
-  stayOnTheSameSettingTab?: boolean;
-  /**
-   * 自定义 loading 组件
-   */
-  loadingComponent?: ComponentType;
+[**初始化引擎配置参数列表**](./configOptions)
 
-  /**
-   * @default true
-   * JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false
-   */
-  thisRequiredInJSE?: boolean;
 
-  /**
-   * @default false
-   * >= 1.0.14
-   * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
-   */
-  enableStrictNotFoundMode?: boolean;
-
-  /**
-   * 配置指定节点为根组件
-   * >= 1.0.15
-   */
-  focusNodeSelector?: (rootNode: Node) => Node;
-
-  /**
-   * 工具类扩展
-   */
-  appHelper?: {
-    utils?: {};
-  }
-
-  [key: string]: any;
-}
-```
 ## 使用示例
 ```typescript
 import { init } from '@alilc/lowcode-engine';
@@ -110,7 +28,7 @@ init(document.getElementById('engine'), {
   enableCondition: false,
 });
 ```
-###
+
 ### 默认打开移动端画布
 ```typescript
 import { init } from '@alilc/lowcode-engine';
@@ -135,4 +53,4 @@ init({
 ```
 
 在引擎中即可这样使用。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657272220368-9ee4430e-9e42-4746-9de8-a233840b0950.png#clientId=u951c1fcc-9dab-4&crop=0&crop=0&crop=1&crop=1&errorMessage=unknown%20error&from=paste&height=292&id=uacb8d50d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1796&originWidth=3584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1641368&status=error&style=none&taskId=u559fb5cd-4a48-4732-b169-c9868a6d7b7&title=&width=582)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01FWvu051OxAEYrHBy5_!!6000000001771-2-tps-3584-1796.png)

docs/docs/api/logger.md

@@ -1,49 +1,80 @@
 ---
 title: logger - 日志 API
-sidebar_position: 9
+sidebar_position: 10
 ---
-## 模块简介
-引擎日志模块，可以按照 **日志级别 **和** 业务类型 **两个维度来定制日志，基于 [zen-logger](https://web.npm.alibaba-inc.com/package/zen-logger) 封装。
-> 注：日志级别可以通过 url query 动态调整，详见下方使用示例。
 
-## 变量（variables）
-无
-## 方法签名（functions）
-### log / warn / error / info / debug
+> **@types** [IPublicApiLogger](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/logger.ts)<br/>
+> **@since** v1.0.0
+
+
+## 模块简介
+引擎日志模块，可以按照 **日志级别 **和** 业务类型 **两个维度来定制日志。
+> 注：日志级别可以通过 url query 动态调整，详见下方[查看示例](#查看示例)。<br/>
+> 参考 [zen-logger](https://web.npm.alibaba-inc.com/package/zen-logger) 实现进行封装
+
+## 方法
+
 日志记录方法
 
-**类型定义**
 ```typescript
-function log(args: any[]): void
-function warn(args: any[]): void
-function error(args: any[]): void
-function info(args: any[]): void
-function debug(args: any[]): void
-```
-**调用示例**
-```typescript
-import { logger } from '@alilc/lowcode-engine';
+/**
+ * debug info
+ */
+debug(...args: any | any[]): void;
 
+/**
+ * normal info output
+ */
+info(...args: any | any[]): void;
+
+/**
+ * warning info output
+ */
+warn(...args: any | any[]): void;
+
+/**
+ * error info output
+ */
+error(...args: any | any[]): void;
+
+/**
+ * log info output
+ */
+log(...args: any | any[]): void;
+```
+
+## 输出示例
+
+```typescript
+import { Logger } from '@alilc/lowcode-utils';
+const logger = new Logger({ level: 'warn', bizName: 'myPlugin:moduleA' });
 logger.log('Awesome Low-Code Engine');
 ```
-## 事件（events）
-无
 
-## 使用示例
-```typescript
-import { logger } from '@alilc/lowcode-engine';
+## 查看示例
 
-// 内部实现：logger = getLogger({ level: 'warn', bizName: 'designer:pluginManager' })
+开启查看方式：
 
-// 若在 url query 中增加 `__logConf__` 可改变打印日志级别和限定业务类型日志
-// 默认：__logConf__=warn:*
-logger.log('log');          // 不输出
-logger.warn('warn');        // 输出
-logger.error('error');      // 输出
-
-// 比如：__logConf__=log:designer:pluginManager
-logger.log('log');          // 输出
-logger.warn('warn');        // 输出
-logger.error('error');      // 输出
+- 方式 1：所有 logger 创建时会有默认输出的 level, 默认为 warn , 即只展示 warn , error
+- 方式 2：url 上追加 __logConf__进行开启，示例如下
+
+```
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn
+// 开启所有 bizName的 warn 和 error
+
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=debug
+// 开启所有 bizName的 debug, log, info, warn 和 error
+
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=log
+// 开启所有 bizName的 log, info, warn 和 error
+
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|*
+// 同 __logConf__=warn
+
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|bizName
+// 开启 bizName 的 debug, log, info, warn 和 error
+
+https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|partOfBizName
+// 开启 bizName like '%partOfBizName%' 的 debug, log, info, warn 和 error
 
 ```

docs/docs/api/material.md

@@ -1,23 +1,43 @@
 ---
 title: material - 物料 API
-sidebar_position: 2
+sidebar_position: 10
 ---
-# 模块简介
+
+> **@types** [IPublicApiMaterial](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/material.ts)<br/>
+> **@since** v1.0.0
+
+
+## 模块简介
 负责物料相关的 API，包括资产包、设计器辅助层、物料元数据和物料元数据管道函数。
 
-# 变量（variables）
-## componentsMap
+## 变量
+### componentsMap
 获取组件 map 结构
+```typescript
+/**
+  * 获取组件 map 结构
+  * get map of components
+  */
+get componentsMap(): { [key: string]: IPublicTypeNpmInfo | ComponentType<any> | object } ;
+```
+相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts)
 
-# 方法签名（functions）
-## 资产包
-### setAssets
+## 方法
+
+### 资产包
+#### setAssets
 设置「[资产包](/site/docs/specs/lowcode-spec#2-协议结构)」结构
 
-**类型定义**
 ```typescript
-function setAssets(assets: AssetsJson): void;
+/**
+ * 设置「资产包」结构
+ * set data for Assets
+ * @returns void
+ */
+setAssets(assets: IPublicTypeAssetsJson): void;
 ```
+相关类型：[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
+
 
 **示例**
 直接在项目中引用 npm 包
@@ -28,34 +48,41 @@ import assets from '@alilc/mc-assets-<siteId>/assets.json';
 material.setAssets(assets);
 ```
 
-通过物料中心接口动态引入资产包
+通过接口动态引入资产包
 ```typescript
-import { ILowCodePluginContext, material, plugins } from '@alilc/lowcode-engine'
+import { material, plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
 // 动态加载 assets
-plugins.register((ctx: ILowCodePluginContext) => {
+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)
+        // 将下述链接替换为您的物料描述地址即可。
+        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)
-      }
+        console.error(err);
+      };
     },
-  }
-}).catch(err => console.error(err))
+  };
+}).catch(err => console.error(err));
 ```
 
-### getAssets
+#### getAssets
 获取「资产包」结构
-**类型定义**
+
 ```typescript
-function getAssets(): AssetsJson;
+/**
+ * 获取「资产包」结构
+ * get AssetsJson data
+ * @returns IPublicTypeAssetsJson
+ */
+getAssets(): IPublicTypeAssetsJson;
 ```
+相关类型：[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
 
 
 **示例**
@@ -65,14 +92,19 @@ import { material } from '@alilc/lowcode-engine';
 material.getAssets();
 ```
 
-### loadIncrementalAssets
+#### loadIncrementalAssets
 加载增量的「资产包」结构，该增量包会与原有的合并
 
-**类型定义**
 ```typescript
-function loadIncrementalAssets(incrementalAssets: AssetsJson): void;
+/**
+ * 加载增量的「资产包」结构，该增量包会与原有的合并
+ * load Assets incrementally, and will merge this with exiting assets
+ * @param incrementalAssets
+ * @returns
+ */
+loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): Promise<void>;
 ```
-说明：**该增量包会与原有的合并**
+相关类型：[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
 
 **示例**
 ```typescript
@@ -83,55 +115,36 @@ import assets2 from '@alilc/mc-assets-<siteId>/assets.json';
 material.setAssets(assets1);
 material.loadIncrementalAssets(assets2);
 ```
-## 设计器辅助层
-### addBuiltinComponentAction
-在设计器辅助层增加一个扩展 action
-**类型定义**
+
+更新特定物料的描述文件
+
 ```typescript
-function addBuiltinComponentAction(action: ComponentAction): void;
-
-export interface ComponentAction {
-  /**
-   * behaviorName
-   */
-  name: string;
-  /**
-   * 菜单名称
-   */
-  content: string | ReactNode | ActionContentObject;
-  /**
-   * 子集
-   */
-  items?: ComponentAction[];
-  /**
-   * 显示与否
-   * always: 无法禁用
-   */
-  condition?: boolean | ((currentNode: any) => boolean) | 'always';
-  /**
-   * 显示在工具条上
-   */
-  important?: boolean;
-}
-
-export interface ActionContentObject {
-  /**
-   * 图标
-   */
-  icon?: IconType;
-  /**
-   * 描述
-   */
-  title?: TipContent;
-  /**
-   * 执行动作
-   */
-  action?: (currentNode: any) => void;
-}
-
-export type IconType = string | ReactElement | ComponentType<any> | IconConfig;
+import { material } from '@alilc/lowcode-engine';
+material.loadIncrementalAssets({
+  version: '',
+  components: [
+      {
+          "componentName": 'Button',
+          "props": [{ name: 'new', title: 'new', propType: 'string' }]
+      }
+  ],
+})
 ```
 
+### 设计器辅助层
+#### addBuiltinComponentAction
+在设计器辅助层增加一个扩展 action
+
+```typescript
+/**
+ * 在设计器辅助层增加一个扩展 action
+ * add an action button in canvas context menu area
+ * @param action
+ */
+addBuiltinComponentAction(action: IPublicTypeComponentAction): void;
+```
+相关类型：[IPublicTypeComponentAction](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/component-action.ts)
+
 
 **示例**
 新增设计扩展位，并绑定事件
@@ -151,15 +164,28 @@ material.addBuiltinComponentAction({
   condition: true,
 });
 ```
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1645446545381-aa6f4543-5f6e-4a03-91c1-e88817823153.png#clientId=u51926daa-3723-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=198&id=u34e8d0d9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=198&originWidth=230&originalType=binary&ratio=1&rotation=0&showTitle=false&size=16907&status=done&style=none&taskId=u27bac39f-a38f-43bf-a0e5-157118e3aa6&title=&width=230)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01jDbN7B1KfWVzJ16tw_!!6000000001191-2-tps-230-198.png)
 
-### removeBuiltinComponentAction
+#### removeBuiltinComponentAction
 移除设计器辅助层的指定 action
-**类型定义**
+
 ```typescript
-function removeBuiltinComponentAction(name: string): void;
+/**
+ * 移除设计器辅助层的指定 action
+ * remove a builtin action button from canvas context menu area
+ * @param name
+ */
+removeBuiltinComponentAction(name: string): void;
 ```
 
+##### 内置设计器辅助 name
+
+- remove：删除
+- hide：隐藏
+- copy：复制
+- lock：锁定，不可编辑
+- unlock：解锁，可编辑
+
 **示例**
 ```typescript
 import { material } from '@alilc/lowcode-engine';
@@ -168,16 +194,25 @@ material.removeBuiltinComponentAction('myIconName');
 ```
 
 
-### modifyBuiltinComponentAction
+#### modifyBuiltinComponentAction
 修改已有的设计器辅助层的指定 action
-**类型定义**
+
 ```typescript
-function modifyBuiltinComponentAction(
-  actionName: string,
-  handle: (action: ComponentAction) => void
-): void;
+/**
+ * 修改已有的设计器辅助层的指定 action
+ * modify a builtin action button in canvas context menu area
+ * @param actionName
+ * @param handle
+ */
+modifyBuiltinComponentAction(
+    actionName: string,
+    handle: (action: IPublicTypeComponentAction) => void,
+  ): void;
 ```
-**内置设计器辅助 name**
+相关类型：[IPublicTypeComponentAction](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/component-action.ts)
+
+
+##### 内置设计器辅助 name
 
 - remove：删除
 - hide：隐藏
@@ -201,15 +236,105 @@ material.modifyBuiltinComponentAction('remove', (action) => {
   }
 });
 ```
-###
-## 物料元数据
-### getComponentMeta
-获取指定名称的物料元数据
-**类型定义**
+
+### 右键菜单项
+#### addContextMenuOption
+
+添加右键菜单项
+
 ```typescript
-function getComponentMeta(componentName: string): ComponentMeta;
+/**
+ * 添加右键菜单项
+ * @param action
+ */
+addContextMenuOption(action: IPublicTypeContextMenuAction): void;
 ```
 
+示例
+
+```typescript
+import { IPublicEnumContextMenuType } from '@alilc/lowcode-types';
+
+material.addContextMenuOption({
+  name: 'parentItem',
+  title: 'Parent Item',
+  condition: (nodes) => true,
+  items: [
+    {
+      name: 'childItem1',
+      title: 'Child Item 1',
+      action: (nodes) => console.log('Child Item 1 clicked', nodes),
+      condition: (nodes) => true
+    },
+    // 分割线
+    {
+      type: IPublicEnumContextMenuType.SEPARATOR
+      name: 'separator.1'
+    }
+    // 更多子菜单项...
+  ]
+});
+
+```
+
+#### removeContextMenuOption
+
+删除特定右键菜单项
+
+```typescript
+/**
+ * 删除特定右键菜单项
+ * @param name
+ */
+removeContextMenuOption(name: string): void;
+```
+
+#### adjustContextMenuLayout
+
+调整右键菜单项布局，每次调用都会覆盖之前注册的调整函数，只有最后注册的函数会被应用。
+
+```typescript
+/**
+ * 调整右键菜单项布局
+ * @param actions
+ */
+adjustContextMenuLayout(fn: (actions: IPublicTypeContextMenuItem[]) => IPublicTypeContextMenuItem[]): void;
+```
+
+**示例**
+
+通过 adjustContextMenuLayout 补充分割线
+
+```typescript
+material.adjustContextMenuLayout((actions: IPublicTypeContextMenuAction) => {
+  const names = ['a', 'b'];
+  const newActions = [];
+  actions.forEach(d => {
+    newActions.push(d);
+    if (names.include(d.name)) {
+      newActions.push({ type: 'separator' })
+    }
+  });
+  return newActions
+})
+```
+
+### 物料元数据
+
+#### getComponentMeta
+获取指定名称的物料元数据
+
+```typescript
+/**
+ * 获取指定名称的物料元数据
+ * get component meta by component name
+ * @param componentName
+ * @returns
+ */
+getComponentMeta(componentName: string): IPublicModelComponentMeta | null;
+```
+相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
+
 **示例**
 ```typescript
 import { material } from '@alilc/lowcode-engine';
@@ -217,12 +342,19 @@ import { material } from '@alilc/lowcode-engine';
 material.getComponentMeta('Input');
 ```
 
-### getComponentMetasMap
+#### getComponentMetasMap
+
 获取所有已注册的物料元数据
-**类型定义**
+
 ```typescript
-function getComponentMetasMap(): new Map<string, ComponentMeta>;
+  /**
+   * 获取所有已注册的物料元数据
+   * get map of all component metas
+   * @returns
+   */
+  getComponentMetasMap(): Map<string, IPublicModelComponentMeta>;
 ```
+相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
 
 **示例**
 ```typescript
@@ -231,16 +363,33 @@ import { material } from '@alilc/lowcode-engine';
 material.getComponentMetasMap();
 ```
 
+#### refreshComponentMetasMap
+
+刷新 componentMetasMap，可触发模拟器里的 components 重新构建
+
+**@since v1.1.7**
 
-## 物料元数据管道函数
-### registerMetadataTransducer
-注册物料元数据管道函数，在物料信息初始化时执行。
-**类型定义**
 ```typescript
-function registerMetadataTransducer(
-  transducer: MetadataTransducer, // 管道函数
-  level?: number,                 // 优先级
-  id?: string | undefined,        // id
+  refreshComponentMetasMap(): void;
+```
+
+### 物料元数据管道函数
+#### registerMetadataTransducer
+注册物料元数据管道函数，在物料信息初始化时执行。
+
+```typescript
+/**
+ * 注册物料元数据管道函数，在物料信息初始化时执行。
+ * register transducer to process component meta, which will be
+ * excuted during component meta`s initialization
+ * @param transducer
+ * @param level
+ * @param id
+ */
+registerMetadataTransducer(
+  transducer: IPublicTypeMetadataTransducer,
+  level?: number,
+  id?: string | undefined
 ): void;
 ```
 
@@ -289,27 +438,64 @@ function addonCombine(metadata: TransformedComponentMetadata) {
 material.registerMetadataTransducer(addonCombine, 1, 'parse-func');
 ```
 
-### getRegisteredMetadataTransducers
-获取所有物料元数据管道函数
-**类型定义**
+删除高级 Tab
+
 ```typescript
-function getRegisteredMetadataTransducers(): MetadataTransducer[];
+import { material } from '@alilc/lowcode-engine';
+import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';
+
+material.registerMetadataTransducer((transducer) => {
+  const combined: IPublicTypeFieldConfig[] = [];
+
+  transducer.configure.combined?.forEach(d => {
+    if (d.name !== '#advanced') {
+      combined.push(d);
+    }
+  });
+
+  return {
+    ...transducer,
+    configure: {
+      ...transducer.configure,
+      combined,
+    }
+  };
+}, 111, 'parse-func');
+```
+
+#### getRegisteredMetadataTransducers
+获取所有物料元数据管道函数
+
+```typescript
+/**
+ * 获取所有物料元数据管道函数
+ * get all registered metadata transducers
+ * @returns {IPublicTypeMetadataTransducer[]}
+ */
+getRegisteredMetadataTransducers(): IPublicTypeMetadataTransducer[];
 ```
 
 **示例**
 ```typescript
 import { material } from '@alilc/lowcode-engine'
 
-material.getRegisteredMetadataTransducers('parse-func');
+material.getRegisteredMetadataTransducers();
 ```
-##
-# 事件（Event）
+## 事件
 ### onChangeAssets
 监听 assets 变化的事件
-**类型定义**
+
 ```typescript
-function onChangeAssets(fn: () => void): void;
+/**
+ * 监听 assets 变化的事件
+ * add callback for assets changed event
+ * @param fn
+ */
+onChangeAssets(fn: () => void): IPublicTypeDisposable;
 ```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 **示例**
 ```typescript
 import { material } from '@alilc/lowcode-engine';

docs/docs/api/model/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "模型定义 Models",
+  "position": 100,
+  "collapsed": false,
+  "collapsible": true
+}

docs/docs/api/model/clipboard.md

@@ -0,0 +1,43 @@
+---
+title: Clipboard
+sidebar_position: 14
+---
+
+> **@types** [IPublicModelClipboard](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/clipboard.ts)<br/>
+> **@since** v1.1.0
+
+## 方法
+
+### setData
+
+给剪贴板赋值
+
+```typescript
+/**
+ * 给剪贴板赋值
+ * set data to clipboard
+ *
+ * @param {*} data
+ * @since v1.1.0
+ */
+setData(data: any): void;
+```
+
+### waitPasteData
+
+设置剪贴板数据设置的回调
+
+```typescript
+/**
+ * 设置剪贴板数据设置的回调
+ * set callback for clipboard provide paste data
+ *
+ * @param {KeyboardEvent} keyboardEvent
+ * @param {(data: any, clipboardEvent: ClipboardEvent) => void} cb
+ * @since v1.1.0
+ */
+waitPasteData(
+    keyboardEvent: KeyboardEvent,
+    cb: (data: any, clipboardEvent: ClipboardEvent) => void,
+  ): void;
+```

docs/docs/api/model/component-meta.md

@@ -0,0 +1,173 @@
+---
+title: ComponentMeta
+sidebar_position: 15
+---
+
+> **@types** [IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+组件元数据信息模型
+
+## 属性
+
+### componentName
+
+组件名
+
+`@type {string}`
+
+### isContainer
+
+是否是「容器型」组件
+
+`@type {boolean}`
+
+### isMinimalRenderUnit
+是否是最小渲染单元
+
+当组件需要重新渲染时：
+- 若为最小渲染单元，则只渲染当前组件，
+- 若不为最小渲染单元，则寻找到上层最近的最小渲染单元进行重新渲染，直至根节点。
+
+`@type {boolean}`
+
+### isModal
+
+是否为「模态框」组件
+
+`@type {boolean}`
+
+### configure
+
+获取用于设置面板显示用的配置
+
+`@type {IPublicTypeFieldConfig[]}`
+
+相关类型：[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts)
+
+### title
+
+标题
+
+`@type {string | IPublicTypeI18nData | ReactElement}`
+
+相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts)
+
+### icon
+
+图标
+
+`@type {IPublicTypeIconType}`
+
+相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts)
+
+### npm
+
+组件 npm 信息
+
+`@type {IPublicTypeNpmInfo}`
+
+相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts)
+
+### availableActions
+
+获取元数据
+
+`@type {IPublicTypeTransformedComponentMetadata}`
+
+相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts)
+
+### advanced
+
+组件元数据中高级配置部分
+
+`@type {IPublicTypeAdvanced}`
+
+相关类型：[IPublicTypeAdvanced](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/advanced.ts)
+
+## 方法
+
+### setNpm
+
+设置 npm 信息
+
+```typescript
+/**
+ * 设置 npm 信息
+ * set method for npm inforamtion
+ * @param npm
+ */
+setNpm(npm: IPublicTypeNpmInfo): void;
+```
+
+相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts)
+
+### getMetadata
+
+获取元数据
+
+```typescript
+/**
+ * 获取元数据
+ * get component metadata
+ */
+getMetadata(): IPublicTypeTransformedComponentMetadata;
+```
+
+相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts)
+
+### checkNestingUp
+
+检测当前对应节点是否可被放置在父节点中
+
+```typescript
+/**
+ * 检测当前对应节点是否可被放置在父节点中
+ * check if the current node could be placed in parent node
+ * @param my 当前节点
+ * @param parent 父节点
+ */
+checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)
+
+
+### checkNestingDown
+
+检测目标节点是否可被放置在父节点中
+
+```typescript
+/**
+ * 检测目标节点是否可被放置在父节点中
+ * check if the target node(s) could be placed in current node
+ * @param my 当前节点
+ * @param parent 父节点
+ */
+checkNestingDown(
+    my: IPublicModelNode | IPublicTypeNodeData,
+    target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[],
+  ): boolean;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)
+- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+
+### refreshMetadata
+
+刷新元数据，会触发元数据的重新解析和刷新
+
+```typescript
+/**
+ * 刷新元数据，会触发元数据的重新解析和刷新
+ * refresh metadata
+ */
+refreshMetadata(): void;
+```

docs/docs/api/model/detecting.md

@@ -0,0 +1,87 @@
+---
+title: Detecting
+sidebar_position: 6
+---
+> **@types** [IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+画布节点悬停模型
+
+## 属性
+
+### current
+
+当前 hover 的节点
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+**@since v1.0.16**
+
+### enable
+
+是否启用
+
+`@type {boolean}`
+
+
+## 方法
+### capture
+
+hover 指定节点
+
+```typescript
+/**
+ * hover 指定节点
+ * capture node with nodeId
+ * @param id 节点 id
+ */
+capture(id: string): void;
+```
+
+### release
+
+hover 离开指定节点
+
+```typescript
+/**
+ * hover 离开指定节点
+ * release node with nodeId
+ * @param id 节点 id
+ */
+release(id: string): void;
+```
+
+### leave
+
+清空 hover 态
+
+```typescript
+/**
+ * 清空 hover 态
+ * clear all hover state
+ */
+leave(): void;
+```
+
+## 事件
+### onDetectingChange
+hover 节点变化事件
+
+```typescript
+/**
+ * hover 节点变化事件
+ * set callback which will be called when hovering object changed.
+ * @since v1.1.0
+ */
+onDetectingChange(fn: (node: IPublicModelNode | null) => void): IPublicTypeDisposable;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+**@since v1.1.0**

docs/docs/api/model/document-model.md

@@ -0,0 +1,408 @@
+---
+title: DocumentModel
+sidebar_position: 0
+---
+> **@types** [IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+文档模型
+
+## 属性
+
+### id
+
+唯一 ID
+
+`@type {string}`
+
+### selection
+
+画布节点选中区模型实例
+
+`@type {IPublicModelSelection}`
+
+相关章节：[节点选中区模型](./selection)
+
+相关类型：[IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts)
+
+### detecting
+
+画布节点 hover 区模型实例
+
+`@type {IPublicModelDetecting}`
+
+相关章节：[画布节点悬停模型](./detecting)
+
+相关类型：[IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts)
+
+### history
+
+操作历史模型实例
+
+`@type {IPublicModelHistory}`
+
+相关章节：[操作历史模型](./history)
+
+相关类型：[IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts)
+
+### project
+
+获取当前文档模型所属的 project
+
+`@type {IPublicApiProject}`
+
+相关类型：[IPublicApiProject](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/project.ts)
+
+### root
+
+获取文档的根节点
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### nodesMap
+
+获取文档下所有节点 Map, key 为 nodeId
+
+`@type {Map<string, IPublicModelNode>} `
+
+
+相关章节：[节点模型](./node)
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### modalNodesManager
+
+模态节点管理器
+
+`@type {IPublicModelModalNodesManager | null}`
+
+相关章节：[模态节点管理](./modal-nodes-manager)
+
+相关类型：[IPublicModelModalNodesManager](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/modal-nodes-manager.ts)
+
+### dropLocation
+
+文档的 dropLocation
+
+`@type {IPublicModelDropLocation | null}`
+
+
+相关类型：[IPublicModelDropLocation](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/drop-location.ts)
+
+**@since v1.1.0**
+
+## 方法
+### getNodeById
+
+根据 nodeId 返回 [Node](./node) 实例
+
+```typescript
+/**
+ * 根据 nodeId 返回 Node 实例
+ * get node by nodeId
+ * @param nodeId
+ * @returns
+ */
+getNodeById(nodeId: string): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### importSchema
+
+导入 schema
+
+```typescript
+/**
+ * 导入 schema
+ * import schema data
+ * @param schema
+ */
+importSchema(schema: IPublicTypeRootSchema): void;
+```
+
+相关类型：[IPublicTypeRootSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/root-schema.ts)
+
+
+### exportSchema
+导出 schema
+
+```typescript
+/**
+ * 导出 schema
+ * export schema
+ * @param stage
+ * @returns
+ */
+exportSchema(stage: IPublicEnumTransformStage): IPublicTypeRootSchema | undefined;
+```
+
+相关类型：
+- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
+- [IPublicTypeRootSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/root-schema.ts)
+
+### insertNode
+
+插入节点
+
+```typescript
+/**
+ * 插入节点
+ * insert a node
+ */
+insertNode(
+  parent: IPublicModelNode,
+  thing: IPublicModelNode,
+  at?: number | null | undefined,
+  copy?: boolean | undefined
+): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### createNode
+
+创建一个节点
+
+```typescript
+/**
+ * 创建一个节点
+ * create a node
+ * @param data
+ * @returns
+ */
+createNode(data: any): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### removeNode
+
+移除指定节点/节点id
+
+```typescript
+/**
+ * 移除指定节点/节点id
+ * remove a node by node instance or nodeId
+ * @param idOrNode
+ */
+removeNode(idOrNode: string | IPublicModelNode): void;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### checkNesting
+检查拖拽放置的目标节点是否可以放置该拖拽对象
+
+```typescript
+/**
+ * 检查拖拽放置的目标节点是否可以放置该拖拽对象
+ * check if dragOjbect can be put in this dragTarget
+ * @param dropTarget 拖拽放置的目标节点
+ * @param dragObject 拖拽的对象
+ * @returns boolean 是否可以放置
+ * @since v1.0.16
+ */
+checkNesting(
+  dropTarget: IPublicModelNode,
+  dragObject: IPublicTypeDragNodeObject | IPublicTypeDragNodeDataObject
+): boolean;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDragNodeObject](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/drag-node-object.ts)
+- [IPublicTypeDragNodeDataObject](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/drag-node-object-data.ts)
+
+**@since v1.0.16**
+
+### isDetectingNode
+判断是否当前节点处于被探测状态
+
+```typescript
+/**
+ * 判断是否当前节点处于被探测状态
+ * check is node being detected
+ * @param node
+ * @since v1.1.0
+ */
+isDetectingNode(node: IPublicModelNode): boolean;
+```
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+**@since v1.1.0**
+
+
+## 事件
+### onAddNode
+
+当前 document 新增节点事件
+
+```typescript
+/**
+ * 当前 document 新增节点事件
+ * set callback for event on node is created for a document
+ */
+onAddNode(fn: (node: IPublicModelNode) => void): IPublicTypeDisposable;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onMountNode
+
+当前 document 新增节点事件，此时节点已经挂载到 document 上
+
+```typescript
+/**
+ * 当前 document 新增节点事件，此时节点已经挂载到 document 上
+ * set callback for event on node is mounted to canvas
+ */
+onMountNode(fn: (payload: { node: IPublicModelNode }) => void): IPublicTypeDisposable;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onRemoveNode
+当前 document 删除节点事件
+
+```typescript
+/**
+ * 当前 document 删除节点事件
+ * set callback for event on node is removed
+ */
+onRemoveNode(fn: (node: IPublicModelNode) => void): IPublicTypeDisposable;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+
+### onChangeDetecting
+
+当前 document 的 hover 变更事件
+
+```typescript
+/**
+ * 当前 document 的 hover 变更事件
+ *
+ * set callback for event on detecting changed
+ */
+onChangeDetecting(fn: (node: IPublicModelNode) => void): IPublicTypeDisposable;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeSelection
+
+当前 document 的选中变更事件
+
+```typescript
+/**
+ * 当前 document 的选中变更事件
+ * set callback for event on selection changed
+ */
+onChangeSelection(fn: (ids: string[]) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeNodeVisible
+
+当前 document 的节点显隐状态变更事件
+
+```typescript
+/**
+ * 当前 document 的节点显隐状态变更事件
+ * set callback for event on visibility changed for certain node
+ * @param fn
+ */
+onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable;
+```
+
+- 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeNodeChildren
+
+当前 document 的节点 children 变更事件
+
+```typescript
+onChangeNodeChildren(fn: (info?: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeNodeProp
+当前 document 节点属性修改事件
+
+```typescript
+onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onImportSchema
+当前 document 导入新的 schema 事件
+```typescript
+/**
+ * import schema event
+ * @param fn
+ * @since v1.0.15
+ */
+onImportSchema(fn: (schema: IPublicTypeRootSchema) => void): IPublicTypeDisposable;
+```
+相关类型：
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+- [IPublicTypeRootSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/root-schema.ts)
+
+**@since v1.0.15**
+
+### onFocusNodeChanged
+设置聚焦节点变化的回调
+
+```typescript
+/**
+ * 设置聚焦节点变化的回调
+ * triggered focused node is set mannually from plugin
+ * @param fn
+ * @since v1.1.0
+ */
+onFocusNodeChanged(
+  fn: (doc: IPublicModelDocumentModel, focusNode: IPublicModelNode) => void,
+): IPublicTypeDisposable;
+```
+相关类型：
+- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+**@since v1.1.0**
+
+### onDropLocationChanged
+设置 DropLocation 变化的回调
+
+```typescript
+/**
+ * 设置 DropLocation 变化的回调
+ * triggered when drop location changed
+ * @param fn
+ * @since v1.1.0
+ */
+onDropLocationChanged(fn: (doc: IPublicModelDocumentModel) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+**@since v1.1.0**

docs/docs/api/model/dragon.md

@@ -0,0 +1,129 @@
+---
+title: Dragon
+sidebar_position: 99
+---
+> **@types** [IPublicModelDragon](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/dragon.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+拖拽对象
+
+### 对应接口
+```typescript
+import { IPublicModelDragon } from '@alilc/lowcode-types';
+```
+
+### 支持版本
+
+**@since** v1.1.0
+
+## 属性
+
+### dragging
+
+是否正在拖动
+
+```typescript
+/**
+ * is dragging or not
+ */
+get dragging(): boolean;
+```
+
+## 方法
+
+### onDragstart
+
+绑定 dragstart 事件
+
+```typescript
+/**
+ * 绑定 dragstart 事件
+ * bind a callback function which will be called on dragging start
+ * @param func
+ * @returns
+ */
+onDragstart(func: (e: IPublicModelLocateEvent) => any): () => void;
+```
+
+### onDrag
+
+绑定 drag 事件
+```typescript
+/**
+ * 绑定 drag 事件
+ * bind a callback function which will be called on dragging
+ * @param func
+ * @returns
+ */
+onDrag(func: (e: IPublicModelLocateEvent) => any): () => void;
+```
+
+### onDragend
+
+绑定 dragend 事件
+
+```typescript
+/**
+ * 绑定 dragend 事件
+ * bind a callback function which will be called on dragging end
+ * @param func
+ * @returns
+ */
+onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): () => void;
+```
+
+### from
+
+设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost
+
+```typescript
+/**
+ * 设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost
+* set a html element as shell to dragon as monitoring target, and
+* set boost function which is used to transform a MouseEvent to type
+* IPublicTypeDragNodeDataObject.
+ * @param shell 拖拽监听的区域
+ * @param boost 拖拽转换函数
+ */
+from(shell: Element, boost: (e: MouseEvent) => IPublicTypeDragNodeDataObject | null): any;
+```
+
+### boost
+
+发射拖拽对象
+```typescript
+/**
+ * 发射拖拽对象
+ * boost your dragObject for dragging(flying)
+ *
+ * @param dragObject 拖拽对象
+ * @param boostEvent 拖拽初始时事件
+ */
+boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: IPublicModelNode): void;
+```
+
+### addSensor
+
+添加投放感应区
+
+```typescript
+/**
+ * 添加投放感应区
+ * add sensor area
+ */
+addSensor(sensor: any): void;
+```
+
+### removeSensor
+
+移除投放感应
+
+```typescript
+/**
+ * 移除投放感应
+ * remove sensor area
+ */
+removeSensor(sensor: any): void;
+```

docs/docs/api/model/drop-location.md

@@ -0,0 +1,54 @@
+---
+title: DropLocation
+sidebar_position: 13
+---
+
+> **@types** [IPublicModelDropLocation](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/drop-location.ts)<br/>
+> **@since** v1.1.0
+
+
+## 基本介绍
+
+拖拽放置位置模型
+
+## 属性
+
+### target
+
+拖拽放置位置目标
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### detail
+
+拖拽放置位置详情
+
+`@type {IPublicTypeLocationDetail}`
+
+相关类型：[IPublicTypeLocationDetail](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/location-detail.ts)
+
+### event
+
+拖拽放置位置对应的事件
+
+`@type {IPublicTypeLocationDetail}`
+
+相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts)
+
+## 方法
+
+### clone
+
+获取一份当前对象的克隆
+
+```typescript
+/**
+ * 获取一份当前对象的克隆
+ * get a clone object of current dropLocation
+ */
+clone(event: IPublicModelLocateEvent): IPublicModelDropLocation;
+```
+
+相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts)

docs/docs/api/model/editor-view.md

@@ -0,0 +1,21 @@
+---
+title: EditorView
+sidebar_position: 12
+---
+
+> **[@experimental](./#experimental)**<br/>
+> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)<br/>
+> **@since** v1.1.7
+
+窗口编辑视图
+
+## 类型定义
+
+```
+import { IPublicModelPluginContext } from "./plugin-context";
+
+export interface IPublicModelEditorView extends IPublicModelPluginContext {};
+
+```
+
+相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)

docs/docs/api/model/history.md

@@ -0,0 +1,124 @@
+---
+title: History
+sidebar_position: 5
+---
+> **@types** [IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+操作历史记录模型
+
+## 方法
+### go
+
+历史记录跳转到指定位置
+
+```typescript
+/**
+ * 历史记录跳转到指定位置
+ * go to a specific history
+ * @param cursor
+ */
+go(cursor: number): void;
+```
+
+### back
+
+历史记录后退
+
+```typescript
+/**
+ * 历史记录后退
+ * go backward in history
+ */
+back(): void;
+```
+
+### forward
+
+forward()
+
+历史记录前进
+
+```typescript
+/**
+ * 历史记录前进
+ * go forward in history
+ */
+forward(): void;
+```
+
+### savePoint
+
+保存当前状态
+
+```typescript
+/**
+ * 保存当前状态
+ * do save current change as a record in history
+ */
+savePoint(): void;
+```
+
+### isSavePoint
+
+当前是否是「保存点」，即是否有状态变更但未保存
+
+```typescript
+/**
+ * 当前是否是「保存点」，即是否有状态变更但未保存
+ * check if there is unsaved change for history
+ */
+isSavePoint(): boolean;
+```
+
+### getState
+
+获取 state，判断当前是否为「可回退」、「可前进」的状态
+
+```typescript
+/**
+ * 获取 state，判断当前是否为「可回退」、「可前进」的状态
+ * get flags in number which indicat current change state
+ *
+ *  |    1     |     1    |    1     |
+ *  | -------- | -------- | -------- |
+ *  | modified | redoable | undoable |
+ * eg:
+ *  7 means : modified && redoable && undoable
+ *  5 means : modified && undoable
+ */
+getState(): number;
+```
+
+## 事件
+### onChangeState
+
+监听 state 变更事件
+
+```typescript
+/**
+ * 监听 state 变更事件
+ * monitor on stateChange event
+ * @param func
+ */
+onChangeState(func: () => any): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeCursor
+
+监听历史记录游标位置变更事件
+
+```typescript
+/**
+ * 监听历史记录游标位置变更事件
+ * monitor on cursorChange event
+ * @param func
+ */
+onChangeCursor(func: () => any): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

docs/docs/api/model/modal-nodes-manager.md

@@ -0,0 +1,94 @@
+---
+title: ModalNodesManager
+sidebar_position: 7
+---
+> **@types** [IPublicModelModalNodesManager](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/modal-nodes-manager.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+模态节点管理器模型
+
+## 方法
+
+### setNodes
+
+设置模态节点，触发内部事件
+
+```typescript
+/**
+ * 设置模态节点，触发内部事件
+ * set modal nodes, trigger internal events
+ */
+setNodes(): void;
+```
+
+### getModalNodes
+
+获取模态节点（们）
+
+```typescript
+/**
+ * 获取模态节点（们）
+ * get modal nodes
+ */
+getModalNodes(): IPublicModelNode[];
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### getVisibleModalNode
+
+获取当前可见的模态节点
+
+```typescript
+/**
+ * 获取当前可见的模态节点
+ * get current visible modal node
+ */
+getVisibleModalNode(): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### hideModalNodes
+
+隐藏模态节点（们）
+
+```typescript
+/**
+ * 隐藏模态节点（们）
+ * hide modal nodes
+ */
+hideModalNodes(): void;
+```
+
+### setVisible
+
+设置指定节点为可见态
+
+```typescript
+/**
+ * 设置指定节点为可见态
+ * set specific model node as visible
+ * @param node IPublicModelNode
+ */
+setVisible(node: IPublicModelNode): void;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### setInvisible
+
+设置指定节点为不可见态
+
+```typescript
+/**
+ * 设置指定节点为不可见态
+ * set specific model node as invisible
+ * @param node IPublicModelNode
+ */
+setInvisible(node: IPublicModelNode): void;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)

docs/docs/api/model/node-children.md

@@ -0,0 +1,325 @@
+---
+title: NodeChildren
+sidebar_position: 2
+---
+> **@types** [IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+节点孩子模型
+
+## 属性
+### owner
+
+返回当前 children 实例所属的节点实例
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### size
+
+children 内的节点实例数
+
+`@type {number}`
+
+
+### isEmptyNode
+
+是否为空
+
+`@type {boolean}`
+
+**@since v1.1.0**
+> v1.1.0 之前请使用 `isEmpty`
+
+### notEmptyNode
+
+是否不为空
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+## 方法
+### delete
+删除指定节点
+
+```typescript
+/**
+ * 删除指定节点
+ * delete the node
+ * @param node
+ */
+delete(node: IPublicModelNode): boolean;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### insert
+
+插入一个节点
+
+```typescript
+/**
+ * 插入一个节点
+ * insert the node
+ * @param node
+ */
+insert(node: IPublicModelNode): boolean;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### indexOf
+
+返回指定节点的下标
+
+```typescript
+/**
+ * 返回指定节点的下标
+ * get index of node in current children
+ * @param node
+ * @returns
+ */
+indexOf(node: IPublicModelNode): number;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### splice
+
+类似数组 splice 操作
+
+```typescript
+/**
+ * 类似数组 splice 操作
+ * provide the same function with {Array.prototype.splice}
+ * @param start
+ * @param deleteCount
+ * @param node
+ */
+splice(start: number, deleteCount: number, node?: IPublicModelNode): any;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### get
+
+返回指定下标的节点
+
+```typescript
+/**
+ * 返回指定下标的节点
+ * get node with index
+ * @param index
+ * @returns
+ */
+get(index: number): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### has
+
+是否包含指定节点
+
+```typescript
+/**
+ * 是否包含指定节点
+ * check if node exists in current children
+ * @param node
+ * @returns
+ */
+has(node: IPublicModelNode): boolean;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### forEach
+
+类似数组的 forEach
+
+```typescript
+/**
+ * 类似数组的 forEach
+ * provide the same function with {Array.prototype.forEach}
+ * @param fn
+ */
+forEach(fn: (node: IPublicModelNode, index: number) => void): void;
+
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### reverse
+
+类似数组的 reverse
+
+```typescript
+/**
+ * 类似数组的 reverse
+ * provide the same function with {Array.prototype.reverse}
+ */
+reverse(): IPublicModelNode[];
+
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### map
+
+类似数组的 map
+
+```typescript
+/**
+ * 类似数组的 map
+ * provide the same function with {Array.prototype.map}
+ * @param fn
+ */
+map<T>(fn: (node: IPublicModelNode, index: number) => T[]): any[] | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### every
+
+类似数组的 every
+
+```typescript
+/**
+ * 类似数组的 every
+ * provide the same function with {Array.prototype.every}
+ * @param fn
+ */
+every(fn: (node: IPublicModelNode, index: number) => boolean): boolean;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### some
+
+类似数组的 some
+
+```typescript
+/**
+ * 类似数组的 some
+ * provide the same function with {Array.prototype.some}
+ * @param fn
+ */
+some(fn: (node: IPublicModelNode, index: number) => boolean): boolean;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### filter
+
+类似数组的 filter
+
+```typescript
+/**
+ * 类似数组的 filter
+ * provide the same function with {Array.prototype.filter}
+ * @param fn
+ */
+filter(fn: (node: IPublicModelNode, index: number) => boolean): any;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### find
+
+类似数组的 find
+
+```typescript
+/**
+ * 类似数组的 find
+ * provide the same function with {Array.prototype.find}
+ * @param fn
+ */
+find(fn: (node: IPublicModelNode, index: number) => boolean): IPublicModelNode | null;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### reduce
+
+类似数组的 reduce
+
+```typescript
+/**
+ * 类似数组的 reduce
+ * provide the same function with {Array.prototype.reduce}
+ * @param fn
+ */
+reduce(fn: (acc: any, cur: IPublicModelNode) => any, initialValue: any): void;
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+### importSchema
+
+导入 schema
+
+```typescript
+/**
+ * 导入 schema
+ * import schema
+ * @param data
+ */
+importSchema(data?: IPublicTypeNodeData | IPublicTypeNodeData[]): void;
+```
+
+相关类型：[IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)
+
+
+### exportSchema
+导出 schema
+
+```typescript
+/**
+ * 导出 schema
+ * export schema
+ * @param stage
+ */
+exportSchema(stage: IPublicEnumTransformStage): IPublicTypeNodeSchema;
+```
+
+相关类型：
+- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
+- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+
+### mergeChildren
+
+执行新增、删除、排序等操作
+
+```typescript
+/**
+ * 执行新增、删除、排序等操作
+ * excute remove/add/sort operations
+ * @param remover
+ * @param adder
+ * @param sorter
+ */
+mergeChildren(
+  remover: (node: IPublicModelNode, idx: number) => boolean,
+  adder: (children: IPublicModelNode[]) => IPublicTypeNodeData[] | null,
+  sorter: (firstNode: IPublicModelNode, secondNode: IPublicModelNode) => number
+): any;
+```
+
+相关类型：
+- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)

docs/docs/api/model/node.md

@@ -0,0 +1,678 @@
+---
+title: Node
+sidebar_position: 1
+---
+> **@types** [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+节点模型
+
+## 属性
+### id
+
+节点 id
+
+`@type {string}`
+
+### title
+
+节点标题
+
+`@type {string | IPublicTypeI18nData | ReactElement}`
+
+相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts)
+
+### isContainerNode
+
+是否为「容器型」节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+> v1.1.0 之前请使用 `isContainer`
+
+### isRootNode
+
+是否为根节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isRoot`
+
+### isEmptyNode
+
+是否为空节点（无 children 或者 children 为空）
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isEmpty`
+
+### isPageNode
+
+是否为 Page 节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isPage`
+
+### isComponentNode
+
+是否为 Component 节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isComponent`
+
+### isModalNode
+
+是否为「模态框」节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isModal`
+
+### isSlotNode
+
+是否为插槽节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isSlot`
+
+### isParentalNode
+
+是否为父类/分支节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isParental`
+
+### isLeafNode
+
+是否为叶子节点
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.1.0 之前请使用 `isLeaf`
+
+### isLocked
+
+获取当前节点的锁定状态
+
+**@since v1.0.16**
+
+### isRGLContainerNode
+设置为磁贴布局节点，使用方式可参考：[磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw)
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+> v1.0.16 - v1.1.0 请使用 `isRGLContainer`
+
+### index
+
+下标
+
+`@type {number}`
+
+### icon
+
+图标
+
+`@type {IPublicTypeIconType}`
+
+相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts)
+
+### zLevel
+
+节点所在树的层级深度，根节点深度为 0
+
+`@type {number}`
+
+### componentName
+
+节点 componentName
+
+`@type {string}`
+
+### componentMeta
+
+节点的物料元数据
+
+`@type {IPublicModelComponentMeta | null}`
+
+相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
+
+
+### document
+
+获取节点所属的[文档模型](./document-model)对象
+
+`@type {IPublicModelDocumentModel | null}`
+
+相关类型：[IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts)
+
+### prevSibling
+
+获取当前节点的前一个兄弟节点
+
+`@type {IPublicModelNode | null}`
+
+### nextSibling
+
+获取当前节点的后一个兄弟节点
+
+`@type {IPublicModelNode | null}`
+
+### parent
+
+获取当前节点的父亲节点
+
+`@type {IPublicModelNode | null}`
+
+### children
+
+获取当前节点的孩子节点模型
+
+`@type {IPublicModelNodeChildren | null}`
+
+相关类型：[IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts)
+
+### slots
+
+节点上挂载的插槽节点们
+
+`@type {IPublicModelNode[]}`
+
+### slotFor
+
+当前节点为插槽节点时，返回节点对应的属性实例
+
+`@type {IPublicModelProp | null}`
+
+相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+
+### props
+
+返回节点的属性集
+
+`@type {IPublicModelProps | null}`
+
+相关类型：[IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts)
+
+
+### propsData
+
+返回节点的属性集值
+
+`@type {IPublicTypePropsMap | IPublicTypePropsList | null}`
+
+相关类型：
+- [IPublicTypePropsMap](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-map.ts)
+- [IPublicTypePropsList](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-list.ts)
+
+### conditionGroup
+
+获取条件组
+
+`@type {IPublicModelExclusiveGroup | null}`
+
+相关类型：[IPublicModelExclusiveGroup](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/exclusive-group.ts)
+
+**@since v1.1.0**
+
+### schema
+
+获取符合搭建协议 - 节点 schema 结构
+
+`@type {IPublicTypeNodeSchema | null}`
+
+相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+### settingEntry
+
+获取对应的 setting entry
+
+`@type {IPublicModelSettingTopEntry}`
+
+相关章节：[设置器顶层操作对象](./setting-top-entry)
+
+相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
+
+### visible
+当前节点是否可见
+
+`@type {boolean}`
+
+**@since v1.1.0**
+
+## 方法
+
+### getRect
+
+返回节点的尺寸、位置信息
+
+```typescript
+/**
+ * 返回节点的尺寸、位置信息
+ * get rect information for this node
+ */
+getRect(): DOMRect | null;
+```
+
+### hasSlots
+
+是否有挂载插槽节点
+
+```typescript
+/**
+ * 是否有挂载插槽节点
+ * check if current node has slots
+ */
+hasSlots(): boolean;
+```
+
+### hasCondition
+
+是否设定了渲染条件
+
+```typescript
+/**
+ * 是否设定了渲染条件
+ * check if current node has condition value set
+ */
+hasCondition(): boolean;
+```
+
+### hasLoop
+
+是否设定了循环数据
+
+```typescript
+/**
+ * 是否设定了循环数据
+ * check if loop is set for this node
+ */
+hasLoop(): boolean;
+```
+
+### getProp
+
+获取指定 path 的属性模型实例
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例
+ * get prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getProp(path: string, createIfNone: boolean): IPublicModelProp | null;
+```
+
+相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+
+### getPropValue
+
+获取指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例值
+ * get prop value by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getPropValue(path: string): any;
+```
+
+### getExtraProp
+
+获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例，
+ *  注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+ *
+ * get extra prop by path, an extra prop means a prop not exists in the `props`
+ * but as siblint of the `props`
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @param createIfNone 当没有属性的时候，是否创建一个属性
+ */
+getExtraProp(path: string, createIfNone?: boolean): IPublicModelProp | null;
+```
+
+相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+
+### getExtraPropValue
+
+获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例，
+ *  注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+ *
+ * get extra prop value by path, an extra prop means a prop not exists in the `props`
+ * but as siblint of the `props`
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @returns
+ */
+getExtraPropValue(path: string): any;
+```
+
+### setPropValue
+
+setPropValue(path: string, value: CompositeValue)
+
+设置指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 设置指定 path 的属性模型实例值
+ * set value for prop with path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @param value 值
+ */
+setPropValue(path: string, value: IPublicTypeCompositeValue): void;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+
+### setExtraPropValue
+
+设置指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 设置指定 path 的属性模型实例值
+ * set value for extra prop with path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @param value 值
+ */
+setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+### importSchema
+
+导入节点数据
+
+```typescript
+/**
+ * 导入节点数据
+ * import node schema
+ * @param data
+ */
+importSchema(data: IPublicTypeNodeSchema): void;
+```
+
+相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+### exportSchema
+
+导出节点数据
+
+```typescript
+/**
+ * 导出节点数据
+ * export schema from this node
+ * @param stage
+ * @param options
+ */
+exportSchema(stage: IPublicEnumTransformStage, options?: any): IPublicTypeNodeSchema;
+```
+
+相关类型：
+- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
+- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+### insertBefore
+
+在指定位置之前插入一个节点
+
+```typescript
+/**
+ * 在指定位置之前插入一个节点
+ * insert a node befor current node
+ * @param node
+ * @param ref
+ * @param useMutator
+ */
+insertBefore(
+    node: IPublicModelNode,
+    ref?: IPublicModelNode | undefined,
+    useMutator?: boolean,
+  ): void;
+```
+
+### insertAfter
+
+在指定位置之后插入一个节点
+
+```typescript
+/**
+ * 在指定位置之后插入一个节点
+ * insert a node after this node
+ * @param node
+ * @param ref
+ * @param useMutator
+ */
+insertAfter(
+    node: IPublicModelNode,
+    ref?: IPublicModelNode | undefined,
+    useMutator?: boolean,
+  ): void;
+```
+
+### replaceChild
+
+替换指定子节点
+
+```typescript
+/**
+ * 替换指定子节点
+ * replace a child node with data provided
+ * @param node 待替换的子节点
+ * @param data 用作替换的节点对象或者节点描述
+ * @returns
+ */
+replaceChild(node: IPublicModelNode, data: any): IPublicModelNode | null;
+```
+
+### replaceWith
+
+将当前节点替换成指定节点描述
+
+```typescript
+/**
+ * 将当前节点替换成指定节点描述
+ * replace current node with a new node schema
+ * @param schema
+ */
+replaceWith(schema: IPublicTypeNodeSchema): any;
+```
+
+相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+### select
+
+选中当前节点实例
+
+```typescript
+/**
+ * 选中当前节点实例
+ * select current node
+ */
+select(): void;
+```
+
+### hover
+
+设置悬停态
+
+```typescript
+/**
+ * 设置悬停态
+ * set hover value for current node
+ * @param flag
+ */
+hover(flag: boolean): void;
+```
+
+### lock
+设置节点锁定状态
+
+```typescript
+/**
+ * 设置节点锁定状态
+ * set lock value for current node
+ * @param flag
+ * @since v1.0.16
+ */
+lock(flag?: boolean): void;
+```
+
+**@since v1.0.16**
+
+### remove
+
+删除当前节点实例
+
+```typescript
+/**
+ * 删除当前节点实例
+ * remove current node
+ */
+remove(): void;
+```
+
+### mergeChildren
+
+执行新增、删除、排序等操作
+
+```typescript
+/**
+ * 执行新增、删除、排序等操作
+ * excute remove/add/sort operations on node`s children
+ *
+ * @since v1.1.0
+ */
+mergeChildren(
+  remover: (node: IPublicModelNode, idx: number) => boolean,
+  adder: (children: IPublicModelNode[]) => any,
+  sorter: (firstNode: IPublicModelNode, secondNode: IPublicModelNode) => number
+): any;
+```
+
+**@since v1.1.0**
+
+### contains
+
+当前节点是否包含某子节点
+
+```typescript
+/**
+ * 当前节点是否包含某子节点
+ * check if current node contains another node as a child
+ * @param node
+ * @since v1.1.0
+ */
+contains(node: IPublicModelNode): boolean;
+```
+
+**@since v1.1.0**
+
+### canPerformAction
+
+是否可执行某 action
+
+```typescript
+/**
+ * 是否可执行某 action
+ * check if current node can perform certain aciton with actionName
+ * @param actionName action 名字
+ * @since v1.1.0
+ */
+canPerformAction(actionName: string): boolean;
+```
+
+**@since v1.1.0**
+
+### isConditionalVisible
+
+获取该节点的 ConditionalVisible 值
+
+```typescript
+/**
+ * 获取该节点的 ConditionalVisible 值
+ * check if current node ConditionalVisible
+ * @since v1.1.0
+ */
+isConditionalVisible(): boolean | undefined;
+```
+
+**@since v1.1.0**
+
+### setConditionalVisible
+设置该节点的 ConditionalVisible 为 true
+
+```typescript
+/**
+ * 设置该节点的 ConditionalVisible 为 true
+ * make this node as conditionalVisible === true
+ * @since v1.1.0
+ */
+setConditionalVisible(): void;
+```
+
+**@since v1.1.0**
+
+### getDOMNode
+获取节点实例对应的 dom 节点
+
+```typescript
+/**
+ * 获取节点实例对应的 dom 节点
+ */
+getDOMNode(): HTMLElement;
+
+```
+
+### getRGL
+
+获取磁贴相关信息
+
+```typescript
+/**
+ * 获取磁贴相关信息
+ */
+getRGL(): {
+  isContainerNode: boolean;
+  isEmptyNode: boolean;
+  isRGLContainerNode: boolean;
+  isRGLNode: boolean;
+  isRGL: boolean;
+  rglNode: IPublicModelNode | null;
+}
+```

docs/docs/api/model/plugin-instance.md

@@ -0,0 +1,40 @@
+---
+title: PluginInstance
+sidebar_position: 12
+---
+
+> **@types** [IPublicModelPluginInstance](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-instance.ts)<br/>
+> **@since** v1.1.0
+
+
+## 基本介绍
+
+插件实例
+
+## 属性
+
+### pluginName
+
+插件名字
+
+`@type {string}`
+
+### dep
+
+插件依赖
+
+`@type {string[]}`
+
+### disabled
+
+插件是否禁用
+
+`@type {boolean}`
+
+### meta
+
+插件 meta 信息
+
+`@type {IPublicTypePluginMeta}`
+
+相关类型：[IPublicTypePluginMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin-meta.ts)

docs/docs/api/model/prop.md

@@ -0,0 +1,108 @@
+---
+title: Prop
+sidebar_position: 3
+---
+> **@types** [IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+属性模型
+
+## 属性
+
+### id
+
+id
+
+`@type {string}`
+
+### key
+
+key 值
+
+`@type {string | number | undefined}`
+
+### path
+
+返回当前 prop 的路径
+
+`@type {string[]}`
+
+### node
+
+返回所属的节点实例
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### slotNode
+
+当本 prop 代表一个 Slot 时，返回对应的 slotNode
+
+`@type {IPublicModelNode | undefined | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+
+## 方法
+
+### setValue
+
+设置值
+
+```typescript
+/**
+ * 设置值
+ * set value for this prop
+ * @param val
+ */
+setValue(val: IPublicTypeCompositeValue): void;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+### getValue
+
+获取值
+
+```typescript
+/**
+ * 获取值
+ * get value of this prop
+ */
+getValue(): any;
+```
+
+### remove
+
+移除值
+
+```typescript
+/**
+ * 移除值
+ * remove value of this prop
+ * @since v1.0.16
+ */
+remove(): void;
+```
+
+**@since v1.0.16**
+
+### exportSchema
+
+导出值
+
+```typescript
+/**
+ * 导出值
+ * export schema
+ * @param stage
+ */
+exportSchema(stage: IPublicEnumTransformStage): IPublicTypeCompositeValue;
+```
+
+相关类型：
+- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
+- [IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)

docs/docs/api/model/props.md

@@ -0,0 +1,160 @@
+---
+title: Props
+sidebar_position: 4
+---
+> **@types** [IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+属性集模型
+
+## 属性
+### id
+
+id
+
+`@type {string}`
+
+
+### path
+
+返回当前 props 的路径
+
+`@type {string[]}`
+
+
+### node
+
+返回当前属性集所属的节点实例
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+## 方法
+### getProp
+
+获取指定 path 的属性模型实例
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例
+ * get prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getProp(path: string): IPublicModelProp | null;
+```
+
+相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+
+### getPropValue
+
+获取指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例值
+ * get value of prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getPropValue(path: string): any;
+```
+
+### getExtraProp
+
+获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例，
+ *  注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+ * get extra prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getExtraProp(path: string): IPublicModelProp | null;
+```
+
+相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+
+### getExtraPropValue
+
+获取指定 path 的属性模型实例值，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+
+```typescript
+/**
+ * 获取指定 path 的属性模型实例值
+ *  注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
+ * get value of extra prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ */
+getExtraPropValue(path: string): any;
+```
+
+### setPropValue
+
+设置指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 设置指定 path 的属性模型实例值
+ * set value of prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @param value 值
+ */
+setPropValue(path: string, value: IPublicTypeCompositeValue): void;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+### setExtraPropValue
+
+设置指定 path 的属性模型实例值
+
+```typescript
+/**
+ * 设置指定 path 的属性模型实例值
+ * set value of extra prop by path
+ * @param path 属性路径，支持 a / a.b / a.0 等格式
+ * @param value 值
+ */
+setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+
+### has
+
+当前 props 是否包含某 prop
+
+```typescript
+/**
+ * 当前 props 是否包含某 prop
+ * check if the specified key is existing or not.
+ * @param key
+ * @since v1.1.0
+ */
+has(key: string): boolean;
+```
+
+**@since v1.1.0**
+
+### add
+
+添加一个 prop
+
+```typescript
+/**
+ * 添加一个 prop
+ * add a key with given value
+ * @param value
+ * @param key
+ * @since v1.1.0
+ */
+add(value: IPublicTypeCompositeValue, key?: string | number | undefined): any;
+```
+
+相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+
+**@since v1.1.0**

docs/docs/api/model/resource.md

@@ -0,0 +1,58 @@
+---
+title: Resource
+sidebar_position: 13
+---
+
+> **[@experimental](./#experimental)**<br/>
+> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)<br/>
+> **@since** v1.1.0
+
+## 属性
+
+### title
+
+资源标题
+
+`@type {string}`
+
+### id
+
+资源 id
+
+`@type {string}`
+
+### name
+
+资源名字
+
+`@type {string}`
+
+### type
+
+资源类型
+
+`@type {string}`
+
+### category
+
+资源分类
+
+`@type {string}`
+
+### icon
+
+资源 icon
+
+`@type {ReactElement}`
+
+### options
+
+资源配置信息
+
+`@type {Object}`
+
+### config
+
+资源配置信息
+
+`@type {Object}`

docs/docs/api/model/selection.md

@@ -0,0 +1,161 @@
+---
+title: Selection
+sidebar_position: 6
+---
+> **@types** [IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+画布节点选中模型
+
+## 属性
+### selected
+
+返回选中的节点 id
+
+`@type {string[]}`
+
+### node
+返回选中的节点（如多个节点只返回第一个）
+
+`@type {IPublicModelNode | null}`
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+**@since v1.1.0**
+
+## 方法
+### select
+
+选中指定节点（覆盖方式）
+
+```typescript
+/**
+* 选中指定节点（覆盖方式）
+* select node with id, this will override current selection
+* @param id
+*/
+select(id: string): void;
+```
+
+### selectAll
+
+批量选中指定节点们
+
+```typescript
+/**
+* 批量选中指定节点们
+* select node with ids, this will override current selection
+*
+* @param ids
+*/
+selectAll(ids: string[]): void;
+```
+
+### remove
+
+**取消选中**选中的指定节点，不会删除组件
+
+```typescript
+/**
+* 移除选中的指定节点
+* remove node from selection with node id
+* @param id
+*/
+remove(id: string): void;
+```
+
+### clear
+
+**取消选中**所有选中节点，不会删除组件
+
+```typescript
+/**
+* 清除所有选中节点
+* clear current selection
+*/
+clear(): void;
+```
+
+### has
+
+判断是否选中了指定节点
+
+```typescript
+/**
+* 判断是否选中了指定节点
+* check if node with specific id is selected
+* @param id
+*/
+has(id: string): boolean;
+```
+
+### add
+
+选中指定节点（增量方式）
+
+```typescript
+/**
+* 选中指定节点（增量方式）
+* add node with specific id to selection
+* @param id
+*/
+add(id: string): void;
+```
+
+### getNodes
+
+获取选中的节点实例
+
+```typescript
+/**
+* 获取选中的节点实例
+* get selected nodes
+*/
+getNodes(): IPublicModelNode[];
+```
+
+相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
+
+### getTopNodes
+获取选区的顶层节点
+例如选中的节点为：
+
+- DivA
+   - ChildrenA
+- DivB
+
+getNodes 返回的是 [DivA、ChildrenA、DivB]，getTopNodes 返回的是 [DivA、DivB]，其中 ChildrenA 由于是二层节点，getTopNodes 不会返回
+
+```typescript
+/**
+* 获取选区的顶层节点
+* get seleted top nodes
+* for example:
+*  getNodes() returns [A, subA, B], then
+*  getTopNodes() will return [A, B], subA will be removed
+* @since v1.0.16
+*/
+getTopNodes(includeRoot?: boolean): IPublicModelNode[];
+```
+
+**@since v1.0.16**
+
+## 事件
+### onSelectionChange
+
+注册 selection 变化事件回调
+
+```typescript
+/**
+* 注册 selection 变化事件回调
+* set callback which will be called when selection is changed
+* @since v1.1.0
+*/
+onSelectionChange(fn: (ids: string[]) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+**@since v1.1.0**

docs/docs/api/model/setting-field.md

@@ -0,0 +1,342 @@
+---
+title: SettingField
+sidebar_position: 6
+---
+> **@types** [IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)<br/>
+
+## 基本介绍
+
+setter 设置器操作对象
+
+## 属性
+
+#### isGroup
+
+获取设置属性的 isGroup
+
+`@type {boolean}`
+
+
+#### id
+
+获取设置属性的 id
+
+`@type {string}`
+
+#### name
+
+获取设置属性的 name
+
+`@type {string | number | undefined}`
+
+#### key
+
+获取设置属性的 key
+
+`@type {string | number | undefined}`
+
+#### path
+
+获取设置属性的 path
+
+`@type {(string | number)[]}`
+
+#### title
+
+获取设置属性的 title
+
+`@type {string}`
+
+#### setter
+
+获取设置属性的 setter
+
+`@type {IPublicTypeSetterType | null}`
+
+#### expanded
+
+获取设置属性的 expanded
+
+`@type {boolean}`
+
+#### extraProps
+
+获取设置属性的 extraProps
+
+`@type {IPublicTypeFieldExtraProps}`
+
+#### props
+
+`@type {IPublicModelSettingTopEntry}`
+
+相关章节：[设置器顶层操作对象](./setting-top-entry)
+
+相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
+
+#### node
+
+获取设置属性对应的节点实例
+
+`@type {IPublicModelNode | null}`
+
+
+#### parent
+
+获取设置属性的父设置属性
+
+`@type {IPublicModelSettingTopEntry | IPublicModelSettingField}`
+
+相关章节：[设置器顶层操作对象](./setting-top-entry)
+
+相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
+
+#### top
+
+获取顶级设置属性
+
+`@type {IPublicModelSettingTopEntry}`
+
+相关章节：[设置器顶层操作对象](./setting-top-entry)
+
+相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
+
+#### isSettingField
+
+是否是 SettingField 实例
+
+`@type {boolean}`
+
+#### componentMeta
+
+`@type {IPublicModelComponentMeta}`
+
+相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
+
+#### items
+
+获取设置属性的 items
+
+`@type {Array<IPublicModelSettingField | IPublicTypeCustomView>}`
+
+相关类型：[IPublicTypeCustomView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/custom-view.ts)
+
+## 方法
+
+#### setKey
+
+设置 key 值
+
+```
+/**
+  * 设置 key 值
+  * @param key
+  */
+setKey(key: string | number): void;
+```
+
+#### setValue
+
+设置值
+
+```
+/**
+  * 设置值
+  * @param val 值
+  */
+setValue(val: IPublicTypeCompositeValue, extraOptions?: IPublicTypeSetValueOptions): void;
+```
+
+相关类型：
+- [IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
+- [IPublicTypeSetValueOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/set-value-options.ts)
+
+#### setPropValue
+
+设置子级属性值
+
+```
+/**
+  * 设置子级属性值
+  * @param propName 子属性名
+  * @param value 值
+  */
+setPropValue(propName: string | number, value: any): void;
+```
+
+#### clearPropValue
+
+清空指定属性值
+
+```
+/**
+  * 清空指定属性值
+  * @param propName
+  */
+clearPropValue(propName: string | number): void;
+```
+
+#### getDefaultValue
+
+获取配置的默认值
+
+```
+/**
+  * 获取配置的默认值
+  * @returns
+  */
+getDefaultValue(): any;
+```
+
+#### getValue
+
+获取值
+
+```
+/**
+  * 获取值
+  * @returns
+  */
+getValue(): any;
+```
+
+#### getPropValue
+
+获取子级属性值
+
+```
+/**
+  * 获取子级属性值
+  * @param propName 子属性名
+  * @returns
+  */
+getPropValue(propName: string | number): any;
+```
+
+#### getExtraPropValue
+
+获取顶层附属属性值
+
+```
+/**
+  * 获取顶层附属属性值
+  */
+getExtraPropValue(propName: string): any;
+```
+
+#### setExtraPropValue
+
+设置顶层附属属性值
+
+```
+/**
+  * 设置顶层附属属性值
+  */
+setExtraPropValue(propName: string, value: any): void;
+```
+
+#### getProps
+
+获取设置属性集
+
+```
+/**
+  * 获取设置属性集
+  * @returns
+  */
+getProps(): IPublicModelSettingTopEntry;
+```
+
+相关章节：[设置器顶层操作对象](./setting-top-entry)
+
+相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
+
+#### isUseVariable
+
+是否绑定了变量
+
+```
+/**
+  * 是否绑定了变量
+  * @returns
+  */
+isUseVariable(): boolean;
+```
+
+#### setUseVariable
+
+设置绑定变量
+
+```
+/**
+  * 设置绑定变量
+  * @param flag
+  */
+setUseVariable(flag: boolean): void;
+```
+
+#### createField
+
+创建一个设置 field 实例
+
+```
+/**
+  * 创建一个设置 field 实例
+  * @param config
+  * @returns
+  */
+createField(config: IPublicTypeFieldConfig): IPublicModelSettingField;
+```
+
+相关类型：[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts)
+
+#### getMockOrValue
+
+获取值，当为变量时，返回 mock
+
+```
+/**
+  * 获取值，当为变量时，返回 mock
+  * @returns
+  */
+getMockOrValue(): any;
+
+```
+
+#### purge
+
+销毁当前 field 实例
+
+```
+/**
+  * 销毁当前 field 实例
+  */
+purge(): void;
+```
+
+#### remove
+
+移除当前 field 实例
+
+```
+/**
+  * 移除当前 field 实例
+  */
+remove(): void;
+```
+
+## 事件
+
+#### onEffect
+
+设置 autorun
+
+```
+/**
+  * 设置 autorun
+  * @param action
+  * @returns
+  */
+onEffect(action: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

docs/docs/api/model/setting-top-entry.md

@@ -0,0 +1,74 @@
+---
+title: SettingTopEntry
+sidebar_position: 6
+---
+> **@types** [IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)<br/>
+
+## 基本介绍
+
+setter 设置器顶层操作对象
+
+## 属性
+
+#### node
+
+返回所属的节点实例
+
+`@type {IPublicModelNode | null}`
+
+## 方法
+
+#### get
+
+获取子级属性对象
+
+```
+/**
+  * 获取子级属性对象
+  * @param propName
+  * @returns
+  */
+get(propName: string | number): IPublicModelSettingField | null;
+```
+相关章节：[设置器操作对象](./setting-field)
+
+相关类型：[IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)
+
+
+#### getPropValue
+
+获取指定 propName 的值
+
+```
+/**
+  * 获取指定 propName 的值
+  * @param propName
+  * @returns
+  */
+getPropValue(propName: string | number): any;
+```
+
+#### setPropValue
+
+设置指定 propName 的值
+
+```
+/**
+  * 设置指定 propName 的值
+  * @param propName
+  * @param value
+  */
+setPropValue(propName: string | number, value: any): void;
+```
+
+#### clearPropValue
+
+清除指定 propName 的值
+
+```
+/**
+  * 清除指定 propName 的值
+  * @param propName
+  */
+clearPropValue(propName: string | number): void;
+```

docs/docs/api/model/simulatorRender.md

@@ -0,0 +1,38 @@
+---
+title: SimulatorRender
+sidebar_position: 6
+---
+> **@types** [IPublicModelSimulatorRender](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/simulator-render.ts)<br/>
+> **@since** v1.0.0
+
+## 基本介绍
+
+画布节点选中模型
+
+## 属性
+### components
+
+画布组件列表
+
+```typescript
+/**
+  * 画布组件列表
+  */
+components: {
+  [key: string]: any;
+}
+```
+
+## 方法
+
+### rerender
+
+触发画布重新渲染
+
+```typescript
+/**
+ * 触发画布重新渲染
+ */
+rerender: () => void;
+```
+

docs/docs/api/model/window.md

@@ -0,0 +1,107 @@
+---
+title: Window
+sidebar_position: 12
+---
+
+> **[@experimental](./#experimental)**<br/>
+> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/window.ts)<br/>
+> **@since** v1.1.0
+
+
+## 基本介绍
+
+低代码设计器窗口模型
+
+## 属性
+
+### id
+
+窗口唯一 id
+
+`@type {string}`
+
+### title
+
+窗口标题
+
+`@type {string}`
+
+### icon
+
+`@type {ReactElement}`
+
+### resource
+
+窗口对应资源
+
+`@type {IPublicModelResource}`
+
+关联模型 [IPublicModelResource](./resource)
+
+### currentEditorView
+窗口当前视图
+
+`@type {IPublicModelEditorView}`
+
+关联模型 [IPublicModelEditorView](./editor-view)
+
+**@since v1.1.7**
+
+### editorViews
+
+窗口所有视图
+
+`@type {IPublicModelEditorView[]}`
+
+关联模型 [IPublicModelEditorView](./editor-view)
+
+**@since v1.1.7**
+
+## 方法
+
+### importSchema
+当前窗口导入 schema, 会调用当前窗口对应资源的 import 钩子
+
+```typescript
+function importSchema(schema: IPublicTypeNodeSchema): void
+```
+
+相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
+
+### changeViewType
+修改当前窗口视图类型
+
+```typescript
+function changeViewType(viewName: string): void
+```
+
+### save
+当前窗口的保存方法，会调用当前窗口对应资源的 save 钩子
+
+```typescript
+function save(): Promise(void)
+```
+
+## 事件
+
+### onChangeViewType
+
+窗口视图变更事件
+
+```
+onChangeViewType(fn: (viewName: string) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onSave
+
+窗口视图保存事件
+
+```
+onSave(fn: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+**@since v1.1.7**

docs/docs/api/plugins.md

@@ -1,33 +1,36 @@
 ---
 title: plugins - 插件 API
-sidebar_position: 4
+sidebar_position: 2
 ---
+> **@types** [IPublicApiPlugins](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/plugins.ts)<br/>
+> **@since** v1.0.0
+
 ## 模块简介
 插件管理器，提供编排模块中管理插件的能力。
-## 变量（variables）
-无
-## 方法签名（functions）
+
+## 方法
 ### register
 注册插件
 
-#### 类型定义
 ```typescript
 async function register(
-  pluginConfigCreator: (ctx: ILowCodePluginContext) => ILowCodePluginConfig,
-  options?: ILowCodeRegisterOptions,
+  plugin: IPublicTypePlugin,
+  options?: IPublicTypePluginRegisterOptions,
 ): Promise<void>
 ```
-pluginConfigCreator 是一个 ILowCodePluginConfig 生成函数，ILowCodePluginConfig 中包含了该插件的 init / destroy 等钩子函数，以及 exports 函数用于返回插件对外暴露的值。
+相关 types:
+- [IPublicTypePlugin](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin.ts)
+- [IPublicTypePluginRegisterOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin-register-options.ts)
 
-另外，pluginConfigCreator 还必须挂载 pluginName 字段，全局确保唯一，否则 register 时会报错，可以选择性挂载 meta 字段，用于描述插件的元数据信息，比如兼容的引擎版本、支持的参数配置、依赖插件声明等。
-> 注：pluginConfigCreator 挂载 pluginName / meta 可以通过低代码工具链的插件脚手架生成，写如 package.json 后将会自动注入到代码中，具体见 [插件元数据工程化示例](#RO9YY)
+其中第一个参数 plugin 通过低代码工具链的插件脚手架生成编写模板，开发者可以参考[这个章节](/site/docs/guide/expand/editor/cli)进行创建
 
 
 #### 简单示例
 ```typescript
 import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
-const builtinPluginRegistry = (ctx: ILowCodePluginContext) => {
+const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => {
   return {
     async init() {
       const { skeleton } = ctx;
@@ -58,70 +61,75 @@ await plugins.register(builtinPluginRegistry);
 #### 使用 exports 示例
 ```typescript
 import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
-const pluginA = (ctx: ILowCodePluginContext) => {
+const PluginA = (ctx: IPublicModelPluginContext) => {
   return {
     async init() {},
     exports() { return { x: 1, } },
   };
 }
-pluginA.pluginName = 'pluginA';
+PluginA.pluginName = 'PluginA';
 
-const pluginB = (ctx: ILowCodePluginContext) => {
+const PluginB = (ctx: IPublicModelPluginContext) => {
   return {
     async init() {
       // 获取 pluginA 的导出值
-      console.log(ctx.plugins.pluginA.x); // => 1
+      console.log(ctx.plugins.PluginA.x); // => 1
     },
   };
 }
-pluginA.pluginName = 'pluginA';
-pluginB.pluginName = 'pluginB';
-pluginB.meta = {
-  dependencies: ['pluginA'],
+PluginA.pluginName = 'pluginA';
+PluginB.pluginName = 'PluginB';
+PluginB.meta = {
+  dependencies: ['PluginA'],
 }
-await plugins.register(pluginA);
-await plugins.register(pluginB);
+await plugins.register(PluginA);
+await plugins.register(PluginB);
 ```
-> 注：ctx 是在插件 creator 中获取引擎 API 的上下文，具体定义参见 [ILowCodePluginContext](#qEhTb)
+> 注：ctx 是在插件中获取引擎 API 的唯一渠道，具体定义参见 [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)
+
 
-####
 #### 设置兼容引擎版本示例
 ```typescript
 import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
-const builtinPluginRegistry = (ctx: ILowCodePluginContext) => {
+const BuiltinPluginRegistry = (ctx: IPublicModelPluginContext) => {
   return {
     async init() {
       ...
     },
   };
 }
-builtinPluginRegistry.pluginName = 'builtinPluginRegistry';
-builtinPluginRegistry.meta = {
+BuiltinPluginRegistry.pluginName = 'BuiltinPluginRegistry';
+BuiltinPluginRegistry.meta = {
   engines: {
     lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行
   },
 }
-await plugins.register(builtinPluginRegistry);
+await plugins.register(BuiltinPluginRegistry);
 ```
 #### 设置插件参数版本示例
 ```typescript
 import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
-const builtinPluginRegistry = (ctx: ILowCodePluginContext, options: any) => {
+const BuiltinPluginRegistry = (ctx: IPublicModelPluginContext, options: any) => {
   return {
     async init() {
-      // 1.0.4 之后的传值方式，通过 register(xxx, options)
-      // 取值通过 options
+      // 直接传值方式：
+      //   通过 register(xxx, options) 传入
+      //   通过 options 取出
 
-      // 1.0.4 之前的传值方式，通过 init(..., preference)
-      // 取值通过 ctx.preference.getValue()
+      // 引擎初始化时也可以设置某插件的全局配置项：
+      //   通过 engine.init(..., preference) 传入
+      //   通过 ctx.preference.getValue() 取出
     },
   };
 }
-builtinPluginRegistry.pluginName = 'builtinPluginRegistry';
-builtinPluginRegistry.meta = {
+BuiltinPluginRegistry.pluginName = 'BuiltinPluginRegistry';
+BuiltinPluginRegistry.meta = {
   preferenceDeclaration: {
     title: 'pluginA 的参数定义',
     properties: [
@@ -149,101 +157,81 @@ builtinPluginRegistry.meta = {
   },
 }
 
-// 从 1.0.4 开始，支持直接在 pluginCreator 的第二个参数 options 获取入参
-await plugins.register(builtinPluginRegistry, { key1: 'abc', key5: 'willNotPassToPlugin' });
-
-// 1.0.4 之前，通过 preference 来传递 / 获取值
-const preference = new Map();
-preference.set('builtinPluginRegistry', {
-  key1: 'abc',
-  key5: 'willNotPassToPlugin', // 因为 key5 不在插件声明可接受的参数里
-});
-
-init(document.getElementById('lce'), engineOptions, preference);
-
+await plugins.register(BuiltinPluginRegistry, { key1: 'abc', key5: 'willNotPassToPlugin' });
 ```
 
 ### get
-获取插件实例
 
-**类型定义**
-```typescript
-function get(pluginName: string): ILowCodePlugin | undefined
-```
-**调用示例**
-```typescript
-import { plugins } from '@alilc/lowcode-engine';
+获取指定插件
 
-plugins.get(builtinPluginRegistry);
+```typescript
+/**
+ * 获取指定插件
+ * get plugin instance by name
+ */
+get(pluginName: string): IPublicModelPluginInstance | null;
 ```
-###
+
+关联模型 [IPublicModelPluginInstance](./model/plugin-instance)
+
 ### getAll
-获取所有插件实例
 
-**类型定义**
-```typescript
-function getAll(): ILowCodePlugin[]
-```
-**调用示例**
-```typescript
-import { plugins } from '@alilc/lowcode-engine';
+获取所有的插件实例
 
-plugins.getAll();
+```typescript
+/**
+ * 获取所有的插件实例
+ * get all plugin instances
+ */
+getAll(): IPublicModelPluginInstance[];
 ```
-###
+
+关联模型 [IPublicModelPluginInstance](./model/plugin-instance)
+
 ### has
-判断是否已经加载了指定插件
-**类型定义**
-```typescript
-function has(pluginName: string): boolean
-```
-**调用示例**
-```typescript
-import { plugins } from '@alilc/lowcode-engine';
 
-plugins.has('builtinPluginRegistry');
+判断是否有指定插件
+
+```typescript
+/**
+ * 判断是否有指定插件
+ * check if plugin with certain name exists
+ */
+has(pluginName: string): boolean;
 ```
+
 ### delete
-删除指定插件
-**类型定义**
-```typescript
-async function delete(pluginName: string): Promise<boolean>
-```
-**调用示例**
-```typescript
-import { plugins } from '@alilc/lowcode-engine';
 
-plugins.delete('builtinPluginRegistry');
-```
-##
-## 事件（events）
-无
-## 相关模块
-### ILowCodePluginContext
-**类型定义**
+删除指定插件
+
 ```typescript
-export interface ILowCodePluginContext {
-  skeleton: Skeleton;                // 参考面板 API
-  hotkey: Hotkey;                    // 参考快捷键 API
-  logger: Logger;                    // 参考日志 API
-  plugins: ILowCodePluginManager;    // 参考插件 API
-  setters: Setters;                  // 参考设置器 API
-  config: EngineConfig;              // 参考配置 API
-  material: Material;                // 参考物料 API
-  event: Event;                      // 参考事件 API
-  project: Project;                  // 参考模型 API
-  preference: IPluginPreferenceMananger;
-}
+/**
+ * 删除指定插件
+ * delete plugin instance by name
+ */
+delete(pluginName: string): void;
 ```
-### ILowCodePluginConfig
-**类型定义**
+
+### getPluginPreference
+
+引擎初始化时可以提供全局配置给到各插件，通过这个方法可以获得本插件对应的配置
+
 ```typescript
-export interface ILowCodePluginConfig {
-  init?(): void;
-  destroy?(): void;
-  exports?(): any;
-}
+/**
+ * 引擎初始化时可以提供全局配置给到各插件，通过这个方法可以获得本插件对应的配置
+ * use this to get preference config for this plugin when engine.init() called
+ */
+getPluginPreference(
+    pluginName: string,
+  ): Record<string, IPublicTypePreferenceValueType> | null | undefined;
 ```
+
+## 相关类型定义
+
+- [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)
+- [IPublicTypePluginConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin-config.ts)
+- [IPublicModelPluginInstance](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-instance.ts)
+
 ## 插件元数据工程转化示例
 your-plugin/package.json
 ```json
@@ -261,8 +249,8 @@ your-plugin/package.json
 }
 ```
 转换后的结构：
-```json
-const debug = (ctx: ILowCodePluginContext, options: any) => {
+```typescript
+const debug = (ctx: IPublicModelPluginContext, options: any) => {
 	return {};
 }
 
@@ -274,8 +262,3 @@ debug.meta = {
   preferenceDeclaration: { ... }
 };
 ```
-###
-
-## 使用示例
-
-更多示例参考：[https://github.com/alibaba/lowcode-demo/blob/058450edb584d92be6cb665b1f3a9646ba464ffa/src/universal/plugin.tsx#L36](https://github.com/alibaba/lowcode-demo/blob/058450edb584d92be6cb665b1f3a9646ba464ffa/src/universal/plugin.tsx#L36)

docs/docs/api/setters.md

@@ -1,45 +1,73 @@
 ---
 title: setters - 设置器 API
-sidebar_position: 6
+sidebar_position: 10
 ---
+> **@types** [IPublicApiSetters](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/setters.ts)<br/>
+> **@since** v1.0.0
+
 ## 模块简介
 负责注册设置器、管理设置器的 API。注册自定义设置器之后可以在物料中进行使用。
 
-## 方法签名（functions）
+## 方法
 ### getSetter
 获取指定 setter
 
-**类型定义**
 ```typescript
-function getSetter(type: string): RegisteredSetter;
+/**
+ * 获取指定 setter
+ * get setter by type
+ * @param type
+ * @returns
+ */
+getSetter(type: string): IPublicTypeRegisteredSetter | null;
 ```
+相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
 
 ### getSettersMap
 获取已注册的所有 settersMap
 
-**类型定义**
 ```typescript
-function getSettersMap(): Map<string, RegisteredSetter>
+/**
+ * 获取已注册的所有 settersMap
+ * get map of all registered setters
+ * @returns
+ */
+getSettersMap(): Map<string, IPublicTypeRegisteredSetter & {
+  type: string;
+}>;
 ```
 
+相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
+
 ### registerSetter
 注册一个 setter
 
-**类型定义**
 ```typescript
-function registerSetter(
-  typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
-  setter?: CustomView | RegisteredSetter | undefined,
+/**
+ * 注册一个 setter
+ * register a setter
+ * @param typeOrMaps
+ * @param setter
+ * @returns
+ */
+registerSetter(
+  typeOrMaps: string | { [key: string]: IPublicTypeCustomView | IPublicTypeRegisteredSetter },
+  setter?: IPublicTypeCustomView | IPublicTypeRegisteredSetter | undefined
 ): void;
 ```
 
+相关类型：
+- [IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
+- [IPublicTypeCustomView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/custom-view.ts)
+
 ## 使用示例
 ### 注册官方内置 Setter 到设计器中
 ```typescript
 import { setters, skeleton } from '@alilc/lowcode-engine';
 import { setterMap, pluginMap } from '@alilc/lowcode-engine-ext';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 
-const setterRegistry = (ctx: ILowCodePluginContext) => {
+const SetterRegistry = (ctx: IPublicModelPluginContext) => {
   return {
     name: 'ext-setters-registry',
     async init() {
@@ -67,8 +95,8 @@ const setterRegistry = (ctx: ILowCodePluginContext) => {
   };
 }
 
-setterRegistry.pluginName = 'setterRegistry';
-await plugins.register(setterRegistry);
+SetterRegistry.pluginName = 'SetterRegistry';
+await plugins.register(SetterRegistry);
 ```
 
 ### 开发自定义 Setter
@@ -111,181 +139,13 @@ export default class AltStringSetter extends React.PureComponent<AltStringSetter
   }
 }
 ```
+
 开发完毕之后，注册 AltStringSetter 到设计器中：
+
 ```typescript
 import AltStringSetter from './AltStringSetter';
-const registerSetter = window.AliLowCodeEngine.setters.registerSetter;
-registerSetter('AltStringSetter', AltStringSetter);
-```
-注册之后，我们就可以在物料中使用了，其中核心配置如下：
-```typescript
-{
-  "props": {
-    "isExtends": true,
-    "override": [
-      {
-        "name": "type",
-        "setter": "AltStringSetter"
-      }
-    ]
-  }
-}
-```
-完整配置如下：
-```typescript
-{
-  "componentName": "Message",
-  "title": "Message",
-  "props": [
-    {
-      "name": "title",
-      "propType": "string",
-      "description": "标题",
-      "defaultValue": "标题"
-    },
-    {
-      "name": "type",
-      "propType": {
-        "type": "oneOf",
-        "value": [
-          "success",
-          "warning",
-          "error",
-          "notice",
-          "help",
-          "loading"
-        ]
-      },
-      "description": "反馈类型",
-      "defaultValue": "success"
-    }
-  ],
-  "configure": {
-    "props": {
-      "isExtends": true,
-      "override": [
-        {
-          "name": "type",
-          "setter": "AltStringSetter"
-        }
-      ]
-    }
-  }
-}
-```
-## 模块简介
-负责注册设置器、管理设置器的 API。注册自定义设置器之后可以在物料中进行使用。
-
-## 方法签名（functions）
-### getSetter
-获取指定 setter
-
-**类型定义**
-```typescript
-function getSetter(type: string): RegisteredSetter;
-```
-
-### getSettersMap
-获取已注册的所有 settersMap
-
-**类型定义**
-```typescript
-function getSettersMap(): Map<string, RegisteredSetter>
-```
-
-### registerSetter
-注册一个 setter
-
-**类型定义**
-```typescript
-function registerSetter(
-  typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
-  setter?: CustomView | RegisteredSetter | undefined,
-): void;
-```
-
-## 使用示例
-### 注册官方内置 Setter 到设计器中
-```typescript
-import { setters, skeleton } from '@alilc/lowcode-engine';
-import { setterMap, pluginMap } from '@alilc/lowcode-engine-ext';
-
-const setterRegistry = (ctx: ILowCodePluginContext) => {
-  return {
-    name: 'ext-setters-registry',
-    async init() {
-      // 注册 setterMap
-      setters.registerSetter(setterMap);
-      // 注册插件
-      // 注册事件绑定面板
-      skeleton.add({
-        area: 'centerArea',
-        type: 'Widget',
-        content: pluginMap.EventBindDialog,
-        name: 'eventBindDialog',
-        props: {},
-      });
-
-      // 注册变量绑定面板
-      skeleton.add({
-        area: 'centerArea',
-        type: 'Widget',
-        content: pluginMap.VariableBindDialog,
-        name: 'variableBindDialog',
-        props: {},
-      });
-    },
-  };
-}
-
-setterRegistry.pluginName = 'setterRegistry';
-await plugins.register(setterRegistry);
-```
-
-### 开发自定义 Setter
-AltStringSetter 代码如下：
-```typescript
-import * as React from "react";
-import { Input } from "@alifd/next";
-
-import "./index.scss";
-interface AltStringSetterProps {
-  // 当前值
-  value: string;
-  // 默认值
-  initialValue: string;
-  // setter 唯一输出
-  onChange: (val: string) => void;
-  // AltStringSetter 特殊配置
-  placeholder: string;
-}
-export default class AltStringSetter extends React.PureComponent<AltStringSetterProps> {
-  componentDidMount() {
-    const { onChange, value, defaultValue } = this.props;
-    if (value == undefined && defaultValue) {
-      onChange(defaultValue);
-    }
-  }
-
-  // 声明 Setter 的 title
- 	static displayName = 'AltStringSetter';
-
-  render() {
-    const { onChange, value, placeholder } = this.props;
-    return (
-      <Input
-        value={value}
-        placeholder={placeholder || ""}
-        onChange={(val: any) => onChange(val)}
-      ></Input>
-    );
-  }
-}
-```
-开发完毕之后，注册 AltStringSetter 到设计器中：
-```typescript
-import AltStringSetter from './AltStringSetter';
-const registerSetter = window.AliLowCodeEngine.setters.registerSetter;
+import { setters } from '@alilc/lowcode-engine';
+const { registerSetter } = setters;
 registerSetter('AltStringSetter', AltStringSetter);
 ```
 注册之后，我们就可以在物料中使用了，其中核心配置如下：

docs/docs/api/simulatorHost.md

@@ -1,12 +1,26 @@
 ---
 title: simulatorHost - 模拟器 API
-sidebar_position: 3
+sidebar_position: 10
 ---
-# 模块简介
+> **@types** [IPublicApiSimulatorHost](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/simulator-host.ts)<br/>
+> **@since** v1.0.0
+
+## 模块简介
 负责模拟器相关的 API，包括画布尺寸、语言等。
 
-# 方法（functions）
-## set
+## 方法
+### set
+设置 host 配置值
+```typescript
+/**
+ * 设置若干用于画布渲染的变量，比如画布大小、locale 等。
+ * set config for simulator host, eg. device locale and so on.
+ * @param key
+ * @param value
+ */
+set(key: string, value: any): void;
+```
+**示例**
 设置若干用于画布渲染的变量，比如画布大小、locale 等。
 
 以设置画布大小为例：
@@ -21,11 +35,41 @@ project.simulatorHost.set('deviceClassName', 'my-canvas-class');
 project.simulatorHost.set('deviceStyle', { canvas: { width: '300px', backgroundColor: 'red' }, viewport: { width: '280px' } });
 ```
 
-## get
+### get
 获取模拟器中设置的变量，比如画布大小、locale 等。
+
 ```typescript
-project.simulatorHost.get('device');
+/**
+ * 获取模拟器中设置的变量，比如画布大小、locale 等。
+ * set config value by key
+ * @param key
+ * @returns
+ */
+get(key: string): any;
+
 ```
 
-## rerender
-刷新渲染画布
+### rerender
+触发组件构建，并刷新渲染画布
+
+```typescript
+/**
+ * 触发组件构建，并刷新渲染画布
+ * make simulator render again
+ */
+rerender(): void;
+```
+
+### scrollToNode
+滚动到指定节点
+
+```typescript
+/**
+ * 滚动到指定节点
+ * scroll to specific node
+ * @param node
+ * @since v1.1.0
+ */
+scrollToNode(node: IPublicModelNode): void;
+```
+**@since v1.1.0**

docs/docs/api/skeleton.md

@@ -1,14 +1,18 @@
 ---
 title: skeleton - 面板 API
-sidebar_position: 1
+sidebar_position: 10
 ---
+> **@types** [IPublicApiSkeleton](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/skeleton.ts)<br/>
+> **@since** v1.0.0
+
+
 ## 模块简介
 面板 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)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01eVA0U41xYRP3e5zo0_!!6000000006455-2-tps-1780-996.png)
 
 页面上可以扩展的区域共 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)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN014d2AcS1D5c9TshEiQ_!!6000000000165-2-tps-1892-974.png)
 ### 基本概念
 #### 扩展区域位置 (area)
 ##### topArea
@@ -65,6 +69,7 @@ skeleton.add({
   props: {
     align: "left",
     icon: "wenjian",
+    title: '标题', // 图标下方展示的标题
     description: "JS 面板",
   },
   panelProps: {
@@ -86,7 +91,7 @@ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中
 接入可以参考代码：
 
 ```javascript
-import {skeleton} from "@alilc/lowcode-engine";
+import { skeleton } from "@alilc/lowcode-engine";
 // 注册 logo 面板
 skeleton.add({
   area: "topArea",
@@ -115,44 +120,44 @@ skeleton.add({
   area: "leftArea",
   type: "Dock",
   name: "opener",
-  content: Opener, // Widget 组件实例
-  contentProps: {  // Widget 插件 props
-    xxx: "1",
-  },
   props: {
+    icon: Icon, // Icon 组件实例
     align: "bottom",
-  },
-  onClick: function() {
-    // 打开外部链接
-    window.open('https://lowcode-engine.cn');
-    // 显示 widget
-    skeleton.showWidget('xxx');
+    onClick: function () {
+      // 打开外部链接
+      window.open('https://lowcode-engine.cn');
+      // 显示 widget
+      skeleton.showWidget('xxx');
+    }
   }
 });
 ```
 
-## 变量（variables）
+## 方法
 
-无
-## 方法签名（functions）
-
-### 1. add
-
-```tsx
-add(config: IWidgetBaseConfig & {
-  area?: string;
-}, extraConfig?: object): IWidget | Panel;
-```
+### add
 
 往指定扩展区加入一块面板
 
+```typescript
+/**
+ * 增加一个面板实例
+ * add a new panel
+ * @param config
+ * @param extraConfig
+ * @returns
+ */
+add(config: IPublicTypeWidgetBaseConfig, extraConfig?: Record<string, any>): any;
+```
+
+
 IWidgetBaseConfig 定义如下：
 
 | 属性名 | 含义 | 备注 |
 | --- | --- | --- |
 | name | 面板名称 |  |
 | area | 扩展区位置，可选值：'topArea' &#124; 'leftArea' &#124; 'rightArea' &#124; 'toolbar' &#124; 'bottomArea' &#124; 'mainArea' |  |
-| type | 面板类型，可选值：'Widget' &#124; 'PanelDock' &#124; 'Panel' | 详见前文中对**展示类型**的描述 |
+| type | 面板类型，可选值：'Widget' &#124; 'PanelDock' &#124; 'Panel' &#124; Dock | 详见前文中对**展示类型**的描述 |
 | content | 面板的实现类/节点，类型是 ReactClass &#124; ReactElement |  |
 | props | 面板属性 | align: 'top' &#124; 'bottom' &#124; 'left' &#124; 'center' &#124; 'right'; // 指定面板 icon 位置区域<br />icon: string &#124; ReactElement;  // icon 为字符串时，请确定当前 fusion 主题包中包含该 icon<br />description: string;<br />condition: Function; // 指定当前面板的显影状态 |
 | contentProps | 面板的实现类/节点的参数 |  |
@@ -160,74 +165,309 @@ IWidgetBaseConfig 定义如下：
 | index | 面板的位置，不传默认按插件注册顺序 |  |
 
 
-### 2. remove
-
-remove(config: IWidgetBaseConfig)
+### remove
 
 移除一个面板实例
 
-### 3. showPanel
+```typescript
+/**
+ * 移除一个面板实例
+ * remove a panel
+ * @param config
+ * @returns
+ */
+remove(config: IPublicTypeWidgetBaseConfig): number | undefined;
+```
 
-showPanel(name: string)
+### getPanel
+
+获取面板实例
+
+```typescript
+/**
+ * 获取面板实例
+ * @param name 面板名称
+ */
+getPanel(name: string): IPublicModelSkeletonItem | undefined;
+```
+
+相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts)
+
+@since v1.1.10
+
+### showPanel
 
 展示指定 Panel 实例
 
-### 4. hidePanel
+```typescript
+/**
+ * 展示指定 Panel 实例
+ * show panel by name
+ * @param name
+ */
+showPanel(name: string): void;
+```
 
-hidePanel(name: string)
+### hidePanel
+隐藏面板
 
-### 5. showWidget
+```typescript
+/**
+ * 隐藏面板
+ * hide panel by name
+ * @param name
+ */
+hidePanel(name: string): void;
+```
 
-showWidget(name: string)
+### showWidget
 
 展示指定 Widget 实例
 
-### 6. hideWidget
+```typescript
+/**
+ * 展示指定 Widget 实例
+ * show widget by name
+ * @param name
+ */
+showWidget(name: string): void;
+```
 
-hideWidget(name: string)
+### enableWidget
+将 widget 启用。
+```typescript
+/**
+ * 将 widget 启用
+ * enable widget
+ * @param name
+ */
+enableWidget(name: string): void;
+```
+
+### hideWidget
 
 隐藏指定 widget 实例。
 
-### 7. enableWidget
+```typescript
+/**
+ * 隐藏指定 widget 实例
+ * hide widget by name
+ * @param name
+ */
+hideWidget(name: string): void;
+```
 
-enableWidget(name: string)
-
-将 widget 启用。
-
-注：该函数将会触发全局事件 'skeleton.widget.enable'
-
-### 8. disableWidget
-
-disableWidget(name: string)
+### disableWidget
 
 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。
 
 适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。
 
-## 事件（events）
-### 1. onShowPanel
+```typescript
+/**
+ * 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。
+ * disable widget，and make it not responding any click event.
+ * @param name
+ */
+disableWidget(name: string): void;
+```
 
-onShowPanel(listener: (...args: unknown[]) => void)
+### showArea
+显示某个 Area
+
+```typescript
+/**
+ * 显示某个 Area
+ * show area
+ * @param areaName name of area
+ */
+showArea(areaName: string): void;
+```
+
+
+### hideArea
+隐藏某个 Area
+
+```typescript
+/**
+ * 隐藏某个 Area
+ * hide area
+ * @param areaName name of area
+ */
+hideArea(areaName: string): void;
+```
+
+### getAreaItems
+
+获取某个区域下的所有面板实例
+
+```typescript
+/**
+  * 获取某个区域下的所有面板实例
+  * @param areaName IPublicTypeWidgetConfigArea
+  */
+getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] | undefined;
+```
+
+相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts)
+
+
+
+### registerConfigTransducer
+
+注册一个面板的配置转换器（transducer）。
+
+```typescript
+/**
+ * 注册一个面板的配置转换器（transducer）。
+ * Registers a configuration transducer for a panel.
+ * @param {IPublicTypeConfigTransducer} transducer 
+ *   - 要注册的转换器函数。该函数接受一个配置对象（类型为 IPublicTypeSkeletonConfig）作为输入，并返回修改后的配置对象。
+ *   - The transducer function to be registered. This function takes a configuration object 
+ * 
+ * @param {number} level 
+ *   - 转换器的优先级。优先级较高的转换器会先执行。
+ *   - The priority level of the transducer. Transducers with higher priority levels are executed first.
+ * 
+ * @param {string} [id] 
+ *   - （可选）转换器的唯一标识符。用于在需要时引用或操作特定的转换器。
+ *   - (Optional) A unique identifier for the transducer. Used for referencing or manipulating a specific transducer when needed.
+ */
+registerConfigTransducer(transducer: IPublicTypeConfigTransducer, level: number, id?: string): void;
+```
+
+使用示例
+
+```typescript
+import { IPublicModelPluginContext, IPublicTypeSkeletonConfig } from '@alilc/lowcode-types';
+
+function updatePanelWidth(config: IPublicTypeSkeletonConfig) {
+  if (config.type === 'PanelDock') {
+    return {
+      ...config,
+      panelProps: {
+        ...(config.panelProps || {}),
+        width: 240,
+      },
+    }
+  }
+
+  return config;
+}
+
+const controlPanelWidthPlugin = (ctx: IPublicModelPluginContext) => {
+  const { skeleton } = ctx;
+  (skeleton as any).registerConfigTransducer?.(updatePanelWidth, 1, 'update-panel-width');
+
+  return {
+    init() {},
+  };
+};
+
+controlPanelWidthPlugin.pluginName = 'controlPanelWidthPlugin';
+controlPanelWidthPlugin.meta = {
+  dependencies: [],
+  engines: {
+    lowcodeEngine: '^1.2.3', // 插件需要配合 ^1.0.0 的引擎才可运行
+  },
+};
+
+export default controlPanelWidthPlugin;
+```
+
+## 事件
+### onShowPanel
 
 监听 Panel 实例显示事件
 
-### 2. onHidePanel
+```typescript
+/**
+ * 监听 panel 显示事件
+ * set callback for panel shown event
+ * @param listener
+ * @returns
+ */
+onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
 
-onHidePanel(listener: (...args: unknown[]) => void)
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onHidePanel
 
 监听 Panel 实例隐藏事件
 
-### 3. onShowWidget
+```typescript
+/**
+ * 监听 Panel 实例隐藏事件
+ * set callback for panel hidden event
+ * @param listener
+ * @returns
+ */
+onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
 
-onShowWidget(listener: (...args: unknown[]) => void)
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onDisableWidget
+
+监听 Widget 实例 Disable 事件
+
+```typescript
+/**
+ * 监听 Widget 实例 Disable 事件
+ * @param listener
+ */
+onDisableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onEnableWidget
+
+监听 Widget 实例 Enable 事件
+
+```typescript
+/**
+ * 监听 Widget 实例 Enable 事件
+ * @param listener
+ */
+onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onShowWidget
 
 监听 Widget 实例显示事件
 
-### 4. onHideWidget
+```typescript
+/**
+ * 监听 Widget 显示事件
+ * set callback for widget shown event
+ * @param listener
+ * @returns
+ */
+onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
 
-onHideWidget(listener: (...args: unknown[]) => void)
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onHideWidget
 
 监听 Widget 实例隐藏事件
+
+```typescript
+/**
+ * 监听 Widget 隐藏事件
+ * set callback for widget hidden event
+ * @param listener
+ * @returns
+ */
+onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
 ## 使用示例
 
 ```typescript
@@ -299,7 +539,7 @@ skeleton.disableWidget('sourceEditor');
 import { skeleton } from '@alilc/lowcode-engine';
 
 skeleton.add({
-	name: 'bottomAreaPanelName',
+  name: 'bottomAreaPanelName',
   area: 'bottomArea',
   type: 'Panel',
   content: () => 'demoText',

docs/docs/api/workspace.md

@@ -0,0 +1,172 @@
+---
+title: workspace - 应用级 API
+sidebar_position: 10
+---
+
+> **[@experimental](./#experimental)**<br/>
+> **@types** [IPublicApiWorkspace](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/workspace.ts)<br/>
+> **@since** v1.1.0
+
+## 模块简介
+
+通过该模块可以开发应用级低代码设计器。
+
+## 变量
+
+### isActive
+
+是否启用 workspace 模式
+
+### window
+
+当前设计器窗口模型
+
+```typescript
+get window(): IPublicModelWindow
+```
+
+关联模型 [IPublicModelWindow](./model/window)
+
+### plugins
+
+应用级别的插件注册
+
+```typescript
+get plugins(): IPublicApiPlugins
+```
+
+关联模型 [IPublicApiPlugins](./plugins)
+
+### skeleton
+
+应用级别的面板管理
+
+```typescript
+get skeleton(): IPublicApiSkeleton
+```
+
+关联模型 [IPublicApiSkeleton](./skeleton)
+
+### windows
+
+当前设计器的编辑窗口
+
+```typescript
+get window(): IPublicModelWindow[]
+```
+
+关联模型 [IPublicModelWindow](./model/window)
+
+### resourceList
+
+当前设计器的资源列表数据
+
+```
+get resourceList(): IPublicModelResource;
+```
+
+关联模型 [IPublicModelResource](./model/resource)
+
+## 方法
+
+### registerResourceType
+注册资源
+
+```typescript
+/** 注册资源 */
+registerResourceType(resourceTypeModel: IPublicTypeResourceType): void;
+```
+
+相关类型：[IPublicTypeResourceType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-type.ts)
+
+### setResourceList
+
+设置设计器资源列表数据
+
+```typescript
+setResourceList(resourceList: IPublicResourceList) {}
+```
+
+相关类型：[IPublicResourceData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-list.ts)
+
+### openEditorWindow
+
+打开视图窗口
+
+```typescript
+/**
+ * 打开视图窗口
+ * @deprecated
+ */
+openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;
+
+/** 打开视图窗口 */
+openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;
+```
+
+### openEditorWindowById
+
+通过视图 id 打开窗口
+
+```typescript
+openEditorWindowById(id: string): void;
+```
+
+### removeEditorWindow
+
+移除视图窗口
+
+```typescript
+/**
+ * 移除视图窗口
+ * @deprecated
+ */
+removeEditorWindow(resourceName: string, id: string): void;
+
+/**
+ * 移除视图窗口
+ */
+removeEditorWindow(resource: Resource): void;
+```
+
+### removeEditorWindowById
+
+通过视图 id 移除窗口
+
+```typescript
+removeEditorWindowById(id: string): void;
+```
+
+## 事件
+
+### onChangeWindows
+
+窗口新增/删除的事件
+
+```typescript
+function onChangeWindows(fn: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+### onChangeActiveWindow
+
+active 窗口变更事件
+
+```typescript
+function onChangeActiveWindow(fn: () => void): IPublicTypeDisposable;
+```
+
+相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
+
+
+### onResourceListChange
+
+设计器资源列表数据变更事件
+
+```typescript
+onResourceListChange(fn: (resourceList: IPublicResourceList): void): (): IPublicTypeDisposable;
+```
+
+- 相关类型：[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)
+- 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

docs/docs/article/index.md

@@ -1,38 +1,15 @@
----
-title: 低代码引擎相关文章资料
----
-
-## 官方文章
-
-- [低代码引擎半岁啦，来跟大家唠唠嗑...](https://segmentfault.com/a/1190000042884409)
-- [低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ)
-- [关于 LowCode&ProCode 混合研发的思考](https://mp.weixin.qq.com/s/TY3VXjkSmsQoT47xma3wig)
-- [低代码渲染那些事](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA)
-- [阿里低代码引擎和生态建设实战及思考](https://mp.weixin.qq.com/s/MI6MrUKKydtnSdO4xq6jwA)
-- [磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw)
-- [2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)
-- [阿里低代码引擎 LowCodeEngine 正式开源！](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA)
-
-## 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/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/)
+# 官方文章
+- [2023/11/09 UIPaaS | 基于 LowCodeEngine 的低代码平台孵化器](https://mp.weixin.qq.com/s/mKuv3_Wvgt5T3AGErUGBQQ)
+- [2023/04/04 什么？低代码引擎可以开发应用了](https://mp.weixin.qq.com/s/dwi40gJjGBHW9MVpag5Oxg)
+- [2023/03/23 低代码引擎 LowCodeEngine 茁壮成长的一年](https://mp.weixin.qq.com/s/DDt4LQLFUBQ2-F5ehZGBKg)
+- [2023/02/21 基于 LowCodeEngine 的低代码组件体系的建设和实践](https://mp.weixin.qq.com/s/rnvbGHImGt6oJuX2wCtaqw)
+- [2022/12/21 低代码多分支协同开发的建设与实践](https://mp.weixin.qq.com/s/DmwxL67htHfTUP1U966N-Q)
+- [2022/11/24 低代码引擎半岁啦，来跟大家唠唠嗑...](https://segmentfault.com/a/1190000042884409)
+- [2022/10/27 低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ)
+- [2022/08/23 基于 LowCodeEngine 的调试能力建设与实践](https://mp.weixin.qq.com/s/H8KvEOylmzLPgIuuBO0S9w)
+- [2022/06/23 低代码渲染那些事](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA)
+- [2022/06/16 关于 LowCode&ProCode 混合研发的思考](https://mp.weixin.qq.com/s/TY3VXjkSmsQoT47xma3wig)
+- [2022/04/07 磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw)
+- [2022/03/23 阿里低代码引擎 LowCodeEngine 正式开源！](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA)
+- [2022/01/10 阿里低代码引擎和生态建设实战及思考](https://mp.weixin.qq.com/s/MI6MrUKKydtnSdO4xq6jwA)
+- [2021/04/14 2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)

docs/docs/demoUsage/appendix/api.md

@@ -1,7 +1,8 @@
 ---
-title: DataSource - 数据源 API
-sidebar_position: 12
+title: demo 使用相关 API
+sidebar_position: 2
 ---
+## 数据源相关
 ### 请求数据源
 ```javascript
 // 请求 userList（userList 在数据源面板中定义）

docs/docs/demoUsage/appendix/loop.md

@@ -15,3 +15,14 @@ sidebar_position: 0
 ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01XQfnYL1P4wxn01oXv_!!6000000001788-2-tps-3840-1896.png)
 
 this.index 是当前循环的索引值。
+
+3.在事件绑定函数中使用
+
+在事件绑定函数中使用扩展参数设置
+![image](https://github.com/alibaba/lowcode-engine/assets/11935995/7274506e-decd-497a-b07f-c95941a706b4)
+
+绑定之后在函数中使用
+![image](https://github.com/alibaba/lowcode-engine/assets/11935995/9d52ee5c-9959-4991-91be-9391e639bb7e)
+
+按钮点击效果
+![image](https://github.com/alibaba/lowcode-engine/assets/11935995/6ca590c9-1f5f-4d48-94a5-439130a22e92)

docs/docs/demoUsage/intro.md

@@ -3,28 +3,28 @@ title: 1. 试用低代码引擎 Demo
 sidebar_position: 0
 ---
 低代码编辑器中的区块主要包含这些功能点：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644562161350-50ae7ccd-2e6f-4f50-af56-30e5cc5624dc.png#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=892&id=udd8e7731&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1784&originWidth=3384&originalType=binary&ratio=1&rotation=0&showTitle=false&size=509888&status=done&style=none&taskId=u1621cea1-8e9d-48d0-9273-bf852ef8e82&title=&width=1692)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01aGQull1RVdGs7Pt6x_!!6000000002117-2-tps-3384-1784.png)
 
 ## 分区块功能介绍
 ### 左侧：面板与操作区
 #### 物料面板
 可以查找组件，并在此拖动组件到编辑器画布中
-![Dec-17-2021 19-12-46.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562213143-49b9aff8-b538-43f4-a66d-53fac98ce7ae.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u3a98c25c&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-12-46.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u265abeb3-a0b1-4cdf-9291-c5fa865d06c&title=&width=734)
+![Dec-17-2021 19-12-46.gif](https://img.alicdn.com/imgextra/i1/O1CN01pEu7811SlwzxraLHG_!!6000000002288-1-tps-1468-754.gif)
 
 #### 大纲面板
 可以调整页面内的组件树结构：
-![Dec-17-2021 19-14-34.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562213701-39f3e2c3-f52c-4be4-bb56-90842daa58ab.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u1d18d088&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-14-34.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2d6ebf59-3cd5-4e80-8599-a4d594a2cbf&title=&width=734)
+![Dec-17-2021 19-14-34.gif](https://img.alicdn.com/imgextra/i1/O1CN013DDLqt1GH0rAlajqi_!!6000000000596-1-tps-1468-754.gif)
 可以在这里打开或者关闭模态浮层的展现：
-![Dec-17-2021 19-19-18.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562213674-44d91956-ac82-4909-98b5-e0bd4fcbe12d.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u7d3beb31&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-19-18.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u6adfe95e-0c27-4c03-8e3c-ca62cb37387&title=&width=734)
+![Dec-17-2021 19-19-18.gif](https://img.alicdn.com/imgextra/i2/O1CN01bQfS8W1JitokHRinC_!!6000000001063-1-tps-1468-754.gif)
 
 
 #### 源码面板
 可以编辑页面级别的 JavaScript 代码和 CSS 配置
-![Feb-11-2022 14-51-59.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562356337-9e7f7490-396c-4520-b780-4a43a29050ef.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=u02b5cb05&margin=%5Bobject%20Object%5D&name=Feb-11-2022%2014-51-59.gif&originHeight=614&originWidth=1532&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2080513&status=done&style=none&taskId=u2f95447f-b7a6-453d-8a8c-7d1649581d9&title=)
+![Feb-11-2022 14-51-59.gif](https://img.alicdn.com/imgextra/i1/O1CN01d11kK71Q223eWvL5F_!!6000000001917-1-tps-1532-614.gif)
 
 #### Schema 编辑
 【开发者专属】可以编辑页面的底层 Schema 数据。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644562411102-a8596fce-fd77-4f20-bd3c-b52e2a0beb52.png#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=824&id=u3488f050&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1648&originWidth=3070&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1082743&status=done&style=none&taskId=u529bf58c-2203-484f-bf9f-19c2a3fe870&title=&width=1535)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01lcQOER23Q5sjA0Gn5_!!6000000007249-2-tps-3070-1648.png)
 搭配顶部操作区的“保存到本地”和“重置页面”功能，可以实验各种 schema 对低代码页面的改变。
 
 它们操作的数据关系是：
@@ -36,45 +36,45 @@ sidebar_position: 0
 #### 中英文切换
 可以切换编辑器的语言；注：需要组件配置配合。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644562219182-e4233163-b731-4f09-a442-9d5c0e71e7e8.png#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=756&id=ua3adfd78&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1512&originWidth=3018&originalType=binary&ratio=1&rotation=0&showTitle=false&size=384093&status=done&style=none&taskId=uf546934b-ae91-4e3e-9e21-2447de70ed1&title=&width=1509)
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644562219666-1baf7da2-6d70-45fa-8805-b6cc9ac99f3f.png#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=755&id=u34aad08e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1510&originWidth=3016&originalType=binary&ratio=1&rotation=0&showTitle=false&size=380190&status=done&style=none&taskId=ud264115a-ae01-4b65-9ccc-4e6efa37b62&title=&width=1508)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN019ORknX1M5SYg7eSJ3_!!6000000001383-2-tps-3018-1512.png)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01R7g7pW21rSJEHd2AI_!!6000000007038-2-tps-3016-1510.png)
 ## 中部：可视化页面编辑画布区域
 
 点击组件在右侧面板中能够显示出对应组件的属性配置选项
-![Dec-17-2021 19-28-28.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562216925-c4bd5f10-2469-452c-8c2d-fe92ba6d03a7.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=uff491710&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-28-28.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2f775208-8b07-4968-9dd4-420c6e4d3c1&title=&width=734)
+![Dec-17-2021 19-28-28.gif](https://img.alicdn.com/imgextra/i1/O1CN01uBU3lR1CuAFTTq4RS_!!6000000000140-1-tps-1468-754.gif)
 
 拖拽修改组件的排列顺序
-![Dec-17-2021 19-29-40.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562219867-61a41b16-4513-4827-80bf-f7e4832bcf3a.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=ueda50ec8&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-29-40.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ue0ec6bea-81f1-4d04-bf82-acde7c9983a&title=&width=734)
+![Dec-17-2021 19-29-40.gif](https://img.alicdn.com/imgextra/i3/O1CN01DAAYKd1bycUq1C4JV_!!6000000003534-1-tps-1468-754.gif)
 
 将组件拖拽到容器类型的组件中，注意拖拽时会在右侧提示当前的组件树。
-![Dec-17-2021 19-31-30.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562220001-4afae72e-f9fd-4564-a904-c87f61ba79b5.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=ucc719a0e&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-31-30.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2c46a827-8702-471c-a8c1-eb4f069d108&title=&width=734)
+![Dec-17-2021 19-31-30.gif](https://img.alicdn.com/imgextra/i2/O1CN01TzJosP1FIYZe6xIQ5_!!6000000000464-1-tps-1468-754.gif)
 
 ## 右侧：组件级别配置
 
 ### 选中的组件
 从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上。
-![Dec-17-2021 19-35-25.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562220818-c6532319-51df-4698-a3a4-80f3ab70b209.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u648c740b&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-35-25.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u03dd1651-8139-47f1-9cd1-a5089b64bf9&title=&width=734)
+![Dec-17-2021 19-35-25.gif](https://img.alicdn.com/imgextra/i4/O1CN01EbImy425R80OeblSD_!!6000000007522-1-tps-1468-754.gif)
 
 ### 选中组件的配置
 当前组件的大类目选项，根据组件类型不同，包含如下子类目：
 
 #### 属性
 组件的基础属性值设置
-![Dec-17-2021 19-37-26.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562222884-191c8433-2386-47f4-bab4-d3d1fe534f12.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u43676a31&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-37-26.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u170b8d2a-c1f9-4acf-a0e2-9825c588dcd&title=&width=734)
+![Dec-17-2021 19-37-26.gif](https://img.alicdn.com/imgextra/i2/O1CN01ziBI9T1nQynFKqCp2_!!6000000005085-1-tps-1468-754.gif)
 
 #### 样式
 组件的样式配置，如文字：
-![Dec-17-2021 19-38-55.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562224062-86fcf97b-d229-487f-951d-d2070337c058.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u4a9930ae&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-38-55.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u4a81ecb9-5b51-4758-9dd0-eaeb2e1a318&title=&width=734)
+![Dec-17-2021 19-38-55.gif](https://img.alicdn.com/imgextra/i4/O1CN017DQv2R1OEjoawXmKJ_!!6000000001674-1-tps-1468-754.gif)
 
 #### 事件
 绑定组件对外暴露的事件。
-![Dec-17-2021 19-41-17.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562224632-a3ee9b18-97e8-4d31-b4fe-b58720dc6bf5.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u534bb1ea&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-41-17.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u50691375-2514-4a6c-8bec-0be44adf141&title=&width=734)
+![Dec-17-2021 19-41-17.gif](https://img.alicdn.com/imgextra/i2/O1CN01mhVutF24I8cLde0zy_!!6000000007367-1-tps-1468-754.gif)
 
 #### 高级
 循环、条件渲染与 key 设置。
-![Dec-17-2021 19-46-26.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562226094-899cf104-3c60-439f-8b68-83af595ef275.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u9190ed31&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-46-26.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uf02555c1-cd82-486d-8561-ca97e0ec1cd&title=&width=734)
+![Dec-17-2021 19-46-26.gif](https://img.alicdn.com/imgextra/i4/O1CN01xTjXQX1jMcYwuTGKZ_!!6000000004534-1-tps-1468-754.gif)
 
 ## 顶部：操作区
 
 ### 撤回和重做
-![Dec-17-2021 19-52-23.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562226083-d7f69bff-42e6-4173-8ac8-6e5a0c0262d6.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u81f5d842&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-52-23.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ubeb556cd-2349-44d8-b1be-ba6e32bea4e&title=&width=734)
+![Dec-17-2021 19-52-23.gif](https://img.alicdn.com/imgextra/i3/O1CN019VWkbr1jsgHoGKf6g_!!6000000004604-1-tps-1468-754.gif)

docs/docs/demoUsage/makeStuff/dialog.md

@@ -2,6 +2,8 @@
 title: 3. 如何通过按钮展示/隐藏弹窗
 sidebar_position: 1
 ---
+> 说明：这个方式依赖低代码弹窗组件是否对外保留了相关的 API，不同的物料支持的方式不一样，这里只针对综合场景的弹窗物料。
+
 ## 1.拖拽一个按钮
 
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01kLaWA31D6WwTui9VW_!!6000000000167-2-tps-3584-1812.png)

docs/docs/demoUsage/makeStuff/table.md

@@ -10,7 +10,7 @@ sidebar_position: 0
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01UU8pVT26XN1A0ExVG_!!6000000007671-2-tps-3032-1648.png)
 
 将他们拖到画布之中：
-![Feb-16-2022 16-58-59.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645002115004-4f01eb8d-cf68-4a7c-b0db-bc5aaf2604a3.gif#clientId=uf61aba9b-3a69-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=396&id=uf69dc239&margin=%5Bobject%20Object%5D&name=Feb-16-2022%2016-58-59.gif&originHeight=792&originWidth=1534&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7510570&status=done&style=stroke&taskId=ua6ea2651-6c6c-4762-98cc-cc3ab5734cd&title=&width=767)
+![Feb-16-2022 16-58-59.gif](https://img.alicdn.com/imgextra/i3/O1CN01UAsQ8124HgDptzPrn_!!6000000007366-1-tps-1534-792.gif)
 ### 配置组件
 
 选中刚拖入的“查询筛选”组件，您可以配置此组件：
@@ -21,7 +21,7 @@ sidebar_position: 0
 ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01eWOK0d1fOfsF9PZu9_!!6000000003997-2-tps-3060-1476.png)
 
 掌握组件配置功能，我们就可以完成一个常用的查询框的配置：
-![Feb-21-2022 18-05-52.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645437973453-1fd1dc10-99ad-4c18-af49-2741bd81c4ae.gif#clientId=u022fc577-71a7-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=u964ae52f&margin=%5Bobject%20Object%5D&name=Feb-21-2022%2018-05-52.gif&originHeight=790&originWidth=1532&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7210902&status=done&style=stroke&taskId=u9e39c54a-7467-4a96-b716-681cf598f09&title=&width=766)
+![Feb-21-2022 18-05-52.gif](https://img.alicdn.com/imgextra/i1/O1CN0138fb0P1CTbHKWDBeo_!!6000000000082-1-tps-1532-790.gif)
 
 ### 绑定数据
 
@@ -98,7 +98,7 @@ class LowcodeComponent extends Component {
 
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01K3Pwjo1PKWQcoBl5K_!!6000000001822-2-tps-3170-1904.png)
 
-![Feb-16-2022 20-24-35.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645014292272-68e07740-47dc-4c94-8437-beded0b07c63.gif#clientId=uf61aba9b-3a69-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=396&id=u4506fc72&margin=%5Bobject%20Object%5D&name=Feb-16-2022%2020-24-35.gif&originHeight=792&originWidth=1532&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6960677&status=done&style=stroke&taskId=u9fe02184-e6dc-4886-b371-c48ca1e2832&title=&width=766)
+![Feb-16-2022 20-24-35.gif](https://img.alicdn.com/imgextra/i2/O1CN01VGlZPS1JitoljrFFY_!!6000000001063-1-tps-1532-792.gif)
 
 将 Loading 的“是否显示”字段绑定 `this.state.loading` 后，我们可以看到，这里暴露了一个插槽。插槽是可以任意扩展的预设部分，我们可以把其他的部分拖进插槽：
 
@@ -110,16 +110,16 @@ class LowcodeComponent extends Component {
 ### 列挂钩浮层
 
 为了能够让表格里的操作挂钩浮层，我们先拖入一个浮层：
-![Feb-16-2022 20-32-09.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645014772471-0fce9b50-0f70-492e-bb53-5f875c00f5b4.gif#clientId=uf61aba9b-3a69-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=396&id=u4d33cd05&margin=%5Bobject%20Object%5D&name=Feb-16-2022%2020-32-09.gif&originHeight=792&originWidth=1532&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7475148&status=done&style=stroke&taskId=u9dc26cba-41eb-4fe8-b96f-fe391968861&title=&width=766)
+![Feb-16-2022 20-32-09.gif](https://img.alicdn.com/imgextra/i2/O1CN01bX3SHk21Z8T4O6knp_!!6000000006998-1-tps-1532-792.gif)
 
 使用大纲树能够临时显示和隐藏此浮层：
-![Feb-16-2022 20-32-39.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645014828329-b2de4db6-9032-4280-b886-db17070eea21.gif#clientId=uf61aba9b-3a69-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=396&id=ue27e6676&margin=%5Bobject%20Object%5D&name=Feb-16-2022%2020-32-39.gif&originHeight=792&originWidth=1530&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7335022&status=done&style=stroke&taskId=u73554a5d-5ebe-48d1-a861-426ba8501b1&title=&width=765)
+![Feb-16-2022 20-32-39.gif](https://img.alicdn.com/imgextra/i3/O1CN01ZtSp0P1LvNqYPeUHg_!!6000000001361-1-tps-1530-792.gif)
 
 我们给表格增加一个数据列：
 ![Feb-16-2022 20-39-41.gif](https://img.alicdn.com/imgextra/i2/O1CN012K6qWI1hgCG6KwRF7_!!6000000004306-1-tps-1532-792.gif)
 
 然后配置它的行为为“弹窗”：
-![Feb-16-2022 20-40-05.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645015223838-7f180e28-43e0-442b-a47e-ea5ff69d4900.gif#clientId=uf61aba9b-3a69-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=396&id=u80f44f38&margin=%5Bobject%20Object%5D&name=Feb-16-2022%2020-40-05.gif&originHeight=792&originWidth=1532&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7261162&status=done&style=stroke&taskId=u3828503a-ecac-452a-8d20-02e4a46ad02&title=&width=766)
+![Feb-16-2022 20-40-05.gif](https://img.alicdn.com/imgextra/i2/O1CN016axZh61uc9ln0L3Rz_!!6000000006057-1-tps-1532-792.gif)
 
 实现的效果如下：
 ![Feb-16-2022 20-42-51.gif](https://img.alicdn.com/imgextra/i4/O1CN018iana91j4l71QTmpE_!!6000000004495-1-tps-1534-792.gif)
@@ -127,10 +127,10 @@ class LowcodeComponent extends Component {
 ### 事件回调
 
 上述功能点中，我们是把操作行为绑定在数据列上的，这一节我们绑定到操作列中。在操作列按钮处，点击下方的“添加一项”：
-![Feb-23-2022 11-58-02.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645588703676-2a36cab4-52f4-4f31-9018-d56b41a55283.gif#clientId=u74bf469f-47f0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=u18d8ea0b&margin=%5Bobject%20Object%5D&name=Feb-23-2022%2011-58-02.gif&originHeight=790&originWidth=1534&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8440133&status=done&style=stroke&taskId=u73e25800-c0fa-486b-9b68-4df7db9b9f1&title=&width=767)
+![Feb-23-2022 11-58-02.gif](https://img.alicdn.com/imgextra/i4/O1CN01DsBoHQ1tyli2rtoFR_!!6000000005971-1-tps-1534-790.gif)
 
 点击左侧的详情按钮，配置它的事件回调：
-![Feb-23-2022 12-00-18.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645588832183-7ed0f06b-731d-4bd8-b934-723de43a8b42.gif#clientId=u74bf469f-47f0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=u59505da7&margin=%5Bobject%20Object%5D&name=Feb-23-2022%2012-00-18.gif&originHeight=790&originWidth=1534&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9047220&status=done&style=stroke&taskId=ub8ab1b4e-4195-426f-b792-fc8bf91d142&title=&width=767)
+![Feb-23-2022 12-00-18.gif](https://img.alicdn.com/imgextra/i2/O1CN017BuNLP1LPmW8zH7hx_!!6000000001292-1-tps-1534-790.gif)
 
 代码侧，我们配置这个回调函数：
 ```javascript

docs/docs/demoUsage/panels/canvas.md

@@ -5,18 +5,18 @@ sidebar_position: 1
 ## 组件操作
 ### 画布操作
 点击组件在右侧面板中能够显示出对应组件的属性配置选项
-![Dec-17-2021 19-28-28.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562216925-c4bd5f10-2469-452c-8c2d-fe92ba6d03a7.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=uff491710&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-28-28.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2f775208-8b07-4968-9dd4-420c6e4d3c1&title=&width=734)
+![Dec-17-2021 19-28-28.gif](https://img.alicdn.com/imgextra/i1/O1CN01flb5tL1inM47Gdo3a_!!6000000004457-1-tps-1468-754.gif)
 
 拖拽修改组件的排列顺序
-![Dec-17-2021 19-29-40.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562219867-61a41b16-4513-4827-80bf-f7e4832bcf3a.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=ueda50ec8&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-29-40.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ue0ec6bea-81f1-4d04-bf82-acde7c9983a&title=&width=734)
+![Dec-17-2021 19-29-40.gif](https://img.alicdn.com/imgextra/i3/O1CN01UJ1x731NBFB4eELV0_!!6000000001531-1-tps-1468-754.gif)
 
 拖拽时会在右侧提示当前的组件树。
-![Dec-17-2021 19-31-30.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562220001-4afae72e-f9fd-4564-a904-c87f61ba79b5.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=ucc719a0e&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-31-30.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2c46a827-8702-471c-a8c1-eb4f069d108&title=&width=734)
+![Dec-17-2021 19-31-30.gif](https://img.alicdn.com/imgextra/i1/O1CN01jLUYQE1h4dmcfYhZB_!!6000000004224-1-tps-1468-754.gif)
 
 ### 组件控制
 点击组件右上角的复制按钮，或者按下 `ctrl + c` 再按下 `ctrl + v`，可以将其复制；
 点击组件右上角的删除按钮，或者直接使用 `Delete` 键，可以将其删除。
-![Dec-17-2021 19-33-20.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1644562220898-a54f0cfa-26bf-461f-a4aa-9708fc367d7c.gif#clientId=u99b5ef7a-7ebb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=377&id=u2bae31a2&margin=%5Bobject%20Object%5D&name=Dec-17-2021%2019-33-20.gif&originHeight=754&originWidth=1468&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u2c4c7b00-b316-431a-9c54-949ae4ed766&title=&width=734)
+![Dec-17-2021 19-33-20.gif](https://img.alicdn.com/imgextra/i2/O1CN01QT1pq621gvCVpoOm6_!!6000000007015-1-tps-1468-754.gif)
 
 ### 选择组件切换
 
@@ -28,7 +28,7 @@ sidebar_position: 1
 - `→` 向右选择组件
 
 可以 hover 到组件操作辅助区的第一项来选中组件的父级节点：
-![Feb-22-2022 14-42-30.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645512169966-17f26afa-00fc-47a5-86be-08505ab39a4f.gif#clientId=u5c3042e1-7626-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=uee0cbe0a&margin=%5Bobject%20Object%5D&name=Feb-22-2022%2014-42-30.gif&originHeight=790&originWidth=1536&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2913977&status=done&style=stroke&taskId=ud9314fe0-0943-48e5-9f0c-b9b9b4a6b47&title=&width=768)
+![Feb-22-2022 14-42-30.gif](https://img.alicdn.com/imgextra/i4/O1CN01RWbgGJ1TM8HoOpQ7V_!!6000000002367-1-tps-1536-790.gif)
 
 ### 可扩展项简述
 
@@ -37,12 +37,12 @@ sidebar_position: 1
 ## Slot 区块
 
 React 中，可以定义一个 prop 选项为 `JSXElement` 或 `(...args) => JSXElement` 的形式，这个形式在低代码画布中，被定义为 Slot，允许往其内部拖入组件，进行符合直觉的操作。
-![Feb-22-2022 14-46-02.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645512376500-46baf1b5-2335-4fb5-a430-c2f2245c8439.gif#clientId=u5c3042e1-7626-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=u8c429d95&margin=%5Bobject%20Object%5D&name=Feb-22-2022%2014-46-02.gif&originHeight=790&originWidth=1534&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2389349&status=done&style=stroke&taskId=u7462c2e4-64bf-432a-aa2e-2fef526b4d4&title=&width=767)
+![Feb-22-2022 14-46-02.gif](https://img.alicdn.com/imgextra/i4/O1CN01geivkn1csUog5gZbm_!!6000000003656-1-tps-1534-790.gif)
 
 ### 锁定 Slot
 
 您可以对 Slot 进行锁定操作，锁定后内部内容无法选中；
-![Feb-22-2022 14-50-03.gif](https://cdn.nlark.com/yuque/0/2022/gif/242652/1645512638545-ae46bcd2-883b-4229-9f78-d59087d03d28.gif#clientId=u5c3042e1-7626-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=395&id=u87ff9fe3&margin=%5Bobject%20Object%5D&name=Feb-22-2022%2014-50-03.gif&originHeight=790&originWidth=1534&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9318074&status=done&style=none&taskId=ua4e1f652-2e72-4dcf-ad78-19b42e179c3&title=&width=767)
+![Feb-22-2022 14-50-03.gif](https://img.alicdn.com/imgextra/i3/O1CN01eBD3WY1rPNsZt8UVL_!!6000000005623-1-tps-1534-790.gif)
 
 在组件树可以解除操作。
 
@@ -54,7 +54,7 @@ React 中，可以定义一个 prop 选项为 `JSXElement` 或 `(...args) => JSX
 
 - 侵入型：组件编辑态下，会往组件内传入 `__designMode: 'design'`，可以在组件中进行相应处理；
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1645512859914-b51c23b9-50d9-4962-a6f7-96dbdcef6cef.png#clientId=u5c3042e1-7626-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=821&id=uf96a3071&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1642&originWidth=3066&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1024714&status=done&style=none&taskId=u7838e6c7-2349-4224-94ed-4e0e972b2a2&title=&width=1533)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01Xh3o891gvTrNBMMy2_!!6000000004204-2-tps-3066-1642.png)
 
 - 双入口型：通过配置物料的 editUrls，加载专属于编辑态组件的物料。pro-layout 使用的是这种方式
 ```json

docs/docs/demoUsage/panels/code.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 
 ## 面板功能拆解
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644897390779-cefb2c31-82fc-44f4-b824-adc32569ac6f.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=870&id=u23446c19&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1740&originWidth=2502&originalType=binary&ratio=1&rotation=0&showTitle=false&size=865371&status=done&style=none&taskId=u44e2b188-c268-4a30-a628-76a046be9d4&title=&width=1251)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01pRxmmD1agTBVwCO5x_!!6000000003359-2-tps-2502-1740.png)
 
 ### 代码编辑面板
 
@@ -15,8 +15,8 @@ sidebar_position: 3
 
 | 编译前 | 编译后 |
 | --- | --- |
-| ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644897774925-b54126e0-ff6b-445e-bc68-569731aef8c3.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=95&id=nhuiT&margin=%5Bobject%20Object%5D&name=image.png&originHeight=190&originWidth=670&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25045&status=done&style=none&taskId=u323192f6-7cfa-4d73-a184-2699f648c6f&title=&width=335) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644897840129-83fe9a81-d8b2-4873-8764-904f531ec959.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=55&id=u3ba8300e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=110&originWidth=2094&originalType=binary&ratio=1&rotation=0&showTitle=false&size=44006&status=done&style=none&taskId=uef1552e3-ccdb-45dd-95d5-187a6c6b7df&title=&width=1047) |
-| ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644897884917-641b1547-7b90-4f78-86c1-0cc51996623d.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=60&id=u5fa00781&margin=%5Bobject%20Object%5D&name=image.png&originHeight=120&originWidth=434&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17421&status=done&style=none&taskId=uecee8fbf-a786-4f89-ac9c-f2f8d059fe0&title=&width=217) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644897915892-a1784bc2-693b-4cf6-a082-3c8e0368a987.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=60&id=ubcca6a46&margin=%5Bobject%20Object%5D&name=image.png&originHeight=120&originWidth=2536&originalType=binary&ratio=1&rotation=0&showTitle=false&size=50743&status=done&style=none&taskId=ue0f418e0-4192-4bfd-8912-9b64faedb66&title=&width=1268) |
+| ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01xI9RVX1yV46HbW02H_!!6000000006583-2-tps-670-190.png) | ![image.png](https://img.alicdn.com/imgextra/i1/O1CN012exYQL1y37wKM7VFT_!!6000000006522-2-tps-2094-110.png) |
+| ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01pK2rPi1lhLij4m3o7_!!6000000004850-2-tps-434-120.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01ti4n9m1ihOupktQow_!!6000000004444-2-tps-2536-120.png) |
 
 
 > 注：因为编译结果会被 `@babel/runtime` 干扰，目前面板不支持 `async await`或 `{ ...arr }` 形态的语法编译。如果您需要此类编译，您可以考虑在读取 schema 中的 `originCode` 之后自己手动通过 babel 编译。
@@ -28,7 +28,7 @@ sidebar_position: 3
 ```typescript
 window.Next.Message.success('成功')
 ```
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644898647058-9a5d6800-31fd-4c62-a577-850b90fc5d21.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=57&id=ue6231d61&margin=%5Bobject%20Object%5D&name=image.png&originHeight=114&originWidth=238&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11360&status=done&style=none&taskId=u869f3709-a599-4ead-a80f-fa3b49c9836&title=&width=119)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01Fxjd801p4eigEBpb6_!!6000000005307-2-tps-238-114.png)
 
 #### 局部变量引用
 
@@ -45,21 +45,18 @@ window.Next.Message.success('成功')
 
 - 读取：每次打开面板时，都会尝试读取 schema 中的 originCode 字段，如果没有，则从 schema 上的字段还原代码；
 - 写入：在关闭代码编辑面板（主动点击叉或者点击非代码编辑区块的被动关闭都算）时，将自动写入到 schema 中；您也可以在编辑过程中点击“保存”按钮手动保存；
-| 源码面板中 | schema 中 |
+
+| 源码面板中 | Schema 中 |
 | --- | --- |
-| 本地数据初始值设置：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899552013-3de394fd-f530-4b4f-8258-8b9c64f11c11.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=73&id=u291f7733&margin=%5Bobject%20Object%5D&name=image.png&originHeight=146&originWidth=370&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17505&status=done&style=none&taskId=u55496884-bc04-4867-9295-c71f44b77ef&title=&width=185) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899587782-0ceea074-07bb-4260-a580-7f49a82740ed.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=413&id=u01ae12cb&margin=%5Bobject%20Object%5D&name=image.png&originHeight=826&originWidth=2098&originalType=binary&ratio=1&rotation=0&showTitle=false&size=776122&status=done&style=none&taskId=ube04795b-6244-4aac-9ebc-f4624e605db&title=&width=1049) |
-| 生命周期方法：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899759963-d198edc4-a8c7-4a3f-90ee-b42244398958.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=130&id=uafcbf72e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=260&originWidth=478&originalType=binary&ratio=1&rotation=0&showTitle=false&size=37208&status=done&style=none&taskId=u19b58f72-7058-4a22-9a8e-334a9a541bd&title=&width=239) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899791416-a7969846-8d7d-4c51-9c55-6b1c65faf07b.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=418&id=uc6edd06d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=836&originWidth=2010&originalType=binary&ratio=1&rotation=0&showTitle=false&size=806116&status=done&style=none&taskId=uacb7cf67-ee4b-45ba-962a-24f43b525bc&title=&width=1005) |
-| 自定义函数：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899808831-538e59a7-6d40-4e1a-bd72-bd2332bb9d7c.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=321&id=u2ea3e043&margin=%5Bobject%20Object%5D&name=image.png&originHeight=642&originWidth=660&originalType=binary&ratio=1&rotation=0&showTitle=false&size=72124&status=done&style=none&taskId=uc6ec76e1-89a0-4dad-a0ab-053730e2b4d&title=&width=330) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899830711-e262e41e-8332-4810-9293-bd4ef540c919.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=411&id=ueb7c1ad8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=822&originWidth=1862&originalType=binary&ratio=1&rotation=0&showTitle=false&size=815729&status=done&style=none&taskId=u3aae2a2e-4de4-468a-bd5a-5bec53b908a&title=&width=931) |
-| 编译前全量代码：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899850193-0b1990ea-e494-4c5f-94ef-9a1fdbde0a98.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=561&id=u92136fdf&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1122&originWidth=762&originalType=binary&ratio=1&rotation=0&showTitle=false&size=165346&status=done&style=none&taskId=u727c08ae-f56f-4632-acc0-837fa220681&title=&width=381) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899882162-648366a3-5b0b-4cf3-b103-bf3812f6e807.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=398&id=ub882b04a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=796&originWidth=1906&originalType=binary&ratio=1&rotation=0&showTitle=false&size=716114&status=done&style=none&taskId=u94d53b7d-5ea9-471a-b82c-3dec1a532b5&title=&width=953) |
+| 本地数据初始值设置：![image.png](https://img.alicdn.com/imgextra/i4/O1CN01V6iaTY1gVNHi7gQfK_!!6000000004147-2-tps-370-146.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN010rhIPa268BEfGmzO6_!!6000000007616-2-tps-2098-826.png) |
+| 生命周期方法：![image.png](https://img.alicdn.com/imgextra/i4/O1CN010Y1TxV1QOvrVLRUjD_!!6000000001967-2-tps-478-260.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01pbJzVQ1VSfAL7Lh8G_!!6000000002652-2-tps-2010-836.png) |
+| 自定义函数：![image.png](https://img.alicdn.com/imgextra/i4/O1CN01S2gjFk1CU3fm61eiD_!!6000000000083-2-tps-660-642.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01X35YxU1GUkjj1YWVj_!!6000000000626-2-tps-1862-822.png) |
+| 编译前全量代码：![image.png](https://img.alicdn.com/imgextra/i2/O1CN01sbiK9N1kc1Uxp1OHY_!!6000000004703-2-tps-762-1122.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01adKSg61QXAzRjQ4bm_!!6000000001985-2-tps-1906-796.png) |
 
 
 - 异常处理：如果代码解析失败，它将无法被正常保存到 schema 中，此时编辑器会弹层提示：
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899252223-57317fcb-0958-4f38-a37b-00eaa5561512.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=819&id=u2d66f54c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1638&originWidth=3068&originalType=binary&ratio=1&rotation=0&showTitle=false&size=473979&status=done&style=none&taskId=u9e4a4c69-dd56-4265-93d7-9b2e4e8971a&title=&width=1534)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01aSzh8o26rWRu6zXFE_!!6000000007715-2-tps-3068-1638.png)
 
 ### 样式编辑面板
 
@@ -67,7 +64,7 @@ window.Next.Message.success('成功')
 
 | 源码面板中 | Schema 中 |
 | --- | --- |
-| ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899312003-76f4c95e-221f-4b5f-92ae-c51e664385e0.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=194&id=u30912dec&margin=%5Bobject%20Object%5D&name=image.png&originHeight=388&originWidth=634&originalType=binary&ratio=1&rotation=0&showTitle=false&size=42979&status=done&style=none&taskId=ue2a18106-55f3-4cff-8f95-904317d0419&title=&width=317) | ![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899355488-aa352d2d-a001-434f-9368-021befea52ed.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=291&id=u60b8f9d4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=582&originWidth=1646&originalType=binary&ratio=1&rotation=0&showTitle=false&size=454443&status=done&style=none&taskId=u236b94fb-6c20-4c6c-9fe3-7cd75eef0c4&title=&width=823) |
+| ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01cuWt4L27fRcW5WIP9_!!6000000007824-2-tps-634-388.png) | ![image.png](https://img.alicdn.com/imgextra/i4/O1CN01Edu7Gy1MzKsb2iss8_!!6000000001505-2-tps-1646-582.png) |
 
 
 ## 对接代码
@@ -92,8 +89,8 @@ window.Next.Message.success('成功')
 通常书写代码是为了对接低代码配置中的“变量绑定”、“事件回调”、“条件判断”和“循环”部分的。
 
 #### 变量绑定
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644899977727-f4f44171-52e8-4062-b558-436536b84640.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=732&id=ua42e46e3&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1464&originWidth=2738&originalType=binary&ratio=1&rotation=0&showTitle=false&size=957243&status=done&style=stroke&taskId=u56f7f36d-535d-48e9-8a0c-e0cb1f9af1d&title=&width=1369)
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900005551-14c356a0-2e51-4b0b-82b5-8a135d1c6c3e.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=583&id=ufcb9db2b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1166&originWidth=1528&originalType=binary&ratio=1&rotation=0&showTitle=false&size=153133&status=done&style=stroke&taskId=u208e369b-f019-4019-8c2e-4c28b6eba91&title=&width=764)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01wcgwOI1wOXDtgfrgD_!!6000000006298-2-tps-2738-1464.png)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01GYVAw41FlrvEyFcCO_!!6000000000528-2-tps-1528-1166.png)
 ```json
 {
   "componentName": "NextBlockCell",
@@ -110,8 +107,8 @@ window.Next.Message.success('成功')
 
 
 #### 事件回调
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900095962-2ec54fb5-e1f8-4d4a-a75e-24e1c685a833.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=726&id=ufed11f2e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1452&originWidth=2734&originalType=binary&ratio=1&rotation=0&showTitle=false&size=749908&status=done&style=stroke&taskId=uc379b8ec-c344-48f8-9b43-8d9be961356&title=&width=1367)
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900119673-f9538274-c896-4951-86f2-54d60ac95316.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=581&id=uffdcbbce&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1162&originWidth=1670&originalType=binary&ratio=1&rotation=0&showTitle=false&size=118712&status=done&style=stroke&taskId=u261a9b7f-9f5a-406a-aa55-8a3f33bdd05&title=&width=835)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01B0tvgw1O6x58dbbIb_!!6000000001657-2-tps-2734-1452.png)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01sD9g2n1tQQ0OjQkcY_!!6000000005896-2-tps-1670-1162.png)
 ```json
 {
   "componentName": "Filter",
@@ -135,8 +132,8 @@ window.Next.Message.success('成功')
 ```
 
 #### 条件判断
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900186943-de6b33de-adca-4c1b-8f47-f68cf6ce5f77.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=726&id=u23b46226&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1452&originWidth=2738&originalType=binary&ratio=1&rotation=0&showTitle=false&size=789132&status=done&style=stroke&taskId=u6322e6a8-bea3-47d8-a374-b9ec6558bb9&title=&width=1369)
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900005551-14c356a0-2e51-4b0b-82b5-8a135d1c6c3e.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=583&id=G2uKJ&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1166&originWidth=1528&originalType=binary&ratio=1&rotation=0&showTitle=false&size=153133&status=done&style=stroke&taskId=u208e369b-f019-4019-8c2e-4c28b6eba91&title=&width=764)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01zXqec823EBaCutOY2_!!6000000007223-2-tps-2738-1452.png)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01Ze3snL24BGfuRIMCl_!!6000000007352-2-tps-1528-1166.png)
 ```json
 {
   "componentName": "Filter",
@@ -150,8 +147,8 @@ window.Next.Message.success('成功')
 ```
 
 #### 循环
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900265929-c21c9927-1f34-49b6-9dc6-bcb4357190be.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=730&id=u8f457b1e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1460&originWidth=2746&originalType=binary&ratio=1&rotation=0&showTitle=false&size=781151&status=done&style=stroke&taskId=u92be7d31-2070-4a08-bc1c-6b1a599c682&title=&width=1373)
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644900005551-14c356a0-2e51-4b0b-82b5-8a135d1c6c3e.png#clientId=ud3fa1588-e66f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=583&id=ot5cO&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1166&originWidth=1528&originalType=binary&ratio=1&rotation=0&showTitle=false&size=153133&status=done&style=stroke&taskId=u208e369b-f019-4019-8c2e-4c28b6eba91&title=&width=764)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01Kbj6XP297fe0BvhKz_!!6000000008021-2-tps-2746-1460.png)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN018Ogesd1qnN0IOKRDZ_!!6000000005540-2-tps-1528-1166.png)
 ```json
 {
   "componentName": "Filter",

docs/docs/demoUsage/panels/component.md

@@ -5,7 +5,7 @@ sidebar_position: 0
 ## 概述
 组件面板顾名思义就是承载组件的面板，组件面板会获取并解析传入给低代码引擎的资产包数据 (数据结构[点此查看](https://lowcode-engine.cn/assets))，得到需要被展示的组件列表，并根据分类、排序规则对组件进行排列，同时也提供了搜索功能。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/231502/1647964501932-33676243-c42b-4e7c-8663-77c5898d3343.png#clientId=uf38e3cbf-9388-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=438&id=ubb9e4616&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1672&originWidth=3056&originalType=binary&ratio=1&rotation=0&showTitle=true&size=451947&status=done&style=stroke&taskId=u0fc240e1-a792-4bd1-b84d-5bbc8e8fc8b&title=%E7%BB%84%E4%BB%B6%E9%9D%A2%E6%9D%BF&width=800 "组件面板")
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01a6xgwH1wCAWugmNvU_!!6000000006271-2-tps-3056-1672.png)
 ## 组件信息
 组件面板承载的组件信息有：
 
@@ -19,7 +19,7 @@ sidebar_position: 0
 
 其中标题和截图是我们能够看到的，schema 片段则是拖拽到设计器时会自动插入页面 schema 中，面板会根据分组、分类来对组件进行排列；
 这些组件信息均通过资产包数据获取，字段对应关系如下图所示：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/231502/1647965256061-d15ad119-471f-43c7-8856-2c91bb3670ad.png#clientId=uf38e3cbf-9388-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1012&id=u1b3132db&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1678&originWidth=1326&originalType=binary&ratio=1&rotation=0&showTitle=false&size=996705&status=done&style=stroke&taskId=u6730f591-c7e1-42ba-8cb7-fcc95e76e8c&title=&width=800)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN012ZUg6a289fl4z6WCm_!!6000000007890-2-tps-1326-1678.png)
 ## 组件分组、分类排序
 组件面板会把相同分组的组件放在同一个 tab 下，相同分类的组件放在同一个 collapse 中，同时也支持对 tab 和 collapse 进行排序；
 由于是整体性的排序，组件自身的信息无法决定此排序，因此在资产包数据根节点新增了 sort 字段用于指定分组和分类的排序，具体定义在[《低代码引擎资产包协议规范》](https://lowcode-engine.cn/assets)2.4 sort 章节；

docs/docs/demoUsage/panels/datasource.md

@@ -5,14 +5,14 @@ sidebar_position: 4
 ## 🪚 概述
 数据源面板主要负责管理低代码中远程数据源内容，通过可视化编辑的方式操作低代码协议中的数据源 Schema，配合 [数据源引擎](/site/docs/guide/design/datasourceEngine) 即可实现低代码中数据源的生产和消费；
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/84508/1648397674378-aec10892-5ee4-414d-807e-39f55f3a5be5.png#clientId=u38847497-05f3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=821&id=u07e82f8a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1642&originWidth=2878&originalType=binary&ratio=1&rotation=0&showTitle=false&size=246032&status=done&style=none&taskId=uc18acbc5-1404-4266-a499-e952d1084c4&title=&width=1439)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN0170HeBg276B7fM9rqh_!!6000000007747-2-tps-2878-1642.png)
 
 数据源面板
 ## ❓如何使用
 > 面板内包含了数据源创建、删除、编辑、排序、导入导出、复制以及搜索等能力，内置支持了 `fecth` & `JSONP`两种常用远程请求类型；
 
 ### 三步创建一个数据源
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/84508/1648398269436-bd241801-e617-4640-830f-03b44aca80a1.png#clientId=u38847497-05f3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=819&id=u1ee9fa0d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1638&originWidth=2878&originalType=binary&ratio=1&rotation=0&showTitle=false&size=279302&status=done&style=none&taskId=ue1248934-df36-423c-86f3-160a4e865da&title=&width=1439)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01bkgbqj1cOGfwQtEif_!!6000000003590-2-tps-2878-1638.png)
 三步创建数据源
 
 ### 参数详解

docs/docs/demoUsage/panels/settings.md

@@ -5,7 +5,7 @@ sidebar_position: 2
 # 设置器介绍
 ## 展示区域
 设置器，又称为 Setter，主要展示在编辑器的右边区域，如下图：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2553587/1647695118402-ac146307-f6e2-4755-8be3-67278c505283.png#clientId=u547a37e3-c43d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=865&id=u3cac31de&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1730&originWidth=3836&originalType=binary&ratio=1&rotation=0&showTitle=false&size=947162&status=done&style=none&taskId=u35373859-102e-4809-adfd-680b2dd4cda&title=&width=1918)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01jN0toi1OknXWrPuYt_!!6000000001744-2-tps-3836-1730.png)
 其中包含 属性、样式、事件、高级
 
 - 属性：展示该物料常规的属性
@@ -18,7 +18,7 @@ sidebar_position: 2
 ## 设置器
 上述区域中是有多项设置器的，对于一个组件来说，每一项配置都对应一个设置器，比如我们的配置是一个文本，我们需要的是文本设置器，我们需要配置的是数字，我们需要的就是数字设置器。
 下图中的标题和按钮类型配置就分别是文本设置器和下拉框设置器。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2553587/1647695118227-bf6caf7c-4974-4b35-8d6b-0c4969fc316d.png#clientId=u547a37e3-c43d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=407&id=u51d889e6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1460&originWidth=2120&originalType=binary&ratio=1&rotation=0&showTitle=false&size=489840&status=done&style=none&taskId=u35d4519f-b82d-43c4-9eb4-bd44e6d67b1&title=&width=591)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01Bl2hgm1GiUcXD3TOO_!!6000000000656-2-tps-2120-1460.png)
 我们提供了常用的设置器作为内置设置器，也提供了定制能力帮助大家开发特定需求的设置器。
 # 内置设置器
 | **预置 Setter** | **用途** |

docs/docs/faq/faq002.md

@@ -6,28 +6,28 @@ tags: [FAQ]
 渲染唯一标识（key）和 React 中组件的 key 属性的原理是一致的，都是为了在渲染场景或者组件切换的场景中唯一标识一个组件。
 
 你可以在组件右侧配置面板的「高级」中看到此配置项，该配置项一般配合「是否渲染」和「循环」功能使用。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1659076591507-f37841b4-a3c2-4c87-b875-5f0458b2a3d2.png#clientId=u87aade85-8350-4&crop=0&crop=0&crop=1&crop=1&height=348&id=dbojA&margin=%5Bobject%20Object%5D&name=image.png&originHeight=696&originWidth=560&originalType=binary&ratio=1&rotation=0&showTitle=false&size=102096&status=done&style=none&taskId=ub4a95aaa-8630-47ad-b0e3-881b5d54ac9&title=&width=280)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01wU7y30232jgLlfzRe_!!6000000007198-2-tps-560-696.png)
 
 ## 以下场景必需设置「渲染唯一标识」
 #### 场景一：同类组件切换
 以下场景中，当「爱好」选择「游戏」时显示「最喜欢的游戏」，选择「运动」时显示「最喜欢的运动」
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1659076591520-b2e1121b-3f4e-4c7c-88c8-82a761b85fe0.png#clientId=u87aade85-8350-4&crop=0&crop=0&crop=1&crop=1&height=294&id=Xr3NB&margin=%5Bobject%20Object%5D&name=image.png&originHeight=588&originWidth=1560&originalType=binary&ratio=1&rotation=0&showTitle=false&size=78723&status=done&style=none&taskId=u59b975eb-93a1-4c8a-bb3b-17ef8b7005c&title=&width=780)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN016qHhJB1XWRfUJsml7_!!6000000002931-2-tps-1560-588.png)
 
 配置方式如下：
 
 1. 增加变量数据源：hobby
 2. 「最喜欢的游戏」表单标识设置为 game，「是否渲染」绑定变量「state.hobby === '游戏'」
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1659076591653-27fac7ab-bba0-4965-a706-d0c1c867f539.png#clientId=u87aade85-8350-4&crop=0&crop=0&crop=1&crop=1&height=369&id=f8kif&margin=%5Bobject%20Object%5D&name=image.png&originHeight=738&originWidth=2164&originalType=binary&ratio=1&rotation=0&showTitle=false&size=306076&status=done&style=none&taskId=ub6da537a-3bc7-450d-b640-dc0db8defac&title=&width=1082)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01oOemw41d0HY3qpwum_!!6000000003673-2-tps-2164-738.png)
 
 3. 「最喜欢的运动」表单标识设置为 sport，「是否渲染」绑定变量「state.hobby === '运动'」
 4. 「爱好」设置 onChange 动作
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1659076591442-2903e2b2-4688-4a5e-98de-7df9933710b5.png#clientId=u87aade85-8350-4&crop=0&crop=0&crop=1&crop=1&height=97&id=hR3Pp&margin=%5Bobject%20Object%5D&name=image.png&originHeight=194&originWidth=892&originalType=binary&ratio=1&rotation=0&showTitle=false&size=53803&status=done&style=none&taskId=ue8919283-2e5f-46a8-9d6b-942c03f8482&title=&width=446)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01oH4Giy1GTpwZwVSrO_!!6000000000624-2-tps-892-194.png)
 
 5. 「提交」按钮绑定 onClick 动作
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/110793/1659076591508-ddd3c767-bf22-4dae-a006-5e6c4e0ea956.png#clientId=u87aade85-8350-4&crop=0&crop=0&crop=1&crop=1&height=67&id=VWtPz&margin=%5Bobject%20Object%5D&name=image.png&originHeight=134&originWidth=750&originalType=binary&ratio=1&rotation=0&showTitle=false&size=46519&status=done&style=none&taskId=ud6a5d2b0-481b-4bbb-8fe3-8622e2ebfb3&title=&width=375)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN016kkf3O1uj1i9ev7uy_!!6000000006072-2-tps-750-134.png)
 
 按以上配置（不配置渲染唯一标识），确实可以实现切换爱好时下方的文本框切换，但在提交数据时会发现，即使选择了「运动」，提交的时候 sport 字段是「最喜欢的游戏」的值。
 

docs/docs/faq/faq003.md

@@ -7,14 +7,14 @@ tags: [FAQ]
 
 - [Antd Table 下 button 点击事件怎么拿到行数据？](https://github.com/alibaba/lowcode-engine/issues/341)
 ## 方式 1
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657593243427-fb5641b2-4987-475e-88ab-c68d2085edbd.png#clientId=u31b40d04-56f2-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=563&id=u5167bf33&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1126&originWidth=3342&originalType=binary&ratio=1&rotation=0&showTitle=false&size=225551&status=done&style=none&taskId=ud1b89a63-4b6a-4986-a6df-2a463fcf08a&title=&width=1671)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01i58EGG1bxFJBdlS6x_!!6000000003531-2-tps-3342-1126.png)
 
 参考 fusion protable，将操作列直接耦合 button 组件，因为 col.render 函数能拿到 行数据 record，那么 pro-table 组件封装的时候，就可以在渲染操作列按钮的时候，将 col.render 参数透传给 button 组件
 
 ## 方式 2
 slot + 扩展参数
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657593299698-9628db14-7b48-4c06-9e6f-bda637c209a8.png#clientId=u31b40d04-56f2-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=574&id=u20b07439&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1148&originWidth=3284&originalType=binary&ratio=1&rotation=0&showTitle=false&size=232140&status=done&style=none&taskId=ubc80905d-0607-4e73-9386-5dde706e572&title=&width=1642)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01pQk2RC1WBXyxjNDif_!!6000000002750-2-tps-3284-1148.png)
 
 将扩展参数写成：
 ```json

docs/docs/faq/faq005.md

@@ -9,13 +9,13 @@ tags: [FAQ]
 
 ### 通过资产包
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657273720962-70045da1-7559-4f7f-a3da-35759778066c.png#averageHue=%231f221e&clientId=ueb9290e1-769e-4&crop=0&crop=0&crop=1&crop=1&errorMessage=unknown%20error&from=paste&height=394&id=u698ffae7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=788&originWidth=806&originalType=binary&ratio=1&rotation=0&showTitle=false&size=175357&status=error&style=none&taskId=u2ed6a3cd-5ec4-4b84-a3c0-fd3379b7019&title=&width=403)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01WWJVSA1WutBvCzXnl_!!6000000002849-2-tps-806-788.png)
 
 就可以在引擎代码中访问到 moment
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657273737110-6c064e4c-6435-456a-b168-480058b14da8.png#averageHue=%23fdfdfc&clientId=ueb9290e1-769e-4&crop=0&crop=0&crop=1&crop=1&errorMessage=unknown%20error&from=paste&height=126&id=u4ec5fba0&margin=%5Bobject%20Object%5D&name=image.png&originHeight=252&originWidth=1248&originalType=binary&ratio=1&rotation=0&showTitle=false&size=128347&status=error&style=none&taskId=udd229103-04e3-4fc5-9fba-9115354bb9d&title=&width=624)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01EEJ0Kp1nZgJm68nSG_!!6000000005104-2-tps-1248-252.png)
 
 PS：需要在 packages 中有相关的资源配置，例如：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1657273863884-2068444e-5653-4b25-ba3a-fd192409fbaa.png#averageHue=%231f1f1d&clientId=ueb9290e1-769e-4&crop=0&crop=0&crop=1&crop=1&errorMessage=unknown%20error&from=paste&height=210&id=ud2a4b3c6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=420&originWidth=1322&originalType=binary&ratio=1&rotation=0&showTitle=false&size=113099&status=error&style=none&taskId=u7ba0f438-9c39-4398-b048-9d0556e2079&title=&width=661)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01bdiHVv206uRYvvAAr_!!6000000006801-2-tps-1322-420.png)
 
 否则在画布中可能会访问不到对应的资源。
 

docs/docs/faq/faq006.md

@@ -3,4 +3,4 @@ title: 如何通过 API 手动调用数据源请求
 sidebar_position: 6
 tags: [FAQ]
 ---
-参考：[DataSource API](/site/docs/api/datasource)
+参考：[DataSource API](/site/docs/demoUsage/appendix/api)

docs/docs/faq/faq007.md

@@ -3,7 +3,7 @@ title: 设置面板中的高级 tab 如何配置
 sidebar_position: 7
 tags: [FAQ]
 ---
-![93DC003C-D9A1-4F4F-98A1-F22C0A89EA92.png](https://cdn.nlark.com/yuque/0/2022/png/1053439/1657161085153-a26657ae-2c6e-4124-b9ab-6f8cf8126d1f.png#clientId=u300df630-5bbe-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=591&id=u2ff7824e&margin=%5Bobject%20Object%5D&name=93DC003C-D9A1-4F4F-98A1-F22C0A89EA92.png&originHeight=1714&originWidth=960&originalType=binary&ratio=1&rotation=0&showTitle=false&size=107040&status=done&style=none&taskId=ub377dc1d-db5a-4234-980f-66f7143950d&title=&width=331)
+![93DC003C-D9A1-4F4F-98A1-F22C0A89EA92.png](https://img.alicdn.com/imgextra/i4/O1CN01lVutr6243wL6gOQAc_!!6000000007336-2-tps-960-1714.png)
 
 默认这个 tab 下的内容为引擎内置，如需要定制，可以使用以下 API
-[https://lowcode-engine.cn/docV2/mu7lml#lIK37](https://lowcode-engine.cn/docV2/mu7lml#lIK37)
+[https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数](https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数)

docs/docs/faq/faq009.md

@@ -19,7 +19,7 @@ AliLowCodeEngine.material.componentsMap
 ```
 查看物料配置是否正常。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1655277296065-40eeae64-1323-4f7d-89c3-bc48c928aca4.png#clientId=u21fd51ec-6ae9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=408&id=u21239467&margin=%5Bobject%20Object%5D&name=image.png&originHeight=816&originWidth=1640&originalType=binary&ratio=1&rotation=0&showTitle=false&size=379372&status=done&style=none&taskId=u12a736de-695e-45b9-817b-0f9f6b3a601&title=&width=820)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01bAsPoT1QOTSp7Fmz5_!!6000000001966-2-tps-1640-816.png)
 
 如果正常继续。
 LowCodeEngine 需要升级到 1.0.10
@@ -28,6 +28,28 @@ AliLowCodeEngine.project.simulator.renderer.components
 ```
 看看对应的物料是否存在，如果不存在，排查物料问题。
 
+如果不正常，查看资产包配置，其中资产包中的 `components` 和 `material.componentsMap` 生成有关系。
+
+例如，物料配置信息在 @alilc/lowcode-materials 包里面，即需要在 components 中加上下面的代码
+
+```javascript
+"components": [{
+  "exportName": "AlilcLowcodeMaterialsMeta",
+  "npm": {
+    "package": "@alilc/lowcode-materials"
+  },
+  "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
+  "urls": {
+    "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
+    "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.design.js"
+  }
+}]
+```
+
+`material.componentsMap` 不存在相关的组件信息，原因有两个：
+- 没有添加对应的物料到 components 字段中
+- components 配置不正确，需要查看 url 是否正常加载，查看 exportName 是否配置正确，即 `window.${exportName}` 是否存在。
+
 2.选中组件，在控制台中输入
 ```json
 AliLowCodeEngine.project.currentDocument.selection.getNodes()[0].exportSchema('render')

docs/docs/faq/faq010.md

@@ -15,4 +15,4 @@ AliLowCodeEngine.skeleton.add({
 });
 ```
 这里设置 index 为负数，可以将其调整到第一的位置。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653964459415-694283f6-9c5f-4143-b6d4-51b5aa37f719.png#clientId=uaed53506-efef-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=579&id=u99009edf&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1158&originWidth=1614&originalType=binary&ratio=1&rotation=0&showTitle=false&size=390356&status=done&style=none&taskId=ue153a8c6-13b0-48fa-bfe9-a0d9f7b6cc3&title=&width=807)
+![image.png](https://img.alicdn.com/imgextra/i4/O1CN01PTCH3r20fiXrrbcXe_!!6000000006877-2-tps-1614-1158.png)

docs/docs/faq/faq011.md

@@ -5,7 +5,8 @@ tags: [FAQ]
 ---
 ## 简单场景
 可以利用 props.__designMode
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653962601596-46e21531-9b8c-45bd-84a7-7522856eb3c9.png#clientId=u8f8d6439-2532-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=220&id=u4d7df210&margin=%5Bobject%20Object%5D&name=image.png&originHeight=440&originWidth=1616&originalType=binary&ratio=1&rotation=0&showTitle=false&size=232329&status=done&style=none&taskId=u85deaa53-ef14-4ce2-a5a2-ac201aa60f5&title=&width=808)
+
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01btr66024FOEldBOr2_!!6000000007361-2-tps-1616-440.png)
 
 设计态中，__designMode 值为 "design"
 
@@ -13,11 +14,13 @@ tags: [FAQ]
 
 ## 复杂场景
 在资产包里定义 editUrls
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653962648722-ac8ff758-a0c3-4323-8312-11ac9b511ecf.png#clientId=u8f8d6439-2532-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=269&id=uad79aeaf&margin=%5Bobject%20Object%5D&name=image.png&originHeight=538&originWidth=1590&originalType=binary&ratio=1&rotation=0&showTitle=false&size=257391&status=done&style=none&taskId=u3d8d556b-2da7-40b4-b7e6-cd3600cfbd4&title=&width=795)
+
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01odal6P27Rhjn8NoJ6_!!6000000007794-2-tps-1590-538.png)
 
 ### editUrls
 在 lowcode/xx/ 下新建一个 view.tsx
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653971463822-3335e539-6b97-43a7-adf9-cba221a68d87.png#clientId=u89265c24-4294-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=77&id=u466ed474&margin=%5Bobject%20Object%5D&name=image.png&originHeight=154&originWidth=598&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31756&status=done&style=none&taskId=u1f7eeec2-323c-45c7-a1f7-e18bfa3a1db&title=&width=299)
+
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01q0Bbn91Lrig7d0alA_!!6000000001353-2-tps-598-154.png)
 
 再执行
 ```json
@@ -26,4 +29,4 @@ npm run lowcode:build
 
 之后，build/lowcode 目录下既有 view.js，可作为 editUrls 配置在资产包中。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653971523747-c15e63e6-9fb7-481e-bf5b-c4bd6cb25927.png#clientId=u89265c24-4294-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=493&id=ucaf08028&margin=%5Bobject%20Object%5D&name=image.png&originHeight=986&originWidth=1082&originalType=binary&ratio=1&rotation=0&showTitle=false&size=235573&status=done&style=none&taskId=ue21c1ab4-0d1b-49fb-8889-b7210b90d41&title=&width=541)
+![image.png](https://img.alicdn.com/imgextra/i1/O1CN01dvIZ441alxwIlwexS_!!6000000003371-2-tps-1082-986.png)

docs/docs/faq/faq012.md

@@ -61,7 +61,7 @@ condition: () => false,
 
 ### 配置没有生效
 查看组件中的 schema，对应的配置是否已经正确设置。
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/2622706/1653894934869-963be13a-1d6a-458a-a1e1-fd21fa9fc765.png#clientId=uc4e9cec0-362f-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=577&id=u956bc36a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1154&originWidth=1046&originalType=binary&ratio=1&rotation=0&showTitle=false&size=339838&status=done&style=none&taskId=uf64dae1b-23e9-4444-ab20-9e5f17a5449&title=&width=523)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN015AGT4l1MwaVGGwgua_!!6000000001499-2-tps-1046-1154.png)
 
 没有正确设置上可能的原因是
 1.snippets 中没有默认值

docs/docs/faq/faq013.md

@@ -10,9 +10,28 @@ tags: [FAQ]
 ## 处理方式
 ### 【推荐】升级到 Engine Verison 1.0.11 以上
 ### 新增 save propsReducer
-通过新增 Save 态的 propsReducer，将 hidden props 去掉。
-参考：
-[https://github.com/alibaba/lowcode-demo/blob/main/src/sample-plugins/delete-hidden-transducer/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/src/sample-plugins/delete-hidden-transducer/index.ts)
+
+通过新增 Save 态的 propsReducer，将 hidden props 去掉。可以参考下面的代码：
+
+```typescript
+import { project } from '@alilc/lowcode-engine';
+import { IPublicEnumTransformStage } from '@alilc/lowcode-types';
+
+export const deleteHiddenTransducer = (ctx: any) => {
+  return {
+    name: 'deleteHiddenTransducer',
+    async init() {
+      project.addPropsTransducer((props: any): any => {
+        delete props.hidden;
+        return props;
+      }, IPublicEnumTransformStage.Save);
+    },
+  };
+}
+
+deleteHiddenTransducer.pluginName = 'deleteHiddenTransducer';
+
+```
 
 ### 导出 schema 使用 Save 态
 ```typescript

docs/docs/faq/faq014.md

@@ -12,7 +12,7 @@ tags: [FAQ]
 在项目的 externals 配置里加[一行配置](https://github.com/alibaba/lowcode-demo/blob/f8afad0df3190565caccc0a1dfd750dbf84c680f/build.json#L16)
 
 ## 其他项目
-[相关文档](https://lowcode-engine.cn/docV2/start-with-lce#OMRA2)
+[相关文档](/site/docs/guide/create/useEditor#引入-umd-包资源)
 ### webpack
 [https://webpack.docschina.org/configuration/externals/](https://webpack.docschina.org/configuration/externals/)
 

docs/docs/faq/faq015.md

@@ -4,4 +4,4 @@ sidebar_position: 15
 tags: [FAQ]
 ---
 你可以通过在线工具「Parts 造物」生产物料描述协议，然后使用到你的项目中去。
-文档地址：[利用 Parts 造物快速使用 react 组件](/site/docs/guide/expand/editor/partsIntro)
+文档地址：[利用 Parts 造物快速使用 react 组件](/site/docs/guide/expand/editor/parts/partsIntro)

docs/docs/faq/faq018.md

@@ -5,6 +5,6 @@ tags: [FAQ]
 ---
 低代码引擎在架构上是和具体语言无关的，通过一定的扩展和插件是可以生成 Vue 页面代码的。
 如果只是用现有的基于 React 的 fusion 物料来搭建，只是在最终出码的时候生成 Vue 页面代码，那您需要准备一套和 fusion 兼容的 vue 物料，并定制个出码方案，将[下面的一些出码插件](https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/src/solutions/icejs.ts)替换成生成 Vue 框架的即可：
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/263300/1648542644942-c019ffd4-1312-4d31-ad61-4e487a47df71.png#clientId=ue0e8d3cc-f9f8-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=517&id=u64b1f996&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1368&originWidth=974&originalType=binary&ratio=1&rotation=0&showTitle=false&size=771387&status=done&style=none&taskId=u51022017-4248-49b8-b8b3-be9a7bb48fb&title=&width=368)
-详细定制方案可以参考下[《自定义出码》](https://lowcode-engine.cn/docV2/cplfv0#857ba793)。
-如果您希望在搭建的时候也使用 Vue 的物料，则还需要扩展定制入料、画布和渲染器等模块，详细方案请参考下[《扩展低代码编辑器》](https://lowcode-engine.cn/docV2/srdo3s)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN01VxkwCL1l85DiDC2BO_!!6000000004773-2-tps-974-1368.png)
+详细定制方案可以参考下[《自定义出码》](/site/docs/guide/expand/runtime/codeGeneration#5自定义出码)。
+如果您希望在搭建的时候也使用 Vue 的物料，则还需要扩展定制入料、画布和渲染器等模块，详细方案请参考下[《扩展低代码编辑器》](/site/docs/guide/expand/editor/summary)

docs/docs/faq/faq020.md

@@ -5,7 +5,7 @@ tags: [FAQ]
 ---
 如果您是自己配置的引擎打包，那么可能会遇到这个问题。
 
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644896737710-a746e04d-bf4a-40a3-b917-a09235363c81.png#clientId=u627d7b4e-5fe3-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=492&id=u06a9f219&margin=%5Bobject%20Object%5D&name=image.png&originHeight=984&originWidth=1912&originalType=binary&ratio=1&rotation=0&showTitle=false&size=1210174&status=done&style=none&taskId=u2b829db8-026d-472a-baf4-d4660fb5a4a&title=&width=956)
+![image.png](https://img.alicdn.com/imgextra/i3/O1CN013xHmcz1WBXygt7VvC_!!6000000002750-2-tps-1912-984.png)
 
 问题的根源是 code-editor 插件运行时直接依赖了 babel 来完成 jsx 编译，babel 从 7.17.0 开始依赖了使用 ESM 编写的 @ampproject/remapping@2.1.0。如果打包工具无法正确处理 ESM，则可能报错。
 

docs/docs/faq/faq021.md

@@ -0,0 +1,18 @@
+---
+title: 提交 PR 时，明明签署过 CLA，仍被提示需要签署
+sidebar_position: 21
+tags: [FAQ]
+---
+## 问题原因
+
+原因是：git commit 时，本地 git config 配置的 email 与 github 账号的 email 不一致，导致未被识别出来，检查方式
+
+```bash
+git config user.email
+```
+
+## 解决办法
+
+如何配置，可参考 [is-it-possible-to-have-different-git-configuration-for-different-projects](https://stackoverflow.com/questions/8801729/is-it-possible-to-have-different-git-configuration-for-different-projects)
+
+配置好正确的 email 之后，已提交的代码需要以新的配置重新提交才可生效。

docs/docs/faq/faq022.md

@@ -0,0 +1,18 @@
+---
+title: 节点无法拖拽到 Page 下
+sidebar_position: 22
+tags: [FAQ]
+---
+查看 Page 节点的 childWhitelist 配置，如果 Page 配置了 childWhitelist，且当前节点不在白名单下，是无法拖拽的。
+```typescript
+AliLowCodeEngine.material.getComponentMeta('Page').getMetadata().configure.component.nestingRule.childWhitelist
+```
+
+比如在 [demo](https://lowcode-engine.cn/demo/demo-general/index.html) 中 Page 组件的 childWhitelist 为：['NextPage', 'ProDialog', 'Dialog', 'Drawer']，则只有这些组件可以拖拽到 Page 的 children 下，其他组件均不可以。
+
+说明：1.0.15 之前 Page 组件的 childWhitelist 限制是失效的，在 1.0.16 版本进行了 bug 修复。
+
+### 解决办法
+**方法 1：直接修改 Page 组件的 childWhitelist，比如删除**。
+
+**方法 2：通过 **[**material.registerMetadataTransducer**](/site/docs/api/material#registermetadatatransducer)** 修改 Page 组件的 childWhitelist（适用于 Page 组件是其他人维护的）**

docs/docs/faq/faq023.md

@@ -0,0 +1,31 @@
+---
+title: Slot组件渲染报错问题
+sidebar_position: 23
+tags: [FAQ]
+---
+
+## 问题描述
+在低代码引擎的页面渲染过程中，可能会遇到一个关于Slot组件的报错，提示“Slot找不到”。实际上，在渲染态时不应使用Slot组件。
+
+## 问题原因
+低代码引擎渲染分为两个状态：设计态和渲染态。
+- **设计态**：为了帮助插槽进行可视化设计，引入了Slot组件。
+- **渲染态**：在此状态下，不需要使用Slot组件。
+
+这个问题通常是因为在渲染态错误地使用了设计态的schema。
+
+## 解决方案
+1. **区分设计态和渲染态**：通过`project.exportSchema(TransformStage.Save)`的参数来区分。
+   - `TransformStage.Save`代表渲染态的schema，其中不包含Slot组件。
+   - 【默认值】`TransformStage.Render`代表设计态的schema，其中包含Slot组件。
+2. **使用正确的API和参数**：确保在渲染态使用正确的schema，避免引用设计态的Slot组件。
+3. **处理脏数据问题**：如果问题是由脏数据导致，清除数据并重新拖拽组件以恢复正常。
+
+## 注意事项
+- 确保在代码和配置中正确区分设计态和渲染态。
+- 如果遇到持续的问题，检查是否有脏数据或配置错误，并进行相应的清理和调整。
+
+## 相关链接
+- Issue链接：[Issue #1798](https://github.com/alibaba/lowcode-engine/issues/1798)
+
+---

docs/docs/faq/faq024.md

@@ -0,0 +1,133 @@
+---
+title: workspace 模式常见问题
+sidebar_position: 23
+tags: [FAQ]
+---
+
+#### 如何判断是否开启了IDE模式？
+
+- **通过官方API判断**：您可以通过访问 [workspace.isActive](/site/docs/api/workspace#isactive) 来判断当前是否处于IDE模式。这是阿里低代码引擎提供的一个官方API，专门用于确认是否处于集成开发环境。
+
+
+
+#### 如何使用插件的ctx来做判断在哪个模式下？
+
+- **插件是否为应用级别**：可以通过 **ctx.isPluginRegisteredInWorkspace** 方法来判断一个插件是否是应用级别的插件。这有助于理解插件在阿里低代码引擎中的作用域和潜在的使用场景。
+- **插件的注册级别**：您可以使用 **ctx.registerLevel** 属性来判断插件处于哪个级别。插件级别的值包括：
+  - **Default**：默认级别。非 IDE 模式下的值
+  - **Workspace**：应用级别。
+  - **Resource**：资源级别。
+  - **EditorView**：编辑视图级别。 这些级别代表了插件可能的作用域和使用场景，有助于在开发和管理低代码应用时对插件进行更精确的控制和配置。
+
+
+
+#### 如何在IDE模式下设置资源列表？
+
+- **设置资源列表API**：在IDE模式下，可以通过访问 [workspace.setResourceList](/site/docs/api/workspace#setresourcelist) 来设置或更新IDE中的资源列表。这确保您在编辑器窗口中打开的资源是最新且可访问的。
+
+
+
+#### 如何打开视图窗口？
+
+- **使用推荐的方法**：使用 `openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;` 来打开视图窗口。这里的 **resource** 参数指的是您要打开的特定资源，可通过 [workspace.resourceList](/site/docs/api/workspace#resourcelist) 获取。
+- **不推荐使用的过时方法**：有一个过时的方法 `openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;` 也用于打开视图窗口。虽然仍然可用，但官方不推荐使用此方法，并计划在后续版本中废弃，因为它在维护和可扩展性方面存在限制。
+
+
+
+#### 如何在全局插件中获取视图的上下文？
+
+- 在阿里低代码引擎的全局插件中获取视图的上下文，可以通过使用 **ProvideViewPluginContext** 函数实现。这个函数来自 **@alilc/lowcode-utils** 库，它使得您的 React 组件能够接收 **pluginContext** 作为 props，进而访问和操作当前视图的状态和属性。
+
+**步骤**
+
+**引入依赖**：首先，确保您的插件文件中已经引入了 **ProvideViewPluginContext** 以及其他必要的依赖。
+
+```
+import { ProvideViewPluginContext } from '@alilc/lowcode-utils';
+```
+
+**定义 React 组件**：创建一个 React 组件，它将使用来自 **ProvideViewPluginContext** 的 **pluginContext**。
+
+```typescript
+const MyComponent = (props) => {
+  const { pluginContext } = props;
+  // 组件逻辑
+  return <div>/* 组件内容 */</div>;
+};
+```
+
+**定义全局插件**：定义一个函数，这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**，它提供了对引擎功能的访问。
+
+```javascript
+const globalPlugin = (ctx) => {
+  const { skeleton } = ctx;
+
+  skeleton.add({
+    type: 'PanelDock',
+    name: 'datapool',
+    content: ProvideViewPluginContext((props) => {
+      // 组件内容
+      return (
+        <MyComponent {...props} />
+      )
+    }),
+    // 其他配置
+    contentProps: {
+      // 需要提供 pluginContext 作为参数
+      pluginContext: ctx,
+    }
+  });
+};
+```
+
+通过这些步骤，您的全局插件中的 React 组件就能够获取并使用视图的上下文了。这为您在插件中实现更复杂的功能和交互提供了基础。
+
+
+
+**注意事项**
+
+- **组件重渲染**：正常情况下，**pluginsContext** 是视图的上下文。当视图切换时，组件会重新渲染。如果需要在组件中处理视图切换导致的重新渲染，可以利用 React 的 **key** 属性。
+
+**示例代码**
+
+```typescript
+ProvideViewPluginContext(props => {
+  return (
+    <DataPoolPane
+      {...props}
+      key={props.pluginContext?.editorWindow?.id}
+    );
+});
+```
+
+通过这种方式，当视图切换时，组件会根据视图的不同进行重新渲染，确保组件状态与当前视图的上下文保持一致。这对于在低代码平台上开发复杂插件和交互功能是非常有用的。
+
+
+
+#### 如何判断插件是否在 Workspace 模式下注册？
+
+**使用** **ctx.isPluginRegisteredInWorkspace()** **方法**:
+
+通过 **ctx.isPluginRegisteredInWorkspace()** 方法，可以判断一个插件是否在 Workspace 级别注册。以下是一个示例代码片段：
+
+```javascript
+if (ctx.isPluginRegisteredInWorkspace('pluginName')) {
+    console.log('插件已在 Workspace 模式下注册。');
+} else {
+    console.log('插件未在 Workspace 模式下注册。');
+}
+```
+
+注意：此方法目前在 beta 版本中，可能会有 TypeScript 提示显示已移除。
+
+**检查** **ctx.registerLevel** **的值**:
+
+可以通过比较 **ctx.registerLevel** 的值来判断插件的注册级别。示例代码如下：
+
+```javascript
+if (ctx.registerLevel !== IPublicEnumPluginRegisterLevel.Workspace) {
+    console.log('插件未在 Workspace 模式下注册。');
+} else {
+    console.log('插件已在 Workspace 模式下注册。');
+}
+```

docs/docs/faq/index.md

@@ -1,7 +1,47 @@
 ---
 title: FAQ 概述
-sidebar_position: 1
+sidebar_position: -1
 tags: [FAQ]
 ---
 
-不定期将社区常见问题及答案维护到此处
+不定期将社区常见问题及答案维护到此处
+
+## Demo 使用
+- [渲染唯一标识（key）](/site/docs/faq/faq002)
+- [点击事件如何添加参数](/site/docs/faq/faq003)
+- [如何通过 API 手动调用数据源请求](/site/docs/faq/faq006)
+
+## 设计器定制
+- [如何通过 this.utils 使用第三方工具扩展](/site/docs/faq/faq005)
+- [设置面板中的高级 tab 如何配置](/site/docs/faq/faq007)
+- [插件面板如何调整位置](/site/docs/faq/faq010)
+- [workspace 模式常见问题](/site/docs/faq/faq024)
+
+## 源码和依赖
+- [某某 npm 包对应的源码在哪里？](/site/docs/faq/faq008)
+
+## 错误和报错
+- [物料出现 Component Not Found 相关报错](/site/docs/faq/faq009)
+- [VERSION_PLACEHOLDER is not defined](/site/docs/faq/faq014)
+- [Cannot read property 'Icon' of Undefined](/site/docs/faq/faq016)
+- [windows 下运行低代码引擎源码出现报错](/site/docs/faq/faq019)
+- [Can't import the named export from non ECMAScript module](/site/docs/faq/faq020)
+- [Slot组件渲染报错问题](/site/docs/faq/faq023)
+
+## 物料相关问题
+- [如何获取物料当前处于编辑态还是渲染态](/site/docs/faq/faq011)
+- [Procode 物料如何调用数据源方法](/site/docs/faq/faq012)
+- [已有组件如何快速接入引擎](/site/docs/faq/faq015)
+- [Modal 类组件 hidden 属性被强制设置 true](/site/docs/faq/faq013)
+- [最小渲染单元配置](/site/docs/faq/faq004)
+- [节点无法拖拽到 Page 下](/site/docs/faq/faq022)
+
+## 其他说明
+- [vue 画布支持说明](/site/docs/faq/faq017)
+- [是否可以生成 Vue 页面代码？](/site/docs/faq/faq018)
+
+## 参与贡献
+- [提交 PR 时，明明签署过 CLA，仍被提示需要签署](/site/docs/faq/faq021)
+
+## 相关依赖文档
+- [build-scripts 的使用文档](/site/docs/faq/faq001)

docs/docs/guide/appendix/npms.md

@@ -12,8 +12,6 @@ sidebar_position: 3
 | @alilc/lowcode-engine | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/engine |
 | @alilc/lowcode-plugin-designer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/plugin-designer |
 | @alilc/lowcode-plugin-outline-pane | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/plugin-outline-pane |
-| @alilc/lowcode-rax-renderer  | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/rax-renderer |
-| @alilc/lowcode-rax-simulator-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/rax-simulator-renderer |
 | @alilc/lowcode-react-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/react-renderer |
 | @alilc/lowcode-react-simulator-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/react-simulator-renderer |
 | @alilc/lowcode-renderer-core | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/renderer-core |
@@ -44,6 +42,6 @@ sidebar_position: 3
 | @alifd/fusion-ui | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/fusion-ui |
 | @alilc/lowcode-materials | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/fusion-lowcode-materials |
 | @alilc/antd-lowcode-materials | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/antd-lowcode-materials |
-|  |  |  |
+| @alifd/layout（原 @alifd/pro-layout 升级后的版本） | [https://github.com/alibaba-fusion/layout](https://github.com/alibaba-fusion/layout) |  |
 |  |  |  |
 |  |  |  |

docs/docs/guide/appendix/repos.md

@@ -15,15 +15,13 @@ sidebar_position: 2
 5. ignitor
 6. plugin-designer
 7. plugin-outline-pane
-8. rax-renderer
-9. rax-simulator-renderer
-10. react-renderer
-11. react-simulator-renderer
-12. renderer-core
-13. types
-14. utils
-15. material-parser
-16. code-generator
+8. react-renderer
+9. react-simulator-renderer
+10. renderer-core
+11. types
+12. utils
+13. material-parser
+14. code-generator
 
 ## 2. 引擎官方扩展包
 包含了常用的设置器（setter）、跟 setter 绑定的插件等

docs/docs/guide/appendix/setterDetails/function.md

@@ -0,0 +1,74 @@
+---
+title: FunctionSetter
+---
+## 简介
+可以将function绑定在物料上
+
+## 设置器返回
+
+设置器返回一个Function对象，调用function()运行Function对象得到运行结果。
+
+如下是一个典型的使用案例：
+
+```javascript
+export type TestProps = React.ComponentProps<typeof Test> & {
+  testFunction?: Function | undefined;
+};
+ 
+const getTestData = () => {
+  if(this.props.testFunction === undefined){
+    return undefined;
+  }else{
+    return this.props.testFunction() // 返回testFunction()方法的运行结果;
+  }
+}
+```
+
+
+## 参数设置
+
+如果需要额外传参，需要将扩展参数设置打开，在代码面板中，编辑参数内容。
+
+注意：
+
+- 额外参数必须被包装成一个对象，如参数模板中所示
+- 可以使用动态变量例如 (this.items，this.state.xxx)
+	```javascript
+	{
+		testKey: this.state.text,
+	}
+	```
+
+- 该参数是额外参数，会加在原有参数后面，例如在 onClick 中加入扩展传参，最终函数消费的时候应该如下所示
+	```javascript
+	// e 为 onClick 原有函数传参，extParams 为自定义传参
+	onClick(e, extParams) {
+		this.setState({
+			isShowDialog: extParams.isShowDialog,
+		});
+	}
+	```
+
+## 事件新建函数模板
+有时候我们创建的函数会有用到一些通用的函数模板，我们可以在物料协议的 meta.ts 中创建一个模板，如下
+
+```TypeScript
+{
+    name: 'onChange',
+    title: {
+        label: 'onChange',
+        tip: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    },
+    propType: 'func',
+    setter: [
+        {
+            componentName: 'FunctionSetter',
+            props: {
+                template: 'onTableChange(value,${extParams}){\n\n}',
+            },
+        },
+    ],
+}
+```
+
+其中 ${extParams} 为扩展参数占位符，如果用户没有声明扩展参数，会移除对应的参数声明。

docs/docs/guide/appendix/setters.md

@@ -14,7 +14,7 @@ sidebar_position: 4
 | DateYearSetter || 日期型 - 年数据设置器 | |
 | [EventSetter](./setterDetails/event) | function | 事件绑定设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01qxIYiO1ksVknhTpnW_!!6000000004739-2-tps-1202-1014.png) |
 | [IconSetter](./setterDetails/icon) | string | 图标设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01zsOMxo1TXaBmjHCRc_!!6000000002392-2-tps-1172-579.png) |
-| FunctionSetter | any | 函数型数据设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01jLiJBo1ZIp7OmDLp0_!!6000000003172-2-tps-794-110.png) |
+| [FunctionSetter](./setterDetails/function) | function | 函数型数据设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01jLiJBo1ZIp7OmDLp0_!!6000000003172-2-tps-794-110.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) |
 | [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01dSfSgg1WS2EpbqJIO_!!6000000002786-2-tps-1152-328.png) |

docs/docs/guide/create/useEditor.md

@@ -54,13 +54,13 @@ sidebar_position: 0
 
 ```html
 <!-- 低代码引擎的页面框架样式 -->
-<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/css/engine-core.css" />
+<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css" />
 <!-- Fusion Next 控件样式 -->
 <link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css">
 <!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
 <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css">
 <!-- 低代码引擎官方扩展的样式 -->
-<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/css/engine-ext.css" />
+<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css" />
 
 <!-- React，可替换为 production 包 -->
 <script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js"></script>
@@ -76,11 +76,12 @@ sidebar_position: 0
 <!-- Fusion Next 的主包，低代码编辑器的依赖 -->
 <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
 <!-- 低代码引擎的主包 -->
-<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine@latest/dist/js/engine-core.js"></script>
+<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
 <!-- 低代码引擎官方扩展的主包 -->
-<script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@latest/dist/js/engine-ext.js"></script>
+<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>
 ```
-> 注：如果 unpkg 的服务比较缓慢，您可以使用 alicdn 来获得确定版本的低代码引擎，如对于引擎的 1.0.1 版本，可用 [https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.1/dist/js/engine-core.js](https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.1/dist/js/engine-core.js)
+> 注：如果 unpkg 的服务比较缓慢，您可以使用官方 CDN 来获得确定版本的低代码引擎，如对于引擎的 1.0.18 版本，可用以下官方 CDN 替代
+> - [https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js](https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js)
 
 
 ### 配置打包
@@ -104,8 +105,6 @@ sidebar_position: 0
 
 ### 初始化低代码编辑器
 
-#### 方法 2.1 使用 init 进行初始化
-
 正确引入后，我们可以直接通过 window 上的变量进行引用，如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎：
 
 ```javascript
@@ -143,59 +142,5 @@ init 的功能包括但不限于：
 
 > 本节中的低代码编辑器例子可以在 demo 中找到：[https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts)
 
-
-#### 方法 2.2 使用 skeletonCabin.Workbench 方式初始化
-
-`init()` 内部会调用 `ReactDOM.render()` 函数，因此这样初始化的内容没有办法与外部的 React 组件进行通信，也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容。
-
-因此，这种场景下您可以通过 `skeletonCabin.Workbench` 进行初始化。
-
-> 注：**不需要**同时使用 2.1 和 2.2 的方法。根据使用场景，当且只当有需要插件和外界进行一定通信时，才需要使用 2.2 提供的方法。
-
-
-```javascript
-import React, { useState, useEffect } from 'react';
-import { project, plugins, common, skeleton } from '@alilc/lowcode-engine';
-
-// 此处略去若干依赖引用
-
-async function registerPlugins() {
-  // 此处略去若干插件注册
-}
-function EditorView() {
-  /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */
-  const [hasPluginInited, setHasPluginInited] = useState(false);
-
-  useEffect(() => {
-    plugins.init().then(() => {
-      setHasPluginInited(true);
-    }).catch(err => console.error(err));
-  }, []);
-
-  if (!hasPluginInited) {
-    return null;
-  }
-  const Workbench = common.skeletonCabin.Workbench;
-  return <Workbench />;
-}
-
-(async function main() {
-  await registerPlugins();
-  config.setConfig({
-    enableCondition: true,
-    enableCanvasLock: true,
-    supportVariableGlobally: true,
-    requestHandlersMap: {
-      fetch: createFetchHandler()
-    }
-  });
-
-  ReactDOM.render(<EditorView />, document.getElementById('lce-container')!);
-})();
-```
-
-> 本节中的低代码编辑器类似的例子可以在 demo 中找到：[https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx](https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx)
-
-
 ## 配置低代码编辑器
 详见[低代码扩展简述](/site/docs/guide/expand/editor/summary)章节。

docs/docs/guide/design/datasourceEngine.md

@@ -32,7 +32,6 @@ create 接收三个参数，第一个是 DataSource，对于运行时渲染和
 ```typescript
 /**
  * 数据源对象--运行时渲染
- * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
  */
 export interface DataSource {
     list: DataSourceConfig[];
@@ -41,7 +40,6 @@ export interface DataSource {
 
 /**
  * 数据源对象
- * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
  */
 export interface DataSourceConfig {
     id: string;
@@ -96,7 +94,6 @@ export interface RuntimeDataSourceConfig {
 
 /**
  * 数据源对象
- * @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
  */
 export interface RuntimeDataSource {
     list: RuntimeDataSourceConfig[];

docs/docs/guide/design/editor.md

@@ -313,7 +313,7 @@ simulator-renderer 通过调用 host 的方法，将 schema、components 等参
 
 - 被拖拽对象 - `DragObject`
 - 拖拽到的目标位置 - `DropLocation`
-- 拖拽感应区 - `ISensor`
+- 拖拽感应区 - `IPublicModelSensor`
 - 定位事件 - `LocateEvent`
 
 ##### Sensor
@@ -336,7 +336,7 @@ simulator-renderer 通过调用 host 的方法，将 schema、components 等参
 1. **画布内拖拽：**此时 sensor 是 simulatorHost，拖拽完成之后，会根据拖拽的位置来完成节点的精确插入。
 2. **从组件面板拖拽到画布**：此时的 sensor 还是 simulatorHost，因为拖拽结束的目标还是画布。
 3. **大纲树面板拖拽到画布中**：此时有两个 sensor，一个是大纲树，当我们拖拽到画布区域时，画布区域内的 simulatorHost 开始接管。
-4. **画布拖拽到画布中**：从画布中开始拖拽时，最新生效的是 simulatorHost，当离开画布到大纲树时，大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时，大纲树会将大纲树中的信息转化为 schema，然后渲染到画布中。
+4. **画布拖拽到大纲树中**：从画布中开始拖拽时，最新生效的是 simulatorHost，当离开画布到大纲树时，大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时，大纲树会将大纲树中的信息转化为 schema，然后渲染到画布中。
 ### 其他
 
 引擎的编排能力远远不止上述所描述的功能，这里只描述了其核心和关键的功能。在整个引擎的迭代和设计过程中还有很多细节来使我们的引擎更好用、更容易扩展。

docs/docs/guide/design/renderer.md

@@ -11,7 +11,6 @@ sidebar_position: 4
 ## npm 包与仓库信息
 
 - React 框架渲染 npm 包：@alilc/lowcode-react-renderer
-- Rax 框架渲染 npm 包：@alilc/lowcode-rax-renderer
 - 仓库：[https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) 下的
    - packages/renderer-core
    - packages/react-renderer
@@ -22,7 +21,7 @@ sidebar_position: 4
 
 ![image.png](https://img.alicdn.com/imgextra/i1/O1CN01i4IiSR1cMtUFXaWQq_!!6000000003587-2-tps-1686-1062.png)
 
-- 协议层：基于《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
+- 协议层：基于[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
 - 能力层：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。
 - 适配层：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。
 - 渲染层：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。
@@ -194,7 +193,7 @@ ReactDOM.render((
 画布的渲染和预览模式的渲染的区别在于，画布的渲染和设计器之间是有交互的。所以在这里我们新增了一层 `Simulator` 作为设计器和渲染的连接器。
 `Simulator` 是将设计器传入的 `DocumentModel` 和组件/库描述转成相应的 Schema 和 组件类。再调用 Render 层完成渲染。我们这里介绍一下它提供的能力。
 ##### 整体架构
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644398136330-0f48202b-b581-4b1f-af79-72a667a194d9.png#clientId=udd4eb4ee-bdb1-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=432&id=u734b5c16&margin=%5Bobject%20Object%5D&name=image.png&originHeight=864&originWidth=1500&originalType=binary&ratio=1&rotation=0&showTitle=false&size=572012&status=done&style=none&taskId=u7d7cf569-d5a9-4bea-9b2d-1121b85728f&title=&width=750)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN017cYBAp1hvJKPUVLbx_!!6000000004339-2-tps-1500-864.png)
 
 - `Project`：位于顶层的 Project，保留了对所有文档模型的引用，用于管理应用级 Schema 的导入与导出。
 - `Document`：文档模型包括 Simulator 与数据模型两部分。Simulator 通过一份 Simulator Host 协议与数据模型层通信，达到画布上的 UI 操作驱动数据模型变化。通过多文档的设计及多 Tab 交互方式，能够实现同时设计多个页面，以及在一个浏览器标签里进行搭建与配置应用属性。
@@ -207,7 +206,7 @@ ReactDOM.render((
 - 通用交互模型：内置了拖拽、活跃追踪、悬停探测、剪贴板、滚动、快捷键绑定。
 
 ##### 模拟器介绍
-![image.png](https://cdn.nlark.com/yuque/0/2022/png/242652/1644398137096-260646a0-f264-48af-9600-6f7141a6a1d8.png#clientId=udd4eb4ee-bdb1-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=370&id=ubfb08f11&margin=%5Bobject%20Object%5D&name=image.png&originHeight=740&originWidth=1500&originalType=binary&ratio=1&rotation=0&showTitle=false&size=353179&status=done&style=none&taskId=u3cd764bb-52f6-47a6-8026-fee6a36d08d&title=&width=750)
+![image.png](https://img.alicdn.com/imgextra/i2/O1CN01GF1PMj288kxovvnK8_!!6000000007888-2-tps-1500-740.png)
 
 - 运行时环境：从运行时环境来看，目前我们有 React 生态、Rax 生态。而在对外的历程中，我们也会拥有 Vue 生态、Angular 生态等。
 - 布局模式：不同于 C 端营销页的搭建，中后台场景大多是表单、表格，流式布局是主流的选择。对于设计师、产品来说，是需要绝对布局的方式来进行页面研发的。

docs/docs/guide/design/setter.md

@@ -32,7 +32,7 @@ sidebar_position: 6
 
 ### SettingTarget 抽象
 
-如果不是多选，可以直接暴露 `Node` 给到这，但涉及多选编辑的时候，大家的值时通常是不一样的，设置的时候需要批量设置进去，这里主要封装这些逻辑，把多选编辑的复杂性屏蔽掉。
+如果不是多选，可以直接暴露 `Node` 给到这，但涉及多选编辑的时候，大家的值通常是不一样的，设置的时候需要批量设置进去，这里主要封装这些逻辑，把多选编辑的复杂性屏蔽掉。
 
 所选节点所构成的**设置对象**抽象如下：
 

docs/docs/guide/design/specs.md

@@ -23,7 +23,7 @@ sidebar_position: 1
 
 对于低代码物料来说，A 平台创建的物料无法使用到 B 平台上，如果想在 B 平台实现同样的物料，需要按照 B 平台的标准搭建一份物料。
 
-对于 ProCode 物料来说，需要在低代码平台进行消费，是需要进行转换的，包括搭建配置项的生成、物料搭建试图等，可能还需要特殊的描述文件进行描述。由于这一层没有统一，同一份 ProCode 物料每接入一个低代码，可能需要的描述文件格式不同，转换的代码不同，使用的工具也不同。
+对于 ProCode 物料来说，需要在低代码平台进行消费，是需要进行转换的，包括搭建配置项的生成、物料搭建视图等，可能还需要特殊的描述文件进行描述。由于这一层没有统一，同一份 ProCode 物料每接入一个低代码，可能需要的描述文件格式不同，转换的代码不同，使用的工具也不同。
 
 ### 生态隔离
 
@@ -58,7 +58,7 @@ sidebar_position: 1
 
 ## 协议的作用
 
-基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，各类中后台研发系统生产的物料可借助物料中心进行跨系统流通，通过丰富物料生态的共享提升各平台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出，帮助业务方快速孵化本业务域中后台研发系统。
+基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，各类中后台研发系统生产的物料可借助物料中心进行跨系统流通，通过丰富物料生态的共享提升各平台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出，帮助业务方快速孵化本业务域中后台研发系统。
 
 ### 打破物料孤岛
 

docs/docs/guide/design/summary.md

@@ -20,7 +20,7 @@ sidebar_position: 0
 
 低代码引擎分为 4 大模块，入料 - 编排 - 渲染 - 出码：
 
-- 入料模块就是将外部的物料，比如海量的 npm 组件，按照《物料描述协议》进行描述。将描述后的数据通过引擎 API 注册后，在编辑器中使用。
+- 入料模块就是将外部的物料，比如海量的 npm 组件，按照[《低代码引擎物料协议规范》](/site/docs/specs/material-spec)进行描述。将描述后的数据通过引擎 API 注册后，在编辑器中使用。
   > **注意，这里仅是增加描述，而非重写一套，这样我们能最大程度复用 ProCode 体系已沉淀的组件。**
 - 编排，本质上来讲，就是**不断在生成符合[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)的页面描述，将编辑器中的所有物料，进行布局设置、组件 CRUD 操作、以及 JS / CSS 编写/ 逻辑编排 **等，最终转换成页面描述，技术细节后文会展开。
 - 渲染，顾名思义，就是**将编排生成的页面描述结构渲染成视图的过程**，视图是面向用户的，所以必须处理好内部数据流、生命周期、事件绑定、国际化等。