From cc3cb3604070a09fd24ce8076f15d8b9402cab26 Mon Sep 17 00:00:00 2001
From: Muyao <wanngxiao@gmail.com>
Date: Wed, 28 Jul 2021 17:32:41 +0800
Subject: [PATCH] refactor(element): refactor FormDialog/FormDrawer & refactor
 component export type (#1892)

* fix(element): fix element demand import

* refactor(element): refactor FormDialog/FormDrawer

* refactor(element): refactor componet export type
---
 .../guide/array-cards/effects-json-schema.vue |  20 +-
 .../array-cards/effects-markup-schema.vue     |  20 +-
 .../demos/guide/array-cards/json-schema.vue   |  30 +-
 .../demos/guide/array-cards/markup-schema.vue |  30 +-
 .../array-collapse/effects-json-schema.vue    |  24 +-
 .../array-collapse/effects-markup-schema.vue  |  27 +-
 .../guide/array-collapse/json-schema.vue      |  48 +-
 .../guide/array-collapse/markup-schema.vue    |  54 +--
 .../demos/guide/array-items/json-schema.vue   |  34 +-
 .../demos/guide/array-items/markup-schema.vue |  34 +-
 .../guide/array-table/effects-json-schema.vue |  34 +-
 .../array-table/effects-markup-schema.vue     |  34 +-
 .../demos/guide/array-table/json-schema.vue   |  42 +-
 .../demos/guide/array-table/markup-schema.vue |  42 +-
 .../docs/demos/guide/checkbox/json-schema.vue |  11 +-
 .../demos/guide/checkbox/markup-schema.vue    |  11 +-
 .../docs/demos/guide/checkbox/template.vue    |  11 +-
 .../docs/demos/guide/editable/json-schema.vue |   6 +-
 .../demos/guide/editable/markup-schema.vue    |   6 +-
 .../docs/demos/guide/editable/template.vue    |   6 +-
 .../docs/demos/guide/form-dialog/custom.vue   | 106 -----
 .../form-dialog/json-schema-before-close.vue  | 108 -----
 .../demos/guide/form-dialog/json-schema.vue   |  41 +-
 .../demos/guide/form-dialog/markup-schema.vue | 135 +++---
 .../docs/demos/guide/form-dialog/template.vue |  41 +-
 .../docs/demos/guide/form-drawer/custom.vue   | 106 -----
 .../form-drawer/json-schema-before-close.vue  | 108 -----
 .../demos/guide/form-drawer/json-schema.vue   |  12 +-
 .../demos/guide/form-drawer/markup-schema.vue | 113 +++--
 .../docs/demos/guide/form-drawer/template.vue |  12 +-
 .../docs/demos/guide/form-grid/native.vue     |   4 +-
 .../demos/guide/form-step/json-schema.vue     |  11 +-
 .../demos/guide/form-step/markup-schema.vue   |  11 +-
 .../docs/demos/guide/form-tab/json-schema.vue |  11 +-
 .../demos/guide/form-tab/markup-schema.vue    |  11 +-
 .../docs/demos/guide/input/json-schema.vue    |   5 +-
 .../docs/demos/guide/input/markup-schema.vue  |   5 +-
 .../docs/demos/guide/input/template.vue       |   7 +-
 .../docs/demos/guide/preview-text/base.vue    |  26 +-
 .../docs/demos/guide/preview-text/extend.vue  |  16 +-
 .../docs/demos/guide/radio/json-schema.vue    |   5 +-
 .../docs/demos/guide/radio/markup-schema.vue  |   6 +-
 .../docs/demos/guide/radio/template.vue       |   6 +-
 packages/element/docs/guide/array-cards.md    |  12 +-
 packages/element/docs/guide/array-collapse.md |  14 +-
 packages/element/docs/guide/array-items.md    |  16 +-
 packages/element/docs/guide/array-table.md    |  14 +-
 packages/element/docs/guide/editable.md       |   2 +-
 packages/element/docs/guide/form-dialog.md    |  77 ++--
 packages/element/docs/guide/form-drawer.md    |  62 +--
 packages/element/docs/guide/form-grid.md      |   4 +-
 packages/element/docs/guide/form-item.md      |   2 +-
 packages/element/docs/guide/form-step.md      |   4 +-
 packages/element/docs/guide/form-tab.md       |   4 +-
 packages/element/docs/guide/index.md          |  41 ++
 packages/element/docs/guide/preview-text.md   |  14 +-
 packages/element/package.json                 |   8 +-
 .../element/src/__builtins__/shared/index.ts  |   2 +
 .../src/__builtins__/shared/loading.ts        |  18 +
 .../element/src/__builtins__/shared/portal.ts |  34 ++
 .../element/src/__builtins__/shared/utils.ts  |  26 +-
 packages/element/src/array-base/index.ts      |  47 +-
 packages/element/src/array-cards/index.ts     |  32 +-
 packages/element/src/array-cards/style.ts     |   4 +-
 packages/element/src/array-collapse/index.ts  |  38 +-
 packages/element/src/array-collapse/style.ts  |   4 +-
 packages/element/src/array-items/index.ts     |  37 +-
 packages/element/src/array-items/style.ts     |   4 +-
 packages/element/src/array-table/index.ts     |  36 +-
 packages/element/src/array-table/style.ts     |   4 +
 packages/element/src/array-tabs/index.ts      |   2 +
 packages/element/src/cascader/index.ts        |   6 +-
 packages/element/src/cascader/style.ts        |   3 +
 packages/element/src/checkbox-group/index.ts  |  68 ---
 packages/element/src/checkbox-group/style.ts  |   1 -
 packages/element/src/checkbox/index.ts        |  78 +++-
 packages/element/src/checkbox/style.ts        |   4 +
 packages/element/src/date-picker/index.ts     |   6 +-
 packages/element/src/date-picker/style.ts     |   3 +
 packages/element/src/editable/index.ts        |  15 +-
 packages/element/src/editable/style.ts        |   3 +
 packages/element/src/el-form-item/index.ts    |   2 +
 packages/element/src/el-form/index.ts         |   2 +
 .../element/src/form-button-group/index.ts    |   4 +-
 .../element/src/form-button-group/style.ts    |   4 +
 packages/element/src/form-dialog/index.ts     | 435 +++++++++++-------
 packages/element/src/form-dialog/style.ts     |   1 +
 packages/element/src/form-drawer/index.ts     | 220 ++++++---
 packages/element/src/form-drawer/style.scss   |   1 +
 packages/element/src/form-drawer/style.ts     |   1 +
 packages/element/src/form-grid/index.ts       |  16 +-
 packages/element/src/form-item/index.ts       |  14 +-
 packages/element/src/form-layout/index.ts     |   4 +-
 packages/element/src/form-step/index.ts       |  18 +-
 packages/element/src/form-tab/index.ts        |  20 +-
 packages/element/src/form/index.ts            |   8 +-
 packages/element/src/form/style.ts            |   4 +
 packages/element/src/index.ts                 |   1 -
 packages/element/src/input-number/index.ts    |   6 +-
 packages/element/src/input-number/style.ts    |   3 +
 packages/element/src/input/index.ts           |  20 +-
 packages/element/src/input/style.ts           |   3 +
 packages/element/src/password/index.ts        |   6 +-
 packages/element/src/password/style.ts        |   3 +
 packages/element/src/preview-text/index.ts    |  40 +-
 packages/element/src/preview-text/style.ts    |   8 +
 packages/element/src/radio/index.ts           |  16 +-
 packages/element/src/reset/index.ts           |   4 +-
 packages/element/src/select/index.ts          |   8 +-
 packages/element/src/select/style.ts          |   3 +
 packages/element/src/space/index.ts           |   4 +-
 packages/element/src/submit/index.ts          |   4 +-
 packages/element/src/switch/index.ts          |   2 +
 packages/element/src/time-picker/index.ts     |   6 +-
 packages/element/src/time-picker/style.ts     |   3 +
 packages/element/src/transfer/index.ts        |   2 +
 packages/element/src/upload/index.ts          |   4 +-
 packages/element/src/upload/style.ts          |   1 +
 packages/element/transformer.ts               |  13 +
 packages/element/tsconfig.json                |   3 +-
 scripts/rollup.base.js                        |   3 +-
 yarn.lock                                     |  16 +-
 122 files changed, 1494 insertions(+), 1621 deletions(-)
 delete mode 100644 packages/element/docs/demos/guide/form-dialog/custom.vue
 delete mode 100644 packages/element/docs/demos/guide/form-dialog/json-schema-before-close.vue
 delete mode 100644 packages/element/docs/demos/guide/form-drawer/custom.vue
 delete mode 100644 packages/element/docs/demos/guide/form-drawer/json-schema-before-close.vue
 create mode 100644 packages/element/src/__builtins__/shared/loading.ts
 create mode 100644 packages/element/src/__builtins__/shared/portal.ts
 delete mode 100644 packages/element/src/checkbox-group/index.ts
 delete mode 100644 packages/element/src/checkbox-group/style.ts
 create mode 100644 packages/element/transformer.ts

diff --git a/packages/element/docs/demos/guide/array-cards/effects-json-schema.vue b/packages/element/docs/demos/guide/array-cards/effects-json-schema.vue
index ad828cb4ab2..c0b9309e202 100644
--- a/packages/element/docs/demos/guide/array-cards/effects-json-schema.vue
+++ b/packages/element/docs/demos/guide/array-cards/effects-json-schema.vue
@@ -14,11 +14,6 @@ import {
   Submit,
   Input,
   ArrayCards,
-  ArrayCardsRemove,
-  ArrayCardsMoveDown,
-  ArrayCardsMoveUp,
-  ArrayCardsAddition,
-  ArrayCardsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -27,11 +22,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCards,
-    ArrayCardsRemove,
-    ArrayCardsMoveDown,
-    ArrayCardsMoveUp,
-    ArrayCardsAddition,
-    ArrayCardsIndex,
   },
 })
 
@@ -59,7 +49,7 @@ export default {
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCardsIndex',
+                'x-component': 'ArrayCards.Index',
               },
               aa: {
                 type: 'string',
@@ -96,15 +86,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCardsRemove',
+                'x-component': 'ArrayCards.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveUp',
+                'x-component': 'ArrayCards.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveDown',
+                'x-component': 'ArrayCards.MoveDown',
               },
             },
           },
@@ -112,7 +102,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCardsAddition',
+              'x-component': 'ArrayCards.Addition',
             },
           },
         },
diff --git a/packages/element/docs/demos/guide/array-cards/effects-markup-schema.vue b/packages/element/docs/demos/guide/array-cards/effects-markup-schema.vue
index 878fb8877d6..937d9e3e927 100644
--- a/packages/element/docs/demos/guide/array-cards/effects-markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-cards/effects-markup-schema.vue
@@ -11,7 +11,7 @@
         }"
       >
         <SchemaObjectField>
-          <SchemaVoidField x-component="ArrayCardsIndex" />
+          <SchemaVoidField x-component="ArrayCards.Index" />
           <SchemaStringField
             name="aa"
             x-decorator="FormItem"
@@ -42,11 +42,11 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCardsRemove" />
-          <SchemaVoidField x-component="ArrayCardsMoveUp" />
-          <SchemaVoidField x-component="ArrayCardsMoveDown" />
+          <SchemaVoidField x-component="ArrayCards.Remove" />
+          <SchemaVoidField x-component="ArrayCards.MoveUp" />
+          <SchemaVoidField x-component="ArrayCards.MoveDown" />
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCardsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -62,11 +62,6 @@ import {
   Submit,
   Input,
   ArrayCards,
-  ArrayCardsRemove,
-  ArrayCardsMoveDown,
-  ArrayCardsMoveUp,
-  ArrayCardsAddition,
-  ArrayCardsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -75,11 +70,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCards,
-    ArrayCardsRemove,
-    ArrayCardsMoveDown,
-    ArrayCardsMoveUp,
-    ArrayCardsAddition,
-    ArrayCardsIndex,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/array-cards/json-schema.vue b/packages/element/docs/demos/guide/array-cards/json-schema.vue
index 22b208e5acc..884442f60ba 100644
--- a/packages/element/docs/demos/guide/array-cards/json-schema.vue
+++ b/packages/element/docs/demos/guide/array-cards/json-schema.vue
@@ -14,11 +14,6 @@ import {
   Submit,
   Input,
   ArrayCards,
-  ArrayCardsRemove,
-  ArrayCardsMoveDown,
-  ArrayCardsMoveUp,
-  ArrayCardsAddition,
-  ArrayCardsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -27,11 +22,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCards,
-    ArrayCardsRemove,
-    ArrayCardsMoveDown,
-    ArrayCardsMoveUp,
-    ArrayCardsAddition,
-    ArrayCardsIndex,
   },
 })
 
@@ -62,7 +52,7 @@ export default {
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCardsIndex',
+                'x-component': 'ArrayCards.Index',
               },
               input: {
                 type: 'string',
@@ -73,15 +63,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCardsRemove',
+                'x-component': 'ArrayCards.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveUp',
+                'x-component': 'ArrayCards.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveDown',
+                'x-component': 'ArrayCards.MoveDown',
               },
             },
           },
@@ -89,7 +79,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCardsAddition',
+              'x-component': 'ArrayCards.Addition',
             },
           },
         },
@@ -106,7 +96,7 @@ export default {
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCardsIndex',
+                'x-component': 'ArrayCards.Index',
               },
               input: {
                 type: 'string',
@@ -117,15 +107,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCardsRemove',
+                'x-component': 'ArrayCards.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveUp',
+                'x-component': 'ArrayCards.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCardsMoveDown',
+                'x-component': 'ArrayCards.MoveDown',
               },
             },
           },
@@ -133,7 +123,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCardsAddition',
+              'x-component': 'ArrayCards.Addition',
             },
           },
         },
diff --git a/packages/element/docs/demos/guide/array-cards/markup-schema.vue b/packages/element/docs/demos/guide/array-cards/markup-schema.vue
index 30a478b2cf5..faaa65ef254 100644
--- a/packages/element/docs/demos/guide/array-cards/markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-cards/markup-schema.vue
@@ -11,7 +11,7 @@
         }"
       >
         <SchemaVoidField>
-          <SchemaVoidField x-component="ArrayCardsIndex" />
+          <SchemaVoidField x-component="ArrayCards.Index" />
           <SchemaStringField
             name="input"
             x-decorator="FormItem"
@@ -19,11 +19,11 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCardsRemove" />
-          <SchemaVoidField x-component="ArrayCardsMoveUp" />
-          <SchemaVoidField x-component="ArrayCardsMoveDown" />
+          <SchemaVoidField x-component="ArrayCards.Remove" />
+          <SchemaVoidField x-component="ArrayCards.MoveUp" />
+          <SchemaVoidField x-component="ArrayCards.MoveDown" />
         </SchemaVoidField>
-        <SchemaVoidField x-component="ArrayCardsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
       </SchemaArrayField>
       <SchemaArrayField
         name="array"
@@ -35,7 +35,7 @@
         }"
       >
         <SchemaObjectField>
-          <SchemaVoidField x-component="ArrayCardsIndex" />
+          <SchemaVoidField x-component="ArrayCards.Index" />
           <SchemaStringField
             name="input"
             x-decorator="FormItem"
@@ -43,11 +43,11 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCardsRemove" />
-          <SchemaVoidField x-component="ArrayCardsMoveUp" />
-          <SchemaVoidField x-component="ArrayCardsMoveDown" />
+          <SchemaVoidField x-component="ArrayCards.Remove" />
+          <SchemaVoidField x-component="ArrayCards.MoveUp" />
+          <SchemaVoidField x-component="ArrayCards.MoveDown" />
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCardsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -63,11 +63,6 @@ import {
   Submit,
   Input,
   ArrayCards,
-  ArrayCardsRemove,
-  ArrayCardsMoveDown,
-  ArrayCardsMoveUp,
-  ArrayCardsAddition,
-  ArrayCardsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -76,11 +71,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCards,
-    ArrayCardsRemove,
-    ArrayCardsMoveDown,
-    ArrayCardsMoveUp,
-    ArrayCardsAddition,
-    ArrayCardsIndex,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/array-collapse/effects-json-schema.vue b/packages/element/docs/demos/guide/array-collapse/effects-json-schema.vue
index dd50ff661f4..25b197479a6 100644
--- a/packages/element/docs/demos/guide/array-collapse/effects-json-schema.vue
+++ b/packages/element/docs/demos/guide/array-collapse/effects-json-schema.vue
@@ -14,12 +14,6 @@ import {
   Submit,
   Input,
   ArrayCollapse,
-  ArrayCollapseItem,
-  ArrayCollapseRemove,
-  ArrayCollapseMoveDown,
-  ArrayCollapseMoveUp,
-  ArrayCollapseAddition,
-  ArrayCollapseIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -28,12 +22,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCollapse,
-    ArrayCollapseItem,
-    ArrayCollapseRemove,
-    ArrayCollapseMoveDown,
-    ArrayCollapseMoveUp,
-    ArrayCollapseAddition,
-    ArrayCollapseIndex,
   },
 })
 
@@ -58,14 +46,14 @@ export default {
           title: '对象数组',
           items: {
             type: 'object',
-            'x-component': 'ArrayCollapseItem',
+            'x-component': 'ArrayCollapse.Item',
             'x-component-props': {
               header: '对象数组',
             },
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCollapseIndex',
+                'x-component': 'ArrayCollapse.Index',
               },
               aa: {
                 type: 'string',
@@ -102,15 +90,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCollapseRemove',
+                'x-component': 'ArrayCollapse.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveUp',
+                'x-component': 'ArrayCollapse.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveDown',
+                'x-component': 'ArrayCollapse.MoveDown',
               },
             },
           },
@@ -118,7 +106,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCollapseAddition',
+              'x-component': 'ArrayCollapse.Addition',
             },
           },
         },
diff --git a/packages/element/docs/demos/guide/array-collapse/effects-markup-schema.vue b/packages/element/docs/demos/guide/array-collapse/effects-markup-schema.vue
index 84c63f0ee1b..ad07d38503e 100644
--- a/packages/element/docs/demos/guide/array-collapse/effects-markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-collapse/effects-markup-schema.vue
@@ -11,13 +11,13 @@
         }"
       >
         <SchemaObjectField
-          x-component="ArrayCollapseItem"
+          x-component="ArrayCollapse.Item"
           x-decorator="FormItem"
           :x-component-props="{
             title: '对象数组',
           }"
         >
-          <SchemaVoidField x-component="ArrayCollapseIndex" />
+          <SchemaVoidField x-component="ArrayCollapse.Index" />
           <SchemaStringField
             name="aa"
             x-decorator="FormItem"
@@ -48,11 +48,14 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCollapseRemove" />
-          <SchemaVoidField x-component="ArrayCollapseMoveUp" />
-          <SchemaVoidField x-component="ArrayCollapseMoveDown" />
+          <SchemaVoidField x-component="ArrayCollapse.Remove" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCollapseAddition" title="添加条目" />
+        <SchemaVoidField
+          x-component="ArrayCollapse.Addition"
+          title="添加条目"
+        />
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -68,12 +71,6 @@ import {
   Submit,
   Input,
   ArrayCollapse,
-  ArrayCollapseItem,
-  ArrayCollapseRemove,
-  ArrayCollapseMoveDown,
-  ArrayCollapseMoveUp,
-  ArrayCollapseAddition,
-  ArrayCollapseIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -82,12 +79,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCollapse,
-    ArrayCollapseItem,
-    ArrayCollapseRemove,
-    ArrayCollapseMoveDown,
-    ArrayCollapseMoveUp,
-    ArrayCollapseAddition,
-    ArrayCollapseIndex,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/array-collapse/json-schema.vue b/packages/element/docs/demos/guide/array-collapse/json-schema.vue
index 59558da4dd3..d08ab3c6ad9 100644
--- a/packages/element/docs/demos/guide/array-collapse/json-schema.vue
+++ b/packages/element/docs/demos/guide/array-collapse/json-schema.vue
@@ -14,12 +14,6 @@ import {
   Submit,
   Input,
   ArrayCollapse,
-  ArrayCollapseItem,
-  ArrayCollapseRemove,
-  ArrayCollapseMoveDown,
-  ArrayCollapseMoveUp,
-  ArrayCollapseAddition,
-  ArrayCollapseIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -28,12 +22,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCollapse,
-    ArrayCollapseItem,
-    ArrayCollapseRemove,
-    ArrayCollapseMoveDown,
-    ArrayCollapseMoveUp,
-    ArrayCollapseAddition,
-    ArrayCollapseIndex,
   },
 })
 
@@ -58,14 +46,14 @@ export default {
           'x-decorator': 'FormItem',
           items: {
             type: 'object',
-            'x-component': 'ArrayCollapseItem',
+            'x-component': 'ArrayCollapse.Item',
             'x-component-props': {
               title: '字符串数组',
             },
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCollapseIndex',
+                'x-component': 'ArrayCollapse.Index',
               },
               input: {
                 type: 'string',
@@ -76,15 +64,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCollapseRemove',
+                'x-component': 'ArrayCollapse.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveUp',
+                'x-component': 'ArrayCollapse.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveDown',
+                'x-component': 'ArrayCollapse.MoveDown',
               },
             },
           },
@@ -92,7 +80,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCollapseAddition',
+              'x-component': 'ArrayCollapse.Addition',
             },
           },
         },
@@ -103,14 +91,14 @@ export default {
           'x-decorator': 'FormItem',
           items: {
             type: 'object',
-            'x-component': 'ArrayCollapseItem',
+            'x-component': 'ArrayCollapse.Item',
             'x-component-props': {
               title: '对象数组',
             },
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCollapseIndex',
+                'x-component': 'ArrayCollapse.Index',
               },
               input: {
                 type: 'string',
@@ -121,15 +109,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCollapseRemove',
+                'x-component': 'ArrayCollapse.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveUp',
+                'x-component': 'ArrayCollapse.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveDown',
+                'x-component': 'ArrayCollapse.MoveDown',
               },
             },
           },
@@ -137,7 +125,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayCollapseAddition',
+              'x-component': 'ArrayCollapse.Addition',
             },
           },
         },
@@ -148,14 +136,14 @@ export default {
           'x-decorator': 'FormItem',
           items: {
             type: 'object',
-            'x-component': 'ArrayCollapseItem',
+            'x-component': 'ArrayCollapse.Item',
             'x-component-props': {
               title: '对象数组',
             },
             properties: {
               index: {
                 type: 'void',
-                'x-component': 'ArrayCollapseIndex',
+                'x-component': 'ArrayCollapse.Index',
               },
               input: {
                 type: 'string',
@@ -166,15 +154,15 @@ export default {
               },
               remove: {
                 type: 'void',
-                'x-component': 'ArrayCollapseRemove',
+                'x-component': 'ArrayCollapse.Remove',
               },
               moveUp: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveUp',
+                'x-component': 'ArrayCollapse.MoveUp',
               },
               moveDown: {
                 type: 'void',
-                'x-component': 'ArrayCollapseMoveDown',
+                'x-component': 'ArrayCollapse.MoveDown',
               },
             },
           },
@@ -182,7 +170,7 @@ export default {
             addition: {
               type: 'void',
               title: '添加条目(unshift)',
-              'x-component': 'ArrayCollapseAddition',
+              'x-component': 'ArrayCollapse.Addition',
               'x-component-props': {
                 method: 'unshift',
               },
diff --git a/packages/element/docs/demos/guide/array-collapse/markup-schema.vue b/packages/element/docs/demos/guide/array-collapse/markup-schema.vue
index 7a6c86c310d..bf35d8a567a 100644
--- a/packages/element/docs/demos/guide/array-collapse/markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-collapse/markup-schema.vue
@@ -12,12 +12,12 @@
         }"
       >
         <SchemaVoidField
-          x-component="ArrayCollapseItem"
+          x-component="ArrayCollapse.Item"
           :x-component-props="{
             title: '字符串数组',
           }"
         >
-          <SchemaVoidField x-component="ArrayCollapseIndex" />
+          <SchemaVoidField x-component="ArrayCollapse.Index" />
           <SchemaStringField
             name="input"
             x-decorator="FormItem"
@@ -25,11 +25,14 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCollapseRemove" />
-          <SchemaVoidField x-component="ArrayCollapseMoveUp" />
-          <SchemaVoidField x-component="ArrayCollapseMoveDown" />
+          <SchemaVoidField x-component="ArrayCollapse.Remove" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
         </SchemaVoidField>
-        <SchemaVoidField x-component="ArrayCollapseAddition" title="添加条目" />
+        <SchemaVoidField
+          x-component="ArrayCollapse.Addition"
+          title="添加条目"
+        />
       </SchemaArrayField>
       <SchemaArrayField
         name="array"
@@ -38,12 +41,12 @@
         x-component="ArrayCollapse"
       >
         <SchemaObjectField
-          x-component="ArrayCollapseItem"
+          x-component="ArrayCollapse.Item"
           :x-component-props="{
             title: '对象数组',
           }"
         >
-          <SchemaVoidField x-component="ArrayCollapseIndex" />
+          <SchemaVoidField x-component="ArrayCollapse.Index" />
           <SchemaStringField
             name="input"
             x-decorator="FormItem"
@@ -51,11 +54,14 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCollapseRemove" />
-          <SchemaVoidField x-component="ArrayCollapseMoveUp" />
-          <SchemaVoidField x-component="ArrayCollapseMoveDown" />
+          <SchemaVoidField x-component="ArrayCollapse.Remove" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayCollapseAddition" title="添加条目" />
+        <SchemaVoidField
+          x-component="ArrayCollapse.Addition"
+          title="添加条目"
+        />
       </SchemaArrayField>
       <SchemaArrayField
         name="string_array_unshift"
@@ -67,12 +73,12 @@
         }"
       >
         <SchemaVoidField
-          x-component="ArrayCollapseItem"
+          x-component="ArrayCollapse.Item"
           :x-component-props="{
             title: '字符串数组',
           }"
         >
-          <SchemaVoidField x-component="ArrayCollapseIndex" />
+          <SchemaVoidField x-component="ArrayCollapse.Index" />
           <SchemaStringField
             name="input"
             x-decorator="FormItem"
@@ -80,12 +86,12 @@
             required
             x-component="Input"
           />
-          <SchemaVoidField x-component="ArrayCollapseRemove" />
-          <SchemaVoidField x-component="ArrayCollapseMoveUp" />
-          <SchemaVoidField x-component="ArrayCollapseMoveDown" />
+          <SchemaVoidField x-component="ArrayCollapse.Remove" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveUp" />
+          <SchemaVoidField x-component="ArrayCollapse.MoveDown" />
         </SchemaVoidField>
         <SchemaVoidField
-          x-component="ArrayCollapseAddition"
+          x-component="ArrayCollapse.Addition"
           title="添加条目（unshift）"
           :x-component-props="{
             method: 'unshift',
@@ -127,12 +133,6 @@ import {
   Submit,
   Input,
   ArrayCollapse,
-  ArrayCollapseItem,
-  ArrayCollapseRemove,
-  ArrayCollapseMoveDown,
-  ArrayCollapseMoveUp,
-  ArrayCollapseAddition,
-  ArrayCollapseIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -141,12 +141,6 @@ const SchemaField = createSchemaField({
     FormItem,
     Input,
     ArrayCollapse,
-    ArrayCollapseItem,
-    ArrayCollapseRemove,
-    ArrayCollapseMoveDown,
-    ArrayCollapseMoveUp,
-    ArrayCollapseAddition,
-    ArrayCollapseIndex,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/array-items/json-schema.vue b/packages/element/docs/demos/guide/array-items/json-schema.vue
index e897c28f968..bb62c6a5ff1 100644
--- a/packages/element/docs/demos/guide/array-items/json-schema.vue
+++ b/packages/element/docs/demos/guide/array-items/json-schema.vue
@@ -17,13 +17,6 @@ import {
   Select,
   DatePicker,
   ArrayItems,
-  ArrayItemsItem,
-  ArrayItemsSortHandle,
-  ArrayItemsRemove,
-  ArrayItemsMoveDown,
-  ArrayItemsMoveUp,
-  ArrayItemsAddition,
-  ArrayItemsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -35,13 +28,6 @@ const SchemaField = createSchemaField({
     Select,
     DatePicker,
     ArrayItems,
-    ArrayItemsItem,
-    ArrayItemsSortHandle,
-    ArrayItemsRemove,
-    ArrayItemsMoveDown,
-    ArrayItemsMoveUp,
-    ArrayItemsAddition,
-    ArrayItemsIndex,
   },
 })
 
@@ -71,7 +57,7 @@ export default {
               sort: {
                 type: 'void',
                 'x-decorator': 'FormItem',
-                'x-component': 'ArrayItemsSortHandle',
+                'x-component': 'ArrayItems.SortHandle',
               },
               input: {
                 type: 'string',
@@ -81,7 +67,7 @@ export default {
               remove: {
                 type: 'void',
                 'x-decorator': 'FormItem',
-                'x-component': 'ArrayItemsRemove',
+                'x-component': 'ArrayItems.Remove',
               },
             },
           },
@@ -89,7 +75,7 @@ export default {
             add: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayItemsAddition',
+              'x-component': 'ArrayItems.Addition',
             },
           },
         },
@@ -108,7 +94,7 @@ export default {
                   sort: {
                     type: 'void',
                     'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItemsSortHandle',
+                    'x-component': 'ArrayItems.SortHandle',
                   },
                   date: {
                     type: 'string',
@@ -146,7 +132,7 @@ export default {
                   remove: {
                     type: 'void',
                     'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItemsRemove',
+                    'x-component': 'ArrayItems.Remove',
                   },
                 },
               },
@@ -156,7 +142,7 @@ export default {
             add: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayItemsAddition',
+              'x-component': 'ArrayItems.Addition',
             },
           },
         },
@@ -168,7 +154,7 @@ export default {
           title: '对象数组',
           items: {
             type: 'object',
-            'x-decorator': 'ArrayItemsItem',
+            'x-decorator': 'ArrayItems.Item',
             properties: {
               space: {
                 type: 'void',
@@ -177,7 +163,7 @@ export default {
                   sort: {
                     type: 'void',
                     'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItemsSortHandle',
+                    'x-component': 'ArrayItems.SortHandle',
                   },
                   date: {
                     type: 'string',
@@ -200,7 +186,7 @@ export default {
                   remove: {
                     type: 'void',
                     'x-decorator': 'FormItem',
-                    'x-component': 'ArrayItemsRemove',
+                    'x-component': 'ArrayItems.Remove',
                   },
                 },
               },
@@ -210,7 +196,7 @@ export default {
             add: {
               type: 'void',
               title: '添加条目',
-              'x-component': 'ArrayItemsAddition',
+              'x-component': 'ArrayItems.Addition',
             },
           },
         },
diff --git a/packages/element/docs/demos/guide/array-items/markup-schema.vue b/packages/element/docs/demos/guide/array-items/markup-schema.vue
index 726e9894433..ad69508369a 100644
--- a/packages/element/docs/demos/guide/array-items/markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-items/markup-schema.vue
@@ -10,7 +10,7 @@
         <SchemaVoidField x-component="Space">
           <SchemaVoidField
             x-decorator="FormItem"
-            x-component="ArrayItemsSortHandle"
+            x-component="ArrayItems.SortHandle"
           />
           <SchemaStringField
             x-decorator="FormItem"
@@ -25,10 +25,10 @@
           />
           <SchemaVoidField
             x-decorator="FormItem"
-            x-component="ArrayItemsRemove"
+            x-component="ArrayItems.Remove"
           />
         </SchemaVoidField>
-        <SchemaVoidField x-component="ArrayItemsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
       </SchemaArrayField>
       <SchemaArrayField
         name="array"
@@ -40,7 +40,7 @@
           <SchemaVoidField x-component="Space">
             <SchemaVoidField
               x-decorator="FormItem"
-              x-component="ArrayItemsSortHandle"
+              x-component="ArrayItems.SortHandle"
             />
             <SchemaStringField
               x-decorator="FormItem"
@@ -80,11 +80,11 @@
             />
             <SchemaVoidField
               x-decorator="FormItem"
-              x-component="ArrayItemsRemove"
+              x-component="ArrayItems.Remove"
             />
           </SchemaVoidField>
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayItemsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
       </SchemaArrayField>
       <SchemaArrayField
         name="array2"
@@ -93,11 +93,11 @@
         x-component="ArrayItems"
         :x-component-props="{ style: { width: '600px' } }"
       >
-        <SchemaObjectField x-decorator="ArrayItemsItem">
+        <SchemaObjectField x-decorator="ArrayItems.Item">
           <SchemaVoidField x-component="Space">
             <SchemaVoidField
               x-decorator="FormItem"
-              x-component="ArrayItemsSortHandle"
+              x-component="ArrayItems.SortHandle"
             />
             <SchemaStringField
               x-decorator="FormItem"
@@ -121,11 +121,11 @@
             />
             <SchemaVoidField
               x-decorator="FormItem"
-              x-component="ArrayItemsRemove"
+              x-component="ArrayItems.Remove"
             />
           </SchemaVoidField>
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayItemsAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
       </SchemaArrayField>
     </SchemaField>
     <FormButtonGroup>
@@ -146,13 +146,6 @@ import {
   Space,
   DatePicker,
   ArrayItems,
-  ArrayItemsItem,
-  ArrayItemsSortHandle,
-  ArrayItemsRemove,
-  ArrayItemsMoveDown,
-  ArrayItemsMoveUp,
-  ArrayItemsAddition,
-  ArrayItemsIndex,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -164,13 +157,6 @@ const SchemaField = createSchemaField({
     Select,
     DatePicker,
     ArrayItems,
-    ArrayItemsItem,
-    ArrayItemsSortHandle,
-    ArrayItemsRemove,
-    ArrayItemsMoveDown,
-    ArrayItemsMoveUp,
-    ArrayItemsAddition,
-    ArrayItemsIndex,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/array-table/effects-json-schema.vue b/packages/element/docs/demos/guide/array-table/effects-json-schema.vue
index a984b3b3aae..e16a071a2a6 100644
--- a/packages/element/docs/demos/guide/array-table/effects-json-schema.vue
+++ b/packages/element/docs/demos/guide/array-table/effects-json-schema.vue
@@ -12,13 +12,6 @@ import {
   Submit,
   FormItem,
   ArrayTable,
-  ArrayTableColumn,
-  ArrayTableAddition,
-  ArrayTableMoveDown,
-  ArrayTableMoveUp,
-  ArrayTableRemove,
-  ArrayTableIndex,
-  ArrayTableSortHandle,
   Input,
   Editable,
   Switch,
@@ -28,13 +21,6 @@ const fields = createSchemaField({
   components: {
     FormItem,
     ArrayTable,
-    ArrayTableColumn,
-    ArrayTableAddition,
-    ArrayTableMoveDown,
-    ArrayTableMoveUp,
-    ArrayTableRemove,
-    ArrayTableIndex,
-    ArrayTableSortHandle,
     Input,
     Editable,
     Switch,
@@ -79,7 +65,7 @@ export default {
             properties: {
               column1: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': {
                   width: 80,
                   title: 'Index',
@@ -88,13 +74,13 @@ export default {
                 properties: {
                   index: {
                     type: 'void',
-                    'x-component': 'ArrayTableIndex',
+                    'x-component': 'ArrayTable.Index',
                   },
                 },
               },
               column2: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { width: 100, title: '显隐->A2' },
                 properties: {
                   a1: {
@@ -106,7 +92,7 @@ export default {
               },
               column3: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { width: 200, title: 'A2' },
                 properties: {
                   a2: {
@@ -118,7 +104,7 @@ export default {
               },
               column4: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { title: 'A3' },
                 properties: {
                   a3: {
@@ -130,7 +116,7 @@ export default {
               },
               column5: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': {
                   title: 'Operations',
                   prop: 'operations',
@@ -144,15 +130,15 @@ export default {
                     properties: {
                       remove: {
                         type: 'void',
-                        'x-component': 'ArrayTableRemove',
+                        'x-component': 'ArrayTable.Remove',
                       },
                       moveDown: {
                         type: 'void',
-                        'x-component': 'ArrayTableMoveDown',
+                        'x-component': 'ArrayTable.MoveDown',
                       },
                       moveUp: {
                         type: 'void',
-                        'x-component': 'ArrayTableMoveUp',
+                        'x-component': 'ArrayTable.MoveUp',
                       },
                     },
                   },
@@ -163,7 +149,7 @@ export default {
           properties: {
             add: {
               type: 'void',
-              'x-component': 'ArrayTableAddition',
+              'x-component': 'ArrayTable.Addition',
               title: '添加条目',
             },
           },
diff --git a/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue b/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue
index 06187a4ab5c..72a9b646cb9 100644
--- a/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-table/effects-markup-schema.vue
@@ -15,13 +15,13 @@
         <SchemaObjectField>
           <SchemaVoidField
             name="column1"
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ width: 80, title: 'Index' }"
-            ><SchemaVoidField x-component="ArrayTableIndex" />
+            ><SchemaVoidField x-component="ArrayTable.Index" />
           </SchemaVoidField>
           <SchemaVoidField
             name="column2"
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{
               title: '显隐->A2',
               width: 100,
@@ -34,7 +34,7 @@
             />
           </SchemaVoidField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             name="column3"
             :x-component-props="{ title: 'A2', width: 200 }"
           >
@@ -46,7 +46,7 @@
           </SchemaVoidField>
           <SchemaVoidField
             name="column4"
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ title: 'A3' }"
           >
             <SchemaStringField
@@ -57,7 +57,7 @@
           </SchemaVoidField>
           <SchemaVoidField
             name="column5"
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{
               title: 'Operations',
               prop: 'operations',
@@ -66,13 +66,13 @@
             }"
           >
             <SchemaVoidField x-component="FormItem">
-              <SchemaVoidField x-component="ArrayTableRemove" />
-              <SchemaVoidField x-component="ArrayTableMoveUp" />
-              <SchemaVoidField x-component="ArrayTableMoveDown" />
+              <SchemaVoidField x-component="ArrayTable.Remove" />
+              <SchemaVoidField x-component="ArrayTable.MoveUp" />
+              <SchemaVoidField x-component="ArrayTable.MoveDown" />
             </SchemaVoidField>
           </SchemaVoidField>
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayTableAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayTable.Addition" title="添加条目" />
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -86,13 +86,6 @@ import {
   Submit,
   FormItem,
   ArrayTable,
-  ArrayTableColumn,
-  ArrayTableAddition,
-  ArrayTableMoveDown,
-  ArrayTableMoveUp,
-  ArrayTableRemove,
-  ArrayTableIndex,
-  ArrayTableSortHandle,
   Input,
   Editable,
   Switch,
@@ -102,13 +95,6 @@ const fields = createSchemaField({
   components: {
     FormItem,
     ArrayTable,
-    ArrayTableColumn,
-    ArrayTableAddition,
-    ArrayTableMoveDown,
-    ArrayTableMoveUp,
-    ArrayTableRemove,
-    ArrayTableIndex,
-    ArrayTableSortHandle,
     Input,
     Editable,
     Switch,
diff --git a/packages/element/docs/demos/guide/array-table/json-schema.vue b/packages/element/docs/demos/guide/array-table/json-schema.vue
index d1dc7cab4f3..cfdb6f5e761 100644
--- a/packages/element/docs/demos/guide/array-table/json-schema.vue
+++ b/packages/element/docs/demos/guide/array-table/json-schema.vue
@@ -8,32 +8,12 @@
 <script>
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  ArrayTableColumn,
-  ArrayTableAddition,
-  ArrayTableMoveDown,
-  ArrayTableMoveUp,
-  ArrayTableRemove,
-  ArrayTableIndex,
-  ArrayTableSortHandle,
-  Input,
-  Editable,
-} from '@formily/element'
+import { Submit, FormItem, ArrayTable, Input, Editable } from '@formily/element'
 
 const fields = createSchemaField({
   components: {
     FormItem,
     ArrayTable,
-    ArrayTableColumn,
-    ArrayTableAddition,
-    ArrayTableMoveDown,
-    ArrayTableMoveUp,
-    ArrayTableRemove,
-    ArrayTableIndex,
-    ArrayTableSortHandle,
     Input,
     Editable,
   },
@@ -55,7 +35,7 @@ export default {
             properties: {
               column1: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': {
                   width: 80,
                   title: 'Index',
@@ -64,13 +44,13 @@ export default {
                 properties: {
                   index: {
                     type: 'void',
-                    'x-component': 'ArrayTableIndex',
+                    'x-component': 'ArrayTable.Index',
                   },
                 },
               },
               column2: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { width: 200, title: 'A1' },
                 properties: {
                   a1: {
@@ -82,7 +62,7 @@ export default {
               },
               column3: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { width: 200, title: 'A2' },
                 properties: {
                   a2: {
@@ -94,7 +74,7 @@ export default {
               },
               column4: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': { title: 'A3' },
                 properties: {
                   a3: {
@@ -106,7 +86,7 @@ export default {
               },
               column5: {
                 type: 'void',
-                'x-component': 'ArrayTableColumn',
+                'x-component': 'ArrayTable.Column',
                 'x-component-props': {
                   title: 'Operations',
                   prop: 'operations',
@@ -120,15 +100,15 @@ export default {
                     properties: {
                       remove: {
                         type: 'void',
-                        'x-component': 'ArrayTableRemove',
+                        'x-component': 'ArrayTable.Remove',
                       },
                       moveDown: {
                         type: 'void',
-                        'x-component': 'ArrayTableMoveDown',
+                        'x-component': 'ArrayTable.MoveDown',
                       },
                       moveUp: {
                         type: 'void',
-                        'x-component': 'ArrayTableMoveUp',
+                        'x-component': 'ArrayTable.MoveUp',
                       },
                     },
                   },
@@ -139,7 +119,7 @@ export default {
           properties: {
             add: {
               type: 'void',
-              'x-component': 'ArrayTableAddition',
+              'x-component': 'ArrayTable.Addition',
               title: '添加条目',
             },
           },
diff --git a/packages/element/docs/demos/guide/array-table/markup-schema.vue b/packages/element/docs/demos/guide/array-table/markup-schema.vue
index 2fb1f408296..9585fd6ca1f 100644
--- a/packages/element/docs/demos/guide/array-table/markup-schema.vue
+++ b/packages/element/docs/demos/guide/array-table/markup-schema.vue
@@ -11,15 +11,15 @@
       >
         <SchemaObjectField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ width: 80, title: 'Index' }"
             ><SchemaVoidField
               x-decorator="FormItem"
-              x-component="ArrayTableIndex"
+              x-component="ArrayTable.Index"
             />
           </SchemaVoidField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ prop: 'a1', title: 'A1', width: 200 }"
           >
             <SchemaStringField
@@ -30,7 +30,7 @@
             />
           </SchemaVoidField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ title: 'A2', width: 200 }"
           >
             <SchemaStringField
@@ -41,7 +41,7 @@
             />
           </SchemaVoidField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{ title: 'A3' }"
           >
             <SchemaStringField
@@ -52,7 +52,7 @@
             />
           </SchemaVoidField>
           <SchemaVoidField
-            x-component="ArrayTableColumn"
+            x-component="ArrayTable.Column"
             :x-component-props="{
               title: 'Operations',
               prop: 'operations',
@@ -60,13 +60,13 @@
             }"
           >
             <SchemaVoidField x-component="FormItem">
-              <SchemaVoidField x-component="ArrayTableRemove" />
-              <SchemaVoidField x-component="ArrayTableMoveUp" />
-              <SchemaVoidField x-component="ArrayTableMoveDown" />
+              <SchemaVoidField x-component="ArrayTable.Remove" />
+              <SchemaVoidField x-component="ArrayTable.MoveUp" />
+              <SchemaVoidField x-component="ArrayTable.MoveDown" />
             </SchemaVoidField>
           </SchemaVoidField>
         </SchemaObjectField>
-        <SchemaVoidField x-component="ArrayTableAddition" title="添加条目" />
+        <SchemaVoidField x-component="ArrayTable.Addition" title="添加条目" />
       </SchemaArrayField>
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -92,33 +92,13 @@
 <script>
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  Submit,
-  FormItem,
-  ArrayTable,
-  ArrayTableColumn,
-  ArrayTableAddition,
-  ArrayTableMoveDown,
-  ArrayTableMoveUp,
-  ArrayTableRemove,
-  ArrayTableIndex,
-  ArrayTableSortHandle,
-  Input,
-  Editable,
-} from '@formily/element'
+import { Submit, FormItem, ArrayTable, Input, Editable } from '@formily/element'
 import { Button, Alert } from 'element-ui'
 
 const fields = createSchemaField({
   components: {
     FormItem,
     ArrayTable,
-    ArrayTableColumn,
-    ArrayTableAddition,
-    ArrayTableMoveDown,
-    ArrayTableMoveUp,
-    ArrayTableRemove,
-    ArrayTableIndex,
-    ArrayTableSortHandle,
     Input,
     Editable,
   },
diff --git a/packages/element/docs/demos/guide/checkbox/json-schema.vue b/packages/element/docs/demos/guide/checkbox/json-schema.vue
index bba7d6e582d..c36bdb8fc39 100644
--- a/packages/element/docs/demos/guide/checkbox/json-schema.vue
+++ b/packages/element/docs/demos/guide/checkbox/json-schema.vue
@@ -8,13 +8,7 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Checkbox,
-  CheckboxGroup,
-  Submit,
-} from '@formily/element'
+import { Form, FormItem, Checkbox, Submit } from '@formily/element'
 
 const schema = {
   type: 'object',
@@ -29,7 +23,7 @@ const schema = {
       type: 'array',
       title: '复选',
       'x-decorator': 'FormItem',
-      'x-component': 'CheckboxGroup',
+      'x-component': 'Checkbox.Group',
       enum: [
         {
           label: '选项1',
@@ -49,7 +43,6 @@ const { SchemaField } = createSchemaField({
   components: {
     FormItem,
     Checkbox,
-    CheckboxGroup,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/checkbox/markup-schema.vue b/packages/element/docs/demos/guide/checkbox/markup-schema.vue
index 2c27f4075e4..7eb3e9a5cd4 100644
--- a/packages/element/docs/demos/guide/checkbox/markup-schema.vue
+++ b/packages/element/docs/demos/guide/checkbox/markup-schema.vue
@@ -15,7 +15,7 @@
           { label: '选项2', value: 2 },
         ]"
         x-decorator="FormItem"
-        x-component="CheckboxGroup"
+        x-component="Checkbox.Group"
       />
     </SchemaField>
     <Submit @submit="onSubmit">提交</Submit>
@@ -25,20 +25,13 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Checkbox,
-  CheckboxGroup,
-  Submit,
-} from '@formily/element'
+import { Form, FormItem, Checkbox, Submit } from '@formily/element'
 
 const form = createForm()
 const fields = createSchemaField({
   components: {
     FormItem,
     Checkbox,
-    CheckboxGroup,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/checkbox/template.vue b/packages/element/docs/demos/guide/checkbox/template.vue
index 821a4732bde..42e1c51daf8 100644
--- a/packages/element/docs/demos/guide/checkbox/template.vue
+++ b/packages/element/docs/demos/guide/checkbox/template.vue
@@ -14,7 +14,7 @@
         { label: '选项2', value: 2 },
       ]"
       :decorator="[FormItem]"
-      :component="[CheckboxGroup]"
+      :component="[Checkbox.Group]"
     />
     <Submit @submit="onSubmit">提交</Submit>
   </Form>
@@ -23,13 +23,7 @@
 <script>
 import { createForm } from '@formily/core'
 import { Field, ArrayField } from '@formily/vue'
-import {
-  Form,
-  FormItem,
-  Checkbox,
-  CheckboxGroup,
-  Submit,
-} from '@formily/element'
+import { Form, FormItem, Checkbox, Submit } from '@formily/element'
 
 const form = createForm()
 
@@ -39,7 +33,6 @@ export default {
     return {
       FormItem,
       Checkbox,
-      CheckboxGroup,
       form,
     }
   },
diff --git a/packages/element/docs/demos/guide/editable/json-schema.vue b/packages/element/docs/demos/guide/editable/json-schema.vue
index e811e3d92b5..a4ce79da542 100644
--- a/packages/element/docs/demos/guide/editable/json-schema.vue
+++ b/packages/element/docs/demos/guide/editable/json-schema.vue
@@ -17,7 +17,6 @@ import {
   Input,
   DatePicker,
   Editable,
-  EditablePopover,
 } from '@formily/element'
 
 const { SchemaField } = createSchemaField({
@@ -26,7 +25,6 @@ const { SchemaField } = createSchemaField({
     Input,
     DatePicker,
     Editable,
-    EditablePopover,
   },
 })
 
@@ -48,7 +46,7 @@ const schema = {
     void: {
       type: 'void',
       title: '虚拟节点容器',
-      'x-component': 'EditablePopover',
+      'x-component': 'Editable.Popover',
       'x-reactions':
         "{{(field) => field.title = field.query('.void.date2').get('value') || field.title}}",
       properties: {
@@ -69,7 +67,7 @@ const schema = {
     iobject: {
       type: 'object',
       title: '对象节点容器',
-      'x-component': 'EditablePopover',
+      'x-component': 'Editable.Popover',
       'x-reactions':
         '{{(field) => field.title = field.value && field.value.date || field.title}}',
       properties: {
diff --git a/packages/element/docs/demos/guide/editable/markup-schema.vue b/packages/element/docs/demos/guide/editable/markup-schema.vue
index 3481156b9fd..ccb01d476c3 100644
--- a/packages/element/docs/demos/guide/editable/markup-schema.vue
+++ b/packages/element/docs/demos/guide/editable/markup-schema.vue
@@ -16,7 +16,7 @@
       <SchemaVoidField
         name="void"
         title="虚拟节点容器"
-        x-component="EditablePopover"
+        x-component="Editable.Popover"
         :x-reactions="
           (field) => {
             field.title = field.query('.void.date2').get('value') || field.title
@@ -39,7 +39,7 @@
       <SchemaObjectField
         name="object"
         title="对象节点容器"
-        x-component="EditablePopover"
+        x-component="Editable.Popover"
         :x-reactions="
           (field) => {
             field.title = (field.value && field.value.date) || field.title
@@ -76,7 +76,6 @@ import {
   Input,
   DatePicker,
   Editable,
-  EditablePopover,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -86,7 +85,6 @@ const SchemaField = createSchemaField({
     Input,
     DatePicker,
     Editable,
-    EditablePopover,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/editable/template.vue b/packages/element/docs/demos/guide/editable/template.vue
index 7843c0d9a28..78a4d21c1f5 100644
--- a/packages/element/docs/demos/guide/editable/template.vue
+++ b/packages/element/docs/demos/guide/editable/template.vue
@@ -15,7 +15,7 @@
     <VoidField
       name="void"
       title="虚拟节点容器"
-      :component="[EditablePopover]"
+      :component="[Editable.Popover]"
       :reactions="
         (field) => {
           field.title = field.query('.void.date2').get('value') || field.title
@@ -38,7 +38,7 @@
     <ObjectField
       name="iobject"
       title="对象节点容器"
-      :component="[EditablePopover]"
+      :component="[Editable.Popover]"
       :reactions="
         (field) => {
           field.title = (field.value && field.value.date) || field.title
@@ -75,7 +75,6 @@ import {
   Input,
   DatePicker,
   Editable,
-  EditablePopover,
 } from '@formily/element'
 
 export default {
@@ -96,7 +95,6 @@ export default {
       Input,
       DatePicker,
       Editable,
-      EditablePopover,
       form,
     }
   },
diff --git a/packages/element/docs/demos/guide/form-dialog/custom.vue b/packages/element/docs/demos/guide/form-dialog/custom.vue
deleted file mode 100644
index d44bc7d352d..00000000000
--- a/packages/element/docs/demos/guide/form-dialog/custom.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDialog,
-  FormDialogFooter,
-  FormLayout,
-  FormItem,
-  Input,
-  Submit,
-  Reset,
-} from '@formily/element'
-import { Button } from 'element-ui'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 弹框表单组件
-const DialogForm = {
-  props: ['resolve', 'reject'],
-  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} />
-        <FormDialogFooter>
-          <Submit onClick={this.resolve}>提交</Submit>
-          <Reset>重置</Reset>
-        </FormDialogFooter>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {
-      dialogProps: {
-        footer: null,
-        title: '弹框表单',
-      },
-    }
-  },
-  methods: {
-    handleOpen() {
-      FormDialog(this.dialogProps, DialogForm)
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/packages/element/docs/demos/guide/form-dialog/json-schema-before-close.vue b/packages/element/docs/demos/guide/form-dialog/json-schema-before-close.vue
deleted file mode 100644
index 4292aa585b5..00000000000
--- a/packages/element/docs/demos/guide/form-dialog/json-schema-before-close.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import { FormDialog, FormLayout, FormItem, Input } from '@formily/element'
-import { Button } from 'element-ui'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 弹框表单组件
-const DialogForm = {
-  props: ['resolve', 'reject'],
-  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} />
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {
-      dialogProps: {
-        title: '弹框表单',
-        okButtonProps: {
-          loading: false,
-        },
-        beforeClose: (done) => {
-          if (!this.dialogProps.okButtonProps.loading) {
-            done()
-          }
-        },
-      },
-    }
-  },
-  methods: {
-    handleOpen() {
-      const formDialogHandler = FormDialog(this.dialogProps, DialogForm)
-
-      formDialogHandler
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          this.dialogProps.okButtonProps.loading = true
-
-          setTimeout(() => {
-            this.dialogProps.okButtonProps.loading = false
-            formDialogHandler.close()
-          }, 2000)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/packages/element/docs/demos/guide/form-dialog/json-schema.vue b/packages/element/docs/demos/guide/form-dialog/json-schema.vue
index be62799a4b6..202fa5d516a 100644
--- a/packages/element/docs/demos/guide/form-dialog/json-schema.vue
+++ b/packages/element/docs/demos/guide/form-dialog/json-schema.vue
@@ -3,13 +3,7 @@
 </template>
 
 <script>
-import {
-  FormDialog,
-  FormDialogFooter,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element'
+import { FormDialog, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { createSchemaField } from '@formily/vue'
 const { SchemaField } = createSchemaField({
@@ -63,9 +57,9 @@ const DialogForm = {
     return (
       <FormLayout labelCol={6} wrapperCol={10}>
         <SchemaField schema={this.schema} />
-        <FormDialogFooter>
+        <FormDialog.Footer>
           <span style={{ marginLeft: '4px' }}>扩展文案</span>
-        </FormDialogFooter>
+        </FormDialog.Footer>
       </FormLayout>
     )
   },
@@ -79,17 +73,30 @@ export default {
   methods: {
     handleOpen() {
       FormDialog('弹框表单', DialogForm)
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
+        .forOpen((payload, next) => {
+          setTimeout(() => {
+            next({
+              initialValues: {
+                aaa: '123',
+              },
+            })
+          }, 1000)
         })
-        .then((values) => {
-          console.log('values', values)
+        .forConfirm((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
-        .catch((e) => {
-          console.log(e)
+        .forCancel((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
+        .open()
+        .then(console.log)
+        .catch(console.error)
     },
   },
 }
diff --git a/packages/element/docs/demos/guide/form-dialog/markup-schema.vue b/packages/element/docs/demos/guide/form-dialog/markup-schema.vue
index c4ce42d9f06..a06c39eef1a 100644
--- a/packages/element/docs/demos/guide/form-dialog/markup-schema.vue
+++ b/packages/element/docs/demos/guide/form-dialog/markup-schema.vue
@@ -1,15 +1,11 @@
 <template>
-  <Button @click="handleOpen">点击打开表单</Button>
+  <FormDialogPortal :id="portalId">
+    <Button @click="handleOpen">点击打开表单</Button>
+  </FormDialogPortal>
 </template>
 
 <script>
-import {
-  FormDialog,
-  FormLayout,
-  FormItem,
-  Input,
-  FormDialogFooter,
-} from '@formily/element'
+import { FormDialog, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { createSchemaField } from '@formily/vue'
 
@@ -20,61 +16,90 @@ const { SchemaField, SchemaStringField } = createSchemaField({
   },
 })
 
+// 弹框表单组件
+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 },
+  components: { Button, FormDialogPortal: FormDialog.Portal },
   data() {
-    return {}
+    return {
+      portalId: '可以传，也可以不传的ID，默认是form-dialog',
+    }
+  },
+  provide: {
+    foo: '自定义上下文可以直接传到弹窗内部，只需要ID一致即可',
   },
   methods: {
     handleOpen() {
-      FormDialog('弹框表单', () => (
-        <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>
-          <FormDialogFooter>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDialogFooter>
-        </FormLayout>
-      ))
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
+      FormDialog('弹框表单', this.portalId, DialogForm)
+        .forOpen((payload, next) => {
+          setTimeout(() => {
+            next({
+              initialValues: {
+                aaa: '123',
+              },
+            })
+          }, 1000)
         })
-        .then((values) => {
-          console.log('values', values)
+        .forConfirm((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
-        .catch((e) => {
-          console.log(e)
+        .forCancel((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
+        .open()
+        .then(console.log)
+        .catch(console.error)
     },
   },
 }
diff --git a/packages/element/docs/demos/guide/form-dialog/template.vue b/packages/element/docs/demos/guide/form-dialog/template.vue
index 9d54b4efd68..ae35866981a 100644
--- a/packages/element/docs/demos/guide/form-dialog/template.vue
+++ b/packages/element/docs/demos/guide/form-dialog/template.vue
@@ -3,13 +3,7 @@
 </template>
 
 <script>
-import {
-  FormDialog,
-  FormDialogFooter,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element'
+import { FormDialog, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { Field } from '@formily/vue'
 
@@ -50,22 +44,35 @@ export default {
             decorator={[FormItem]}
             component={[Input]}
           />
-          <FormDialogFooter>
+          <FormDialog.Footer>
             <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDialogFooter>
+          </FormDialog.Footer>
         </FormLayout>
       ))
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
+        .forOpen((payload, next) => {
+          setTimeout(() => {
+            next({
+              initialValues: {
+                aaa: '123',
+              },
+            })
+          }, 1000)
         })
-        .then((values) => {
-          console.log('values', values)
+        .forConfirm((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
-        .catch((e) => {
-          console.log(e)
+        .forCancel((payload, next) => {
+          setTimeout(() => {
+            console.log(payload)
+            next(payload)
+          }, 1000)
         })
+        .open()
+        .then(console.log)
+        .catch(console.error)
     },
   },
 }
diff --git a/packages/element/docs/demos/guide/form-drawer/custom.vue b/packages/element/docs/demos/guide/form-drawer/custom.vue
deleted file mode 100644
index dd01d5a6c7f..00000000000
--- a/packages/element/docs/demos/guide/form-drawer/custom.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import {
-  FormDrawer,
-  FormDrawerFooter,
-  FormLayout,
-  FormItem,
-  Input,
-  Submit,
-  Reset,
-} from '@formily/element'
-import { Button } from 'element-ui'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 抽屉表单组件
-const DrawerForm = {
-  props: ['resolve', 'reject'],
-  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} />
-        <FormDrawerFooter>
-          <Submit onClick={this.resolve}>提交</Submit>
-          <Reset>重置</Reset>
-        </FormDrawerFooter>
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {
-      drawerProps: {
-        footer: null,
-        title: '抽屉表单',
-      },
-    }
-  },
-  methods: {
-    handleOpen() {
-      FormDrawer(this.drawerProps, DrawerForm)
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/packages/element/docs/demos/guide/form-drawer/json-schema-before-close.vue b/packages/element/docs/demos/guide/form-drawer/json-schema-before-close.vue
deleted file mode 100644
index fd6ac0054d6..00000000000
--- a/packages/element/docs/demos/guide/form-drawer/json-schema-before-close.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <Button @click="handleOpen">点击打开表单</Button>
-</template>
-
-<script>
-import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element'
-import { Button } from 'element-ui'
-import { createSchemaField } from '@formily/vue'
-
-const { SchemaField } = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-  },
-})
-
-// 抽屉表单组件
-const DrawerForm = {
-  props: ['resolve', 'reject'],
-  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} />
-      </FormLayout>
-    )
-  },
-}
-
-export default {
-  components: { Button },
-  data() {
-    return {
-      drawerProps: {
-        title: '抽屉表单',
-        okButtonProps: {
-          loading: false,
-        },
-        beforeClose: (done) => {
-          if (!this.drawerProps.okButtonProps.loading) {
-            done()
-          }
-        },
-      },
-    }
-  },
-  methods: {
-    handleOpen() {
-      const formDrawerHandler = FormDrawer(this.drawerProps, DrawerForm)
-
-      formDrawerHandler
-        .open({
-          initialValues: {
-            aaa: '123',
-          },
-        })
-        .then((values) => {
-          this.drawerProps.okButtonProps.loading = true
-
-          setTimeout(() => {
-            this.drawerProps.okButtonProps.loading = false
-            formDrawerHandler.close()
-          }, 2000)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-  },
-}
-</script>
diff --git a/packages/element/docs/demos/guide/form-drawer/json-schema.vue b/packages/element/docs/demos/guide/form-drawer/json-schema.vue
index b3f36606320..1bee087744d 100644
--- a/packages/element/docs/demos/guide/form-drawer/json-schema.vue
+++ b/packages/element/docs/demos/guide/form-drawer/json-schema.vue
@@ -3,13 +3,7 @@
 </template>
 
 <script>
-import {
-  FormDrawer,
-  FormDrawerFooter,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element'
+import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { createSchemaField } from '@formily/vue'
 const { SchemaField } = createSchemaField({
@@ -63,9 +57,9 @@ const DrawerForm = {
     return (
       <FormLayout labelCol={6} wrapperCol={10}>
         <SchemaField schema={this.schema} />
-        <FormDrawerFooter>
+        <FormDrawer.Footer>
           <span style={{ marginLeft: '4px' }}>扩展文案</span>
-        </FormDrawerFooter>
+        </FormDrawer.Footer>
       </FormLayout>
     )
   },
diff --git a/packages/element/docs/demos/guide/form-drawer/markup-schema.vue b/packages/element/docs/demos/guide/form-drawer/markup-schema.vue
index 0f21b9fbcb4..69e271d1614 100644
--- a/packages/element/docs/demos/guide/form-drawer/markup-schema.vue
+++ b/packages/element/docs/demos/guide/form-drawer/markup-schema.vue
@@ -3,23 +3,70 @@
 </template>
 
 <script>
-import {
-  FormDrawer,
-  FormLayout,
-  FormItem,
-  Input,
-  FormDrawerFooter,
-} from '@formily/element'
+import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { createSchemaField } from '@formily/vue'
 
-const { SchemaField, SchemaStringField } = createSchemaField({
+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() {
@@ -27,54 +74,18 @@ export default {
   },
   methods: {
     handleOpen() {
-      FormDrawer('抽屉表单', () => (
-        <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>
-          <FormDrawerFooter>
-            <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDrawerFooter>
-        </FormLayout>
-      ))
+      FormDrawer('抽屉表单', DrawerForm)
+        .forOpen((props, next) => {
+          setTimeout(() => {
+            next()
+          }, 1000)
+        })
         .open({
           initialValues: {
             aaa: '123',
           },
         })
-        .then((values) => {
-          console.log('values', values)
-        })
-        .catch((e) => {
-          console.log(e)
-        })
+        .then(console.log)
     },
   },
 }
diff --git a/packages/element/docs/demos/guide/form-drawer/template.vue b/packages/element/docs/demos/guide/form-drawer/template.vue
index 72b9d130385..85bc219ed6a 100644
--- a/packages/element/docs/demos/guide/form-drawer/template.vue
+++ b/packages/element/docs/demos/guide/form-drawer/template.vue
@@ -3,13 +3,7 @@
 </template>
 
 <script>
-import {
-  FormDrawer,
-  FormDrawerFooter,
-  FormLayout,
-  FormItem,
-  Input,
-} from '@formily/element'
+import { FormDrawer, FormLayout, FormItem, Input } from '@formily/element'
 import { Button } from 'element-ui'
 import { Field } from '@formily/vue'
 
@@ -50,9 +44,9 @@ export default {
             decorator={[FormItem]}
             component={[Input]}
           />
-          <FormDrawerFooter>
+          <FormDrawer.Footer>
             <span style={{ marginLeft: '4px' }}>扩展文案</span>
-          </FormDrawerFooter>
+          </FormDrawer.Footer>
         </FormLayout>
       ))
         .open({
diff --git a/packages/element/docs/demos/guide/form-grid/native.vue b/packages/element/docs/demos/guide/form-grid/native.vue
index 9a2a32ecccc..6b6df93a3ea 100644
--- a/packages/element/docs/demos/guide/form-grid/native.vue
+++ b/packages/element/docs/demos/guide/form-grid/native.vue
@@ -130,7 +130,7 @@
 </template>
 
 <script>
-import { FormGrid, FormGridColumn } from '@formily/element'
+import { FormGrid } from '@formily/element'
 
 const Cell = {
   functional: true,
@@ -153,6 +153,6 @@ const Cell = {
 }
 
 export default {
-  components: { FormGrid, FormGridColumn, Cell },
+  components: { FormGrid, FormGridColumn: FormGrid.GridColumn, Cell },
 }
 </script>
diff --git a/packages/element/docs/demos/guide/form-step/json-schema.vue b/packages/element/docs/demos/guide/form-step/json-schema.vue
index f0352f9587a..8d4710d0c50 100644
--- a/packages/element/docs/demos/guide/form-step/json-schema.vue
+++ b/packages/element/docs/demos/guide/form-step/json-schema.vue
@@ -37,11 +37,9 @@ import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue'
 import {
   FormItem,
   FormStep,
-  FormStepPane,
   FormButtonGroup,
   Submit,
   Input,
-  createFormStep,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -49,7 +47,6 @@ const { SchemaField } = createSchemaField({
   components: {
     FormItem,
     FormStep,
-    FormStepPane,
     Input,
   },
 })
@@ -66,7 +63,7 @@ const schema = {
       properties: {
         step1: {
           type: 'void',
-          'x-component': 'FormStepPane',
+          'x-component': 'FormStep.StepPane',
           'x-component-props': {
             title: '第一步',
           },
@@ -82,7 +79,7 @@ const schema = {
         },
         step2: {
           type: 'void',
-          'x-component': 'FormStepPane',
+          'x-component': 'FormStep.StepPane',
           'x-component-props': {
             title: '第二步',
           },
@@ -98,7 +95,7 @@ const schema = {
         },
         step3: {
           type: 'void',
-          'x-component': 'FormStepPane',
+          'x-component': 'FormStep.StepPane',
           'x-component-props': {
             title: '第三步',
           },
@@ -129,7 +126,7 @@ export default {
 
   data() {
     const form = createForm()
-    const formStep = createFormStep()
+    const formStep = FormStep.createFormStep()
     return {
       schema,
       form,
diff --git a/packages/element/docs/demos/guide/form-step/markup-schema.vue b/packages/element/docs/demos/guide/form-step/markup-schema.vue
index 568d811cbc5..0dcee315251 100644
--- a/packages/element/docs/demos/guide/form-step/markup-schema.vue
+++ b/packages/element/docs/demos/guide/form-step/markup-schema.vue
@@ -3,7 +3,7 @@
     <SchemaField>
       <SchemaVoidField x-component="FormStep" :x-component-props="{ formStep }">
         <SchemaVoidField
-          x-component="FormStepPane"
+          x-component="FormStep.StepPane"
           :x-component-props="{ title: '第一步' }"
         >
           <SchemaStringField
@@ -14,7 +14,7 @@
           />
         </SchemaVoidField>
         <SchemaVoidField
-          x-component="FormStepPane"
+          x-component="FormStep.StepPane"
           :x-component-props="{ title: '第二步' }"
         >
           <SchemaStringField
@@ -26,7 +26,7 @@
         </SchemaVoidField>
         <SchemaVoidField
           type="void"
-          x-component="FormStepPane"
+          x-component="FormStep.StepPane"
           :x-component-props="{ title: '第三步' }"
         >
           <SchemaStringField
@@ -74,11 +74,9 @@ import { FormProvider, FormConsumer, createSchemaField } from '@formily/vue'
 import {
   FormItem,
   FormStep,
-  FormStepPane,
   FormButtonGroup,
   Submit,
   Input,
-  createFormStep,
 } from '@formily/element'
 import { Button } from 'element-ui'
 import Template from '../editable/template.vue'
@@ -87,11 +85,10 @@ const SchemaField = createSchemaField({
   components: {
     FormItem,
     FormStep,
-    FormStepPane,
     Input,
   },
 })
-const formStep = createFormStep()
+const formStep = FormStep.createFormStep
 
 export default {
   components: {
diff --git a/packages/element/docs/demos/guide/form-tab/json-schema.vue b/packages/element/docs/demos/guide/form-tab/json-schema.vue
index 11d001b08d4..b152644b38b 100644
--- a/packages/element/docs/demos/guide/form-tab/json-schema.vue
+++ b/packages/element/docs/demos/guide/form-tab/json-schema.vue
@@ -33,11 +33,9 @@ import { FormProvider, createSchemaField } from '@formily/vue'
 import {
   FormItem,
   FormTab,
-  FormTabPane,
   FormButtonGroup,
   Submit,
   Input,
-  createFormTab,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -45,7 +43,6 @@ const { SchemaField } = createSchemaField({
   components: {
     FormItem,
     FormTab,
-    FormTabPane,
     Input,
   },
 })
@@ -62,7 +59,7 @@ const schema = {
       properties: {
         tab1: {
           type: 'void',
-          'x-component': 'FormTabPane',
+          'x-component': 'FormTab.TabPane',
           'x-component-props': {
             label: 'A1',
           },
@@ -78,7 +75,7 @@ const schema = {
         },
         tab2: {
           type: 'void',
-          'x-component': 'FormTabPane',
+          'x-component': 'FormTab.TabPane',
           'x-component-props': {
             label: 'A2',
           },
@@ -94,7 +91,7 @@ const schema = {
         },
         tab3: {
           type: 'void',
-          'x-component': 'FormTabPane',
+          'x-component': 'FormTab.TabPane',
           'x-component-props': {
             label: 'A3',
           },
@@ -124,7 +121,7 @@ export default {
 
   data() {
     const form = createForm()
-    const formTab = createFormTab()
+    const formTab = FormTab.createFormTab()
 
     return {
       schema,
diff --git a/packages/element/docs/demos/guide/form-tab/markup-schema.vue b/packages/element/docs/demos/guide/form-tab/markup-schema.vue
index d2d03590110..f2997238746 100644
--- a/packages/element/docs/demos/guide/form-tab/markup-schema.vue
+++ b/packages/element/docs/demos/guide/form-tab/markup-schema.vue
@@ -9,7 +9,7 @@
         <SchemaVoidField
           type="void"
           name="tab1"
-          x-component="FormTabPane"
+          x-component="FormTab.TabPane"
           :x-component-props="{ label: 'A1' }"
         >
           <SchemaStringField
@@ -22,7 +22,7 @@
         </SchemaVoidField>
         <SchemaVoidField
           name="tab2"
-          x-component="FormTabPane"
+          x-component="FormTab.TabPane"
           :x-component-props="{ label: 'A2' }"
         >
           <SchemaStringField
@@ -35,7 +35,7 @@
         </SchemaVoidField>
         <SchemaVoidField
           name="tab3"
-          x-component="FormTabPane"
+          x-component="FormTab.TabPane"
           :x-component-props="{ label: 'A3' }"
         >
           <SchemaStringField
@@ -80,11 +80,9 @@ import { FormProvider, createSchemaField } from '@formily/vue'
 import {
   FormItem,
   FormTab,
-  FormTabPane,
   FormButtonGroup,
   Submit,
   Input,
-  createFormTab,
 } from '@formily/element'
 import { Button } from 'element-ui'
 
@@ -92,7 +90,6 @@ const SchemaField = createSchemaField({
   components: {
     FormItem,
     FormTab,
-    FormTabPane,
     Input,
   },
 })
@@ -108,7 +105,7 @@ export default {
 
   data() {
     const form = createForm()
-    const formTab = createFormTab()
+    const formTab = FormTab.createFormTab()
 
     return {
       form,
diff --git a/packages/element/docs/demos/guide/input/json-schema.vue b/packages/element/docs/demos/guide/input/json-schema.vue
index b566553f6d0..04fceabe2b4 100644
--- a/packages/element/docs/demos/guide/input/json-schema.vue
+++ b/packages/element/docs/demos/guide/input/json-schema.vue
@@ -8,7 +8,7 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Input, TextArea, Submit } from '@formily/element'
+import { Form, FormItem, Input, Submit } from '@formily/element'
 
 const schema = {
   type: 'object',
@@ -23,7 +23,7 @@ const schema = {
       type: 'string',
       title: '文本框',
       'x-decorator': 'FormItem',
-      'x-component': 'TextArea',
+      'x-component': 'Input.TextArea',
     },
   },
 }
@@ -33,7 +33,6 @@ const { SchemaField } = createSchemaField({
   components: {
     FormItem,
     Input,
-    TextArea,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/input/markup-schema.vue b/packages/element/docs/demos/guide/input/markup-schema.vue
index 1452f55e48c..d418237cedb 100644
--- a/packages/element/docs/demos/guide/input/markup-schema.vue
+++ b/packages/element/docs/demos/guide/input/markup-schema.vue
@@ -11,7 +11,7 @@
         name="textarea"
         title="文本框"
         x-decorator="FormItem"
-        x-component="TextArea"
+        x-component="Input.TextArea"
       />
     </SchemaField>
     <Submit @submit="log">提交</Submit>
@@ -21,14 +21,13 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, Input, TextArea, Submit } from '@formily/element'
+import { FormItem, Input, Submit } from '@formily/element'
 
 const form = createForm()
 const fields = createSchemaField({
   components: {
     FormItem,
     Input,
-    TextArea,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/input/template.vue b/packages/element/docs/demos/guide/input/template.vue
index 4d25984eee2..e7f88aa619e 100644
--- a/packages/element/docs/demos/guide/input/template.vue
+++ b/packages/element/docs/demos/guide/input/template.vue
@@ -10,7 +10,7 @@
       name="textarea"
       title="文本框"
       :decorator="[FormItem]"
-      :component="[TextArea]"
+      :component="[Input.TextArea]"
     />
     <Submit @submit="log">提交</Submit>
   </FormProvider>
@@ -18,8 +18,8 @@
 
 <script>
 import { createForm } from '@formily/core'
-import { createSchemaField, FormProvider, Field } from '@formily/vue'
-import { FormItem, Input, TextArea, Submit } from '@formily/element'
+import { FormProvider, Field } from '@formily/vue'
+import { FormItem, Input, Submit } from '@formily/element'
 
 const form = createForm()
 
@@ -29,7 +29,6 @@ export default {
     return {
       FormItem,
       Input,
-      TextArea,
       form,
     }
   },
diff --git a/packages/element/docs/demos/guide/preview-text/base.vue b/packages/element/docs/demos/guide/preview-text/base.vue
index 8300450a063..9db1365ca7b 100644
--- a/packages/element/docs/demos/guide/preview-text/base.vue
+++ b/packages/element/docs/demos/guide/preview-text/base.vue
@@ -5,13 +5,13 @@
         <SchemaStringField
           x-decorator="FormItem"
           title="文本预览"
-          x-component="PreviewInputText"
+          x-component="PreviewText.Input"
           default="Hello world"
         />
         <SchemaStringField
           x-decorator="FormItem"
           title="选择项预览"
-          x-component="PreviewSelectText"
+          x-component="PreviewText.Select"
           :x-component-props="{
             multiple: true,
           }"
@@ -27,19 +27,19 @@
         <SchemaStringField
           x-decorator="FormItem"
           title="日期预览"
-          x-component="PreviewDatePickerText"
+          x-component="PreviewText.DatePicker"
           default="2020-11-23 22:15:20"
         />
         <SchemaStringField
           x-decorator="FormItem"
           title="时间预览"
-          x-component="PreviewTimePickerText"
+          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="PreviewCascaderText"
+          x-component="PreviewText.Cascader"
           :default="['hangzhou', 'yuhang']"
           :enum="[
             { label: '杭州', value: 'hangzhou' },
@@ -54,24 +54,12 @@
 <script>
 import { createForm } from '@formily/core'
 import { FormProvider, createSchemaField } from '@formily/vue'
-import {
-  FormLayout,
-  FormItem,
-  PreviewInputText,
-  PreviewSelectText,
-  PreviewCascaderText,
-  PreviewDatePickerText,
-  PreviewTimePickerText,
-} from '@formily/element'
+import { FormLayout, FormItem, PreviewText } from '@formily/element'
 
 const fields = createSchemaField({
   components: {
     FormItem,
-    PreviewInputText,
-    PreviewSelectText,
-    PreviewCascaderText,
-    PreviewDatePickerText,
-    PreviewTimePickerText,
+    PreviewText,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/preview-text/extend.vue b/packages/element/docs/demos/guide/preview-text/extend.vue
index baf01e8f3c7..0aaee9ab45f 100644
--- a/packages/element/docs/demos/guide/preview-text/extend.vue
+++ b/packages/element/docs/demos/guide/preview-text/extend.vue
@@ -15,7 +15,7 @@
       <SchemaStringField
         x-decorator="FormItem"
         title="选择项预览"
-        x-component="PreviewSelectText"
+        x-component="PreviewText.Select"
         :x-component-props="{
           multiple: true,
         }"
@@ -31,19 +31,19 @@
       <SchemaStringField
         x-decorator="FormItem"
         title="日期预览"
-        x-component="PreviewDatePickerText"
+        x-component="PreviewText.DatePicker"
         default="2020-11-23 22:15:20"
       />
       <SchemaStringField
         x-decorator="FormItem"
         title="日期范围预览"
-        x-component="PreviewDatePickerText"
+        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="PreviewCascaderText"
+        x-component="PreviewText.Cascader"
         :default="['hangzhou', 'yuhang']"
         :enum="[
           { label: '杭州', value: 'hangzhou' },
@@ -74,9 +74,7 @@ import {
   Form,
   FormItem,
   Input,
-  PreviewSelectText,
-  PreviewCascaderText,
-  PreviewDatePickerText,
+  PreviewText,
   FormButtonGroup,
 } from '@formily/element'
 import { Button } from 'element-ui'
@@ -85,9 +83,7 @@ const fields = createSchemaField({
   components: {
     FormItem,
     Input,
-    PreviewSelectText,
-    PreviewCascaderText,
-    PreviewDatePickerText,
+    PreviewText,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/radio/json-schema.vue b/packages/element/docs/demos/guide/radio/json-schema.vue
index c4c9e226894..4fa15ae7a6d 100644
--- a/packages/element/docs/demos/guide/radio/json-schema.vue
+++ b/packages/element/docs/demos/guide/radio/json-schema.vue
@@ -8,13 +8,12 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
-import { Form, FormItem, Radio, RadioGroup, Submit } from '@formily/element'
+import { Form, FormItem, Radio, Submit } from '@formily/element'
 
 const { SchemaField } = createSchemaField({
   components: {
     FormItem,
     Radio,
-    RadioGroup,
   },
 })
 
@@ -38,7 +37,7 @@ export default {
             },
           ],
           'x-decorator': 'FormItem',
-          'x-component': 'RadioGroup',
+          'x-component': 'Radio.Group',
         },
       },
     }
diff --git a/packages/element/docs/demos/guide/radio/markup-schema.vue b/packages/element/docs/demos/guide/radio/markup-schema.vue
index e6912276b36..55f1aee89d7 100644
--- a/packages/element/docs/demos/guide/radio/markup-schema.vue
+++ b/packages/element/docs/demos/guide/radio/markup-schema.vue
@@ -5,7 +5,7 @@
         name="input"
         title="单选"
         x-decorator="FormItem"
-        x-component="RadioGroup"
+        x-component="Radio.Group"
         :enum="[
           {
             label: '选项1',
@@ -25,13 +25,13 @@
 <script>
 import { createForm } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/vue'
-import { FormItem, RadioGroup, Submit } from '@formily/element'
+import { FormItem, Radio, Submit } from '@formily/element'
 
 const form = createForm()
 const fields = createSchemaField({
   components: {
     FormItem,
-    RadioGroup,
+    Radio,
   },
 })
 
diff --git a/packages/element/docs/demos/guide/radio/template.vue b/packages/element/docs/demos/guide/radio/template.vue
index 8b6109c240d..ad4aaf853c8 100644
--- a/packages/element/docs/demos/guide/radio/template.vue
+++ b/packages/element/docs/demos/guide/radio/template.vue
@@ -4,7 +4,7 @@
       name="input"
       title="单选"
       :decorator="[FormItem]"
-      :component="[RadioGroup]"
+      :component="[Radio.Group]"
       :dataSource="[
         {
           label: '选项1',
@@ -23,7 +23,7 @@
 <script>
 import { createForm } from '@formily/core'
 import { FormProvider, Field } from '@formily/vue'
-import { FormItem, RadioGroup, Submit } from '@formily/element'
+import { FormItem, Radio, Submit } from '@formily/element'
 
 const form = createForm()
 
@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       FormItem,
-      RadioGroup,
+      Radio,
       form,
     }
   },
diff --git a/packages/element/docs/guide/array-cards.md b/packages/element/docs/guide/array-cards.md
index 5f465a32243..4fa116885e8 100644
--- a/packages/element/docs/guide/array-cards.md
+++ b/packages/element/docs/guide/array-cards.md
@@ -28,7 +28,7 @@
 
 参考 [https://element.eleme.io/#/zh-CN/component/card](https://element.eleme.io/#/zh-CN/component/card)
 
-### ArrayCardsAddition
+### ArrayCards.Addition
 
 > 添加按钮
 
@@ -44,7 +44,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCardsRemove
+### ArrayCards.Remove
 
 > 删除按钮
 
@@ -56,7 +56,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCardsMoveDown
+### ArrayCards.MoveDown
 
 > 下移按钮
 
@@ -68,7 +68,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCardsMoveUp
+### ArrayCards.MoveUp
 
 > 上移按钮
 
@@ -80,12 +80,12 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCardsIndex
+### ArrayCards.Index
 
 > 索引渲染器
 
 无属性
 
-### useArrayCardsIndex
+### ArrayCards.useIndex
 
 > 读取当前渲染行索引的 Hook
diff --git a/packages/element/docs/guide/array-collapse.md b/packages/element/docs/guide/array-collapse.md
index 8bba253b1c8..0141f139bab 100644
--- a/packages/element/docs/guide/array-collapse.md
+++ b/packages/element/docs/guide/array-collapse.md
@@ -26,11 +26,11 @@
 
 参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
 
-### ArrayCollapseItem
+### ArrayCollapse.Item
 
 参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
 
-### ArrayCollapseAddition
+### ArrayCollapse.Addition
 
 > 添加按钮
 
@@ -46,7 +46,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCollapseRemove
+### ArrayCollapse.Remove
 
 > 删除按钮
 
@@ -58,7 +58,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCollapseMoveDown
+### ArrayCollapse.MoveDown
 
 > 下移按钮
 
@@ -70,7 +70,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCollapseMoveUp
+### ArrayCollapse.MoveUp
 
 > 上移按钮
 
@@ -82,12 +82,12 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayCollapseIndex
+### ArrayCollapse.Index
 
 > 索引渲染器
 
 无属性
 
-### useArrayCollapseIndex
+### ArrayCollapse.useIndex
 
 > 读取当前渲染行索引的 Hook
diff --git a/packages/element/docs/guide/array-items.md b/packages/element/docs/guide/array-items.md
index e752836399d..c6601398989 100644
--- a/packages/element/docs/guide/array-items.md
+++ b/packages/element/docs/guide/array-items.md
@@ -18,19 +18,19 @@
 
 继承 HTMLDivElement Props
 
-### ArrayItemsItem
+### ArrayItems.Item
 
 > 列表区块
 
 继承 HTMLDivElement Props
 
-### ArrayItemsSortHandle
+### ArrayItems.SortHandle
 
 > 拖拽手柄
 
 参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button)
 
-### ArrayItemsAddition
+### ArrayItems.Addition
 
 > 添加按钮
 
@@ -46,7 +46,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayItemsRemove
+### ArrayItems.Remove
 
 > 删除按钮
 
@@ -58,7 +58,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayItemsMoveDown
+### ArrayItems.MoveDown
 
 > 下移按钮
 
@@ -70,7 +70,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayItemsMoveUp
+### ArrayItems.MoveUp
 
 > 上移按钮
 
@@ -82,12 +82,12 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayItemsIndex
+### ArrayItems.Index
 
 > 索引渲染器
 
 无属性
 
-### useArrayItemsIndex
+### ArrayItems.useIndex
 
 > 读取当前渲染行索引的 Hook
diff --git a/packages/element/docs/guide/array-table.md b/packages/element/docs/guide/array-table.md
index a7694da3464..13e794adaf2 100644
--- a/packages/element/docs/guide/array-table.md
+++ b/packages/element/docs/guide/array-table.md
@@ -28,7 +28,7 @@
 
 参考 [https://element.eleme.io/#/zh-CN/component/table](https://element.eleme.io/#/zh-CN/component/table)
 
-### ArrayTableColumn
+### ArrayTable.Column
 
 > 表格列
 
@@ -42,7 +42,7 @@
 
 > ArrayTableColumn 会自动检查内部的 FormItem 是否必填，并自动在表头加上红色星号。如果不希望显示，可通过 `asterisk` 属性进行覆盖。
 
-### ArrayTableAddition
+### ArrayTable.Addition
 
 > 添加按钮
 
@@ -57,7 +57,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayTableRemove
+### ArrayTable.Remove
 
 > 删除按钮
 
@@ -69,7 +69,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayTableMoveDown
+### ArrayTable.MoveDown
 
 > 下移按钮
 
@@ -81,7 +81,7 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayTableMoveUp
+### ArrayTable.MoveUp
 
 > 上移按钮
 
@@ -93,12 +93,12 @@
 
 注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
 
-### ArrayTableIndex
+### ArrayTable.Index
 
 > 索引渲染器
 
 无属性
 
-### useArrayTableIndex
+### ArrayTable.useIndex
 
 > 读取当前渲染行索引的 Hook
diff --git a/packages/element/docs/guide/editable.md b/packages/element/docs/guide/editable.md
index b7f53fa8b24..bc2926d4598 100644
--- a/packages/element/docs/guide/editable.md
+++ b/packages/element/docs/guide/editable.md
@@ -24,7 +24,7 @@
 
 参考 [https://element.formilyjs.org/guide/form-item.html#api](https://element.formilyjs.org/guide/form-item.html#api)
 
-### EditablePopover
+### Editable.Popover
 
 > 浮层编辑
 
diff --git a/packages/element/docs/guide/form-dialog.md b/packages/element/docs/guide/form-dialog.md
index 03009c51808..746dfa9c804 100644
--- a/packages/element/docs/guide/form-dialog.md
+++ b/packages/element/docs/guide/form-dialog.md
@@ -4,6 +4,13 @@
 
 ## Markup Schema 案例
 
+以下例子演示了 FormDialog 的几个能力：
+
+- 快速打开，关闭能力
+- 中间件能力，自动出现加载态
+- 渲染函数内可以响应式能力
+- 上下文共享能力
+
 <dumi-previewer demoPath="guide/form-dialog/markup-schema" />
 
 ## JSON Schema 案例
@@ -14,63 +21,57 @@
 
 <dumi-previewer demoPath="guide/form-dialog/template" />
 
-## 弹框拦截案例
-
-<dumi-previewer demoPath="guide/form-dialog/json-schema-before-close" />
-
-## 自定义 footer
-
-<dumi-previewer demoPath="guide/form-dialog/custom" />
-
 ## API
 
 ### FormDialog
 
 ```ts pure
-import { IFormProps } from '@formily/core'
+import { IFormProps, Form } from '@formily/core'
 
-type FormDialogContentProps = { resolve: () => any; reject: () => any }
+type FormDialogContentProps = { form: Form }
 
-type FormDialogHandler = {
-  //打开弹窗，接收表单属性，可以传入initialValues/values/effects etc.
-  open(props: IFormProps): Promise<any> //返回表单数据
-  //关闭弹窗
-  close(): void
-}
+type FormDialogContent = Component | ((props: FormDialogContentProps) => VNode)
 
-interface IFormDialog {
-  (
-    title: string | Component | VNode,
-    renderer: Component | ((props: FormDialogContentProps) => VNode)
-  ): FormDialogHandler
-  (
-    title: IFormDialogProps, //如果是对象，则作为IFormDialogProps传入
-    renderer: Component | ((props: FormDialogContentProps) => VNode)
-  ): FormDialogHandler
-}
-```
+type DialogTitle = string | number | Component | VNode | (() => VNode)
 
-### IFormDialogProps
-
-```ts pure
-type IFormDialogProps = DialogProps & {
-  title?: string | Component | VNode
-  footer?: null | Component | VNode
-  cancelText?: string | Component | VNode
+type IFormDialogProps = Omit<DialogProps, 'title'> & {
+  title?: DialogTitle
+  footer?: null | Component | VNode | (() => VNode)
+  cancelText?: string | Component | VNode | (() => VNode)
   cancelButtonProps?: ButtonProps
-  okText?: string | Component | VNode
+  okText?: string | Component | VNode | (() => VNode)
   okButtonProps?: ButtonProps
   onOpen?: () => void
   onOpend?: () => void
   onClose?: () => void
   onClosed?: () => void
-  onCancel?: () => void // 取消按钮点击事件
-  onOK?: () => 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)
 
-### FormDialogFooter
+### FormDialog.Footer
 
 无属性，只接收子节点
+
+### FormDialog.Portal
+
+接收可选的 id 属性，默认值为 form-dialog，如果一个应用存在多个 prefixCls，不同区域的弹窗内部 prefixCls 不一样，那推荐指定 id 为区域级 id
diff --git a/packages/element/docs/guide/form-drawer.md b/packages/element/docs/guide/form-drawer.md
index 16e3da9b1cf..740b23529b1 100644
--- a/packages/element/docs/guide/form-drawer.md
+++ b/packages/element/docs/guide/form-drawer.md
@@ -14,63 +14,49 @@
 
 <dumi-previewer demoPath="guide/form-drawer/template" />
 
-## 抽屉拦截案例
-
-<dumi-previewer demoPath="guide/form-drawer/json-schema-before-close" />
-
-## 自定义 footer
-
-<dumi-previewer demoPath="guide/form-drawer/custom" />
-
 ## API
 
 ### FormDrawer
 
 ```ts pure
-import { IFormProps } from '@formily/core'
+import { IFormProps, Form } from '@formily/core'
 
-type FormDrawerContentProps = { resolve: () => any; reject: () => any }
+type FormDrawerContentProps = { form: Form }
 
-type FormDrawerHandler = {
-  //打开弹窗，接收表单属性，可以传入initialValues/values/effects etc.
-  open(props: IFormProps): Promise<any> //返回表单数据
-  //关闭弹窗
-  close(): void
-}
+type FormDrawerContent = Component | ((props: FormDrawerContentProps) => VNode)
 
-interface IFormDrawer {
-  (
-    title: string | Component | Vnode | () => VNode,
-    renderer: ((props: FormDrawerContentProps) => VNode) | Component
-  ): FormDrawerHandler
-  (
-    title: IFormDrawerProps, //如果是对象，则作为IFormDrawerProps传入
-    renderer: ((props: FormDrawerContentProps) => VNode) | Component
-  ): FormDrawerHandler
-}
-```
+type DrawerTitle = string | number | Component | VNode | (() => VNode)
 
-### IFormDrawerProps
-
-```ts pure
-type IFormDrawerProps = DrawerProps & {
-  title?: string | Component | VNode
-  footer?: null | Component | VNode
-  cancelText?: string | Component | VNode
+type IFormDrawerProps = Omit<DrawerProps, 'title'> & {
+  title?: DrawerTitle
+  footer?: null | Component | VNode | (() => VNode)
+  cancelText?: string | Component | VNode | (() => VNode)
   cancelButtonProps?: ButtonProps
-  okText?: string | Component | VNode
+  okText?: string | Component | VNode | (() => VNode)
   okButtonProps?: ButtonProps
   onOpen?: () => void
   onOpend?: () => void
   onClose?: () => void
   onClosed?: () => void
-  onCancel?: () => void // 取消按钮点击事件
-  onOK?: () => 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)
 
-### FormDrawerFooter
+### FormDrawer.Footer
 
 无属性，只接收子节点
+
+### FormDrawer.Portal
+
+接收可选的 id 属性，默认值为 form-dialog，如果一个应用存在多个 prefixCls，不同区域的弹窗内部 prefixCls 不一样，那推荐指定 id 为区域级 id
diff --git a/packages/element/docs/guide/form-grid.md b/packages/element/docs/guide/form-grid.md
index cd6c36e4cba..ec07ba32a23 100644
--- a/packages/element/docs/guide/form-grid.md
+++ b/packages/element/docs/guide/form-grid.md
@@ -35,13 +35,13 @@
 - maxWidth 优先级高于 maxColumn
 - minWidth/maxWidth/minColumns/maxColumns 的数组格式代表与断点数组映射
 
-### FormGridColumn
+### FormGrid.GridColumn
 
 | 属性名   | 类型   | 描述         | 默认值 |
 | -------- | ------ | ------------ | ------ |
 | gridSpan | number | 元素所跨列数 | 1      |
 
-### useGridSpan
+### FormGrid.useGridSpan
 
 #### 描述
 
diff --git a/packages/element/docs/guide/form-item.md b/packages/element/docs/guide/form-item.md
index 021fa0ca632..53fbc96d80a 100644
--- a/packages/element/docs/guide/form-item.md
+++ b/packages/element/docs/guide/form-item.md
@@ -75,6 +75,6 @@
 | asterisk       | boolean                                                | 星号提醒                                    | -          |
 | gridSpan       | number                                                 | ⽹格布局占宽                                | -          |
 
-### FormBaseItem
+### FormItem.BaseItem
 
 纯样式组件，属性与 FormItem 一样，与 Formily Core 不做状态桥接，主要用于一些需要依赖 FormItem 的样式布局能力，但不希望接入 Field 状态的场景
diff --git a/packages/element/docs/guide/form-step.md b/packages/element/docs/guide/form-step.md
index 0800ad28f4c..256f49af4a1 100644
--- a/packages/element/docs/guide/form-step.md
+++ b/packages/element/docs/guide/form-step.md
@@ -22,11 +22,11 @@
 
 其余参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
 
-### FormStepPane
+### FormStep.StepPane
 
 参考 [https://element.eleme.io/#/zh-CN/component/steps](https://element.eleme.io/#/zh-CN/component/steps)
 
-### createFormStep
+### FormStep.createFormStep
 
 ```ts pure
 interface createFormStep {
diff --git a/packages/element/docs/guide/form-tab.md b/packages/element/docs/guide/form-tab.md
index 44d9fc3d174..e418720686f 100644
--- a/packages/element/docs/guide/form-tab.md
+++ b/packages/element/docs/guide/form-tab.md
@@ -22,11 +22,11 @@
 
 其余参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
 
-### FormTabPane
+### FormTab.TabPane
 
 参考 [https://element.eleme.io/#/zh-CN/component/tabs](https://element.eleme.io/#/zh-CN/component/tabs)
 
-### createFormTab
+### FormTab.createFormTab
 
 ```ts pure
 type ActiveKey = string | number
diff --git a/packages/element/docs/guide/index.md b/packages/element/docs/guide/index.md
index 2480ce19992..90d5a691156 100644
--- a/packages/element/docs/guide/index.md
+++ b/packages/element/docs/guide/index.md
@@ -62,7 +62,48 @@
 ```bash
 $ npm install --save element-ui
 $ npm install --save @formily/core @formily/vue @vue/composition-api @formily/element
+```
+
+## 按需打包
+
+`Element-UI` 按需引入参见 [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`按需引入需借助 `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-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@formily/element",
+        "libraryDirectory": "esm",
+        "style": true
+      }
+    ]
+  ]
+}
 ```
 
 ## Q/A
diff --git a/packages/element/docs/guide/preview-text.md b/packages/element/docs/guide/preview-text.md
index 963e91c1f70..4898c9297de 100644
--- a/packages/element/docs/guide/preview-text.md
+++ b/packages/element/docs/guide/preview-text.md
@@ -12,23 +12,23 @@
 
 ## API
 
-### PreviewInputText
+### PreviewText.Input
 
 参考 [https://element.eleme.io/#/zh-CN/component/input](https://element.eleme.io/#/zh-CN/component/input)
 
-### PreviewSelectText
+### PreviewText.Select
 
 参考 [https://element.eleme.io/#/zh-CN/component/select](https://element.eleme.io/#/zh-CN/component/select)
 
-### PreviewCascaderText
+### PreviewText.Cascader
 
 参考 [https://element.eleme.io/#/zh-CN/component/cascader](https://element.eleme.io/#/zh-CN/component/cascader)
 
-### PreviewDatePickerText
+### PreviewText.DatePicker
 
 参考 [https://element.eleme.io/#/zh-CN/component/date-picker](https://element.eleme.io/#/zh-CN/component/date-picker)
 
-### PreviewTimePickerText
+### PreviewText.TimePicker
 
 参考 [https://element.eleme.io/#/zh-CN/component/time-picker](https://element.eleme.io/#/zh-CN/component/time-picker)
 
@@ -38,13 +38,13 @@
 | ------ | ------ | ---------- | ------ |
 | value  | stirng | 缺省占位符 | N/A    |
 
-### PreviewTextPlaceholder
+### PreviewText.Placeholder
 
 | 属性名 | 类型   | 描述       | 默认值 |
 | ------ | ------ | ---------- | ------ |
 | value  | stirng | 缺省占位符 | N/A    |
 
-### usePreviewTextPlaceholder
+### PreviewText.usePlaceholder
 
 ```ts pure
 interface usePreviewTextPlaceholder {
diff --git a/packages/element/package.json b/packages/element/package.json
index 9a50d160917..351c2bae8fe 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -24,8 +24,8 @@
     "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",
     "create:style": "ts-node create-style",
     "build:style": "ts-node build-style",
-    "build:cjs": "tsc --declaration",
-    "build:esm": "tsc --declaration --module es2015 --outDir esm",
+    "build:cjs": "ttsc  --declaration",
+    "build:esm": "ttsc --declaration --module es2015 --outDir esm",
     "build:umd": "rollup --config",
     "build:docs": "vuepress build docs"
   },
@@ -41,7 +41,9 @@
     "sass": "^1.34.1",
     "vue": "^2.6.0",
     "vuepress": "^1.8.2",
-    "vuepress-plugin-typescript": "^0.3.1"
+    "vuepress-plugin-typescript": "^0.3.1",
+    "ttypescript": "^1.5.12",
+    "ts-import-plugin": "^1.6.7"
   },
   "dependencies": {
     "@formily/core": "2.0.0-beta.83",
diff --git a/packages/element/src/__builtins__/shared/index.ts b/packages/element/src/__builtins__/shared/index.ts
index 4a4e0dfd705..113e5b0c72e 100644
--- a/packages/element/src/__builtins__/shared/index.ts
+++ b/packages/element/src/__builtins__/shared/index.ts
@@ -2,3 +2,5 @@ export * from './get-component-by-tag'
 export * from './resolve-component'
 export * from './create-context'
 export * from './utils'
+export * from './portal'
+export * from './loading'
diff --git a/packages/element/src/__builtins__/shared/loading.ts b/packages/element/src/__builtins__/shared/loading.ts
new file mode 100644
index 00000000000..d5c88f65a3f
--- /dev/null
+++ b/packages/element/src/__builtins__/shared/loading.ts
@@ -0,0 +1,18 @@
+import { Loading } from 'element-ui'
+
+export const loading = async (
+  loadingText = 'Loading...',
+  processor: () => Promise<any>
+) => {
+  let loadingInstance = null
+  let loading = setTimeout(() => {
+    loadingInstance = Loading.service({
+      text: loadingText,
+      background: 'transparent',
+    })
+  }, 100)
+  const results = await processor()
+  loadingInstance?.close()
+  clearTimeout(loading)
+  return results
+}
diff --git a/packages/element/src/__builtins__/shared/portal.ts b/packages/element/src/__builtins__/shared/portal.ts
new file mode 100644
index 00000000000..c1f99a6e977
--- /dev/null
+++ b/packages/element/src/__builtins__/shared/portal.ts
@@ -0,0 +1,34 @@
+import { defineComponent, getCurrentInstance } from '@vue/composition-api'
+import { h, Fragment } from '@formily/vue'
+export interface IPortalProps {
+  id?: string | symbol
+}
+
+const PortalMap = new Map<string | symbol, any>()
+
+export const createPortalProvider = (id: string | symbol) => {
+  const Portal = defineComponent({
+    name: 'ProtalProvider',
+    props: {
+      id: {
+        type: [String, Symbol],
+        default: 'form-dialog',
+      },
+    },
+
+    render() {
+      const { id } = this
+      if (id && !PortalMap.has(id)) {
+        PortalMap.set(id, this)
+      }
+
+      return h(Fragment, {}, this.$scopedSlots)
+    },
+  })
+
+  return Portal
+}
+
+export function getProtalContext(id: string | symbol) {
+  return PortalMap.get(id)
+}
diff --git a/packages/element/src/__builtins__/shared/utils.ts b/packages/element/src/__builtins__/shared/utils.ts
index 838f7a4a032..3d2fc2d205a 100644
--- a/packages/element/src/__builtins__/shared/utils.ts
+++ b/packages/element/src/__builtins__/shared/utils.ts
@@ -1,9 +1,25 @@
 export function isValidElement(element) {
   return (
-    element &&
-    typeof element === 'object' &&
-    'componentOptions' in element &&
-    'context' in element &&
-    element.tag !== undefined
+    isVueOptions(element) ||
+    (element &&
+      typeof element === 'object' &&
+      'componentOptions' in element &&
+      'context' in element &&
+      element.tag !== undefined)
   ) // remove text node
 }
+
+export function isVueOptions(options) {
+  return (
+    options &&
+    (typeof options.template === 'string' ||
+      typeof options.render === 'function')
+  )
+}
+
+export function composeExport<T0 extends {}, T1 extends {}>(
+  s0: T0,
+  s1: T1
+): T0 & T1 {
+  return Object.assign(s0, s1)
+}
diff --git a/packages/element/src/array-base/index.ts b/packages/element/src/array-base/index.ts
index 06e2d5d6c1c..709afbe79ad 100644
--- a/packages/element/src/array-base/index.ts
+++ b/packages/element/src/array-base/index.ts
@@ -16,6 +16,7 @@ import type { Button as ButtonProps } from 'element-ui'
 import { Button } from 'element-ui'
 import type { Schema } from '@formily/json-schema'
 import { HandleDirective } from 'vue-slicksort'
+import { composeExport } from '../__builtins__/shared'
 
 export interface IArrayBaseAdditionProps extends ButtonProps {
   title?: string
@@ -23,6 +24,17 @@ export interface IArrayBaseAdditionProps extends ButtonProps {
   defaultValue?: any
 }
 
+export type ArrayBaseMixins = {
+  Addition?: typeof ArrayBaseAddition
+  Remove?: typeof ArrayBaseRemove
+  MoveUp?: typeof ArrayBaseMoveUp
+  MoveDown?: typeof ArrayBaseMoveDown
+  SortHandle?: typeof ArrayBaseSortHandle
+  Index?: typeof ArrayBaseIndex
+  useArray?: typeof useArray
+  useIndex?: typeof useIndex
+}
+
 export interface IArrayBaseProps {
   disabled?: boolean
 }
@@ -44,16 +56,16 @@ const ArrayBaseSymbol: InjectionKey<IArrayBaseContext> =
   Symbol('ArrayBaseContext')
 const ItemSymbol: InjectionKey<Ref<number>> = Symbol('ItemContext')
 
-export const useArray = () => {
+const useArray = () => {
   return inject(ArrayBaseSymbol, null)
 }
 
-export const useIndex = (index?: number) => {
+const useIndex = (index?: number) => {
   const indexRef = inject(ItemSymbol)
   return indexRef ?? ref(index)
 }
 
-export const useKey = () => {
+const useKey = () => {
   const keyMap = new WeakMap()
 
   return (record: any) => {
@@ -80,7 +92,7 @@ const getDefaultValue = (defaultValue: any, schema: Schema): any => {
   return null
 }
 
-export const ArrayBase = defineComponent({
+const ArrayBaseInner = defineComponent({
   name: 'ArrayBase',
   props: ['disabled'],
   setup(props: IArrayBaseProps, { slots, listeners }) {
@@ -94,7 +106,7 @@ export const ArrayBase = defineComponent({
   },
 })
 
-export const ArrayBaseItem = defineComponent({
+const ArrayBaseItem = defineComponent({
   name: 'ArrayBaseItem',
   props: ['index'],
   setup(props: IArrayBaseItemProps, { slots }) {
@@ -106,7 +118,7 @@ export const ArrayBaseItem = defineComponent({
   },
 })
 
-export const ArrayBaseSortHandle = defineComponent({
+const ArrayBaseSortHandle = defineComponent({
   name: 'ArrayBaseSortHandle',
   props: ['index'],
   directives: {
@@ -138,7 +150,7 @@ export const ArrayBaseSortHandle = defineComponent({
   },
 })
 
-export const ArrayBaseIndex = defineComponent({
+const ArrayBaseIndex = defineComponent({
   name: 'ArrayBaseIndex',
   setup(props, { attrs }) {
     const index = useIndex()
@@ -156,7 +168,7 @@ export const ArrayBaseIndex = defineComponent({
   },
 })
 
-export const ArrayBaseAddition = defineComponent({
+const ArrayBaseAddition = defineComponent({
   name: 'ArrayBaseAddition',
   props: ['title', 'method', 'defaultValue'],
   setup(props: IArrayBaseAdditionProps, { listeners }) {
@@ -204,7 +216,7 @@ export const ArrayBaseAddition = defineComponent({
   },
 })
 
-export const ArrayBaseRemove = defineComponent<
+const ArrayBaseRemove = defineComponent<
   ButtonProps & { title?: string; index?: number }
 >({
   name: 'ArrayBaseRemove',
@@ -246,7 +258,7 @@ export const ArrayBaseRemove = defineComponent<
   },
 })
 
-export const ArrayBaseMoveDown = defineComponent<
+const ArrayBaseMoveDown = defineComponent<
   ButtonProps & { title?: string; index?: number }
 >({
   name: 'ArrayBaseMoveDown',
@@ -288,7 +300,7 @@ export const ArrayBaseMoveDown = defineComponent<
   },
 })
 
-export const ArrayBaseMoveUp = defineComponent<
+const ArrayBaseMoveUp = defineComponent<
   ButtonProps & { title?: string; index?: number }
 >({
   name: 'ArrayBaseMoveUp',
@@ -329,3 +341,16 @@ export const ArrayBaseMoveUp = defineComponent<
     }
   },
 })
+
+export const ArrayBase = composeExport(ArrayBaseInner, {
+  Index: ArrayBaseIndex,
+  Item: ArrayBaseItem,
+  SortHandle: ArrayBaseSortHandle,
+  Addition: ArrayBaseAddition,
+  Remove: ArrayBaseRemove,
+  MoveDown: ArrayBaseMoveDown,
+  MoveUp: ArrayBaseMoveUp,
+  useArray: useArray,
+  useIndex: useIndex,
+  useKey: useKey,
+})
diff --git a/packages/element/src/array-cards/index.ts b/packages/element/src/array-cards/index.ts
index da3dddf395c..e4cdd1da36e 100644
--- a/packages/element/src/array-cards/index.ts
+++ b/packages/element/src/array-cards/index.ts
@@ -6,7 +6,8 @@ import { useField, useFieldSchema, RecursionField, h } from '@formily/vue'
 import { observer } from '@formily/reactive-vue'
 import { ISchema } from '@formily/json-schema'
 import { stylePrefix } from '../__builtins__/configs'
-import { ArrayBase, ArrayBaseItem, useKey } from '../array-base'
+import { ArrayBase } from '../array-base'
+import { composeExport } from '../__builtins__/shared'
 
 const isAdditionComponent = (schema: ISchema) => {
   return schema['x-component']?.indexOf('Addition') > -1
@@ -36,16 +37,15 @@ const isOperationComponent = (schema: ISchema) => {
     isMoveUpComponent(schema)
   )
 }
-
-export const ArrayCards = observer(
+const ArrayCardsInner = observer(
   defineComponent<CardProps>({
-    name: 'ArrayCards',
+    name: 'FArrayCards',
     props: [],
     setup(props, { attrs }) {
       const fieldRef = useField<ArrayField>()
       const schemaRef = useFieldSchema()
       const prefixCls = `${stylePrefix}-array-cards`
-      const getKey = useKey()
+      const getKey = ArrayBase.useKey()
 
       return () => {
         const field = fieldRef.value
@@ -124,7 +124,7 @@ export const ArrayCards = observer(
               {}
             )
             return h(
-              ArrayBaseItem,
+              ArrayBase.Item,
               {
                 key: getKey(item),
                 props: {
@@ -230,11 +230,15 @@ export const ArrayCards = observer(
   })
 )
 
-export {
-  ArrayBaseRemove as ArrayCardsRemove,
-  ArrayBaseMoveDown as ArrayCardsMoveDown,
-  ArrayBaseMoveUp as ArrayCardsMoveUp,
-  ArrayBaseAddition as ArrayCardsAddition,
-  ArrayBaseIndex as ArrayCardsIndex,
-  useIndex as useArrayCardsIndex,
-} from '../array-base'
+export const ArrayCards = composeExport(ArrayCardsInner, {
+  Index: ArrayBase.Index,
+  SortHandle: ArrayBase.SortHandle,
+  Addition: ArrayBase.Addition,
+  Remove: ArrayBase.Remove,
+  MoveDown: ArrayBase.MoveDown,
+  MoveUp: ArrayBase.MoveUp,
+  useArray: ArrayBase.useArray,
+  useIndex: ArrayBase.useIndex,
+})
+
+export default ArrayCards
diff --git a/packages/element/src/array-cards/style.ts b/packages/element/src/array-cards/style.ts
index 2a3a2bb6411..1c1cc620dd1 100644
--- a/packages/element/src/array-cards/style.ts
+++ b/packages/element/src/array-cards/style.ts
@@ -1,5 +1,7 @@
 import './style.scss'
 import 'element-ui/packages/theme-chalk/src/card.scss'
-import 'element-ui/packages/theme-chalk/src/button.scss'
 import 'element-ui/packages/theme-chalk/src/empty.scss'
 import 'element-ui/packages/theme-chalk/src/row.scss'
+
+// 依赖
+import '../array-base/style'
diff --git a/packages/element/src/array-collapse/index.ts b/packages/element/src/array-collapse/index.ts
index c4604fa1ca7..d446ced1f22 100644
--- a/packages/element/src/array-collapse/index.ts
+++ b/packages/element/src/array-collapse/index.ts
@@ -15,7 +15,8 @@ import {
 import { observer } from '@formily/reactive-vue'
 import { ISchema } from '@formily/json-schema'
 import { stylePrefix } from '../__builtins__/configs'
-import { ArrayBase, ArrayBaseItem, useKey } from '../array-base'
+import { ArrayBase } from '../array-base'
+import { composeExport } from '../__builtins__/shared'
 
 export interface IArrayCollapseProps extends CollapseProps {
   defaultOpenPanelCount?: number
@@ -80,9 +81,9 @@ const insertActiveKeys = (
   }, [])
 }
 
-export const ArrayCollapse = observer(
+export const ArrayCollapseInner = observer(
   defineComponent<IArrayCollapseProps>({
-    name: 'ArrayCollapse',
+    name: 'FArrayCollapse',
     props: {
       defaultOpenPanelCount: {
         type: Number,
@@ -108,7 +109,7 @@ export const ArrayCollapse = observer(
         }
       })
 
-      const getKey = useKey()
+      const getKey = ArrayBase.useKey()
 
       return () => {
         const field = fieldRef.value
@@ -138,7 +139,7 @@ export const ArrayCollapse = observer(
             })
 
             const title = h(
-              ArrayBaseItem,
+              ArrayBase.Item,
               {
                 props: {
                   index,
@@ -177,7 +178,7 @@ export const ArrayCollapse = observer(
               }
             )
             const extra = h(
-              ArrayBaseItem,
+              ArrayBase.Item,
               {
                 props: {
                   index,
@@ -232,7 +233,7 @@ export const ArrayCollapse = observer(
               {
                 default: () => [
                   h(
-                    ArrayBaseItem,
+                    ArrayBase.Item,
                     {
                       props: {
                         index,
@@ -359,17 +360,22 @@ export const ArrayCollapse = observer(
 )
 
 export const ArrayCollapseItem = defineComponent<CollapseItemProps>({
-  name: 'ArrayCollapseItem',
+  name: 'FArrayCollapseItem',
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
 })
 
-export {
-  ArrayBaseRemove as ArrayCollapseRemove,
-  ArrayBaseMoveDown as ArrayCollapseMoveDown,
-  ArrayBaseMoveUp as ArrayCollapseMoveUp,
-  ArrayBaseAddition as ArrayCollapseAddition,
-  ArrayBaseIndex as ArrayCollapseIndex,
-  useIndex as useArrayCollapseIndex,
-} from '../array-base'
+export const ArrayCollapse = composeExport(ArrayCollapseInner, {
+  collapseItem: ArrayCollapseItem,
+  Index: ArrayBase.Index,
+  SortHandle: ArrayBase.SortHandle,
+  Addition: ArrayBase.Addition,
+  Remove: ArrayBase.Remove,
+  MoveDown: ArrayBase.MoveDown,
+  MoveUp: ArrayBase.MoveUp,
+  useArray: ArrayBase.useArray,
+  useIndex: ArrayBase.useIndex,
+})
+
+export default ArrayCollapse
diff --git a/packages/element/src/array-collapse/style.ts b/packages/element/src/array-collapse/style.ts
index 3b85b1fdeaa..ace64ad68dd 100644
--- a/packages/element/src/array-collapse/style.ts
+++ b/packages/element/src/array-collapse/style.ts
@@ -1,8 +1,10 @@
 import './style.scss'
-import 'element-ui/packages/theme-chalk/src/button.scss'
 import 'element-ui/packages/theme-chalk/src/empty.scss'
 import 'element-ui/packages/theme-chalk/src/row.scss'
 import 'element-ui/packages/theme-chalk/src/collapse.scss'
 import 'element-ui/packages/theme-chalk/src/collapse-item.scss'
 import 'element-ui/packages/theme-chalk/src/card.scss'
 import 'element-ui/packages/theme-chalk/src/bdage.scss'
+
+// 依赖
+import '../array-base/style'
diff --git a/packages/element/src/array-items/index.ts b/packages/element/src/array-items/index.ts
index ed65fe28389..5c760281d6f 100644
--- a/packages/element/src/array-items/index.ts
+++ b/packages/element/src/array-items/index.ts
@@ -4,8 +4,9 @@ import { useField, useFieldSchema, RecursionField, h } from '@formily/vue'
 import { observer } from '@formily/reactive-vue'
 import { ISchema } from '@formily/json-schema'
 import { stylePrefix } from '../__builtins__/configs'
-import { ArrayBase, ArrayBaseItem, useKey } from '../array-base'
+import { ArrayBase } from '../array-base'
 import { SlickList, SlickItem } from 'vue-slicksort'
+import { composeExport } from '../__builtins__/shared'
 
 const isAdditionComponent = (schema: ISchema) => {
   return schema['x-component']?.indexOf('Addition') > -1
@@ -15,15 +16,15 @@ export interface IArrayItemsItemProps {
   type?: 'card' | 'divide'
 }
 
-export const ArrayItems = observer(
+const ArrayItemsInner = observer(
   defineComponent({
-    name: 'ArrayItems',
+    name: 'FArrayItems',
     setup(props, { attrs }) {
       const fieldRef = useField<ArrayField>()
       const schemaRef = useFieldSchema()
 
       const prefixCls = `${stylePrefix}-array-items`
-      const getKey = useKey()
+      const getKey = ArrayBase.useKey()
 
       return () => {
         const field = fieldRef.value
@@ -37,7 +38,7 @@ export const ArrayItems = observer(
               : schema.items
             const key = getKey(item)
             return h(
-              ArrayBaseItem,
+              ArrayBase.Item,
               {
                 key,
                 props: {
@@ -133,8 +134,8 @@ export const ArrayItems = observer(
   })
 )
 
-export const ArrayItemsItem = defineComponent<IArrayItemsItemProps>({
-  name: 'ArrayItemsItem',
+const ArrayItemsItem = defineComponent<IArrayItemsItemProps>({
+  name: 'FArrayItemsItem',
   props: ['type'],
   setup(props, { attrs, slots }) {
     const prefixCls = `${stylePrefix}-array-items`
@@ -154,12 +155,16 @@ export const ArrayItemsItem = defineComponent<IArrayItemsItemProps>({
   },
 })
 
-export {
-  ArrayBaseSortHandle as ArrayItemsSortHandle,
-  ArrayBaseRemove as ArrayItemsRemove,
-  ArrayBaseMoveDown as ArrayItemsMoveDown,
-  ArrayBaseMoveUp as ArrayItemsMoveUp,
-  ArrayBaseAddition as ArrayItemsAddition,
-  ArrayBaseIndex as ArrayItemsIndex,
-  useIndex as useArrayItemsIndex,
-} from '../array-base'
+export const ArrayItems = composeExport(ArrayItemsInner, {
+  Item: ArrayItemsItem,
+  Index: ArrayBase.Index,
+  SortHandle: ArrayBase.SortHandle,
+  Addition: ArrayBase.Addition,
+  Remove: ArrayBase.Remove,
+  MoveDown: ArrayBase.MoveDown,
+  MoveUp: ArrayBase.MoveUp,
+  useArray: ArrayBase.useArray,
+  useIndex: ArrayBase.useIndex,
+})
+
+export default ArrayItems
diff --git a/packages/element/src/array-items/style.ts b/packages/element/src/array-items/style.ts
index efcf77037a5..21fefe9c5ff 100644
--- a/packages/element/src/array-items/style.ts
+++ b/packages/element/src/array-items/style.ts
@@ -1,2 +1,4 @@
 import './style.scss'
-import 'element-ui/packages/theme-chalk/src/button.scss'
+
+// 依赖
+import '../array-base/style'
diff --git a/packages/element/src/array-table/index.ts b/packages/element/src/array-table/index.ts
index 556f4eefe34..1b54b25a16d 100644
--- a/packages/element/src/array-table/index.ts
+++ b/packages/element/src/array-table/index.ts
@@ -22,8 +22,9 @@ import {
 } from '@formily/vue'
 import { observer } from '@formily/reactive-vue'
 import { FormPath, isArr, isBool } from '@formily/shared'
-import { ArrayBase, ArrayBaseItem, useKey } from '../array-base'
+import { ArrayBase } from '../array-base'
 import { stylePrefix } from '../__builtins__/configs'
+import { composeExport } from '../__builtins__/shared'
 import type { Schema } from '@formily/json-schema'
 import type {
   Table as TableProps,
@@ -170,7 +171,7 @@ const getArrayTableColumns = (
               const index = reactiveDataSource.value.indexOf(props.row)
 
               const children = h(
-                ArrayBaseItem,
+                ArrayBase.Item,
                 { props: { index }, key: `${key}${index}` },
                 {
                   default: () =>
@@ -404,15 +405,15 @@ const ArrayTablePagination = defineComponent<IArrayTablePaginationProps>({
   },
 })
 
-export const ArrayTable = observer(
+const ArrayTableInner = observer(
   defineComponent<IArrayTableProps>({
-    name: 'ArrayTable',
+    name: 'FArrayTable',
     inheritAttrs: false,
     setup(props, { attrs }) {
       const fieldRef = useField<ArrayField>()
       const schemaRef = useFieldSchema()
       const prefixCls = `${stylePrefix}-array-table`
-      const getKey = useKey()
+      const getKey = ArrayBase.useKey()
 
       const defaultRowKey = (record: any) => {
         return getKey(record)
@@ -539,18 +540,23 @@ export const ArrayTable = observer(
   })
 )
 
-export const ArrayTableColumn: Component = {
+const ArrayTableColumn: Component = {
+  name: 'FArrayTableColumn',
   render(h) {
     return h()
   },
 }
 
-export {
-  ArrayBaseSortHandle as ArrayTableSortHandle,
-  ArrayBaseRemove as ArrayTableRemove,
-  ArrayBaseMoveDown as ArrayTableMoveDown,
-  ArrayBaseMoveUp as ArrayTableMoveUp,
-  ArrayBaseAddition as ArrayTableAddition,
-  ArrayBaseIndex as ArrayTableIndex,
-  useIndex as useArrayTableIndex,
-} from '../array-base'
+export const ArrayTable = composeExport(ArrayTableInner, {
+  Column: ArrayTableColumn,
+  Index: ArrayBase.Index,
+  SortHandle: ArrayBase.SortHandle,
+  Addition: ArrayBase.Addition,
+  Remove: ArrayBase.Remove,
+  MoveDown: ArrayBase.MoveDown,
+  MoveUp: ArrayBase.MoveUp,
+  useArray: ArrayBase.useArray,
+  useIndex: ArrayBase.useIndex,
+})
+
+export default ArrayTable
diff --git a/packages/element/src/array-table/style.ts b/packages/element/src/array-table/style.ts
index 53cb8b53957..f003c7fee81 100644
--- a/packages/element/src/array-table/style.ts
+++ b/packages/element/src/array-table/style.ts
@@ -5,3 +5,7 @@ import 'element-ui/packages/theme-chalk/src/table-column.scss'
 import 'element-ui/packages/theme-chalk/src/button.scss'
 import 'element-ui/packages/theme-chalk/src/select.scss'
 import 'element-ui/packages/theme-chalk/src/badge.scss'
+
+// 依赖
+import '../array-base/style'
+import '../space/style'
diff --git a/packages/element/src/array-tabs/index.ts b/packages/element/src/array-tabs/index.ts
index facc95793ae..89127d75a96 100644
--- a/packages/element/src/array-tabs/index.ts
+++ b/packages/element/src/array-tabs/index.ts
@@ -161,3 +161,5 @@ export const ArrayTabs = observer(
     },
   })
 )
+
+export default ArrayTabs
diff --git a/packages/element/src/cascader/index.ts b/packages/element/src/cascader/index.ts
index a468b970f81..06124305b23 100644
--- a/packages/element/src/cascader/index.ts
+++ b/packages/element/src/cascader/index.ts
@@ -2,12 +2,14 @@ import { connect, mapProps, mapReadPretty } from '@formily/vue'
 import { Cascader as ELCascader } from 'element-ui'
 
 import type { Cascader as ElCascaderProps } from 'element-ui'
-import { PreviewCascaderText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 
 export type CascaderProps = ElCascaderProps
 
 export const Cascader = connect(
   ELCascader,
   mapProps({ dataSource: 'options' }),
-  mapReadPretty(PreviewCascaderText)
+  mapReadPretty(PreviewText.Cascader)
 )
+
+export default Cascader
diff --git a/packages/element/src/cascader/style.ts b/packages/element/src/cascader/style.ts
index 5a72ad0fb3c..1912c32fcf1 100644
--- a/packages/element/src/cascader/style.ts
+++ b/packages/element/src/cascader/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/cascader.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/checkbox-group/index.ts b/packages/element/src/checkbox-group/index.ts
deleted file mode 100644
index 7d3561fad5f..00000000000
--- a/packages/element/src/checkbox-group/index.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
-import { getComponentByTag } from '../__builtins__/shared'
-import { Checkbox } from '../checkbox'
-import { defineComponent } from '@vue/composition-api'
-
-import type { CheckboxGroup as ElCheckboxGroupProps } from 'element-ui'
-import type { CheckboxProps } from '../checkbox'
-import { CheckboxGroup as ElCheckboxGroup } from 'element-ui'
-import { PreviewSelectText } from '../preview-text'
-
-export type CheckboxGroupProps = ElCheckboxGroupProps & {
-  value: any[]
-  options?: Array<CheckboxProps | string>
-}
-
-const TransformElCheckboxGroup = getComponentByTag(ElCheckboxGroup, {
-  change: 'input',
-})
-
-const CheckboxGroupOption = defineComponent<CheckboxGroupProps>({
-  name: 'CheckboxGroup',
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  setup(customProps, { attrs, slots, listeners }) {
-    return () => {
-      const options = customProps.options || []
-      const children =
-        options.length !== 0
-          ? {
-              default: () =>
-                options.map((option) => {
-                  if (typeof option === 'string') {
-                    return h(
-                      Checkbox,
-                      { props: { option: { label: option, value: option } } },
-                      {}
-                    )
-                  } else {
-                    return h(Checkbox, { props: { option } }, {})
-                  }
-                }),
-            }
-          : slots
-      return h(
-        TransformElCheckboxGroup,
-        {
-          attrs: {
-            ...attrs,
-          },
-          on: listeners,
-        },
-        children
-      )
-    }
-  },
-})
-
-export const CheckboxGroup = connect(
-  CheckboxGroupOption,
-  mapProps({ dataSource: 'options' }),
-  mapReadPretty(PreviewSelectText, {
-    multiple: true,
-  })
-)
diff --git a/packages/element/src/checkbox-group/style.ts b/packages/element/src/checkbox-group/style.ts
deleted file mode 100644
index ee7a33ddbe4..00000000000
--- a/packages/element/src/checkbox-group/style.ts
+++ /dev/null
@@ -1 +0,0 @@
-import 'element-ui/packages/theme-chalk/src/checkbox-group.scss'
diff --git a/packages/element/src/checkbox/index.ts b/packages/element/src/checkbox/index.ts
index bc09d4c98b6..c83d93d08b5 100644
--- a/packages/element/src/checkbox/index.ts
+++ b/packages/element/src/checkbox/index.ts
@@ -1,8 +1,15 @@
-import { connect, h } from '@formily/vue'
+import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
 import { defineComponent } from '@vue/composition-api'
-
-import type { Checkbox as _ElCheckboxProps } from 'element-ui'
-import { Checkbox as ElCheckbox } from 'element-ui'
+import { composeExport, getComponentByTag } from '../__builtins__/shared'
+import type {
+  Checkbox as _ElCheckboxProps,
+  CheckboxGroup as ElCheckboxGroupProps,
+} from 'element-ui'
+import {
+  Checkbox as ElCheckbox,
+  CheckboxGroup as ElCheckboxGroup,
+} from 'element-ui'
+import { PreviewText } from '../preview-text'
 
 type ElCheckboxProps = Omit<_ElCheckboxProps, 'value'> & {
   value: ElCheckboxProps['label']
@@ -61,4 +68,65 @@ const CheckboxOption = defineComponent<CheckboxProps>({
   },
 })
 
-export const Checkbox = connect(CheckboxOption)
+export type CheckboxGroupProps = ElCheckboxGroupProps & {
+  value: any[]
+  options?: Array<CheckboxProps | string>
+}
+
+const TransformElCheckboxGroup = getComponentByTag(ElCheckboxGroup, {
+  change: 'input',
+})
+
+const CheckboxGroupOption = defineComponent<CheckboxGroupProps>({
+  name: 'CheckboxGroup',
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(customProps, { attrs, slots, listeners }) {
+    return () => {
+      const options = customProps.options || []
+      const children =
+        options.length !== 0
+          ? {
+              default: () =>
+                options.map((option) => {
+                  if (typeof option === 'string') {
+                    return h(
+                      Checkbox,
+                      { props: { option: { label: option, value: option } } },
+                      {}
+                    )
+                  } else {
+                    return h(Checkbox, { props: { option } }, {})
+                  }
+                }),
+            }
+          : slots
+      return h(
+        TransformElCheckboxGroup,
+        {
+          attrs: {
+            ...attrs,
+          },
+          on: listeners,
+        },
+        children
+      )
+    }
+  },
+})
+
+const CheckboxGroup = connect(
+  CheckboxGroupOption,
+  mapProps({ dataSource: 'options' }),
+  mapReadPretty(PreviewText.Select, {
+    multiple: true,
+  })
+)
+
+export const Checkbox = composeExport(connect(CheckboxOption), {
+  Group: CheckboxGroup,
+})
diff --git a/packages/element/src/checkbox/style.ts b/packages/element/src/checkbox/style.ts
index 55e41dd170a..d88960b1cc7 100644
--- a/packages/element/src/checkbox/style.ts
+++ b/packages/element/src/checkbox/style.ts
@@ -1 +1,5 @@
 import 'element-ui/packages/theme-chalk/src/checkbox.scss'
+import 'element-ui/packages/theme-chalk/src/checkbox-group.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/date-picker/index.ts b/packages/element/src/date-picker/index.ts
index 23f37674b20..cd5a705e52c 100644
--- a/packages/element/src/date-picker/index.ts
+++ b/packages/element/src/date-picker/index.ts
@@ -3,7 +3,7 @@ import { connect, mapProps, mapReadPretty } from '@formily/vue'
 
 import type { DatePicker as ElDatePickerProps } from 'element-ui'
 import { DatePicker as ElDatePicker } from 'element-ui'
-import { PreviewDatePickerText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 
 export type DatePickerProps = ElDatePickerProps
 
@@ -36,5 +36,7 @@ export const DatePicker = connect(
       valueFormat: props.valueFormat || getDefaultFormat(props, 'valueFormat'),
     }
   }),
-  mapReadPretty(PreviewDatePickerText)
+  mapReadPretty(PreviewText.DatePicker)
 )
+
+export default DatePicker
diff --git a/packages/element/src/date-picker/style.ts b/packages/element/src/date-picker/style.ts
index f744093af23..344214168e7 100644
--- a/packages/element/src/date-picker/style.ts
+++ b/packages/element/src/date-picker/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/date-picker.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/editable/index.ts b/packages/element/src/editable/index.ts
index 490e0baa2ef..6e1d5e3187e 100644
--- a/packages/element/src/editable/index.ts
+++ b/packages/element/src/editable/index.ts
@@ -8,6 +8,7 @@ import { stylePrefix } from '../__builtins__/configs'
 
 import type { Popover as PopoverProps } from 'element-ui'
 import { FormBaseItem, FormItemProps } from '../form-item'
+import { composeExport } from '../__builtins__/shared'
 
 export type EditableProps = FormItemProps
 export type EditablePopoverProps = PopoverProps
@@ -36,9 +37,9 @@ const getFormItemProps = (fieldRef): FormItemProps => {
   }
 }
 
-export const Editable = observer(
+const EditableInner = observer(
   defineComponent<EditableProps>({
-    name: 'Editable',
+    name: 'FEditable',
     setup(props, { attrs, slots, refs }) {
       const fieldRef = useField<Field>()
 
@@ -190,9 +191,9 @@ export const Editable = observer(
   })
 )
 
-export const EditablePopover = observer(
+const EditablePopover = observer(
   defineComponent<EditablePopoverProps>({
-    name: 'EditablePopover',
+    name: 'FEditablePopover',
     setup(props, { attrs, slots }) {
       const fieldRef = useField<Field>()
 
@@ -266,3 +267,9 @@ export const EditablePopover = observer(
     },
   })
 )
+
+export const Editable = composeExport(EditableInner, {
+  Popover: EditablePopover,
+})
+
+export default Editable
diff --git a/packages/element/src/editable/style.ts b/packages/element/src/editable/style.ts
index aab13f7636c..a4cf6b26279 100644
--- a/packages/element/src/editable/style.ts
+++ b/packages/element/src/editable/style.ts
@@ -1,2 +1,5 @@
 import './style.scss'
 import 'element-ui/packages/theme-chalk/src/popover.scss'
+
+// 依赖
+import '../form-item/style'
diff --git a/packages/element/src/el-form-item/index.ts b/packages/element/src/el-form-item/index.ts
index ac6983a9f1a..01b56abedb9 100644
--- a/packages/element/src/el-form-item/index.ts
+++ b/packages/element/src/el-form-item/index.ts
@@ -16,3 +16,5 @@ export const ElFormItem = connect(
       : undefined,
   }))
 )
+
+export default ElFormItem
diff --git a/packages/element/src/el-form/index.ts b/packages/element/src/el-form/index.ts
index ce733d5335d..4da80ac8b2f 100644
--- a/packages/element/src/el-form/index.ts
+++ b/packages/element/src/el-form/index.ts
@@ -43,3 +43,5 @@ export const ElForm: FunctionalComponentOptions<ElFormProps> = {
     ])
   },
 }
+
+export default ElForm
diff --git a/packages/element/src/form-button-group/index.ts b/packages/element/src/form-button-group/index.ts
index 5e2b15fa32f..34cd55bd863 100644
--- a/packages/element/src/form-button-group/index.ts
+++ b/packages/element/src/form-button-group/index.ts
@@ -12,7 +12,7 @@ export type FormButtonGroupProps = Omit<SpaceProps, 'align' | 'size'> & {
 }
 
 export const FormButtonGroup = defineComponent<FormButtonGroupProps>({
-  name: 'FormButtonGroup',
+  name: 'FFormButtonGroup',
   props: {
     align: {
       type: String,
@@ -75,3 +75,5 @@ export const FormButtonGroup = defineComponent<FormButtonGroupProps>({
     }
   },
 })
+
+export default FormButtonGroup
diff --git a/packages/element/src/form-button-group/style.ts b/packages/element/src/form-button-group/style.ts
index 72dcf9c268f..0ddedd81068 100644
--- a/packages/element/src/form-button-group/style.ts
+++ b/packages/element/src/form-button-group/style.ts
@@ -1 +1,5 @@
 import './style.scss'
+
+// 依赖
+import '../form-item/style'
+import '../space/style'
diff --git a/packages/element/src/form-dialog/index.ts b/packages/element/src/form-dialog/index.ts
index b21f4c9f7f4..847e1a0be40 100644
--- a/packages/element/src/form-dialog/index.ts
+++ b/packages/element/src/form-dialog/index.ts
@@ -1,24 +1,38 @@
 import { h, FormProvider, Fragment } from '@formily/vue'
-import { createForm } from '@formily/core'
-import { isNum, isStr, isBool, uid } from '@formily/shared'
+import { toJS } from '@formily/reactive'
+import { observer } from '@formily/reactive-vue'
+import { createForm, Form, IFormProps } from '@formily/core'
+import {
+  isNum,
+  isStr,
+  isBool,
+  isFn,
+  IMiddleware,
+  applyMiddleware,
+} from '@formily/shared'
 import { Dialog, Button } from 'element-ui'
 import type { Dialog as DialogProps, Button as ButtonProps } from 'element-ui'
-// @ts-ignore
 import { t } from 'element-ui/src/locale'
 import Vue, { Component, VNode } from 'vue'
-import { isValidElement, resolveComponent } from '../__builtins__/shared'
+import {
+  isValidElement,
+  resolveComponent,
+  createPortalProvider,
+  getProtalContext,
+  loading,
+} from '../__builtins__/shared'
 import { stylePrefix } from '../__builtins__/configs'
 import { defineComponent } from '@vue/composition-api'
 import { Portal, PortalTarget } from 'portal-vue'
 
-type FormDialogContentProps = { resolve: () => any; reject: () => any }
+type FormDialogContentProps = { form: Form }
 
 type FormDialogContent = Component | ((props: FormDialogContentProps) => VNode)
 
-type ModalTitle = string | number | Component | VNode | (() => VNode)
+type DialogTitle = string | number | Component | VNode | (() => VNode)
 
 type IFormDialogProps = Omit<DialogProps, 'title'> & {
-  title?: ModalTitle
+  title?: DialogTitle
   footer?: null | Component | VNode | (() => VNode)
   cancelText?: string | Component | VNode | (() => VNode)
   cancelButtonProps?: ButtonProps
@@ -30,11 +44,12 @@ type IFormDialogProps = Omit<DialogProps, 'title'> & {
   onClosed?: () => void
   onCancel?: () => void
   onOK?: () => void
+  loadingText?: string
 }
 
 const PORTAL_TARGET_NAME = 'FormDialogFooter'
 
-const isDialogTitle = (props: any): props is ModalTitle => {
+const isDialogTitle = (props: any): props is DialogTitle => {
   return isNum(props) || isStr(props) || isBool(props) || isValidElement(props)
 }
 
@@ -49,7 +64,10 @@ const getDialogProps = (props: any): IFormDialogProps => {
 }
 
 export interface IFormDialog {
-  open(props?: Formily.Core.Types.IFormProps): Promise<any>
+  forOpen(middleware: IMiddleware<IFormProps>): IFormDialog
+  forConfirm(middleware: IMiddleware<IFormProps>): IFormDialog
+  forCancel(middleware: IMiddleware<IFormProps>): IFormDialog
+  open(props?: IFormProps): Promise<any>
   close(): void
 }
 
@@ -60,21 +78,41 @@ export interface IFormDialogComponentProps {
 }
 
 export function FormDialog(
-  title: IFormDialogProps,
+  title: IFormDialogProps | DialogTitle,
   content: FormDialogContent
 ): IFormDialog
+
+export function FormDialog(
+  title: IFormDialogProps | DialogTitle,
+  id: string | symbol,
+  content: FormDialogContent
+): IFormDialog
+
 export function FormDialog(
-  title: ModalTitle,
+  title: DialogTitle,
+  id: string,
   content: FormDialogContent
 ): IFormDialog
 
-export function FormDialog(title: any, content: any): IFormDialog {
+export function FormDialog(
+  title: IFormDialogProps | DialogTitle,
+  id: string | symbol | FormDialogContent,
+  content?: FormDialogContent
+): IFormDialog {
+  if (isFn(id) || isValidElement(id)) {
+    content = id as FormDialogContent
+    id = 'form-dialog'
+  }
+
   const prefixCls = `${stylePrefix}-form-dialog`
   const env = {
     root: document.createElement('div'),
     form: null,
     promise: null,
     instance: null,
+    openMiddlewares: [],
+    confirmMiddlewares: [],
+    cancelMiddlewares: [],
   }
 
   document.body.appendChild(env.root)
@@ -91,175 +129,186 @@ export function FormDialog(title: any, content: any): IFormDialog {
     },
   }
 
-  const component = defineComponent<IFormDialogComponentProps>({
-    props: ['content', 'resolve', 'reject'],
-    setup(props) {
-      return () =>
-        h(
-          Fragment,
-          {},
-          {
-            default: () =>
-              resolveComponent(props.content, {
-                resolve: props.resolve,
-                reject: props.reject,
-              }),
-          }
-        )
-    },
-  })
+  const component = observer(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            Fragment,
+            {},
+            {
+              default: () =>
+                resolveComponent(content, {
+                  form: env.form,
+                }),
+            }
+          )
+      },
+    })
+  )
 
   const render = (visible = true, resolve?: () => any, reject?: () => any) => {
     if (!env.instance) {
-      const ComponentConstructor = Vue.extend({
-        data() {
-          return {
-            visible: false,
-          }
-        },
-        render() {
-          const dialogProps = this.dialogProps
+      const ComponentConstructor = observer(
+        Vue.extend({
+          props: ['dialogProps'],
+          data() {
+            return {
+              visible: false,
+            }
+          },
+          render() {
+            const {
+              onClose,
+              onClosed,
+              onOpen,
+              onOpend,
+              onOK,
+              onCancel,
+              title,
+              footer,
+              okText,
+              cancelText,
+              okButtonProps,
+              cancelButtonProps,
+              loadingText,
+              ...dialogProps
+            } = this.dialogProps
 
-          return h(
-            FormProvider,
-            {
-              props: {
-                form: env.form,
+            return h(
+              FormProvider,
+              {
+                props: {
+                  form: env.form,
+                },
               },
-            },
-            {
-              default: () =>
-                h(
-                  Dialog,
-                  {
-                    class: [`${prefixCls}`],
-                    attrs: {
-                      visible: this.visible,
-                      ...dialogProps,
-                    },
-                    on: {
-                      'update:visible': (val) => {
-                        this.visible = val
-                      },
-                      close: () => {
-                        dialogProps.onClose?.()
-                      },
-
-                      closed: () => {
-                        dialogProps.onClosed?.()
-                      },
-                      open: () => {
-                        dialogProps.onOpen?.()
+              {
+                default: () =>
+                  h(
+                    Dialog,
+                    {
+                      class: [`${prefixCls}`],
+                      attrs: {
+                        visible: this.visible,
+                        ...dialogProps,
                       },
-                      opend: () => {
-                        dialogProps.onOpend?.()
-                      },
-                    },
-                  },
-                  {
-                    default: () => [
-                      h(component, { props: { resolve, reject, content } }, {}),
-                      h(
-                        'div',
-                        {
-                          slot: 'title',
+                      on: {
+                        'update:visible': (val) => {
+                          this.visible = val
                         },
-                        { default: () => resolveComponent(dialogProps.title) }
-                      ),
-                      h(
-                        'div',
-                        {
-                          slot: 'footer',
+                        close: () => {
+                          onClose?.()
                         },
-                        {
-                          default: () => {
-                            const FooterProtalTarget = h(
-                              PortalTarget,
-                              {
-                                props: {
-                                  name: PORTAL_TARGET_NAME,
-                                  slim: true,
-                                },
-                              },
-                              {}
-                            )
-                            const footer = dialogProps.footer
-                            if (footer === null) {
-                              return [null, FooterProtalTarget]
-                            } else if (footer) {
-                              return [
-                                resolveComponent(footer),
-                                FooterProtalTarget,
-                              ]
-                            }
 
-                            return [
-                              h(
-                                Button,
+                        closed: () => {
+                          onClosed?.()
+                        },
+                        open: () => {
+                          onOpen?.()
+                        },
+                        opend: () => {
+                          onOpend?.()
+                        },
+                      },
+                    },
+                    {
+                      default: () => [
+                        h(component, {}, {}),
+                        h(
+                          'div',
+                          {
+                            slot: 'title',
+                          },
+                          { default: () => resolveComponent(title) }
+                        ),
+                        h(
+                          'div',
+                          {
+                            slot: 'footer',
+                          },
+                          {
+                            default: () => {
+                              const FooterProtalTarget = h(
+                                PortalTarget,
                                 {
-                                  attrs: dialogProps.cancelButtonProps,
-                                  on: {
-                                    click: (e) => {
-                                      dialogProps?.onCancel?.(e)
-                                      if (dialogProps.beforeClose) {
-                                        dialogProps.beforeClose(() => {
-                                          formDialog.close()
-                                        })
-                                      } else {
-                                        formDialog.close()
-                                      }
-                                    },
+                                  props: {
+                                    name: PORTAL_TARGET_NAME,
+                                    slim: true,
                                   },
                                 },
-                                {
-                                  default: () =>
-                                    resolveComponent(
-                                      dialogProps.cancelText ||
-                                        t('el.popconfirm.cancelButtonText')
-                                    ),
-                                }
-                              ),
+                                {}
+                              )
+                              if (footer === null) {
+                                return [null, FooterProtalTarget]
+                              } else if (footer) {
+                                return [
+                                  resolveComponent(footer),
+                                  FooterProtalTarget,
+                                ]
+                              }
 
-                              h(
-                                Button,
-                                {
-                                  attrs: {
-                                    type: 'primary',
-                                    ...dialogProps.okButtonProps,
+                              return [
+                                h(
+                                  Button,
+                                  {
+                                    attrs: cancelButtonProps,
+                                    on: {
+                                      click: (e) => {
+                                        onCancel?.(e)
+                                        reject()
+                                      },
+                                    },
                                   },
-                                  on: {
-                                    click: (e) => {
-                                      dialogProps?.onOK?.(e)
-                                      resolve()
+                                  {
+                                    default: () =>
+                                      resolveComponent(
+                                        cancelText ||
+                                          t('el.popconfirm.cancelButtonText')
+                                      ),
+                                  }
+                                ),
+
+                                h(
+                                  Button,
+                                  {
+                                    attrs: {
+                                      type: 'primary',
+                                      ...okButtonProps,
+                                      loading: env.form.submitting,
+                                    },
+                                    on: {
+                                      click: (e) => {
+                                        onOK?.(e)
+                                        resolve()
+                                      },
                                     },
                                   },
-                                },
-                                {
-                                  default: () =>
-                                    resolveComponent(
-                                      dialogProps.okText ||
-                                        t('el.popconfirm.confirmButtonText')
-                                    ),
-                                }
-                              ),
-                              FooterProtalTarget,
-                            ]
-                          },
-                        }
-                      ),
-                    ],
-                  }
-                ),
-            }
-          )
-        },
-      })
+                                  {
+                                    default: () =>
+                                      resolveComponent(
+                                        okText ||
+                                          t('el.popconfirm.confirmButtonText')
+                                      ),
+                                  }
+                                ),
+                                FooterProtalTarget,
+                              ]
+                            },
+                          }
+                        ),
+                      ],
+                    }
+                  ),
+              }
+            )
+          },
+        })
+      )
       env.instance = new ComponentConstructor({
-        data() {
-          return {
-            dialogProps,
-          }
+        propsData: {
+          dialogProps,
         },
+        parent: getProtalContext(id as string | symbol),
       })
       env.instance.$mount(env.root)
     }
@@ -268,16 +317,44 @@ export function FormDialog(title: any, content: any): IFormDialog {
   }
 
   const formDialog = {
+    forOpen: (middleware: IMiddleware<IFormProps>) => {
+      if (isFn(middleware)) {
+        env.openMiddlewares.push(middleware)
+      }
+      return formDialog
+    },
+    forConfirm: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.confirmMiddlewares.push(middleware)
+      }
+      return formDialog
+    },
+    forCancel: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.cancelMiddlewares.push(middleware)
+      }
+      return formDialog
+    },
     open: (props: Formily.Core.Types.IFormProps) => {
       if (env.promise) return env.promise
-      env.form = env.form || createForm(props)
-      env.promise = new Promise((resolve, reject) => {
+
+      env.promise = new Promise(async (resolve, reject) => {
+        try {
+          props = await loading(dialogProps.loadingText, () =>
+            applyMiddleware(props, env.openMiddlewares)
+          )
+          env.form = env.form || createForm(props)
+        } catch (e) {
+          reject(e)
+        }
+
         render(
           true,
           () => {
             env.form
-              .submit((values: any) => {
-                resolve(values)
+              .submit(async () => {
+                await applyMiddleware(env.form, env.confirmMiddlewares)
+                resolve(toJS(env.form.values))
                 if (dialogProps.beforeClose) {
                   setTimeout(() => {
                     dialogProps.beforeClose(() => {
@@ -290,8 +367,18 @@ export function FormDialog(title: any, content: any): IFormDialog {
               })
               .catch(reject)
           },
-          () => {
-            formDialog.close()
+          async () => {
+            await loading(dialogProps.loadingText, () =>
+              applyMiddleware(env.form, env.cancelMiddlewares)
+            )
+
+            if (dialogProps.beforeClose) {
+              dialogProps.beforeClose(() => {
+                formDialog.close()
+              })
+            } else {
+              formDialog.close()
+            }
           }
         )
       })
@@ -305,8 +392,9 @@ export function FormDialog(title: any, content: any): IFormDialog {
   return formDialog
 }
 
-export const FormDialogFooter = defineComponent({
-  setup(props, { attrs, slots }) {
+const FormDialogFooter = defineComponent({
+  name: 'FFormDialogFooter',
+  setup(props, { slots }) {
     return () => {
       return h(
         Portal,
@@ -322,3 +410,8 @@ export const FormDialogFooter = defineComponent({
     }
   },
 })
+
+FormDialog.Footer = FormDialogFooter
+FormDialog.Portal = createPortalProvider('form-dialog')
+
+export default FormDialog
diff --git a/packages/element/src/form-dialog/style.ts b/packages/element/src/form-dialog/style.ts
index 00fc8edfbbe..4e3fc203af5 100644
--- a/packages/element/src/form-dialog/style.ts
+++ b/packages/element/src/form-dialog/style.ts
@@ -1,2 +1,3 @@
 import 'element-ui/packages/theme-chalk/src/dialog.scss'
 import 'element-ui/packages/theme-chalk/src/button.scss'
+import 'element-ui/packages/theme-chalk/src/loading.scss'
diff --git a/packages/element/src/form-drawer/index.ts b/packages/element/src/form-drawer/index.ts
index 2146b279168..f9983390389 100644
--- a/packages/element/src/form-drawer/index.ts
+++ b/packages/element/src/form-drawer/index.ts
@@ -1,24 +1,38 @@
 import { h, FormProvider, Fragment } from '@formily/vue'
-import { createForm } from '@formily/core'
-import { isNum, isStr, isBool, isFn } from '@formily/shared'
+import { toJS } from '@formily/reactive'
+import { observer } from '@formily/reactive-vue'
+import { createForm, Form, IFormProps } from '@formily/core'
+import {
+  isNum,
+  isStr,
+  isBool,
+  isFn,
+  IMiddleware,
+  applyMiddleware,
+} from '@formily/shared'
 import { Drawer, Button } from 'element-ui'
 import type { Drawer as DrawerProps, Button as ButtonProps } from 'element-ui'
-// @ts-ignore
 import { t } from 'element-ui/src/locale'
 import Vue, { Component, VNode } from 'vue'
-import { isValidElement, resolveComponent } from '../__builtins__/shared'
+import {
+  isValidElement,
+  resolveComponent,
+  createPortalProvider,
+  getProtalContext,
+  loading,
+} from '../__builtins__/shared'
 import { stylePrefix } from '../__builtins__/configs'
 import { defineComponent } from '@vue/composition-api'
 import { Portal, PortalTarget } from 'portal-vue'
 
-type FormDrawerContentProps = { resolve: () => any; reject: () => any }
+type FormDrawerContentProps = { form: Form }
 
 type FormDrawerContent = Component | ((props: FormDrawerContentProps) => VNode)
 
-type ModalTitle = string | number | Component | VNode | (() => VNode)
+type DrawerTitle = string | number | Component | VNode | (() => VNode)
 
 type IFormDrawerProps = Omit<DrawerProps, 'title'> & {
-  title?: ModalTitle
+  title?: DrawerTitle
   footer?: null | Component | VNode | (() => VNode)
   cancelText?: string | Component | VNode | (() => VNode)
   cancelButtonProps?: ButtonProps
@@ -30,11 +44,12 @@ type IFormDrawerProps = Omit<DrawerProps, 'title'> & {
   onClosed?: () => void
   onCancel?: () => void
   onOK?: () => void
+  loadingText?: string
 }
 
 const PORTAL_TARGET_NAME = 'FormDrawerFooter'
 
-const isDrawerTitle = (props: any): props is ModalTitle => {
+const isDrawerTitle = (props: any): props is DrawerTitle => {
   return isNum(props) || isStr(props) || isBool(props) || isValidElement(props)
 }
 
@@ -49,7 +64,10 @@ const getDrawerProps = (props: any): IFormDrawerProps => {
 }
 
 export interface IFormDrawer {
-  open(props?: Formily.Core.Types.IFormProps): Promise<any>
+  forOpen(middleware: IMiddleware<IFormProps>): IFormDrawer
+  forConfirm(middleware: IMiddleware<IFormProps>): IFormDrawer
+  forCancel(middleware: IMiddleware<IFormProps>): IFormDrawer
+  open(props?: IFormProps): Promise<any>
   close(): void
 }
 
@@ -60,20 +78,41 @@ export interface IFormDrawerComponentProps {
 }
 
 export function FormDrawer(
-  title: IFormDrawerProps,
+  title: IFormDrawerProps | DrawerTitle,
   content: FormDrawerContent
 ): IFormDrawer
+
+export function FormDrawer(
+  title: IFormDrawerProps | DrawerTitle,
+  id: string | symbol,
+  content: FormDrawerContent
+): IFormDrawer
+
 export function FormDrawer(
-  title: ModalTitle,
+  title: DrawerTitle,
+  id: string,
   content: FormDrawerContent
 ): IFormDrawer
-export function FormDrawer(title: any, content: any): IFormDrawer {
+
+export function FormDrawer(
+  title: IFormDrawerProps | DrawerTitle,
+  id: string | symbol | FormDrawerContent,
+  content?: FormDrawerContent
+): IFormDrawer {
+  if (isFn(id) || isValidElement(id)) {
+    content = id as FormDrawerContent
+    id = 'form-drawer'
+  }
+
   const prefixCls = `${stylePrefix}-form-drawer`
   const env = {
     root: document.createElement('div'),
     form: null,
     promise: null,
     instance: null,
+    openMiddlewares: [],
+    confirmMiddlewares: [],
+    cancelMiddlewares: [],
   }
 
   document.body.appendChild(env.root)
@@ -90,34 +129,49 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
     },
   }
 
-  const component = defineComponent<IFormDrawerComponentProps>({
-    props: ['content', 'resolve', 'reject'],
-    setup(props) {
-      return () =>
-        h(
-          Fragment,
-          {},
-          {
-            default: () =>
-              resolveComponent(props.content, {
-                resolve: props.resolve,
-                reject: props.reject,
-              }),
-          }
-        )
-    },
-  })
+  const component = observer(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            Fragment,
+            {},
+            {
+              default: () =>
+                resolveComponent(content, {
+                  form: env.form,
+                }),
+            }
+          )
+      },
+    })
+  )
 
   const render = (visible = true, resolve?: () => any, reject?: () => any) => {
     if (!env.instance) {
       const ComponentConstructor = Vue.extend({
+        props: ['drawerProps'],
         data() {
           return {
             visible: false,
           }
         },
         render() {
-          const drawerProps = this.drawerProps
+          const {
+            onClose,
+            onClosed,
+            onOpen,
+            onOpend,
+            onOK,
+            onCancel,
+            title,
+            footer,
+            okText,
+            cancelText,
+            okButtonProps,
+            cancelButtonProps,
+            ...drawerProps
+          } = this.drawerProps
 
           return h(
             FormProvider,
@@ -141,17 +195,17 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                         this.visible = val
                       },
                       close: () => {
-                        drawerProps.onClose?.()
+                        onClose?.()
                       },
 
                       closed: () => {
-                        drawerProps.onClosed?.()
+                        onClosed?.()
                       },
                       open: () => {
-                        drawerProps.onOpen?.()
+                        onOpen?.()
                       },
                       opend: () => {
-                        drawerProps.onOpend?.()
+                        onOpend?.()
                       },
                     },
                   },
@@ -163,12 +217,7 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                           class: [`${prefixCls}-body`],
                         },
                         {
-                          default: () =>
-                            h(
-                              component,
-                              { props: { resolve, reject, content } },
-                              {}
-                            ),
+                          default: () => h(component, {}, {}),
                         }
                       ),
                       h(
@@ -189,7 +238,6 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                               {}
                             )
 
-                            const footer = drawerProps.footer
                             if (footer === null) {
                               return [null, FooterProtalTarget]
                             } else if (footer) {
@@ -203,24 +251,18 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                               h(
                                 Button,
                                 {
-                                  attrs: drawerProps.cancelButtonProps,
+                                  attrs: cancelButtonProps,
                                   on: {
                                     click: (e) => {
-                                      drawerProps?.onCancel?.(e)
-                                      if (drawerProps.beforeClose) {
-                                        drawerProps.beforeClose(() => {
-                                          formDrawer.close()
-                                        })
-                                      } else {
-                                        formDrawer.close()
-                                      }
+                                      onCancel?.(e)
+                                      reject()
                                     },
                                   },
                                 },
                                 {
                                   default: () =>
                                     resolveComponent(
-                                      drawerProps.cancelText ||
+                                      cancelText ||
                                         t('el.popconfirm.cancelButtonText')
                                     ),
                                 }
@@ -231,11 +273,11 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                                 {
                                   attrs: {
                                     type: 'primary',
-                                    ...drawerProps.okButtonProps,
+                                    ...okButtonProps,
                                   },
                                   on: {
                                     click: (e) => {
-                                      drawerProps?.onOK?.(e)
+                                      onOK?.(e)
                                       resolve()
                                     },
                                   },
@@ -243,11 +285,12 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                                 {
                                   default: () =>
                                     resolveComponent(
-                                      drawerProps.okText ||
+                                      okText ||
                                         t('el.popconfirm.confirmButtonText')
                                     ),
                                 }
                               ),
+                              FooterProtalTarget,
                             ]
                           },
                         }
@@ -257,7 +300,7 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
                         {
                           slot: 'title',
                         },
-                        { default: () => resolveComponent(drawerProps.title) }
+                        { default: () => resolveComponent(title) }
                       ),
                     ],
                   }
@@ -267,11 +310,10 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
         },
       })
       env.instance = new ComponentConstructor({
-        data() {
-          return {
-            drawerProps,
-          }
+        propsData: {
+          drawerProps,
         },
+        parent: getProtalContext(id as string | symbol),
       })
       env.instance.$mount(env.root)
     }
@@ -280,16 +322,44 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
   }
 
   const formDrawer = {
+    forOpen: (middleware: IMiddleware<IFormProps>) => {
+      if (isFn(middleware)) {
+        env.openMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
+    forConfirm: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.confirmMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
+    forCancel: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.cancelMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
     open: (props: Formily.Core.Types.IFormProps) => {
       if (env.promise) return env.promise
-      env.form = env.form || createForm(props)
-      env.promise = new Promise((resolve, reject) => {
+
+      env.promise = new Promise(async (resolve, reject) => {
+        try {
+          props = await loading(drawerProps.loadingText, () =>
+            applyMiddleware(props, env.openMiddlewares)
+          )
+          env.form = env.form || createForm(props)
+        } catch (e) {
+          reject(e)
+        }
+
         render(
           true,
           () => {
             env.form
-              .submit((values: any) => {
-                resolve(values)
+              .submit(async () => {
+                await applyMiddleware(env.form, env.confirmMiddlewares)
+                resolve(toJS(env.form.values))
                 if (drawerProps.beforeClose) {
                   setTimeout(() => {
                     drawerProps.beforeClose(() => {
@@ -302,8 +372,18 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
               })
               .catch(reject)
           },
-          () => {
-            formDrawer.close()
+          async () => {
+            await loading(drawerProps.loadingText, () =>
+              applyMiddleware(env.form, env.cancelMiddlewares)
+            )
+
+            if (drawerProps.beforeClose) {
+              drawerProps.beforeClose(() => {
+                formDrawer.close()
+              })
+            } else {
+              formDrawer.close()
+            }
           }
         )
       })
@@ -317,8 +397,9 @@ export function FormDrawer(title: any, content: any): IFormDrawer {
   return formDrawer
 }
 
-export const FormDrawerFooter = defineComponent({
-  setup(props, { attrs, slots }) {
+const FormDrawerFooter = defineComponent({
+  name: 'FFormDrawerFooter',
+  setup(props, { slots }) {
     return () => {
       return h(
         Portal,
@@ -334,3 +415,8 @@ export const FormDrawerFooter = defineComponent({
     }
   },
 })
+
+FormDrawer.Footer = FormDrawerFooter
+FormDrawer.Protal = createPortalProvider('form-drawer')
+
+export default FormDrawer
diff --git a/packages/element/src/form-drawer/style.scss b/packages/element/src/form-drawer/style.scss
index ac791c92ea0..ef57df051e0 100644
--- a/packages/element/src/form-drawer/style.scss
+++ b/packages/element/src/form-drawer/style.scss
@@ -16,5 +16,6 @@
     padding: $--dialog-padding-primary;
     display: flex;
     justify-content: flex-end;
+    align-items: center;
   }
 }
diff --git a/packages/element/src/form-drawer/style.ts b/packages/element/src/form-drawer/style.ts
index a6e3e00985f..7ec216a0593 100644
--- a/packages/element/src/form-drawer/style.ts
+++ b/packages/element/src/form-drawer/style.ts
@@ -1,3 +1,4 @@
 import './style.scss'
 import 'element-ui/packages/theme-chalk/src/drawer.scss'
 import 'element-ui/packages/theme-chalk/src/button.scss'
+import 'element-ui/packages/theme-chalk/src/loading.scss'
diff --git a/packages/element/src/form-grid/index.ts b/packages/element/src/form-grid/index.ts
index 58555b71507..c144d534ac9 100644
--- a/packages/element/src/form-grid/index.ts
+++ b/packages/element/src/form-grid/index.ts
@@ -12,6 +12,7 @@ import { isValid, isNum, isBool, isEqual } from '@formily/shared'
 import { h } from '@formily/vue'
 import ResizeObserver from 'resize-observer-polyfill'
 import { stylePrefix } from '../__builtins__/configs'
+import { composeExport } from '../__builtins__/shared'
 
 interface FormGridContext {
   colWrap?: boolean
@@ -305,8 +306,8 @@ const useGridSpan = (gridSpan: number) => {
   }
 }
 
-export const FormGrid = defineComponent({
-  name: 'FormGrid',
+const FormGridInner = defineComponent({
+  name: 'FFormGrid',
   props: {
     columnGap: {
       type: Number,
@@ -415,8 +416,8 @@ export const FormGrid = defineComponent({
   },
 })
 
-export const FormGridColumn = defineComponent({
-  name: 'FormGridColumn',
+const FormGridColumn = defineComponent({
+  name: 'FFormGridColumn',
   props: {
     gridSpan: {
       type: Number,
@@ -439,3 +440,10 @@ export const FormGridColumn = defineComponent({
     }
   },
 })
+
+export const FormGrid = composeExport(FormGridInner, {
+  GridColumn: FormGridColumn,
+  useGridSpan,
+})
+
+export default FormGrid
diff --git a/packages/element/src/form-item/index.ts b/packages/element/src/form-item/index.ts
index 145fc529b90..98ecb799ee5 100644
--- a/packages/element/src/form-item/index.ts
+++ b/packages/element/src/form-item/index.ts
@@ -1,8 +1,5 @@
 import {
   ref,
-  toRefs,
-  reactive,
-  provide,
   defineComponent,
   onMounted,
   Ref,
@@ -11,9 +8,8 @@ import {
 } from '@vue/composition-api'
 import { isVoidField } from '@formily/core'
 import { connect, mapProps, h } from '@formily/vue'
-import { reduce } from '@formily/shared'
 import { useFormLayout } from '../form-layout'
-import { resolveComponent } from '../__builtins__/shared'
+import { composeExport, resolveComponent } from '../__builtins__/shared'
 import { stylePrefix } from '../__builtins__/configs'
 import { Component } from 'vue'
 import { Tooltip } from 'element-ui'
@@ -493,7 +489,7 @@ export const FormBaseItem = defineComponent<FormItemProps>({
   },
 })
 
-export const FormItem = connect(
+const Item = connect(
   FormBaseItem,
   mapProps(
     { validateStatus: true, title: 'label', required: true },
@@ -552,3 +548,9 @@ export const FormItem = connect(
     }
   )
 )
+
+export const FormItem = composeExport(Item, {
+  BaseItem: FormBaseItem,
+})
+
+export default FormItem
diff --git a/packages/element/src/form-layout/index.ts b/packages/element/src/form-layout/index.ts
index 36aa012f38b..575b3735f79 100644
--- a/packages/element/src/form-layout/index.ts
+++ b/packages/element/src/form-layout/index.ts
@@ -47,7 +47,7 @@ export const useFormLayout = () => ({
 })
 
 export const FormLayout = defineComponent<FormLayoutProps>({
-  name: 'FormLayout',
+  name: 'FFormLayout',
   props: {
     className: {},
     colon: { default: true },
@@ -107,3 +107,5 @@ export const FormLayout = defineComponent<FormLayoutProps>({
     }
   },
 })
+
+export default FormLayout
diff --git a/packages/element/src/form-step/index.ts b/packages/element/src/form-step/index.ts
index d703b6359b3..0ab7136cba9 100644
--- a/packages/element/src/form-step/index.ts
+++ b/packages/element/src/form-step/index.ts
@@ -14,6 +14,7 @@ import { Steps, Step } from 'element-ui'
 import { stylePrefix } from '../__builtins__/configs'
 
 import type { Steps as StepsProps, Step as StepProps } from 'element-ui'
+import { composeExport } from '../__builtins__/shared'
 
 export interface IFormStep {
   connect: (steps: SchemaStep[], field: VoidField) => void
@@ -56,7 +57,7 @@ const parseSteps = (schema: Schema) => {
   return steps
 }
 
-export const createFormStep = (defaultCurrent = 0): IFormStep => {
+const createFormStep = (defaultCurrent = 0): IFormStep => {
   const env: FormStepEnv = observable({
     form: null,
     field: null,
@@ -122,9 +123,9 @@ export const createFormStep = (defaultCurrent = 0): IFormStep => {
   return formStep
 }
 
-export const FormStep = observer(
+const FormStepInner = observer(
   defineComponent<IFormStepProps>({
-    name: 'FormStep',
+    name: 'FFormStep',
     props: {
       formStep: {
         type: Object as PropType<IFormStep>,
@@ -187,9 +188,16 @@ export const FormStep = observer(
   })
 )
 
-export const FormStepPane = defineComponent<StepProps>({
-  name: 'FormStepPane',
+const StepPane = defineComponent<StepProps>({
+  name: 'FFormStepPane',
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
 })
+
+export const FormStep = composeExport(FormStepInner, {
+  StepPane,
+  createFormStep,
+})
+
+export default FormStep
diff --git a/packages/element/src/form-tab/index.ts b/packages/element/src/form-tab/index.ts
index 69d92017559..9ceb048f5c1 100644
--- a/packages/element/src/form-tab/index.ts
+++ b/packages/element/src/form-tab/index.ts
@@ -13,6 +13,7 @@ import { Tabs, TabPane, Badge } from 'element-ui'
 import { stylePrefix } from '../__builtins__/configs'
 
 import type { TabPane as TabPaneProps, Tabs as TabsProps } from 'element-ui'
+import { composeExport } from '../__builtins__/shared'
 
 export interface IFormTab {
   activeKey: string
@@ -27,7 +28,7 @@ export interface IFormTabPaneProps extends TabPaneProps {
   key: string | number
 }
 
-export const useTabs = () => {
+const useTabs = () => {
   const tabsField = useField().value
   const schema = useFieldSchema().value
   const tabs: { name: SchemaKey; props: any; schema: Schema }[] = reactive([])
@@ -48,7 +49,7 @@ export const useTabs = () => {
   return tabs
 }
 
-export const createFormTab = (defaultActiveKey?: string) => {
+const createFormTab = (defaultActiveKey?: string) => {
   const formTab = model({
     activeKey: defaultActiveKey,
     setActiveKey(key: string) {
@@ -58,9 +59,9 @@ export const createFormTab = (defaultActiveKey?: string) => {
   return formTab
 }
 
-export const FormTab = observer(
+const FormTabInner = observer(
   defineComponent<IFormTabProps>({
-    name: 'FormTab',
+    name: 'FFormTab',
     props: ['formTab'],
     setup(props, { attrs, listeners }) {
       const field = useField().value
@@ -150,9 +151,16 @@ export const FormTab = observer(
   })
 )
 
-export const FormTabPane = defineComponent<IFormTabPaneProps>({
-  name: 'FormTabPane',
+const FormTabPane = defineComponent<IFormTabPaneProps>({
+  name: 'FFormTabPane',
   setup(_props, { slots }) {
     return () => h(Fragment, {}, slots)
   },
 })
+
+export const FormTab = composeExport(FormTabInner, {
+  TabPane: FormTabPane,
+  createFormTab,
+})
+
+export default FormTab
diff --git a/packages/element/src/form/index.ts b/packages/element/src/form/index.ts
index 07cb50b8d44..ea04fcf1ac0 100644
--- a/packages/element/src/form/index.ts
+++ b/packages/element/src/form/index.ts
@@ -2,7 +2,7 @@ import { Form as FormType, IFormFeedback } from '@formily/core'
 import { FormProvider as _FormProvider, h } from '@formily/vue'
 import { defineComponent } from '@vue/composition-api'
 import { FormLayout, FormLayoutProps } from '../form-layout'
-import { PreviewTextPlaceholder } from '../preview-text'
+import { PreviewText } from '../preview-text'
 import { Component, VNode } from 'vue'
 
 const FormProvider = _FormProvider as unknown as Component
@@ -16,7 +16,7 @@ export interface FormProps extends FormLayoutProps {
 }
 
 export const Form = defineComponent<FormProps>({
-  name: 'Form',
+  name: 'FForm',
   props: [
     'form',
     'component',
@@ -39,7 +39,7 @@ export const Form = defineComponent<FormProps>({
         {
           default: () =>
             h(
-              PreviewTextPlaceholder,
+              PreviewText.Placeholder,
               {
                 props: {
                   value: previewTextPlaceholder,
@@ -80,3 +80,5 @@ export const Form = defineComponent<FormProps>({
     }
   },
 })
+
+export default Form
diff --git a/packages/element/src/form/style.ts b/packages/element/src/form/style.ts
index 72dcf9c268f..bea6e76db14 100644
--- a/packages/element/src/form/style.ts
+++ b/packages/element/src/form/style.ts
@@ -1 +1,5 @@
 import './style.scss'
+
+// 依赖
+import '../preview-text/style'
+import '../form-layout/style'
diff --git a/packages/element/src/index.ts b/packages/element/src/index.ts
index a7f59f9b662..3a14eef44be 100644
--- a/packages/element/src/index.ts
+++ b/packages/element/src/index.ts
@@ -4,7 +4,6 @@ export * from './array-base'
 export * from './array-table'
 export * from './cascader'
 export * from './checkbox'
-export * from './checkbox-group'
 export * from './date-picker'
 export * from './el-form'
 export * from './el-form-item'
diff --git a/packages/element/src/input-number/index.ts b/packages/element/src/input-number/index.ts
index 64f57ef5b6c..5683acf3154 100644
--- a/packages/element/src/input-number/index.ts
+++ b/packages/element/src/input-number/index.ts
@@ -3,7 +3,7 @@ import { connect, mapProps, mapReadPretty } from '@formily/vue'
 
 import type { InputNumber as _ElInputNumberProps } from 'element-ui'
 import { InputNumber as ElInputNumber } from 'element-ui'
-import { PreviewInputText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 
 export type InputNumberProps = _ElInputNumberProps
 
@@ -25,5 +25,7 @@ export const InputNumber = connect(
       controlsPosition,
     }
   }),
-  mapReadPretty(PreviewInputText)
+  mapReadPretty(PreviewText.Input)
 )
+
+export default InputNumber
diff --git a/packages/element/src/input-number/style.ts b/packages/element/src/input-number/style.ts
index 1972eb76819..745f8bb94c7 100644
--- a/packages/element/src/input-number/style.ts
+++ b/packages/element/src/input-number/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/input-number.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/input/index.ts b/packages/element/src/input/index.ts
index 577343d0742..2407aa4422c 100644
--- a/packages/element/src/input/index.ts
+++ b/packages/element/src/input/index.ts
@@ -1,6 +1,6 @@
-import { getComponentByTag } from '../__builtins__/shared'
+import { composeExport, getComponentByTag } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
-import { PreviewInputText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 import type { Input as ElInputProps } from 'element-ui'
 import { Input as ElInput } from 'element-ui'
 
@@ -10,19 +10,25 @@ const TransformElInput = getComponentByTag<InputProps>(ElInput, {
   change: 'input',
 })
 
-export const Input = connect(
+const InnerInput = connect(
   TransformElInput,
   mapProps({ readOnly: 'readonly' }),
-  mapReadPretty(PreviewInputText)
+  mapReadPretty(PreviewText.Input)
 )
 
-export const TextArea = connect(
-  Input,
+const TextArea = connect(
+  InnerInput,
   mapProps((props) => {
     return {
       ...props,
       type: 'textarea',
     }
   }),
-  mapReadPretty(PreviewInputText)
+  mapReadPretty(PreviewText.Input)
 )
+
+export const Input = composeExport(InnerInput, {
+  TextArea,
+})
+
+export default Input
diff --git a/packages/element/src/input/style.ts b/packages/element/src/input/style.ts
index c5031aeb84e..88b923ba3b9 100644
--- a/packages/element/src/input/style.ts
+++ b/packages/element/src/input/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/input.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/password/index.ts b/packages/element/src/password/index.ts
index 428121407d8..47752c7d3dd 100644
--- a/packages/element/src/password/index.ts
+++ b/packages/element/src/password/index.ts
@@ -1,6 +1,6 @@
 import { Input } from '../input'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
-import { PreviewInputText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 import type { Input as ElInputProps } from 'element-ui'
 
 export type PasswordProps = ElInputProps
@@ -13,5 +13,7 @@ export const Password = connect(
       showPassword: true,
     }
   }),
-  mapReadPretty(PreviewInputText)
+  mapReadPretty(PreviewText.Input)
 )
+
+export default Password
diff --git a/packages/element/src/password/style.ts b/packages/element/src/password/style.ts
index c5031aeb84e..88b923ba3b9 100644
--- a/packages/element/src/password/style.ts
+++ b/packages/element/src/password/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/input.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/preview-text/index.ts b/packages/element/src/preview-text/index.ts
index 227915009ef..e6e13b56cfa 100644
--- a/packages/element/src/preview-text/index.ts
+++ b/packages/element/src/preview-text/index.ts
@@ -3,11 +3,12 @@ import {
   createContext,
   resolveComponent,
   useContext,
+  composeExport,
 } from '../__builtins__/shared'
 import { Field } from '@formily/core'
 import { observer } from '@formily/reactive-vue'
 import { h, useField } from '@formily/vue'
-import { isArr, isFn, isValid } from '@formily/shared'
+import { isArr, isValid } from '@formily/shared'
 import { stylePrefix } from '../__builtins__/configs'
 import { InputProps } from '../input'
 import type { SelectProps } from '../select'
@@ -32,8 +33,8 @@ export const usePlaceholder = (value?: any) => {
   return placeholder
 }
 
-export const PreviewInputText = defineComponent<InputProps>({
-  name: 'PreviewInputText',
+const Input = defineComponent<InputProps>({
+  name: 'FPreviewTextInput',
   props: [],
   setup(_props, { attrs, slots }) {
     const placeholder = usePlaceholder(attrs.value)
@@ -58,9 +59,9 @@ export const PreviewInputText = defineComponent<InputProps>({
   },
 })
 
-export const PreviewSelectText = observer(
+const Select = observer(
   defineComponent<SelectProps>({
-    name: 'PreviewSelectText',
+    name: 'FPreviewTextSelect',
     props: [],
     setup(_props, { attrs }) {
       const fieldRef = useField<Field>()
@@ -129,9 +130,9 @@ export const PreviewSelectText = observer(
   })
 )
 
-export const PreviewCascaderText = observer(
+const Cascader = observer(
   defineComponent<CascaderProps>({
-    name: 'PreviewCascaderText',
+    name: 'FPreviewTextCascader',
     props: [],
     setup(_props, { attrs }) {
       const fieldRef = useField<Field>()
@@ -206,8 +207,8 @@ export const PreviewCascaderText = observer(
   })
 )
 
-export const PreviewDatePickerText = defineComponent<DatePickerProps>({
-  name: 'PreviewDatePickerText',
+const DatePicker = defineComponent<DatePickerProps>({
+  name: 'FPreviewTextDatePicker',
   props: [],
   setup(_props, { attrs }) {
     const props = attrs as unknown as DatePickerProps
@@ -240,8 +241,8 @@ export const PreviewDatePickerText = defineComponent<DatePickerProps>({
   },
 })
 
-export const PreviewTimePickerText = defineComponent<TimePickerProps>({
-  name: 'PreviewTimePickerText',
+const TimePicker = defineComponent<TimePickerProps>({
+  name: 'FPreviewTextTimePicker',
   props: [],
   setup(_props, { attrs }) {
     const props = attrs as unknown as TimePickerProps
@@ -274,8 +275,8 @@ export const PreviewTimePickerText = defineComponent<TimePickerProps>({
   },
 })
 
-export const PreviewText = defineComponent<any>({
-  name: 'PreviewText',
+const Text = defineComponent<any>({
+  name: 'FPreviewText',
   setup(_props, { attrs }) {
     const placeholder = usePlaceholder()
 
@@ -294,5 +295,14 @@ export const PreviewText = defineComponent<any>({
   },
 })
 
-export const PreviewTextPlaceholder = PlaceholderContext.Provider
-export const usePreviewTextPlaceholder = usePlaceholder
+export const PreviewText = composeExport(Text, {
+  Input,
+  Select,
+  Cascader,
+  DatePicker,
+  TimePicker,
+  Placeholder: PlaceholderContext.Provider,
+  usePlaceholder,
+})
+
+export default PreviewText
diff --git a/packages/element/src/preview-text/style.ts b/packages/element/src/preview-text/style.ts
index 0629d0e6bc0..c0e99d87ca1 100644
--- a/packages/element/src/preview-text/style.ts
+++ b/packages/element/src/preview-text/style.ts
@@ -1 +1,9 @@
 import 'element-ui/packages/theme-chalk/src/tag.scss'
+
+// 依赖
+import '../input/style'
+import '../select/style'
+import '../cascader/style'
+import '../time-picker/style'
+import '../date-picker/style'
+import '../space/style'
diff --git a/packages/element/src/radio/index.ts b/packages/element/src/radio/index.ts
index 5d523ecfa2b..55cb99b660f 100644
--- a/packages/element/src/radio/index.ts
+++ b/packages/element/src/radio/index.ts
@@ -1,7 +1,7 @@
 import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
 import { defineComponent } from '@vue/composition-api'
-import { getComponentByTag } from '../__builtins__/shared'
-import { PreviewSelectText } from '../preview-text'
+import { composeExport, getComponentByTag } from '../__builtins__/shared'
+import { PreviewText } from '../preview-text'
 import type {
   Radio as ElRadioProps,
   RadioGroup as ElRadioGroupProps,
@@ -23,7 +23,7 @@ const TransformElRadioGroup = getComponentByTag(ElRadioGroup, {
 })
 
 const RadioGroupOption = defineComponent<RadioGroupProps>({
-  name: 'RadioGroup',
+  name: 'FRadioGroup',
   props: {
     options: {
       type: Array,
@@ -74,9 +74,13 @@ const RadioGroupOption = defineComponent<RadioGroupProps>({
   },
 })
 
-export const RadioGroup = connect(
+const RadioGroup = connect(
   RadioGroupOption,
   mapProps({ dataSource: 'options' }),
-  mapReadPretty(PreviewSelectText)
+  mapReadPretty(PreviewText.Select)
 )
-export const Radio = ElRadio
+export const Radio = composeExport(ElRadio, {
+  Group: RadioGroup,
+})
+
+export default Radio
diff --git a/packages/element/src/reset/index.ts b/packages/element/src/reset/index.ts
index 6176e7e833b..27d89036e98 100644
--- a/packages/element/src/reset/index.ts
+++ b/packages/element/src/reset/index.ts
@@ -10,7 +10,7 @@ export type ResetProps = IFieldResetOptions & IElButton
 
 export const Reset = observer(
   defineComponent<ResetProps>({
-    name: 'Reset',
+    name: 'FReset',
     props: {
       forceClear: {
         type: Boolean,
@@ -52,3 +52,5 @@ export const Reset = observer(
     },
   })
 )
+
+export default Reset
diff --git a/packages/element/src/select/index.ts b/packages/element/src/select/index.ts
index c5a11db2b77..53d08efbb53 100644
--- a/packages/element/src/select/index.ts
+++ b/packages/element/src/select/index.ts
@@ -1,6 +1,6 @@
 import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
 import { defineComponent } from '@vue/composition-api'
-import { PreviewSelectText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 
 import type {
   Select as ElSelectProps,
@@ -13,7 +13,7 @@ export type SelectProps = ElSelectProps & {
 }
 
 const SelectOption = defineComponent<SelectProps>({
-  name: 'Select',
+  name: 'FSelect',
   props: ['options'],
   setup(customProps, { attrs, slots, listeners }) {
     return () => {
@@ -52,5 +52,7 @@ const SelectOption = defineComponent<SelectProps>({
 export const Select = connect(
   SelectOption,
   mapProps({ dataSource: 'options', loading: true }),
-  mapReadPretty(PreviewSelectText)
+  mapReadPretty(PreviewText.Select)
 )
+
+export default Select
diff --git a/packages/element/src/select/style.ts b/packages/element/src/select/style.ts
index 9c4080d96fd..df0344752de 100644
--- a/packages/element/src/select/style.ts
+++ b/packages/element/src/select/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/select.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/space/index.ts b/packages/element/src/space/index.ts
index e677b0793e0..b1ffdbd2a55 100644
--- a/packages/element/src/space/index.ts
+++ b/packages/element/src/space/index.ts
@@ -19,7 +19,7 @@ const spaceSize = {
 }
 
 export const Space = defineComponent<SpaceProps>({
-  name: 'Space',
+  name: 'FSpace',
   props: ['size', 'direction', 'align'],
   setup(props, { slots }) {
     return () => {
@@ -85,3 +85,5 @@ export const Space = defineComponent<SpaceProps>({
     }
   },
 })
+
+export default Space
diff --git a/packages/element/src/submit/index.ts b/packages/element/src/submit/index.ts
index ebe16bf86be..3fdd532cf62 100644
--- a/packages/element/src/submit/index.ts
+++ b/packages/element/src/submit/index.ts
@@ -15,7 +15,7 @@ export interface ISubmitProps extends ElButtonProps {
 
 export const Submit = observer(
   defineComponent<ISubmitProps>({
-    name: 'Submit',
+    name: 'FSubmit',
     props: ['onClick', 'onSubmit', 'onSubmitSuccess', 'onSubmitFailed'],
     setup(props, { attrs, slots, listeners }) {
       const formRef = useForm()
@@ -60,3 +60,5 @@ export const Submit = observer(
     },
   })
 )
+
+export default Submit
diff --git a/packages/element/src/switch/index.ts b/packages/element/src/switch/index.ts
index c475750f29e..f12a28ec71f 100644
--- a/packages/element/src/switch/index.ts
+++ b/packages/element/src/switch/index.ts
@@ -6,3 +6,5 @@ import { Switch as ElSwitch } from 'element-ui'
 export type SwitchProps = ElSwitchProps
 
 export const Switch = connect(ElSwitch, mapProps({ readOnly: 'readonly' }))
+
+export default Switch
diff --git a/packages/element/src/time-picker/index.ts b/packages/element/src/time-picker/index.ts
index ce71a8dead0..4a74f655e17 100644
--- a/packages/element/src/time-picker/index.ts
+++ b/packages/element/src/time-picker/index.ts
@@ -1,6 +1,6 @@
 import { getComponentByTag } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
-import { PreviewTimePickerText } from '../preview-text'
+import { PreviewText } from '../preview-text'
 import type { TimePicker as ElTimePickerProps } from 'element-ui'
 import { TimePicker as ElTimePicker } from 'element-ui'
 
@@ -13,5 +13,7 @@ const TransformElTimePicker = getComponentByTag<TimePickerProps>(ElTimePicker, {
 export const TimePicker = connect(
   TransformElTimePicker,
   mapProps({ readOnly: 'readonly' }),
-  mapReadPretty(PreviewTimePickerText)
+  mapReadPretty(PreviewText.TimePicker)
 )
+
+export default TimePicker
diff --git a/packages/element/src/time-picker/style.ts b/packages/element/src/time-picker/style.ts
index 7b26a4d6331..701fbc844ed 100644
--- a/packages/element/src/time-picker/style.ts
+++ b/packages/element/src/time-picker/style.ts
@@ -1 +1,4 @@
 import 'element-ui/packages/theme-chalk/src/time-picker.scss'
+
+// 依赖
+import '../preview-text/style'
diff --git a/packages/element/src/transfer/index.ts b/packages/element/src/transfer/index.ts
index 524a613607b..8507b610f75 100644
--- a/packages/element/src/transfer/index.ts
+++ b/packages/element/src/transfer/index.ts
@@ -6,3 +6,5 @@ import { Transfer as ElTransfer } from 'element-ui'
 export type TransferProps = ElTransferProps
 
 export const Transfer = connect(ElTransfer, mapProps({ dataSource: 'data' }))
+
+export default Transfer
diff --git a/packages/element/src/upload/index.ts b/packages/element/src/upload/index.ts
index 399e286898a..d88012a4a5b 100644
--- a/packages/element/src/upload/index.ts
+++ b/packages/element/src/upload/index.ts
@@ -15,7 +15,7 @@ export type UploadProps = ElUploadProps & {
 }
 
 const UploadWrapper = defineComponent<UploadProps>({
-  name: 'Upload',
+  name: 'FUpload',
   props: {
     textContent: {
       type: String,
@@ -124,3 +124,5 @@ export const Upload = connect(
   UploadWrapper,
   mapProps({ readOnly: 'readonly', value: 'fileList' })
 )
+
+export default Upload
diff --git a/packages/element/src/upload/style.ts b/packages/element/src/upload/style.ts
index 8bf43b602ce..d632a8ca33b 100644
--- a/packages/element/src/upload/style.ts
+++ b/packages/element/src/upload/style.ts
@@ -1 +1,2 @@
 import 'element-ui/packages/theme-chalk/src/upload.scss'
+import 'element-ui/packages/theme-chalk/src/button.scss'
diff --git a/packages/element/transformer.ts b/packages/element/transformer.ts
new file mode 100644
index 00000000000..ab8a563c497
--- /dev/null
+++ b/packages/element/transformer.ts
@@ -0,0 +1,13 @@
+import * as ts from 'typescript'
+import createTransformer from 'ts-import-plugin'
+
+const transformer = createTransformer({
+  libraryName: 'element-ui',
+  libraryDirectory: 'lib',
+  camel2DashComponentName: true,
+  style: false,
+})
+
+export default function (program: ts.Program, pluginOptions: {}) {
+  return transformer
+}
diff --git a/packages/element/tsconfig.json b/packages/element/tsconfig.json
index 658fc18649f..1ea2424a073 100644
--- a/packages/element/tsconfig.json
+++ b/packages/element/tsconfig.json
@@ -5,7 +5,8 @@
     "skipLibCheck": true,
     "paths": {
       "@formily/*": ["../*"]
-    }
+    },
+    "plugins": [{ "transform": "./transformer.ts", "after": true }]
   },
   "include": ["./src/**/*.ts", "./src/**/*.tsx"],
   "exclude": ["./esm/*", "./lib/*"]
diff --git a/scripts/rollup.base.js b/scripts/rollup.base.js
index 2f9ad4affe1..d97a803696c 100644
--- a/scripts/rollup.base.js
+++ b/scripts/rollup.base.js
@@ -14,11 +14,10 @@ const presets = () => {
     react: 'React',
     moment: 'moment',
     'react-is': 'ReactIs',
-    'element-ui': 'Element',
     '@alifd/next': 'Next',
     'mobx-react-lite': 'mobxReactLite',
     'react-dom': 'ReactDOM',
-    'element-ui': 'ElementUI',
+    'element-ui': 'Element',
     '@ant-design/icons': 'icons',
     '@vue/composition-api': 'VueCompositionAPI',
     '@formily/reactive-react': 'Formily.ReactiveReact',
diff --git a/yarn.lock b/yarn.lock
index 0c9b31a6bf8..6b766a7e155 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16557,7 +16557,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@1.20.0, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.2.0, resolve@^1.20.0:
+resolve@1.20.0, resolve@>=1.9.0, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.2.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -18438,6 +18438,13 @@ ts-import-plugin@1.6.1:
     opencollective-postinstall "^2.0.2"
     tslib "^1.10.0"
 
+ts-import-plugin@^1.6.7:
+  version "1.6.7"
+  resolved "https://registry.nlark.com/ts-import-plugin/download/ts-import-plugin-1.6.7.tgz#219cabef4a8b50d8321ac750758837378492914c"
+  integrity sha1-IZyr70qLUNgyGsdQdYg3N4SSkUw=
+  dependencies:
+    tslib "^2.0.3"
+
 ts-jest@^26.0.0:
   version "26.5.6"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35"
@@ -18513,6 +18520,13 @@ tty-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
   integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
+ttypescript@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.nlark.com/ttypescript/download/ttypescript-1.5.12.tgz#27a8356d7d4e719d0075a8feb4df14b52384f044"
+  integrity sha1-J6g1bX1OcZ0Adaj+tN8UtSOE8EQ=
+  dependencies:
+    resolve ">=1.9.0"
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"