From 1a490743b54fb940078b3d30a7d9acc2cb0849a0 Mon Sep 17 00:00:00 2001
From: wukd <wukd@live.com>
Date: Fri, 8 Apr 2022 09:58:10 +0800
Subject: [PATCH] fix: docs

---
 .eslintrc                                     |   3 +-
 .github/workflows/release.yml                 |   2 +-
 .../.vuepress/components/createCodeSandBox.js | 114 -----
 docs/.vuepress/components/dumi-previewer.vue  | 259 ----------
 docs/.vuepress/components/highlight.js        |  53 ---
 docs/.vuepress/config.js                      |  56 ---
 docs/.vuepress/enhanceApp.js                  |   7 -
 docs/.vuepress/styles/index.styl              |  98 ----
 docs/.vuepress/util.js                        |   7 -
 docs/README.md                                |  24 +-
 .../guide/array-cards/effects-json-schema.vue | 125 -----
 .../array-cards/effects-markup-schema.vue     | 113 -----
 docs/demos/guide/array-cards/json-schema.vue  | 146 ------
 .../demos/guide/array-cards/markup-schema.vue | 101 ----
 .../array-collapse/effects-json-schema.vue    | 129 -----
 .../array-collapse/effects-markup-schema.vue  | 122 -----
 .../guide/array-collapse/json-schema.vue      | 196 --------
 .../guide/array-collapse/markup-schema.vue    | 171 -------
 docs/demos/guide/array-items/json-schema.vue  | 219 ---------
 .../demos/guide/array-items/markup-schema.vue | 187 --------
 .../guide/array-table/effects-json-schema.vue | 170 -------
 .../array-table/effects-markup-schema.vue     | 136 ------
 docs/demos/guide/array-table/json-schema.vue  | 146 ------
 .../demos/guide/array-table/markup-schema.vue | 132 -----
 docs/demos/guide/array-tabs/json-schema.vue   |  99 ----
 docs/demos/guide/array-tabs/markup-schema.vue |  94 ----
 docs/demos/guide/cascader/json-schema.vue     | 100 ----
 docs/demos/guide/cascader/markup-schema.vue   |  91 ----
 docs/demos/guide/cascader/template.vue        |  86 ----
 docs/demos/guide/checkbox/json-schema.vue     |  64 ---
 docs/demos/guide/checkbox/markup-schema.vue   |  52 --
 docs/demos/guide/checkbox/template.vue        |  49 --
 docs/demos/guide/date-picker/json-schema.vue  | 120 -----
 .../demos/guide/date-picker/markup-schema.vue | 114 -----
 docs/demos/guide/date-picker/template.vue     | 124 -----
 docs/demos/guide/editable/json-schema.vue     | 115 -----
 docs/demos/guide/editable/markup-schema.vue   | 115 -----
 docs/demos/guide/editable/template.vue        | 109 -----
 docs/demos/guide/form-button-group.vue        |  62 ---
 .../demos/guide/form-collapse/json-schema.vue | 148 ------
 .../guide/form-collapse/markup-schema.vue     | 126 -----
 docs/demos/guide/form-dialog/json-schema.vue  | 108 -----
 .../demos/guide/form-dialog/markup-schema.vue | 111 -----
 docs/demos/guide/form-dialog/template.vue     |  84 ----
 docs/demos/guide/form-drawer/json-schema.vue  |  95 ----
 .../demos/guide/form-drawer/markup-schema.vue |  97 ----
 docs/demos/guide/form-drawer/template.vue     |  71 ---
 docs/demos/guide/form-grid/json-schema.vue    |  94 ----
 docs/demos/guide/form-grid/markup-schema.vue  |  87 ----
 docs/demos/guide/form-grid/native.vue         | 170 -------
 docs/demos/guide/form-item/bordered-none.vue  | 108 -----
 docs/demos/guide/form-item/common.vue         | 449 ------------------
 docs/demos/guide/form-item/feedback.vue       | 258 ----------
 docs/demos/guide/form-item/inset.vue          | 108 -----
 docs/demos/guide/form-item/json-schema.vue    |  47 --
 docs/demos/guide/form-item/markup-schema.vue  |  42 --
 docs/demos/guide/form-item/size.vue           | 160 -------
 docs/demos/guide/form-item/template.vue       |  36 --
 docs/demos/guide/form-layout/json-schema.vue  |  75 ---
 .../demos/guide/form-layout/markup-schema.vue |  51 --
 docs/demos/guide/form-layout/template.vue     |  45 --
 docs/demos/guide/form-step/json-schema.vue    | 144 ------
 docs/demos/guide/form-step/markup-schema.vue  | 120 -----
 docs/demos/guide/form-tab/json-schema.vue     | 140 ------
 docs/demos/guide/form-tab/markup-schema.vue   | 123 -----
 docs/demos/guide/form.vue                     |  70 ---
 docs/demos/guide/input-number/json-schema.vue |  52 --
 .../guide/input-number/markup-schema.vue      |  46 --
 docs/demos/guide/input-number/template.vue    |  42 --
 docs/demos/guide/input/json-schema.vue        |  53 ---
 docs/demos/guide/input/markup-schema.vue      |  47 --
 docs/demos/guide/input/template.vue           |  41 --
 docs/demos/guide/password/json-schema.vue     |  47 --
 docs/demos/guide/password/markup-schema.vue   |  41 --
 docs/demos/guide/password/template.vue        |  35 --
 docs/demos/guide/preview-text/base.vue        |  84 ----
 docs/demos/guide/preview-text/extend.vue      | 107 -----
 docs/demos/guide/radio/json-schema.vue        |  61 ---
 docs/demos/guide/radio/markup-schema.vue      |  51 --
 docs/demos/guide/radio/template.vue           |  45 --
 docs/demos/guide/reset/base.vue               |  59 ---
 docs/demos/guide/reset/force.vue              |  59 ---
 docs/demos/guide/reset/validate.vue           |  59 ---
 docs/demos/guide/select/json-schema-async.vue | 115 -----
 docs/demos/guide/select/json-schema-sync.vue  |  60 ---
 .../select/markup-schema-async-search.vue     | 108 -----
 .../guide/select/markup-schema-async.vue      | 108 -----
 .../demos/guide/select/markup-schema-sync.vue |  56 ---
 docs/demos/guide/select/template-async.vue    | 107 -----
 docs/demos/guide/select/template-sync.vue     |  52 --
 docs/demos/guide/space/json-schema.vue        | 137 ------
 docs/demos/guide/space/markup-schema.vue      | 124 -----
 docs/demos/guide/space/template.vue           | 135 ------
 docs/demos/guide/submit/base.vue              |  58 ---
 docs/demos/guide/submit/loading.vue           |  63 ---
 docs/demos/guide/switch/json-schema.vue       |  47 --
 docs/demos/guide/switch/markup-schema.vue     |  41 --
 docs/demos/guide/switch/template.vue          |  35 --
 docs/demos/guide/time-picker/json-schema.vue  |  65 ---
 .../demos/guide/time-picker/markup-schema.vue |  59 ---
 docs/demos/guide/time-picker/template.vue     |  57 ---
 docs/demos/guide/transfer/json-schema.vue     |  51 --
 docs/demos/guide/transfer/markup-schema.vue   |  51 --
 docs/demos/guide/transfer/template.vue        |  45 --
 docs/demos/guide/upload/json-schema.vue       | 102 ----
 docs/demos/guide/upload/markup-schema.vue     |  97 ----
 docs/demos/guide/upload/template.vue          |  98 ----
 docs/demos/index.vue                          |  63 ---
 docs/guide/array-cards.md                     |  95 ----
 docs/guide/array-collapse.md                  |  97 ----
 docs/guide/array-items.md                     |  97 ----
 docs/guide/array-table.md                     | 108 -----
 docs/guide/array-tabs.md                      |  19 -
 docs/guide/cascader.md                        |  19 -
 docs/guide/checkbox.md                        |  26 -
 docs/guide/date-picker.md                     |  19 -
 docs/guide/editable.md                        |  31 --
 docs/guide/form-button-group.md               |  15 -
 docs/guide/form-collapse.md                   |  53 ---
 docs/guide/form-dialog.md                     |  77 ---
 docs/guide/form-drawer.md                     |  62 ---
 docs/guide/form-grid.md                       |  56 ---
 docs/guide/form-item.md                       |  80 ----
 docs/guide/form-layout.md                     |  43 --
 docs/guide/form-step.md                       |  52 --
 docs/guide/form-tab.md                        |  44 --
 docs/guide/form.md                            |  21 -
 docs/guide/index.md                           | 117 -----
 docs/guide/input-number.md                    |  19 -
 docs/guide/input.md                           |  19 -
 docs/guide/password.md                        |  19 -
 docs/guide/preview-text.md                    |  53 ---
 docs/guide/radio.md                           |  26 -
 docs/guide/reset.md                           |  29 --
 docs/guide/select.md                          |  41 --
 docs/guide/space.md                           |  19 -
 docs/guide/submit.md                          |  22 -
 docs/guide/switch.md                          |  19 -
 docs/guide/time-picker.md                     |  19 -
 docs/guide/transfer.md                        |  19 -
 docs/guide/upload.md                          |  21 -
 lerna.json                                    |   2 +-
 packages/.eslintrc                            |  14 +-
 packages/components/build-style.ts            |   7 -
 .../docs/demos/guide/cascader/json-schema.vue |   7 +-
 .../demos/guide/cascader/markup-schema.vue    |   5 +-
 .../docs/demos/guide/cascader/template.vue    |   5 +-
 .../demos/guide/form-dialog/json-schema.vue   |  64 ++-
 .../demos/guide/form-dialog/markup-schema.vue |  74 ++-
 .../docs/demos/guide/form-dialog/template.vue | 132 +++--
 .../demos/guide/form-drawer/json-schema.vue   |  40 +-
 .../demos/guide/form-drawer/markup-schema.vue |  40 +-
 .../docs/demos/guide/form-drawer/template.vue | 108 ++---
 .../docs/demos/guide/form-grid/form.vue       |  38 +-
 .../demos/guide/form-grid/json-schema.vue     |  18 +-
 .../demos/guide/form-grid/markup-schema.vue   |  20 +-
 .../docs/demos/guide/form-grid/native.vue     |  40 +-
 .../demos/guide/form-item/bordered-none.vue   |  37 +-
 .../docs/demos/guide/form-item/common.vue     |  36 +-
 .../docs/demos/guide/form-item/feedback.vue   |  37 +-
 .../docs/demos/guide/form-item/inset.vue      |  37 +-
 .../demos/guide/form-item/json-schema.vue     |  17 +-
 .../demos/guide/form-item/markup-schema.vue   |  18 +-
 .../docs/demos/guide/form-item/size.vue       |  52 +-
 .../docs/demos/guide/form-item/template.vue   |  18 +-
 .../demos/guide/form-layout/json-schema.vue   |  19 +-
 .../demos/guide/form-layout/markup-schema.vue |  15 +-
 .../docs/demos/guide/form-layout/template.vue |  24 +-
 .../demos/guide/form-step/json-schema.vue     |  44 +-
 .../demos/guide/form-step/markup-schema.vue   |  42 +-
 .../docs/demos/guide/form-tab/json-schema.vue |  39 +-
 .../demos/guide/form-tab/markup-schema.vue    |  40 +-
 .../docs/demos/guide/upload/json-schema.vue   |   2 +-
 .../docs/demos/guide/upload/markup-schema.vue |   2 +-
 .../docs/demos/guide/upload/template.vue      |   2 +-
 .../components/docs/guide/form-collapse.md    |   4 +-
 packages/components/docs/guide/form-dialog.md |   2 +-
 packages/components/docs/guide/form-drawer.md |   2 +-
 packages/components/docs/guide/form-grid.md   |   4 +-
 packages/components/docs/guide/form-step.md   |   4 +-
 packages/components/docs/guide/form-tab.md    |   4 +-
 packages/components/package.json              |  24 +-
 packages/components/rollup.config.js          |   9 -
 packages/components/src/array-base/index.ts   |   2 -
 packages/components/src/array-cards/index.ts  |   2 -
 .../components/src/form-collapse/index.ts     |   1 +
 packages/components/src/form-dialog/index.ts  |  30 +-
 packages/components/src/form-drawer/index.ts  |  19 +-
 packages/components/src/form-grid/index.ts    |   2 +-
 packages/components/src/form-step/index.ts    |   1 +
 packages/components/src/form-tab/index.ts     |   1 +
 packages/components/src/upload/index.ts       |   2 +-
 packages/components/transformer.ts            |  12 -
 packages/prototypes/package.json              |   2 +-
 packages/renderer/package.json                |   2 +-
 packages/setters/package.json                 |   2 +-
 packages/settings-form/package.json           |   2 +-
 scripts/build-style/buildAllStyles.ts         |  24 -
 scripts/build-style/copy.ts                   |  59 ---
 scripts/build-style/helper.ts                 |  32 --
 scripts/build-style/index.ts                  |  12 -
 scripts/rollup.base.js                        | 149 ------
 yarn.lock                                     | 343 ++++++++-----
 203 files changed, 673 insertions(+), 12770 deletions(-)
 delete mode 100644 docs/.vuepress/components/createCodeSandBox.js
 delete mode 100644 docs/.vuepress/components/dumi-previewer.vue
 delete mode 100644 docs/.vuepress/components/highlight.js
 delete mode 100644 docs/.vuepress/config.js
 delete mode 100644 docs/.vuepress/enhanceApp.js
 delete mode 100644 docs/.vuepress/styles/index.styl
 delete mode 100644 docs/.vuepress/util.js
 delete mode 100644 docs/demos/guide/array-cards/effects-json-schema.vue
 delete mode 100644 docs/demos/guide/array-cards/effects-markup-schema.vue
 delete mode 100644 docs/demos/guide/array-cards/json-schema.vue
 delete mode 100644 docs/demos/guide/array-cards/markup-schema.vue
 delete mode 100644 docs/demos/guide/array-collapse/effects-json-schema.vue
 delete mode 100644 docs/demos/guide/array-collapse/effects-markup-schema.vue
 delete mode 100644 docs/demos/guide/array-collapse/json-schema.vue
 delete mode 100644 docs/demos/guide/array-collapse/markup-schema.vue
 delete mode 100644 docs/demos/guide/array-items/json-schema.vue
 delete mode 100644 docs/demos/guide/array-items/markup-schema.vue
 delete mode 100644 docs/demos/guide/array-table/effects-json-schema.vue
 delete mode 100644 docs/demos/guide/array-table/effects-markup-schema.vue
 delete mode 100644 docs/demos/guide/array-table/json-schema.vue
 delete mode 100644 docs/demos/guide/array-table/markup-schema.vue
 delete mode 100644 docs/demos/guide/array-tabs/json-schema.vue
 delete mode 100644 docs/demos/guide/array-tabs/markup-schema.vue
 delete mode 100644 docs/demos/guide/cascader/json-schema.vue
 delete mode 100644 docs/demos/guide/cascader/markup-schema.vue
 delete mode 100644 docs/demos/guide/cascader/template.vue
 delete mode 100644 docs/demos/guide/checkbox/json-schema.vue
 delete mode 100644 docs/demos/guide/checkbox/markup-schema.vue
 delete mode 100644 docs/demos/guide/checkbox/template.vue
 delete mode 100644 docs/demos/guide/date-picker/json-schema.vue
 delete mode 100644 docs/demos/guide/date-picker/markup-schema.vue
 delete mode 100644 docs/demos/guide/date-picker/template.vue
 delete mode 100644 docs/demos/guide/editable/json-schema.vue
 delete mode 100644 docs/demos/guide/editable/markup-schema.vue
 delete mode 100644 docs/demos/guide/editable/template.vue
 delete mode 100644 docs/demos/guide/form-button-group.vue
 delete mode 100644 docs/demos/guide/form-collapse/json-schema.vue
 delete mode 100644 docs/demos/guide/form-collapse/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-dialog/json-schema.vue
 delete mode 100644 docs/demos/guide/form-dialog/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-dialog/template.vue
 delete mode 100644 docs/demos/guide/form-drawer/json-schema.vue
 delete mode 100644 docs/demos/guide/form-drawer/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-drawer/template.vue
 delete mode 100644 docs/demos/guide/form-grid/json-schema.vue
 delete mode 100644 docs/demos/guide/form-grid/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-grid/native.vue
 delete mode 100644 docs/demos/guide/form-item/bordered-none.vue
 delete mode 100644 docs/demos/guide/form-item/common.vue
 delete mode 100644 docs/demos/guide/form-item/feedback.vue
 delete mode 100644 docs/demos/guide/form-item/inset.vue
 delete mode 100644 docs/demos/guide/form-item/json-schema.vue
 delete mode 100644 docs/demos/guide/form-item/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-item/size.vue
 delete mode 100644 docs/demos/guide/form-item/template.vue
 delete mode 100644 docs/demos/guide/form-layout/json-schema.vue
 delete mode 100644 docs/demos/guide/form-layout/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-layout/template.vue
 delete mode 100644 docs/demos/guide/form-step/json-schema.vue
 delete mode 100644 docs/demos/guide/form-step/markup-schema.vue
 delete mode 100644 docs/demos/guide/form-tab/json-schema.vue
 delete mode 100644 docs/demos/guide/form-tab/markup-schema.vue
 delete mode 100644 docs/demos/guide/form.vue
 delete mode 100644 docs/demos/guide/input-number/json-schema.vue
 delete mode 100644 docs/demos/guide/input-number/markup-schema.vue
 delete mode 100644 docs/demos/guide/input-number/template.vue
 delete mode 100644 docs/demos/guide/input/json-schema.vue
 delete mode 100644 docs/demos/guide/input/markup-schema.vue
 delete mode 100644 docs/demos/guide/input/template.vue
 delete mode 100644 docs/demos/guide/password/json-schema.vue
 delete mode 100644 docs/demos/guide/password/markup-schema.vue
 delete mode 100644 docs/demos/guide/password/template.vue
 delete mode 100644 docs/demos/guide/preview-text/base.vue
 delete mode 100644 docs/demos/guide/preview-text/extend.vue
 delete mode 100644 docs/demos/guide/radio/json-schema.vue
 delete mode 100644 docs/demos/guide/radio/markup-schema.vue
 delete mode 100644 docs/demos/guide/radio/template.vue
 delete mode 100644 docs/demos/guide/reset/base.vue
 delete mode 100644 docs/demos/guide/reset/force.vue
 delete mode 100644 docs/demos/guide/reset/validate.vue
 delete mode 100644 docs/demos/guide/select/json-schema-async.vue
 delete mode 100644 docs/demos/guide/select/json-schema-sync.vue
 delete mode 100644 docs/demos/guide/select/markup-schema-async-search.vue
 delete mode 100644 docs/demos/guide/select/markup-schema-async.vue
 delete mode 100644 docs/demos/guide/select/markup-schema-sync.vue
 delete mode 100644 docs/demos/guide/select/template-async.vue
 delete mode 100644 docs/demos/guide/select/template-sync.vue
 delete mode 100644 docs/demos/guide/space/json-schema.vue
 delete mode 100644 docs/demos/guide/space/markup-schema.vue
 delete mode 100644 docs/demos/guide/space/template.vue
 delete mode 100644 docs/demos/guide/submit/base.vue
 delete mode 100644 docs/demos/guide/submit/loading.vue
 delete mode 100644 docs/demos/guide/switch/json-schema.vue
 delete mode 100644 docs/demos/guide/switch/markup-schema.vue
 delete mode 100644 docs/demos/guide/switch/template.vue
 delete mode 100644 docs/demos/guide/time-picker/json-schema.vue
 delete mode 100644 docs/demos/guide/time-picker/markup-schema.vue
 delete mode 100644 docs/demos/guide/time-picker/template.vue
 delete mode 100644 docs/demos/guide/transfer/json-schema.vue
 delete mode 100644 docs/demos/guide/transfer/markup-schema.vue
 delete mode 100644 docs/demos/guide/transfer/template.vue
 delete mode 100644 docs/demos/guide/upload/json-schema.vue
 delete mode 100644 docs/demos/guide/upload/markup-schema.vue
 delete mode 100644 docs/demos/guide/upload/template.vue
 delete mode 100644 docs/demos/index.vue
 delete mode 100644 docs/guide/array-cards.md
 delete mode 100644 docs/guide/array-collapse.md
 delete mode 100644 docs/guide/array-items.md
 delete mode 100644 docs/guide/array-table.md
 delete mode 100644 docs/guide/array-tabs.md
 delete mode 100644 docs/guide/cascader.md
 delete mode 100644 docs/guide/checkbox.md
 delete mode 100644 docs/guide/date-picker.md
 delete mode 100644 docs/guide/editable.md
 delete mode 100644 docs/guide/form-button-group.md
 delete mode 100644 docs/guide/form-collapse.md
 delete mode 100644 docs/guide/form-dialog.md
 delete mode 100644 docs/guide/form-drawer.md
 delete mode 100644 docs/guide/form-grid.md
 delete mode 100644 docs/guide/form-item.md
 delete mode 100644 docs/guide/form-layout.md
 delete mode 100644 docs/guide/form-step.md
 delete mode 100644 docs/guide/form-tab.md
 delete mode 100644 docs/guide/form.md
 delete mode 100644 docs/guide/index.md
 delete mode 100644 docs/guide/input-number.md
 delete mode 100644 docs/guide/input.md
 delete mode 100644 docs/guide/password.md
 delete mode 100644 docs/guide/preview-text.md
 delete mode 100644 docs/guide/radio.md
 delete mode 100644 docs/guide/reset.md
 delete mode 100644 docs/guide/select.md
 delete mode 100644 docs/guide/space.md
 delete mode 100644 docs/guide/submit.md
 delete mode 100644 docs/guide/switch.md
 delete mode 100644 docs/guide/time-picker.md
 delete mode 100644 docs/guide/transfer.md
 delete mode 100644 docs/guide/upload.md
 delete mode 100644 packages/components/build-style.ts
 delete mode 100644 packages/components/rollup.config.js
 delete mode 100644 packages/components/transformer.ts
 delete mode 100644 scripts/build-style/buildAllStyles.ts
 delete mode 100644 scripts/build-style/copy.ts
 delete mode 100644 scripts/build-style/helper.ts
 delete mode 100644 scripts/build-style/index.ts
 delete mode 100644 scripts/rollup.base.js

diff --git a/.eslintrc b/.eslintrc
index 3491e61..5e5d7e8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -26,7 +26,8 @@
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/ban-ts-comment": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
+    "vue/one-component-per-file": "off"
   },
   "overrides": [
     {
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 53296bf..80aa59c 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     branches:
-      - formily_next
+      - main
 jobs:
   release:
     runs-on: ubuntu-latest
diff --git a/docs/.vuepress/components/createCodeSandBox.js b/docs/.vuepress/components/createCodeSandBox.js
deleted file mode 100644
index e3d404d..0000000
--- a/docs/.vuepress/components/createCodeSandBox.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { getParameters } from 'codesandbox/lib/api/define'
-
-const CodeSandBoxHTML = '<div id="app"></div>'
-const CodeSandBoxJS = `
-import Vue from 'vue'
-import App from './App.vue'
-import Element  from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css';
-
-Vue.config.productionTip = false
-Vue.use(Element, { size: 'small' });
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')`
-
-const createForm = ({ method, action, data }) => {
-  const form = document.createElement('form') // 构造 form
-  form.style.display = 'none' // 设置为不显示
-  form.target = '_blank' // 指向 iframe
-
-  // 构造 formdata
-  Object.keys(data).forEach((key) => {
-    const input = document.createElement('input') // 创建 input
-
-    input.name = key // 设置 name
-    input.value = data[key] // 设置 value
-
-    form.appendChild(input)
-  })
-
-  form.method = method // 设置方法
-  form.action = action // 设置地址
-
-  document.body.appendChild(form)
-
-  // 对该 form 执行提交
-  form.submit()
-
-  document.body.removeChild(form)
-}
-
-export function createCodeSandBox(codeStr) {
-  const parameters = getParameters({
-    files: {
-      'sandbox.config.json': {
-        content: {
-          template: 'node',
-          infiniteLoopProtection: true,
-          hardReloadOnChange: false,
-          view: 'browser',
-          container: {
-            port: 8080,
-            node: '14',
-          },
-        },
-      },
-      'package.json': {
-        content: {
-          scripts: {
-            serve: 'vue-cli-service serve',
-            build: 'vue-cli-service build',
-            lint: 'vue-cli-service lint',
-          },
-          dependencies: {
-            '@formily/core': 'latest',
-            '@formily/vue': 'latest',
-            '@formily/element-plus': 'latest',
-            axios: '^0.21.1',
-            'core-js': '^3.6.5',
-            'element-plus': 'latest',
-            'vue-demi': 'latest',
-            vue: '^2.6.11',
-          },
-          devDependencies: {
-            '@vue/cli-plugin-babel': '~4.5.0',
-            '@vue/cli-service': '~4.5.0',
-            '@vue/composition-api': 'latest',
-            'vue-template-compiler': '^2.6.11',
-            sass: '^1.34.1',
-            'sass-loader': '^8.0.2',
-          },
-          babel: {
-            presets: ['@vue/cli-plugin-babel/preset'],
-          },
-          vue: {
-            devServer: {
-              host: '0.0.0.0',
-              disableHostCheck: true, // 必须
-            },
-          },
-        },
-      },
-      'src/App.vue': {
-        content: codeStr,
-      },
-      'src/main.js': {
-        content: CodeSandBoxJS,
-      },
-      'public/index.html': {
-        content: CodeSandBoxHTML,
-      },
-    },
-  })
-
-  createForm({
-    method: 'post',
-    action: 'https://codesandbox.io/api/v1/sandboxes/define',
-    data: {
-      parameters,
-      query: 'file=/src/App.vue',
-    },
-  })
-}
diff --git a/docs/.vuepress/components/dumi-previewer.vue b/docs/.vuepress/components/dumi-previewer.vue
deleted file mode 100644
index fe7826b..0000000
--- a/docs/.vuepress/components/dumi-previewer.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-  <client-only>
-    <section class="dumi-previewer">
-      <div class="dumi-previewer-demo">
-        <template v-if="demoPath && demo">
-          <component :is="demo" />
-        </template>
-
-        <template v-else>
-          <slot name="demo"></slot>
-        </template>
-      </div>
-
-      <div class="dumi-previewer-actions">
-        <div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            class="dumi-previewer-actions__icon"
-            viewBox="0 0 256 296"
-            @click="openCodeSandBox"
-          >
-            <path
-              d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z"
-              fill="#000"
-            ></path>
-          </svg>
-        </div>
-
-        <div>
-          <svg
-            v-if="copied"
-            class="dumi-previewer-actions__icon"
-            style="fill: green"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-          >
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"
-            />
-          </svg>
-
-          <svg
-            v-else
-            class="dumi-previewer-actions__icon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            @click="handleCopy"
-          >
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"
-            />
-          </svg>
-
-          <svg
-            class="dumi-previewer-actions__icon"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            width="24"
-            height="24"
-            @click="handleCollapse"
-          >
-            <path fill="none" d="M0 0h24v24H0z" />
-            <path
-              d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
-            />
-          </svg>
-        </div>
-      </div>
-
-      <div v-show="!innerCollapsed" class="dumi-previewer-source">
-        <div v-html="highlightCode" class="language-vue extra-class" />
-      </div>
-    </section>
-  </client-only>
-</template>
-
-<script>
-import copy from 'copy-to-clipboard'
-import highlight from './highlight'
-import { createCodeSandBox } from './createCodeSandBox'
-
-export default {
-  name: 'dumi-previewer',
-
-  props: {
-    code: {
-      type: String,
-      default: '',
-    },
-
-    demoPath: {
-      type: String,
-      default: '',
-    },
-    collapsed: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  data() {
-    return {
-      innerCollapsed: this.collapsed,
-      copied: false,
-      timerId: null,
-      demoStr: '',
-      /**
-       * take over VuePress render
-       * 接管VuePress渲染
-       */
-      demo: null,
-    }
-  },
-
-  computed: {
-    decodedCode() {
-      return decodeURIComponent(this.code || this.demoStr)
-    },
-
-    highlightCode() {
-      return highlight(this.decodedCode, 'vue')
-    },
-  },
-
-  created() {
-    if (this.demoPath) {
-      import(
-        /* webpackPrefetch: true */ `../../demos/${this.demoPath}.vue`
-      ).then((module) => {
-        this.demo = module.default
-      })
-      import(
-        /* webpackPrefetch: true */ `!raw-loader!../../demos/${this.demoPath}.vue`
-      ).then((module) => {
-        this.demoStr = module.default
-      })
-    }
-  },
-
-  beforeDestroy() {
-    clearTimeout(this.timerId)
-  },
-
-  methods: {
-    handleCollapse() {
-      this.innerCollapsed = !this.innerCollapsed
-    },
-
-    handleCopy() {
-      this.copied = true
-      copy(this.decodedCode)
-
-      clearTimeout(this.timer)
-      this.timerId = setTimeout(() => {
-        this.copied = false
-      }, 2000)
-    },
-
-    openCodeSandBox() {
-      createCodeSandBox(this.demoStr)
-    },
-  },
-}
-</script>
-
-<style lang="stylus">
-.dumi-previewer {
-  background-color: #fff;
-  border: 1px solid #ebedf1;
-  border-radius: 1px;
-
-  .dumi-previewer-demo {
-    padding: 40px 24px;
-  }
-
-  .dumi-previewer-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top: 1px dashed #ebedf1;
-    height: 40px;
-    padding: 0 1em;
-
-    .dumi-previewer-actions__icon {
-      width: 16px;
-      height: 16px;
-      padding: 8px 4px;
-      opacity: 0.4;
-      cursor: pointer;
-      transition: opacity .3s;
-
-      &:hover {
-        opacity: 0.6;
-      }
-    }
-  }
-
-  .dumi-previewer-source {
-    border-top: 1px dashed #ebedf1;
-
-    div[class*="language-"] {
-      background-color: #f9fafb;
-      border-radius: 0;
-    }
-
-    pre[class*="language-"] {
-      margin: 0 !important;
-    }
-
-    pre[class*="language-"] code {
-      color: #000 !important;
-    }
-
-    .token.cdata,.token.comment,.token.doctype,.token.prolog {
-      color: #708090
-    }
-
-    .token.punctuation {
-      color: #999
-    }
-
-    .token.namespace {
-      opacity: .7
-    }
-
-    .token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag {
-      color: #905
-    }
-
-    .token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
-      color: #690
-    }
-
-    .language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url {
-      color: #9a6e3a;
-      background: hsla(0,0%,100%,.5)
-    }
-
-    .token.atrule,.token.attr-value,.token.keyword {
-      color: #07a
-    }
-
-    .token.class-name,.token.function {
-      color: #dd4a68
-    }
-
-    .token.important,.token.regex,.token.variable {
-      color: #e90
-    }
-  }
-}
-</style>
diff --git a/docs/.vuepress/components/highlight.js b/docs/.vuepress/components/highlight.js
deleted file mode 100644
index d68dfa6..0000000
--- a/docs/.vuepress/components/highlight.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const prism = require('prismjs')
-const escapeHtml = require('escape-html')
-const loadLanguages = require('prismjs/components/index')
-
-function wrap(code, lang) {
-  if (lang === 'text') {
-    code = escapeHtml(code)
-  }
-  return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
-}
-
-function getLangCodeFromExtension(extension) {
-  const extensionMap = {
-    vue: 'markup',
-    html: 'markup',
-    md: 'markdown',
-    rb: 'ruby',
-    ts: 'typescript',
-    py: 'python',
-    sh: 'bash',
-    yml: 'yaml',
-    styl: 'stylus',
-    kt: 'kotlin',
-    rs: 'rust',
-  }
-
-  return extensionMap[extension] || extension
-}
-
-module.exports = (str, lang) => {
-  if (!lang) {
-    return wrap(str, 'text')
-  }
-  lang = lang.toLowerCase()
-  const rawLang = lang
-
-  lang = getLangCodeFromExtension(lang)
-
-  if (!prism.languages[lang]) {
-    try {
-      loadLanguages([lang])
-    } catch (e) {
-      console.warn(
-        `[vuepress] Syntax highlight for language "${lang}" is not supported.`
-      )
-    }
-  }
-  if (prism.languages[lang]) {
-    const code = prism.highlight(str, prism.languages[lang], lang)
-    return wrap(code, rawLang)
-  }
-  return wrap(str, 'text')
-}
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
deleted file mode 100644
index 6885620..0000000
--- a/docs/.vuepress/config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const path = require('path')
-const utils = require('./util')
-
-const componentFiles = utils
-  .getFiles(path.resolve(__dirname, '../guide'))
-  .map((item) => item.replace(/(\.md)/g, ''))
-  .filter((item) => !['el-form', 'el-form-item', 'index'].includes(item))
-
-module.exports = {
-  title: 'Formily ElementPlus',
-  dest: './doc-site',
-  theme: '@vuepress-dumi/dumi',
-  head: [
-    [
-      'link',
-      {
-        rel: 'icon',
-        href: '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
-      },
-    ],
-  ],
-  themeConfig: {
-    logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-    nav: [
-      {
-        text: '指南',
-        link: '/guide/',
-      },
-      {
-        text: '主站',
-        link: 'https://v2.formilyjs.org',
-      },
-      {
-        text: 'GITHUB',
-        link: 'https://github.com/alibaba/formily',
-      },
-    ],
-    sidebar: {
-      '/guide/': ['', ...componentFiles],
-    },
-    lastUpdated: 'Last Updated',
-    smoothScroll: true,
-  },
-  plugins: [
-    'vuepress-plugin-typescript',
-    '@vuepress/back-to-top',
-    '@vuepress/last-updated',
-    '@vuepress-dumi/dumi-previewer',
-    [
-      '@vuepress/medium-zoom',
-      {
-        selector: '.content__default :not(a) > img',
-      },
-    ],
-  ],
-}
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
deleted file mode 100644
index 162c0fb..0000000
--- a/docs/.vuepress/enhanceApp.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import pageComponents from '@internal/page-components'
-
-export default ({ Vue }) => {
-  for (const [name, component] of Object.entries(pageComponents)) {
-    Vue.component(name, component)
-  }
-}
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index be1b5c0..0000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,98 +0,0 @@
-.navbar {
-  padding: 0 28px !important;
-}
-
-.navbar .logo {
-  height: auto !important;
-  width: 150px !important;
-}
-
-.navbar .site-name {
-  display: none;
-}
-
-.navbar .sidebar-button {
-  padding: 0;
-}
-
-.home .feature {
-  margin-bottom: 40px;
-  text-align: center;
-}
-
-.theme-dumi-content:not(.custom) {
-  max-width: 100%;
-}
-
-.page .page-nav {
-  max-width: 100%;
-}
-
-.dumi-previewer .dumi-previewer-actions .dumi-previewer-actions__icon {
-  padding: 0 !important;
-}
-
-.page .page-edit {
-  max-width 100%
-}
-
-.sidebar-group .sidebar-heading {
-  color: #454d64;
-  font-size: 16px;
-}
-
-.sidebar-group a.sidebar-link {
-  font-size: 0.9em;
-}
-
-.theme-dumi-content .custom-block.warning {
-  padding: 10px 20px;
-  border-color: #FFC11F;
-  box-shadow: 0 6px 16px -2px rgba(0,0,0,.06);
-  background: rgba(255,229,100,0.1);
-}
-.theme-dumi-content .custom-block.danger {
-  padding: 10px 20px;
-  p {
-    margin: 0;
-  }
-}
-
-.theme-dumi-content:not(.custom) > h1, .theme-dumi-content:not(.custom) > h2, .theme-dumi-content:not(.custom) > h3, .theme-dumi-content:not(.custom) > h4, .theme-dumi-content:not(.custom) > h5, .theme-dumi-content:not(.custom) > h6 {
-  margin-bottom: 18px;
-}
-
-.theme-dumi-content p {
-  margin: 1em 0;
-}
-
-.custom-block.warning p {
-  margin: 0;
-}
-
-// .theme-dumi-content div[class*="language-"] {
-//   background-color: #f9fafb; 
-// }
-
-// .theme-dumi-content pre[class*="language-"] code {
-//   color: #000;
-// }
-
-.dumi-previewer .dumi-previewer-source,
-.dumi-previewer .dumi-previewer-demo {
-  overflow: auto;
-}
-
-@media (max-width: 719px) {
-  .sidebar-button + .home-link {
-    margin-left: 20px;
-  }
-}
-
-@media (max-width: 419px) {
-  .theme-dumi-content div[class*="language-"] {
-    margin: 0;
-    border-radius: 0;
-  }
-}
-
diff --git a/docs/.vuepress/util.js b/docs/.vuepress/util.js
deleted file mode 100644
index f5a7a35..0000000
--- a/docs/.vuepress/util.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const fs = require('fs')
-
-module.exports = {
-  getFiles(dir) {
-    return fs.readdirSync(dir)
-  },
-}
diff --git a/docs/README.md b/docs/README.md
index 9afaf8f..9eb9ed2 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,9 +1,10 @@
 ---
 home: true
-heroText: Formily ElementPlus
-tagline: 基于 Element Plus 封装的Formily2.x组件体系
-actionText: 开发指南
-actionLink: /guide/
+heroText: Formily Element Plus
+tagline: 基于 element-plus 封装的Formily2.x组件体系
+actions:
+  - text: 组件文档
+    link: /guide/
 features:
   - title: 更易用
     details: 开箱即用，案例丰富
@@ -11,18 +12,5 @@ features:
     details: 傻瓜写法，超高性能
   - title: 更专业
     details: 完备，灵活，优雅
-footer: Open-source MIT Licensed | Copyright © 2019-present
+footer: Open-source MIT Licensed | Copyright © 2022-present
 ---
-
-## 安装
-
-vue2:
-
-```bash
-$ npm install --save element-plus
-$ npm install --save @formily/core @formily/vue @vue/composition-api @formily/element-plus
-```
-
-## 快速开始
-
-<dumi-previewer demoPath="index" :collapsed="false" />
diff --git a/docs/demos/guide/array-cards/effects-json-schema.vue b/docs/demos/guide/array-cards/effects-json-schema.vue
deleted file mode 100644
index 60e3eb8..0000000
--- a/docs/demos/guide/array-cards/effects-json-schema.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCards,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCards,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        array: {
-          type: 'array',
-          'x-component': 'ArrayCards',
-          maxItems: 3,
-          title: '对象数组',
-          items: {
-            type: 'object',
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCards.Index',
-              },
-              aa: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'AA',
-                required: true,
-                'x-component': 'Input',
-                description: '输入123',
-              },
-              bb: {
-                type: 'string',
-                title: 'BB',
-                required: true,
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                'x-reactions': [
-                  {
-                    dependencies: ['.aa'],
-                    when: "{{$deps[0] != '123'}}",
-                    fulfill: {
-                      schema: {
-                        title: 'BB',
-                        'x-disabled': true,
-                      },
-                    },
-                    otherwise: {
-                      schema: {
-                        title: 'Changed',
-                        'x-disabled': false,
-                      },
-                    },
-                  },
-                ],
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCards.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCards.Addition',
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-cards/effects-markup-schema.vue b/docs/demos/guide/array-cards/effects-markup-schema.vue
deleted file mode 100644
index b45484b..0000000
--- a/docs/demos/guide/array-cards/effects-markup-schema.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="array"
-        :maxItems="3"
-        x-component="ArrayCards"
-        x-decorator="FormItem"
-        :x-component-props="{
-          title: '对象数组',
-        }"
-      >
-        <SchemaObjectField>
-          <SchemaVoidField x-component="ArrayCards.Index" />
-          <SchemaStringField
-            name="aa"
-            x-decorator="FormItem"
-            title="AA"
-            required
-            description="AA输入123时隐藏BB"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="bb"
-            x-decorator="FormItem"
-            title="BB"
-            required
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="cc"
-            x-decorator="FormItem"
-            title="CC"
-            required
-            description="CC输入123时隐藏DD"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="dd"
-            x-decorator="FormItem"
-            title="DD"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCards.Remove" />
-          <SchemaVoidField x-component="ArrayCards.MoveUp" />
-          <SchemaVoidField x-component="ArrayCards.MoveDown" />
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
-      </SchemaArrayField>
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm, onFieldChange, onFieldReact } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCards,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCards,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm({
-      effects: () => {
-        //主动联动模式
-        onFieldChange('array.*.aa', ['value'], (field, form) => {
-          form.setFieldState(field.query('.bb'), (state) => {
-            state.visible = field.value != '123'
-          })
-        })
-        //被动联动模式
-        onFieldReact('array.*.dd', (field) => {
-          field.visible = field.query('.cc').get('value') != '123'
-        })
-      },
-    })
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-cards/json-schema.vue b/docs/demos/guide/array-cards/json-schema.vue
deleted file mode 100644
index 3d9c5ee..0000000
--- a/docs/demos/guide/array-cards/json-schema.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCards,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCards,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        string_array: {
-          type: 'array',
-          'x-component': 'ArrayCards',
-          maxItems: 3,
-          'x-decorator': 'FormItem',
-          'x-component-props': {
-            title: '字符串数组',
-          },
-          items: {
-            type: 'void',
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCards.Index',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'Input',
-                required: true,
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCards.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCards.Addition',
-            },
-          },
-        },
-        array: {
-          type: 'array',
-          'x-component': 'ArrayCards',
-          maxItems: 3,
-          'x-decorator': 'FormItem',
-          'x-component-props': {
-            title: '对象数组',
-          },
-          items: {
-            type: 'object',
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCards.Index',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'Input',
-                required: true,
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCards.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCards.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCards.Addition',
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-cards/markup-schema.vue b/docs/demos/guide/array-cards/markup-schema.vue
deleted file mode 100644
index 0dca2ab..0000000
--- a/docs/demos/guide/array-cards/markup-schema.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="string_array"
-        :maxItems="3"
-        x-decorator="FormItem"
-        x-component="ArrayCards"
-        :x-component-props="{
-          title: '字符串数组',
-        }"
-      >
-        <SchemaVoidField>
-          <SchemaVoidField x-component="ArrayCards.Index" />
-          <SchemaStringField
-            name="input"
-            x-decorator="FormItem"
-            title="Input"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCards.Remove" />
-          <SchemaVoidField x-component="ArrayCards.MoveUp" />
-          <SchemaVoidField x-component="ArrayCards.MoveDown" />
-        </SchemaVoidField>
-        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="array"
-        :maxItems="3"
-        x-decorator="FormItem"
-        x-component="ArrayCards"
-        :x-component-props="{
-          title: '对象数组',
-        }"
-      >
-        <SchemaObjectField>
-          <SchemaVoidField x-component="ArrayCards.Index" />
-          <SchemaStringField
-            name="input"
-            x-decorator="FormItem"
-            title="Input"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCards.Remove" />
-          <SchemaVoidField x-component="ArrayCards.MoveUp" />
-          <SchemaVoidField x-component="ArrayCards.MoveDown" />
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
-      </SchemaArrayField>
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCards,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCards,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-collapse/effects-json-schema.vue b/docs/demos/guide/array-collapse/effects-json-schema.vue
deleted file mode 100644
index f6d574a..0000000
--- a/docs/demos/guide/array-collapse/effects-json-schema.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCollapse,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCollapse,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        array: {
-          type: 'array',
-          'x-component': 'ArrayCollapse',
-          maxItems: 3,
-          title: '对象数组',
-          items: {
-            type: 'object',
-            'x-component': 'ArrayCollapse.Item',
-            'x-component-props': {
-              header: '对象数组',
-            },
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Index',
-              },
-              aa: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'AA',
-                required: true,
-                'x-component': 'Input',
-                description: '输入123',
-              },
-              bb: {
-                type: 'string',
-                title: 'BB',
-                required: true,
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                'x-reactions': [
-                  {
-                    dependencies: ['.aa'],
-                    when: "{{$deps[0] != '123'}}",
-                    fulfill: {
-                      schema: {
-                        title: 'BB',
-                        'x-disabled': true,
-                      },
-                    },
-                    otherwise: {
-                      schema: {
-                        title: 'Changed',
-                        'x-disabled': false,
-                      },
-                    },
-                  },
-                ],
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCollapse.Addition',
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-collapse/effects-markup-schema.vue b/docs/demos/guide/array-collapse/effects-markup-schema.vue
deleted file mode 100644
index 9fbcfc4..0000000
--- a/docs/demos/guide/array-collapse/effects-markup-schema.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="array"
-        :maxItems="3"
-        x-component="ArrayCollapse"
-        x-decorator="FormItem"
-        :x-component-props="{
-          title: '对象数组',
-        }"
-      >
-        <SchemaObjectField
-          x-component="ArrayCollapse.Item"
-          x-decorator="FormItem"
-          :x-component-props="{
-            title: '对象数组',
-          }"
-        >
-          <SchemaVoidField x-component="ArrayCollapse.Index" />
-          <SchemaStringField
-            name="aa"
-            x-decorator="FormItem"
-            title="AA"
-            required
-            description="AA输入123时隐藏BB"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="bb"
-            x-decorator="FormItem"
-            title="BB"
-            required
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="cc"
-            x-decorator="FormItem"
-            title="CC"
-            required
-            description="CC输入123时隐藏DD"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="dd"
-            x-decorator="FormItem"
-            title="DD"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCollapse.Remove" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
-        </SchemaObjectField>
-        <SchemaVoidField
-          x-component="ArrayCollapse.Addition"
-          title="添加条目"
-        />
-      </SchemaArrayField>
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm, onFieldChange, onFieldReact } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCollapse,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCollapse,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm({
-      effects: () => {
-        //主动联动模式
-        onFieldChange('array.*.aa', ['value'], (field, form) => {
-          form.setFieldState(field.query('.bb'), (state) => {
-            state.visible = field.value != '123'
-          })
-        })
-        //被动联动模式
-        onFieldReact('array.*.dd', (field) => {
-          field.visible = field.query('.cc').get('value') != '123'
-        })
-      },
-    })
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-collapse/json-schema.vue b/docs/demos/guide/array-collapse/json-schema.vue
deleted file mode 100644
index 1414ecf..0000000
--- a/docs/demos/guide/array-collapse/json-schema.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCollapse,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCollapse,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        string_array: {
-          type: 'array',
-          'x-component': 'ArrayCollapse',
-          maxItems: 3,
-          'x-decorator': 'FormItem',
-          items: {
-            type: 'object',
-            'x-component': 'ArrayCollapse.Item',
-            'x-component-props': {
-              title: '字符串数组',
-            },
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Index',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'Input',
-                required: true,
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCollapse.Addition',
-            },
-          },
-        },
-        array: {
-          type: 'array',
-          'x-component': 'ArrayCollapse',
-          maxItems: 3,
-          'x-decorator': 'FormItem',
-          items: {
-            type: 'object',
-            'x-component': 'ArrayCollapse.Item',
-            'x-component-props': {
-              title: '对象数组',
-            },
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Index',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'Input',
-                required: true,
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayCollapse.Addition',
-            },
-          },
-        },
-        array_unshift: {
-          type: 'array',
-          'x-component': 'ArrayCollapse',
-          maxItems: 3,
-          'x-decorator': 'FormItem',
-          items: {
-            type: 'object',
-            'x-component': 'ArrayCollapse.Item',
-            'x-component-props': {
-              title: '对象数组',
-            },
-            properties: {
-              index: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Index',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'Input',
-                required: true,
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.Remove',
-              },
-              moveUp: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveUp',
-              },
-              moveDown: {
-                type: 'void',
-                'x-component': 'ArrayCollapse.MoveDown',
-              },
-            },
-          },
-          properties: {
-            addition: {
-              type: 'void',
-              title: '添加条目(unshift)',
-              'x-component': 'ArrayCollapse.Addition',
-              'x-component-props': {
-                method: 'unshift',
-              },
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-collapse/markup-schema.vue b/docs/demos/guide/array-collapse/markup-schema.vue
deleted file mode 100644
index 83fe998..0000000
--- a/docs/demos/guide/array-collapse/markup-schema.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="string_array"
-        :maxItems="3"
-        x-decorator="FormItem"
-        x-component="ArrayCollapse"
-        :x-component-props="{
-          accordion: true,
-          defaultOpenPanelCount: 3,
-        }"
-      >
-        <SchemaVoidField
-          x-component="ArrayCollapse.Item"
-          :x-component-props="{
-            title: '字符串数组',
-          }"
-        >
-          <SchemaVoidField x-component="ArrayCollapse.Index" />
-          <SchemaStringField
-            name="input"
-            x-decorator="FormItem"
-            title="Input"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCollapse.Remove" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
-        </SchemaVoidField>
-        <SchemaVoidField
-          x-component="ArrayCollapse.Addition"
-          title="添加条目"
-        />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="array"
-        :maxItems="3"
-        x-decorator="FormItem"
-        x-component="ArrayCollapse"
-      >
-        <SchemaObjectField
-          x-component="ArrayCollapse.Item"
-          :x-component-props="{
-            title: '对象数组',
-          }"
-        >
-          <SchemaVoidField x-component="ArrayCollapse.Index" />
-          <SchemaStringField
-            name="input"
-            x-decorator="FormItem"
-            title="Input"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCollapse.Remove" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
-        </SchemaObjectField>
-        <SchemaVoidField
-          x-component="ArrayCollapse.Addition"
-          title="添加条目"
-        />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="string_array_unshift"
-        :maxItems="3"
-        x-decorator="FormItem"
-        x-component="ArrayCollapse"
-        :x-component-props="{
-          defaultOpenPanelCount: 8,
-        }"
-      >
-        <SchemaVoidField
-          x-component="ArrayCollapse.Item"
-          :x-component-props="{
-            title: '字符串数组',
-          }"
-        >
-          <SchemaVoidField x-component="ArrayCollapse.Index" />
-          <SchemaStringField
-            name="input"
-            x-decorator="FormItem"
-            title="Input"
-            required
-            x-component="Input"
-          />
-          <SchemaVoidField x-component="ArrayCollapse.Remove" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
-          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
-        </SchemaVoidField>
-        <SchemaVoidField
-          x-component="ArrayCollapse.Addition"
-          title="添加条目（unshift）"
-          :x-component-props="{
-            method: 'unshift',
-          }"
-        />
-      </SchemaArrayField>
-    </SchemaField>
-    <FormButtonGroup>
-      <Button
-        @click="
-          () => {
-            form.setInitialValues({
-              array: Array.from({ length: 10 }).map(() => ({
-                input: 'default value',
-              })),
-              string_array: Array.from({ length: 10 }).map(
-                () => 'default value'
-              ),
-              string_array_unshift: Array.from({ length: 10 }).map(
-                () => 'default value'
-              ),
-            })
-          }
-        "
-      >
-        加载默认数据
-      </Button>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  ArrayCollapse,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayCollapse,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-items/json-schema.vue b/docs/demos/guide/array-items/json-schema.vue
deleted file mode 100644
index e1735a9..0000000
--- a/docs/demos/guide/array-items/json-schema.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormButtonGroup,
-  Submit,
-  FormItem,
-  Space,
-  Input,
-  Select,
-  DatePicker,
-  ArrayItems,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Space,
-    Input,
-    Select,
-    DatePicker,
-    ArrayItems,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        string_array: {
-          type: 'array',
-          'x-component': 'ArrayItems',
-          'x-decorator': 'FormItem',
-          title: '字符串数组',
-          items: {
-            type: 'void',
-            'x-component': 'Space',
-            properties: {
-              sort: {
-                type: 'void',
-                'x-decorator': 'FormItem',
-                'x-component': 'ArrayItems.SortHandle',
-              },
-              input: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-              },
-              remove: {
-                type: 'void',
-                'x-decorator': 'FormItem',
-                'x-component': 'ArrayItems.Remove',
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayItems.Addition',
-            },
-          },
-        },
-        array: {
-          type: 'array',
-          'x-component': 'ArrayItems',
-          'x-decorator': 'FormItem',
-          title: '对象数组',
-          items: {
-            type: 'object',
-            properties: {
-              space: {
-                type: 'void',
-                'x-component': 'Space',
-                properties: {
-                  sort: {
-                    type: 'void',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItems.SortHandle',
-                  },
-                  date: {
-                    type: 'string',
-                    title: '日期',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'DatePicker',
-                    'x-component-props': {
-                      type: 'daterange',
-                      style: {
-                        width: '250px',
-                      },
-                    },
-                  },
-                  input: {
-                    type: 'string',
-                    title: '输入框',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                  select: {
-                    type: 'string',
-                    title: '下拉框',
-                    enum: [
-                      { label: '选项1', value: 1 },
-                      { label: '选项2', value: 2 },
-                    ],
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Select',
-                    'x-component-props': {
-                      style: {
-                        width: '250px',
-                      },
-                    },
-                  },
-                  remove: {
-                    type: 'void',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItems.Remove',
-                  },
-                },
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayItems.Addition',
-            },
-          },
-        },
-        array2: {
-          type: 'array',
-          'x-component': 'ArrayItems',
-          'x-decorator': 'FormItem',
-          'x-component-props': { style: { width: '600px' } },
-          title: '对象数组',
-          items: {
-            type: 'object',
-            'x-decorator': 'ArrayItems.Item',
-            properties: {
-              space: {
-                type: 'void',
-                'x-component': 'Space',
-                properties: {
-                  sort: {
-                    type: 'void',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItems.SortHandle',
-                  },
-                  date: {
-                    type: 'string',
-                    title: '日期',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'DatePicker',
-                    'x-component-props': {
-                      type: 'daterange',
-                      style: {
-                        width: '250px',
-                      },
-                    },
-                  },
-                  input: {
-                    type: 'string',
-                    title: '输入框',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                  remove: {
-                    type: 'void',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItems.Remove',
-                  },
-                },
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              title: '添加条目',
-              'x-component': 'ArrayItems.Addition',
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-items/markup-schema.vue b/docs/demos/guide/array-items/markup-schema.vue
deleted file mode 100644
index bf67f87..0000000
--- a/docs/demos/guide/array-items/markup-schema.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="string_array"
-        title="字符串数组"
-        x-decorator="FormItem"
-        x-component="ArrayItems"
-      >
-        <SchemaVoidField x-component="Space">
-          <SchemaVoidField
-            x-decorator="FormItem"
-            x-component="ArrayItems.SortHandle"
-          />
-          <SchemaStringField
-            x-decorator="FormItem"
-            required
-            name="input"
-            x-component="Input"
-            :x-component-props="{
-              style: {
-                width: '160px',
-              },
-            }"
-          />
-          <SchemaVoidField
-            x-decorator="FormItem"
-            x-component="ArrayItems.Remove"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="array"
-        title="对象数组"
-        x-decorator="FormItem"
-        x-component="ArrayItems"
-      >
-        <SchemaObjectField>
-          <SchemaVoidField x-component="Space">
-            <SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayItems.SortHandle"
-            />
-            <SchemaStringField
-              x-decorator="FormItem"
-              required
-              title="日期"
-              name="date"
-              x-component="DatePicker"
-              :x-component-props="{
-                type: 'daterange',
-                style: {
-                  width: '160px',
-                },
-              }"
-            />
-            <SchemaStringField
-              x-decorator="FormItem"
-              required
-              title="输入框"
-              name="input"
-              x-component="Input"
-            />
-            <SchemaStringField
-              x-decorator="FormItem"
-              required
-              title="选择框"
-              name="select"
-              :enum="[
-                { label: '选项1', value: 1 },
-                { label: '选项2', value: 2 },
-              ]"
-              x-component="Select"
-              :x-component-props="{
-                style: {
-                  width: 160,
-                },
-              }"
-            />
-            <SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayItems.Remove"
-            />
-          </SchemaVoidField>
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="array2"
-        title="对象数组"
-        x-decorator="FormItem"
-        x-component="ArrayItems"
-        :x-component-props="{ style: { width: '600px' } }"
-      >
-        <SchemaObjectField x-decorator="ArrayItems.Item">
-          <SchemaVoidField x-component="Space">
-            <SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayItems.SortHandle"
-            />
-            <SchemaStringField
-              x-decorator="FormItem"
-              required
-              title="日期"
-              name="date"
-              x-component="DatePicker"
-              :x-component-props="{
-                type: 'daterange',
-                style: {
-                  width: '250px',
-                },
-              }"
-            />
-            <SchemaStringField
-              x-decorator="FormItem"
-              required
-              title="输入框"
-              name="input"
-              x-component="Input"
-            />
-            <SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayItems.Remove"
-            />
-          </SchemaVoidField>
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
-      </SchemaArrayField>
-    </SchemaField>
-    <FormButtonGroup>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  Select,
-  Space,
-  DatePicker,
-  ArrayItems,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Space,
-    Input,
-    Select,
-    DatePicker,
-    ArrayItems,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-table/effects-json-schema.vue b/docs/demos/guide/array-table/effects-json-schema.vue
deleted file mode 100644
index 3a6e5fa..0000000
--- a/docs/demos/guide/array-table/effects-json-schema.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm, onFieldChange, onFieldReact } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  Input,
-  Editable,
-  Switch,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    ArrayTable,
-    Input,
-    Editable,
-    Switch,
-  },
-})
-
-export default {
-  components: { FormProvider, Submit, ...fields },
-  data() {
-    const form = createForm({
-      effects: () => {
-        //主动联动模式
-        onFieldChange('hideFirstColumn', ['value'], (field) => {
-          field.query('array.column3').take((target) => {
-            target.visible = !field.value
-          })
-          field.query('array.*.a2').take((target) => {
-            target.visible = !field.value
-          })
-        })
-        //被动联动模式
-        onFieldReact('array.*.a2', (field) => {
-          field.visible = !field.query('.a1').get('value')
-        })
-      },
-    })
-    const schema = {
-      type: 'object',
-      properties: {
-        hideFirstColumn: {
-          type: 'boolean',
-          title: '隐藏A2',
-          'x-decorator': 'FormItem',
-          'x-component': 'Switch',
-        },
-        array: {
-          type: 'array',
-          'x-decorator': 'FormItem',
-          'x-component': 'ArrayTable',
-          items: {
-            type: 'object',
-            properties: {
-              column1: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': {
-                  width: 80,
-                  title: 'Index',
-                  align: 'center',
-                },
-                properties: {
-                  index: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Index',
-                  },
-                },
-              },
-              column2: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { width: 100, title: '显隐->A2' },
-                properties: {
-                  a1: {
-                    type: 'boolean',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Switch',
-                  },
-                },
-              },
-              column3: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { width: 200, title: 'A2' },
-                properties: {
-                  a2: {
-                    type: 'string',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                },
-              },
-              column4: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { title: 'A3' },
-                properties: {
-                  a3: {
-                    type: 'string',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                },
-              },
-              column5: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': {
-                  title: 'Operations',
-                  prop: 'operations',
-                  width: 200,
-                  fixed: 'right',
-                },
-                properties: {
-                  item: {
-                    type: 'void',
-                    'x-component': 'FormItem',
-                    properties: {
-                      remove: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.Remove',
-                      },
-                      moveDown: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveDown',
-                      },
-                      moveUp: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveUp',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              'x-component': 'ArrayTable.Addition',
-              title: '添加条目',
-            },
-          },
-        },
-      },
-    }
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(...v) {
-      console.log(...v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/array-table/effects-markup-schema.vue b/docs/demos/guide/array-table/effects-markup-schema.vue
deleted file mode 100644
index 5a9c57c..0000000
--- a/docs/demos/guide/array-table/effects-markup-schema.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaBooleanField
-        name="hideFirstColumn"
-        x-decorator="FormItem"
-        x-component="Switch"
-        title="隐藏A2"
-      />
-      <SchemaArrayField
-        name="array"
-        x-decorator="FormItem"
-        x-component="ArrayTable"
-      >
-        <SchemaObjectField>
-          <SchemaVoidField
-            name="column1"
-            x-component="ArrayTable.Column"
-            :x-component-props="{ width: 80, title: 'Index' }"
-            ><SchemaVoidField x-component="ArrayTable.Index" />
-          </SchemaVoidField>
-          <SchemaVoidField
-            name="column2"
-            x-component="ArrayTable.Column"
-            :x-component-props="{
-              title: '显隐->A2',
-              width: 100,
-            }"
-          >
-            <SchemaBooleanField
-              name="a1"
-              x-decorator="FormItem"
-              x-component="Switch"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            name="column3"
-            :x-component-props="{ title: 'A2', width: 200 }"
-          >
-            <SchemaStringField
-              x-decorator="FormItem"
-              name="a2"
-              x-component="Input"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            name="column4"
-            x-component="ArrayTable.Column"
-            :x-component-props="{ title: 'A3' }"
-          >
-            <SchemaStringField
-              name="a3"
-              x-decorator="FormItem"
-              x-component="Input"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            name="column5"
-            x-component="ArrayTable.Column"
-            :x-component-props="{
-              title: 'Operations',
-              prop: 'operations',
-              width: 200,
-              fixed: 'right',
-            }"
-          >
-            <SchemaVoidField x-component="FormItem">
-              <SchemaVoidField x-component="ArrayTable.Remove" />
-              <SchemaVoidField x-component="ArrayTable.MoveUp" />
-              <SchemaVoidField x-component="ArrayTable.MoveDown" />
-            </SchemaVoidField>
-          </SchemaVoidField>
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayTable.Addition" title="添加条目" />
-      </SchemaArrayField>
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm, onFieldChange, onFieldReact } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  Input,
-  Editable,
-  Switch,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    ArrayTable,
-    Input,
-    Editable,
-    Switch,
-  },
-})
-
-export default {
-  components: { FormProvider, Submit, ...fields },
-  data() {
-    const form = createForm({
-      effects: () => {
-        //主动联动模式
-        onFieldChange('hideFirstColumn', ['value'], (field) => {
-          field.query('array.column3').take((target) => {
-            console.log('target', target)
-            target.visible = !field.value
-          })
-          field.query('array.*.a2').take((target) => {
-            target.visible = !field.value
-          })
-        })
-        //被动联动模式
-        onFieldReact('array.*.a2', (field) => {
-          field.visible = !field.query('.a1').get('value')
-        })
-      },
-    })
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(...v) {
-      console.log(...v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/array-table/json-schema.vue b/docs/demos/guide/array-table/json-schema.vue
deleted file mode 100644
index 8bd989d..0000000
--- a/docs/demos/guide/array-table/json-schema.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  Input,
-  Editable,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    ArrayTable,
-    Input,
-    Editable,
-  },
-})
-
-export default {
-  components: { FormProvider, Submit, ...fields },
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        array: {
-          type: 'array',
-          'x-decorator': 'FormItem',
-          'x-component': 'ArrayTable',
-          items: {
-            type: 'object',
-            properties: {
-              column1: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': {
-                  width: 80,
-                  title: 'Index',
-                  align: 'center',
-                },
-                properties: {
-                  index: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Index',
-                  },
-                },
-              },
-              column2: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { width: 200, title: 'A1' },
-                properties: {
-                  a1: {
-                    type: 'string',
-                    'x-decorator': 'Editable',
-                    'x-component': 'Input',
-                  },
-                },
-              },
-              column3: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { width: 200, title: 'A2' },
-                properties: {
-                  a2: {
-                    type: 'string',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                },
-              },
-              column4: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': { title: 'A3' },
-                properties: {
-                  a3: {
-                    type: 'string',
-                    'x-decorator': 'FormItem',
-                    'x-component': 'Input',
-                  },
-                },
-              },
-              column5: {
-                type: 'void',
-                'x-component': 'ArrayTable.Column',
-                'x-component-props': {
-                  title: 'Operations',
-                  prop: 'operations',
-                  width: 200,
-                  fixed: 'right',
-                },
-                properties: {
-                  item: {
-                    type: 'void',
-                    'x-component': 'FormItem',
-                    properties: {
-                      remove: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.Remove',
-                      },
-                      moveDown: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveDown',
-                      },
-                      moveUp: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveUp',
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          },
-          properties: {
-            add: {
-              type: 'void',
-              'x-component': 'ArrayTable.Addition',
-              title: '添加条目',
-            },
-          },
-        },
-      },
-    }
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(...v) {
-      console.log(...v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/array-table/markup-schema.vue b/docs/demos/guide/array-table/markup-schema.vue
deleted file mode 100644
index 107f02f..0000000
--- a/docs/demos/guide/array-table/markup-schema.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="array"
-        x-decorator="FormItem"
-        x-component="ArrayTable"
-        :x-component-props="{
-          pagination: { pageSize: 10 },
-        }"
-      >
-        <SchemaObjectField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            :x-component-props="{ width: 80, title: 'Index' }"
-            ><SchemaVoidField
-              x-decorator="FormItem"
-              x-component="ArrayTable.Index"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            :x-component-props="{ prop: 'a1', title: 'A1', width: 200 }"
-          >
-            <SchemaStringField
-              x-decorator="Editable"
-              name="a1"
-              :required="true"
-              x-component="Input"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            :x-component-props="{ title: 'A2', width: 200 }"
-          >
-            <SchemaStringField
-              x-decorator="FormItem"
-              name="a2"
-              :required="true"
-              x-component="Input"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            :x-component-props="{ title: 'A3' }"
-          >
-            <SchemaStringField
-              name="a3"
-              :required="true"
-              x-decorator="FormItem"
-              x-component="Input"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            x-component="ArrayTable.Column"
-            :x-component-props="{
-              title: 'Operations',
-              prop: 'operations',
-              width: 200,
-            }"
-          >
-            <SchemaVoidField x-component="FormItem">
-              <SchemaVoidField x-component="ArrayTable.Remove" />
-              <SchemaVoidField x-component="ArrayTable.MoveUp" />
-              <SchemaVoidField x-component="ArrayTable.MoveDown" />
-            </SchemaVoidField>
-          </SchemaVoidField>
-        </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayTable.Addition" title="添加条目" />
-      </SchemaArrayField>
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-    <Button
-      @click="
-        () => {
-          form.setInitialValues({
-            array: range(100000),
-          })
-        }
-      "
-    >
-      加载10W条超大数据
-    </Button>
-    <Alert
-      :style="{ marginTop: '10px' }"
-      title="注意：开启formily插件的页面，因为后台有数据通信，会占用浏览器算力，最好在无痕模式(无formily插件)下测试"
-      type="warning"
-    />
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  Input,
-  Editable,
-} from '@formily/element-plus'
-import { Button, Alert } from 'element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    ArrayTable,
-    Input,
-    Editable,
-  },
-})
-
-export default {
-  components: { FormProvider, Submit, Button, Alert, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(...v) {
-      console.log(...v)
-    },
-    range(count) {
-      return Array.from(new Array(count)).map((_, key) => ({
-        aaa: key,
-      }))
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/array-tabs/json-schema.vue b/docs/demos/guide/array-tabs/json-schema.vue
deleted file mode 100644
index 1b0e531..0000000
--- a/docs/demos/guide/array-tabs/json-schema.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormButtonGroup,
-  Submit,
-  FormItem,
-  Space,
-  Input,
-  ArrayTabs,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Space,
-    Input,
-    ArrayTabs,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const schema = {
-      type: 'object',
-      properties: {
-        string_array: {
-          type: 'array',
-          title: '字符串数组',
-          'x-decorator': 'FormItem',
-          maxItems: 3,
-          'x-component': 'ArrayTabs',
-          items: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            required: true,
-            'x-component': 'Input',
-          },
-        },
-        array: {
-          type: 'array',
-          title: '对象数组',
-          'x-decorator': 'FormItem',
-          maxItems: 3,
-          'x-component': 'ArrayTabs',
-          items: {
-            type: 'object',
-            properties: {
-              aaa: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'AAA',
-                required: true,
-                'x-component': 'Input',
-              },
-              bbb: {
-                type: 'string',
-                'x-decorator': 'FormItem',
-                title: 'BBB',
-                required: true,
-                'x-component': 'Input',
-              },
-            },
-          },
-        },
-      },
-    }
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/array-tabs/markup-schema.vue b/docs/demos/guide/array-tabs/markup-schema.vue
deleted file mode 100644
index ba5ba28..0000000
--- a/docs/demos/guide/array-tabs/markup-schema.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaArrayField
-        name="string_array"
-        x-decorator="FormItem"
-        title="字符串数组"
-        :maxItems="3"
-        x-component="ArrayTabs"
-      >
-        <SchemaStringField
-          x-decorator="FormItem"
-          required
-          x-component="Input"
-        />
-      </SchemaArrayField>
-      <SchemaArrayField
-        name="array"
-        x-decorator="FormItem"
-        title="对象数组"
-        :maxItems="3"
-        x-component="ArrayTabs"
-      >
-        <SchemaObjectField>
-          <SchemaStringField
-            x-decorator="FormItem"
-            title="AAA"
-            name="aaa"
-            required
-            x-component="Input"
-          />
-          <SchemaStringField
-            x-decorator="FormItem"
-            title="BBB"
-            name="bbb"
-            required
-            x-component="Input"
-          />
-        </SchemaObjectField>
-      </SchemaArrayField>
-    </SchemaField>
-    <FormButtonGroup>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormButtonGroup,
-  Submit,
-  Input,
-  Select,
-  ArrayTabs,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    ArrayTabs,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/cascader/json-schema.vue b/docs/demos/guide/cascader/json-schema.vue
deleted file mode 100644
index 7ac2edb..0000000
--- a/docs/demos/guide/cascader/json-schema.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField
-      :schema="schema"
-      :scope="{ useAsyncDataSource, transformAddress }"
-    />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
-import { action } from '@formily/reactive'
-import axios from 'axios'
-
-const transformAddress = (data = {}) => {
-  return Object.entries(data).reduce((buf, [key, value]) => {
-    if (typeof value === 'string')
-      return buf.concat({
-        label: value,
-        value: key,
-      })
-    const { name, code, cities, districts } = value
-    const _cities = transformAddress(cities)
-    const _districts = transformAddress(districts)
-    return buf.concat({
-      label: name,
-      value: code,
-      children: _cities.length
-        ? _cities
-        : _districts.length
-        ? _districts
-        : undefined,
-    })
-  }, [])
-}
-
-const useAsyncDataSource = (url, transform) => {
-  return (field) => {
-    field.loading = true
-    axios
-      .get(url)
-      .then((res) => res.data)
-      .then(
-        action.bound((data) => {
-          field.dataSource = transform(data)
-          field.loading = false
-        })
-      )
-  }
-}
-
-const schema = {
-  type: 'object',
-  properties: {
-    cascader: {
-      type: 'string',
-      title: '地址选择',
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-      'x-component-props': {
-        style: {
-          width: '240px',
-        },
-      },
-      'x-reactions': [
-        '{{useAsyncDataSource("//unpkg.com/china-location/dist/location.json",transformAddress)}}',
-      ],
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Cascader,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      useAsyncDataSource,
-      transformAddress,
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/cascader/markup-schema.vue b/docs/demos/guide/cascader/markup-schema.vue
deleted file mode 100644
index f4bd2db..0000000
--- a/docs/demos/guide/cascader/markup-schema.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="address"
-        title="地址选择"
-        required
-        x-decorator="FormItem"
-        x-component="Cascader"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-    </SchemaField>
-
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm, onFieldReact } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
-import { action } from '@formily/reactive'
-import axios from 'axios'
-
-const transformAddress = (data = {}) => {
-  return Object.entries(data).reduce((buf, [key, value]) => {
-    if (typeof value === 'string')
-      return buf.concat({
-        label: value,
-        value: key,
-      })
-    const { name, code, cities, districts } = value
-    const _cities = transformAddress(cities)
-    const _districts = transformAddress(districts)
-    return buf.concat({
-      label: name,
-      value: code,
-      children: _cities.length
-        ? _cities
-        : _districts.length
-        ? _districts
-        : undefined,
-    })
-  }, [])
-}
-
-const useAddress = (pattern) => {
-  onFieldReact(pattern, (field) => {
-    field.loading = true
-    axios('//unpkg.com/china-location/dist/location.json')
-      .then((res) => res.data)
-      .then(
-        action.bound((data) => {
-          field.dataSource = transformAddress(data)
-          field.loading = false
-        })
-      )
-  })
-}
-
-const form = createForm({
-  effects: () => {
-    useAddress('address')
-  },
-})
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Cascader,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/cascader/template.vue b/docs/demos/guide/cascader/template.vue
deleted file mode 100644
index 43c9a4c..0000000
--- a/docs/demos/guide/cascader/template.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <Form :form="form">
-    <Field
-      name="address"
-      title="地址选择"
-      required
-      :decorator="[FormItem]"
-      :component="[
-        Cascader,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-    />
-
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm, onFieldReact } from '@formily/core'
-import { Field } from '@formily/vue'
-import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
-import { action } from '@formily/reactive'
-import axios from 'axios'
-
-const transformAddress = (data = {}) => {
-  return Object.entries(data).reduce((buf, [key, value]) => {
-    if (typeof value === 'string')
-      return buf.concat({
-        label: value,
-        value: key,
-      })
-    const { name, code, cities, districts } = value
-    const _cities = transformAddress(cities)
-    const _districts = transformAddress(districts)
-    return buf.concat({
-      label: name,
-      value: code,
-      children: _cities.length
-        ? _cities
-        : _districts.length
-        ? _districts
-        : undefined,
-    })
-  }, [])
-}
-
-const useAddress = (pattern) => {
-  onFieldReact(pattern, (field) => {
-    field.loading = true
-    axios('//unpkg.com/china-location/dist/location.json')
-      .then((res) => res.data)
-      .then(
-        action.bound((data) => {
-          field.dataSource = transformAddress(data)
-          field.loading = false
-        })
-      )
-  })
-}
-
-const form = createForm({
-  effects: () => {
-    useAddress('address')
-  },
-})
-
-export default {
-  components: { Form, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Cascader,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/checkbox/json-schema.vue b/docs/demos/guide/checkbox/json-schema.vue
deleted file mode 100644
index e13896a..0000000
--- a/docs/demos/guide/checkbox/json-schema.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Checkbox, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    checkbox: {
-      type: 'number',
-      title: '是否确认',
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox',
-    },
-    checkboxGroup: {
-      type: 'array',
-      title: '复选',
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox.Group',
-      enum: [
-        {
-          label: '选项1',
-          value: 1,
-        },
-        {
-          label: '选项2',
-          value: 2,
-        },
-      ],
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Checkbox,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/checkbox/markup-schema.vue b/docs/demos/guide/checkbox/markup-schema.vue
deleted file mode 100644
index d918047..0000000
--- a/docs/demos/guide/checkbox/markup-schema.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaBooleanField
-        name="single"
-        title="是否确认"
-        x-decorator="FormItem"
-        x-component="Checkbox"
-      />
-      <SchemaArrayField
-        name="multiple"
-        title="复选"
-        :enum="[
-          { label: '选项1', value: 1 },
-          { label: '选项2', value: 2 },
-        ]"
-        x-decorator="FormItem"
-        x-component="Checkbox.Group"
-      />
-    </SchemaField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Checkbox, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Checkbox,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/checkbox/template.vue b/docs/demos/guide/checkbox/template.vue
deleted file mode 100644
index cf25ad9..0000000
--- a/docs/demos/guide/checkbox/template.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <Form :form="form">
-    <Field
-      name="single"
-      title="是否确认"
-      :decorator="[FormItem]"
-      :component="[Checkbox]"
-    />
-    <ArrayField
-      name="multiple"
-      title="复选"
-      :dataSource="[
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 },
-      ]"
-      :decorator="[FormItem]"
-      :component="[Checkbox.Group, { optionType: 'button' }]"
-    >
-      <template v-slot:option="{ option }">
-        <div>{{ option.label }}</div>
-      </template>
-    </ArrayField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { Field, ArrayField } from '@formily/vue'
-import { Form, FormItem, Checkbox, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { Form, Field, ArrayField, Submit },
-  data() {
-    return {
-      FormItem,
-      Checkbox,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/date-picker/json-schema.vue b/docs/demos/guide/date-picker/json-schema.vue
deleted file mode 100644
index b05ae6d..0000000
--- a/docs/demos/guide/date-picker/json-schema.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, DatePicker, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    date: {
-      type: 'string',
-      title: '普通日期',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-    },
-    week: {
-      type: 'string',
-      title: '周',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'week',
-      },
-    },
-    month: {
-      type: 'string',
-      title: '月',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'month',
-      },
-    },
-    year: {
-      type: 'string',
-      title: '年',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'year',
-      },
-    },
-    dateTime: {
-      type: 'string',
-      title: '日期时间',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'datetime',
-      },
-    },
-    dates: {
-      type: 'array',
-      title: '多个日期',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'dates',
-      },
-    },
-    dateRange: {
-      type: 'string',
-      title: '日期范围',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'daterange',
-      },
-    },
-    monthRange: {
-      type: 'string',
-      title: '月范围',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'monthrange',
-      },
-    },
-    dateTimeRange: {
-      type: 'string',
-      title: '日期时间范围',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-      'x-component-props': {
-        type: 'datetimerange',
-      },
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    DatePicker,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/date-picker/markup-schema.vue b/docs/demos/guide/date-picker/markup-schema.vue
deleted file mode 100644
index a686d0e..0000000
--- a/docs/demos/guide/date-picker/markup-schema.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="date"
-        title="普通日期"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-      />
-      <SchemaStringField
-        name="week"
-        title="周"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'week',
-        }"
-      />
-      <SchemaStringField
-        name="month"
-        title="月"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'month',
-        }"
-      />
-      <SchemaStringField
-        name="year"
-        title="年"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'year',
-        }"
-      />
-      <SchemaStringField
-        name="dateTime"
-        title="日期时间"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'datetime',
-        }"
-      />
-      <SchemaArrayField
-        name="dates"
-        title="多个日期"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'dates',
-        }"
-      />
-      <SchemaArrayField
-        name="dateRange"
-        title="日期范围"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'daterange',
-        }"
-      />
-      <SchemaArrayField
-        name="monthRange"
-        title="月范围"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'monthrange',
-        }"
-      />
-      <SchemaArrayField
-        name="dateTimeRange"
-        title="日期时间范围"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        :x-component-props="{
-          type: 'datetimerange',
-        }"
-      />
-    </SchemaField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, DatePicker, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    DatePicker,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/date-picker/template.vue b/docs/demos/guide/date-picker/template.vue
deleted file mode 100644
index 05f3276..0000000
--- a/docs/demos/guide/date-picker/template.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <Form :form="form">
-    <Field
-      name="date"
-      title="普通日期"
-      :decorator="[FormItem]"
-      :component="[DatePicker]"
-    />
-    <Field
-      name="week"
-      title="周"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'week',
-        },
-      ]"
-    />
-    <Field
-      name="month"
-      title="月"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'month',
-        },
-      ]"
-    />
-    <Field
-      name="year"
-      title="年"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'year',
-        },
-      ]"
-    />
-    <Field
-      name="dateTime"
-      title="日期时间"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'datetime',
-        },
-      ]"
-    />
-    <ArrayField
-      name="dates"
-      title="多个日期"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'dates',
-        },
-      ]"
-    />
-    <ArrayField
-      name="dateRange"
-      title="日期范围"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'daterange',
-        },
-      ]"
-    />
-    <ArrayField
-      name="monthRange"
-      title="月范围"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'monthrange',
-        },
-      ]"
-    />
-    <ArrayField
-      name="dateTimeRange"
-      title="日期时间范围"
-      :decorator="[FormItem]"
-      :component="[
-        DatePicker,
-        {
-          type: 'datetimerange',
-        },
-      ]"
-    />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { Field, ArrayField } from '@formily/vue'
-import { Form, FormItem, DatePicker, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { Form, Field, ArrayField, Submit },
-  data() {
-    return {
-      FormItem,
-      DatePicker,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/editable/json-schema.vue b/docs/demos/guide/editable/json-schema.vue
deleted file mode 100644
index bc8c4fe..0000000
--- a/docs/demos/guide/editable/json-schema.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <FormButtonGroup>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormButtonGroup,
-  FormItem,
-  Submit,
-  Input,
-  DatePicker,
-  Editable,
-} from '@formily/element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    DatePicker,
-    Editable,
-  },
-})
-
-const schema = {
-  type: 'object',
-  properties: {
-    date: {
-      type: 'string',
-      title: '日期',
-      'x-decorator': 'Editable',
-      'x-component': 'DatePicker',
-    },
-    input: {
-      type: 'string',
-      title: '输入框',
-      'x-decorator': 'Editable',
-      'x-component': 'Input',
-    },
-    void: {
-      type: 'void',
-      title: '虚拟节点容器',
-      'x-component': 'Editable.Popover',
-      'x-reactions':
-        "{{(field) => field.title = field.query('.void.date2').get('value') || field.title}}",
-      properties: {
-        date2: {
-          type: 'string',
-          title: '日期',
-          'x-decorator': 'FormItem',
-          'x-component': 'DatePicker',
-        },
-        input2: {
-          type: 'string',
-          title: '输入框',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-    iobject: {
-      type: 'object',
-      title: '对象节点容器',
-      'x-component': 'Editable.Popover',
-      'x-reactions':
-        '{{(field) => field.title = field.value && field.value.date || field.title}}',
-      properties: {
-        date: {
-          type: 'string',
-          title: '日期',
-          'x-decorator': 'FormItem',
-          'x-component': 'DatePicker',
-        },
-        input: {
-          type: 'string',
-          title: '输入框',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-
-export default {
-  components: {
-    FormButtonGroup,
-    FormProvider,
-    Submit,
-    SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      schema,
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/editable/markup-schema.vue b/docs/demos/guide/editable/markup-schema.vue
deleted file mode 100644
index f30a7f5..0000000
--- a/docs/demos/guide/editable/markup-schema.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="date"
-        title="日期"
-        x-decorator="Editable"
-        x-component="DatePicker"
-      />
-      <SchemaStringField
-        name="input"
-        title="输入框"
-        x-decorator="Editable"
-        x-component="Input"
-      />
-      <SchemaVoidField
-        name="void"
-        title="虚拟节点容器"
-        x-component="Editable.Popover"
-        :x-reactions="
-          (field) => {
-            field.title = field.query('.void.date2').get('value') || field.title
-          }
-        "
-      >
-        <SchemaStringField
-          name="date2"
-          title="日期"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-        />
-        <SchemaStringField
-          name="input2"
-          title="输入框"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-      </SchemaVoidField>
-      <SchemaObjectField
-        name="object"
-        title="对象节点容器"
-        x-component="Editable.Popover"
-        :x-reactions="
-          (field) => {
-            field.title = (field.value && field.value.date) || field.title
-          }
-        "
-      >
-        <SchemaStringField
-          name="date"
-          title="日期"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-        />
-        <SchemaStringField
-          name="input"
-          title="输入框"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-      </SchemaObjectField>
-    </SchemaField>
-    <FormButtonGroup>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormButtonGroup,
-  FormItem,
-  Submit,
-  Input,
-  DatePicker,
-  Editable,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    DatePicker,
-    Editable,
-  },
-})
-
-export default {
-  components: {
-    FormButtonGroup,
-    FormProvider,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/editable/template.vue b/docs/demos/guide/editable/template.vue
deleted file mode 100644
index 095bfff..0000000
--- a/docs/demos/guide/editable/template.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="date"
-      title="日期"
-      :decorator="[Editable]"
-      :component="[DatePicker]"
-    />
-    <Field
-      name="input"
-      title="输入框"
-      :decorator="[Editable]"
-      :component="[Input]"
-    />
-    <VoidField
-      name="void"
-      title="虚拟节点容器"
-      :component="[Editable.Popover]"
-      :reactions="
-        (field) => {
-          field.title = field.query('.void.date2').get('value') || field.title
-        }
-      "
-    >
-      <Field
-        name="date2"
-        title="日期"
-        :decorator="[FormItem]"
-        :component="[DatePicker]"
-      />
-      <Field
-        name="input2"
-        title="输入框"
-        :decorator="[FormItem]"
-        :component="[Input]"
-      />
-    </VoidField>
-    <ObjectField
-      name="iobject"
-      title="对象节点容器"
-      :component="[Editable.Popover]"
-      :reactions="
-        (field) => {
-          field.title = (field.value && field.value.date) || field.title
-        }
-      "
-    >
-      <Field
-        name="date"
-        title="日期"
-        :decorator="[FormItem]"
-        :component="[DatePicker]"
-      />
-      <Field
-        name="input"
-        title="输入框"
-        :decorator="[FormItem]"
-        :component="[Input]"
-      />
-    </ObjectField>
-
-    <FormButtonGroup>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field, VoidField, ObjectField } from '@formily/vue'
-import {
-  FormButtonGroup,
-  FormItem,
-  Submit,
-  Input,
-  DatePicker,
-  Editable,
-} from '@formily/element-plus'
-
-export default {
-  components: {
-    FormButtonGroup,
-    FormProvider,
-    Submit,
-    Field,
-    VoidField,
-    ObjectField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      FormItem,
-      Input,
-      DatePicker,
-      Editable,
-      form,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-button-group.vue b/docs/demos/guide/form-button-group.vue
deleted file mode 100644
index 19336b2..0000000
--- a/docs/demos/guide/form-button-group.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :labelCol="6" :wrapperCol="10">
-      <SchemaField>
-        <SchemaStringField
-          required
-          title="输入框"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          required
-          title="输入框"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-      </SchemaField>
-      <FormButtonGroup align-form-item>
-        <Submit @submit="log">提交</Submit>
-        <Reset>重置</Reset>
-      </FormButtonGroup>
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Submit,
-  Reset,
-  FormButtonGroup,
-  FormItem,
-  Input,
-  Select,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({ components: { FormItem, Input, Select } })
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Submit,
-    Reset,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(v) {
-      console.log(v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-collapse/json-schema.vue b/docs/demos/guide/form-collapse/json-schema.vue
deleted file mode 100644
index 93b9c51..0000000
--- a/docs/demos/guide/form-collapse/json-schema.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :label-col="6" :wrapper-col="10">
-      <SchemaField :schema="schema" :scope="{ formCollapse }" />
-      <FormButtonGroup alignFormItem>
-        <Button
-          @click="
-            () => {
-              form.query('tab3').take((field) => {
-                field.visible = !field.visible
-              })
-            }
-          "
-        >
-          显示/隐藏最后一个Tab
-        </Button>
-        <Button
-          @click="
-            () => {
-              formCollapse.toggleActiveKey('tab2')
-            }
-          "
-        >
-          切换第二个Tab
-        </Button>
-        <Submit @submit="log">提交</Submit>
-      </FormButtonGroup>
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormCollapse,
-  FormButtonGroup,
-  Form,
-  FormLayout,
-  Submit,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    FormCollapse,
-    Input,
-  },
-})
-
-const schema = {
-  type: 'object',
-  properties: {
-    collapse: {
-      type: 'void',
-      title: '折叠面板',
-      'x-decorator': 'FormItem',
-      'x-component': 'FormCollapse',
-      'x-component-props': {
-        formCollapse: '{{formCollapse}}',
-      },
-      properties: {
-        tab1: {
-          type: 'void',
-          'x-component': 'FormCollapse.Item',
-          'x-component-props': {
-            title: 'A1',
-          },
-          properties: {
-            aaa: {
-              type: 'string',
-              title: 'AAA',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-        tab2: {
-          type: 'void',
-          'x-component': 'FormCollapse.Item',
-          'x-component-props': {
-            title: 'A2',
-          },
-          properties: {
-            bbb: {
-              type: 'string',
-              title: 'BBB',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-        tab3: {
-          type: 'void',
-          'x-component': 'FormCollapse.Item',
-          'x-component-props': {
-            title: 'A3',
-          },
-          properties: {
-            ccc: {
-              type: 'string',
-              title: 'CCC',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-      },
-    },
-  },
-}
-
-export default {
-  components: {
-    Form,
-    FormButtonGroup,
-    Button,
-    Submit,
-    SchemaField,
-    FormProvider,
-    FormLayout,
-  },
-
-  data() {
-    const form = createForm()
-    const formCollapse = FormCollapse.createFormCollapse()
-
-    return {
-      schema,
-      form,
-      formCollapse,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-collapse/markup-schema.vue b/docs/demos/guide/form-collapse/markup-schema.vue
deleted file mode 100644
index 227c367..0000000
--- a/docs/demos/guide/form-collapse/markup-schema.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <Form :form="form" :label-col="6" :wrapper-col="10">
-    <SchemaField>
-      <SchemaVoidField
-        type="void"
-        title="折叠面板"
-        x-decorator="FormItem"
-        x-component="FormCollapse"
-        :x-component-props="{ formCollapse }"
-      >
-        <SchemaVoidField
-          type="void"
-          name="tab1"
-          x-component="FormCollapse.Item"
-          :x-component-props="{ title: 'A1' }"
-        >
-          <SchemaStringField
-            name="aaa"
-            x-decorator="FormItem"
-            title="AAA"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          name="tab2"
-          x-component="FormCollapse.Item"
-          :x-component-props="{ title: 'A2' }"
-        >
-          <SchemaStringField
-            name="bbb"
-            x-decorator="FormItem"
-            title="BBB"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          name="tab3"
-          x-component="FormCollapse.Item"
-          :x-component-props="{ title: 'A3' }"
-        >
-          <SchemaStringField
-            name="ccc"
-            x-decorator="FormItem"
-            title="CCC"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-      </SchemaVoidField>
-    </SchemaField>
-    <FormButtonGroup alignFormItem>
-      <Button
-        @click="
-          () => {
-            form.query('tab3').take((field) => {
-              field.visible = !field.visible
-            })
-          }
-        "
-      >
-        显示/隐藏最后一个Tab
-      </Button>
-      <Button
-        @click="
-          () => {
-            formCollapse.toggleActiveKey('tab2')
-          }
-        "
-      >
-        切换第二个Tab
-      </Button>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormCollapse,
-  FormButtonGroup,
-  Submit,
-  Input,
-  Form,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    FormCollapse,
-    Input,
-  },
-})
-
-export default {
-  components: {
-    Form,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formCollapse = FormCollapse.createFormCollapse()
-
-    return {
-      form,
-      formCollapse,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-dialog/json-schema.vue b/docs/demos/guide/form-dialog/json-schema.vue
deleted file mode 100644
index 4145c50..0000000
--- a/docs/demos/guide/form-dialog/json-schema.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDialog,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { createSchemaField } from '@formily/vue'
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 弹框表单组件
-const DialogForm = {
-  data() {
-    const schema = {
-      type: 'object',
-      properties: {
-        aaa: {
-          type: 'string',
-          title: '输入框1',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        bbb: {
-          type: 'string',
-          title: '输入框2',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ccc: {
-          type: 'string',
-          title: '输入框3',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ddd: {
-          type: 'string',
-          title: '输入框4',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    }
-    return {
-      schema,
-    }
-  },
-  render(h) {
-    return (
-      <FormLayout labelCol={6} wrapperCol={10}>
-        <SchemaField schema={this.schema} />
-        <FormDialog.Footer>
-          <span style={{ marginLeft: '4px' }}>扩展文案</span>
-        </FormDialog.Footer>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', DialogForm)
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
-        })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-dialog/markup-schema.vue b/docs/demos/guide/form-dialog/markup-schema.vue
deleted file mode 100644
index 5c95a4a..0000000
--- a/docs/demos/guide/form-dialog/markup-schema.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <FormDialogPortal :id="portalId">
-    <Button @click="handleOpen">点击打开表单</Button>
-  </FormDialogPortal>
-</template>
-
-<script>
-import {
-  FormDialog,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField, SchemaStringField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 弹框表单组件
-const DialogForm = {
-  props: ['form'],
-  inject: ['foo'],
-  render() {
-    const form = this.form
-    console.log(this.foo)
-    return (
-      <FormLayout labelCol={6} wrapperCol={10}>
-        <SchemaField>
-          <SchemaStringField
-            name="aaa"
-            required
-            title="输入框1"
-            x-decorator="FormItem"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="bbb"
-            required
-            title="输入框2"
-            x-decorator="FormItem"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="ccc"
-            required
-            title="输入框3"
-            x-decorator="FormItem"
-            x-component="Input"
-          />
-          <SchemaStringField
-            name="ddd"
-            required
-            title="输入框4"
-            x-decorator="FormItem"
-            x-component="Input"
-          />
-        </SchemaField>
-        <FormDialog.Footer>
-          <span style={{ marginLeft: '4px' }}>扩展文案: {form.values.aaa}</span>
-        </FormDialog.Footer>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button, FormDialogPortal: FormDialog.Portal },
-  data() {
-    return {
-      portalId: '可以传，也可以不传的ID，默认是form-dialog',
-    }
-  },
-  provide: {
-    foo: '自定义上下文可以直接传到弹窗内部，只需要ID一致即可',
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', this.portalId, DialogForm)
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
-        })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-dialog/template.vue b/docs/demos/guide/form-dialog/template.vue
deleted file mode 100644
index f31c546..0000000
--- a/docs/demos/guide/form-dialog/template.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDialog,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { Field } from '@formily/vue'
-
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', () => (
-        <FormLayout labelCol={6} wrapperCol={10}>
-          <Field
-            name="aaa"
-            required
-            title="输入框1"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="bbb"
-            required
-            title="输入框2"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ccc"
-            required
-            title="输入框3"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ddd"
-            required
-            title="输入框4"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <FormDialog.Footer>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDialog.Footer>
-        </FormLayout>
-      ))
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
-        })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-drawer/json-schema.vue b/docs/demos/guide/form-drawer/json-schema.vue
deleted file mode 100644
index 5ae8c3b..0000000
--- a/docs/demos/guide/form-drawer/json-schema.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDrawer,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { createSchemaField } from '@formily/vue'
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 抽屉表单组件
-const DrawerForm = {
-  data() {
-    const schema = {
-      type: 'object',
-      properties: {
-        aaa: {
-          type: 'string',
-          title: '输入框1',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        bbb: {
-          type: 'string',
-          title: '输入框2',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ccc: {
-          type: 'string',
-          title: '输入框3',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ddd: {
-          type: 'string',
-          title: '输入框4',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    }
-    return {
-      schema,
-    }
-  },
-  render(h) {
-    return (
-      <FormLayout labelCol={6} wrapperCol={10}>
-        <SchemaField schema={this.schema} />
-        <FormDrawer.Footer>
-          <span style={{ marginLeft: '4px' }}>扩展文案</span>
-        </FormDrawer.Footer>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', DrawerForm)
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-drawer/markup-schema.vue b/docs/demos/guide/form-drawer/markup-schema.vue
deleted file mode 100644
index 8e9d5b4..0000000
--- a/docs/demos/guide/form-drawer/markup-schema.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDrawer,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 抽屉表单组件
-const DrawerForm = {
-  props: ['form'],
-  data() {
-    const schema = {
-      type: 'object',
-      properties: {
-        aaa: {
-          type: 'string',
-          title: '输入框1',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        bbb: {
-          type: 'string',
-          title: '输入框2',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ccc: {
-          type: 'string',
-          title: '输入框3',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ddd: {
-          type: 'string',
-          title: '输入框4',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    }
-    return {
-      schema,
-    }
-  },
-  render() {
-    return (
-      <FormLayout labelCol={6} wrapperCol={10}>
-        <SchemaField schema={this.schema} />
-        <FormDrawer.Footer>
-          <span style={{ marginLeft: '4px' }}>扩展文案</span>
-        </FormDrawer.Footer>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', DrawerForm)
-        .forOpen((props, next) => {
-          setTimeout(() => {
-            next()
-          }, 1000)
-        })
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then(console.log)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-drawer/template.vue b/docs/demos/guide/form-drawer/template.vue
deleted file mode 100644
index 323f47c..0000000
--- a/docs/demos/guide/form-drawer/template.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDrawer,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import { Field } from '@formily/vue'
-
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', () => (
-        <FormLayout labelCol={6} wrapperCol={10}>
-          <Field
-            name="aaa"
-            required
-            title="输入框1"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="bbb"
-            required
-            title="输入框2"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ccc"
-            required
-            title="输入框3"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ddd"
-            required
-            title="输入框4"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <FormDrawer.Footer>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDrawer.Footer>
-        </FormLayout>
-      ))
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-grid/json-schema.vue b/docs/demos/guide/form-grid/json-schema.vue
deleted file mode 100644
index 965e4ec..0000000
--- a/docs/demos/guide/form-grid/json-schema.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Input, Submit, FormGrid } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    grid: {
-      type: 'void',
-      'x-component': 'FormGrid',
-      'x-component-props': {
-        minColumns: [4, 6, 10],
-      },
-      properties: {
-        aaa: {
-          type: 'string',
-          title: 'AAA',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        bbb: {
-          type: 'string',
-          title: 'BBB',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ccc: {
-          type: 'string',
-          title: 'CCC',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ddd: {
-          type: 'string',
-          title: 'DDD',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        eee: {
-          type: 'string',
-          title: 'EEE',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        fff: {
-          type: 'string',
-          title: 'FFF',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-        ggg: {
-          type: 'string',
-          title: 'GGG',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    FormGrid,
-  },
-})
-
-export default {
-  components: { FormProvider, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/form-grid/markup-schema.vue b/docs/demos/guide/form-grid/markup-schema.vue
deleted file mode 100644
index 4e2ed44..0000000
--- a/docs/demos/guide/form-grid/markup-schema.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField
-        x-component="FormGrid"
-        :x-component-props="{
-          maxColumns: 3,
-          minColumns: 2,
-        }"
-      >
-        <SchemaStringField
-          name="aaa"
-          title="aaa"
-          x-decorator="FormItem"
-          :x-decorator-props="{ gridSpan: 2 }"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="bbb"
-          title="bbb"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="ccc"
-          title="ccc"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="ddd"
-          title="ddd"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="eee"
-          title="eee"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="fff"
-          title="fff"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-        <SchemaStringField
-          name="ggg"
-          title="ggg"
-          x-decorator="FormItem"
-          x-component="Input"
-        />
-      </SchemaVoidField>
-    </SchemaField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Input, Submit, FormGrid } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    FormGrid,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-grid/native.vue b/docs/demos/guide/form-grid/native.vue
deleted file mode 100644
index 182b6da..0000000
--- a/docs/demos/guide/form-grid/native.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div>
-    <p>maxColumns 3 + minColumns 2</p>
-    <FormGrid :maxColumns="3" :minColumns="2" :columnGap="4">
-      <FormGridColumn :gridSpan="4">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>maxColumns 3</p>
-    <FormGrid :maxColumns="3" :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>minColumns 2</p>
-    <FormGrid :minColumns="2" :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>Null</p>
-    <FormGrid :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>minWidth 150 +maxColumns 3</p>
-    <FormGrid :minWidth="150" :maxColumns="3" :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>maxWidth 120+minColumns 2</p>
-    <FormGrid :maxWidth="120" :minColumns="2" :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>3</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>4</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>5</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>6</Cell>
-      </FormGridColumn>
-    </FormGrid>
-    <p>maxWidth 120 + gridSpan -1</p>
-    <FormGrid :maxWidth="120" :columnGap="4">
-      <FormGridColumn :gridSpan="2">
-        <Cell>1</Cell>
-      </FormGridColumn>
-      <FormGridColumn>
-        <Cell>2</Cell>
-      </FormGridColumn>
-      <FormGridColumn :gridSpan="-1">
-        <Cell>3</Cell>
-      </FormGridColumn>
-    </FormGrid>
-  </div>
-</template>
-
-<script>
-import { FormGrid } from '@formily/element-plus'
-
-const Cell = {
-  functional: true,
-  render(h, context) {
-    return h(
-      'div',
-      {
-        style: {
-          backgroundColor: '#AAA',
-          color: '#FFF',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-          padding: '0 10px',
-        },
-      },
-      context.children
-    )
-  },
-}
-
-export default {
-  components: { FormGrid, FormGridColumn: FormGrid.GridColumn, Cell },
-}
-</script>
diff --git a/docs/demos/guide/form-item/bordered-none.vue b/docs/demos/guide/form-item/bordered-none.vue
deleted file mode 100644
index 033d6f6..0000000
--- a/docs/demos/guide/form-item/bordered-none.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="Input"
-        x-decorator="FormItem"
-        x-component="Input"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-      <SchemaStringField
-        name="Select"
-        title="Select"
-        x-decorator="FormItem"
-        x-component="Select"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-      <SchemaStringField
-        name="Cascader"
-        title="Cascader"
-        x-decorator="FormItem"
-        x-component="Cascader"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-      <SchemaStringField
-        name="DatePicker"
-        title="DatePicker"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-      <SchemaStringField
-        name="InputNumber"
-        title="InputNumber"
-        x-decorator="FormItem"
-        x-component="InputNumber"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-      <SchemaBooleanField
-        name="Switch"
-        title="Switch"
-        x-decorator="FormItem"
-        x-component="Switch"
-        required
-        :x-decorator-props="{
-          bordered: false,
-        }"
-      />
-    </SchemaField>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Cascader,
-  DatePicker,
-  Switch,
-  InputNumber,
-} from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/common.vue b/docs/demos/guide/form-item/common.vue
deleted file mode 100644
index c9c73de..0000000
--- a/docs/demos/guide/form-item/common.vue
+++ /dev/null
@@ -1,449 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField x-component="Title" x-content="label为空时的展示: " />
-      <SchemaStringField
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-        }"
-      />
-      <SchemaStringField
-        title=""
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="冒号: " />
-      <SchemaStringField
-        title="默认"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        title="无冒号(colon=false)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          colon: false,
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="固定宽度设置: " />
-      <SchemaStringField
-        title="固定label宽度(labelWidth)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-        }"
-      />
-      <SchemaStringField
-        title="固定label宽度(labelWidth)溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出"
-        description="描述描述"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          tooltip: '提示提示',
-        }"
-      />
-      <SchemaStringField
-        title="固定label宽度(labelWidth)换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行"
-        description="描述描述"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          labelWrap: true,
-          tooltip: '提示提示',
-        }"
-      />
-      <SchemaStringField
-        title="固定内容宽度(wrapperWidth)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          wrapperWidth: 300,
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="对齐方式设置:" />
-      <SchemaStringField
-        title="label左对齐(labelAlign=left)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          labelAlign: 'left',
-        }"
-      />
-      <SchemaStringField
-        title="label右对齐(labelAlign=right默认)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          labelAlign: 'right',
-        }"
-      />
-      <SchemaStringField
-        title="内容左对齐(wrapperAlign=left默认)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          wrapperWidth: 240,
-          wrapperAlign: 'left',
-        }"
-      />
-      <SchemaStringField
-        title="内容右对齐(wrapperAlign=right)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          labelWidth: 300,
-          wrapperWidth: 240,
-          wrapperAlign: 'right',
-        }"
-      />
-      <SchemaStringField
-        title="tooltip"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          tooltip: 'tooltip',
-        }"
-      />
-      <SchemaStringField
-        title="tooltip"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          tooltip: 'tooltip',
-          tooltipLayout: 'text',
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="是否撑满: " />
-      <SchemaStringField
-        title="默认不撑满(fullness=false)"
-        x-decorator="FormItem"
-        x-component="Select"
-      />
-      <SchemaStringField
-        title="撑满(fullness=true)"
-        x-decorator="FormItem"
-        x-component="Select"
-        :x-decorator-props="{
-          fullness: true,
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="辅助信息: " />
-      <SchemaStringField
-        title="必填星号"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          asterisk: true,
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      />
-      <SchemaStringField
-        title="前缀"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          addonBefore: 'addonBefore',
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      />
-      <SchemaStringField
-        title="后缀"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          addonAfter: 'addonAfter',
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      />
-      <SchemaStringField
-        title="帮助信息feedbackText"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackText: 'feedbackText',
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      />
-      <SchemaStringField
-        title="额外信息extra"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackText: 'feedbackText',
-          extra: 'extra',
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="表单状态: " />
-      <SchemaStringField
-        title="错误状态(feedbackStatus=error)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-        }"
-      />
-      <SchemaStringField
-        title="警告状态(feedbackStatus=warning)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'warning',
-        }"
-      />
-      <SchemaStringField
-        title="成功状态(feedbackStatus=success)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'success',
-        }"
-      />
-      <SchemaStringField
-        title="加载状态(feedbackStatus=pending)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'pending',
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="反馈信息的布局: " />
-      <SchemaStringField
-        title="紧凑模式required"
-        x-decorator="FormItem"
-        x-component="Input"
-        :required="true"
-        :x-decorator-props="{
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="紧凑模式有feedback(feedbackLayout=terse)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="紧凑模式无feedback(feedbackLayout=terse)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="松散模式(feedbackLayout=loose)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'loose',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'warning',
-          feedbackText: 'warning message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'success',
-          feedbackText: 'success message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="组件的适配情况: " />
-      <SchemaVoidField
-        x-component="FormLayout"
-        :x-component-props="{
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      >
-        <SchemaStringField
-          title="Select"
-          x-decorator="FormItem"
-          x-component="Select"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="DatePicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="DateRangePicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'daterange',
-          }"
-        />
-        <SchemaStringField
-          title="YearPicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'year',
-          }"
-        />
-        <SchemaStringField
-          title="MonthPicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'month',
-          }"
-        />
-        <SchemaStringField
-          title="TimePicker"
-          x-decorator="FormItem"
-          x-component="TimePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="InputNumber"
-          x-decorator="FormItem"
-          x-component="InputNumber"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="Cascader"
-          x-decorator="FormItem"
-          x-component="Cascader"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-      </SchemaVoidField>
-    </SchemaField>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import {
-  FormItem,
-  InputNumber,
-  Input,
-  Cascader,
-  Select,
-  DatePicker,
-  FormLayout,
-  TimePicker,
-} from '@formily/element-plus'
-
-const SuccessIcon = {
-  functional: true,
-  render(h) {
-    return h('i', {
-      class: 'el-icon-circle-check',
-      style: { color: '#8AE65C' },
-    })
-  },
-}
-
-const Title = {
-  functional: true,
-  render(h, context) {
-    return h('p', context.data, context.children)
-  },
-}
-
-const fields = createSchemaField({
-  components: {
-    Title,
-    FormItem,
-    InputNumber,
-    Input,
-    Cascader,
-    Select,
-    DatePicker,
-    FormLayout,
-    TimePicker,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-      SuccessIcon,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/feedback.vue b/docs/demos/guide/form-item/feedback.vue
deleted file mode 100644
index ff61946..0000000
--- a/docs/demos/guide/form-item/feedback.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField x-component="Title" x-content="表单状态: " />
-      <SchemaStringField
-        title="错误状态(feedbackStatus=error)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-        }"
-      />
-      <SchemaStringField
-        title="警告状态(feedbackStatus=warning)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'warning',
-        }"
-      />
-      <SchemaStringField
-        title="成功状态(feedbackStatus=success)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'success',
-        }"
-      />
-      <SchemaStringField
-        title="加载状态(feedbackStatus=pending)"
-        x-decorator="FormItem"
-        x-component="Input"
-        description="description"
-        :x-decorator-props="{
-          feedbackStatus: 'pending',
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="反馈信息的布局: " />
-      <SchemaStringField
-        title="紧凑模式required"
-        x-decorator="FormItem"
-        x-component="Input"
-        :required="true"
-        :x-decorator-props="{
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="紧凑模式有feedback(feedbackLayout=terse)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="紧凑模式无feedback(feedbackLayout=terse)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackLayout: 'terse',
-        }"
-      />
-      <SchemaStringField
-        title="松散模式(feedbackLayout=loose)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'loose',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'warning',
-          feedbackText: 'warning message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'error',
-          feedbackText: 'error message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaStringField
-        title="弹出模式(feedbackLayout=popover)"
-        x-decorator="FormItem"
-        x-component="Input"
-        :x-decorator-props="{
-          feedbackStatus: 'success',
-          feedbackText: 'success message',
-          feedbackLayout: 'popover',
-        }"
-      />
-      <SchemaVoidField x-component="Title" x-content="组件的适配情况: " />
-      <SchemaVoidField
-        x-component="FormLayout"
-        :x-component-props="{
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      >
-        <SchemaStringField
-          title="Select"
-          x-decorator="FormItem"
-          x-component="Select"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="DatePicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="DateRangePicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'daterange',
-          }"
-        />
-        <SchemaStringField
-          title="YearPicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'year',
-          }"
-        />
-        <SchemaStringField
-          title="MonthPicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-          :x-component-props="{
-            type: 'month',
-          }"
-        />
-        <SchemaStringField
-          title="TimePicker"
-          x-decorator="FormItem"
-          x-component="TimePicker"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="InputNumber"
-          x-decorator="FormItem"
-          x-component="InputNumber"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-        <SchemaStringField
-          title="Cascader"
-          x-decorator="FormItem"
-          x-component="Cascader"
-          :x-decorator-props="{
-            feedbackStatus: 'success',
-            feedbackIcon: SuccessIcon,
-          }"
-        />
-      </SchemaVoidField>
-    </SchemaField>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import {
-  FormItem,
-  InputNumber,
-  Input,
-  Cascader,
-  Select,
-  DatePicker,
-  FormLayout,
-  TimePicker,
-} from '@formily/element-plus'
-
-const SuccessIcon = {
-  functional: true,
-  render(h) {
-    return h('i', {
-      class: 'el-icon-circle-check',
-      style: { color: '#8AE65C' },
-    })
-  },
-}
-
-const Title = {
-  functional: true,
-  render(h, context) {
-    return h('p', context.data, context.children)
-  },
-}
-
-const fields = createSchemaField({
-  components: {
-    Title,
-    FormItem,
-    InputNumber,
-    Input,
-    Cascader,
-    Select,
-    DatePicker,
-    FormLayout,
-    TimePicker,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-      SuccessIcon,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/inset.vue b/docs/demos/guide/form-item/inset.vue
deleted file mode 100644
index 9f95c1c..0000000
--- a/docs/demos/guide/form-item/inset.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="Input"
-        x-decorator="FormItem"
-        x-component="Input"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-      <SchemaStringField
-        name="Select"
-        title="Select"
-        x-decorator="FormItem"
-        x-component="Select"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-      <SchemaStringField
-        name="Cascader"
-        title="Cascader"
-        x-decorator="FormItem"
-        x-component="Cascader"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-      <SchemaStringField
-        name="DatePicker"
-        title="DatePicker"
-        x-decorator="FormItem"
-        x-component="DatePicker"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-      <SchemaStringField
-        name="InputNumber"
-        title="InputNumber"
-        x-decorator="FormItem"
-        x-component="InputNumber"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-      <SchemaBooleanField
-        name="Switch"
-        title="Switch"
-        x-decorator="FormItem"
-        x-component="Switch"
-        required
-        :x-decorator-props="{
-          inset: true,
-        }"
-      />
-    </SchemaField>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Cascader,
-  DatePicker,
-  Switch,
-  InputNumber,
-} from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/json-schema.vue b/docs/demos/guide/form-item/json-schema.vue
deleted file mode 100644
index 2398e04..0000000
--- a/docs/demos/guide/form-item/json-schema.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Input, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: '输入框',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/markup-schema.vue b/docs/demos/guide/form-item/markup-schema.vue
deleted file mode 100644
index ffb153c..0000000
--- a/docs/demos/guide/form-item/markup-schema.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-        required
-      />
-    </SchemaField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Input, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/size.vue b/docs/demos/guide/form-item/size.vue
deleted file mode 100644
index e39c3ab..0000000
--- a/docs/demos/guide/form-item/size.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="size"
-        title="Radio.Group"
-        x-decorator="FormItem"
-        x-component="Radio.Group"
-        :enum="[
-          { value: 'small', label: 'Small' },
-          { value: 'default', label: 'Default' },
-          { value: 'large', label: 'Large' },
-        ]"
-      />
-      <SchemaVoidField name="sizeWrap" x-component="Div">
-        <SchemaStringField
-          name="input"
-          title="Input"
-          x-decorator="FormItem"
-          x-component="Input"
-          required
-        />
-        <SchemaStringField
-          name="select1"
-          title="Multiple Select"
-          x-decorator="FormItem"
-          x-component="Select"
-          :enum="[
-            {
-              label: '选项1',
-              value: 1,
-            },
-            {
-              label: '选项2',
-              value: 2,
-            },
-          ]"
-          :x-component-props="{
-            multiple: true,
-            placeholder: '请选择',
-          }"
-          required
-        />
-        <SchemaStringField
-          name="select2"
-          title="Select"
-          x-decorator="FormItem"
-          x-component="Select"
-          :enum="[
-            {
-              label: '选项1',
-              value: 1,
-            },
-            {
-              label: '选项2',
-              value: 2,
-            },
-          ]"
-          :x-component-props="{
-            placeholder: '请选择',
-          }"
-          required
-        />
-        <SchemaStringField
-          name="Cascader"
-          title="Cascader"
-          x-decorator="FormItem"
-          x-component="Cascader"
-          required
-        />
-        <SchemaStringField
-          name="DatePicker"
-          title="DatePicker"
-          x-decorator="FormItem"
-          x-component="DatePicker"
-          required
-        />
-        <SchemaStringField
-          name="InputNumber"
-          title="InputNumber"
-          x-decorator="FormItem"
-          x-component="InputNumber"
-          required
-        />
-        <SchemaBooleanField
-          name="Switch"
-          title="Switch"
-          x-decorator="FormItem"
-          x-component="Switch"
-          required
-        />
-      </SchemaVoidField>
-    </SchemaField>
-  </Form>
-</template>
-
-<script>
-import { createForm, onFieldChange } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Cascader,
-  DatePicker,
-  Switch,
-  InputNumber,
-  Radio,
-} from '@formily/element-plus'
-
-const Div = {
-  functional: true,
-  render(h, context) {
-    return h('div', context.data, context.children)
-  },
-}
-
-const form = createForm({
-  values: {
-    size: 'default',
-  },
-  effects: () => {
-    onFieldChange('size', ['value'], (field, form) => {
-      form.setFieldState('sizeWrap.*', (state) => {
-        if (state.decorator[1]) {
-          state.decorator[1].size = field.value
-        }
-      })
-    })
-  },
-})
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-    Radio,
-    Div,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-item/template.vue b/docs/demos/guide/form-item/template.vue
deleted file mode 100644
index dd741be..0000000
--- a/docs/demos/guide/form-item/template.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <Form :form="form">
-    <Field
-      name="input"
-      title="输入框"
-      :decorator="[FormItem]"
-      :component="[Input]"
-      required
-    />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { Field } from '@formily/vue'
-import { Form, FormItem, Input, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { Form, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Input,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-layout/json-schema.vue b/docs/demos/guide/form-layout/json-schema.vue
deleted file mode 100644
index 411bfe5..0000000
--- a/docs/demos/guide/form-layout/json-schema.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import {
-  FormItem,
-  FormLayout,
-  Input,
-  Select,
-  Submit,
-} from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    layout: {
-      type: 'void',
-      'x-component': 'FormLayout',
-      'x-component-props': {
-        labelCol: 6,
-        wrapperCol: 10,
-      },
-      properties: {
-        input: {
-          type: 'string',
-          title: '输入框',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-decorator-props': {
-            tooltip: '123',
-          },
-          'x-component': 'Input',
-        },
-        select: {
-          type: 'string',
-          title: '选择框',
-          required: true,
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-        },
-      },
-    },
-  },
-}
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormLayout,
-    FormItem,
-    Input,
-    Select,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-layout/markup-schema.vue b/docs/demos/guide/form-layout/markup-schema.vue
deleted file mode 100644
index 028b18c..0000000
--- a/docs/demos/guide/form-layout/markup-schema.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField
-        x-component="FormLayout"
-        :x-component-props="{
-          labelCol: 6,
-          wrapperCol: 10,
-        }"
-      >
-        <SchemaStringField
-          name="input"
-          title="输入框"
-          x-decorator="FormItem"
-          :x-decorator-props="{
-            tooltip: '123',
-          }"
-          x-component="Input"
-          :required="true"
-        />
-        <SchemaStringField
-          name="select"
-          title="选择框"
-          x-decorator="FormItem"
-          x-component="Select"
-          :required="true"
-        />
-      </SchemaVoidField>
-    </SchemaField>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormLayout, FormItem, Input, Select } from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: { FormLayout, FormItem, Input, Select },
-})
-
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-layout/template.vue b/docs/demos/guide/form-layout/template.vue
deleted file mode 100644
index ee8356e..0000000
--- a/docs/demos/guide/form-layout/template.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :labelCol="6" :wrapperCol="10">
-      <Field
-        name="input"
-        title="输入框"
-        :decorator="[
-          FormItem,
-          {
-            tooltip: '123',
-          },
-        ]"
-        :component="[Input]"
-        :required="true"
-      />
-      <Field
-        name="select"
-        title="选择框"
-        :decorator="[FormItem]"
-        :component="[Select]"
-        :required="true"
-      />
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormLayout, FormItem, Input, Select } from '@formily/element-plus'
-
-export default {
-  components: { FormProvider, Field, FormLayout },
-  data() {
-    const form = createForm()
-    return {
-      FormLayout,
-      FormItem,
-      Input,
-      Select,
-      form,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/form-step/json-schema.vue b/docs/demos/guide/form-step/json-schema.vue
deleted file mode 100644
index be02bb1..0000000
--- a/docs/demos/guide/form-step/json-schema.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" :scope="{ formStep }" />
-    <FormConsumer>
-      <template #default>
-        <FormButtonGroup>
-          <Button
-            :disabled="!formStep.allowBack"
-            @click="
-              () => {
-                formStep.back()
-              }
-            "
-          >
-            上一步
-          </Button>
-          <Button
-            :disabled="!formStep.allowNext"
-            @click="
-              () => {
-                formStep.next()
-              }
-            "
-          >
-            下一步
-          </Button>
-          <Submit :disabled="formStep.allowNext" @submit="log">提交</Submit>
-        </FormButtonGroup>
-      </template>
-    </FormConsumer>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue'
-import {
-  FormItem,
-  FormStep,
-  FormButtonGroup,
-  Submit,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    FormStep,
-    Input,
-  },
-})
-
-const schema = {
-  type: 'object',
-  properties: {
-    collapse: {
-      type: 'void',
-      'x-component': 'FormStep',
-      'x-component-props': {
-        formStep: '{{formStep}}',
-      },
-      properties: {
-        step1: {
-          type: 'void',
-          'x-component': 'FormStep.StepPane',
-          'x-component-props': {
-            title: '第一步',
-          },
-          properties: {
-            aaa: {
-              type: 'string',
-              title: 'AAA',
-              required: true,
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-            },
-          },
-        },
-        step2: {
-          type: 'void',
-          'x-component': 'FormStep.StepPane',
-          'x-component-props': {
-            title: '第二步',
-          },
-          properties: {
-            bbb: {
-              type: 'string',
-              title: 'AAA',
-              required: true,
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-            },
-          },
-        },
-        step3: {
-          type: 'void',
-          'x-component': 'FormStep.StepPane',
-          'x-component-props': {
-            title: '第三步',
-          },
-          properties: {
-            ccc: {
-              type: 'string',
-              title: 'AAA',
-              required: true,
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-            },
-          },
-        },
-      },
-    },
-  },
-}
-
-export default {
-  components: {
-    FormProvider,
-    FormConsumer,
-    FormButtonGroup,
-    Button,
-    Submit,
-    SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formStep = FormStep.createFormStep()
-    return {
-      schema,
-      form,
-      formStep,
-    }
-  },
-  methods: {
-    log() {
-      this.formStep.submit(console.log)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-step/markup-schema.vue b/docs/demos/guide/form-step/markup-schema.vue
deleted file mode 100644
index 4de618c..0000000
--- a/docs/demos/guide/form-step/markup-schema.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField x-component="FormStep" :x-component-props="{ formStep }">
-        <SchemaVoidField
-          x-component="FormStep.StepPane"
-          :x-component-props="{ title: '第一步' }"
-        >
-          <SchemaStringField
-            name="aaa"
-            x-decorator="FormItem"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          x-component="FormStep.StepPane"
-          :x-component-props="{ title: '第二步' }"
-        >
-          <SchemaStringField
-            name="bbb"
-            x-decorator="FormItem"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          type="void"
-          x-component="FormStep.StepPane"
-          :x-component-props="{ title: '第三步' }"
-        >
-          <SchemaStringField
-            name="ccc"
-            x-decorator="FormItem"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-      </SchemaVoidField>
-    </SchemaField>
-    <FormConsumer>
-      <template #default>
-        <FormButtonGroup>
-          <Button
-            :disabled="!formStep.allowBack"
-            @click="
-              () => {
-                formStep.back()
-              }
-            "
-          >
-            上一步
-          </Button>
-          <Button
-            :disabled="!formStep.allowNext"
-            @click="
-              () => {
-                formStep.next()
-              }
-            "
-          >
-            下一步
-          </Button>
-          <Submit :disabled="formStep.allowNext" @submit="log">提交</Submit>
-        </FormButtonGroup>
-      </template>
-    </FormConsumer>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormStep,
-  FormButtonGroup,
-  Submit,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-import Template from '../editable/template.vue'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    FormStep,
-    Input,
-  },
-})
-const formStep = FormStep.createFormStep()
-
-export default {
-  components: {
-    FormConsumer,
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    Template,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-      formStep,
-    }
-  },
-  methods: {
-    log() {
-      this.formStep.submit(console.log)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-tab/json-schema.vue b/docs/demos/guide/form-tab/json-schema.vue
deleted file mode 100644
index 086392e..0000000
--- a/docs/demos/guide/form-tab/json-schema.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" :scope="{ formTab }" />
-    <FormButtonGroup alignFormItem>
-      <Button
-        @click="
-          () => {
-            form.query('tab3').take((field) => {
-              field.visible = !field.visible
-            })
-          }
-        "
-      >
-        显示/隐藏最后一个Tab
-      </Button>
-      <Button
-        @click="
-          () => {
-            formTab.setActiveKey('tab2')
-          }
-        "
-      >
-        切换第二个Tab
-      </Button>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormTab,
-  FormButtonGroup,
-  Submit,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    FormTab,
-    Input,
-  },
-})
-
-const schema = {
-  type: 'object',
-  properties: {
-    collapse: {
-      type: 'void',
-      'x-component': 'FormTab',
-      'x-component-props': {
-        formTab: '{{formTab}}',
-      },
-      properties: {
-        tab1: {
-          type: 'void',
-          'x-component': 'FormTab.TabPane',
-          'x-component-props': {
-            label: 'A1',
-          },
-          properties: {
-            aaa: {
-              type: 'string',
-              title: 'AAA',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-        tab2: {
-          type: 'void',
-          'x-component': 'FormTab.TabPane',
-          'x-component-props': {
-            label: 'A2',
-          },
-          properties: {
-            bbb: {
-              type: 'string',
-              title: 'BBB',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-        tab3: {
-          type: 'void',
-          'x-component': 'FormTab.TabPane',
-          'x-component-props': {
-            label: 'A3',
-          },
-          properties: {
-            ccc: {
-              type: 'string',
-              title: 'CCC',
-              'x-decorator': 'FormItem',
-              required: true,
-              'x-component': 'Input',
-            },
-          },
-        },
-      },
-    },
-  },
-}
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formTab = FormTab.createFormTab()
-
-    return {
-      schema,
-      form,
-      formTab,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form-tab/markup-schema.vue b/docs/demos/guide/form-tab/markup-schema.vue
deleted file mode 100644
index c8d82d0..0000000
--- a/docs/demos/guide/form-tab/markup-schema.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaVoidField
-        type="void"
-        x-component="FormTab"
-        :x-component-props="{ formTab }"
-      >
-        <SchemaVoidField
-          type="void"
-          name="tab1"
-          x-component="FormTab.TabPane"
-          :x-component-props="{ label: 'A1' }"
-        >
-          <SchemaStringField
-            name="aaa"
-            x-decorator="FormItem"
-            title="AAA"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          name="tab2"
-          x-component="FormTab.TabPane"
-          :x-component-props="{ label: 'A2' }"
-        >
-          <SchemaStringField
-            name="bbb"
-            x-decorator="FormItem"
-            title="BBB"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-        <SchemaVoidField
-          name="tab3"
-          x-component="FormTab.TabPane"
-          :x-component-props="{ label: 'A3' }"
-        >
-          <SchemaStringField
-            name="ccc"
-            x-decorator="FormItem"
-            title="CCC"
-            required
-            x-component="Input"
-          />
-        </SchemaVoidField>
-      </SchemaVoidField>
-    </SchemaField>
-    <FormButtonGroup alignFormItem>
-      <Button
-        @click="
-          () => {
-            form.query('tab3').take((field) => {
-              field.visible = !field.visible
-            })
-          }
-        "
-      >
-        显示/隐藏最后一个Tab
-      </Button>
-      <Button
-        @click="
-          () => {
-            formTab.setActiveKey('tab2')
-          }
-        "
-      >
-        切换第二个Tab
-      </Button>
-      <Submit @submit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormItem,
-  FormTab,
-  FormButtonGroup,
-  Submit,
-  Input,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    FormTab,
-    Input,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formTab = FormTab.createFormTab()
-
-    return {
-      form,
-      formTab,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/docs/demos/guide/form.vue b/docs/demos/guide/form.vue
deleted file mode 100644
index 086942d..0000000
--- a/docs/demos/guide/form.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <Form
-    :form="form"
-    :label-col="6"
-    :wrapper-col="10"
-    @autoSubmit="log"
-    @autoSubmitFailed="log"
-  >
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-        :required="true"
-      />
-      <SchemaStringField
-        name="select"
-        title="选择框"
-        x-decorator="FormItem"
-        x-component="Select"
-        :enum="[
-          {
-            label: '选项1',
-            value: 1,
-          },
-          {
-            label: '选项2',
-            value: 2,
-          },
-        ]"
-        :required="true"
-      />
-    </SchemaField>
-    <FormButtonGroup alignFormItem>
-      <Submit>提交</Submit>
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  Input,
-  Select,
-  FormItem,
-  FormButtonGroup,
-  Submit,
-} from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({ components: { Input, Select, FormItem } })
-
-export default {
-  components: { FormButtonGroup, Submit, Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input-number/json-schema.vue b/docs/demos/guide/input-number/json-schema.vue
deleted file mode 100644
index 3c85d32..0000000
--- a/docs/demos/guide/input-number/json-schema.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, InputNumber, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    inputNumber: {
-      type: 'number',
-      title: '输入框',
-      'x-decorator': 'FormItem',
-      'x-component': 'InputNumber',
-      'x-component-props': {
-        style: {
-          width: '240px',
-        },
-      },
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { FormProvider, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input-number/markup-schema.vue b/docs/demos/guide/input-number/markup-schema.vue
deleted file mode 100644
index 7b6d0e2..0000000
--- a/docs/demos/guide/input-number/markup-schema.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="InputNumber"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, InputNumber, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input-number/template.vue b/docs/demos/guide/input-number/template.vue
deleted file mode 100644
index 04182e4..0000000
--- a/docs/demos/guide/input-number/template.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="input"
-      title="输入框"
-      :decorator="[FormItem]"
-      :component="[
-        InputNumber,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, InputNumber, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      InputNumber,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input/json-schema.vue b/docs/demos/guide/input/json-schema.vue
deleted file mode 100644
index 06e8570..0000000
--- a/docs/demos/guide/input/json-schema.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Input, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      type: 'string',
-      title: '输入框',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    textarea: {
-      type: 'string',
-      title: '文本框',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input.TextArea',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input/markup-schema.vue b/docs/demos/guide/input/markup-schema.vue
deleted file mode 100644
index f1256ee..0000000
--- a/docs/demos/guide/input/markup-schema.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        name="textarea"
-        title="文本框"
-        x-decorator="FormItem"
-        x-component="Input.TextArea"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Input, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/input/template.vue b/docs/demos/guide/input/template.vue
deleted file mode 100644
index 4139ca1..0000000
--- a/docs/demos/guide/input/template.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="input"
-      title="输入框"
-      :decorator="[FormItem]"
-      :component="[Input]"
-    />
-    <Field
-      name="textarea"
-      title="文本框"
-      :decorator="[FormItem]"
-      :component="[Input.TextArea]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Input, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Input,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/password/json-schema.vue b/docs/demos/guide/password/json-schema.vue
deleted file mode 100644
index 5767211..0000000
--- a/docs/demos/guide/password/json-schema.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Password, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    password: {
-      type: 'string',
-      title: '密码框',
-      'x-decorator': 'FormItem',
-      'x-component': 'Password',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Password,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/password/markup-schema.vue b/docs/demos/guide/password/markup-schema.vue
deleted file mode 100644
index 6f3fc51..0000000
--- a/docs/demos/guide/password/markup-schema.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="密码框"
-        x-decorator="FormItem"
-        x-component="Password"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Password, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Password,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/password/template.vue b/docs/demos/guide/password/template.vue
deleted file mode 100644
index df0f6ef..0000000
--- a/docs/demos/guide/password/template.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="input"
-      title="密码框"
-      :decorator="[FormItem]"
-      :component="[Password]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Password, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Password,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/preview-text/base.vue b/docs/demos/guide/preview-text/base.vue
deleted file mode 100644
index 56194cc..0000000
--- a/docs/demos/guide/preview-text/base.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <FormLayout :labelCol="6" :wrapperCol="10">
-    <FormProvider :form="form">
-      <SchemaField>
-        <SchemaStringField
-          x-decorator="FormItem"
-          title="文本预览"
-          x-component="PreviewText.Input"
-          default="Hello world"
-        />
-        <SchemaStringField
-          x-decorator="FormItem"
-          title="选择项预览"
-          x-component="PreviewText.Select"
-          :x-component-props="{
-            multiple: true,
-          }"
-          :default="['123', '222']"
-          :enum="[
-            { label: 'A111', value: '123' },
-            {
-              label: 'A222',
-              value: '222',
-            },
-          ]"
-        />
-        <SchemaStringField
-          x-decorator="FormItem"
-          title="日期预览"
-          x-component="PreviewText.DatePicker"
-          default="2020-11-23 22:15:20"
-        />
-        <SchemaStringField
-          x-decorator="FormItem"
-          title="时间预览"
-          x-component="PreviewText.TimePicker"
-          :default="['2020-11-23 22:15:20', '2020-11-23 23:15:20']"
-        />
-        <SchemaStringField
-          x-decorator="FormItem"
-          title="Cascader预览"
-          x-component="PreviewText.Cascader"
-          :default="['hangzhou', 'yuhang']"
-          :enum="[
-            { label: '杭州', value: 'hangzhou' },
-            { label: '余杭', value: 'yuhang' },
-          ]"
-        />
-      </SchemaField>
-    </FormProvider>
-  </FormLayout>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import { FormLayout, FormItem, PreviewText } from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    PreviewText,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(v) {
-      console.log(v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/preview-text/extend.vue b/docs/demos/guide/preview-text/extend.vue
deleted file mode 100644
index e3ef203..0000000
--- a/docs/demos/guide/preview-text/extend.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <Form
-    :labelCol="6"
-    :wrapperCol="10"
-    :form="form"
-    :previewTextPlaceholder="vnode"
-  >
-    <SchemaField>
-      <SchemaStringField
-        x-decorator="FormItem"
-        title="文本预览"
-        x-component="Input"
-        default="Hello world"
-      />
-      <SchemaStringField
-        x-decorator="FormItem"
-        title="选择项预览"
-        x-component="PreviewText.Select"
-        :x-component-props="{
-          multiple: true,
-        }"
-        :default="['123', '222']"
-        :enum="[
-          { label: 'A111', value: '123' },
-          {
-            label: 'A222',
-            value: '222',
-          },
-        ]"
-      />
-      <SchemaStringField
-        x-decorator="FormItem"
-        title="日期预览"
-        x-component="PreviewText.DatePicker"
-        default="2020-11-23 22:15:20"
-      />
-      <SchemaStringField
-        x-decorator="FormItem"
-        title="日期范围预览"
-        x-component="PreviewText.DatePicker"
-        :default="['2020-11-23 22:15:20', '2020-11-24 22:15:20']"
-      />
-      <SchemaStringField
-        x-decorator="FormItem"
-        title="Cascader预览"
-        x-component="PreviewText.Cascader"
-        :default="['hangzhou', 'yuhang']"
-        :enum="[
-          { label: '杭州', value: 'hangzhou' },
-          { label: '余杭', value: 'yuhang' },
-        ]"
-      />
-    </SchemaField>
-    <FormButtonGroup alignFormItem>
-      <Button
-        @click="
-          () => {
-            form.setState((state) => {
-              state.editable = !state.editable
-            })
-          }
-        "
-        >切换阅读态</Button
-      >
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { h } from '@vue/composition-api'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Input,
-  PreviewText,
-  FormButtonGroup,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    PreviewText,
-  },
-})
-
-export default {
-  components: {
-    Form,
-    FormButtonGroup,
-    Button,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-      vnode: () => h('div', {}, '123'),
-    }
-  },
-
-  mounted() {},
-}
-</script>
diff --git a/docs/demos/guide/radio/json-schema.vue b/docs/demos/guide/radio/json-schema.vue
deleted file mode 100644
index 8a52f09..0000000
--- a/docs/demos/guide/radio/json-schema.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Radio, Submit } from '@formily/element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Radio,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    const schema = {
-      type: 'object',
-      properties: {
-        radio: {
-          type: 'boolean',
-          title: '单选',
-          enum: [
-            {
-              label: '选项1',
-              value: 1,
-            },
-            {
-              label: '选项2',
-              value: 2,
-            },
-          ],
-          'x-decorator': 'FormItem',
-          'x-component': 'Radio.Group',
-          'x-component-props': {
-            optionType: 'button',
-          },
-        },
-      },
-    }
-
-    const form = createForm()
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/radio/markup-schema.vue b/docs/demos/guide/radio/markup-schema.vue
deleted file mode 100644
index 7a9e0ca..0000000
--- a/docs/demos/guide/radio/markup-schema.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="单选"
-        x-decorator="FormItem"
-        x-component="Radio.Group"
-        :enum="[
-          {
-            label: '选项1',
-            value: 1,
-          },
-          {
-            label: '选项2',
-            value: 2,
-          },
-        ]"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Radio, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Radio,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/radio/template.vue b/docs/demos/guide/radio/template.vue
deleted file mode 100644
index 39de9ab..0000000
--- a/docs/demos/guide/radio/template.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="input"
-      title="单选"
-      :decorator="[FormItem]"
-      :component="[Radio.Group]"
-      :dataSource="[
-        {
-          label: '选项1',
-          value: 1,
-        },
-        {
-          label: '选项2',
-          value: 2,
-        },
-      ]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Radio, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Radio,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/reset/base.vue b/docs/demos/guide/reset/base.vue
deleted file mode 100644
index 88d58e6..0000000
--- a/docs/demos/guide/reset/base.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        required
-        name="input1"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        required
-        title="输入框"
-        name="input2"
-        x-decorator="FormItem"
-        x-component="Input"
-        default="123"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Reset>重置</Reset>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Reset,
-  FormButtonGroup,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Reset,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/reset/force.vue b/docs/demos/guide/reset/force.vue
deleted file mode 100644
index 80fecb7..0000000
--- a/docs/demos/guide/reset/force.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        required
-        name="input1"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        required
-        title="输入框"
-        name="input2"
-        x-decorator="FormItem"
-        x-component="Input"
-        default="123"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Reset forceClear>重置</Reset>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Reset,
-  FormButtonGroup,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Reset,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/reset/validate.vue b/docs/demos/guide/reset/validate.vue
deleted file mode 100644
index 6aaf1a4..0000000
--- a/docs/demos/guide/reset/validate.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        required
-        name="input1"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        required
-        title="输入框"
-        name="input2"
-        x-decorator="FormItem"
-        x-component="Input"
-        default="123"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Reset validate forceClear>重置</Reset>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Reset,
-  FormButtonGroup,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Reset,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/json-schema-async.vue b/docs/demos/guide/select/json-schema-async.vue
deleted file mode 100644
index 6c935b1..0000000
--- a/docs/demos/guide/select/json-schema-async.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" :scope="{ useAsyncDataSource, loadData }" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { action } from '@formily/reactive'
-import { Form, FormItem, Select, Submit, Reset } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    linkage: {
-      type: 'string',
-      title: '联动选择框',
-      enum: [
-        {
-          label: '发请求1',
-          value: 1,
-        },
-        {
-          label: '发请求2',
-          value: 2,
-        },
-      ],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        style: 'width: 240px;',
-      },
-    },
-    select: {
-      type: 'string',
-      title: '异步选择框',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        style: 'width: 240px;',
-      },
-      'x-reactions': ['{{useAsyncDataSource(loadData)}}'],
-    },
-  },
-}
-
-const useAsyncDataSource = (service) => (field) => {
-  field.loading = true
-  service(field).then(
-    action.bound((data) => {
-      field.dataSource = data
-      field.loading = false
-    })
-  )
-}
-
-const loadData = async (field) => {
-  const linkage = field.query('linkage').get('value')
-  if (!linkage) return []
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      if (linkage === 1) {
-        resolve([
-          {
-            label: 'AAA',
-            value: 'aaa',
-          },
-          {
-            label: 'BBB',
-            value: 'ccc',
-          },
-        ])
-      } else if (linkage === 2) {
-        resolve([
-          {
-            label: 'CCC',
-            value: 'ccc',
-          },
-          {
-            label: 'DDD',
-            value: 'ddd',
-          },
-        ])
-      }
-    }, 1500)
-  })
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Select,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit, Reset },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    useAsyncDataSource,
-    loadData,
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/json-schema-sync.vue b/docs/demos/guide/select/json-schema-sync.vue
deleted file mode 100644
index a686c53..0000000
--- a/docs/demos/guide/select/json-schema-sync.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Select, Submit, Reset } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    select: {
-      type: 'string',
-      title: '选择框',
-      enum: [
-        {
-          label: '选项1',
-          value: 1,
-        },
-        {
-          label: '选项2',
-          value: 2,
-        },
-      ],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        style: 'width: 240px;',
-      },
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Select,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit, Reset },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/markup-schema-async-search.vue b/docs/demos/guide/select/markup-schema-async-search.vue
deleted file mode 100644
index 7d781fd..0000000
--- a/docs/demos/guide/select/markup-schema-async-search.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="select"
-        title="异步搜索选择框"
-        x-decorator="FormItem"
-        x-component="Select"
-        :x-component-props="{
-          filterable: true,
-          remote: true,
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm, onFieldInit, onFieldReact } from '@formily/core'
-import { action, observable } from '@formily/reactive'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Select, Submit } from '@formily/element-plus'
-
-let timeout
-let currentValue
-
-function fetchData(value, callback) {
-  if (timeout) {
-    clearTimeout(timeout)
-    timeout = null
-  }
-  currentValue = value
-
-  function fake() {
-    callback([
-      {
-        label: 'AAA',
-        value: 'aaa',
-      },
-      {
-        label: 'BBB',
-        value: 'ccc',
-      },
-    ])
-  }
-
-  timeout = setTimeout(fake, 300)
-}
-
-const useAsyncDataSource = (pattern, service) => {
-  const keyword = observable.ref('')
-
-  onFieldInit(pattern, (field) => {
-    field.setComponentProps({
-      remoteMethod: (value) => {
-        keyword.value = value
-      },
-    })
-  })
-
-  onFieldReact(pattern, (field) => {
-    field.loading = true
-    service({ field, keyword: keyword.value }).then(
-      action.bound((data) => {
-        field.dataSource = data
-        field.loading = false
-      })
-    )
-  })
-}
-
-const form = createForm({
-  effects: () => {
-    useAsyncDataSource('select', async ({ keyword }) => {
-      if (!keyword) {
-        return []
-      }
-      return new Promise((resolve) => {
-        fetchData(keyword, resolve)
-      })
-    })
-  },
-})
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Select,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/markup-schema-async.vue b/docs/demos/guide/select/markup-schema-async.vue
deleted file mode 100644
index 2d81641..0000000
--- a/docs/demos/guide/select/markup-schema-async.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField>
-      <SchemaNumberField
-        name="linkage"
-        title="联动选择框"
-        x-decorator="FormItem"
-        x-component="Select"
-        :enum="[
-          { label: '发请求1', value: 1 },
-          { label: '发请求2', value: 2 },
-        ]"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-      <SchemaStringField
-        name="select"
-        title="异步选择框"
-        x-decorator="FormItem"
-        x-component="Select"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-    </SchemaField>
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm, onFieldReact } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { action } from '@formily/reactive'
-import { Form, FormItem, Select, Submit, Reset } from '@formily/element-plus'
-
-const useAsyncDataSource = (pattern, service) => {
-  onFieldReact(pattern, (field) => {
-    field.loading = true
-    service(field).then(
-      action.bound((data) => {
-        field.dataSource = data
-        field.loading = false
-      })
-    )
-  })
-}
-
-const form = createForm({
-  effects: () => {
-    useAsyncDataSource('select', async (field) => {
-      const linkage = field.query('linkage').get('value')
-      if (!linkage) return []
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (linkage === 1) {
-            resolve([
-              {
-                label: 'AAA',
-                value: 'aaa',
-              },
-              {
-                label: 'BBB',
-                value: 'ccc',
-              },
-            ])
-          } else if (linkage === 2) {
-            resolve([
-              {
-                label: 'CCC',
-                value: 'ccc',
-              },
-              {
-                label: 'DDD',
-                value: 'ddd',
-              },
-            ])
-          }
-        }, 1500)
-      })
-    })
-  },
-})
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Select,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit, Reset },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/markup-schema-sync.vue b/docs/demos/guide/select/markup-schema-sync.vue
deleted file mode 100644
index 46ed641..0000000
--- a/docs/demos/guide/select/markup-schema-sync.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="select"
-        title="选择框"
-        x-decorator="FormItem"
-        x-component="Select"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-        :enum="[
-          {
-            label: '选项1',
-            value: 1,
-          },
-          {
-            label: '选项2',
-            value: 2,
-          },
-        ]"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Select, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Select,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/template-async.vue b/docs/demos/guide/select/template-async.vue
deleted file mode 100644
index 4cf0515..0000000
--- a/docs/demos/guide/select/template-async.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <Form :form="form">
-    <Field
-      name="linkage"
-      title="联动选择框"
-      :decorator="[FormItem]"
-      :component="[
-        Select,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-      :dataSource="[
-        { label: '发请求1', value: 1 },
-        { label: '发请求2', value: 2 },
-      ]"
-    />
-    <Field
-      name="select"
-      title="异步选择框"
-      :decorator="[FormItem]"
-      :component="[
-        Select,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-    />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm, onFieldReact } from '@formily/core'
-import { Field } from '@formily/vue'
-import { action } from '@formily/reactive'
-import { Form, FormItem, Select, Submit, Reset } from '@formily/element-plus'
-
-const useAsyncDataSource = (pattern, service) => {
-  onFieldReact(pattern, (field) => {
-    field.loading = true
-    service(field).then(
-      action.bound((data) => {
-        field.dataSource = data
-        field.loading = false
-      })
-    )
-  })
-}
-
-const form = createForm({
-  effects: () => {
-    useAsyncDataSource('select', async (field) => {
-      const linkage = field.query('linkage').get('value')
-      if (!linkage) return []
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          if (linkage === 1) {
-            resolve([
-              {
-                label: 'AAA',
-                value: 'aaa',
-              },
-              {
-                label: 'BBB',
-                value: 'ccc',
-              },
-            ])
-          } else if (linkage === 2) {
-            resolve([
-              {
-                label: 'CCC',
-                value: 'ccc',
-              },
-              {
-                label: 'DDD',
-                value: 'ddd',
-              },
-            ])
-          }
-        }, 1500)
-      })
-    })
-  },
-})
-
-export default {
-  components: { Form, Field, Submit, Reset },
-  data() {
-    return {
-      form,
-      FormItem,
-      Select,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/select/template-sync.vue b/docs/demos/guide/select/template-sync.vue
deleted file mode 100644
index 1a73e6a..0000000
--- a/docs/demos/guide/select/template-sync.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="select"
-      title="选择框"
-      :decorator="[FormItem]"
-      :component="[
-        Select,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-      :dataSource="[
-        {
-          label: '选项1',
-          value: 1,
-        },
-        {
-          label: '选项2',
-          value: 2,
-        },
-      ]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Select, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Select,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/space/json-schema.vue b/docs/demos/guide/space/json-schema.vue
deleted file mode 100644
index 257d5fc..0000000
--- a/docs/demos/guide/space/json-schema.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :labelCol="6" :wrapperCol="16">
-      <SchemaField :schema="schema" />
-      <FormButtonGroup alignFormItem>
-        <Submit onSubmit="log">提交</Submit>
-      </FormButtonGroup>
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import {
-  FormButtonGroup,
-  FormLayout,
-  FormItem,
-  Input,
-  Submit,
-  Space,
-} from '@formily/element-plus'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormLayout,
-    FormItem,
-    Input,
-    Space,
-  },
-})
-
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    FormLayout,
-    SchemaField,
-    Submit,
-  },
-  data() {
-    const schema = {
-      type: 'object',
-      properties: {
-        name: {
-          type: 'void',
-          title: '姓名',
-          'x-decorator': 'FormItem',
-          'x-decorator-props': {
-            asterisk: true,
-            feedbackLayout: 'none',
-          },
-          'x-component': 'Space',
-          properties: {
-            firstName: {
-              type: 'string',
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-              required: true,
-            },
-            lastName: {
-              type: 'string',
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-              required: true,
-            },
-          },
-        },
-        texts: {
-          type: 'void',
-          title: '文本串联',
-          'x-decorator': 'FormItem',
-          'x-decorator-props': {
-            asterisk: true,
-            feedbackLayout: 'none',
-          },
-          'x-component': 'Space',
-          properties: {
-            aa: {
-              type: 'string',
-              'x-decorator': 'FormItem',
-              'x-decorator-props': {
-                addonAfter: '单位',
-              },
-              'x-component': 'Input',
-              required: true,
-            },
-            bb: {
-              type: 'string',
-              'x-decorator': 'FormItem',
-              'x-decorator-props': {
-                addonAfter: '单位',
-              },
-              'x-component': 'Input',
-              required: true,
-            },
-            cc: {
-              type: 'string',
-              'x-decorator': 'FormItem',
-              'x-decorator-props': {
-                addonAfter: '单位',
-              },
-              'x-component': 'Input',
-              required: true,
-            },
-          },
-        },
-
-        textarea: {
-          type: 'string',
-          title: '文本框',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input.TextArea',
-          'x-component-props': {
-            style: {
-              width: 400,
-            },
-          },
-          required: true,
-        },
-      },
-    }
-
-    const form = createForm()
-
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    logs(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/space/markup-schema.vue b/docs/demos/guide/space/markup-schema.vue
deleted file mode 100644
index 69a3744..0000000
--- a/docs/demos/guide/space/markup-schema.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :labelCol="6" :wrapperCol="16">
-      <SchemaField>
-        <SchemaVoidField
-          x-component="FormLayout"
-          :x-component-props="{
-            labelCol: 6,
-            wrapperCol: 10,
-          }"
-        >
-          <SchemaVoidField
-            title="姓名"
-            x-decorator="FormItem"
-            :x-decorator-props="{
-              asterisk: true,
-              feedbackLayout: 'none',
-            }"
-            x-component="Space"
-          >
-            <SchemaStringField
-              name="firstName"
-              x-decorator="FormItem"
-              x-component="Input"
-              :required="true"
-            />
-            <SchemaStringField
-              name="lastName"
-              x-decorator="FormItem"
-              x-component="Input"
-              :required="true"
-            />
-          </SchemaVoidField>
-          <SchemaVoidField
-            title="文本串联"
-            x-decorator="FormItem"
-            :x-decorator-props="{
-              asterisk: true,
-              feedbackLayout: 'none',
-            }"
-            x-component="Space"
-          >
-            <SchemaStringField
-              name="aa"
-              x-decorator="FormItem"
-              x-component="Input"
-              :x-decorator-props="{
-                addonAfter: '单位',
-              }"
-              :required="true"
-            />
-            <SchemaStringField
-              name="bb"
-              x-decorator="FormItem"
-              x-component="Input"
-              :x-decorator-props="{
-                addonAfter: '单位',
-              }"
-              :required="true"
-            />
-            <SchemaStringField
-              name="cc"
-              x-decorator="FormItem"
-              x-component="Input"
-              :x-decorator-props="{
-                addonAfter: '单位',
-              }"
-              :required="true"
-            />
-          </SchemaVoidField>
-          <SchemaStringField
-            name="textarea"
-            title="文本框"
-            x-decorator="FormItem"
-            :required="true"
-            x-component="Input"
-            :x-component-props="{
-              style: {
-                width: 400,
-              },
-              type: 'textarea',
-            }"
-          />
-        </SchemaVoidField>
-      </SchemaField>
-      <FormButtonGroup alignFormItem>
-        <Submit onSubmit="log">提交</Submit>
-      </FormButtonGroup>
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import {
-  FormLayout,
-  FormItem,
-  Input,
-  Space,
-  FormButtonGroup,
-  Submit,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({
-  components: { FormItem, FormLayout, Input, Space },
-})
-
-export default {
-  components: { FormProvider, FormLayout, FormButtonGroup, Submit, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/space/template.vue b/docs/demos/guide/space/template.vue
deleted file mode 100644
index 0babd03..0000000
--- a/docs/demos/guide/space/template.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <FormLayout :labelCol="6" :wrapperCol="16">
-      <VoidField
-        name="name"
-        title="姓名"
-        :decorator="[
-          FormItem,
-          {
-            asterisk: true,
-            feedbackLayout: 'none',
-          },
-        ]"
-        :component="[Space]"
-      >
-        <Field
-          name="firstName"
-          :decorator="[FormItem]"
-          :component="[Input]"
-          required
-        />
-        <Field
-          name="lastName"
-          :decorator="[FormItem]"
-          :component="[Input]"
-          required
-        />
-      </VoidField>
-      <VoidField
-        name="texts"
-        title="文本串联"
-        :decorator="[
-          FormItem,
-          {
-            asterisk: true,
-            feedbackLayout: 'none',
-          },
-        ]"
-        :component="[Space]"
-      >
-        <Field
-          name="aa"
-          :decorator="[
-            FormItem,
-            {
-              addonAfter: '单位',
-            },
-          ]"
-          :component="[Input]"
-          required
-        />
-        <Field
-          name="bb"
-          :decorator="[
-            FormItem,
-            {
-              addonAfter: '单位',
-            },
-          ]"
-          :component="[Input]"
-          required
-        />
-        <Field
-          name="cc"
-          :decorator="[
-            FormItem,
-            {
-              addonAfter: '单位',
-            },
-          ]"
-          :component="[Input]"
-          required
-        />
-      </VoidField>
-      <Field
-        name="textarea"
-        title="文本框"
-        :decorator="[FormItem]"
-        :component="[
-          TextArea,
-          {
-            style: {
-              width: 400,
-            },
-          },
-        ]"
-        required
-      />
-      <FormButtonGroup alignFormItem>
-        <Submit :onSubmit="log">提交</Submit>
-      </FormButtonGroup>
-    </FormLayout>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field, VoidField } from '@formily/vue'
-import {
-  FormLayout,
-  FormItem,
-  Input,
-  TextArea,
-  Submit,
-  Space,
-  FormButtonGroup,
-} from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    FormButtonGroup,
-    VoidField,
-    Field,
-    Submit,
-  },
-  data() {
-    return {
-      FormItem,
-      Input,
-      TextArea,
-      Space,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/submit/base.vue b/docs/demos/guide/submit/base.vue
deleted file mode 100644
index 346cc7f..0000000
--- a/docs/demos/guide/submit/base.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        required
-        name="input1"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        required
-        title="输入框"
-        name="input2"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Submit :onSubmit="log">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Submit,
-  FormButtonGroup,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({ components: { FormItem, Input } })
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Submit,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(v) {
-      console.log(v)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/submit/loading.vue b/docs/demos/guide/submit/loading.vue
deleted file mode 100644
index b63b941..0000000
--- a/docs/demos/guide/submit/loading.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        required
-        name="input1"
-        title="输入框"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-      <SchemaStringField
-        required
-        title="输入框"
-        name="input2"
-        x-decorator="FormItem"
-        x-component="Input"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Submit @submit="handleSubmit">提交</Submit>
-    </FormButtonGroup>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  Submit,
-  FormButtonGroup,
-  FormItem,
-  Input,
-} from '@formily/element-plus'
-
-const fields = createSchemaField({ components: { FormItem, Input } })
-
-export default {
-  components: {
-    FormProvider,
-    FormLayout,
-    Submit,
-    FormButtonGroup,
-    ...fields,
-  },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-  methods: {
-    handleSubmit(values) {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          console.log(values)
-          resolve()
-        }, 2000)
-      })
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/switch/json-schema.vue b/docs/demos/guide/switch/json-schema.vue
deleted file mode 100644
index ea39e94..0000000
--- a/docs/demos/guide/switch/json-schema.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Switch, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    switch: {
-      type: 'boolean',
-      title: '开关',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Switch,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/switch/markup-schema.vue b/docs/demos/guide/switch/markup-schema.vue
deleted file mode 100644
index 6f9ed60..0000000
--- a/docs/demos/guide/switch/markup-schema.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaBooleanField
-        name="switch"
-        title="开关"
-        x-decorator="FormItem"
-        x-component="Switch"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Switch, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Switch,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/switch/template.vue b/docs/demos/guide/switch/template.vue
deleted file mode 100644
index 0f5dcce..0000000
--- a/docs/demos/guide/switch/template.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="switch"
-      title="开关"
-      :decorator="[FormItem]"
-      :component="[Switch]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Switch, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Switch,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/time-picker/json-schema.vue b/docs/demos/guide/time-picker/json-schema.vue
deleted file mode 100644
index cc038ee..0000000
--- a/docs/demos/guide/time-picker/json-schema.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <Form :form="form">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, TimePicker, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    time: {
-      type: 'string',
-      title: '时间',
-      'x-decorator': 'FormItem',
-      'x-component': 'TimePicker',
-      'x-component-props': {
-        style: {
-          width: '240px',
-        },
-      },
-    },
-    '[startTime,endTime]': {
-      title: '时间范围',
-      'x-decorator': 'FormItem',
-      'x-component': 'TimePicker',
-      'x-component-props': {
-        isRange: true,
-        style: {
-          width: '240px',
-        },
-      },
-      type: 'string',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    TimePicker,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
-l
diff --git a/docs/demos/guide/time-picker/markup-schema.vue b/docs/demos/guide/time-picker/markup-schema.vue
deleted file mode 100644
index 07d15ed..0000000
--- a/docs/demos/guide/time-picker/markup-schema.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="time"
-        title="时间"
-        required
-        x-decorator="FormItem"
-        x-component="TimePicker"
-        :x-component-props="{
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-      <SchemaStringField
-        name="[startTime, endTime]"
-        title="时间范围"
-        x-decorator="FormItem"
-        x-component="TimePicker"
-        :x-component-props="{
-          isRange: true,
-          style: {
-            width: '240px',
-          },
-        }"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, TimePicker, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    TimePicker,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/time-picker/template.vue b/docs/demos/guide/time-picker/template.vue
deleted file mode 100644
index 652cba2..0000000
--- a/docs/demos/guide/time-picker/template.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="time"
-      title="时间"
-      required
-      :decorator="[FormItem]"
-      :component="[
-        TimePicker,
-        {
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-    />
-    <Field
-      name="[startTime,endTime]"
-      title="时间范围"
-      :decorator="[FormItem]"
-      :component="[
-        TimePicker,
-        {
-          isRange: true,
-          style: {
-            width: '240px',
-          },
-        },
-      ]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, TimePicker, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      TimePicker,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/transfer/json-schema.vue b/docs/demos/guide/transfer/json-schema.vue
deleted file mode 100644
index c5fa524..0000000
--- a/docs/demos/guide/transfer/json-schema.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <Form :form="form" label-align="left" :label-width="160">
-    <SchemaField :schema="schema" />
-    <Submit @submit="onSubmit">提交</Submit>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Transfer, Submit } from '@formily/element-plus'
-
-const schema = {
-  type: 'object',
-  properties: {
-    transfer: {
-      type: 'array',
-      title: '穿梭框',
-      enum: [
-        { label: '选项1', key: 1 },
-        { label: '选项2', key: 2 },
-      ],
-      'x-decorator': 'FormItem',
-      'x-component': 'Transfer',
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Transfer,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/transfer/markup-schema.vue b/docs/demos/guide/transfer/markup-schema.vue
deleted file mode 100644
index 1cff623..0000000
--- a/docs/demos/guide/transfer/markup-schema.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <SchemaField>
-      <SchemaStringField
-        name="input"
-        title="单选"
-        x-decorator="FormItem"
-        x-component="Transfer"
-        :enum="[
-          {
-            label: '选项1',
-            key: 1,
-          },
-          {
-            label: '选项2',
-            key: 2,
-          },
-        ]"
-      />
-    </SchemaField>
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Transfer, Submit } from '@formily/element-plus'
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Transfer,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/transfer/template.vue b/docs/demos/guide/transfer/template.vue
deleted file mode 100644
index e7bae32..0000000
--- a/docs/demos/guide/transfer/template.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Field
-      name="input"
-      title="单选"
-      :decorator="[FormItem]"
-      :component="[Transfer]"
-      :dataSource="[
-        {
-          label: '选项1',
-          key: 1,
-        },
-        {
-          label: '选项2',
-          key: 2,
-        },
-      ]"
-    />
-    <Submit @submit="log">提交</Submit>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { FormProvider, Field } from '@formily/vue'
-import { FormItem, Transfer, Submit } from '@formily/element-plus'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Transfer,
-      form,
-    }
-  },
-  methods: {
-    log(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/upload/json-schema.vue b/docs/demos/guide/upload/json-schema.vue
deleted file mode 100644
index 3afa6d4..0000000
--- a/docs/demos/guide/upload/json-schema.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <Form :form="form" :label-col="4" :wrapper-col="10">
-    <SchemaField :schema="schema" />
-    <FormButtonGroup align-form-item>
-      <Submit @submit="onSubmit">提交</Submit>
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Upload,
-  Submit,
-  FormButtonGroup,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const UploadButton = {
-  functional: true,
-  render(h) {
-    return h(Button, {}, '上传图片')
-  },
-}
-
-const schema = {
-  type: 'object',
-  properties: {
-    base: {
-      type: 'array',
-      title: '上传',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        action: 'https://formily-vue.free.beeceptor.com/file',
-        textContent: '上传',
-      },
-      required: true,
-    },
-    card: {
-      type: 'array',
-      title: '卡片上传',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        listType: 'picture-card',
-        action: 'https://formily-vue.free.beeceptor.com/file',
-      },
-      required: true,
-    },
-    drag: {
-      type: 'array',
-      title: '拖拽上传',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        action: 'https://formily-vue.free.beeceptor.com/file',
-        textContent: '将文件拖到此处，或者点击上传',
-        drag: true,
-      },
-      required: true,
-    },
-    custom: {
-      type: 'array',
-      title: '自定义按钮',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        action: 'https://formily-vue.free.beeceptor.com/file',
-      },
-      'x-content': UploadButton,
-      required: true,
-    },
-  },
-}
-
-const form = createForm()
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Upload,
-  },
-})
-
-export default {
-  components: { Form, SchemaField, Submit, FormButtonGroup },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/upload/markup-schema.vue b/docs/demos/guide/upload/markup-schema.vue
deleted file mode 100644
index bb5be22..0000000
--- a/docs/demos/guide/upload/markup-schema.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <Form :form="form" :label-col="4" :wrapper-col="10">
-    <SchemaField>
-      <SchemaArrayField
-        name="upload"
-        title="上传"
-        x-decorator="FormItem"
-        x-component="Upload"
-        :x-component-props="{
-          action: 'https://formily-vue.free.beeceptor.com/file',
-          textContent: '上传',
-        }"
-        required
-      />
-      <SchemaArrayField
-        name="upload2"
-        title="卡片上传"
-        x-decorator="FormItem"
-        x-component="Upload"
-        :x-component-props="{
-          listType: 'picture-card',
-          action: 'https://formily-vue.free.beeceptor.com/file',
-        }"
-        required
-      />
-      <SchemaArrayField
-        name="upload3"
-        title="拖拽上传"
-        x-decorator="FormItem"
-        x-component="Upload"
-        :x-component-props="{
-          action: 'https://formily-vue.free.beeceptor.com/file',
-          textContent: '将文件拖到此处，或者点击上传',
-          drag: true,
-        }"
-        required
-      />
-      <SchemaArrayField
-        name="custom"
-        title="自定义按钮"
-        x-decorator="FormItem"
-        x-component="Upload"
-        :x-component-props="{
-          action: 'https://formily-vue.free.beeceptor.com/file',
-        }"
-        required
-        :x-content="UploadButton"
-      />
-    </SchemaField>
-    <FormButtonGroup align-form-item>
-      <Submit @submit="onSubmit">提交</Submit>
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Upload,
-  Submit,
-  FormButtonGroup,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const UploadButton = {
-  functional: true,
-  render(h) {
-    return h(Button, {}, '上传图片')
-  },
-}
-
-const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Upload,
-  },
-})
-
-export default {
-  components: { Form, ...fields, Submit, FormButtonGroup },
-  data() {
-    return {
-      UploadButton,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/guide/upload/template.vue b/docs/demos/guide/upload/template.vue
deleted file mode 100644
index 5321683..0000000
--- a/docs/demos/guide/upload/template.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <Form :form="form" :label-col="4" :wrapper-col="10">
-    <ArrayField
-      name="upload"
-      title="上传"
-      :decorator="[FormItem]"
-      :component="[
-        Upload,
-        {
-          action: 'https://formily-vue.free.beeceptor.com/file',
-          textContent: '上传',
-        },
-      ]"
-      required
-    />
-    <ArrayField
-      name="upload2"
-      title="卡片上传"
-      :decorator="[FormItem]"
-      :component="[
-        Upload,
-        {
-          listType: 'picture-card',
-          action: 'https://formily-vue.free.beeceptor.com/file',
-        },
-      ]"
-      required
-    />
-    <ArrayField
-      name="upload3"
-      title="拖拽上传"
-      :decorator="[FormItem]"
-      :component="[
-        Upload,
-        {
-          action: 'https://formily-vue.free.beeceptor.com/file',
-          textContent: '将文件拖到此处，或者点击上传',
-          drag: true,
-        },
-      ]"
-      required
-    />
-    <ArrayField
-      name="custom"
-      title="自定义按钮"
-      :decorator="[FormItem]"
-      :component="[
-        Upload,
-        {
-          action: 'https://formily-vue.free.beeceptor.com/file',
-        },
-      ]"
-      required
-      ><UploadButton
-    /></ArrayField>
-    <FormButtonGroup align-form-item>
-      <Submit @submit="onSubmit">提交</Submit>
-    </FormButtonGroup>
-  </Form>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { ArrayField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Upload,
-  Submit,
-  FormButtonGroup,
-} from '@formily/element-plus'
-import { Button } from 'element-plus'
-
-const UploadButton = {
-  functional: true,
-  render(h) {
-    return h(Button, {}, '上传图片')
-  },
-}
-
-const form = createForm()
-
-export default {
-  components: { UploadButton, Form, ArrayField, Submit, FormButtonGroup },
-  data() {
-    return {
-      FormItem,
-      Upload,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
-</script>
diff --git a/docs/demos/index.vue b/docs/demos/index.vue
deleted file mode 100644
index 07b3b72..0000000
--- a/docs/demos/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <FormProvider :form="form">
-    <Space>
-      <Field
-        name="price"
-        title="价格"
-        :initialValue="5.2"
-        :decorator="[FormItem]"
-        :component="[
-          InputNumber,
-          {
-            placeholder: '请输入',
-            style: {
-              width: 100,
-            },
-          },
-        ]"
-      />
-      <FormItem>×</FormItem>
-      <Field
-        name="count"
-        title="数量"
-        :initialValue="100"
-        :decorator="[FormItem]"
-        :component="[
-          InputNumber,
-          {
-            placeholder: '请输入',
-            style: {
-              width: 100,
-            },
-          },
-        ]"
-      />
-      <FormConsumer>
-        <template #default="{ form }">
-          <FormItem>
-            = {{ `${form.values.price * form.values.count} 元` }}</FormItem
-          >
-        </template>
-      </FormConsumer>
-    </Space>
-  </FormProvider>
-</template>
-
-<script>
-import { createForm } from '@formily/core'
-import { InputNumber, FormItem, Space } from '@formily/element-plus'
-import { FormProvider, FormConsumer, Field } from '@formily/vue'
-
-const form = createForm()
-
-export default {
-  components: { FormProvider, FormConsumer, Field, FormItem, Space },
-  data() {
-    return {
-      form,
-      InputNumber,
-      FormItem,
-    }
-  },
-}
-</script>
diff --git a/docs/guide/array-cards.md b/docs/guide/array-cards.md
deleted file mode 100644
index fde314b..0000000
--- a/docs/guide/array-cards.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# ArrayCards
-
-> 卡片列表，对于每行字段数量较多，联动较多的场景比较适合使用 ArrayCards
->
-> 注意：该组件只适用于 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/array-cards/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/array-cards/json-schema" />
-
-## Effects 联动案例
-
-<dumi-previewer demoPath="guide/array-cards/effects-markup-schema" />
-
-## JSON Schema 联动案例
-
-<dumi-previewer demoPath="guide/array-cards/effects-json-schema" />
-
-## API
-
-### ArrayCards
-
-> 表格组件
-
-参考 [https://element.eleme.io/#/zh-CN/component/card](https://element.eleme.io/#/zh-CN/component/card)
-
-### ArrayCards.Addition
-
-> 添加按钮
-
-扩展属性
-
-| 属性名       | 类型    | 描述       | 默认值   |
-| ------------ | ------- | ---------- | -------- | -------- |
-| title        | string  | 文案       |          |
-| method       | `'push' | 'unshift'` | 添加方式 | `'push'` |
-| defaultValue | any     | 默认值     |          |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCards.Remove
-
-> 删除按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCards.MoveDown
-
-> 下移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCards.MoveUp
-
-> 上移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCards.Index
-
-> 索引渲染器
-
-无属性
-
-### ArrayCards.useIndex
-
-> 读取当前渲染行索引的 Hook
-
-### ArrayCards.useRecord
-
-> 读取当前渲染记录的 Hook
diff --git a/docs/guide/array-collapse.md b/docs/guide/array-collapse.md
deleted file mode 100644
index 63e48bb..0000000
--- a/docs/guide/array-collapse.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# ArrayCollapse
-
-> 折叠面板，对于每行字段数量较多，联动较多的场景比较适合使用 ArrayCollapse
->
-> 注意：该组件只适用于 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/array-collapse/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/array-collapse/json-schema" />
-
-## Effects 联动案例
-
-<dumi-previewer demoPath="guide/array-collapse/effects-markup-schema" />
-
-## JSON Schema 联动案例
-
-<dumi-previewer demoPath="guide/array-collapse/effects-json-schema" />
-
-## API
-
-### ArrayCollapse
-
-参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
-
-### ArrayCollapse.Item
-
-参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
-
-### ArrayCollapse.Addition
-
-> 添加按钮
-
-扩展属性
-
-| 属性名       | 类型    | 描述       | 默认值   |
-| ------------ | ------- | ---------- | -------- | -------- |
-| title        | string  | 文案       |          |
-| method       | `'push' | 'unshift'` | 添加方式 | `'push'` |
-| defaultValue | any     | 默认值     |          |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCollapse.Remove
-
-> 删除按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCollapse.MoveDown
-
-> 下移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCollapse.MoveUp
-
-> 上移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayCollapse.Index
-
-> 索引渲染器
-
-无属性
-
-### ArrayCollapse.useIndex
-
-> 读取当前渲染行索引的 Hook
-
-### ArrayCollapse.useRecord
-
-> 读取当前渲染记录的 Hook
diff --git a/docs/guide/array-items.md b/docs/guide/array-items.md
deleted file mode 100644
index ec48e3c..0000000
--- a/docs/guide/array-items.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# ArrayItems
-
-> 自增列表，对于简单的自增编辑场景比较适合，或者对于空间要求高的场景比较适合
->
-> 注意：该组件只适用于 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/array-items/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/array-items/json-schema" />
-
-## API
-
-### ArrayItems
-
-继承 HTMLDivElement Props
-
-### ArrayItems.Item
-
-> 列表区块
-
-继承 HTMLDivElement Props
-
-### ArrayItems.SortHandle
-
-> 拖拽手柄
-
-参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-### ArrayItems.Addition
-
-> 添加按钮
-
-扩展属性
-
-| 属性名 | 类型 | 描述 | 默认值 |
-| ------ | ---- | ---- | ------ ||
-| title | string | 文案 | |
-| method | `'push' | 'unshift'` | 添加方式 | `'push'` |
-| defaultValue | any | 默认值 | |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayItems.Remove
-
-> 删除按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayItems.MoveDown
-
-> 下移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayItems.MoveUp
-
-> 上移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayItems.Index
-
-> 索引渲染器
-
-无属性
-
-### ArrayItems.useIndex
-
-> 读取当前渲染行索引的 Hook
-
-### ArrayItems.useRecord
-
-> 读取当前渲染记录的 Hook
diff --git a/docs/guide/array-table.md b/docs/guide/array-table.md
deleted file mode 100644
index 9d5d863..0000000
--- a/docs/guide/array-table.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# ArrayTable
-
-> 自增表格，对于数据量超大的场景比较适合使用该组件，虽然数据量大到一定程度会有些许卡顿，但是不会影响基本操作
->
-> 注意：该组件只适用于 Schema 场景，且只能是对象数组
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/array-table/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/array-table/json-schema" />
-
-## Effects 联动案例
-
-<dumi-previewer demoPath="guide/array-table/effects-markup-schema" />
-
-## JSON Schema 联动案例
-
-<dumi-previewer demoPath="guide/array-table/effects-json-schema" />
-
-## API
-
-### ArrayTable
-
-> 表格组件
-
-参考 [https://element.eleme.io/#/zh-CN/component/table](https://element.eleme.io/#/zh-CN/component/table)
-
-### ArrayTable.Column
-
-> 表格列
-
-参考 [https://element.eleme.io/#/zh-CN/component/table](https://element.eleme.io/#/zh-CN/component/table)
-
-扩展属性
-
-| 属性名   | 类型    | 描述     | 默认值 |
-| -------- | ------- | -------- | ------ |
-| asterisk | boolean | 星号显示 | true   |
-
-> ArrayTableColumn 会自动检查内部的 FormItem 是否必填，并自动在表头加上红色星号。如果不希望显示，可通过 `asterisk` 属性进行覆盖。
-
-### ArrayTable.Addition
-
-> 添加按钮
-
-扩展属性
-
-| 属性名 | 类型 | 描述 | 默认值 |
-| ------ | ---- | ---- | ------ ||
-| title | string | 文案 | |
-| method | `'push' | 'unshift'` | 添加方式 | `'push'` |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayTable.Remove
-
-> 删除按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayTable.MoveDown
-
-> 下移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayTable.MoveUp
-
-> 上移按钮
-
-| 属性名 | 类型   | 描述 | 默认值 |
-| ------ | ------ | ---- | ------ |
-| title  | string | 文案 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
-
-注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
-
-### ArrayTable.Index
-
-> 索引渲染器
-
-无属性
-
-### ArrayTable.useIndex
-
-> 读取当前渲染行索引的 Hook
-
-### ArrayTable.useRecord
-
-> 读取当前渲染记录的 Hook
diff --git a/docs/guide/array-tabs.md b/docs/guide/array-tabs.md
deleted file mode 100644
index 383c84e..0000000
--- a/docs/guide/array-tabs.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# ArrayTabs
-
-> 自增选项卡，对于纵向空间要求较高的场景可以考虑使用该组件
->
-> 注意：该组件只适用于 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/array-tabs/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/array-tabs/json-schema" />
-
-## API
-
-### ArrayTabs
-
-参考 [https://element.eleme.io/#/zh-CN/component/tab](https://element.eleme.io/#/zh-CN/component/tab)
diff --git a/docs/guide/cascader.md b/docs/guide/cascader.md
deleted file mode 100644
index b30f515..0000000
--- a/docs/guide/cascader.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Cascader
-
-> 级联选择器
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/cascader/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/cascader/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/cascader/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/cascader](https://element.eleme.io/#/zh-CN/component/cascader)
diff --git a/docs/guide/checkbox.md b/docs/guide/checkbox.md
deleted file mode 100644
index a6a36d5..0000000
--- a/docs/guide/checkbox.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Checkbox
-
-> 复选框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/checkbox/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/checkbox/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/checkbox/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/checkbox](https://element.eleme.io/#/zh-CN/component/checkbox)
-
-### 扩展属性
-
-| 属性名     | 类型                                                                                       | 描述     | 默认值  |
-| ---------- | ------------------------------------------------------------------------------------------ | -------- | ------- |
-| options    | [CheckboxProps](https://element.eleme.io/#/zh-CN/component/checkbox#checkbox-attributes)[] | 选项     | []      |
-| optionType | default/button                                                                             | 样式类型 | default |
diff --git a/docs/guide/date-picker.md b/docs/guide/date-picker.md
deleted file mode 100644
index c7ad6bd..0000000
--- a/docs/guide/date-picker.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# DatePicker
-
-> 日期选择器
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/date-picker/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/date-picker/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/date-picker/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/date-picker](https://element.eleme.io/#/zh-CN/component/date-picker)
diff --git a/docs/guide/editable.md b/docs/guide/editable.md
deleted file mode 100644
index bc2926d..0000000
--- a/docs/guide/editable.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Editable
-
-> 局部编辑器，对于一些空间要求较高的表单区域可以使用该组件
->
-> Editable 组件相当于是 FormItem 组件的变体，所以通常放在 decorator 中
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/editable/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/editable/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/editable/template" />
-
-## API
-
-### Editable
-
-> 内联编辑
-
-参考 [https://element.formilyjs.org/guide/form-item.html#api](https://element.formilyjs.org/guide/form-item.html#api)
-
-### Editable.Popover
-
-> 浮层编辑
-
-参考 [https://element.eleme.io/#/zh-CN/component/popover](https://element.eleme.io/#/zh-CN/component/popover)
diff --git a/docs/guide/form-button-group.md b/docs/guide/form-button-group.md
deleted file mode 100644
index bd8648c..0000000
--- a/docs/guide/form-button-group.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# FormButtonGroup
-
-> 表单按钮组布局组件
-
-## 使用案例
-
-<dumi-previewer demoPath="guide/form-button-group" />
-
-## API
-
-| 属性名        | 类型    | 描述          | 默认值   |
-| ------------- | ------- | ------------- | -------- | -------- | -------- |
-| gutter        | number  | 间隙大小      | 8px      |
-| align         | `'left' | 'center'      | 'right'` | 对齐方式 | `'left'` |
-| alignFormItem | boolean | 对齐 FormItem | `false`  |
diff --git a/docs/guide/form-collapse.md b/docs/guide/form-collapse.md
deleted file mode 100644
index e4e837f..0000000
--- a/docs/guide/form-collapse.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# FormCollapse
-
-> 折叠面板，通常用在布局空间要求较高的表单场景
->
-> 注意：只能用在 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-collapse/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-collapse/json-schema" />
-
-## API
-
-### FormCollapse
-
-| 属性名       | 类型          | 描述                                                       | 默认值 |
-| ------------ | ------------- | ---------------------------------------------------------- | ------ |
-| formCollapse | IFormCollapse | 传入通过 createFormCollapse/useFormCollapse 创建出来的模型 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
-
-### FormCollapse.Item
-
-参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
-
-### FormCollapse.createFormCollapse
-
-```ts pure
-type ActiveKey = string | number
-type ActiveKeys = string | number | Array<string | number>
-
-interface createFormCollapse {
-  (defaultActiveKeys?: ActiveKeys): IFormCollpase
-}
-
-interface IFormCollapse {
-  //激活主键列表
-  activeKeys: ActiveKeys
-  //是否存在该激活主键
-  hasActiveKey(key: ActiveKey): boolean
-  //设置激活主键列表
-  setActiveKeys(keys: ActiveKeys): void
-  //添加激活主键
-  addActiveKey(key: ActiveKey): void
-  //删除激活主键
-  removeActiveKey(key: ActiveKey): void
-  //开关切换激活主键
-  toggleActiveKey(key: ActiveKey): void
-}
-```
diff --git a/docs/guide/form-dialog.md b/docs/guide/form-dialog.md
deleted file mode 100644
index 746dfa9..0000000
--- a/docs/guide/form-dialog.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# FormDialog
-
-> 弹窗表单，主要用在简单的事件打开表单场景
-
-## Markup Schema 案例
-
-以下例子演示了 FormDialog 的几个能力：
-
-- 快速打开，关闭能力
-- 中间件能力，自动出现加载态
-- 渲染函数内可以响应式能力
-- 上下文共享能力
-
-<dumi-previewer demoPath="guide/form-dialog/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-dialog/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/form-dialog/template" />
-
-## API
-
-### FormDialog
-
-```ts pure
-import { IFormProps, Form } from '@formily/core'
-
-type FormDialogContentProps = { form: Form }
-
-type FormDialogContent = Component | ((props: FormDialogContentProps) => VNode)
-
-type DialogTitle = string | number | Component | VNode | (() => VNode)
-
-type IFormDialogProps = Omit<DialogProps, 'title'> & {
-  title?: DialogTitle
-  footer?: null | Component | VNode | (() => VNode)
-  cancelText?: string | Component | VNode | (() => VNode)
-  cancelButtonProps?: ButtonProps
-  okText?: string | Component | VNode | (() => VNode)
-  okButtonProps?: ButtonProps
-  onOpen?: () => void
-  onOpend?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onCancel?: () => void
-  onOK?: () => void
-  loadingText?: string
-}
-
-interface IFormDialog {
-  forOpen(middleware: IMiddleware<IFormProps>): IFormDialog
-  forConfirm(middleware: IMiddleware<IFormProps>): IFormDialog
-  forCancel(middleware: IMiddleware<IFormProps>): IFormDialog
-  open(props?: IFormProps): Promise<any>
-  close(): void
-}
-
-interface FormDialog {
-  (title: IFormDialogProps, id: string, content: FormDialogContent): IFormDialog
-  (title: IFormDialogProps, id: FormDialogContent): IFormDialog
-  (title: DialogTitle, id: string, content: FormDialogContent): IFormDialog
-  (title: DialogTitle, id: FormDialogContent): IFormDialog
-}
-```
-
-`DialogProps`类型定义参考 [Element-UI Dialog API](https://element.eleme.io/#/zh-CN/component/dialog#attributes)
-
-### FormDialog.Footer
-
-无属性，只接收子节点
-
-### FormDialog.Portal
-
-接收可选的 id 属性，默认值为 form-dialog，如果一个应用存在多个 prefixCls，不同区域的弹窗内部 prefixCls 不一样，那推荐指定 id 为区域级 id
diff --git a/docs/guide/form-drawer.md b/docs/guide/form-drawer.md
deleted file mode 100644
index 740b235..0000000
--- a/docs/guide/form-drawer.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# FormDrawer
-
-> 抽屉表单，主要用在简单的事件打开表单场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-drawer/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-drawer/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/form-drawer/template" />
-
-## API
-
-### FormDrawer
-
-```ts pure
-import { IFormProps, Form } from '@formily/core'
-
-type FormDrawerContentProps = { form: Form }
-
-type FormDrawerContent = Component | ((props: FormDrawerContentProps) => VNode)
-
-type DrawerTitle = string | number | Component | VNode | (() => VNode)
-
-type IFormDrawerProps = Omit<DrawerProps, 'title'> & {
-  title?: DrawerTitle
-  footer?: null | Component | VNode | (() => VNode)
-  cancelText?: string | Component | VNode | (() => VNode)
-  cancelButtonProps?: ButtonProps
-  okText?: string | Component | VNode | (() => VNode)
-  okButtonProps?: ButtonProps
-  onOpen?: () => void
-  onOpend?: () => void
-  onClose?: () => void
-  onClosed?: () => void
-  onCancel?: () => void
-  onOK?: () => void
-  loadingText?: string
-}
-
-interface FormDrawer {
-  (title: IFormDrawerProps, id: string, content: FormDrawerContent): IFormDrawer
-  (title: IFormDrawerProps, id: FormDrawerContent): IFormDrawer
-  (title: DrawerTitle, id: string, content: FormDrawerContent): IFormDrawer
-  (title: DrawerTitle, id: FormDrawerContent): IFormDrawer
-}
-```
-
-`DrawerProps`类型定义参考 [Element-UI Drawer API](https://element.eleme.io/#/zh-CN/component/drawer#attributes)
-
-### FormDrawer.Footer
-
-无属性，只接收子节点
-
-### FormDrawer.Portal
-
-接收可选的 id 属性，默认值为 form-dialog，如果一个应用存在多个 prefixCls，不同区域的弹窗内部 prefixCls 不一样，那推荐指定 id 为区域级 id
diff --git a/docs/guide/form-grid.md b/docs/guide/form-grid.md
deleted file mode 100644
index d6ecbe8..0000000
--- a/docs/guide/form-grid.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# FormGrid
-
-> FormGrid 组件
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-grid/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-grid/json-schema" />
-
-## 原生案例
-
-<dumi-previewer demoPath="guide/form-grid/native" />
-
-## API
-
-### FormGrid
-
-| 属性名      | 类型                | 描述         | 默认值            |
-| ----------- | ------------------- | ------------ | ----------------- |
-| minWidth    | `number / number[]` | 元素最小宽度 | 100               |
-| maxWidth    | `number / number[]` | 元素最大宽度 | -                 |
-| minColumns  | `number / number[]` | 最小列数     | 0                 |
-| maxColumns  | `number / number[]` | 最大列数     | -                 |
-| breakpoints | number[]            | 容器尺寸断点 | `[720,1280,1920]` |
-| columnGap   | number              | 列间距       | 8                 |
-| rowGap      | number              | 行间距       | 4                 |
-| colWrap     | boolean             | 自动换行     | true              |
-
-注意：
-
-- minWidth 生效优先级高于 minColumn
-- maxWidth 优先级高于 maxColumn
-- minWidth/maxWidth/minColumns/maxColumns 的数组格式代表与断点数组映射
-
-### FormGrid.GridColumn
-
-| 属性名   | 类型   | 描述                                                 | 默认值 |
-| -------- | ------ | ---------------------------------------------------- | ------ |
-| gridSpan | number | 元素所跨列数，如果为-1，那么会自动反向跨列填补单元格 | 1      |
-
-### FormGrid.useGridSpan
-
-#### 描述
-
-根据容器宽度计算出正确的 span，防止元素溢出
-
-#### 签名
-
-```ts
-interface uesGridSpan {
-  (gridSpan: number): number
-}
-```
diff --git a/docs/guide/form-item.md b/docs/guide/form-item.md
deleted file mode 100644
index 53fbc96..0000000
--- a/docs/guide/form-item.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# FormItem
-
-> 全新的 FormItem 组件，相比于 Element 的 FormItem，它支持的功能更多，同时它的定位是纯样式组件，不管理表单状态，所以也会更轻量，更方便定制
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-item/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-item/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/form-item/template" />
-
-## 常用属性案例
-
-<dumi-previewer demoPath="guide/form-item/common" />
-
-## 无边框案例
-
-设置去除组件边框
-
-<dumi-previewer demoPath="guide/form-item/bordered-none" />
-
-## 内嵌模式案例
-
-设置表单组件为内嵌模式
-
-<dumi-previewer demoPath="guide/form-item/inset" />
-
-## 反馈信息定制案例
-
-可通过 `feedbackIcon` 传入指定反馈的按钮
-
-<dumi-previewer demoPath="guide/form-item/feedback" />
-
-## 尺寸控制案例
-
-<dumi-previewer demoPath="guide/form-item/size" />
-
-## API
-
-### FormItem
-
-| 属性名         | 类型                                                   | 描述                                        | 默认值     |
-| -------------- | ------------------------------------------------------ | ------------------------------------------- | ---------- | -------- |
-| style          | CSSProperties                                          | 样式                                        | -          |
-| label          | String \| Vue Component                                | 标签                                        | -          |
-| labelStyle     | CSSProperties                                          | 标签样式                                    | -          |
-| wrapperStyle   | CSSProperties                                          | 组件容器样式                                | -          |
-| className      | string                                                 | 组件样式类名                                | -          |
-| colon          | boolean                                                | 冒号                                        | -          |
-| tooltip        | String \| Vue Component                                | 问号提示                                    | -          |
-| tooltipLayout  | `"icon"                                                | "text"`                                     | 问提示布局 | `"icon"` |
-| labelAlign     | `"left"` \| `"right"`                                  | 标签文本对齐方式                            | `"right"`  |
-| labelWrap      | boolean                                                | 标签换⾏，否则出现省略号，hover 有 tooltip  | false      |
-| labelWidth     | `number`                                               | 标签固定宽度                                | -          |
-| wrapperWidth   | `number`                                               | 内容固定宽度                                | -          |
-| labelCol       | number                                                 | 标签⽹格所占列数，和内容列数加起来总和为 24 | -          |
-| wrapperCol     | number                                                 | 内容⽹格所占列数，和标签列数加起来总和为 24 | -          |
-| wrapperAlign   | `"left"` \| `"right"`                                  | 内容文本对齐方式⻬                          | `"left"`   |
-| wrapperWrap    | boolean                                                | 内容换⾏，否则出现省略号，hover 有 tooltip  | false      |
-| fullness       | boolean                                                | 内容撑满                                    | false      |
-| addonBefore    | String \| Vue Component                                | 前缀内容                                    | -          |
-| addonAfter     | String \| Vue Component                                | 后缀内容                                    | -          |
-| size           | `"small"` \| `"default"` \| `"large"`                  | 尺⼨                                        | -          |
-| extra          | ReactNode                                              | 扩展描述⽂案                                | -          |
-| feedbackText   | ReactNode                                              | 反馈⽂案                                    | -          |
-| feedbackLayout | `"loose"` \| `"terse"` \| `"popover"` \| `"none"`      | 反馈布局                                    | -          |
-| feedbackStatus | `"error"` \| `"warning"` \| `"success"` \| `"pending"` | 反馈布局                                    | -          |
-| feedbackIcon   | string                                                 | 反馈图标                                    | -          |
-| required       | boolean                                                | 星号提醒                                    | -          |
-| asterisk       | boolean                                                | 星号提醒                                    | -          |
-| gridSpan       | number                                                 | ⽹格布局占宽                                | -          |
-
-### FormItem.BaseItem
-
-纯样式组件，属性与 FormItem 一样，与 Formily Core 不做状态桥接，主要用于一些需要依赖 FormItem 的样式布局能力，但不希望接入 Field 状态的场景
diff --git a/docs/guide/form-layout.md b/docs/guide/form-layout.md
deleted file mode 100644
index c9c9a73..0000000
--- a/docs/guide/form-layout.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# FormLayout
-
-> 区块级布局批量控制组件，借助该组件，我们可以轻松的控制被 FormLayout 圈住的所有 FormItem 组件的布局模式
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-layout/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-layout/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/form-layout/template" />
-
-## API
-
-| 属性名         | 类型                 | 描述                    | 默认值         |
-| -------------- | -------------------- | ----------------------- | -------------- | -------- | ---------- | ---- |
-| style          | CSSProperties        | 样式                    | -              |
-| className      | string               | 类名                    | -              |
-| colon          | boolean              | 是否有冒号              | true           |
-| labelAlign     | `right` \| `left`    | 标签内容对齐            | -              |
-| wrapperAlign   | `right` \| `left`    | 组件容器内容对齐        | -              |
-| labelWrap      | boolean              | 标签内容换行            | false          |
-| labelWidth     | number               | 标签宽度(px)            | -              |
-| wrapperWidth   | number               | 组件容器宽度(px)        | -              |
-| wrapperWrap    | boolean              | 组件容器换行            | false          |
-| labelCol       | number               | 标签宽度(24 column)     | -              |
-| wrapperCol     | number               | 组件容器宽度(24 column) | -              |
-| fullness       | boolean              | 组件容器宽度 100%       | false          |
-| size           | `'small'             | 'default'               | 'large'`       | 组件尺寸 | default    |
-| layout         | `'vertical'          | 'horizontal'            | 'inline'`      | 布局模式 | horizontal |
-| direction      | `'rtl'               | 'ltr'`                  | 方向(暂不支持) | ltr      |
-| inset          | boolean              | 内联布局                | false          |
-| shallow        | boolean              | 上下文浅层传递          | true           |
-| feedbackLayout | `'loose'             | 'terse'                 | 'popover'      | 'none'`  | 反馈布局   | true |
-| tooltipLayout  | `'icon'` \| `'text'` | 问提示布局              | `"icon"`       |
-| bordered       | boolean              | 是否有边框              | true           |
-| gridColumnGap  | number               | 网格布局列间距          | 8              |
-| gridRowGap     | number               | 网格布局行间距          | 4              |
-| spaceGap       | number               | 弹性间距                | 8              |
diff --git a/docs/guide/form-step.md b/docs/guide/form-step.md
deleted file mode 100644
index 256f49a..0000000
--- a/docs/guide/form-step.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# FormStep
-
-> 分步表单组件
->
-> 注意：该组件只能用在 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-step/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-step/json-schema" />
-
-## API
-
-### FormStep
-
-| 属性名   | 类型      | 描述                                   | 默认值 |
-| -------- | --------- | -------------------------------------- | ------ |
-| formStep | IFormStep | 传入通过 createFormStep 创建出来的模型 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
-
-### FormStep.StepPane
-
-参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
-
-### FormStep.createFormStep
-
-```ts pure
-interface createFormStep {
-  (current?: number): IFormStep
-}
-
-interface IFormStep {
-  //当前索引
-  current: number
-  //是否允许向后
-  allowNext: boolean
-  //是否允许向前
-  allowBack: boolean
-  //设置当前索引
-  setCurrent(key: number): void
-  //提交表单
-  submit: Formily.Core.Models.Form['submit']
-  //向后
-  next(): void
-  //向前
-  back(): void
-}
-```
diff --git a/docs/guide/form-tab.md b/docs/guide/form-tab.md
deleted file mode 100644
index e418720..0000000
--- a/docs/guide/form-tab.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# FormTab
-
-> 选项卡表单
->
-> 注意：该组件只适用于 Schema 场景
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/form-tab/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/form-tab/json-schema" />
-
-## API
-
-### FormTab
-
-| 属性名  | 类型     | 描述                                  | 默认值 |
-| ------- | -------- | ------------------------------------- | ------ |
-| formTab | IFormTab | 传入通过 createFormTab 创建出来的模型 |        |
-
-其余参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
-
-### FormTab.TabPane
-
-参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
-
-### FormTab.createFormTab
-
-```ts pure
-type ActiveKey = string | number
-
-interface createFormTab {
-  (defaultActiveKey?: ActiveKey): IFormTab
-}
-
-interface IFormTab {
-  //激活主键
-  activeKey: ActiveKey
-  //设置激活主键
-  setActiveKey(key: ActiveKey): void
-}
-```
diff --git a/docs/guide/form.md b/docs/guide/form.md
deleted file mode 100644
index 0079c13..0000000
--- a/docs/guide/form.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Form
-
-> FormProvider + FormLayout + form 标签的组合组件，可以帮助我们快速实现带回车提交的且能批量布局的表单
-
-## 使用案例
-
-<dumi-previewer demoPath="guide/form" />
-
-> 注意：想要实现回车提交，我们在使用 Submit 组件的时候不能给其传 submit 事件，否则回车提交会失效，这样做的目的是为了防止用户同时在多处写 submit 事件监听器，处理逻辑不一致的话，提交时很难定位问题。
-
-## API
-
-布局相关的 API 属性，我们参考 [FormLayout](./form-layout) 即可，剩下是 Form 组件独有的 API 属性
-
-| 属性名                 | 类型                                                                                             | 描述                               | 默认值 |
-| ---------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------- | ------ |
-| form                   | [Form](https://core.formilyjs.org/api/models/form)                                               | Form 实例                          | -      |
-| component              | string                                                                                           | 渲染组件，可以指定为自定义组件渲染 | `form` |
-| previewTextPlaceholder | string \| Vue Component                                                                          | 预览态占位符                       | `N/A`  |
-| onAutoSubmit           | `(values:any)=>any`                                                                              | 回车提交事件回调                   | -      |
-| onAutoSubmitFailed     | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 回车提交校验失败事件回调           | -      |
diff --git a/docs/guide/index.md b/docs/guide/index.md
deleted file mode 100644
index 9fb0c7e..0000000
--- a/docs/guide/index.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# ElementPlus
-
-## 介绍
-
-@formily/element-plus 是基于 ElementPlus 封装的针对表单场景专业级(Professional)组件库，它主要有以下几个特点：
-
-- 更丰富的组件体系
-
-  - 布局组件
-
-    - FormLayout
-    - FormItem
-    - FormGrid
-    - FormButtonGroup
-    - Space
-    - Submit
-    - Reset
-
-  - 输入控件
-    - Input
-    - Password
-    - Select
-    - DatePicker
-    - TimePicker
-    - InputNumber
-    - Transfer
-    - Cascader
-    - Radio
-    - Checkbox
-    - Upload
-    - Switch
-  - 场景组件
-    - ArrayCards
-    - ArrayItems
-    - ArrayTable
-    - ArrayTabs
-    - FormCollapse
-    - FormStep
-    - FormTab
-    - FormDialog
-    - FormDrawer
-    - Editable
-  - 阅读态组件
-    - PreviewText
-
-- 主题定制能力
-  - follow 组件库的样式体系，更方便定制主题
-- 支持二次封装
-  - 所有组件都能二次封装
-- 支持阅读态
-  - 提供了 PreviewText 组件，用户可以基于它自己做阅读态封装，灵活性更强
-- 类型更加友好
-  - 每个组件都有着极其完整的类型定义，用户在实际开发过程中，可以感受到前所未有的智能提示体验
-- 更完备的布局控制能力
-  - 基于 FormLayout、FormItem、FormGrid 组件，提供更智能的布局能力。
-- 更优雅易用的 API
-  - FormStep，用户只需要关注 FormStep Reactive Model 即可，通过 createFormStep 就可以创建出 Reactive Model，传给 FormStep 组件即可快速通讯。同理，FormTab/FormCollapse 也是一样的通讯模式
-  - 弹窗表单，抽屉表单，想必过去，用户几乎每次都得在这两个场景上写大量的代码，这次直接提供了极其简易的 API 让用户使用，最大化提升开发效率
-
-## 安装
-
-```bash
-$ npm install --save element-plus
-$ npm install --save @formily/core @formily/vue @vue/composition-api @formily/element-plus
-```
-
-## 按需打包
-
-`ElementPlus` 按需引入参见 [https://element.eleme.io/#/zh-CN/component/quickstart#an-xu-yin-ru](https://element.eleme.io/#/zh-CN/component/quickstart#an-xu-yin-ru)
-
-`@formily/element-plus`按需引入需借助 `babel-plugin-import`
-
-#### 安装 `babel-plugin-import`
-
-```shell
-npm install babel-plugin-import --save-dev
-```
-
-或者
-
-```shell
-yarn add babel-plugin-import --dev
-```
-
-修改 `.babelrc`
-
-```json
-{
-  "plugins": [
-    [
-      "component",
-      {
-        "libraryName": "element-plus",
-        "styleLibraryName": "theme-chalk"
-      }
-    ],
-    [
-      "import",
-      {
-        "libraryName": "@formily/element-plus",
-        "libraryDirectory": "esm",
-        "style": true
-      }
-    ]
-  ]
-}
-```
-
-## Q/A
-
-问：我想自己封装一套组件库，该怎么做？
-
-答：如果是开源组件库，可以直接参与项目共建，提供 PR，如果是企业内私有组件库，参考源码即可，源码并没有太多复杂逻辑。
-
-问：为什么 ArrayCards/ArrayTable/FormStep 这类组件只支持 Schema 模式，不支持纯 Template 模式？
-
-答：这就是 Schema 模式的核心优势，借助协议，我们可以做场景化抽象，相反，纯 Template 模式，受限于 Template 的不可解析性，我们很难做到 UI 级别的场景化抽象，更多的只是抽象 Hook。
diff --git a/docs/guide/input-number.md b/docs/guide/input-number.md
deleted file mode 100644
index 9c17ea3..0000000
--- a/docs/guide/input-number.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# InputNumber
-
-> 数字输入框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/input-number/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/input-number/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/input-number/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/input-number](https://element.eleme.io/#/zh-CN/component/input-number)
diff --git a/docs/guide/input.md b/docs/guide/input.md
deleted file mode 100644
index 846471f..0000000
--- a/docs/guide/input.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Input
-
-> 文本输入框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/input/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/input/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/input/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/input](https://element.eleme.io/#/zh-CN/component/input)
diff --git a/docs/guide/password.md b/docs/guide/password.md
deleted file mode 100644
index 5eb79c5..0000000
--- a/docs/guide/password.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Password
-
-> 密码输入框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/password/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/password/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/password/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/input](https://element.eleme.io/#/zh-CN/component/input)
diff --git a/docs/guide/preview-text.md b/docs/guide/preview-text.md
deleted file mode 100644
index 4898c92..0000000
--- a/docs/guide/preview-text.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# PreviewText
-
-> 阅读态组件，主要用来实现类 Input，类 DatePicker 这些组件的阅读态
-
-## 简单案例
-
-<dumi-previewer demoPath="guide/preview-text/base" />
-
-## 扩展案例
-
-<dumi-previewer demoPath="guide/preview-text/extend" />
-
-## API
-
-### PreviewText.Input
-
-参考 [https://element.eleme.io/#/zh-CN/component/input](https://element.eleme.io/#/zh-CN/component/input)
-
-### PreviewText.Select
-
-参考 [https://element.eleme.io/#/zh-CN/component/select](https://element.eleme.io/#/zh-CN/component/select)
-
-### PreviewText.Cascader
-
-参考 [https://element.eleme.io/#/zh-CN/component/cascader](https://element.eleme.io/#/zh-CN/component/cascader)
-
-### PreviewText.DatePicker
-
-参考 [https://element.eleme.io/#/zh-CN/component/date-picker](https://element.eleme.io/#/zh-CN/component/date-picker)
-
-### PreviewText.TimePicker
-
-参考 [https://element.eleme.io/#/zh-CN/component/time-picker](https://element.eleme.io/#/zh-CN/component/time-picker)
-
-### PreviewText
-
-| 属性名 | 类型   | 描述       | 默认值 |
-| ------ | ------ | ---------- | ------ |
-| value  | stirng | 缺省占位符 | N/A    |
-
-### PreviewText.Placeholder
-
-| 属性名 | 类型   | 描述       | 默认值 |
-| ------ | ------ | ---------- | ------ |
-| value  | stirng | 缺省占位符 | N/A    |
-
-### PreviewText.usePlaceholder
-
-```ts pure
-interface usePreviewTextPlaceholder {
-  (): string
-}
-```
diff --git a/docs/guide/radio.md b/docs/guide/radio.md
deleted file mode 100644
index fff7df3..0000000
--- a/docs/guide/radio.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Radio
-
-> 单选框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/radio/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/radio/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/radio/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/radio](https://element.eleme.io/#/zh-CN/component/radio)
-
-### 扩展属性
-
-| 属性名     | 类型                                                                              | 描述     | 默认值  |
-| ---------- | --------------------------------------------------------------------------------- | -------- | ------- |
-| options    | [RadioProps](https://element.eleme.io/#/zh-CN/component/radio#radio-attributes)[] | 选项     | []      |
-| optionType | default/button                                                                    | 样式类型 | default |
diff --git a/docs/guide/reset.md b/docs/guide/reset.md
deleted file mode 100644
index a2b42b0..0000000
--- a/docs/guide/reset.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Reset
-
-> 重置按钮
-
-## 普通重置
-
-> 有默认值的控件无法清空
-
-<dumi-previewer demoPath="guide/reset/base" />
-
-## 强制清空重置
-
-<dumi-previewer demoPath="guide/reset/force" />
-
-## 强制清空重置并校验
-
-<dumi-previewer demoPath="guide/reset/validate" />
-
-## API
-
-按钮相关的 API 属性，我们参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button) 即可，剩下是 Reset 组件独有的 API 属性
-
-### 事件
-
-| 属性名                 | 类型                                                                                             | 描述             | 默认值                                |
-| ---------------------- | ------------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------- | --- |
-| onClick                | `(event: MouseEvent) => void                                                                     | boolean`         | 点击事件，如果返回 false 可以阻塞重置 | -   |
-| onResetValidateSuccess | (payload: any) => void                                                                           | 重置校验成功事件 | -                                     |
-| onResetValidateFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 重置校验失败事件 | -                                     |
diff --git a/docs/guide/select.md b/docs/guide/select.md
deleted file mode 100644
index 956e154..0000000
--- a/docs/guide/select.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Select
-
-> 下拉框组件
-
-## Markup Schema 同步数据源案例
-
-<dumi-previewer demoPath="guide/select/markup-schema-sync" />
-
-## Markup Schema 异步搜索案例
-
-<dumi-previewer demoPath="guide/select/markup-schema-async-search" />
-
-## Markup Schema 异步联动数据源案例
-
-<dumi-previewer demoPath="guide/select/markup-schema-async" />
-
-## JSON Schema 同步数据源案例
-
-<dumi-previewer demoPath="guide/select/json-schema-sync" />
-
-## JSON Schema 异步联动数据源案例
-
-<dumi-previewer demoPath="guide/select/json-schema-async" />
-
-## Template 同步数据源案例
-
-<dumi-previewer demoPath="guide/select/template-sync" />
-
-## Template 异步联动数据源案例
-
-<dumi-previewer demoPath="guide/select/template-async" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/select](https://element.eleme.io/#/zh-CN/component/select)
-
-### 扩展属性
-
-| 属性名  | 类型                                                                                       | 描述 | 默认值 |
-| ------- | ------------------------------------------------------------------------------------------ | ---- | ------ |
-| options | [SelectOptionProps](https://element.eleme.io/#/zh-CN/component/select#option-attributes)[] | 选项 | []     |
diff --git a/docs/guide/space.md b/docs/guide/space.md
deleted file mode 100644
index fd1bb87..0000000
--- a/docs/guide/space.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Space
-
-> 超级便捷的 Flex 布局组件，可以帮助用户快速实现任何元素的并排紧挨布局
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/space/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/space/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/space/template" />
-
-## API
-
-参考 [https://ant.design/components/space-cn/](https://ant.design/components/space-cn/)
diff --git a/docs/guide/submit.md b/docs/guide/submit.md
deleted file mode 100644
index efdf6a4..0000000
--- a/docs/guide/submit.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Submit
-
-> 提交按钮
-
-## 普通提交
-
-<dumi-previewer demoPath="guide/submit/base" />
-
-## 防重提交
-
-<dumi-previewer demoPath="guide/submit/loading" />
-
-## API
-
-按钮相关的 API 属性，我们参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button) 即可，剩下是 Submit 组件独有的 API 属性
-
-| 属性名          | 类型                                                                                             | 描述                 | 默认值                                |
-| --------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------------------------------------- | --- |
-| onClick         | `(event: MouseEvent) => void                                                                     | boolean`             | 点击事件，如果返回 false 可以阻塞提交 | -   |
-| onSubmit        | `(values: any) => Promise<any>                                                                   | any`                 | 提交事件回调                          | -   |
-| onSubmitSuccess | (payload: any) => void                                                                           | 提交成功响应事件     | -                                     |
-| onSubmitFailed  | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | -                                     |
diff --git a/docs/guide/switch.md b/docs/guide/switch.md
deleted file mode 100644
index 5d6cd40..0000000
--- a/docs/guide/switch.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Switch
-
-> 开关组件
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/switch/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/switch/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/switch/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/switch](https://element.eleme.io/#/zh-CN/component/switch)
diff --git a/docs/guide/time-picker.md b/docs/guide/time-picker.md
deleted file mode 100644
index ab0e18d..0000000
--- a/docs/guide/time-picker.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# TimePicker
-
-> 时间选择器
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/time-picker/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/time-picker/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/time-picker/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/time-picker](https://element.eleme.io/#/zh-CN/component/time-picker)
diff --git a/docs/guide/transfer.md b/docs/guide/transfer.md
deleted file mode 100644
index 0af1e7d..0000000
--- a/docs/guide/transfer.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Transfer
-
-> 穿梭框
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/transfer/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/transfer/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/transfer/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/transfer](https://element.eleme.io/#/zh-CN/component/transfer)
diff --git a/docs/guide/upload.md b/docs/guide/upload.md
deleted file mode 100644
index cc9a1a5..0000000
--- a/docs/guide/upload.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Upload
-
-> 上传组件
->
-> 注意：使用上传组件，推荐用户进行二次封装，用户无需关心上传组件与 Formily 的数据通信，只需要处理样式与基本上传配置即可。
-
-## Markup Schema 案例
-
-<dumi-previewer demoPath="guide/upload/markup-schema" />
-
-## JSON Schema 案例
-
-<dumi-previewer demoPath="guide/upload/json-schema" />
-
-## Template 案例
-
-<dumi-previewer demoPath="guide/upload/template" />
-
-## API
-
-参考 [https://element.eleme.io/#/zh-CN/component/upload](https://element.eleme.io/#/zh-CN/component/upload)
diff --git a/lerna.json b/lerna.json
index 70fa5ef..436271f 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "npmClientArgs": ["--ignore-engines"],
diff --git a/packages/.eslintrc b/packages/.eslintrc
index cc2583e..009293d 100644
--- a/packages/.eslintrc
+++ b/packages/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "parser": "@typescript-eslint/parser",
+  "parser": "vue-eslint-parser",
   "extends": [
     "plugin:vue/vue3-recommended",
     "plugin:@typescript-eslint/recommended",
@@ -11,6 +11,7 @@
   "plugins": ["@typescript-eslint", "prettier", "markdown"],
   "parserOptions": {
     "sourceType": "module",
+    "parser": "@typescript-eslint/parser",
     "ecmaVersion": 10,
     "ecmaFeatures": {
       "jsx": true
@@ -45,7 +46,10 @@
     ],
     "prefer-const": 0,
     "no-var": 1,
-    "prefer-rest-params": 0
+    "prefer-rest-params": 0,
+    "vue/one-component-per-file": 0,
+    "vue/require-default-prop": 0,
+    "vue/max-attributes-per-line": 0
   },
   "overrides": [
     {
@@ -67,6 +71,12 @@
         "no-unused-vars": "off",
         "no-console": "off"
       }
+    },
+    {
+      "files": ["**/*/docs/**/*.{js,ts,tsx,vue}"],
+      "rules": {
+        "no-console": "off"
+      }
     }
   ]
 }
diff --git a/packages/components/build-style.ts b/packages/components/build-style.ts
deleted file mode 100644
index 46a2788..0000000
--- a/packages/components/build-style.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { build } from '../../scripts/build-style'
-
-build({
-  esStr: 'element/es/',
-  libStr: 'element/lib/',
-  allStylesOutputFile: 'dist/element-plus.css',
-})
diff --git a/packages/components/docs/demos/guide/cascader/json-schema.vue b/packages/components/docs/demos/guide/cascader/json-schema.vue
index 8f0f442..f1787fa 100644
--- a/packages/components/docs/demos/guide/cascader/json-schema.vue
+++ b/packages/components/docs/demos/guide/cascader/json-schema.vue
@@ -13,7 +13,6 @@ import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
 import { action } from '@formily/reactive'
-import axios from 'axios'
 
 const transformAddress = (data = {}) => {
   return Object.entries(data).reduce(
@@ -52,9 +51,9 @@ const transformAddress = (data = {}) => {
 const useAsyncDataSource = (url, transform) => {
   return (field) => {
     field.loading = true
-    axios
-      .get(url)
-      .then((res) => res.data)
+
+    fetch(url)
+      .then((res) => res.json())
       .then(
         action.bound((data) => {
           field.dataSource = transform(data)
diff --git a/packages/components/docs/demos/guide/cascader/markup-schema.vue b/packages/components/docs/demos/guide/cascader/markup-schema.vue
index 0ab7c03..441cfba 100644
--- a/packages/components/docs/demos/guide/cascader/markup-schema.vue
+++ b/packages/components/docs/demos/guide/cascader/markup-schema.vue
@@ -24,7 +24,6 @@ import { createForm, onFieldReact, DataField } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
 import { action } from '@formily/reactive'
-import axios from 'axios'
 
 const transformAddress = (data = {}) => {
   return Object.entries(data).reduce(
@@ -63,8 +62,8 @@ const transformAddress = (data = {}) => {
 const useAddress = (pattern) => {
   onFieldReact(pattern, (field: DataField) => {
     field.loading = true
-    axios('//unpkg.com/china-location/dist/location.json')
-      .then((res) => res.data)
+    fetch('//unpkg.com/china-location/dist/location.json')
+      .then((res) => res.json())
       .then(
         action.bound((data) => {
           field.dataSource = transformAddress(data)
diff --git a/packages/components/docs/demos/guide/cascader/template.vue b/packages/components/docs/demos/guide/cascader/template.vue
index e98df22..f65f562 100644
--- a/packages/components/docs/demos/guide/cascader/template.vue
+++ b/packages/components/docs/demos/guide/cascader/template.vue
@@ -24,7 +24,6 @@ import { createForm, onFieldReact, DataField } from '@formily/core'
 import { Field } from '@formily/vue'
 import { Form, FormItem, Cascader, Submit } from '@formily/element-plus'
 import { action } from '@formily/reactive'
-import axios from 'axios'
 
 const transformAddress = (data = {}) => {
   return Object.entries(data).reduce(
@@ -63,8 +62,8 @@ const transformAddress = (data = {}) => {
 const useAddress = (pattern) => {
   onFieldReact(pattern, (field: DataField) => {
     field.loading = true
-    axios('//unpkg.com/china-location/dist/location.json')
-      .then((res) => res.data)
+    fetch('//unpkg.com/china-location/dist/location.json')
+      .then((res) => res.json())
       .then(
         action.bound((data) => {
           field.dataSource = transformAddress(data)
diff --git a/packages/components/docs/demos/guide/form-dialog/json-schema.vue b/packages/components/docs/demos/guide/form-dialog/json-schema.vue
index cb5176b..37c25a8 100644
--- a/packages/components/docs/demos/guide/form-dialog/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-dialog/json-schema.vue
@@ -1,10 +1,10 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <ElButton @click="handleOpen">点击打开表单</ElButton>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormDialog, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { createSchemaField } from '@formily/vue'
 const { SchemaField } = createSchemaField({
   components: {
@@ -65,39 +65,31 @@ const DialogForm = {
   },
 }
 
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', DialogForm)
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
-        })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
+const handleOpen = () => {
+  FormDialog('弹框表单', DialogForm)
+    .forOpen((payload, next) => {
+      setTimeout(() => {
+        next({
+          initialValues: {
+            aaa: '123',
+          },
         })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
+      }, 1000)
+    })
+    .forConfirm((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .forCancel((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .open()
+    .then(console.log)
+    .catch(console.error)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-dialog/markup-schema.vue b/packages/components/docs/demos/guide/form-dialog/markup-schema.vue
index 0c2910c..1c60b5b 100644
--- a/packages/components/docs/demos/guide/form-dialog/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-dialog/markup-schema.vue
@@ -1,12 +1,13 @@
 <template>
   <FormDialogPortal :id="portalId">
-    <Button @click="handleOpen">点击打开表单</Button>
+    <ElButton @click="handleOpen">点击打开表单</ElButton>
   </FormDialogPortal>
 </template>
 
-<script>
+<script setup lang="tsx">
+import { ref, provide } from 'vue'
 import { FormDialog, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { createSchemaField } from '@formily/vue'
 
 const { SchemaField, SchemaStringField } = createSchemaField({
@@ -63,44 +64,35 @@ const DialogForm = {
   },
 }
 
-export default {
-  components: { Button, FormDialogPortal: FormDialog.Portal },
-  data() {
-    return {
-      portalId: '可以传，也可以不传的ID，默认是form-dialog',
-    }
-  },
-  provide: {
-    foo: '自定义上下文可以直接传到弹窗内部，只需要ID一致即可',
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', this.portalId, DialogForm)
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
-        })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
+const FormDialogPortal = FormDialog.Portal
+const portalId = ref('可以传，也可以不传的ID，默认是form-dialog')
+provide('foo', '自定义上下文可以直接传到弹窗内部，只需要ID一致即可')
+
+const handleOpen = () => {
+  FormDialog('弹框表单', portalId.value, DialogForm)
+    .forOpen((payload, next) => {
+      setTimeout(() => {
+        next({
+          initialValues: {
+            aaa: '123',
+          },
         })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
+      }, 1000)
+    })
+    .forConfirm((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .forCancel((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .open()
+    .then(console.log)
+    .catch(console.error)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-dialog/template.vue b/packages/components/docs/demos/guide/form-dialog/template.vue
index 8971f45..d46e2f9 100644
--- a/packages/components/docs/demos/guide/form-dialog/template.vue
+++ b/packages/components/docs/demos/guide/form-dialog/template.vue
@@ -1,79 +1,71 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <ElButton @click="handleOpen">点击打开表单</ElButton>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormDialog, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { Field } from '@formily/vue'
 
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDialog('弹框表单', () => (
-        <FormLayout labelCol={6} wrapperCol={10}>
-          <Field
-            name="aaa"
-            required
-            title="输入框1"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="bbb"
-            required
-            title="输入框2"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ccc"
-            required
-            title="输入框3"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ddd"
-            required
-            title="输入框4"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <FormDialog.Footer>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDialog.Footer>
-        </FormLayout>
-      ))
-        .forOpen((payload, next) => {
-          setTimeout(() => {
-            next({
-              initialValues: {
-                aaa: '123',
-              },
-            })
-          }, 1000)
+const handleOpen = () => {
+  FormDialog('弹框表单', () => (
+    <FormLayout labelCol={6} wrapperCol={10}>
+      <Field
+        name="aaa"
+        required
+        title="输入框1"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="bbb"
+        required
+        title="输入框2"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="ccc"
+        required
+        title="输入框3"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="ddd"
+        required
+        title="输入框4"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <FormDialog.Footer>
+        <span style={{ marginLeft: '4px' }}>扩展文案</span>
+      </FormDialog.Footer>
+    </FormLayout>
+  ))
+    .forOpen((payload, next) => {
+      setTimeout(() => {
+        next({
+          initialValues: {
+            aaa: '123',
+          },
         })
-        .forConfirm((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .forCancel((payload, next) => {
-          setTimeout(() => {
-            console.log(payload)
-            next(payload)
-          }, 1000)
-        })
-        .open()
-        .then(console.log)
-        .catch(console.error)
-    },
-  },
+      }, 1000)
+    })
+    .forConfirm((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .forCancel((payload, next) => {
+      setTimeout(() => {
+        console.log(payload)
+        next(payload)
+      }, 1000)
+    })
+    .open()
+    .then(console.log)
+    .catch(console.error)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-drawer/json-schema.vue b/packages/components/docs/demos/guide/form-drawer/json-schema.vue
index 8a6a129..b55a664 100644
--- a/packages/components/docs/demos/guide/form-drawer/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-drawer/json-schema.vue
@@ -1,10 +1,10 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <ElButton @click="handleOpen">点击打开表单</ElButton>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { createSchemaField } from '@formily/vue'
 const { SchemaField } = createSchemaField({
   components: {
@@ -65,26 +65,18 @@ const DrawerForm = {
   },
 }
 
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', DrawerForm)
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
+const handleOpen = () => {
+  FormDrawer('抽屉表单', DrawerForm)
+    .open({
+      initialValues: {
+        aaa: '123',
+      },
+    })
+    .then((values) => {
+      console.log('values', values)
+    })
+    .catch((e) => {
+      console.log(e)
+    })
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-drawer/markup-schema.vue b/packages/components/docs/demos/guide/form-drawer/markup-schema.vue
index cd02c22..c16bc00 100644
--- a/packages/components/docs/demos/guide/form-drawer/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-drawer/markup-schema.vue
@@ -1,10 +1,10 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <ElButton @click="handleOpen">点击打开表单</ElButton>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { createSchemaField } from '@formily/vue'
 
 const { SchemaField } = createSchemaField({
@@ -67,26 +67,18 @@ const DrawerForm = {
   },
 }
 
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', DrawerForm)
-        .forOpen((props, next) => {
-          setTimeout(() => {
-            next()
-          }, 1000)
-        })
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then(console.log)
-    },
-  },
+const handleOpen = () => {
+  FormDrawer('抽屉表单', DrawerForm)
+    .forOpen((props, next) => {
+      setTimeout(() => {
+        next()
+      }, 1000)
+    })
+    .open({
+      initialValues: {
+        aaa: '123',
+      },
+    })
+    .then(console.log)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-drawer/template.vue b/packages/components/docs/demos/guide/form-drawer/template.vue
index e2fb2ac..eafb73c 100644
--- a/packages/components/docs/demos/guide/form-drawer/template.vue
+++ b/packages/components/docs/demos/guide/form-drawer/template.vue
@@ -1,66 +1,58 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <ElButton @click="handleOpen">点击打开表单</ElButton>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 import { Field } from '@formily/vue'
 
-export default {
-  components: { Button },
-  data() {
-    return {}
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer('抽屉表单', () => (
-        <FormLayout labelCol={6} wrapperCol={10}>
-          <Field
-            name="aaa"
-            required
-            title="输入框1"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="bbb"
-            required
-            title="输入框2"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ccc"
-            required
-            title="输入框3"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <Field
-            name="ddd"
-            required
-            title="输入框4"
-            decorator={[FormItem]}
-            component={[Input]}
-          />
-          <FormDrawer.Footer>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDrawer.Footer>
-        </FormLayout>
-      ))
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
+const handleOpen = () => {
+  FormDrawer('抽屉表单', () => (
+    <FormLayout labelCol={6} wrapperCol={10}>
+      <Field
+        name="aaa"
+        required
+        title="输入框1"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="bbb"
+        required
+        title="输入框2"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="ccc"
+        required
+        title="输入框3"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <Field
+        name="ddd"
+        required
+        title="输入框4"
+        decorator={[FormItem]}
+        component={[Input]}
+      />
+      <FormDrawer.Footer>
+        <span style={{ marginLeft: '4px' }}>扩展文案</span>
+      </FormDrawer.Footer>
+    </FormLayout>
+  ))
+    .open({
+      initialValues: {
+        aaa: '123',
+      },
+    })
+    .then((values) => {
+      console.log('values', values)
+    })
+    .catch((e) => {
+      console.log(e)
+    })
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-grid/form.vue b/packages/components/docs/demos/guide/form-grid/form.vue
index 8f879f2..b4bfb6a 100644
--- a/packages/components/docs/demos/guide/form-grid/form.vue
+++ b/packages/components/docs/demos/guide/form-grid/form.vue
@@ -39,7 +39,7 @@
           x-component="DatePicker"
           x-decorator="FormItem"
           :x-decorator-props="{
-            gridSpan: 2,
+            gridSpan: 'span 2',
           }"
           :x-component-props="{
             type: 'daterange',
@@ -56,8 +56,8 @@
   </FormProvider>
 </template>
 
-<script>
-import { defineComponent, ref, onUnmounted } from '@vue/composition-api'
+<script setup lang="tsx">
+import { defineComponent, ref, onUnmounted } from 'vue'
 import { createForm } from '@formily/core'
 import {
   createSchemaField,
@@ -197,27 +197,15 @@ const QueryForm = observer(
 )
 
 const form = createForm()
-const fields = createSchemaField({
-  components: {
-    QueryForm,
-    Input,
-    Select,
-    DatePicker,
-    FormItem,
-  },
-})
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
+const { SchemaField, SchemaObjectField, SchemaStringField } = createSchemaField(
+  {
+    components: {
+      QueryForm,
+      Input,
+      Select,
+      DatePicker,
+      FormItem,
     },
-  },
-}
+  }
+)
 </script>
diff --git a/packages/components/docs/demos/guide/form-grid/json-schema.vue b/packages/components/docs/demos/guide/form-grid/json-schema.vue
index 965e4ec..13b495b 100644
--- a/packages/components/docs/demos/guide/form-grid/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-grid/json-schema.vue
@@ -5,7 +5,7 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import { FormItem, Input, Submit, FormGrid } from '@formily/element-plus'
@@ -76,19 +76,7 @@ const { SchemaField } = createSchemaField({
   },
 })
 
-export default {
-  components: { FormProvider, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
+const onSubmit = (value) => {
+  console.log(value)
 }
 </script>
-l
diff --git a/packages/components/docs/demos/guide/form-grid/markup-schema.vue b/packages/components/docs/demos/guide/form-grid/markup-schema.vue
index 4e2ed44..3b062f5 100644
--- a/packages/components/docs/demos/guide/form-grid/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-grid/markup-schema.vue
@@ -12,7 +12,7 @@
           name="aaa"
           title="aaa"
           x-decorator="FormItem"
-          :x-decorator-props="{ gridSpan: 2 }"
+          :x-decorator-props="{ gridSpan: 'span 2' }"
           x-component="Input"
         />
         <SchemaStringField
@@ -57,13 +57,13 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import { FormItem, Input, Submit, FormGrid } from '@formily/element-plus'
 
 const form = createForm()
-const fields = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: {
     FormItem,
     Input,
@@ -71,17 +71,7 @@ const fields = createSchemaField({
   },
 })
 
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
+const onSubmit = (value) => {
+  console.log(value)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-grid/native.vue b/packages/components/docs/demos/guide/form-grid/native.vue
index 182b6da..75e80a4 100644
--- a/packages/components/docs/demos/guide/form-grid/native.vue
+++ b/packages/components/docs/demos/guide/form-grid/native.vue
@@ -141,30 +141,24 @@
   </div>
 </template>
 
-<script>
+<script setup lang="tsx">
 import { FormGrid } from '@formily/element-plus'
 
-const Cell = {
-  functional: true,
-  render(h, context) {
-    return h(
-      'div',
-      {
-        style: {
-          backgroundColor: '#AAA',
-          color: '#FFF',
-          height: '30px',
-          display: 'flex',
-          alignItems: 'center',
-          padding: '0 10px',
-        },
-      },
-      context.children
-    )
-  },
-}
-
-export default {
-  components: { FormGrid, FormGridColumn: FormGrid.GridColumn, Cell },
+const Cell = (_props, { slots }) => {
+  return (
+    <div
+      style={{
+        backgroundColor: '#AAA',
+        color: '#FFF',
+        height: '30px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+      }}
+    >
+      {slots?.default()}
+    </div>
+  )
 }
+const FormGridColumn = FormGrid.GridColumn
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/bordered-none.vue b/packages/components/docs/demos/guide/form-item/bordered-none.vue
index 033d6f6..d3aba4d 100644
--- a/packages/components/docs/demos/guide/form-item/bordered-none.vue
+++ b/packages/components/docs/demos/guide/form-item/bordered-none.vue
@@ -65,7 +65,7 @@
   </Form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import {
@@ -80,29 +80,16 @@ import {
 } from '@formily/element-plus'
 
 const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
+const { SchemaField, SchemaStringField, SchemaBooleanField } =
+  createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      Cascader,
+      DatePicker,
+      Switch,
+      InputNumber,
     },
-  },
-}
+  })
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/common.vue b/packages/components/docs/demos/guide/form-item/common.vue
index c9c73de..894f40e 100644
--- a/packages/components/docs/demos/guide/form-item/common.vue
+++ b/packages/components/docs/demos/guide/form-item/common.vue
@@ -391,7 +391,8 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
+import { h } from 'vue'
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import {
@@ -405,24 +406,18 @@ import {
   TimePicker,
 } from '@formily/element-plus'
 
-const SuccessIcon = {
-  functional: true,
-  render(h) {
-    return h('i', {
-      class: 'el-icon-circle-check',
-      style: { color: '#8AE65C' },
-    })
-  },
+const SuccessIcon = () => {
+  return h('i', {
+    class: 'el-icon-circle-check',
+    style: { color: '#8AE65C' },
+  })
 }
 
-const Title = {
-  functional: true,
-  render(h, context) {
-    return h('p', context.data, context.children)
-  },
+const Title = (props, { slots }) => {
+  return h('p', props, slots.default?.())
 }
 
-const fields = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: {
     Title,
     FormItem,
@@ -436,14 +431,5 @@ const fields = createSchemaField({
   },
 })
 
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-      SuccessIcon,
-    }
-  },
-}
+const form = createForm()
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/feedback.vue b/packages/components/docs/demos/guide/form-item/feedback.vue
index ff61946..d75575f 100644
--- a/packages/components/docs/demos/guide/form-item/feedback.vue
+++ b/packages/components/docs/demos/guide/form-item/feedback.vue
@@ -200,7 +200,8 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
+import { h } from 'vue'
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import {
@@ -214,24 +215,18 @@ import {
   TimePicker,
 } from '@formily/element-plus'
 
-const SuccessIcon = {
-  functional: true,
-  render(h) {
-    return h('i', {
-      class: 'el-icon-circle-check',
-      style: { color: '#8AE65C' },
-    })
-  },
+const SuccessIcon = () => {
+  return h('i', {
+    class: 'el-icon-circle-check',
+    style: { color: '#8AE65C' },
+  })
 }
 
-const Title = {
-  functional: true,
-  render(h, context) {
-    return h('p', context.data, context.children)
-  },
+const Title = (props, { slots }) => {
+  return h('p', props, slots.default?.())
 }
 
-const fields = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: {
     Title,
     FormItem,
@@ -244,15 +239,5 @@ const fields = createSchemaField({
     TimePicker,
   },
 })
-
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-      SuccessIcon,
-    }
-  },
-}
+const form = createForm()
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/inset.vue b/packages/components/docs/demos/guide/form-item/inset.vue
index 9f95c1c..d48c814 100644
--- a/packages/components/docs/demos/guide/form-item/inset.vue
+++ b/packages/components/docs/demos/guide/form-item/inset.vue
@@ -65,7 +65,7 @@
   </Form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import {
@@ -80,29 +80,16 @@ import {
 } from '@formily/element-plus'
 
 const form = createForm()
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
+const { SchemaField, SchemaStringField, SchemaBooleanField } =
+  createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      Cascader,
+      DatePicker,
+      Switch,
+      InputNumber,
     },
-  },
-}
+  })
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/json-schema.vue b/packages/components/docs/demos/guide/form-item/json-schema.vue
index 2398e04..3de8aa7 100644
--- a/packages/components/docs/demos/guide/form-item/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-item/json-schema.vue
@@ -5,7 +5,7 @@
   </Form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import { Form, FormItem, Input, Submit } from '@formily/element-plus'
@@ -30,18 +30,7 @@ const { SchemaField } = createSchemaField({
   },
 })
 
-export default {
-  components: { Form, SchemaField, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
+const onSubmit = (value) => {
+  console.log(value)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/markup-schema.vue b/packages/components/docs/demos/guide/form-item/markup-schema.vue
index ffb153c..768a15e 100644
--- a/packages/components/docs/demos/guide/form-item/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-item/markup-schema.vue
@@ -13,30 +13,20 @@
   </Form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import { Form, FormItem, Input, Submit } from '@formily/element-plus'
 
 const form = createForm()
-const fields = createSchemaField({
+const { SchemaField, SchemaStringField } = createSchemaField({
   components: {
     FormItem,
     Input,
   },
 })
 
-export default {
-  components: { Form, ...fields, Submit },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
+const onSubmit = (value) => {
+  console.log(value)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/size.vue b/packages/components/docs/demos/guide/form-item/size.vue
index e39c3ab..d14852b 100644
--- a/packages/components/docs/demos/guide/form-item/size.vue
+++ b/packages/components/docs/demos/guide/form-item/size.vue
@@ -94,8 +94,8 @@
   </Form>
 </template>
 
-<script>
-import { createForm, onFieldChange } from '@formily/core'
+<script setup lang="tsx">
+import { createForm, DataField, onFieldChange } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import {
   Form,
@@ -109,11 +109,8 @@ import {
   Radio,
 } from '@formily/element-plus'
 
-const Div = {
-  functional: true,
-  render(h, context) {
-    return h('div', context.data, context.children)
-  },
+const Div = (props, { slots }) => {
+  return <div {...props}>{slots?.default()}</div>
 }
 
 const form = createForm({
@@ -124,37 +121,24 @@ const form = createForm({
     onFieldChange('size', ['value'], (field, form) => {
       form.setFieldState('sizeWrap.*', (state) => {
         if (state.decorator[1]) {
-          state.decorator[1].size = field.value
+          state.decorator[1].size = (field as DataField).value
         }
       })
     })
   },
 })
-const fields = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    Select,
-    Cascader,
-    DatePicker,
-    Switch,
-    InputNumber,
-    Radio,
-    Div,
-  },
-})
-
-export default {
-  components: { Form, ...fields },
-  data() {
-    return {
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
+const { SchemaField, SchemaStringField, SchemaVoidField, SchemaBooleanField } =
+  createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      Cascader,
+      DatePicker,
+      Switch,
+      InputNumber,
+      Radio,
+      Div,
     },
-  },
-}
+  })
 </script>
diff --git a/packages/components/docs/demos/guide/form-item/template.vue b/packages/components/docs/demos/guide/form-item/template.vue
index dd741be..48b4a9a 100644
--- a/packages/components/docs/demos/guide/form-item/template.vue
+++ b/packages/components/docs/demos/guide/form-item/template.vue
@@ -11,26 +11,14 @@
   </Form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { Field } from '@formily/vue'
 import { Form, FormItem, Input, Submit } from '@formily/element-plus'
 
 const form = createForm()
 
-export default {
-  components: { Form, Field, Submit },
-  data() {
-    return {
-      FormItem,
-      Input,
-      form,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
+const onSubmit = (value) => {
+  console.log(value)
 }
 </script>
diff --git a/packages/components/docs/demos/guide/form-layout/json-schema.vue b/packages/components/docs/demos/guide/form-layout/json-schema.vue
index 9c3df69..a134b0f 100644
--- a/packages/components/docs/demos/guide/form-layout/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-layout/json-schema.vue
@@ -4,7 +4,7 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import {
@@ -50,7 +50,7 @@ const schema = {
 }
 
 const form = createForm()
-const fields = createSchemaField({
+const { SchemaField } = createSchemaField({
   components: {
     FormLayout,
     FormItem,
@@ -58,19 +58,4 @@ const fields = createSchemaField({
     Select,
   },
 })
-
-export default {
-  components: { FormProvider, ...fields, Submit },
-  data() {
-    return {
-      form,
-      schema,
-    }
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value)
-    },
-  },
-}
 </script>
diff --git a/packages/components/docs/demos/guide/form-layout/markup-schema.vue b/packages/components/docs/demos/guide/form-layout/markup-schema.vue
index 028b18c..898dc4f 100644
--- a/packages/components/docs/demos/guide/form-layout/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-layout/markup-schema.vue
@@ -30,22 +30,13 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
 import { FormLayout, FormItem, Input, Select } from '@formily/element-plus'
 
-const fields = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: { FormLayout, FormItem, Input, Select },
 })
-
-export default {
-  components: { FormProvider, ...fields },
-  data() {
-    const form = createForm()
-    return {
-      form,
-    }
-  },
-}
+const form = createForm()
 </script>
diff --git a/packages/components/docs/demos/guide/form-layout/template.vue b/packages/components/docs/demos/guide/form-layout/template.vue
index f173ca9..2d0d0eb 100644
--- a/packages/components/docs/demos/guide/form-layout/template.vue
+++ b/packages/components/docs/demos/guide/form-layout/template.vue
@@ -2,10 +2,10 @@
   <FormProvider :form="form">
     <FormLayout
       :breakpoints="[680]"
-      :layout="['vertical', 'horizontal']"
-      :labelAlign="['left', 'right']"
-      :labelCol="[24, 6]"
-      :wrapperCol="[24, 10]"
+      layout="horizontal"
+      label-align="left"
+      :label-col="6"
+      :wrapper-col="10"
     >
       <Field
         name="input"
@@ -30,22 +30,10 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { FormProvider, Field } from '@formily/vue'
 import { FormLayout, FormItem, Input, Select } from '@formily/element-plus'
 
-export default {
-  components: { FormProvider, Field, FormLayout },
-  data() {
-    const form = createForm()
-    return {
-      FormLayout,
-      FormItem,
-      Input,
-      Select,
-      form,
-    }
-  },
-}
+const form = createForm()
 </script>
diff --git a/packages/components/docs/demos/guide/form-step/json-schema.vue b/packages/components/docs/demos/guide/form-step/json-schema.vue
index c3d3bc1..af91320 100644
--- a/packages/components/docs/demos/guide/form-step/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-step/json-schema.vue
@@ -4,7 +4,7 @@
     <FormConsumer>
       <template #default>
         <FormButtonGroup>
-          <Button
+          <ElButton
             :disabled="!formStep.allowBack"
             @click="
               () => {
@@ -13,8 +13,8 @@
             "
           >
             上一步
-          </Button>
-          <Button
+          </ElButton>
+          <ElButton
             :disabled="!formStep.allowNext"
             @click="
               () => {
@@ -23,7 +23,7 @@
             "
           >
             下一步
-          </Button>
+          </ElButton>
           <Submit :disabled="formStep.allowNext" @submit="log">提交</Submit>
         </FormButtonGroup>
       </template>
@@ -31,7 +31,7 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue'
 import {
@@ -41,7 +41,7 @@ import {
   Submit,
   Input,
 } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 
 const { SchemaField } = createSchemaField({
   components: {
@@ -86,7 +86,7 @@ const schema = {
           properties: {
             bbb: {
               type: 'string',
-              title: 'AAA',
+              title: 'BBB',
               required: true,
               'x-decorator': 'FormItem',
               'x-component': 'Input',
@@ -102,7 +102,7 @@ const schema = {
           properties: {
             ccc: {
               type: 'string',
-              title: 'AAA',
+              title: 'CCC',
               required: true,
               'x-decorator': 'FormItem',
               'x-component': 'Input',
@@ -113,31 +113,11 @@ const schema = {
     },
   },
 }
+const form = createForm()
+const formStep = FormStep.createFormStep()
 
-export default {
-  components: {
-    FormProvider,
-    FormConsumer,
-    FormButtonGroup,
-    Button,
-    Submit,
-    SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formStep = FormStep.createFormStep()
-    return {
-      schema,
-      form,
-      formStep,
-    }
-  },
-  methods: {
-    log() {
-      this.formStep.submit(console.log)
-    },
-  },
+const log = () => {
+  formStep.submit(console.log)
 }
 </script>
 
diff --git a/packages/components/docs/demos/guide/form-step/markup-schema.vue b/packages/components/docs/demos/guide/form-step/markup-schema.vue
index 363f6f1..dd80bfe 100644
--- a/packages/components/docs/demos/guide/form-step/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-step/markup-schema.vue
@@ -41,7 +41,7 @@
     <FormConsumer>
       <template #default>
         <FormButtonGroup>
-          <Button
+          <ElButton
             :disabled="!formStep.allowBack"
             @click="
               () => {
@@ -50,8 +50,8 @@
             "
           >
             上一步
-          </Button>
-          <Button
+          </ElButton>
+          <ElButton
             :disabled="!formStep.allowNext"
             @click="
               () => {
@@ -60,7 +60,7 @@
             "
           >
             下一步
-          </Button>
+          </ElButton>
           <Submit :disabled="formStep.allowNext" @submit="log">提交</Submit>
         </FormButtonGroup>
       </template>
@@ -68,7 +68,7 @@
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue'
 import {
@@ -78,10 +78,9 @@ import {
   Submit,
   Input,
 } from '@formily/element-plus'
-import { Button } from 'element-ui'
-import Template from '../editable/template.vue'
+import { ElButton } from 'element-plus'
 
-const SchemaField = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: {
     FormItem,
     FormStep,
@@ -89,31 +88,10 @@ const SchemaField = createSchemaField({
   },
 })
 const formStep = FormStep.createFormStep()
+const form = createForm()
 
-export default {
-  components: {
-    FormConsumer,
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    Template,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-
-    return {
-      form,
-      formStep,
-    }
-  },
-  methods: {
-    log() {
-      this.formStep.submit(console.log)
-    },
-  },
+const log = () => {
+  formStep.submit(console.log)
 }
 </script>
 
diff --git a/packages/components/docs/demos/guide/form-tab/json-schema.vue b/packages/components/docs/demos/guide/form-tab/json-schema.vue
index e828f90..dfa9077 100644
--- a/packages/components/docs/demos/guide/form-tab/json-schema.vue
+++ b/packages/components/docs/demos/guide/form-tab/json-schema.vue
@@ -2,7 +2,7 @@
   <FormProvider :form="form">
     <SchemaField :schema="schema" :scope="{ formTab }" />
     <FormButtonGroup alignFormItem>
-      <Button
+      <ElButton
         @click="
           () => {
             form.query('tab3').take((field) => {
@@ -12,8 +12,8 @@
         "
       >
         显示/隐藏最后一个Tab
-      </Button>
-      <Button
+      </ElButton>
+      <ElButton
         @click="
           () => {
             formTab.setActiveKey('tab2')
@@ -21,13 +21,13 @@
         "
       >
         切换第二个Tab
-      </Button>
+      </ElButton>
       <Submit @submit="log">提交</Submit>
     </FormButtonGroup>
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/vue'
 import {
@@ -37,7 +37,7 @@ import {
   Submit,
   Input,
 } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 
 const { SchemaField } = createSchemaField({
   components: {
@@ -110,30 +110,11 @@ const schema = {
   },
 }
 
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formTab = FormTab.createFormTab()
+const form = createForm()
+const formTab = FormTab.createFormTab()
 
-    return {
-      schema,
-      form,
-      formTab,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
+const log = (values) => {
+  console.log(values)
 }
 </script>
 
diff --git a/packages/components/docs/demos/guide/form-tab/markup-schema.vue b/packages/components/docs/demos/guide/form-tab/markup-schema.vue
index 446e8d7..32801e4 100644
--- a/packages/components/docs/demos/guide/form-tab/markup-schema.vue
+++ b/packages/components/docs/demos/guide/form-tab/markup-schema.vue
@@ -49,7 +49,7 @@
       </SchemaVoidField>
     </SchemaField>
     <FormButtonGroup alignFormItem>
-      <Button
+      <ElButton
         @click="
           () => {
             form.query('tab3').take((field) => {
@@ -59,8 +59,8 @@
         "
       >
         显示/隐藏最后一个Tab
-      </Button>
-      <Button
+      </ElButton>
+      <ElButton
         @click="
           () => {
             formTab.setActiveKey('tab2')
@@ -68,13 +68,13 @@
         "
       >
         切换第二个Tab
-      </Button>
+      </ElButton>
       <Submit @submit="log">提交</Submit>
     </FormButtonGroup>
   </FormProvider>
 </template>
 
-<script>
+<script setup lang="ts">
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/vue'
 import {
@@ -84,9 +84,9 @@ import {
   Submit,
   Input,
 } from '@formily/element-plus'
-import { Button } from 'element-ui'
+import { ElButton } from 'element-plus'
 
-const SchemaField = createSchemaField({
+const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
   components: {
     FormItem,
     FormTab,
@@ -94,29 +94,11 @@ const SchemaField = createSchemaField({
   },
 })
 
-export default {
-  components: {
-    FormProvider,
-    FormButtonGroup,
-    Button,
-    Submit,
-    ...SchemaField,
-  },
-
-  data() {
-    const form = createForm()
-    const formTab = FormTab.createFormTab()
+const form = createForm()
+const formTab = FormTab.createFormTab()
 
-    return {
-      form,
-      formTab,
-    }
-  },
-  methods: {
-    log(values) {
-      console.log(values)
-    },
-  },
+const log = (values) => {
+  console.log(values)
 }
 </script>
 
diff --git a/packages/components/docs/demos/guide/upload/json-schema.vue b/packages/components/docs/demos/guide/upload/json-schema.vue
index ce36547..38d467f 100644
--- a/packages/components/docs/demos/guide/upload/json-schema.vue
+++ b/packages/components/docs/demos/guide/upload/json-schema.vue
@@ -21,7 +21,7 @@ import {
 import { ElButton } from 'element-plus'
 
 const UploadButton = () => {
-  return h(ElButton, {}, '上传图片')
+  return h(ElButton, {}, { default: () => '上传图片' })
 }
 
 const schema = {
diff --git a/packages/components/docs/demos/guide/upload/markup-schema.vue b/packages/components/docs/demos/guide/upload/markup-schema.vue
index 843dda7..f7586c1 100644
--- a/packages/components/docs/demos/guide/upload/markup-schema.vue
+++ b/packages/components/docs/demos/guide/upload/markup-schema.vue
@@ -67,7 +67,7 @@ import {
 import { ElButton } from 'element-plus'
 
 const UploadButton = () => {
-  return h(ElButton, {}, '上传图片')
+  return h(ElButton, {}, { default: () => '上传图片' })
 }
 
 const form = createForm()
diff --git a/packages/components/docs/demos/guide/upload/template.vue b/packages/components/docs/demos/guide/upload/template.vue
index 568d28f..6c9dd29 100644
--- a/packages/components/docs/demos/guide/upload/template.vue
+++ b/packages/components/docs/demos/guide/upload/template.vue
@@ -73,7 +73,7 @@ import {
 import { ElButton } from 'element-plus'
 
 const UploadButton = () => {
-  return h(ElButton, {}, '上传图片')
+  return h(ElButton, {}, { default: () => '上传图片' })
 }
 
 const form = createForm()
diff --git a/packages/components/docs/guide/form-collapse.md b/packages/components/docs/guide/form-collapse.md
index e4e837f..faf2ea4 100644
--- a/packages/components/docs/guide/form-collapse.md
+++ b/packages/components/docs/guide/form-collapse.md
@@ -20,11 +20,11 @@
 | ------------ | ------------- | ---------------------------------------------------------- | ------ |
 | formCollapse | IFormCollapse | 传入通过 createFormCollapse/useFormCollapse 创建出来的模型 |        |
 
-其余参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
+其余参考 [https://element-plus.gitee.io/zh-CN/component/collapse.html](https://element-plus.gitee.io/zh-CN/component/collapse.html)
 
 ### FormCollapse.Item
 
-参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
+参考 [https://element-plus.gitee.io/zh-CN/component/collapse.html#collapse-插槽](https://element-plus.gitee.io/zh-CN/component/collapse.html#collapse-插槽)
 
 ### FormCollapse.createFormCollapse
 
diff --git a/packages/components/docs/guide/form-dialog.md b/packages/components/docs/guide/form-dialog.md
index 746dfa9..f424fe3 100644
--- a/packages/components/docs/guide/form-dialog.md
+++ b/packages/components/docs/guide/form-dialog.md
@@ -66,7 +66,7 @@ interface FormDialog {
 }
 ```
 
-`DialogProps`类型定义参考 [Element-UI Dialog API](https://element.eleme.io/#/zh-CN/component/dialog#attributes)
+`DialogProps`类型定义参考 [Element-Plus Dialog API](https://element-plus.gitee.io/zh-CN/component/dialog.html#dialog-属性)
 
 ### FormDialog.Footer
 
diff --git a/packages/components/docs/guide/form-drawer.md b/packages/components/docs/guide/form-drawer.md
index 740b235..4579188 100644
--- a/packages/components/docs/guide/form-drawer.md
+++ b/packages/components/docs/guide/form-drawer.md
@@ -51,7 +51,7 @@ interface FormDrawer {
 }
 ```
 
-`DrawerProps`类型定义参考 [Element-UI Drawer API](https://element.eleme.io/#/zh-CN/component/drawer#attributes)
+`DrawerProps`类型定义参考 [Element-Plus Drawer API](https://element-plus.gitee.io/zh-CN/component/drawer.html#drawer-属性)
 
 ### FormDrawer.Footer
 
diff --git a/packages/components/docs/guide/form-grid.md b/packages/components/docs/guide/form-grid.md
index 3288642..a0bdb4c 100644
--- a/packages/components/docs/guide/form-grid.md
+++ b/packages/components/docs/guide/form-grid.md
@@ -59,7 +59,7 @@ interface createFormGrid {
 ```
 
 - IGridProps 参考 FormGrid 属性
-- Grid 实例属性方法参考 https://github.com/alibaba/formily/tree/formily_next/packages/grid
+- Grid 实例属性方法参考 [https://github.com/alibaba/formily/tree/formily_next/packages/grid](https://github.com/alibaba/formily/tree/formily_next/packages/grid)
 
 ### FormGrid.useFormGrid
 
@@ -71,4 +71,4 @@ interface useFormGrid {
 }
 ```
 
-- Grid 实例属性方法参考 https://github.com/alibaba/formily/tree/formily_next/packages/grid
+- Grid 实例属性方法参考 [https://github.com/alibaba/formily/tree/formily_next/packages/grid](https://github.com/alibaba/formily/tree/formily_next/packages/grid)
diff --git a/packages/components/docs/guide/form-step.md b/packages/components/docs/guide/form-step.md
index 256f49a..19bfa47 100644
--- a/packages/components/docs/guide/form-step.md
+++ b/packages/components/docs/guide/form-step.md
@@ -20,11 +20,11 @@
 | -------- | --------- | -------------------------------------- | ------ |
 | formStep | IFormStep | 传入通过 createFormStep 创建出来的模型 |        |
 
-其余参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
+其余参考 [https://element-plus.gitee.io/zh-CN/component/steps.html](https://element-plus.gitee.io/zh-CN/component/steps.html)
 
 ### FormStep.StepPane
 
-参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
+参考 [https://element-plus.gitee.io/zh-CN/component/steps.html](https://element-plus.gitee.io/zh-CN/component/steps.html)
 
 ### FormStep.createFormStep
 
diff --git a/packages/components/docs/guide/form-tab.md b/packages/components/docs/guide/form-tab.md
index e418720..3f76ad5 100644
--- a/packages/components/docs/guide/form-tab.md
+++ b/packages/components/docs/guide/form-tab.md
@@ -20,11 +20,11 @@
 | ------- | -------- | ------------------------------------- | ------ |
 | formTab | IFormTab | 传入通过 createFormTab 创建出来的模型 |        |
 
-其余参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
+其余参考 [https://element-plus.gitee.io/zh-CN/component/tabs.html](https://element-plus.gitee.io/zh-CN/component/tabs.html)
 
 ### FormTab.TabPane
 
-参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
+参考 [https://element-plus.gitee.io/zh-CN/component/tabs.html#tab-pane-属性](https://element-plus.gitee.io/zh-CN/component/tabs.html#tab-pane-属性)
 
 ### FormTab.createFormTab
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 621202a..4fb0177 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element-plus",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
@@ -24,12 +24,8 @@
   "scripts": {
     "start": "vuepress dev docs",
     "clean": "rimraf -rf lib esm dist",
-    "build": "rimraf -rf lib esm dist && npm run create:style && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style",
+    "build": "formily-tpl build",
     "create:style": "ts-node create-style",
-    "build:style": "ts-node build-style",
-    "build:cjs": "ttsc  --declaration",
-    "build:esm": "ttsc --declaration --module es2015 --outDir esm",
-    "build:umd": "rollup --config",
     "build:docs": "vuepress build docs"
   },
   "repository": {
@@ -48,13 +44,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.1",
-    "@formily/core": "2.0.14",
-    "@formily/grid": "2.0.14",
-    "@formily/json-schema": "2.0.14",
-    "@formily/reactive": "2.0.14",
-    "@formily/reactive-vue": "2.0.14",
-    "@formily/shared": "2.0.14",
-    "@formily/vue": "2.0.14",
+    "@formily/core": "2.0.18",
+    "@formily/grid": "2.0.18",
+    "@formily/json-schema": "2.0.18",
+    "@formily/reactive": "2.0.18",
+    "@formily/reactive-vue": "2.0.18",
+    "@formily/shared": "2.0.18",
+    "@formily/vue": "2.0.18",
     "element-plus": "^2.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "vue": "^3.2.24",
@@ -69,6 +65,6 @@
     "ttypescript": "^1.5.13",
     "vuepress": "^2.0.0-beta.38",
     "vuepress-plugin-typescript": "^0.3.1",
-    "vuepress-theme-dumi": "^0.1.0"
+    "vuepress-theme-dumi": "^0.1.1"
   }
 }
diff --git a/packages/components/rollup.config.js b/packages/components/rollup.config.js
deleted file mode 100644
index e08568c..0000000
--- a/packages/components/rollup.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseConfig, {
-  removeImportStyleFromInputFilePlugin,
-} from '../../scripts/rollup.base.js'
-
-export default baseConfig(
-  'formily.element',
-  'Formily.Element',
-  removeImportStyleFromInputFilePlugin()
-)
diff --git a/packages/components/src/array-base/index.ts b/packages/components/src/array-base/index.ts
index 1d4d31a..7940d0f 100644
--- a/packages/components/src/array-base/index.ts
+++ b/packages/components/src/array-base/index.ts
@@ -22,8 +22,6 @@ import { Delete, ArrowUp, ArrowDown, Rank } from '@element-plus/icons-vue'
 import { stylePrefix } from '../__builtins__/configs'
 import { composeExport } from '../__builtins__/shared'
 
-import './style'
-
 export interface IArrayBaseAdditionProps extends ElButtonProps {
   title?: string
   method?: 'push' | 'unshift'
diff --git a/packages/components/src/array-cards/index.ts b/packages/components/src/array-cards/index.ts
index 7f30a9a..d8c427e 100644
--- a/packages/components/src/array-cards/index.ts
+++ b/packages/components/src/array-cards/index.ts
@@ -8,8 +8,6 @@ import { stylePrefix } from '../__builtins__/configs'
 import { ArrayBase } from '../array-base'
 import { composeExport } from '../__builtins__/shared'
 
-import './style'
-
 const isAdditionComponent = (schema: ISchema) => {
   return schema['x-component']?.indexOf('Addition') > -1
 }
diff --git a/packages/components/src/form-collapse/index.ts b/packages/components/src/form-collapse/index.ts
index 7352dac..27a6f28 100644
--- a/packages/components/src/form-collapse/index.ts
+++ b/packages/components/src/form-collapse/index.ts
@@ -183,6 +183,7 @@ const FormCollapse = observer(
 
 export const FormCollapseItem = defineComponent({
   name: 'FFormCollapseItem',
+  inheritAttrs: false,
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
diff --git a/packages/components/src/form-dialog/index.ts b/packages/components/src/form-dialog/index.ts
index a888a3b..1f787b0 100644
--- a/packages/components/src/form-dialog/index.ts
+++ b/packages/components/src/form-dialog/index.ts
@@ -1,4 +1,4 @@
-import { FormProvider, h, Fragment } from '@formily/vue'
+import { FormProvider, FragmentComponent } from '@formily/vue'
 import { toJS } from '@formily/reactive'
 import { observer } from '@formily/reactive-vue'
 import { createForm, Form, IFormProps } from '@formily/core'
@@ -15,13 +15,14 @@ import type {
   ElDialog as ElDialogProps,
   ElButton as ElButtonProps,
 } from 'element-plus'
-// import { t } from 'element-plus/es/locale'
-import type, {
+import {
   Component,
   VNode,
   defineComponent,
   Teleport,
   createApp,
+  PropType,
+  h,
 } from 'vue'
 import {
   isValidElement,
@@ -144,7 +145,7 @@ export function FormDialog(
       setup() {
         return () =>
           h(
-            Fragment,
+            FragmentComponent,
             {},
             {
               default: () =>
@@ -160,7 +161,7 @@ export function FormDialog(
   const render = (visible = true, resolve?: () => any, reject?: () => any) => {
     if (!env.instance) {
       const ComponentConstructor = defineComponent({
-        props: ['dialogProps'],
+        props: { dialogProps: Object as PropType<typeof ElDialogProps> },
         data() {
           return {
             visible: false,
@@ -374,13 +375,18 @@ const FormDialogFooter = defineComponent({
   name: 'FFormDialogFooter',
   setup(props, { slots }) {
     return () => {
-      return h(
-        Teleport,
-        {
-          to: `#${PORTAL_TARGET_NAME}`,
-        },
-        slots
-      )
+      // 临时解决方案
+      if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
+        return h(
+          Teleport as any,
+          {
+            to: `#${PORTAL_TARGET_NAME}`,
+          },
+          slots
+        )
+      } else {
+        return null
+      }
     }
   },
 })
diff --git a/packages/components/src/form-drawer/index.ts b/packages/components/src/form-drawer/index.ts
index 383a396..7b81895 100644
--- a/packages/components/src/form-drawer/index.ts
+++ b/packages/components/src/form-drawer/index.ts
@@ -403,13 +403,18 @@ const FormDrawerFooter = defineComponent({
   name: 'FFormDrawerFooter',
   setup(props, { slots }) {
     return () => {
-      return h(
-        Teleport,
-        {
-          to: `#${PORTAL_TARGET_NAME}`,
-        },
-        slots
-      )
+      // 临时解决方案
+      if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
+        return h(
+          Teleport,
+          {
+            to: `#${PORTAL_TARGET_NAME}`,
+          },
+          slots
+        )
+      } else {
+        return null
+      }
     }
   },
 })
diff --git a/packages/components/src/form-grid/index.ts b/packages/components/src/form-grid/index.ts
index e57efd6..78ab598 100644
--- a/packages/components/src/form-grid/index.ts
+++ b/packages/components/src/form-grid/index.ts
@@ -47,7 +47,7 @@ const useGridSpan = (gridSpan: number) => {
 /**
  * @deprecated
  */
-export const useGridColumn = (gridSpan = 1) => {
+export const useGridColumn = (gridSpan = 'span 1') => {
   return gridSpan
 }
 
diff --git a/packages/components/src/form-step/index.ts b/packages/components/src/form-step/index.ts
index 6b095ac..c2c0bc7 100644
--- a/packages/components/src/form-step/index.ts
+++ b/packages/components/src/form-step/index.ts
@@ -185,6 +185,7 @@ const FormStepInner = observer(
 
 const StepPane = defineComponent({
   name: 'FFormStepPane',
+  inheritAttrs: false,
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
diff --git a/packages/components/src/form-tab/index.ts b/packages/components/src/form-tab/index.ts
index ec1fca6..c30df4f 100644
--- a/packages/components/src/form-tab/index.ts
+++ b/packages/components/src/form-tab/index.ts
@@ -141,6 +141,7 @@ const FormTab = observer(
 
 const FormTabPane = defineComponent<IFormTabPaneProps>({
   name: 'FFormTabPane',
+  inheritAttrs: false,
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
diff --git a/packages/components/src/upload/index.ts b/packages/components/src/upload/index.ts
index 074df4a..bdba7d0 100644
--- a/packages/components/src/upload/index.ts
+++ b/packages/components/src/upload/index.ts
@@ -84,7 +84,7 @@ const UploadWrapper = defineComponent({
                   h(
                     ElIcon,
                     { style: { fontSize: '60px', margin: '40px 0 16px' } },
-                    h(UploadFilled, { color: 'gray' }, {})
+                    { default: () => h(UploadFilled, { color: 'gray' }, {}) }
                   ),
                   h(
                     'div',
diff --git a/packages/components/transformer.ts b/packages/components/transformer.ts
deleted file mode 100644
index 7aef603..0000000
--- a/packages/components/transformer.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import createTransformer from 'ts-import-plugin'
-
-const transformer = createTransformer({
-  libraryName: 'element-plus',
-  libraryDirectory: 'lib',
-  camel2DashComponentName: true,
-  style: false,
-})
-
-export default function () {
-  return transformer
-}
diff --git a/packages/prototypes/package.json b/packages/prototypes/package.json
index e1aeaa4..14badd0 100644
--- a/packages/prototypes/package.json
+++ b/packages/prototypes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element-plus-prototypes",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 3e52988..73a7d38 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element-plus-renderer",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
diff --git a/packages/setters/package.json b/packages/setters/package.json
index 2d612d1..e393995 100644
--- a/packages/setters/package.json
+++ b/packages/setters/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element-plus-setters",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
diff --git a/packages/settings-form/package.json b/packages/settings-form/package.json
index 1acfdd3..e4e44ab 100644
--- a/packages/settings-form/package.json
+++ b/packages/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element-plus-settings-form",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "main": "lib",
   "types": "lib/index.d.ts",
diff --git a/scripts/build-style/buildAllStyles.ts b/scripts/build-style/buildAllStyles.ts
deleted file mode 100644
index fc69b45..0000000
--- a/scripts/build-style/buildAllStyles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import typescript from 'rollup-plugin-typescript2'
-import { build, getRollupBasePlugin } from './helper'
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const buildAllStyles = async (outputFile: string) => {
-  await build({
-    input: 'src/style.ts',
-    output: {
-      file: outputFile,
-    },
-    plugins: [
-      typescript({
-        tsconfig: './tsconfig.json',
-        tsconfigOverride: {
-          compilerOptions: {
-            module: 'ESNext',
-            declaration: false,
-          },
-        },
-      }),
-      ...getRollupBasePlugin(),
-    ],
-  })
-}
diff --git a/scripts/build-style/copy.ts b/scripts/build-style/copy.ts
deleted file mode 100644
index fdd3c86..0000000
--- a/scripts/build-style/copy.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { copy, readFile, writeFile, existsSync } from 'fs-extra'
-import glob from 'glob'
-
-export type CopyBaseOptions = Record<'esStr' | 'libStr', string>
-
-const importLibToEs = async ({
-  libStr,
-  esStr,
-  filename,
-}: CopyBaseOptions & { filename: string }) => {
-  if (!existsSync(filename)) {
-    return Promise.resolve()
-  }
-
-  const fileContent: string = (await readFile(filename)).toString()
-
-  return writeFile(
-    filename,
-    fileContent.replace(new RegExp(libStr, 'g'), esStr)
-  )
-}
-
-export const runCopy = ({
-  resolveForItem,
-  ...lastOpts
-}: CopyBaseOptions & { resolveForItem?: (filename: string) => unknown }) => {
-  return new Promise((resolve, reject) => {
-    glob(`./src/**/*`, (err, files) => {
-      if (err) {
-        return reject(err)
-      }
-
-      const all = [] as Promise<unknown>[]
-
-      for (let i = 0; i < files.length; i += 1) {
-        const filename = files[i]
-
-        resolveForItem?.(filename)
-
-        if (/\.(less|scss)$/.test(filename)) {
-          all.push(copy(filename, filename.replace(/src\//, 'esm/')))
-          all.push(copy(filename, filename.replace(/src\//, 'lib/')))
-
-          continue
-        }
-
-        if (/\/style.ts$/.test(filename)) {
-          importLibToEs({
-            ...lastOpts,
-            filename: filename.replace(/src\//, 'esm/').replace(/\.ts$/, '.js'),
-          })
-
-          continue
-        }
-      }
-    })
-  })
-}
diff --git a/scripts/build-style/helper.ts b/scripts/build-style/helper.ts
deleted file mode 100644
index d6f725c..0000000
--- a/scripts/build-style/helper.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { OutputOptions, rollup, RollupOptions } from 'rollup'
-import postcss from 'rollup-plugin-postcss'
-import NpmImport from 'less-plugin-npm-import'
-import resolve from 'rollup-plugin-node-resolve'
-
-export const getRollupBasePlugin = () => [
-  resolve(),
-  postcss({
-    extract: true,
-    minimize: true,
-    sourceMap: true,
-    // extensions: ['.css', '.less', '.sass'],
-    use: {
-      less: {
-        plugins: [new NpmImport({ prefix: '~' })],
-        javascriptEnabled: true,
-      },
-      sass: {},
-      stylus: {},
-    },
-  }),
-]
-
-export const build = async (
-  rollupConfig: Omit<RollupOptions, 'output'> & { output: OutputOptions }
-) => {
-  const { output, ...input } = rollupConfig
-  const bundle = await rollup(input)
-
-  return bundle.write(output as OutputOptions)
-}
diff --git a/scripts/build-style/index.ts b/scripts/build-style/index.ts
deleted file mode 100644
index bbfc1fe..0000000
--- a/scripts/build-style/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { runCopy, CopyBaseOptions } from './copy'
-import { buildAllStyles } from './buildAllStyles'
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function build({
-  allStylesOutputFile,
-  ...opts
-}: CopyBaseOptions & { allStylesOutputFile: string }) {
-  return Promise.all([buildAllStyles(allStylesOutputFile), runCopy(opts)])
-}
-
-export { runCopy }
diff --git a/scripts/rollup.base.js b/scripts/rollup.base.js
deleted file mode 100644
index eb8c379..0000000
--- a/scripts/rollup.base.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import path from 'path'
-import typescript from 'rollup-plugin-typescript2'
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import externalGlobals from 'rollup-plugin-external-globals'
-import injectProcessEnv from 'rollup-plugin-inject-process-env'
-import dts from 'rollup-plugin-dts'
-import { terser } from 'rollup-plugin-terser'
-
-const presets = () => {
-  const externals = {
-    antd: 'Antd',
-    vue: 'Vue',
-    react: 'React',
-    moment: 'moment',
-    'react-is': 'ReactIs',
-    '@alifd/next': 'Next',
-    'mobx-react-lite': 'mobxReactLite',
-    'react-dom': 'ReactDOM',
-    'element-ui': 'Element',
-    '@ant-design/icons': 'icons',
-    '@vue/composition-api': 'VueCompositionAPI',
-    '@formily/reactive-react': 'Formily.ReactiveReact',
-    '@formily/reactive-vue': 'Formily.ReactiveVue',
-    '@formily/reactive': 'Formily.Reactive',
-    '@formily/path': 'Formily.Path',
-    '@formily/shared': 'Formily.Shared',
-    '@formily/validator': 'Formily.Validator',
-    '@formily/core': 'Formily.Core',
-    '@formily/json-schema': 'Formily.JSONSchema',
-    '@formily/react': 'Formily.React',
-    '@formily/vue': 'Formily.Vue',
-  }
-  return [
-    typescript({
-      tsconfig: './tsconfig.build.json',
-      tsconfigOverride: {
-        compilerOptions: {
-          module: 'ESNext',
-          declaration: false,
-        },
-      },
-    }),
-    resolve(),
-    commonjs(),
-    externalGlobals(externals, {
-      exclude: ['**/*.{less,sass,scss}'],
-    }),
-  ]
-}
-
-const createEnvPlugin = (env) => {
-  return injectProcessEnv(
-    {
-      NODE_ENV: env,
-    },
-    {
-      exclude: '**/*.{css,less,sass,scss}',
-      verbose: false,
-    }
-  )
-}
-
-const inputFilePath = path.join(process.cwd(), 'src/index.ts')
-
-const noUIDtsPackages = [
-  'formily.core',
-  'formily.validator',
-  'formily.shared',
-  'formily.path',
-  'formily.json-schema',
-  'formily.reactive',
-]
-
-export const removeImportStyleFromInputFilePlugin = () => ({
-  name: 'remove-import-style-from-input-file',
-  transform(code, id) {
-    // 样式由 build:style 进行打包，所以要删除入口文件上的 `import './style'`
-    if (inputFilePath === id) {
-      return code.replace(`import './style';`, '')
-    }
-
-    return code
-  },
-})
-
-export default (filename, targetName, ...plugins) => {
-  const base = [
-    {
-      input: 'src/index.ts',
-      output: {
-        format: 'umd',
-        file: `dist/${filename}.umd.development.js`,
-        name: targetName,
-        sourcemap: true,
-        amd: {
-          id: filename,
-        },
-      },
-      external: ['react', 'react-dom', 'react-is'],
-      plugins: [...presets(), ...plugins, createEnvPlugin('development')],
-    },
-    {
-      input: 'src/index.ts',
-      output: {
-        format: 'umd',
-        file: `dist/${filename}.umd.production.js`,
-        name: targetName,
-        sourcemap: true,
-        amd: {
-          id: filename,
-        },
-      },
-      external: ['react', 'react-dom', 'react-is'],
-      plugins: [
-        ...presets(),
-        terser(),
-        ...plugins,
-        createEnvPlugin('production'),
-      ],
-    },
-  ]
-
-  if (noUIDtsPackages.includes(filename)) {
-    base.push({
-      input: 'esm/index.d.ts',
-      output: {
-        format: 'es',
-        file: `dist/${filename}.d.ts`,
-      },
-      plugins: [dts(), ...plugins],
-    })
-    base.push({
-      input: 'esm/index.d.ts',
-      output: {
-        format: 'es',
-        file: `dist/${filename}.all.d.ts`,
-      },
-      plugins: [
-        dts({
-          respectExternal: true,
-        }),
-        ...plugins,
-      ],
-    })
-  }
-
-  return base
-}
diff --git a/yarn.lock b/yarn.lock
index 1ee28a1..4911050 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -503,6 +503,15 @@
     "@formily/shared" "2.0.14"
     "@formily/validator" "2.0.14"
 
+"@formily/core@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/core/-/core-2.0.18.tgz#1fa21a5a3e92fc2b94cf4e49adafb57102fa400b"
+  integrity sha512-ZjTih1T7MXWNIYRawVCo5nJ2ZdFqUwxWiezBFbZX2VajFrkb/5St26h6bYcRLgCAmiuwxu3H8hNmOO3iVOIB5w==
+  dependencies:
+    "@formily/reactive" "2.0.18"
+    "@formily/shared" "2.0.18"
+    "@formily/validator" "2.0.18"
+
 "@formily/grid@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/grid/-/grid-2.0.14.tgz#625e158f16c9a8b113895d931ceb571c544e6f21"
@@ -511,6 +520,14 @@
     "@formily/reactive" "2.0.14"
     "@juggle/resize-observer" "^3.3.1"
 
+"@formily/grid@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/grid/-/grid-2.0.18.tgz#65f628001a0ece52f407341d1f2abb45e0f96150"
+  integrity sha512-41X1ovt7cLXPvDy9gBS6EcB8j9ddLNtPHM0Qrs9ylW2XNKz0lkH5raGzzRPZ5Chr9enR5U5yby+bAMkjQb3dsA==
+  dependencies:
+    "@formily/reactive" "2.0.18"
+    "@juggle/resize-observer" "^3.3.1"
+
 "@formily/json-schema@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/json-schema/-/json-schema-2.0.14.tgz#761c88f2077710ff8ce1413623461b0087418163"
@@ -520,11 +537,25 @@
     "@formily/reactive" "2.0.14"
     "@formily/shared" "2.0.14"
 
+"@formily/json-schema@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/json-schema/-/json-schema-2.0.18.tgz#93561f14a58bf4243a59ba03f0ec74c5e2576597"
+  integrity sha512-ZU7W8Hi670fpCdBJNxx03EjarV8JzvB/AXCMFT2umZkyaCLx0YqxUVDC+/UOigeUVv19H/pA2yLL/rJuoab4+A==
+  dependencies:
+    "@formily/core" "2.0.18"
+    "@formily/reactive" "2.0.18"
+    "@formily/shared" "2.0.18"
+
 "@formily/path@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/path/-/path-2.0.14.tgz#65894e8232e46437ede867bf8be0883bf1597238"
   integrity sha512-9Xb/aEyRE4SnU9Yu36z3xM4fW/gblq57NmYACZ8yaT9HupnUwMPORubBTfxbsT95k2BPJ9PrKjkVb+BoD4EROA==
 
+"@formily/path@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/path/-/path-2.0.18.tgz#09e6570a001ca996e86858fddd35e4ea598c728d"
+  integrity sha512-8KkJq9BQPMY6tleQ25BvxMTk0bBdasNwnZWj93w6BXlKMShRkOO3YBCbGxeI3gXQQxws0Q0xX34/fTeccWZVRw==
+
 "@formily/reactive-vue@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/reactive-vue/-/reactive-vue-2.0.14.tgz#4acd1fc854de08280486418d9cbf95167605fde8"
@@ -533,11 +564,24 @@
     "@formily/reactive" "2.0.14"
     vue-demi "^0.9.0"
 
+"@formily/reactive-vue@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/reactive-vue/-/reactive-vue-2.0.18.tgz#4a7a5e27acf5637f304282997888c71df29cefcc"
+  integrity sha512-gcQ3CRKyoPuewt1vqB8OjCG8QXmiZLxHQDt6YrT87MMYNSlFpB7oReDoNyzB4iNMxZGdqvN5sXx4D5ZVhyDZLw==
+  dependencies:
+    "@formily/reactive" "2.0.18"
+    vue-demi "^0.9.0"
+
 "@formily/reactive@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/reactive/-/reactive-2.0.14.tgz#6bd9484c405fe8951583f0e8d07c70a77c71d0b0"
   integrity sha512-VtErQckmaXskVYyJHPw8R5JsFmWGJuPdBYcqnj2KCo3jqG2GKcL5qfhZ3N/jkQOmaOT9JuHGTrNU7u3SWhIqDA==
 
+"@formily/reactive@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/reactive/-/reactive-2.0.18.tgz#3d6fc59f813b05c5f0f56c83ad944df6e110141d"
+  integrity sha512-Xy0RZ+Srnnr1q6ApU6SOReOyhOUMWiL00qpUQUO1XclIgWxcxCQVOzPsBQA9S+MPg2B4Ja30ii7/QcEd554CLg==
+
 "@formily/shared@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/shared/-/shared-2.0.14.tgz#9d32ef2e0162b87c9355670d2dcf2b67bbe18856"
@@ -551,6 +595,19 @@
     pascal-case "^3.1.1"
     upper-case "^2.0.1"
 
+"@formily/shared@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/shared/-/shared-2.0.18.tgz#ebc0b3468dbf7fe6daf168214c238a26f61e2e04"
+  integrity sha512-v+rhavjzSXnMPZX6LpEtpecUBRhw08MrS1peKSNCLX6Kdof8sQq0j13SGNZ2oKuE7F98kDV9j9fllZ6EUGRaKQ==
+  dependencies:
+    "@formily/path" "2.0.18"
+    camel-case "^4.1.1"
+    lower-case "^2.0.1"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.1"
+    upper-case "^2.0.1"
+
 "@formily/template@^1.0.0-alpha.0":
   version "1.0.0-alpha.20"
   resolved "https://registry.yarnpkg.com/@formily/template/-/template-1.0.0-alpha.20.tgz#80bbdf6b2993922dc021d367d2c855de7a31d633"
@@ -588,6 +645,13 @@
   dependencies:
     "@formily/shared" "2.0.14"
 
+"@formily/validator@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/validator/-/validator-2.0.18.tgz#8fd15547152546b500080d4d1653e0b00ee11980"
+  integrity sha512-G8+w22T8yaojc4Kk9LaIr2sr5YRzm5s9W3rlQYVq/0yIJDmkj1oTCkuGiknnR22Y28REasBVdp93qWQa8o9YHw==
+  dependencies:
+    "@formily/shared" "2.0.18"
+
 "@formily/vue@2.0.14":
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/@formily/vue/-/vue-2.0.14.tgz#07053f0c46a41cdd5e75271a5251eddb37bec655"
@@ -603,6 +667,21 @@
     vue-demi "^0.9.0"
     vue-frag "^1.1.4"
 
+"@formily/vue@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@formily/vue/-/vue-2.0.18.tgz#8c3316af21e55e1f725fb84ef22f91891709fb86"
+  integrity sha512-Q3FQ7fj7DyUu43Qs/uhaolTt2II0AuIuRuL/ZQLWdXz92Dqx7V66AwDX9uLgaqjXI00EPQvv47nW+jGSaK7j2g==
+  dependencies:
+    "@formily/core" "2.0.18"
+    "@formily/json-schema" "2.0.18"
+    "@formily/reactive" "2.0.18"
+    "@formily/reactive-vue" "2.0.18"
+    "@formily/shared" "2.0.18"
+    "@formily/validator" "2.0.18"
+    fs-extra "^10.0.0"
+    vue-demi "^0.9.0"
+    vue-frag "^1.1.4"
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -4379,9 +4458,9 @@ dom-serializer@^1.0.1:
     entities "^2.0.0"
 
 domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
@@ -4487,9 +4566,9 @@ ejs@^3.1.6:
     jake "^10.6.1"
 
 electron-to-chromium@^1.4.84:
-  version "1.4.105"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.105.tgz#30de5e4ba020140b698539b2d366cd9c3a337ec7"
-  integrity sha512-6w2bmoQBSUgCQjbSjiVv9IS1lXwW2aQABlUJ1vlE8Vci/sVXxUNQrHLQa5N1ioc82Py+a36DlUA5KvrAlHMMeA==
+  version "1.4.106"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz#e7a3bfa9d745dd9b9e597616cb17283cc349781a"
+  integrity sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -4666,131 +4745,131 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-esbuild-android-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.32.tgz#cf23a9c6052bb48901f5541c7e5a4168495fca36"
-  integrity sha512-q1qjB2UcoWehR9Yp9dO2RdJUeLLrXAYsbOU4tkYa+GmJzxTwuvOrMdvaemsXYqb7F4STVTca9KpfqGicEChtUg==
-
-esbuild-android-arm64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.32.tgz#5840407c8d8b577eea847eecce8df9610c0f58fd"
-  integrity sha512-bs1uu+RuM15f8yjFc0FhPDE/6NID4fKl7beDVsGCme6Q8ld2IzRXmp5QaHurlcH93PFyQnUgVvdahIWgtK2QZw==
-
-esbuild-darwin-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.32.tgz#c6defc12a60f27408f1a30bb233c9d0e66ea2a55"
-  integrity sha512-6MekflAld28wYtzanwZTxQlxMPeYw/yv1ToFG2hpo3LGxOIE2mBD5IJaMCcyy1//EYvGnGToO3p6XKdbS8E1QQ==
-
-esbuild-darwin-arm64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.32.tgz#fc878496516a90fc4982ee7cf8f2d2f484dbd64a"
-  integrity sha512-BHYIjiPDYQTD+4zwqdqRo+I2bbg3fn9mah/gZm4SCCy+7uwTTYOYobIunHT7wVCgxnFCr50PJUdaMrEoCImRbw==
-
-esbuild-freebsd-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.32.tgz#c136e8e8bab8e7ea95a7fbe4b689d2c940bf48f2"
-  integrity sha512-6BOBhtfAf9AlfjL1AvtfVOxwY82tHPfYrA0lskJpFjfiEMGTLU6e0vdOwb4+4x++gGz49azuGK0woYqdfL03uw==
-
-esbuild-freebsd-arm64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.32.tgz#46668a10e5a51665ed800b10a02b757bf6bc6fbf"
-  integrity sha512-zIRR4gKQW56p/xLM8TlpxVBNiX0w3VoR9ZxfH4nrfJ7QiL0SYHRy8YPL5C7zMWRjSze2WxQRHfS9bHKdVrVXBw==
-
-esbuild-linux-32@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.32.tgz#ac51a64f26f638618ff62a1a966babe065bc54cc"
-  integrity sha512-kn0AkGtPvzA6xiv93/mavvZ7DVinu/ewh2F2S0/8mE8/PXi3D4+svZ6V3beV5DIH7vcHVuGhoooWav8HPF04tg==
-
-esbuild-linux-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.32.tgz#a3dfeb772f339fb34f0ff61df753a70a01be243a"
-  integrity sha512-Ie+PMvrPj/HCOmSc0QubKttDxP2iBtPzDu+b+V3HGDGwkGmVpDkyXx1NXp5LjkIphIay2QekMwy1dSw3KDqCew==
-
-esbuild-linux-arm64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.32.tgz#df2fead5c0d9228eede866359f35b3e0eef4e192"
-  integrity sha512-ykoqKaxX95nB+lk2K/+qxr0ke+BxkeVi0yKOnymCR5Ive7IZDHa4BJX53NEGSBKLfWPwKE6SXTz8qcEewSntoA==
-
-esbuild-linux-arm@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.32.tgz#64633aa6491e91d935324cf041795ebce18c071b"
-  integrity sha512-R/Bvn/YQNDyvfN0SERh/I7hKPqN+nSSruQdVeiYEJ+jc3fUi73jXYAscpTQgIBeER/yXnEsgJGU/UQ9+sscr7A==
-
-esbuild-linux-mips64le@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.32.tgz#f0a7a083e8fdfb6e4edffb93ec27de2c5d732f01"
-  integrity sha512-IilnlBexpHpt/5po0cle/L/S6CYnwaq23UuAqWzxp+opHLOCNnyANpC1jOoP551aRx4JuZ7z3xZZ7bYQZB147w==
-
-esbuild-linux-ppc64le@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.32.tgz#dc22b766dd4ddd20c28febe36e8b92b9c11faa63"
-  integrity sha512-TR6l5nWZbfq7jSY+1vsiQjT4m67NWplNhbX6GBieZq6DBt0nTx1XgTZAdKROF7jTuaK7YrCYlPXtfO3w86Mysw==
-
-esbuild-linux-riscv64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.32.tgz#0ae09eee847de5993cbe1529591d5ca17c7303c5"
-  integrity sha512-aSOcUzTeIAslfri8e+bMpyzQuxhcIiNhWyuCGGXum2PtxwYiUqR8/UCMYfwYtYkhr1yABOFOfs83mm9KBy5qCQ==
-
-esbuild-linux-s390x@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.32.tgz#1297f9f130cd93495e7ce25c63a79dab223b89de"
-  integrity sha512-dNlip+EvexxKjRZitFCWCd7DVk64c7R5ySr8aFEMHCb/RriNiyDxYJGzYWm4EMJsMRMupMUHlMY64BAa3Op9FA==
-
-esbuild-netbsd-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.32.tgz#902bf5ba7c54db9c7274f019c4d006b1b963fb7d"
-  integrity sha512-Pa3QByYqxzlBFQQQhjYBPg3WUfSjwibqzh1hC6mPDRUHnCeUcrLoBuIiG4xqOYEpQM9/kDowIBsrGIQEVWWdQA==
-
-esbuild-openbsd-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.32.tgz#0fbfbdf555deeb05a8915daf0b71168d09773437"
-  integrity sha512-uWKKqpCjkMY8TCIobFvaSETonQY3OrmgnoTCC3tF+lvMoneYjppB6akx7L5Xv0kP+1tnSbrIof1ca8PfqGUyjw==
-
-esbuild-sunos-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.32.tgz#d493ca5222703dd0b8c489324d1517cd622618e8"
-  integrity sha512-Ar+u3mBk0oVV4Fwv/qlinJZNIPPtTBSG+1W42o8lOaVxJ+rJgecDoeUN+5uyd9at0BK1SVrQ1qZ4wjHKB0qFpQ==
-
-esbuild-windows-32@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.32.tgz#c6b0f4cf952c6f562a32fe763acab9fb8cb3912a"
-  integrity sha512-rLMsbflMY6Hjh3rmQnCDVZahJQ7n+XfT6o1+no5pHRpDlMh38MHthgGh35q+EcOMgrGP3ppnw70rhJq80SaYTQ==
-
-esbuild-windows-64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.32.tgz#2ad9322a963fd26bb4818ad1c0ee7acde63ebb81"
-  integrity sha512-OHnMMxYufVgLXIMnwLynLMKguHMrsVnWcehieSP9i6ZX31KEsOFYWrorcnTWOn4rbZVLSL10ofxLuVIgRW3SWw==
-
-esbuild-windows-arm64@0.14.32:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.32.tgz#bb589106c0fd5d582cce62bd7995a6e5db52e7b4"
-  integrity sha512-ddavy6IPUBySMfqDfG243TgtuqwQBNJQJPVaA4DaavmMfpBsUxFrSV+HzBWXTKU3I9EcuoEvIATLuQ7NJKxjwg==
+esbuild-android-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.34.tgz#46bc4327dd0809937912346244eaffdb9bfc980d"
+  integrity sha512-XfxcfJqmMYsT/LXqrptzFxmaR3GWzXHDLdFNIhm6S00zPaQF1TBBWm+9t0RZ6LRR7iwH57DPjaOeW20vMqI4Yw==
+
+esbuild-android-arm64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.34.tgz#a3f7e1ad84b8a7dcb39b5e132768b56ee7133656"
+  integrity sha512-T02+NXTmSRL1Mc6puz+R9CB54rSPICkXKq6+tw8B6vxZFnCPzbJxgwIX4kcluz9p8nYBjF3+lSilTGWb7+Xgew==
+
+esbuild-darwin-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.34.tgz#a0e4ab7a0cddf76761f1fb5d6bf552a376beb16e"
+  integrity sha512-pLRip2Bh4Ng7Bf6AMgCrSp3pPe/qZyf11h5Qo2mOfJqLWzSVjxrXW+CFRJfrOVP7TCnh/gmZSM2AFdCPB72vtw==
+
+esbuild-darwin-arm64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.34.tgz#54c35461f82f83a7f5169d9a6a54201798977b07"
+  integrity sha512-vpidSJEBxx6lf1NWgXC+DCmGqesJuZ5Y8aQVVsaoO4i8tRXbXb0whChRvop/zd3nfNM4dIl5EXAky0knRX5I6w==
+
+esbuild-freebsd-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.34.tgz#aebb50248f5874d04ffeab2db8ee1ed6037e2654"
+  integrity sha512-m0HBjePhe0hAQJgtMRMNV9kMgIyV4/qSnzPx42kRMQBcPhgjAq1JRu4Il26czC+9FgpMbFkUktb07f/Lwnc6CA==
+
+esbuild-freebsd-arm64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.34.tgz#09bef288e29f18b38b0c70a9827b6ee718e36c7f"
+  integrity sha512-cpRc2B94L1KvMPPYB4D6G39jLqpKlD3noAMY4/e86iXXXkhUYJJEtTuyNFTa9JRpWM0xCAp4mxjHjoIiLuoCLA==
+
+esbuild-linux-32@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.34.tgz#67790061758e008e919e65bbc34549f55dadaca7"
+  integrity sha512-8nQaEaoW7MH/K/RlozJa+lE1ejHIr8fuPIHhc513UebRav7HtXgQvxHQ6VZRUkWtep23M6dd7UqhwO1tMOfzQQ==
+
+esbuild-linux-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.34.tgz#b9b19d4ac07e37495dd2508ec843418aa71c98d6"
+  integrity sha512-Y3of4qQoLLlAgf042MlrY1P+7PnN9zWj8nVtw9XQG5hcLOZLz7IKpU35oeu7n4wvyaZHwvQqDJ93gRLqdJekcQ==
+
+esbuild-linux-arm64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.34.tgz#fd84b11a6ccfe9e83e00d0c45890e9fb3a7248c1"
+  integrity sha512-IlWaGtj9ir7+Nrume1DGcyzBDlK8GcnJq0ANKwcI9pVw8tqr+6GD0eqyF9SF1mR8UmAp+odrx1H5NdR2cHdFHA==
+
+esbuild-linux-arm@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.34.tgz#c89d4714b05265a315a97c8933508cc73950e683"
+  integrity sha512-9lpq1NcJqssAF7alCO6zL3gvBVVt/lKw4oetUM7OgNnRX0OWpB+ZIO9FwCrSj/dMdmgDhPLf+119zB8QxSMmAg==
+
+esbuild-linux-mips64le@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.34.tgz#d60752c3fb1260dd0737532af2de2a9521656456"
+  integrity sha512-k3or+01Rska1AjUyNjA4buEwB51eyN/xPQAoOx1CjzAQC3l8rpjUDw55kXyL63O/1MUi4ISvtNtl8gLwdyEcxw==
+
+esbuild-linux-ppc64le@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.34.tgz#f4c6229269956564f0c6f9825f5e717c2cfc22b3"
+  integrity sha512-+qxb8M9FfM2CJaVU7GgYpJOHM1ngQOx+/VrtBjb4C8oVqaPcESCeg2anjl+HRZy8VpYc71q/iBYausPPbJ+Keg==
+
+esbuild-linux-riscv64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.34.tgz#549bd18a9eba3135b67f7b742730b5343a1be35d"
+  integrity sha512-Y717ltBdQ5j5sZIHdy1DV9kieo0wMip0dCmVSTceowCPYSn1Cg33Kd6981+F/3b9FDMzNWldZFOBRILViENZSA==
+
+esbuild-linux-s390x@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.34.tgz#2a6b577c437f94c2b37623c755ff5215a05c12bc"
+  integrity sha512-bDDgYO4LhL4+zPs+WcBkXph+AQoPcQRTv18FzZS0WhjfH8TZx2QqlVPGhmhZ6WidrY+jKthUqO6UhGyIb4MpmA==
+
+esbuild-netbsd-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.34.tgz#7f0b73229157975eb35597207723df52ba21722a"
+  integrity sha512-cfaFGXdRt0+vHsjNPyF0POM4BVSHPSbhLPe8mppDc7GDDxjIl08mV1Zou14oDWMp/XZMjYN1kWYRSfftiD0vvQ==
+
+esbuild-openbsd-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.34.tgz#b9bc44b4f70031fb01b173b279daeffc4d4f54b7"
+  integrity sha512-vmy9DxXVnRiI14s8GKuYBtess+EVcDALkbpTqd5jw4XITutIzyB7n4x0Tj5utAkKsgZJB22lLWGekr0ABnSLow==
+
+esbuild-sunos-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.34.tgz#512dd6085ac1a0dccc20c5f932f16a618bea409c"
+  integrity sha512-eNPVatNET1F7tRMhii7goL/eptfxc0ALRjrj9SPFNqp0zmxrehBFD6BaP3R4LjMn6DbMO0jOAnTLFKr8NqcJAA==
+
+esbuild-windows-32@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.34.tgz#3ff1afd5cac08050c7c7140a59e343b06f6b037c"
+  integrity sha512-EFhpXyHEcnqWYe2rAHFd8dRw8wkrd9U+9oqcyoEL84GbanAYjiiIjBZsnR8kl0sCQ5w6bLpk7vCEIA2VS32Vcg==
+
+esbuild-windows-64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.34.tgz#66f7b43d2a0b132f6748dfa3edac4fc939a99be0"
+  integrity sha512-a8fbl8Ky7PxNEjf1aJmtxdDZj32/hC7S1OcA2ckEpCJRTjiKslI9vAdPpSjrKIWhws4Galpaawy0nB7fjHYf5Q==
+
+esbuild-windows-arm64@0.14.34:
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.34.tgz#b74a6395b7b7e53dba70b71b39542afd83352473"
+  integrity sha512-EYvmKbSa2B3sPnpC28UEu9jBK5atGV4BaVRE7CYGUci2Hlz4AvtV/LML+TcDMT6gBgibnN2gcltWclab3UutMg==
 
 esbuild@^0.14.27, esbuild@^0.14.29:
-  version "0.14.32"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.32.tgz#f55245ccd4b820707147ac4cc69a2c3e1a76af03"
-  integrity sha512-RuzVUP/bkStmnVHK6Gh3gjaMjfXNLqBqvYVDiS9JKl5KdRdRLUeW5Wo8NrbL7cL6CW7Cyak7SvACqyPOBuA8vA==
+  version "0.14.34"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.34.tgz#3610056f0a57bcfd0b63ddaafdb2e3bef1cf96e4"
+  integrity sha512-QIWdPT/gFF6hCaf4m7kP0cJ+JIuFkdHibI7vVFvu3eJS1HpVmYHWDulyN5WXwbRA0SX/7ZDaJ/1DH8SdY9xOJg==
   optionalDependencies:
-    esbuild-android-64 "0.14.32"
-    esbuild-android-arm64 "0.14.32"
-    esbuild-darwin-64 "0.14.32"
-    esbuild-darwin-arm64 "0.14.32"
-    esbuild-freebsd-64 "0.14.32"
-    esbuild-freebsd-arm64 "0.14.32"
-    esbuild-linux-32 "0.14.32"
-    esbuild-linux-64 "0.14.32"
-    esbuild-linux-arm "0.14.32"
-    esbuild-linux-arm64 "0.14.32"
-    esbuild-linux-mips64le "0.14.32"
-    esbuild-linux-ppc64le "0.14.32"
-    esbuild-linux-riscv64 "0.14.32"
-    esbuild-linux-s390x "0.14.32"
-    esbuild-netbsd-64 "0.14.32"
-    esbuild-openbsd-64 "0.14.32"
-    esbuild-sunos-64 "0.14.32"
-    esbuild-windows-32 "0.14.32"
-    esbuild-windows-64 "0.14.32"
-    esbuild-windows-arm64 "0.14.32"
+    esbuild-android-64 "0.14.34"
+    esbuild-android-arm64 "0.14.34"
+    esbuild-darwin-64 "0.14.34"
+    esbuild-darwin-arm64 "0.14.34"
+    esbuild-freebsd-64 "0.14.34"
+    esbuild-freebsd-arm64 "0.14.34"
+    esbuild-linux-32 "0.14.34"
+    esbuild-linux-64 "0.14.34"
+    esbuild-linux-arm "0.14.34"
+    esbuild-linux-arm64 "0.14.34"
+    esbuild-linux-mips64le "0.14.34"
+    esbuild-linux-ppc64le "0.14.34"
+    esbuild-linux-riscv64 "0.14.34"
+    esbuild-linux-s390x "0.14.34"
+    esbuild-netbsd-64 "0.14.34"
+    esbuild-openbsd-64 "0.14.34"
+    esbuild-sunos-64 "0.14.34"
+    esbuild-windows-32 "0.14.34"
+    esbuild-windows-64 "0.14.34"
+    esbuild-windows-arm64 "0.14.34"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -12190,10 +12269,10 @@ vuepress-plugin-typescript@^0.3.1:
     cache-loader "^3.0.0"
     ts-loader "^7.0.3"
 
-vuepress-theme-dumi@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/vuepress-theme-dumi/-/vuepress-theme-dumi-0.1.0.tgz#62f7209b768b0596a8e65acdfab7f088f604b096"
-  integrity sha512-62ZrJ9wlxCikeFb7Td33Y15qxuFIi27SdhfRabh1Zu0gyi00PXB3keYrbmYVWYZXfYWjPc4rzFIo25YDN9wFwQ==
+vuepress-theme-dumi@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vuepress-theme-dumi/-/vuepress-theme-dumi-0.1.1.tgz#eee1abed8ce51a05c2c207aa7d808d9b66f844bf"
+  integrity sha512-/EYIHdu8tVvY7AG4i0eQiZ+Paa6fy8020v0cO7w3su/uk56ZfgQ8n73RNcF/HbSaVXSgpisAe+1J4eYlJp+s3A==
   dependencies:
     "@vuepress/client" "^2.0.0-beta.37"
     "@vuepress/core" "^2.0.0-beta.37"