diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4ae8643c30c..9c5dddb66c1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,17 +1,17 @@
 name: Node CI
 
 on:
-  push:
+ push:
     branches:
       - formily_next
-  pull_request:
+ pull_request:
     branches:
       - formily_next
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
-    if: !contains(github.event.head_commit.message, 'chore(versions)')
+    if: contains(github.event.head_commit.message, 'chore(versions)') == false
     strategy:
       matrix:
         node_version: [10.x, 11.x]
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c1e6096d0fe..2a289476268 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -9,21 +9,32 @@ jobs:
     runs-on: ubuntu-latest
     if: contains(github.event.head_commit.message, 'chore(versions)')
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
         with:
-          node-version: 11
+          node-version: 12
           registry-url: https://registry.npmjs.org/
       - run: |
           yarn -v
           yarn --ignore-engines
           yarn build
+          yarn test:prod
           yarn run release:force
         env:
+          CI: true
           HEADLESS: false
           PROGRESS: none
+          NODE_ENV: test
+          NODE_OPTIONS: --max_old_space_size=4096
           NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           ACCESS_KEY_ID: ${{ secrets.ACCESS_KEY_ID }}
           ACCESS_KEY_SECRET: ${{ secrets.ACCESS_KEY_SECRET }}
           REGISTRY: https://registry.npmjs.org
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true
+          verbose: true
diff --git a/.gitignore b/.gitignore
index 6390c5cca47..dc9b17d113c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,7 +18,6 @@ examples/test
 TODO.md
 tsconfig.tsbuildinfo
 package/
-benchmark
 package.zip
 .umi
 .umi-production
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c3743ff27f..6a62f80867e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,65 @@
 # Changelog
 
+## v2.0.0-rc.10(2021-09-21)
+
+### :beetle: Bug Fixes
+
+1. [fix(core): fix initialValues patch values with wrong type (#2214)](https://github.com/alibaba/formily/commit/334ff1bc) :point_right: ( [Janry](https://github.com/Janry) )
+
+1. [fix(element): fix select label error (#2202)](https://github.com/alibaba/formily/commit/c8b513e0) :point_right: ( [Muyao](https://github.com/Muyao) )
+
+### :memo: Documents Changes
+
+1. [docs(vue/element): add codesandbox support (#2206)](https://github.com/alibaba/formily/commit/07739bb9) :point_right: ( [Muyao](https://github.com/Muyao) )
+
+### :rocket: Improve Performance
+
+1. [perf(path): use Map replace LRUMap](https://github.com/alibaba/formily/commit/1141e580) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+### :blush: Other Changes
+
+1. [chore(workflow): update ci actions](https://github.com/alibaba/formily/commit/aba1e3f0) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+1. [chore(deps-dev): bump semver-regex from 2.0.0 to 3.1.3 (#2209)](https://github.com/alibaba/formily/commit/94a6ffcc) :point_right: ( [dependabot[bot]](https://github.com/dependabot[bot]) )
+
+1. [chore(desingbale): move designable-antd/next to designable repo](https://github.com/alibaba/formily/commit/84327d2d) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+## v2.0.0-rc.9(2021-09-18)
+
+### :tada: Enhancements
+
+1. [feat(element): support element-ui slot (#2162)](https://github.com/alibaba/formily/commit/205e164c) :point_right: ( [Muyao](https://github.com/Muyao) )
+
+### :beetle: Bug Fixes
+
+1. [fix(core): fix assign initialValue will overwrite value](https://github.com/alibaba/formily/commit/3fbb8697) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+## v2.0.0-rc.8(2021-09-17)
+
+### :tada: Enhancements
+
+1. [feat(react): fix schema x-component-props children invalid (#2160)](https://github.com/alibaba/formily/commit/7dc9d9ff) :point_right: ( [Lyca](https://github.com/Lyca) )
+
+### :memo: Documents Changes
+
+1. [docs(reactive): update toJS/markRaw docs](https://github.com/alibaba/formily/commit/77cb7b7b) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+### :rocket: Improve Performance
+
+1. [perf(schema): improve performance](https://github.com/alibaba/formily/commit/184884ca) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+### :blush: Other Changes
+
+1. [chore(workflow): fix actions](https://github.com/alibaba/formily/commit/12dacdcc) :point_right: ( [Janry](https://github.com/Janry) )
+
+1. [chore(designable): lock version](https://github.com/alibaba/formily/commit/b61ad907) :point_right: ( [janrywang](https://github.com/janrywang) )
+
+## v2.0.0-rc.7(2021-09-15)
+
+### :beetle: Bug Fixes
+
+1. [fix(json-schema/reactive): fix circular reference check logic](https://github.com/alibaba/formily/commit/b356dad3) :point_right: ( [janrywang](https://github.com/janrywang) )
+
 ## v2.0.0-rc.6(2021-09-14)
 
 ### :beetle: Bug Fixes
@@ -733,145 +793,3 @@
 ### :rose: Improve code quality
 
 1. [refactor(core): controlled ==> designable](https://github.com/alibaba/formily/commit/ac79c196) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-## v2.0.0-beta.60(2021-06-02)
-
-### :tada: Enhancements
-
-1. [feat(json-schema): add silent static method](https://github.com/alibaba/formily/commit/f1277ba2) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(antd/next): support data props to FormItem](https://github.com/alibaba/formily/commit/a3750ec5) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(designable): add SchemaRenderWidget](https://github.com/alibaba/formily/commit/ef49b45f) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-### :beetle: Bug Fixes
-
-1. [fix(react): fix ci](https://github.com/alibaba/formily/commit/f7fdbcd3) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(antd): fix typings](https://github.com/alibaba/formily/commit/6d8b1f22) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(core): fix array path calculation #1533](https://github.com/alibaba/formily/commit/29249000) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-### :blush: Other Changes
-
-1. [chore(pkg): add workspaces](https://github.com/alibaba/formily/commit/d8af530e) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-## v2.0.0-beta.59(2021-06-01)
-
-### :beetle: Bug Fixes
-
-1. [fix(react): fix useFormEffects not support StrictMode #1491](https://github.com/alibaba/formily/commit/0198b0c4) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(core): fix field value restored incorrectly when hidden toggled (#1529)](https://github.com/alibaba/formily/commit/047c98af) :point_right: ( [JustDs](https://github.com/JustDs) )
-
-1. [fix(core): fix array field path calculation](https://github.com/alibaba/formily/commit/cdae914c) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-### :rose: Improve code quality
-
-1. [refactor(designable): update directory structure](https://github.com/alibaba/formily/commit/bb300a00) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [refactor(reactive-react): refactor observer function (#1523)](https://github.com/alibaba/formily/commit/55b93420) :point_right: ( [liuwei](https://github.com/liuwei) )
-
-### :blush: Other Changes
-
-1. [chore(readme): update readme](https://github.com/alibaba/formily/commit/96140630) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-## v2.0.0-beta.58(2021-05-27)
-
-### :tada: Enhancements
-
-1. [feat(next): add ArrayCollapse (#1513)](https://github.com/alibaba/formily/commit/ebddc015) :point_right: ( [Lind](https://github.com/Lind) )
-
-### :beetle: Bug Fixes
-
-1. [fix(vue): remove empty default slots of fields (#1517)](https://github.com/alibaba/formily/commit/00a80b4b) :point_right: ( [月落音阑](https://github.com/月落音阑) )
-
-### :memo: Documents Changes
-
-1. [docs(json-schema): add definitions and doc](https://github.com/alibaba/formily/commit/e729e007) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [docs(core): fix typo (#1512)](https://github.com/alibaba/formily/commit/c568de99) :point_right: ( [后浪](https://github.com/后浪) )
-
-### :blush: Other Changes
-
-1. [chore(workflow): update ci action](https://github.com/alibaba/formily/commit/d3dd91ca) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(github): update pr template](https://github.com/alibaba/formily/commit/b3149307) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-## v2.0.0-beta.57(2021-05-27)
-
-### :tada: Enhancements
-
-1. [feat(json-schema): support definitions and #1147](https://github.com/alibaba/formily/commit/87339c70) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(core): support more types for dataSource](https://github.com/alibaba/formily/commit/6715555e) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(react): support x-component-props.children](https://github.com/alibaba/formily/commit/c8176380) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(next): support form drawer get context from fusion (#1511)](https://github.com/alibaba/formily/commit/7fce306c) :point_right: ( [王大白](https://github.com/王大白) )
-
-1. [feat(next): add fusion multiple lang of validator (#1504)](https://github.com/alibaba/formily/commit/2ca07e7a) :point_right: ( [王大白](https://github.com/王大白) )
-
-1. [feat(antd): support defaultOpenPanelCount for ArrayCollapse (#1505)](https://github.com/alibaba/formily/commit/e9e3f74e) :point_right: ( [Lind](https://github.com/Lind) )
-
-1. [feat(next): add stopPropagation to array-base events](https://github.com/alibaba/formily/commit/276a5fbb) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [feat(core): remove property of form values with undefined value (#1495)](https://github.com/alibaba/formily/commit/296eae47) :point_right: ( [小黄黄](https://github.com/小黄黄) )
-
-### :beetle: Bug Fixes
-
-1. [fix(antd): fix ArrayCollapse items calculation](https://github.com/alibaba/formily/commit/1d10ac81) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(react): fix ci](https://github.com/alibaba/formily/commit/9826425c) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(core): remove @types/react peerDependencies](https://github.com/alibaba/formily/commit/2ad43225) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(react): fix ReactComponentPropsByPathValue type return error result (#1507)](https://github.com/alibaba/formily/commit/fb7654eb) :point_right: ( [liuwei](https://github.com/liuwei) )
-
-1. [fix(json-schema): fix single function x-reactions not work #1497](https://github.com/alibaba/formily/commit/ae5019df) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(core): fix reactive query #1494](https://github.com/alibaba/formily/commit/a0ca5b2b) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(validator): fix typo](https://github.com/alibaba/formily/commit/b1a83d2b) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [fix(path): fix realative path for sibling in array (#1492)](https://github.com/alibaba/formily/commit/860264d6) :point_right: ( [JustDs](https://github.com/JustDs) )
-
-1. [fix(antd/next): fix FormItem typings (#1486)](https://github.com/alibaba/formily/commit/91b4b617) :point_right: ( [Nokecy](https://github.com/Nokecy) )
-
-### :memo: Documents Changes
-
-1. [docs(readme): add download stats](https://github.com/alibaba/formily/commit/09ec8e52) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [docs(all): add inject global styles](https://github.com/alibaba/formily/commit/70852e91) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [docs(issue-helper): improve issue-helper](https://github.com/alibaba/formily/commit/e4d10d13) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [docs(guide): update issue helper](https://github.com/alibaba/formily/commit/76b58651) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-### :rose: Improve code quality
-
-1. [refactor(antd/next): rewrite PreviewText to JSXComponent (#1509)](https://github.com/alibaba/formily/commit/3f6c34d2) :point_right: ( [liuwei](https://github.com/liuwei) )
-
-1. [refactor(json-schema): refactor stringify type to fix literal type is erased (#1508)](https://github.com/alibaba/formily/commit/43e79a61) :point_right: ( [liuwei](https://github.com/liuwei) )
-
-### :blush: Other Changes
-
-1. [chore(dumi): update next css link](https://github.com/alibaba/formily/commit/6843d946) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(pkg): update lint-staged scripts](https://github.com/alibaba/formily/commit/ddd8fc9a) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(project): prettier all code and change style behavior](https://github.com/alibaba/formily/commit/3792c221) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(github): update git commit specific](https://github.com/alibaba/formily/commit/af58562c) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(scripts): remove mapCoverage.js](https://github.com/alibaba/formily/commit/3b3c3134) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(designable): add setters package](https://github.com/alibaba/formily/commit/d3bbca3b) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(workflow): Update check-pr-title.yml (#1490)](https://github.com/alibaba/formily/commit/9243908d) :point_right: ( [xrkffgg](https://github.com/xrkffgg) )
-
-1. [chore(project): update pr template](https://github.com/alibaba/formily/commit/30d39dd1) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(workflow): add issue helper action](https://github.com/alibaba/formily/commit/e2d7c0ad) :point_right: ( [janrywang](https://github.com/janrywang) )
-
-1. [chore(workflow): rename main.yml ==>commitlint.yml](https://github.com/alibaba/formily/commit/45734661) :point_right: ( [Janry](https://github.com/Janry) )
diff --git a/designable/.eslintrc b/designable/.eslintrc
deleted file mode 100644
index 018630faf56..00000000000
--- a/designable/.eslintrc
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
-    "plugin:markdown/recommended"
-  ],
-  "env": {
-    "node": true
-  },
-  "plugins": ["@typescript-eslint", "react", "prettier", "markdown"],
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 10,
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "prettier/prettier": 0,
-    // don't force es6 functions to include space before paren
-    "space-before-function-paren": 0,
-    "react/prop-types": 0,
-    "react/no-find-dom-node": 0,
-    "react/display-name": 0,
-    // allow specifying true explicitly for boolean props
-    "react/jsx-boolean-value": 0,
-    "react/no-did-update-set-state": 0,
-    // maybe we should no-public
-    "@typescript-eslint/explicit-member-accessibility": 0,
-    "@typescript-eslint/interface-name-prefix": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/no-parameter-properties": 0,
-    "@typescript-eslint/array-type": 0,
-    "@typescript-eslint/no-object-literal-type-assertion": 0,
-    "@typescript-eslint/no-use-before-define": 0,
-    "@typescript-eslint/no-unused-vars": 1,
-    "@typescript-eslint/no-namespace": 0,
-    "@typescript-eslint/ban-types": 0,
-    "@typescript-eslint/adjacent-overload-signatures": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-empty-function": 0,
-    "no-console": [
-      "error",
-      {
-        "allow": ["warn", "error", "info"]
-      }
-    ],
-    "prefer-const": 0,
-    "no-var": 1,
-    "prefer-rest-params": 0
-  },
-  "overrides": [
-    {
-      "files": ["**/*.md"],
-      "processor": "markdown/markdown"
-    },
-    {
-      "files": ["**/*.md/*.{jsx,tsx}"],
-      "rules": {
-        "@typescript-eslint/no-unused-vars": "error",
-        "no-unused-vars": "error",
-        "no-console": "off"
-      }
-    }
-  ]
-}
diff --git a/designable/antd/.umirc.js b/designable/antd/.umirc.js
deleted file mode 100644
index 1362b3c43c6..00000000000
--- a/designable/antd/.umirc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { resolve } from 'path'
-export default {
-  mode: 'site',
-  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-  title: 'Formily',
-  hash: true,
-  favicon:
-    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
-  outputPath: './doc-site',
-  navs: [
-    {
-      title: 'Ant Design',
-      path: '/components',
-    },
-    {
-      title: '主站',
-      path: 'https://v2.formilyjs.org',
-    },
-    {
-      title: 'GITHUB',
-      path: 'https://github.com/alibaba/formily',
-    },
-  ],
-  styles: [
-    `.__dumi-default-navbar-logo{
-      height: 60px !important;
-      width: 150px !important;
-      padding-left:0 !important;
-      color: transparent !important;
-    }
-    .__dumi-default-navbar{
-      padding: 0 28px !important;
-    }
-    .__dumi-default-layout-hero{
-      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-    nav a{
-      text-decoration: none !important;
-    }
-    `,
-  ],
-}
diff --git a/designable/antd/README.md b/designable/antd/README.md
deleted file mode 100644
index 84103eebdc5..00000000000
--- a/designable/antd/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @formily/designable-antd
-
-### Install
-
-```bash
-npm install --save @formily/designable-antd
-```
diff --git a/designable/antd/copy.ts b/designable/antd/copy.ts
deleted file mode 100644
index d451fc48651..00000000000
--- a/designable/antd/copy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runCopy } from '../../scripts/build-style'
-
-runCopy({
-  esStr: 'antd/es/',
-  libStr: 'antd/lib/',
-})
diff --git a/designable/antd/package.json b/designable/antd/package.json
deleted file mode 100644
index e0bc10e1dbc..00000000000
--- a/designable/antd/package.json
+++ /dev/null
@@ -1,71 +0,0 @@
-{
-  "name": "@formily/designable-antd",
-  "version": "2.0.0-rc.7",
-  "license": "MIT",
-  "main": "lib",
-  "module": "esm",
-  "umd:main": "dist/formily.designable.antd.umd.production.js",
-  "unpkg": "dist/formily.designable.umd.production.js",
-  "jsdelivr": "dist/formily.designable.umd.production.js",
-  "jsnext:main": "esm",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alibaba/formily.git"
-  },
-  "types": "esm/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/alibaba/formily/issues"
-  },
-  "homepage": "https://github.com/alibaba/formily#readme",
-  "engines": {
-    "npm": ">=3.0.0"
-  },
-  "scripts": {
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && ts-node copy",
-    "build:cjs": "tsc --project tsconfig.build.json",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
-    "build:umd": "rollup --config",
-    "build:playground": "webpack-cli --config playground/webpack.prod.ts",
-    "start": "webpack-dev-server --config playground/webpack.dev.ts"
-  },
-  "devDependencies": {
-    "@designable/react-settings-form": "^0.x",
-    "autoprefixer": "^9.0",
-    "file-loader": "^5.0.2",
-    "fs-extra": "^8.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "monaco-editor-webpack-plugin": "^4.0.0",
-    "raw-loader": "^4.0.0",
-    "react-monaco-editor": "^0.43.0",
-    "style-loader": "^1.1.3",
-    "ts-loader": "^7.0.4",
-    "typescript": "4.1.5",
-    "webpack": "^4.41.5",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
-  },
-  "peerDependencies": {
-    "@types/react": ">=16.8.0 || >=17.0.0",
-    "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "antd": "^4.0.0",
-    "react": ">=16.8.0 || >=17.0.0",
-    "react-dom": ">=16.8.0",
-    "react-is": ">=16.8.0 || >=17.0.0"
-  },
-  "dependencies": {
-    "@designable/core": "^0.x",
-    "@designable/formily": "^0.x",
-    "@designable/react": "^0.x",
-    "@formily/antd": "2.0.0-rc.7",
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/designable-setters": "2.0.0-rc.7",
-    "@formily/react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "2c44ae410a73f02735c63c6430e021a50e21f3ec"
-}
diff --git a/designable/antd/playground/main.tsx b/designable/antd/playground/main.tsx
deleted file mode 100644
index df5f255f327..00000000000
--- a/designable/antd/playground/main.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {
-  Designer,
-  DesignerToolsWidget,
-  ViewToolsWidget,
-  Workspace,
-  OutlineTreeWidget,
-  DragSourceWidget,
-  HistoryWidget,
-  MainPanel,
-  CompositePanel,
-  WorkspacePanel,
-  ToolbarPanel,
-  ViewportPanel,
-  ViewPanel,
-  SettingsPanel,
-  ComponentTreeWidget,
-} from '@designable/react'
-import { SettingsForm } from '@designable/react-settings-form'
-import {
-  createDesigner,
-  GlobalRegistry,
-  Shortcut,
-  KeyCode,
-} from '@designable/core'
-import { createDesignableField, createDesignableForm } from '../src'
-import {
-  LogoWidget,
-  ActionsWidget,
-  PreviewWidget,
-  SchemaEditorWidget,
-  MarkupSchemaWidget,
-} from './widgets'
-import { saveSchema } from './service'
-import 'antd/dist/antd.less'
-GlobalRegistry.registerDesignerLocales({
-  'zh-CN': {
-    sources: {
-      Inputs: '输入控件',
-      Layouts: '布局组件',
-      Arrays: '自增组件',
-      Displays: '展示组件',
-    },
-  },
-  'en-US': {
-    sources: {
-      Inputs: 'Inputs',
-      Layouts: 'Layouts',
-      Arrays: 'Arrays',
-      Displays: 'Displays',
-    },
-  },
-})
-
-const Root = createDesignableForm({
-  registryName: 'Root',
-})
-
-const DesignableField = createDesignableField({
-  registryName: 'DesignableField',
-})
-
-const SaveShortCut = new Shortcut({
-  codes: [
-    [KeyCode.Meta, KeyCode.S],
-    [KeyCode.Control, KeyCode.S],
-  ],
-  handler(ctx) {
-    saveSchema(ctx.engine)
-  },
-})
-
-const engine = createDesigner({
-  shortcuts: [SaveShortCut],
-})
-
-const App = () => {
-  return (
-    <Designer engine={engine}>
-      <MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
-        <CompositePanel>
-          <CompositePanel.Item title="panels.Component" icon="Component">
-            <DragSourceWidget title="sources.Inputs" name="inputs" />
-            <DragSourceWidget title="sources.Layouts" name="layouts" />
-            <DragSourceWidget title="sources.Arrays" name="arrays" />
-            <DragSourceWidget title="sources.Displays" name="displays" />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
-            <OutlineTreeWidget />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.History" icon="History">
-            <HistoryWidget />
-          </CompositePanel.Item>
-        </CompositePanel>
-        <Workspace id="form">
-          <WorkspacePanel>
-            <ToolbarPanel>
-              <DesignerToolsWidget />
-              <ViewToolsWidget
-                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
-              />
-            </ToolbarPanel>
-            <ViewportPanel>
-              <ViewPanel type="DESIGNABLE">
-                {() => (
-                  <ComponentTreeWidget
-                    components={{
-                      Root,
-                      DesignableField,
-                    }}
-                  />
-                )}
-              </ViewPanel>
-              <ViewPanel type="JSONTREE" scrollable={false}>
-                {(tree, onChange) => (
-                  <SchemaEditorWidget tree={tree} onChange={onChange} />
-                )}
-              </ViewPanel>
-              <ViewPanel type="MARKUP" scrollable={false}>
-                {(tree) => <MarkupSchemaWidget tree={tree} />}
-              </ViewPanel>
-              <ViewPanel type="PREVIEW">
-                {(tree) => <PreviewWidget tree={tree} />}
-              </ViewPanel>
-            </ViewportPanel>
-          </WorkspacePanel>
-        </Workspace>
-        <SettingsPanel title="panels.PropertySettings">
-          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
-        </SettingsPanel>
-      </MainPanel>
-    </Designer>
-  )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/designable/antd/playground/service/index.ts b/designable/antd/playground/service/index.ts
deleted file mode 100644
index cb7cdd48bd0..00000000000
--- a/designable/antd/playground/service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './schema'
diff --git a/designable/antd/playground/service/schema.ts b/designable/antd/playground/service/schema.ts
deleted file mode 100644
index 1c7b2c63996..00000000000
--- a/designable/antd/playground/service/schema.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Engine } from '@designable/core'
-import { transformToSchema, transformToTreeNode } from '@designable/formily'
-import { message } from 'antd'
-
-export const saveSchema = (designer: Engine) => {
-  localStorage.setItem(
-    'formily-schema',
-    JSON.stringify(
-      transformToSchema(designer.getCurrentTree(), {
-        designableFieldName: 'DesignableField',
-        designableFormName: 'Root',
-      })
-    )
-  )
-  message.success('Save Success')
-}
-
-export const loadInitialSchema = (designer: Engine) => {
-  try {
-    designer.setCurrentTree(
-      transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')), {
-        designableFieldName: 'DesignableField',
-        designableFormName: 'Root',
-      })
-    )
-  } catch {}
-}
diff --git a/designable/antd/playground/webpack.dev.ts b/designable/antd/playground/webpack.dev.ts
deleted file mode 100644
index 710c0570dae..00000000000
--- a/designable/antd/playground/webpack.dev.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import baseConfig from './webpack.base'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
-//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
-import webpack from 'webpack'
-import path from 'path'
-
-const PORT = 3000
-
-const createPages = (pages) => {
-  return pages.map(({ filename, template, chunk }) => {
-    return new HtmlWebpackPlugin({
-      filename,
-      template,
-      inject: 'body',
-      chunks: chunk,
-    })
-  })
-}
-
-for (const key in baseConfig.entry) {
-  if (Array.isArray(baseConfig.entry[key])) {
-    baseConfig.entry[key].push(
-      require.resolve('webpack/hot/dev-server'),
-      `${require.resolve('webpack-dev-server/client')}?http://localhost:${PORT}`
-    )
-  }
-}
-
-export default {
-  ...baseConfig,
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css',
-    }),
-    ...createPages([
-      {
-        filename: 'index.html',
-        template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
-      },
-    ]),
-    new webpack.HotModuleReplacementPlugin(),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
-    // new BundleAnalyzerPlugin()
-  ],
-  devServer: {
-    host: '127.0.0.1',
-    open: true,
-    port: PORT,
-  },
-}
diff --git a/designable/antd/playground/webpack.prod.ts b/designable/antd/playground/webpack.prod.ts
deleted file mode 100644
index 520f909e4f0..00000000000
--- a/designable/antd/playground/webpack.prod.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import baseConfig from './webpack.base'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
-import path from 'path'
-
-const createPages = (pages) => {
-  return pages.map(({ filename, template, chunk }) => {
-    return new HtmlWebpackPlugin({
-      filename,
-      template,
-      inject: 'body',
-      chunks: chunk,
-    })
-  })
-}
-
-export default {
-  ...baseConfig,
-  mode: 'production',
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css',
-    }),
-    ...createPages([
-      {
-        filename: 'index.html',
-        template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
-      },
-    ]),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
-  ],
-  optimization: {
-    minimize: true,
-  },
-}
diff --git a/designable/antd/playground/widgets/ActionsWidget.tsx b/designable/antd/playground/widgets/ActionsWidget.tsx
deleted file mode 100644
index e9cc15e1341..00000000000
--- a/designable/antd/playground/widgets/ActionsWidget.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useEffect } from 'react'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import { useDesigner, TextWidget } from '@designable/react'
-import { GlobalRegistry } from '@designable/core'
-import { observer } from '@formily/react'
-import { loadInitialSchema, saveSchema } from '../service'
-
-export const ActionsWidget = observer(() => {
-  const designer = useDesigner()
-  useEffect(() => {
-    loadInitialSchema(designer)
-  }, [])
-  return (
-    <Space style={{ marginRight: 10 }}>
-      <Button href="https://designable-fusion.formilyjs.org">
-        Alibaba Fusion
-      </Button>
-      <Radio.Group
-        value={GlobalRegistry.getDesignerLanguage()}
-        optionType="button"
-        options={[
-          { label: 'English', value: 'en-us' },
-          { label: '简体中文', value: 'zh-cn' },
-        ]}
-        onChange={(e) => {
-          GlobalRegistry.setDesignerLanguage(e.target.value)
-        }}
-      />
-      <Button href="https://github.com/alibaba/formily" target="_blank">
-        <GithubOutlined />
-        Github
-      </Button>
-      <Button
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Save</TextWidget>
-      </Button>
-      <Button
-        type="primary"
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Publish</TextWidget>
-      </Button>
-    </Space>
-  )
-})
diff --git a/designable/antd/playground/widgets/LogoWidget.tsx b/designable/antd/playground/widgets/LogoWidget.tsx
deleted file mode 100644
index a6b86de416c..00000000000
--- a/designable/antd/playground/widgets/LogoWidget.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { useTheme } from '@designable/react'
-
-const logo = {
-  dark: '//img.alicdn.com/imgextra/i2/O1CN01NTUDi81fHLQvZCPnc_!!6000000003981-55-tps-1141-150.svg',
-  light:
-    '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-}
-
-export const LogoWidget: React.FC = () => {
-  const url = logo[useTheme()]
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
-      <img
-        src={url}
-        style={{ margin: '12px 8px', height: 18, width: 'auto' }}
-      />
-    </div>
-  )
-}
diff --git a/designable/antd/playground/widgets/MarkupSchemaWidget.tsx b/designable/antd/playground/widgets/MarkupSchemaWidget.tsx
deleted file mode 100644
index 0331628d258..00000000000
--- a/designable/antd/playground/widgets/MarkupSchemaWidget.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@designable/core'
-import { MonacoInput } from '@designable/react-settings-form'
-import { isEmpty, isPlainObj } from '@formily/shared'
-
-export interface IMarkupSchemaWidgetProps {
-  tree: TreeNode
-}
-
-const transformToMarkupSchemaCode = (tree: TreeNode) => {
-  const printAttribute = (node: TreeNode) => {
-    if (!node) return ''
-    return `${Object.keys(node.props || {})
-      .map((key) => {
-        if (
-          key === '_designableId' ||
-          key === '_isJSONSchemaObject' ||
-          key === 'version' ||
-          key === 'type'
-        )
-          return ''
-        const value = node.props[key]
-        if (isPlainObj(value) && isEmpty(value)) return ''
-        if (typeof value === 'string') return `${key}="${value}"`
-        return `${key}={${JSON.stringify(value)}}`
-      })
-      .join(' ')}`
-  }
-  const printChildren = (node: TreeNode) => {
-    if (!node) return ''
-    return node.children
-      .map((child) => {
-        return printNode(child)
-      })
-      .join('')
-  }
-  const printTag = (node: TreeNode) => {
-    if (node.props.type === 'string') return 'SchemaField.String'
-    if (node.props.type === 'number') return 'SchemaField.Number'
-    if (node.props.type === 'boolean') return 'SchemaField.Boolean'
-    if (node.props.type === 'date') return 'SchemaField.Date'
-    if (node.props.type === 'datetime') return 'SchemaField.DateTime'
-    if (node.props.type === 'array') return 'SchemaField.Array'
-    if (node.props.type === 'object') return 'SchemaField.Object'
-    if (node.props.type === 'void') return 'SchemaField.Void'
-    return 'SchemaField.Markup'
-  }
-  const printNode = (node: TreeNode) => {
-    if (!node) return ''
-    return `<${printTag(node)} ${printAttribute(node)} ${
-      node.children.length
-        ? `>${printChildren(node)}</${printTag(node)}>`
-        : '/>'
-    }`
-  }
-  const root = tree.find((child) => {
-    return child.componentName === 'Root'
-  })
-  return `import React, { useMemo } from 'react'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from '@formily/antd'
-import { Card, Slider, Rate } from 'antd'
-
-const Text: React.FC<{
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, content)
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    Text,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Slider,
-    Rate,
-  },
-})
-
-export default ()=>{
-  const form = useMemo(()=>createForm(),[])
-
-  return <Form form={form} ${printAttribute(root)}>
-    <SchemaField>
-      ${printChildren(root)}
-    </SchemaField>
-  </Form>
-}
-  
-`
-}
-
-export const MarkupSchemaWidget: React.FC<IMarkupSchemaWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      options={{ readOnly: true }}
-      value={transformToMarkupSchemaCode(props.tree)}
-      language="typescript"
-    />
-  )
-}
diff --git a/designable/antd/playground/widgets/PreviewWidget.tsx b/designable/antd/playground/widgets/PreviewWidget.tsx
deleted file mode 100644
index 763be4ae44c..00000000000
--- a/designable/antd/playground/widgets/PreviewWidget.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useMemo } from 'react'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from '@formily/antd'
-import { Card, Slider, Rate } from 'antd'
-import { TreeNode } from '@designable/core'
-import { transformToSchema } from '@designable/formily'
-
-const Text: React.FC<{
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, content)
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    Text,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Slider,
-    Rate,
-  },
-})
-
-export interface IPreviewWidgetProps {
-  tree: TreeNode
-}
-
-export const PreviewWidget: React.FC<IPreviewWidgetProps> = (props) => {
-  const form = useMemo(() => createForm(), [])
-  const { form: formProps, schema } = transformToSchema(props.tree, {
-    designableFormName: 'Root',
-    designableFieldName: 'DesignableField',
-  })
-  return (
-    <Form {...formProps} form={form}>
-      <SchemaField schema={schema} />
-    </Form>
-  )
-}
diff --git a/designable/antd/playground/widgets/SchemaEditorWidget.tsx b/designable/antd/playground/widgets/SchemaEditorWidget.tsx
deleted file mode 100644
index 805703bd94d..00000000000
--- a/designable/antd/playground/widgets/SchemaEditorWidget.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { transformToSchema, transformToTreeNode } from '@designable/formily'
-import { TreeNode, ITreeNode } from '@designable/core'
-import { MonacoInput } from '@designable/react-settings-form'
-
-export interface ISchemaEditorWidgetProps {
-  tree: TreeNode
-  onChange?: (tree: ITreeNode) => void
-}
-
-const Parser = {
-  designableFormName: 'Root',
-  designableFieldName: 'DesignableField',
-}
-
-export const SchemaEditorWidget: React.FC<ISchemaEditorWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      value={JSON.stringify(transformToSchema(props.tree, Parser), null, 2)}
-      onChange={(value) => {
-        props.onChange?.(transformToTreeNode(JSON.parse(value), Parser))
-      }}
-      language="json"
-    />
-  )
-}
diff --git a/designable/antd/playground/widgets/index.ts b/designable/antd/playground/widgets/index.ts
deleted file mode 100644
index 1ca916232fc..00000000000
--- a/designable/antd/playground/widgets/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './LogoWidget'
-export * from './ActionsWidget'
-export * from './PreviewWidget'
-export * from './SchemaEditorWidget'
-export * from './MarkupSchemaWidget'
diff --git a/designable/antd/rollup.config.js b/designable/antd/rollup.config.js
deleted file mode 100644
index 859c8d570c1..00000000000
--- a/designable/antd/rollup.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import baseConfig, {
-  removeImportStyleFromInputFilePlugin,
-} from '../../scripts/rollup.base.js'
-import postcss from 'rollup-plugin-postcss'
-import NpmImport from 'less-plugin-npm-import'
-
-export default baseConfig(
-  'formily.designable.antd',
-  'Formily.Designable.Antd',
-  removeImportStyleFromInputFilePlugin(),
-  postcss({
-    extract: true,
-    minimize: true,
-    // extensions: ['.css', '.less', '.sass'],
-    use: {
-      less: {
-        plugins: [new NpmImport({ prefix: '~' })],
-        javascriptEnabled: true,
-      },
-      sass: {},
-      stylus: {},
-    },
-  })
-)
diff --git a/designable/antd/src/components/DesignableArrayCards/index.tsx b/designable/antd/src/components/DesignableArrayCards/index.tsx
deleted file mode 100644
index dc7ab12a71b..00000000000
--- a/designable/antd/src/components/DesignableArrayCards/index.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import React, { Fragment } from 'react'
-import { Card, CardProps } from 'antd'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { useTreeNode, TreeNodeWidget, useNodeIdProps } from '@designable/react'
-import { ArrayBase } from '@formily/antd'
-import { observer } from '@formily/react'
-import { LoadTemplate } from '../LoadTemplate'
-import cls from 'classnames'
-import { useDropTemplate } from '../../hooks'
-import {
-  hasNodeByComponentPath,
-  queryNodesByComponentPath,
-  createEnsureTypeItemsNode,
-  findNodeByComponentPath,
-  createNodeId,
-} from '../../shared'
-import './styles.less'
-
-const ensureVoidItemsNode = createEnsureTypeItemsNode('void')
-
-const isArrayCardsOperation = (name: string) =>
-  name === 'ArrayCards.Remove' ||
-  name === 'ArrayCards.MoveDown' ||
-  name === 'ArrayCards.MoveUp'
-
-export const DesignableArrayCards: React.FC<CardProps> = observer((props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  const designer = useDropTemplate('ArrayCards', (source) => {
-    const indexNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'ArrayCards.Index',
-      },
-    })
-    const additionNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.Addition',
-      },
-    })
-    const removeNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.Remove',
-      },
-    })
-    const moveDownNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.MoveDown',
-      },
-    })
-    const moveUpNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.MoveUp',
-      },
-    })
-
-    const voidNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-      },
-      children: [indexNode, ...source, removeNode, moveDownNode, moveUpNode],
-    })
-    return [voidNode, additionNode]
-  })
-  const renderCard = () => {
-    if (node.children.length === 0) return <Droppable />
-    const additions = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      'ArrayCards.Addition',
-    ])
-    const indexes = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      'ArrayCards.Index',
-    ])
-    const operations = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      isArrayCardsOperation,
-    ])
-    const children = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      (name) => name.indexOf('ArrayCards.') === -1,
-    ])
-    return (
-      <ArrayBase disabled>
-        <ArrayBase.Item index={0}>
-          <Card
-            {...props}
-            title={
-              <span>
-                {indexes.map((node, key) => (
-                  <TreeNodeWidget key={key} node={node} />
-                ))}
-                {props.title}
-              </span>
-            }
-            className={cls('ant-formily-array-cards-item', props.className)}
-            extra={
-              <Fragment>
-                {operations.map((node) => (
-                  <TreeNodeWidget key={node.id} node={node} />
-                ))}
-                {props.extra}
-              </Fragment>
-            }
-          >
-            <div {...createNodeId(designer, ensureVoidItemsNode(node).id)}>
-              {children.length ? (
-                children.map((node) => (
-                  <TreeNodeWidget key={node.id} node={node} />
-                ))
-              ) : (
-                <Droppable />
-              )}
-            </div>
-          </Card>
-        </ArrayBase.Item>
-        {additions.map((node) => (
-          <TreeNodeWidget key={node.id} node={node} />
-        ))}
-      </ArrayBase>
-    )
-  }
-
-  return (
-    <div {...nodeId} className="dn-array-cards">
-      {renderCard()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addIndex',
-            onClick: () => {
-              if (
-                hasNodeByComponentPath(node, [
-                  'ArrayCards',
-                  '*',
-                  'ArrayCards.Index',
-                ])
-              )
-                return
-              const indexNode = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'ArrayCards.Index',
-                },
-              })
-              ensureVoidItemsNode(node).append(indexNode)
-            },
-          },
-
-          {
-            title: 'Common.addOperation',
-            onClick: () => {
-              const oldAdditionNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                'ArrayCards.Addition',
-              ])
-              if (!oldAdditionNode) {
-                const additionNode = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    title: 'Addition',
-                    'x-component': 'ArrayCards.Addition',
-                  },
-                })
-                ensureVoidItemsNode(node).insertAfter(additionNode)
-              }
-              const oldRemoveNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.Remove',
-              ])
-              const oldMoveDownNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.MoveDown',
-              ])
-              const oldMoveUpNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.MoveUp',
-              ])
-              if (!oldRemoveNode) {
-                ensureVoidItemsNode(node).append(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.Remove',
-                    },
-                  })
-                )
-              }
-              if (!oldMoveDownNode) {
-                ensureVoidItemsNode(node).append(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.MoveDown',
-                    },
-                  })
-                )
-              }
-              if (!oldMoveUpNode) {
-                ensureVoidItemsNode(node).append(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.MoveUp',
-                    },
-                  })
-                )
-              }
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-ArrayBase.mixin(DesignableArrayCards)
diff --git a/designable/antd/src/components/DesignableArrayCards/styles.less b/designable/antd/src/components/DesignableArrayCards/styles.less
deleted file mode 100644
index 67e6789cd21..00000000000
--- a/designable/antd/src/components/DesignableArrayCards/styles.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-array-cards {
-  background-color: @background-color-light;
-}
diff --git a/designable/antd/src/components/DesignableArrayCollapse/index.tsx b/designable/antd/src/components/DesignableArrayCollapse/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/antd/src/components/DesignableArrayItems/index.tsx b/designable/antd/src/components/DesignableArrayItems/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/antd/src/components/DesignableArrayTable/index.tsx b/designable/antd/src/components/DesignableArrayTable/index.tsx
deleted file mode 100644
index 78fd2b447e6..00000000000
--- a/designable/antd/src/components/DesignableArrayTable/index.tsx
+++ /dev/null
@@ -1,412 +0,0 @@
-import React from 'react'
-import { Table, TableProps } from 'antd'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { useTreeNode, TreeNodeWidget, useNodeIdProps } from '@designable/react'
-import { ArrayBase } from '@formily/antd'
-import { observer } from '@formily/react'
-import { LoadTemplate } from '../LoadTemplate'
-import cls from 'classnames'
-import {
-  createNodeId,
-  queryNodesByComponentPath,
-  hasNodeByComponentPath,
-  findNodeByComponentPath,
-  createEnsureTypeItemsNode,
-} from '../../shared'
-import { useDropTemplate } from '../../hooks'
-import './styles.less'
-
-const ensureObjectItemsNode = createEnsureTypeItemsNode('object')
-
-export const DesignableArrayTable: React.FC<TableProps<any>> = observer(
-  (props) => {
-    const node = useTreeNode()
-    const nodeId = useNodeIdProps()
-    const designer = useDropTemplate('ArrayTable', (source) => {
-      const sortHandleNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'ArrayTable.Column',
-          'x-component-props': {
-            title: `Title`,
-          },
-        },
-        children: [
-          {
-            componentName: 'DesignableField',
-            props: {
-              type: 'void',
-              'x-component': 'ArrayTable.SortHandle',
-            },
-          },
-        ],
-      })
-      const indexNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'ArrayTable.Column',
-          'x-component-props': {
-            title: `Title`,
-          },
-        },
-        children: [
-          {
-            componentName: 'DesignableField',
-            props: {
-              type: 'void',
-              'x-component': 'ArrayTable.Index',
-            },
-          },
-        ],
-      })
-      const columnNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'ArrayTable.Column',
-          'x-component-props': {
-            title: `Title`,
-          },
-        },
-        children: source.map((node) => {
-          node.props.title = undefined
-          return node
-        }),
-      })
-
-      const operationNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'ArrayTable.Column',
-          'x-component-props': {
-            title: `Title`,
-          },
-        },
-        children: [
-          {
-            componentName: 'DesignableField',
-            props: {
-              type: 'void',
-              'x-component': 'ArrayTable.Remove',
-            },
-          },
-          {
-            componentName: 'DesignableField',
-            props: {
-              type: 'void',
-              'x-component': 'ArrayTable.MoveDown',
-            },
-          },
-          {
-            componentName: 'DesignableField',
-            props: {
-              type: 'void',
-              'x-component': 'ArrayTable.MoveUp',
-            },
-          },
-        ],
-      })
-      const objectNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'object',
-        },
-        children: [sortHandleNode, indexNode, columnNode, operationNode],
-      })
-      const additionNode = new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          title: 'Addition',
-          'x-component': 'ArrayTable.Addition',
-        },
-      })
-      return [objectNode, additionNode]
-    })
-    const columns = queryNodesByComponentPath(node, [
-      'ArrayTable',
-      '*',
-      'ArrayTable.Column',
-    ])
-    const additions = queryNodesByComponentPath(node, [
-      'ArrayTable',
-      'ArrayTable.Addition',
-    ])
-    const defaultRowKey = () => {
-      return node.id
-    }
-    const createColumnId = (props: any) => {
-      return createNodeId(
-        designer,
-        props.className.match(/data-id\:([^\s]+)/)?.[1]
-      )
-    }
-
-    const renderTable = () => {
-      if (node.children.length === 0) return <Droppable />
-      return (
-        <ArrayBase disabled>
-          <Table
-            size="small"
-            bordered
-            {...props}
-            scroll={{ x: '100%' }}
-            className={cls('ant-formily-array-table', props.className)}
-            style={{ marginBottom: 10, ...props.style }}
-            rowKey={defaultRowKey}
-            dataSource={[{ id: '1' }]}
-            pagination={false}
-            components={{
-              header: {
-                cell: (props: any) => {
-                  return (
-                    <th {...props} {...createColumnId(props)}>
-                      {props.children}
-                    </th>
-                  )
-                },
-              },
-              body: {
-                cell: (props: any) => {
-                  return (
-                    <td {...props} {...createColumnId(props)}>
-                      {props.children}
-                    </td>
-                  )
-                },
-              },
-            }}
-          >
-            {columns.map((node, key) => {
-              const children = node.children.map((child) => {
-                return <TreeNodeWidget node={child} key={child.id} />
-              })
-              return (
-                <Table.Column
-                  {...node.props['x-component-props']}
-                  dataIndex={node.id}
-                  className={`data-id:${node.id}`}
-                  key={key}
-                  render={(value, record, key) => {
-                    return (
-                      <ArrayBase.Item key={key} index={key}>
-                        {children.length > 0 ? children : 'Droppable'}
-                      </ArrayBase.Item>
-                    )
-                  }}
-                />
-              )
-            })}
-            {columns.length === 0 && (
-              <Table.Column render={() => <Droppable />} />
-            )}
-          </Table>
-          {additions.map((child) => {
-            return <TreeNodeWidget node={child} key={child.id} />
-          })}
-        </ArrayBase>
-      )
-    }
-
-    useDropTemplate('ArrayTable.Column', (source) => {
-      return source.map((node) => {
-        node.props.title = undefined
-        return node
-      })
-    })
-
-    return (
-      <div {...nodeId} className="dn-array-table">
-        {renderTable()}
-        <LoadTemplate
-          actions={[
-            {
-              title: 'Common.addTableSortHandle',
-              onClick: () => {
-                if (
-                  hasNodeByComponentPath(node, [
-                    'ArrayTable',
-                    '*',
-                    'ArrayTable.Column',
-                    'ArrayTable.SortHandle',
-                  ])
-                )
-                  return
-                const tableColumn = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Column',
-                    'x-component-props': {
-                      title: `Title`,
-                    },
-                  },
-                  children: [
-                    {
-                      componentName: 'DesignableField',
-                      props: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.SortHandle',
-                      },
-                    },
-                  ],
-                })
-                ensureObjectItemsNode(node).prepend(tableColumn)
-              },
-            },
-            {
-              title: 'Common.addIndex',
-              onClick: () => {
-                if (
-                  hasNodeByComponentPath(node, [
-                    'ArrayTable',
-                    '*',
-                    'ArrayTable.Column',
-                    'ArrayTable.Index',
-                  ])
-                )
-                  return
-                const tableColumn = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Column',
-                    'x-component-props': {
-                      title: `Title`,
-                    },
-                  },
-                  children: [
-                    {
-                      componentName: 'DesignableField',
-                      props: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.Index',
-                      },
-                    },
-                  ],
-                })
-                const sortNode = findNodeByComponentPath(node, [
-                  'ArrayTable',
-                  '*',
-                  'ArrayTable.Column',
-                  'ArrayTable.SortHandle',
-                ])
-                if (sortNode) {
-                  sortNode.parent.insertAfter(tableColumn)
-                } else {
-                  ensureObjectItemsNode(node).prepend(tableColumn)
-                }
-              },
-            },
-            {
-              title: 'Common.addTableColumn',
-              onClick: () => {
-                const operationNode = findNodeByComponentPath(node, [
-                  'ArrayTable',
-                  '*',
-                  'ArrayTable.Column',
-                  (name) => {
-                    return (
-                      name === 'ArrayTable.Remove' ||
-                      name === 'ArrayTable.MoveDown' ||
-                      name === 'ArrayTable.MoveUp'
-                    )
-                  },
-                ])
-                const tableColumn = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Column',
-                    'x-component-props': {
-                      title: `Title`,
-                    },
-                  },
-                })
-                if (operationNode) {
-                  operationNode.parent.insertBefore(tableColumn)
-                } else {
-                  ensureObjectItemsNode(node).append(tableColumn)
-                }
-              },
-            },
-            {
-              title: 'Common.addOperation',
-              onClick: () => {
-                const oldOperationNode = findNodeByComponentPath(node, [
-                  'ArrayTable',
-                  '*',
-                  'ArrayTable.Column',
-                  (name) => {
-                    return (
-                      name === 'ArrayTable.Remove' ||
-                      name === 'ArrayTable.MoveDown' ||
-                      name === 'ArrayTable.MoveUp'
-                    )
-                  },
-                ])
-                const oldAdditionNode = findNodeByComponentPath(node, [
-                  'ArrayTable',
-                  'ArrayTable.Addition',
-                ])
-                if (!oldOperationNode) {
-                  const operationNode = new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayTable.Column',
-                      'x-component-props': {
-                        title: `Title`,
-                      },
-                    },
-                    children: [
-                      {
-                        componentName: 'DesignableField',
-                        props: {
-                          type: 'void',
-                          'x-component': 'ArrayTable.Remove',
-                        },
-                      },
-                      {
-                        componentName: 'DesignableField',
-                        props: {
-                          type: 'void',
-                          'x-component': 'ArrayTable.MoveDown',
-                        },
-                      },
-                      {
-                        componentName: 'DesignableField',
-                        props: {
-                          type: 'void',
-                          'x-component': 'ArrayTable.MoveUp',
-                        },
-                      },
-                    ],
-                  })
-                  ensureObjectItemsNode(node).append(operationNode)
-                }
-                if (!oldAdditionNode) {
-                  const additionNode = new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      title: 'Addition',
-                      'x-component': 'ArrayTable.Addition',
-                    },
-                  })
-                  ensureObjectItemsNode(node).insertAfter(additionNode)
-                }
-              },
-            },
-          ]}
-        />
-      </div>
-    )
-  }
-)
-
-ArrayBase.mixin(DesignableArrayTable)
diff --git a/designable/antd/src/components/DesignableArrayTable/styles.less b/designable/antd/src/components/DesignableArrayTable/styles.less
deleted file mode 100644
index a45490e2904..00000000000
--- a/designable/antd/src/components/DesignableArrayTable/styles.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-array-table {
-  background-color: @background-color-light;
-}
diff --git a/designable/antd/src/components/DesignableArrayTabs/index.tsx b/designable/antd/src/components/DesignableArrayTabs/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/antd/src/components/DesignableContainer/index.tsx b/designable/antd/src/components/DesignableContainer/index.tsx
deleted file mode 100644
index a892319c8c7..00000000000
--- a/designable/antd/src/components/DesignableContainer/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { useNodeIdProps } from '@designable/react'
-import { Droppable } from '../Droppable'
-import './styles.less'
-
-export const createDesignableContainer = (
-  Target: React.JSXElementConstructor<any>
-) => {
-  return (props: any) => {
-    const nodeId = useNodeIdProps()
-    if (props.children) {
-      return (
-        <div {...nodeId}>
-          <Target {...props}>{props.children}</Target>
-        </div>
-      )
-    }
-    return <Droppable {...props} />
-  }
-}
diff --git a/designable/antd/src/components/DesignableContainer/styles.less b/designable/antd/src/components/DesignableContainer/styles.less
deleted file mode 100644
index e0f5c30388e..00000000000
--- a/designable/antd/src/components/DesignableContainer/styles.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-form-container {
-  margin: 0 !important;
-  padding: 20px;
-  border: 1px solid @border-color-split;
-}
diff --git a/designable/antd/src/components/DesignableField/index.tsx b/designable/antd/src/components/DesignableField/index.tsx
deleted file mode 100644
index dd078bee123..00000000000
--- a/designable/antd/src/components/DesignableField/index.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-import React from 'react'
-import { FormPath } from '@formily/core'
-import { GlobalRegistry, TreeNode } from '@designable/core'
-import { useDesigner, useTreeNode } from '@designable/react'
-import {
-  ArrayField,
-  Field,
-  ObjectField,
-  VoidField,
-  observer,
-  Schema,
-  ISchema,
-} from '@formily/react'
-import {
-  DataSourceSetter,
-  ReactionsSetter,
-  ValidatorSetter,
-} from '@formily/designable-setters'
-import { FormTab, FormItem } from '@formily/antd'
-import { isArr, isStr, each, reduce } from '@formily/shared'
-import { FormItemSwitcher } from '../FormItemSwitcher'
-import { DesignableObject } from '../DesignableObject'
-import { createOptions } from './options'
-import { IDesignableFieldFactoryProps } from './types'
-import { includesComponent } from '../../shared'
-import * as defaultSchemas from '../../schemas'
-
-Schema.silent()
-
-const SchemaStateMap = {
-  title: 'title',
-  description: 'description',
-  default: 'value',
-  enum: 'dataSource',
-  readOnly: 'readOnly',
-  writeOnly: 'editable',
-  required: 'required',
-  'x-content': 'content',
-  'x-value': 'value',
-  'x-editable': 'editable',
-  'x-disabled': 'disabled',
-  'x-read-pretty': 'readPretty',
-  'x-read-only': 'readOnly',
-  'x-visible': 'visible',
-  'x-hidden': 'hidden',
-  'x-display': 'display',
-  'x-pattern': 'pattern',
-}
-
-const NeedShownExpression = {
-  title: true,
-  description: true,
-  default: true,
-  'x-content': true,
-  'x-value': true,
-}
-
-const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val)
-
-const filterExpression = (val: any) => {
-  if (typeof val === 'object') {
-    const isArray = isArr(val)
-    const results = reduce(
-      val,
-      (buf: any, value, key) => {
-        if (isExpression(value)) {
-          return buf
-        } else {
-          const results = filterExpression(value)
-          if (results === undefined || results === null) return buf
-          if (isArray) {
-            return buf.concat([results])
-          }
-          buf[key] = results
-          return buf
-        }
-      },
-      isArray ? [] : {}
-    )
-    return results
-  }
-  if (isExpression(val)) {
-    return
-  }
-  return val
-}
-
-const toDesignableFieldProps = (
-  schema: ISchema,
-  components: any,
-  nodeIdAttrName: string,
-  id: string
-) => {
-  const results: any = {}
-  each(SchemaStateMap, (fieldKey, schemaKey) => {
-    const value = schema[schemaKey]
-    if (isExpression(value)) {
-      if (!NeedShownExpression[schemaKey]) return
-      if (value) {
-        results[fieldKey] = value
-        return
-      }
-    } else if (value) {
-      results[fieldKey] = filterExpression(value)
-    }
-  })
-  if (!components['FormItem']) {
-    components['FormItem'] = FormItem
-  }
-  const decorator =
-    schema['x-decorator'] && FormPath.getIn(components, schema['x-decorator'])
-  const component =
-    schema['x-component'] && FormPath.getIn(components, schema['x-component'])
-  const decoratorProps = schema['x-decorator-props'] || {}
-  const componentProps = schema['x-component-props'] || {}
-
-  if (decorator) {
-    results.decorator = [decorator, { ...decoratorProps }]
-  }
-  if (component) {
-    results.component = [component, { ...componentProps }]
-  }
-  if (decorator) {
-    FormPath.setIn(results['decorator'][1], nodeIdAttrName, id)
-  } else if (component) {
-    FormPath.setIn(results['component'][1], nodeIdAttrName, id)
-  }
-  results.title = results.title && (
-    <span data-content-editable="title">{results.title}</span>
-  )
-  results.description = results.description && (
-    <span data-content-editable="description">{results.description}</span>
-  )
-  return results
-}
-
-export const createDesignableField = (
-  options: IDesignableFieldFactoryProps
-) => {
-  const realOptions = createOptions(options)
-
-  const tabs = {}
-
-  const getFieldPropsSchema = (node: TreeNode): ISchema => {
-    const decorator = node.props['x-decorator']
-    const component = node.props['x-component']
-    const decoratorSchema =
-      decorator &&
-      (FormPath.getIn(realOptions.componentsPropsSchema, decorator) ||
-        FormPath.getIn(defaultSchemas, decorator))
-    const componentSchema =
-      component &&
-      (FormPath.getIn(realOptions.componentsPropsSchema, component) ||
-        FormPath.getIn(defaultSchemas, component))
-    const TabSchema = (key: string, schema: ISchema) => {
-      tabs[key] = tabs[key] || FormTab.createFormTab()
-      return {
-        type: 'object',
-        properties: {
-          propsTab: {
-            type: 'void',
-            'x-component': 'FormTab',
-            'x-component-props': {
-              formTab: tabs[key],
-              style: {
-                overflow: 'visible',
-              },
-            },
-            properties: {
-              propsPane: {
-                type: 'void',
-                'x-component': 'FormTab.TabPane',
-                'x-component-props': {
-                  tab: GlobalRegistry.getDesignerMessage(
-                    `settings.${key}.tab_property`
-                  ),
-                },
-                properties: schema.properties,
-              },
-              stylePane: {
-                type: 'void',
-                'x-component': 'FormTab.TabPane',
-                'x-component-props': {
-                  tab: GlobalRegistry.getDesignerMessage(
-                    `settings.${key}.tab_style`
-                  ),
-                },
-                properties: {
-                  style: defaultSchemas.CSSStyle,
-                },
-              },
-            },
-          },
-        },
-      }
-    }
-    const base = {
-      type: 'object',
-      properties: {
-        name: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-          'x-component-props': {
-            defaultValue: node.id,
-          },
-          'x-index': 0,
-        },
-        title: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-          'x-index': 1,
-        },
-        description: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input.TextArea',
-          'x-index': 2,
-        },
-        'x-display': {
-          type: 'string',
-          enum: ['visible', 'hidden', 'none', ''],
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-component-props': {
-            defaultValue: 'visible',
-          },
-          'x-index': 3,
-        },
-        'x-pattern': {
-          type: 'string',
-          enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-component-props': {
-            defaultValue: 'editable',
-          },
-          'x-index': 4,
-        },
-        'x-component-props':
-          componentSchema && TabSchema('x-component-props', componentSchema),
-        'x-decorator-props':
-          decoratorSchema && TabSchema('x-decorator-props', decoratorSchema),
-      },
-    }
-
-    if (node.props.type === 'void') {
-      if (!includesComponent(node, realOptions.dropReactionComponents)) {
-        Object.assign(base.properties, {
-          'x-reactions': {
-            'x-decorator': 'FormItem',
-            'x-index': 5,
-            'x-component': ReactionsSetter,
-          },
-        })
-      }
-      if (!includesComponent(node, realOptions.dropFormItemComponents)) {
-        Object.assign(base.properties, {
-          'x-decorator': {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': FormItemSwitcher,
-            'x-index': 10,
-            'x-reactions': {
-              target: '*(title,description)',
-              fulfill: {
-                state: {
-                  hidden: '{{$self.value !== "FormItem"}}',
-                },
-              },
-            },
-          },
-        })
-      } else {
-        delete base.properties.title
-        delete base.properties.description
-      }
-    } else {
-      if (!includesComponent(node, realOptions.dropReactionComponents)) {
-        Object.assign(base.properties, {
-          'x-reactions': {
-            'x-decorator': 'FormItem',
-            'x-index': 7,
-            'x-component': ReactionsSetter,
-          },
-        })
-      }
-      Object.assign(base.properties, {
-        default: {
-          'x-decorator': 'FormItem',
-          'x-component': 'ValueInput',
-          'x-index': 5,
-        },
-        enum: {
-          'x-decorator': 'FormItem',
-          'x-component': DataSourceSetter,
-          'x-index': 6,
-        },
-        'x-validator': {
-          type: 'array',
-          'x-component': ValidatorSetter,
-          'x-index': 8,
-        },
-        required: {
-          type: 'boolean',
-          'x-decorator': 'FormItem',
-          'x-component': 'Switch',
-          'x-index': 9,
-        },
-      })
-    }
-
-    base['$namespace'] = `namespace.${component}`
-
-    return base
-  }
-
-  const calculateChildrenRestricts = (target: TreeNode, source: TreeNode[]) => {
-    const targetComponent = target.props['x-component']
-    const restrictChildrenComponents =
-      realOptions.restrictChildrenComponents?.[targetComponent]
-    if (restrictChildrenComponents?.length) {
-      if (
-        source.every((node) =>
-          includesComponent(node, restrictChildrenComponents, target)
-        )
-      ) {
-        return true
-      }
-      return false
-    }
-    return true
-  }
-
-  const calculateSiblingsRestricts = (target: TreeNode, source: TreeNode[]) => {
-    const targetComponent = target.props['x-component']
-    const restrictSiblingComponents =
-      realOptions.restrictSiblingComponents?.[targetComponent]
-    if (restrictSiblingComponents?.length) {
-      if (
-        source.every((node) =>
-          includesComponent(node, restrictSiblingComponents, target)
-        )
-      ) {
-        return true
-      }
-      return false
-    }
-    return true
-  }
-
-  if (!realOptions.registryName) throw new Error('Can not found registryName')
-
-  GlobalRegistry.registerDesignerProps({
-    [realOptions.registryName]: (node) => {
-      const componentName = node.props?.['x-component']
-      const message = GlobalRegistry.getDesignerMessage(
-        `components.${componentName}`
-      )
-      const isObjectNode = node.props.type === 'object'
-      const isArrayNode = node.props.type === 'array'
-      const isVoidNode = node.props.type === 'void'
-      const title = typeof message === 'string' ? message : message?.title
-      const nodeTitle =
-        title ||
-        (isObjectNode
-          ? GlobalRegistry.getDesignerMessage('components.Object')
-          : isVoidNode
-          ? GlobalRegistry.getDesignerMessage('components.Void')
-          : '')
-      const sourceIcon = realOptions.componentsSourceIcon?.[componentName]
-      return {
-        title: nodeTitle,
-        sourceIcon: isObjectNode ? 'ObjectSource' : sourceIcon,
-        icon: realOptions.componentsIcon?.[componentName],
-        draggable: true,
-        droppable: isObjectNode || isArrayNode || isVoidNode,
-        selfRenderChildren:
-          isArrayNode ||
-          includesComponent(node, realOptions.selfRenderChildrenComponents),
-        inlineLayout: includesComponent(
-          node,
-          realOptions.inlineLayoutComponents
-        ),
-        inlineChildrenLayout: includesComponent(
-          node,
-          realOptions.inlineChildrenLayoutComponents
-        ),
-        allowSiblings(target, source) {
-          return calculateSiblingsRestricts(target, source)
-        },
-        allowAppend(target, source) {
-          return (
-            (target.props.type === 'void' ||
-              target.props.type === 'array' ||
-              target.props.type === 'object') &&
-            calculateChildrenRestricts(target, source)
-          )
-        },
-        propsSchema: getFieldPropsSchema(node),
-      }
-    },
-  })
-
-  const DesignableField: React.FC<ISchema> = observer((props) => {
-    const designer = useDesigner()
-    const node = useTreeNode()
-    if (!node) return null
-
-    const fieldProps = toDesignableFieldProps(
-      props,
-      realOptions.components,
-      designer.props.nodeIdAttrName,
-      node.id
-    )
-    if (props.type === 'object') {
-      return (
-        <DesignableObject>
-          <ObjectField {...fieldProps} name={node.id}>
-            {props.children}
-          </ObjectField>
-        </DesignableObject>
-      )
-    } else if (props.type === 'array') {
-      return <ArrayField {...fieldProps} name={node.id} />
-    } else if (node.props.type === 'void') {
-      return (
-        <VoidField {...fieldProps} name={node.id}>
-          {props.children}
-        </VoidField>
-      )
-    }
-    return <Field {...fieldProps} name={node.id} />
-  })
-
-  return DesignableField
-}
diff --git a/designable/antd/src/components/DesignableField/options.ts b/designable/antd/src/components/DesignableField/options.ts
deleted file mode 100644
index 7cbf0ed07c4..00000000000
--- a/designable/antd/src/components/DesignableField/options.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { IDesignableFieldFactoryProps } from './types'
-import {
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-} from '@formily/antd'
-import { Card, Slider, Rate } from 'antd'
-import { createDesignableContainer } from '../DesignableContainer'
-import { DesignableFormTab } from '../DesignableFormTab'
-import { DesignableFormCollapse } from '../DesignableFormCollapse'
-import { DesignableArrayTable } from '../DesignableArrayTable'
-import { DesignableArrayCards } from '../DesignableArrayCards'
-import { DesignableText } from '../DesignableText'
-import { TreeNode } from '@designable/core'
-
-const isChildrenComponents =
-  (parentName: string, names?: string[]) => (name: string) =>
-    Array.isArray(names) && names.length > 0
-      ? names.some((key) => {
-          return `${parentName}.${key}` === name
-        })
-      : name.indexOf(`${parentName}.`) > -1
-
-const InlineArrayChildren = [
-  'Column',
-  'Index',
-  'SortHandle',
-  'Remove',
-  'MoveDown',
-  'MoveUp',
-]
-
-const isFormTabChildren = isChildrenComponents('FormTab')
-const isFormCollapseChildren = isChildrenComponents('FormCollapse')
-const isArrayTableInlineChildren = isChildrenComponents(
-  'ArrayTable',
-  InlineArrayChildren
-)
-const isArrayCardsInlineChildren = isChildrenComponents(
-  'ArrayCards',
-  InlineArrayChildren
-)
-const isObjectNode = (name: string, node: TreeNode) => {
-  return node.props['type'] === 'object'
-}
-
-const isNotArrayColumn = (name: string, node: TreeNode) => {
-  return node.props['x-component'] !== 'ArrayTable.Column'
-}
-
-const allowDropWithEmpty = (name: string, node: TreeNode, target: TreeNode) => {
-  if (target) return target.children.length === 0
-  return false
-}
-
-const noChildren = () => false
-
-export const createOptions = (
-  options: IDesignableFieldFactoryProps
-): IDesignableFieldFactoryProps => {
-  return {
-    ...options,
-    dropFormItemComponents: [
-      ...(options.dropFormItemComponents || []),
-      isFormTabChildren,
-      isFormCollapseChildren,
-    ],
-    dropReactionComponents: [
-      ...(options.dropReactionComponents || []),
-      isFormTabChildren,
-      isFormCollapseChildren,
-    ],
-    selfRenderChildrenComponents: [
-      ...(options.selfRenderChildrenComponents || []),
-      'FormTab',
-      'FormCollapse',
-    ],
-    inlineChildrenLayoutComponents: [
-      ...(options.inlineChildrenLayoutComponents || []),
-      'FormItem',
-      'FormGrid',
-      'Space',
-    ],
-    inlineLayoutComponents: [
-      ...(options.inlineLayoutComponents || []),
-      isArrayTableInlineChildren,
-      isArrayCardsInlineChildren,
-    ],
-    restrictChildrenComponents: {
-      FormTab: [allowDropWithEmpty, 'FormTab.TabPane'],
-      FormCollapse: [allowDropWithEmpty, 'FormCollapse.CollapsePanel'],
-      ArrayTable: [allowDropWithEmpty, isObjectNode, 'ArrayTable.Addition'],
-      'ArrayTable.Column': [isNotArrayColumn],
-      Text: [noChildren],
-    },
-    restrictSiblingComponents: {
-      'FormTab.TabPane': ['FormTab.TabPane'],
-      'FormCollapse.CollapsePanel': ['FormCollapse.CollapsePanel'],
-      'ArrayTable.Column': ['ArrayTable.Column'],
-    },
-    componentsSourceIcon: {
-      ...options.componentsSourceIcon,
-      Space: 'SpaceSource',
-      FormGrid: 'GridSource',
-      FormTab: 'TabSource',
-      FormCollapse: 'CollapseSource',
-      ArrayTable: 'ArrayTableSource',
-      ArrayCards: 'ArrayCardsSource',
-      DatePicker: 'DatePickerSource',
-      'DatePicker.RangePicker': 'DateRangePickerSource',
-      'Checkbox.Group': 'CheckboxGroupSource',
-      'Radio.Group': 'RadioGroupSource',
-      Slider: 'SliderSource',
-      Rate: 'RateSource',
-      TimePicker: 'TimePickerSource',
-      'TimePicker.RangePicker': 'TimeRangePickerSource',
-      Cascader: 'CascaderSource',
-      TreeSelect: 'TreeSelectSource',
-      Select: 'SelectSource',
-      'Input.TextArea': 'TextAreaSource',
-      Input: 'InputSource',
-      NumberPicker: 'NumberPickerSource',
-      Password: 'PasswordSource',
-      Transfer: 'TransferSource',
-      Switch: 'SwitchSource',
-      Upload: 'UploadSource',
-      'Upload.Dragger': 'UploadDraggerSource',
-      Card: 'CardSource',
-      FormLayout: 'FormLayoutSource',
-      Text: 'TextSource',
-      Image: 'ImageSource',
-      Button: 'ButtonSource',
-      Video: 'MediaSource',
-    },
-    components: {
-      ...options.components,
-      Space: createDesignableContainer(Space),
-      FormGrid: createDesignableContainer(FormGrid),
-      FormLayout: createDesignableContainer(FormLayout),
-      FormTab: DesignableFormTab,
-      FormCollapse: DesignableFormCollapse,
-      ArrayTable: DesignableArrayTable,
-      ArrayCards: DesignableArrayCards,
-      Text: DesignableText,
-      FormItem,
-      DatePicker,
-      Checkbox,
-      Cascader,
-      Editable,
-      Input,
-      NumberPicker,
-      Switch,
-      Password,
-      PreviewText,
-      Radio,
-      Reset,
-      Select,
-      Submit,
-      TimePicker,
-      Transfer,
-      TreeSelect,
-      Upload,
-      Card,
-      Slider,
-      Rate,
-    },
-  }
-}
diff --git a/designable/antd/src/components/DesignableField/types.ts b/designable/antd/src/components/DesignableField/types.ts
deleted file mode 100644
index abf5d0b9cc0..00000000000
--- a/designable/antd/src/components/DesignableField/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { ISchema } from '@formily/react'
-import { ComponentNameMatcher } from '../../shared'
-export interface IDesignableFieldFactoryProps {
-  registryName: string
-  components?: Record<string, React.JSXElementConstructor<unknown>>
-  componentsIcon?: Record<string, React.ReactNode>
-  componentsSourceIcon?: Record<string, React.ReactNode>
-  componentsPropsSchema?: Record<string, ISchema>
-  dropFormItemComponents?: ComponentNameMatcher[]
-  dropReactionComponents?: ComponentNameMatcher[]
-  selfRenderChildrenComponents?: ComponentNameMatcher[]
-  inlineChildrenLayoutComponents?: ComponentNameMatcher[]
-  inlineLayoutComponents?: ComponentNameMatcher[]
-  restrictChildrenComponents?: Record<string, ComponentNameMatcher[]>
-  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]>
-}
diff --git a/designable/antd/src/components/DesignableForm/index.tsx b/designable/antd/src/components/DesignableForm/index.tsx
deleted file mode 100644
index 9c9fb13d7d4..00000000000
--- a/designable/antd/src/components/DesignableForm/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useMemo } from 'react'
-import { IDesignerProps, GlobalRegistry } from '@designable/core'
-import { createForm } from '@formily/core'
-import { Form, IFormLayoutProps } from '@formily/antd'
-import { observer } from '@formily/react'
-import { usePrefix } from '@designable/react'
-import { Form as FormPropsSchema } from '../../schemas'
-import './styles.less'
-
-export interface IDesignableFormFactoryProps extends IDesignerProps {
-  registryName: string
-  component?: React.JSXElementConstructor<unknown>
-}
-
-export const createDesignableForm = (options: IDesignableFormFactoryProps) => {
-  const realOptions: IDesignableFormFactoryProps = {
-    component: Form,
-    droppable: true,
-    draggable: false,
-    propsSchema: FormPropsSchema,
-    ...options,
-    defaultProps: {
-      labelCol: 6,
-      wrapperCol: 12,
-      ...options.defaultProps,
-    },
-  }
-
-  const FormComponent = realOptions.component || Form
-
-  const DesignableForm: React.FC<IFormLayoutProps> = observer((props) => {
-    const prefix = usePrefix('designable-form')
-    const form = useMemo(
-      () =>
-        createForm({
-          designable: true,
-        }),
-      []
-    )
-    return (
-      <FormComponent
-        {...props}
-        style={{ ...props.style }}
-        className={prefix}
-        form={form}
-      >
-        {props.children}
-      </FormComponent>
-    )
-  })
-
-  if (!realOptions.registryName) throw new Error('Can not found registryName')
-
-  realOptions.title = `components.${realOptions.registryName}`
-
-  GlobalRegistry.registerDesignerProps({
-    [realOptions.registryName]: realOptions,
-  })
-
-  return DesignableForm
-}
diff --git a/designable/antd/src/components/DesignableForm/styles.less b/designable/antd/src/components/DesignableForm/styles.less
deleted file mode 100644
index 4aaf7758d29..00000000000
--- a/designable/antd/src/components/DesignableForm/styles.less
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-designable-form {
-  .@{ant-prefix}-input,
-  .@{ant-prefix}-input-number,
-  .@{ant-prefix}-input-affix-wrapper,
-  .@{ant-prefix}-cascader-picker,
-  .@{ant-prefix}-picker-input,
-  .@{ant-prefix}-picker,
-  .@{ant-prefix}-cascader-picker-label,
-  .@{ant-prefix}-slider,
-  .@{ant-prefix}-checkbox,
-  .@{ant-prefix}-rate,
-  .@{ant-prefix}-switch,
-  .@{ant-prefix}-radio,
-  .@{ant-prefix}-radio-wrapper,
-  .@{ant-prefix}-checkbox-group,
-  .@{ant-prefix}-checkbox-wrapper,
-  .@{ant-prefix}-radio-group,
-  .@{ant-prefix}-upload,
-  .@{ant-prefix}-transfer,
-  .@{ant-prefix}-select,
-  .@{ant-prefix}-select-selector {
-    pointer-events: none !important;
-
-    input {
-      pointer-events: none !important;
-    }
-  }
-
-  .anticon svg {
-    pointer-events: none;
-  }
-}
diff --git a/designable/antd/src/components/DesignableFormCollapse/index.tsx b/designable/antd/src/components/DesignableFormCollapse/index.tsx
deleted file mode 100644
index 5a271e2bd8d..00000000000
--- a/designable/antd/src/components/DesignableFormCollapse/index.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { Collapse } from 'antd'
-import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse'
-import { useTreeNode, useNodeIdProps, TreeNodeWidget } from '@designable/react'
-import { toArr } from '@formily/shared'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseCollpase = (parent: TreeNode) => {
-  const tabs: TreeNode[] = []
-  parent.children.forEach((node) => {
-    if (matchComponent(node, 'FormCollapse.CollapsePanel')) {
-      tabs.push(node)
-    }
-  })
-  return tabs
-}
-
-export const DesignableFormCollapse: React.FC<CollapseProps> & {
-  CollapsePanel?: React.FC<CollapsePanelProps>
-} = observer((props) => {
-  const [activeKey, setActiveKey] = useState<string | string[]>([])
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  const designer = useDropTemplate('FormCollapse', (source) => {
-    const panelNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'FormCollapse.CollapsePanel',
-        'x-component-props': {
-          header: `Unnamed Title`,
-        },
-      },
-      children: source,
-    })
-
-    setActiveKey(toArr(activeKey).concat(panelNode.id))
-    return [panelNode]
-  })
-  const getCorrectActiveKey = (
-    activeKey: string[] | string,
-    tabs: TreeNode[]
-  ) => {
-    if (!tabs.length || !activeKey?.length) {
-      if (props.accordion) {
-        return tabs[0]?.id
-      }
-      return tabs.map((item) => item.id)
-    }
-    if (
-      tabs.some((node) =>
-        Array.isArray(activeKey)
-          ? activeKey.includes(node.id)
-          : node.id === activeKey
-      )
-    )
-      return activeKey
-    return tabs[tabs.length - 1].id
-  }
-  const panels = parseCollpase(node)
-  const renderCollapse = () => {
-    if (!node.children?.length) return <Droppable {...props} />
-    return (
-      <Collapse
-        {...props}
-        activeKey={getCorrectActiveKey(activeKey, panels)}
-        onChange={(id) => {
-          setActiveKey(toArr(id))
-        }}
-      >
-        {panels.map((panel) => {
-          const props = panel.props['x-component-props'] || {}
-          return (
-            <Collapse.Panel
-              {...props}
-              style={{ ...props.style }}
-              header={props.header}
-              key={panel.id}
-            >
-              {React.createElement(
-                'div',
-                {
-                  [designer.props.nodeIdAttrName]: panel.id,
-                },
-                panel.children.length ? (
-                  <TreeNodeWidget node={panel} />
-                ) : (
-                  <Droppable />
-                )
-              )}
-            </Collapse.Panel>
-          )
-        })}
-      </Collapse>
-    )
-  }
-  return (
-    <div {...nodeId}>
-      {renderCollapse()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addCollapsePanel',
-            onClick: () => {
-              const tabPane = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'FormCollapse.CollapsePanel',
-                  'x-component-props': {
-                    header: `Unnamed Title`,
-                  },
-                },
-              })
-              node.append(tabPane)
-              const keys = toArr(activeKey)
-              setActiveKey(keys.concat(tabPane.id))
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-DesignableFormCollapse.CollapsePanel = (props) => {
-  return <Fragment>{props.children}</Fragment>
-}
diff --git a/designable/antd/src/components/DesignableFormTab/index.tsx b/designable/antd/src/components/DesignableFormTab/index.tsx
deleted file mode 100644
index 7bc6a158963..00000000000
--- a/designable/antd/src/components/DesignableFormTab/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { Tabs } from 'antd'
-import { TabsProps, TabPaneProps } from 'antd/lib/tabs'
-import { useNodeIdProps, useTreeNode, TreeNodeWidget } from '@designable/react'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseTabs = (parent: TreeNode) => {
-  const tabs: TreeNode[] = []
-  parent.children.forEach((node) => {
-    if (matchComponent(node, 'FormTab.TabPane')) {
-      tabs.push(node)
-    }
-  })
-  return tabs
-}
-
-const getCorrectActiveKey = (activeKey: string, tabs: TreeNode[]) => {
-  if (tabs.length === 0) return
-  if (tabs.some((node) => node.id === activeKey)) return activeKey
-  return tabs[tabs.length - 1].id
-}
-
-export const DesignableFormTab: React.FC<TabsProps> & {
-  TabPane?: React.FC<TabPaneProps>
-} = observer((props) => {
-  const [activeKey, setActiveKey] = useState<string>()
-  const nodeId = useNodeIdProps()
-  const node = useTreeNode()
-  const designer = useDropTemplate('FormTab', (source) => {
-    return [
-      new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'FormTab.TabPane',
-          'x-component-props': {
-            tab: `Unnamed Title`,
-          },
-        },
-        children: source,
-      }),
-    ]
-  })
-  const tabs = parseTabs(node)
-  const renderTabs = () => {
-    if (!node.children?.length) return <Droppable />
-    return (
-      <Tabs
-        {...props}
-        activeKey={getCorrectActiveKey(activeKey, tabs)}
-        onChange={(id) => {
-          setActiveKey(id)
-        }}
-      >
-        {tabs.map((tab) => {
-          const props = tab.props['x-component-props'] || {}
-          return (
-            <Tabs.TabPane
-              {...props}
-              style={{ ...props.style }}
-              tab={props.tab}
-              key={tab.id}
-            >
-              {React.createElement(
-                'div',
-                {
-                  [designer.props.nodeIdAttrName]: tab.id,
-                },
-                tab.children.length ? (
-                  <TreeNodeWidget node={tab} />
-                ) : (
-                  <Droppable />
-                )
-              )}
-            </Tabs.TabPane>
-          )
-        })}
-      </Tabs>
-    )
-  }
-  return (
-    <div {...nodeId}>
-      {renderTabs()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addTabPane',
-            onClick: () => {
-              const tabPane = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'FormTab.TabPane',
-                  'x-component-props': {
-                    tab: `Unnamed Title`,
-                  },
-                },
-              })
-              node.append(tabPane)
-              setActiveKey(tabPane.id)
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-DesignableFormTab.TabPane = (props) => {
-  return <Fragment>{props.children}</Fragment>
-}
diff --git a/designable/antd/src/components/DesignableObject/index.tsx b/designable/antd/src/components/DesignableObject/index.tsx
deleted file mode 100644
index b894214f3d8..00000000000
--- a/designable/antd/src/components/DesignableObject/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useNodeIdProps, useTreeNode } from '@designable/react'
-import { Droppable } from '../Droppable'
-
-export const DesignableObject: React.FC = (props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  if (node.children.length === 0) return <Droppable {...nodeId} />
-  return <div {...nodeId}>{props.children}</div>
-}
diff --git a/designable/antd/src/components/DesignableText/index.tsx b/designable/antd/src/components/DesignableText/index.tsx
deleted file mode 100644
index 6b08755dbf8..00000000000
--- a/designable/antd/src/components/DesignableText/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { useDesigner } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDesignableTextProps {
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-  style?: React.CSSProperties
-  className?: string
-}
-
-export const DesignableText: React.FC<IDesignableTextProps> = (props) => {
-  const designer = useDesigner()
-  const tagName = props.mode === 'normal' || !props.mode ? 'div' : props.mode
-  return React.createElement(
-    tagName,
-    {
-      ...props,
-      className: cls(props.className, 'dn-text'),
-      [designer.props.contentEditableAttrName]: 'x-component-props.content',
-    },
-    props.content
-  )
-}
diff --git a/designable/antd/src/components/DesignableText/styles.less b/designable/antd/src/components/DesignableText/styles.less
deleted file mode 100644
index a55fac3c947..00000000000
--- a/designable/antd/src/components/DesignableText/styles.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.dn-text {
-  &:empty::before {
-    content: 'Please Input';
-    display: block;
-    opacity: 0.6;
-  }
-  &:focus{
-    padding: 4px;
-  }
-}
diff --git a/designable/antd/src/components/Droppable/index.tsx b/designable/antd/src/components/Droppable/index.tsx
deleted file mode 100644
index 0802ab99f5e..00000000000
--- a/designable/antd/src/components/Droppable/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { usePrefix, TextWidget } from '@designable/react'
-import { Empty } from 'antd'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDroppableProps {
-  style?: React.CSSProperties
-  className?: string
-}
-
-export const Droppable: React.FC<IDroppableProps> = (props: any) => {
-  const prefix = usePrefix('droppable')
-  return (
-    <Empty
-      {...props}
-      className={cls(prefix, props.className)}
-      description={<TextWidget token="Common.droppable" />}
-    />
-  )
-}
diff --git a/designable/antd/src/components/Droppable/styles.less b/designable/antd/src/components/Droppable/styles.less
deleted file mode 100644
index d175c36436a..00000000000
--- a/designable/antd/src/components/Droppable/styles.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-droppable {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  padding: 20px;
-  border: 1px solid @border-color-split;
-  color: @text-color;
-}
diff --git a/designable/antd/src/components/FormItemSwitcher/index.tsx b/designable/antd/src/components/FormItemSwitcher/index.tsx
deleted file mode 100644
index 04134856fbd..00000000000
--- a/designable/antd/src/components/FormItemSwitcher/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Switch } from 'antd'
-
-export interface IFormItemSwitcherProps {
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export const FormItemSwitcher: React.FC<IFormItemSwitcherProps> = (props) => {
-  return (
-    <Switch
-      checked={props.value === 'FormItem'}
-      onChange={(value) => {
-        props.onChange(value ? 'FormItem' : undefined)
-      }}
-    />
-  )
-}
diff --git a/designable/antd/src/components/LoadTemplate/index.tsx b/designable/antd/src/components/LoadTemplate/index.tsx
deleted file mode 100644
index 5decd4d1b72..00000000000
--- a/designable/antd/src/components/LoadTemplate/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Space, Typography, Divider } from 'antd'
-import { usePrefix, TextWidget } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface ITemplateAction {
-  title: React.ReactNode
-  tooltip?: React.ReactNode
-  icon?: string | React.ReactNode
-  onClick: () => void
-}
-
-export interface ILoadTemplateProps {
-  className?: string
-  style?: React.CSSProperties
-  actions?: ITemplateAction[]
-}
-
-export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
-  const prefix = usePrefix('load-template')
-  return (
-    <div className={cls(prefix, props.className)} style={props.style}>
-      <div className={prefix + '-actions'}>
-        <Space split={<Divider type="vertical" />}>
-          {props.actions?.map((action, key) => {
-            return (
-              <Typography.Link
-                key={key}
-                data-click-stop-propagation="true"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  action?.onClick?.()
-                }}
-              >
-                <TextWidget>{action.title}</TextWidget>
-              </Typography.Link>
-            )
-          })}
-        </Space>
-      </div>
-    </div>
-  )
-}
diff --git a/designable/antd/src/components/LoadTemplate/styles.less b/designable/antd/src/components/LoadTemplate/styles.less
deleted file mode 100644
index 3496c3c8d76..00000000000
--- a/designable/antd/src/components/LoadTemplate/styles.less
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-load-template {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  overflow: hidden;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  &-actions {
-    position: relative;
-    padding: 0 20px;
-    &::before {
-      position: absolute;
-      content: '';
-      display: block;
-      height: 0;
-      width: 300%;
-      top: 50%;
-      border-bottom: 2px dashed @border-color-split;
-      right: 100%;
-    }
-    &::after {
-      position: absolute;
-      content: '';
-      display: block;
-      height: 0;
-      width: 300%;
-      top: 50%;
-      border-bottom: 2px dashed @border-color-split;
-      left: 100%;
-    }
-  }
-}
diff --git a/designable/antd/src/components/index.ts b/designable/antd/src/components/index.ts
deleted file mode 100644
index 19322276aac..00000000000
--- a/designable/antd/src/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DesignableField'
-export * from './DesignableForm'
diff --git a/designable/antd/src/hooks/index.ts b/designable/antd/src/hooks/index.ts
deleted file mode 100644
index 6ab5860beb4..00000000000
--- a/designable/antd/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useDropTemplate'
diff --git a/designable/antd/src/hooks/useDropTemplate.ts b/designable/antd/src/hooks/useDropTemplate.ts
deleted file mode 100644
index c07ef103935..00000000000
--- a/designable/antd/src/hooks/useDropTemplate.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { AppendNodeEvent, TreeNode } from '@designable/core'
-import { useDesigner } from '@designable/react'
-import { matchComponent, matchChildComponent } from '../shared'
-
-export const useDropTemplate = (
-  name: string,
-  getChildren: (source: TreeNode[]) => TreeNode[]
-) => {
-  return useDesigner((designer) => {
-    return designer.subscribeTo(AppendNodeEvent, (event) => {
-      const { source, target } = event.data
-      if (Array.isArray(target)) return
-      if (!Array.isArray(source)) return
-      if (
-        matchComponent(
-          target,
-          (key) =>
-            key === name &&
-            source.every((child) => !matchChildComponent(child, name))
-        ) &&
-        target.children.length === 0
-      ) {
-        target.setChildren(...getChildren(source))
-        return false
-      }
-    })
-  })
-}
diff --git a/designable/antd/src/index.ts b/designable/antd/src/index.ts
deleted file mode 100644
index e1e3b6f0e4e..00000000000
--- a/designable/antd/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import './locales'
-import './sources'
-export * from './components'
diff --git a/designable/antd/src/locales/en-US.ts b/designable/antd/src/locales/en-US.ts
deleted file mode 100644
index 14c3635a4da..00000000000
--- a/designable/antd/src/locales/en-US.ts
+++ /dev/null
@@ -1,464 +0,0 @@
-const StyleLocale = {
-  width: 'Width',
-  height: 'Height',
-  display: 'Display',
-  background: 'Background',
-  boxShadow: 'Box Shadow',
-  font: 'Font',
-  margin: 'Margin',
-  padding: 'Padding',
-  borderRadius: 'Radius',
-  border: 'Border',
-  opacity: 'Opacity',
-}
-
-const FormLayoutLocale = {
-  labelCol: 'Label Col',
-  wrapperCol: 'Wrapper Col',
-  colon: 'Colon',
-  labelAlign: {
-    title: 'Label Align',
-    dataSource: ['Left', 'Right', 'Inherit'],
-  },
-  wrapperAlign: {
-    title: 'Wrapper Align',
-    dataSource: ['Left', 'Right', 'Inherit'],
-  },
-  labelWrap: 'Label Wrap',
-  wrapperWrap: 'Wrapper Wrap',
-  labelWidth: 'Label Width',
-  wrapperWidth: 'Wrapper Width',
-  fullness: 'Fullness',
-  inset: 'Inset',
-  shallow: 'Shallow',
-  bordered: 'Bordered',
-  size: { title: 'Size', dataSource: ['Large', 'Small', 'Default', 'Inherit'] },
-  layout: {
-    title: 'Layout',
-    dataSource: ['Vertical', 'Horizontal', 'Inline', 'Inherit'],
-  },
-  feedbackLayout: {
-    title: 'Feedback Layout',
-    dataSource: ['Loose', 'Terse', 'Popup', 'None', 'Inherit'],
-  },
-  tooltipLayout: {
-    title: 'Tooltip Layout',
-    dataSource: ['Icon', 'Text', 'Inherit'],
-  },
-}
-
-const InputLocale = {
-  addonAfter: 'Addon After',
-  addonBefore: 'Addon Before',
-  style: StyleLocale,
-  allowClear: 'Allow Clear',
-  maxLength: 'Max Length',
-  prefix: 'Prefix',
-  suffix: 'Suffix',
-  placeholder: 'Placeholder',
-  autoSize: {
-    title: 'Auto Size',
-  },
-  showCount: 'Show Count',
-  checkStrength: 'Check Strength',
-}
-
-const FormItemLocale = {
-  tooltip: 'Tooltip',
-  asterisk: 'Asterisk',
-  gridSpan: 'Grid Span',
-}
-
-const SelectLocale = {
-  mode: {
-    title: 'Mode',
-    dataSource: ['Multiple', 'Tags', 'Single'],
-  },
-  autoClearSearchValue: {
-    title: 'Auto Clear Search Value',
-    tooltip: 'Only used to multiple and tags mode',
-  },
-  autoFocus: 'Auto Focus',
-  defaultActiveFirstOption: 'Default Active First Option',
-  dropdownMatchSelectWidth: 'Dropdown Match Select Width',
-  defaultOpen: 'Default Open',
-  filterOption: 'Filter Option',
-  filterSort: 'Filter Sort',
-  labelInValue: 'Label In Value',
-  listHeight: 'List Height',
-  maxTagCount: 'Max Tag Count',
-  maxTagPlaceholder: {
-    title: 'Max Tag Placeholder',
-    tooltip: 'Content displayed when tag is hidden',
-  },
-  maxTagTextLength: 'Max Tag Text Length',
-  notFoundContent: 'Not Found Content',
-  showArrow: 'Show Arrow',
-  showSearch: 'Show Search',
-  virtual: 'Use Virtual Scroll',
-}
-
-const CardLocale = {
-  type: 'Type',
-  title: 'Title',
-  extra: 'Extra Content',
-  cardTypes: [
-    { label: 'Built-in', value: 'inner' },
-    { label: 'Default', value: '' },
-  ],
-}
-
-const CascaderLocale = {
-  changeOnSelect: {
-    title: 'Change On Select',
-    tooltip: 'Click on each level of menu option value will change',
-  },
-  displayRender: {
-    title: 'Display Render',
-    tooltip:
-      'The rendering function displayed after selection, the default is label => label.join("/")	',
-  },
-  fieldNames: {
-    title: 'Field Names',
-    tooltip:
-      'Defaults：{ label: "label", value: "value", children: "children" }',
-  },
-}
-
-const RadioLocale = {
-  buttonStyle: { title: 'Button style', dataSource: ['Hollow', 'Solid'] },
-  optionType: { title: 'Option type', dataSource: ['Default', 'Button'] },
-}
-
-const DatePickerLocale = {
-  disabledDate: {
-    title: 'Disabled Date',
-    tooltip: 'Format (currentDate: moment) => boolean',
-  },
-  disabledTime: {
-    title: 'Disabled Time',
-    tooltip: 'Format (currentDate: moment) => boolean',
-  },
-  inputReadOnly: 'Input ReadOnly',
-  format: 'Format',
-  picker: {
-    title: 'Picker',
-    dataSource: ['Time', 'Date', 'Month', 'Year', 'Quart'],
-  },
-  showNow: 'Show Now',
-  showTime: 'Show Time',
-  showToday: 'Show Today',
-}
-
-const NumberPickerLocale = {
-  formatter: {
-    title: 'Format Converter',
-    tooltip: 'Format：function(value: number | string): string',
-  },
-  keyboard: 'Enable Shortcut Keys',
-  parser: {
-    title: 'Format Parser',
-    tooltip:
-      'Specify the method of converting back to numbers from the format converter, and use it with the format converter, the format:function(string): number',
-  },
-  decimalSeparator: 'Decimal Separator',
-  precision: 'Precision',
-  max: 'Max',
-  min: 'Min',
-  step: 'Step',
-  stringMode: {
-    title: 'String Format',
-    tooltip:
-      'Support high-precision decimals after opening. At the same time onChange will return string type',
-  },
-}
-
-const RateLocale = {
-  allowHalf: 'Allow Half',
-  tooltips: { title: 'Tooltips', tooltip: 'Format：string[]' },
-  count: 'Count',
-}
-
-const SliderLocale = {
-  sliderDots: 'Fixed Scale',
-  sliderRange: 'Double Slider',
-  sliderReverse: 'Reverse Coordinate System',
-  vertical: 'Vertical',
-  tooltipPlacement: {
-    title: 'Tooltip Placement',
-    tooltip: 'Set up prompt placement. Reference Tooltip',
-  },
-  tooltipVisible: {
-    title: 'Tooltip Visible',
-    tooltip:
-      'When turned on, the prompt will always be displayed; otherwise, it will always not be displayed, even when dragging and moving in',
-  },
-  marks: 'Marks',
-}
-
-const TimePickerLocale = {
-  clearText: 'Clear Text',
-  disabledHours: 'Disbaled Hours',
-  disabledMinutes: 'Disabled Minutes',
-  disabledSeconds: 'Disabled Seconds',
-  hideDisabledOptions: 'Hide Disabled Options',
-  hourStep: 'Hour Step',
-  minuteStep: 'Minute Step',
-  secondStep: 'Second Step',
-  use12Hours: 'Use 12-hour',
-}
-
-const TreeSelectLocale = {
-  dropdownMatchSelectWidth: {
-    title: 'Dropdown Match Select Width',
-    tooltip:
-      'By default, min-width will be set, and it will be ignored when the value is less than the width of the selection box. false will turn off virtual scrolling',
-  },
-  showCheckedStrategy: {
-    title: 'Show Checked Strategy',
-    tooltip:
-      'When configuring treeCheckable, define how to backfill the selected item. TreeSelect.SHOW_ALL: Show all selected nodes (including parent nodes). TreeSelect.SHOW_PARENT: Only display the parent node (when all child nodes under the parent node are selected). Only show child nodes by default',
-    dataSource: ['Show All', 'Show Parent Node', 'Show Child Nodes'],
-  },
-  treeCheckable: 'Tree Checkable',
-  treeDefaultExpandAll: 'Tree Default Expand All',
-  treeDefaultExpandedKeys: {
-    title: 'Tree Default Expanded Keys',
-    tooltip: 'Format：Array<string | number>',
-  },
-  treeNodeFilterProp: {
-    title: 'Tree Node Filter Properties',
-    tooltip: 'The treeNode attribute corresponding to the input item filter',
-  },
-  treeDataSimpleMode: {
-    title: 'Tree Data Simple Mode',
-    tooltip: `Use treeData in a simple format. For specific settings, refer to the settable type (the treeData should be a data structure like this: [{id:1, pId:0, value:'1', title:"test1",...} ,...], pId is the id of the parent node)`,
-  },
-  treeNodeLabelProp: {
-    title: 'Tree Node Label Properties',
-    tooltip: 'The default is title',
-  },
-  filterTreeNode: 'Filter Tree Node',
-}
-
-const TransferLocale = {
-  oneWay: 'One Way',
-  operations: {
-    title: 'Operations',
-    tooltip: 'Format：string[]',
-  },
-  titles: { title: 'Titles', tooltip: 'Format：string[]' },
-  showSearchAll: 'Show Search All',
-}
-
-const UploadLocale = {
-  accept: 'Accept',
-  action: 'Upload Address',
-  data: 'Data',
-  directory: 'Support Upload Directory',
-  headers: 'Headers',
-  listType: { title: 'List Type', dataSource: ['Text', 'Image', 'Card'] },
-  multiple: 'Multiple',
-  name: 'Name',
-  openFileDialogOnClick: 'Open File Dialog On Click',
-  showUploadList: 'Show Upload List',
-  withCredentials: 'withCredentials',
-  maxCount: 'Max Count',
-  method: 'Method',
-  textContent: 'Text Content',
-}
-
-const FormGridLocale = {
-  minWidth: 'Min Width',
-  minColumns: 'Min Columns',
-  maxWidth: 'Max Width',
-  maxColumns: 'Max Columns',
-  breakpoints: 'Breakpoints',
-  columnGap: 'Column Gap',
-  rowGap: 'Row Gap',
-  colWrap: 'Col Wrap',
-}
-
-const SpaceLocale = {
-  direction: { title: 'Direction', dataSource: ['Vertical', 'Horizontal'] },
-  split: 'Split',
-  wrap: 'Word Wrap',
-}
-
-const FormTabLocale = {
-  animated: 'Enable Animated',
-  centered: 'Label Centered',
-  tab: 'Tab Title',
-  tabsTypeEnum: [
-    { label: 'Line', value: 'line' },
-    { label: 'Card', value: 'card' },
-  ],
-}
-
-const FormCollapseLocale = {
-  accordion: 'Accordion Mode',
-  collapsible: { title: 'Collapsible', dataSource: ['Header', 'Disable'] },
-  ghost: 'Ghost Mode',
-  header: 'Header Title',
-}
-
-const ArrayTableLocale = {
-  showHeader: 'Show Header',
-  sticky: 'Sticky',
-  align: {
-    title: 'Align',
-    dataSource: ['Left', 'Right', 'Centered'],
-  },
-  colSpan: 'ColSpan',
-  fixed: { title: 'Fixed column', dataSource: ['Left', 'Right', 'None'] },
-  width: 'Width',
-  defaultValue: 'DefaultValue',
-}
-
-const ComponentLocale = {
-  ...FormLayoutLocale,
-  ...InputLocale,
-  ...FormItemLocale,
-  ...SelectLocale,
-  ...CardLocale,
-  ...CascaderLocale,
-  ...RadioLocale,
-  ...DatePickerLocale,
-  ...NumberPickerLocale,
-  ...RateLocale,
-  ...SliderLocale,
-  ...TimePickerLocale,
-  ...TreeSelectLocale,
-  ...TransferLocale,
-  ...UploadLocale,
-  ...FormGridLocale,
-  ...SpaceLocale,
-  ...FormTabLocale,
-  ...FormCollapseLocale,
-  ...ArrayTableLocale,
-}
-
-const FieldLocale = {
-  name: 'Name',
-  title: 'Title',
-  required: 'Required',
-  description: 'Description',
-  default: 'Default',
-  enum: 'DataSource',
-  style: StyleLocale,
-  'x-display': {
-    title: 'Display State',
-    tooltip:
-      'When the display value is "None", the data will be "Hidden" and deleted. When the display value is hidden, only the UI will be hidden',
-    dataSource: ['Visible', 'Hidden', 'None', 'Inherit'],
-  },
-  'x-pattern': {
-    title: 'UI Pattern',
-    dataSource: ['Editable', 'Disabled', 'ReadOnly', 'ReadPretty', 'Inherit'],
-  },
-  'x-validator': 'Validator',
-  'x-reactions': 'Reactions',
-  'x-decorator': 'Decorator',
-  'x-decorator-props': {
-    ...ComponentLocale,
-    tab_property: 'Decorator',
-    tab_style: 'Style',
-  },
-  'x-component-props': {
-    ...ComponentLocale,
-    tab_property: 'Component',
-    tab_style: 'Style',
-  },
-}
-
-const ArrayOperationsLocale = {
-  Index: 'Index',
-  SortHandle: 'Sort Handle',
-  Addition: 'Addition',
-  Remove: 'Remove',
-  MoveDown: 'Move Down',
-  MoveUp: 'Move Up',
-}
-
-export default {
-  'en-US': {
-    Components: {
-      Root: 'Root',
-      DesignableForm: 'Form',
-      DesignableField: 'Field',
-      Input: { title: 'Input', TextArea: 'TextArea' },
-      Select: 'Select',
-      Radio: { title: 'Radio', Group: 'Radio Group' },
-      Checkbox: {
-        title: 'Checkbox',
-        Group: 'Checkbox Group',
-      },
-      Card: 'Card',
-      FormGrid: 'Form Grid',
-      FormLayout: 'Form Layout',
-      Slider: 'Slider',
-      Rate: 'Rate',
-      Cascader: 'Cascader',
-      Space: 'Space',
-      DatePicker: { title: 'Date', RangePicker: 'Date Range' },
-      TimePicker: { title: 'Time', RangePicker: 'Time Range' },
-      NumberPicker: 'Number',
-      Password: 'Password',
-      Transfer: 'Transfer',
-      TreeSelect: 'TreeSelect',
-      Upload: { title: 'Upload', Dragger: 'Dragger Upload' },
-      Switch: 'Switch',
-      FormTab: { title: 'Form Tab', TabPane: 'Tab Panel' },
-      FormCollapse: { title: 'Form Collapse', CollapsePanel: 'Collapse Panel' },
-      Object: 'Object',
-      Void: 'Void Element',
-      Text: 'Text',
-      ArrayTable: {
-        title: 'Array Table',
-        Column: 'Column',
-        ...ArrayOperationsLocale,
-      },
-      ArrayCards: {
-        title: 'Array Cards',
-        ...ArrayOperationsLocale,
-      },
-      ArrayTabs: {
-        title: 'Array Tabs',
-        ...ArrayOperationsLocale,
-      },
-      ArrayCollapse: {
-        title: 'Array Collapse',
-        ...ArrayOperationsLocale,
-      },
-      FormItem: 'FormItem',
-    },
-    Settings: {
-      ...FieldLocale,
-      ...ComponentLocale,
-      namespace: {
-        Text: {
-          content: 'Text Content',
-          mode: {
-            title: 'Text Mode',
-            dataSource: ['H1', 'H2', 'H3', 'Paragraph', 'Normal'],
-          },
-        },
-        Space: {
-          align: {
-            title: 'Align',
-            dataSource: ['Start', 'End', 'Center', 'Baseline'],
-          },
-        },
-      },
-    },
-    Common: {
-      droppable: 'Droppable',
-      addTabPane: 'Add Panel',
-      addCollapsePanel: 'Add Panel',
-      addTableColumn: 'Add Column',
-      addTableSortHandle: 'Add Sort Handle',
-      addIndex: 'Add Index',
-      addOperation: 'Add Operations',
-    },
-  },
-}
diff --git a/designable/antd/src/locales/index.ts b/designable/antd/src/locales/index.ts
deleted file mode 100644
index 5d64361884b..00000000000
--- a/designable/antd/src/locales/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import zhCN from './zh-CN'
-import enUS from './en-US'
-
-GlobalRegistry.registerDesignerLocales({
-  ...zhCN,
-  ...enUS,
-})
diff --git a/designable/antd/src/locales/zh-CN.ts b/designable/antd/src/locales/zh-CN.ts
deleted file mode 100644
index 4e695b2229a..00000000000
--- a/designable/antd/src/locales/zh-CN.ts
+++ /dev/null
@@ -1,457 +0,0 @@
-const StyleLocale = {
-  width: '宽度',
-  height: '高度',
-  display: '展示',
-  background: '背景',
-  boxShadow: '阴影',
-  font: '字体',
-  margin: '外边距',
-  padding: '内边距',
-  borderRadius: '圆角',
-  border: '边框',
-  opacity: '透明度',
-}
-
-const FormLayoutLocale = {
-  labelCol: '标签网格宽度',
-  wrapperCol: '组件网格宽度',
-  colon: '是否有冒号',
-  labelAlign: { title: '标签对齐', dataSource: ['左对齐', '右对齐', '继承'] },
-  wrapperAlign: { title: '组件对齐', dataSource: ['左对齐', '右对齐', '继承'] },
-  labelWrap: '标签换行',
-  wrapperWrap: '组件换行',
-  labelWidth: '标签宽度',
-  wrapperWidth: '组件宽度',
-  fullness: '组件占满',
-  inset: '内联布局',
-  shallow: '是否浅传递',
-  bordered: '是否有边框',
-  size: { title: '尺寸', dataSource: ['大', '小', '默认', '继承'] },
-  layout: { title: '布局', dataSource: ['垂直', '水平', '内联', '继承'] },
-  feedbackLayout: {
-    title: '反馈布局',
-    dataSource: ['宽松', '紧凑', '弹层', '无', '继承'],
-  },
-  tooltipLayout: { title: '提示布局', dataSource: ['图标', '文本', '继承'] },
-}
-
-const InputLocale = {
-  addonAfter: '后缀标签',
-  addonBefore: '前缀标签',
-  style: StyleLocale,
-  allowClear: '允许清除内容',
-  bordered: '是否有边框',
-  maxLength: '最大长度',
-  prefix: '前缀',
-  suffix: '后缀',
-  placeholder: '占位提示',
-  autoSize: {
-    title: '自适应高度',
-    tooltip: '可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }',
-  },
-  showCount: '是否展示字数',
-  checkStrength: '检测强度',
-}
-
-const FormItemLocale = {
-  tooltip: '提示',
-  asterisk: '星号',
-  gridSpan: '网格跨列',
-}
-
-const SelectLocale = {
-  mode: {
-    title: '模式',
-    dataSource: ['多选', '标签', '单选'],
-  },
-  autoClearSearchValue: {
-    title: '选中自动清除',
-    tooltip: '仅在多选或者标签模式下支持',
-  },
-  autoFocus: '自动获取焦点',
-  defaultActiveFirstOption: '默认高亮第一个选项',
-  dropdownMatchSelectWidth: {
-    title: '下拉菜单和选择器同宽',
-    tooltip:
-      '默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动',
-  },
-  defaultOpen: '默认展开',
-  filterOption: '选项筛选器',
-  filterSort: '选项排序器',
-  labelInValue: {
-    title: '标签值',
-    tooltip:
-      '是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式',
-  },
-  listHeight: '弹窗滚动高度',
-  maxTagCount: {
-    title: '最多标签数量',
-    tooltip: '最多显示多少个 tag，响应式模式会对性能产生损耗',
-  },
-  maxTagPlaceholder: {
-    title: '最多标签占位',
-    tooltip: '隐藏 tag 时显示的内容',
-  },
-  maxTagTextLength: '最多标签文本长度',
-  notFoundContent: '空状态内容',
-  showArrow: '显示箭头',
-  showSearch: '支持搜索',
-  virtual: '开启虚拟滚动',
-}
-
-const CardLocale = {
-  type: '类型',
-  title: '标题',
-  extra: '右侧扩展',
-  cardTypes: [
-    { label: '内置', value: 'inner' },
-    { label: '默认', value: '' },
-  ],
-}
-
-const CascaderLocale = {
-  changeOnSelect: {
-    title: '选择时触发',
-    tooltip: '点选每级菜单选项值都会发生变化',
-  },
-  displayRender: {
-    title: '渲染函数',
-    tooltip: '选择后展示的渲染函数，默认为label => label.join("/")	',
-  },
-  fieldNames: {
-    title: '自定义字段名',
-    tooltip: '默认值：{ label: "label", value: "value", children: "children" }',
-  },
-}
-
-const RadioLocale = {
-  buttonStyle: { title: '按钮风格', dataSource: ['空心', '实心'] },
-  optionType: { title: '选项类型', dataSource: ['默认', '按钮'] },
-}
-
-const DatePickerLocale = {
-  disabledDate: {
-    title: '不可选日期',
-    tooltip: '格式 (currentDate: moment) => boolean',
-  },
-  disabledTime: {
-    title: '不可选时间',
-    tooltip: '格式 (currentDate: moment) => boolean',
-  },
-  inputReadOnly: '输入框只读',
-  format: '格式',
-  picker: {
-    title: '选择器类型',
-    dataSource: ['时间', '日期', '月份', '年', '季度'],
-  },
-  showNow: '显示此刻',
-  showTime: '时间选择',
-  showToday: '显示今天',
-}
-
-const NumberPickerLocale = {
-  formatter: {
-    title: '格式转换器',
-    tooltip: '格式：function(value: number | string): string',
-  },
-  keyboard: '启用快捷键',
-  parser: {
-    title: '格式解析器',
-    tooltip:
-      '指定从 格式转换器 里转换回数字的方式，和 格式转换器 搭配使用,格式：function(string): number',
-  },
-  decimalSeparator: '小数点',
-  precision: '数字精度',
-  max: '最大值',
-  min: '最小值',
-  step: '步长',
-  stringMode: {
-    title: '字符串格式',
-    tooltip: '开启后支持高精度小数。同时 onChange 将返回 string 类型',
-  },
-}
-
-const RateLocale = {
-  allowHalf: '允许半选',
-  tooltips: { title: '提示信息', tooltip: '格式：string[]' },
-  count: '总数',
-}
-
-const SliderLocale = {
-  sliderDots: '刻度固定',
-  sliderRange: '双滑块',
-  sliderReverse: '反向坐标系',
-  vertical: '垂直布局',
-  tooltipPlacement: {
-    title: '提示位置',
-    tooltip: '设置 提示 展示位置。参考 Tooltip',
-  },
-  tooltipVisible: {
-    title: '提示显示',
-    tooltip: '开启时，提示 将会始终显示；否则始终不显示，哪怕在拖拽及移入时',
-  },
-  marks: '刻度标签',
-}
-
-const TimePickerLocale = {
-  clearText: '清除提示',
-  disabledHours: '禁止小时',
-  disabledMinutes: '禁止分钟',
-  disabledSeconds: '禁止秒',
-  hideDisabledOptions: '隐藏禁止选项',
-  hourStep: '小时间隔',
-  minuteStep: '分钟间隔',
-  secondStep: '秒间隔',
-  use12Hours: '12小时制',
-}
-
-const TreeSelectLocale = {
-  dropdownMatchSelectWidth: {
-    title: '下拉选择器同宽',
-    tooltip:
-      '默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动',
-  },
-  showCheckedStrategy: {
-    title: '复选回显策略',
-    tooltip:
-      '配置 treeCheckable 时，定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点)。TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点',
-    dataSource: ['显示所有', '显示父节点', '显示子节点'],
-  },
-  treeCheckable: '开启复选',
-  treeDefaultExpandAll: '默认展开所有',
-  treeDefaultExpandedKeys: {
-    title: '默认展开选项',
-    tooltip: '格式：Array<string | number>',
-  },
-  treeNodeFilterProp: {
-    title: '节点过滤属性',
-    tooltip: '输入项过滤对应的 treeNode 属性',
-  },
-  treeDataSimpleMode: {
-    title: '使用简单数据结构',
-    tooltip: `使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', title:"test1",...},...]， pId 是父节点的 id)`,
-  },
-  treeNodeLabelProp: { title: '标签显示名称', tooltip: '默认为title' },
-  filterTreeNode: '节点过滤器',
-}
-
-const TransferLocale = {
-  oneWay: '单向展示',
-  operations: { title: '操作文案集合', tooltip: '格式：string[]' },
-  titles: { title: '标题集合', tooltip: '格式：string[]' },
-  showSearchAll: '支持全选',
-}
-
-const UploadLocale = {
-  accept: '可接受类型',
-  action: '上传地址',
-  data: '数据/参数',
-  directory: '支持上传目录',
-  headers: '请求头',
-  listType: { title: '列表类型', dataSource: ['文本', '图片', '卡片'] },
-  multiple: '多选模式',
-  name: '字段标识',
-  openFileDialogOnClick: {
-    title: '点击打开文件对话框',
-    tooltip: '点击打开文件对话框',
-  },
-  showUploadList: '是否展示文件列表',
-  withCredentials: '携带Cookie',
-  maxCount: '最大数量',
-  method: '方法',
-  textContent: '上传文案',
-}
-
-const FormGridLocale = {
-  minWidth: '最小宽度',
-  minColumns: '最小列数',
-  maxWidth: '最大宽度',
-  maxColumns: '最大列数',
-  breakpoints: '响应式断点',
-  columnGap: '列间距',
-  rowGap: '行间距',
-  colWrap: '自动换行',
-}
-
-const SpaceLocale = {
-  direction: { title: '方向', dataSource: ['垂直', '水平'] },
-  split: '分割内容',
-  wrap: '自动换行',
-}
-
-const FormTabLocale = {
-  animated: '启用动画过渡',
-  centered: '标签居中',
-  tab: '选项名称',
-  tabsTypeEnum: [
-    { label: '线框', value: 'line' },
-    { label: '卡片', value: 'card' },
-  ],
-}
-
-const FormCollapseLocale = {
-  accordion: '手风琴模式',
-  collapsible: { title: '可折叠区域', dataSource: ['头部', '禁用'] },
-  ghost: '幽灵模式',
-  header: '头部内容',
-}
-
-const ArrayTableLocale = {
-  showHeader: '显示头部',
-  sticky: '吸顶',
-  align: {
-    title: '对齐',
-    dataSource: ['左', '右', '居中'],
-  },
-  colSpan: '跨列',
-  fixed: { title: '固定列', dataSource: ['左', '右', '无'] },
-  width: '宽度',
-  defaultValue: '默认值',
-}
-
-const ComponentLocale = {
-  ...FormLayoutLocale,
-  ...InputLocale,
-  ...FormItemLocale,
-  ...SelectLocale,
-  ...CardLocale,
-  ...CascaderLocale,
-  ...RadioLocale,
-  ...DatePickerLocale,
-  ...NumberPickerLocale,
-  ...RateLocale,
-  ...SliderLocale,
-  ...TimePickerLocale,
-  ...TreeSelectLocale,
-  ...TransferLocale,
-  ...UploadLocale,
-  ...FormGridLocale,
-  ...SpaceLocale,
-  ...FormTabLocale,
-  ...FormCollapseLocale,
-  ...ArrayTableLocale,
-}
-
-const FieldLocale = {
-  name: '字段标识',
-  title: '标题',
-  required: '必填',
-  description: '描述',
-  default: '默认值',
-  enum: '数据源',
-  style: StyleLocale,
-  'x-display': {
-    title: '展示状态',
-    tooltip: '半隐藏只会隐藏UI，全隐藏会删除数据',
-    dataSource: ['显示', '半隐藏', '全隐藏', '继承'],
-  },
-  'x-pattern': {
-    title: 'UI形态',
-    dataSource: ['可编辑', '禁用', '只读', '阅读', '继承'],
-  },
-  'x-validator': '校验规则',
-  'x-reactions': '响应器规则',
-  'x-decorator': '启用容器组件',
-  'x-decorator-props': {
-    ...ComponentLocale,
-    tab_property: '容器属性',
-    tab_style: '容器样式',
-  },
-  'x-component-props': {
-    ...ComponentLocale,
-    tab_property: '组件属性',
-    tab_style: '组件样式',
-  },
-}
-
-const ArrayOperationsLocale = {
-  Index: '索引',
-  SortHandle: '排序手柄',
-  Addition: '新增按钮',
-  Remove: '删除按钮',
-  MoveDown: '下移按钮',
-  MoveUp: '上移按钮',
-}
-
-export default {
-  'zh-CN': {
-    Components: {
-      Root: '根组件',
-      DesignableForm: '表单',
-      DesignableField: '字段',
-      Input: { title: '输入框', TextArea: '多行文本' },
-      Select: '选择框',
-      Radio: { title: '单选框', Group: '单选框组' },
-      Checkbox: {
-        title: '复选框',
-        Group: '复选框组',
-      },
-      Card: '卡片布局',
-      FormGrid: '网格布局',
-      FormLayout: '表单布局',
-      Slider: '滑动条',
-      Rate: '评分器',
-      Cascader: '联级选择',
-      Space: '弹性间距',
-      DatePicker: { title: '日期选择', RangePicker: '日期范围' },
-      TimePicker: { title: '时间选择', RangePicker: '时间范围' },
-      NumberPicker: '数字输入',
-      Password: '密码输入',
-      Transfer: '穿梭框',
-      TreeSelect: '树选择',
-      Upload: { title: '上传', Dragger: '拖拽上传' },
-      Switch: '开关',
-      FormTab: { title: '选项卡布局', TabPane: '选项卡面板' },
-      FormCollapse: { title: '手风琴布局', CollapsePanel: '手风琴面板' },
-      Object: '数据对象',
-      Void: '虚拟容器',
-      Text: '文本',
-      ArrayTable: {
-        title: '自增表格',
-        Column: '表格列',
-        ...ArrayOperationsLocale,
-      },
-      ArrayCards: {
-        title: '自增卡片',
-        ...ArrayOperationsLocale,
-      },
-      ArrayTabs: {
-        title: '自增选项卡',
-        ...ArrayOperationsLocale,
-      },
-      ArrayCollapse: {
-        title: '自增手风琴',
-        ...ArrayOperationsLocale,
-      },
-      FormItem: '表单项容器',
-    },
-    Settings: {
-      ...FieldLocale,
-      ...ComponentLocale,
-      namespace: {
-        Text: {
-          content: '文本内容',
-          mode: {
-            title: '文本类型',
-            dataSource: ['H1', 'H2', 'H3', 'Paragraph', 'Normal'],
-          },
-        },
-        Space: {
-          align: {
-            title: '对齐',
-            dataSource: ['头部', '尾部', '居中', '基准线'],
-          },
-        },
-      },
-    },
-    Common: {
-      droppable: '可以拖入组件',
-      addTabPane: '添加选项卡',
-      addCollapsePanel: '添加手风琴卡片',
-      addTableColumn: '添加表格列',
-      addTableSortHandle: '添加排序',
-      addIndex: '添加索引',
-      addOperation: '添加操作',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/ArrayCards.ts b/designable/antd/src/schemas/ArrayCards.ts
deleted file mode 100644
index b970c033a98..00000000000
--- a/designable/antd/src/schemas/ArrayCards.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ArrayTable } from './ArrayTable'
-import { Card } from './Card'
-
-export const ArrayCards = Card
-ArrayCards.Addition = ArrayTable.Addition
diff --git a/designable/antd/src/schemas/ArrayTable.ts b/designable/antd/src/schemas/ArrayTable.ts
deleted file mode 100644
index a88dc4cba8f..00000000000
--- a/designable/antd/src/schemas/ArrayTable.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const ArrayTable: ISchema & { Addition?: ISchema; Column?: ISchema } = {
-  type: 'object',
-  properties: {
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showHeader: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    sticky: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'small',
-      },
-    },
-  },
-}
-
-const Column: ISchema = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    align: {
-      type: 'string',
-      enum: ['left', 'right', 'center'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'left',
-        optionType: 'button',
-      },
-    },
-    colSpan: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    width: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    fixed: {
-      type: 'string',
-      enum: ['left', 'right', false],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-  },
-}
-
-const Addition: ISchema = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    method: {
-      type: 'string',
-      enum: ['push', 'unshift'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'push',
-        optionType: 'button',
-      },
-    },
-    defaultValue: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-    },
-  },
-}
-
-ArrayTable.Column = Column
-ArrayTable.Addition = Addition
diff --git a/designable/antd/src/schemas/CSSStyle.ts b/designable/antd/src/schemas/CSSStyle.ts
deleted file mode 100644
index 53563535aa0..00000000000
--- a/designable/antd/src/schemas/CSSStyle.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const CSSStyle: ISchema = {
-  type: 'void',
-  properties: {
-    'style.width': {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    'style.height': {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    'style.display': {
-      'x-component': 'DisplayStyleSetter',
-    },
-    'style.background': {
-      'x-component': 'BackgroundStyleSetter',
-    },
-    'style.boxShadow': {
-      'x-component': 'BoxShadowStyleSetter',
-    },
-    'style.font': {
-      'x-component': 'FontStyleSetter',
-    },
-    'style.margin': {
-      'x-component': 'BoxStyleSetter',
-    },
-    'style.padding': {
-      'x-component': 'BoxStyleSetter',
-    },
-    'style.borderRadius': {
-      'x-component': 'BorderRadiusStyleSetter',
-    },
-    'style.border': {
-      'x-component': 'BorderStyleSetter',
-    },
-    'style.opacity': {
-      'x-decorator': 'FormItem',
-      'x-component': 'Slider',
-      'x-component-props': {
-        defaultValue: 1,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Card.ts b/designable/antd/src/schemas/Card.ts
deleted file mode 100644
index 22ef2b083ba..00000000000
--- a/designable/antd/src/schemas/Card.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import { ISchema } from '@formily/react'
-
-export const Card: ISchema & { Addition?: ISchema } = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    extra: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    type: {
-      type: 'boolean',
-      enum: GlobalRegistry.getDesignerMessage('settings.cardTypes'),
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: '',
-        optionType: 'button',
-      },
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Cascader.ts b/designable/antd/src/schemas/Cascader.ts
deleted file mode 100644
index e7b7d7d40ae..00000000000
--- a/designable/antd/src/schemas/Cascader.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Cascader: ISchema = {
-  type: 'object',
-  properties: {
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    changeOnSelect: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    displayRender: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    fieldNames: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    notFoundContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: 'Not Found',
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'middle',
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Checkbox.ts b/designable/antd/src/schemas/Checkbox.ts
deleted file mode 100644
index 9c152bbdb92..00000000000
--- a/designable/antd/src/schemas/Checkbox.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Checkbox: ISchema & { Group?: ISchema } = {
-  type: 'object',
-  properties: {
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/DatePicker.ts b/designable/antd/src/schemas/DatePicker.ts
deleted file mode 100644
index 5b72fcf4710..00000000000
--- a/designable/antd/src/schemas/DatePicker.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { ISchema } from '@formily/react'
-
-const CommonDatePickerAPI = {
-  allowClear: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-    'x-component-props': {
-      defaultChecked: true,
-    },
-  },
-  autoFocus: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  bordered: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-    'x-component-props': {
-      defaultChecked: true,
-    },
-  },
-  disabledTime: {
-    'x-decorator': 'FormItem',
-    'x-component': 'ValueInput',
-    'x-component-props': {
-      include: ['EXPRESSION'],
-    },
-  },
-  disabledDate: {
-    'x-decorator': 'FormItem',
-    'x-component': 'ValueInput',
-    'x-component-props': {
-      include: ['EXPRESSION'],
-    },
-  },
-  inputReadOnly: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  placeholder: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  size: {
-    type: 'string',
-    enum: ['large', 'small', 'middle', null],
-    'x-decorator': 'FormItem',
-    'x-component': 'Select',
-    'x-component-props': {
-      defaultValue: 'middle',
-    },
-  },
-  format: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-    'x-component-props': {
-      placeholder: 'YYYY-MM-DD',
-    },
-  },
-}
-
-export const DatePicker: ISchema & { RangePicker?: ISchema } = {
-  type: 'object',
-  properties: {
-    picker: {
-      type: 'string',
-      enum: ['time', 'date', 'month', 'year', 'decade'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'date',
-      },
-    },
-    ...CommonDatePickerAPI,
-    showNow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showTime: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showToday: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-DatePicker.RangePicker = {
-  type: 'object',
-  properties: {
-    picker: {
-      type: 'string',
-      enum: ['time', 'date', 'month', 'year', 'decade'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'date',
-      },
-    },
-    ...CommonDatePickerAPI,
-    showTime: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Form.ts b/designable/antd/src/schemas/Form.ts
deleted file mode 100644
index 1d5e472ab9f..00000000000
--- a/designable/antd/src/schemas/Form.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ISchema } from '@formily/react'
-import { FormLayout } from './FormLayout'
-import { CSSStyle } from './CSSStyle'
-
-export const Form: ISchema = {
-  type: 'object',
-  properties: {
-    ...(FormLayout.properties as any),
-    style: CSSStyle,
-  },
-}
diff --git a/designable/antd/src/schemas/FormCollapse.ts b/designable/antd/src/schemas/FormCollapse.ts
deleted file mode 100644
index 328ba1398dc..00000000000
--- a/designable/antd/src/schemas/FormCollapse.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormCollapse: ISchema & { CollapsePanel?: ISchema } = {
-  type: 'object',
-  properties: {
-    accordion: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    collapsible: {
-      type: 'string',
-      enum: ['header', 'disabled'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'header',
-        optionType: 'button',
-      },
-    },
-    ghost: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
-
-FormCollapse.CollapsePanel = {
-  type: 'object',
-  properties: {
-    collapsible: {
-      type: 'string',
-      enum: ['header', 'disabled'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'header',
-        optionType: 'button',
-      },
-    },
-    header: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    extra: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/FormGrid.ts b/designable/antd/src/schemas/FormGrid.ts
deleted file mode 100644
index 73a1fbea9f8..00000000000
--- a/designable/antd/src/schemas/FormGrid.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormGrid: ISchema = {
-  type: 'object',
-  properties: {
-    minWidth: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 100,
-      },
-    },
-    maxWidth: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    minColumns: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 0,
-      },
-    },
-    maxColumns: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    breakpoints: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    columnGap: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 10,
-      },
-    },
-    rowGap: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 5,
-      },
-    },
-    colWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/FormItem.ts b/designable/antd/src/schemas/FormItem.ts
deleted file mode 100644
index 354cbd7c417..00000000000
--- a/designable/antd/src/schemas/FormItem.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormItem: ISchema = {
-  type: 'object',
-  properties: {
-    tooltip: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonBefore: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    labelCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    wrapperCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    labelWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    wrapperWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    colon: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    asterisk: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    gridSpan: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    feedbackLayout: {
-      type: 'string',
-      enum: ['loose', 'terse', 'popover', 'none', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'loose',
-      },
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'default', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    layout: {
-      type: 'string',
-      enum: ['vertical', 'horizontal', 'inline', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-      },
-    },
-
-    tooltipLayout: {
-      type: 'string',
-      enum: ['icon', 'text', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'icon',
-      },
-    },
-    labelAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'right',
-      },
-    },
-    wrapperAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'left',
-      },
-    },
-    labelWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    wrapperWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    fullness: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    inset: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/FormLayout.ts b/designable/antd/src/schemas/FormLayout.ts
deleted file mode 100644
index 366d27b5f3e..00000000000
--- a/designable/antd/src/schemas/FormLayout.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const FormLayout: ISchema = {
-  type: 'object',
-  properties: {
-    labelCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    wrapperCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    labelWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    wrapperWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    colon: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    feedbackLayout: {
-      type: 'string',
-      enum: ['loose', 'terse', 'popover', 'none', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'loose',
-      },
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'default', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    layout: {
-      type: 'string',
-      enum: ['vertical', 'horizontal', 'inline', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-      },
-    },
-    tooltipLayout: {
-      type: 'string',
-      enum: ['icon', 'text', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'icon',
-      },
-    },
-    labelAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'right',
-      },
-    },
-    wrapperAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'left',
-      },
-    },
-    labelWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    wrapperWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-
-    fullness: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    inset: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    shallow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/FormTab.ts b/designable/antd/src/schemas/FormTab.ts
deleted file mode 100644
index 5074ca66159..00000000000
--- a/designable/antd/src/schemas/FormTab.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import { ISchema } from '@formily/react'
-
-export const FormTab: ISchema & { TabPane?: ISchema } = {
-  type: 'object',
-  properties: {
-    animated: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    centered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'default', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    type: {
-      type: 'string',
-      enum: GlobalRegistry.getDesignerMessage('settings.tabsTypeEnum'),
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'line',
-        optionType: 'button',
-      },
-    },
-  },
-}
-
-FormTab.TabPane = {
-  type: 'object',
-  properties: {
-    tab: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Input.ts b/designable/antd/src/schemas/Input.ts
deleted file mode 100644
index 641033ee824..00000000000
--- a/designable/antd/src/schemas/Input.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Input: ISchema & { TextArea?: ISchema } = {
-  type: 'object',
-  properties: {
-    addonBefore: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    prefix: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    suffix: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    maxLength: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'middle',
-      },
-    },
-  },
-}
-
-Input.TextArea = {
-  type: 'object',
-  properties: {
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    maxLength: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    autoSize: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showCount: {
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/NumberPicker.ts b/designable/antd/src/schemas/NumberPicker.ts
deleted file mode 100644
index 7b026706fef..00000000000
--- a/designable/antd/src/schemas/NumberPicker.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const NumberPicker: ISchema = {
-  type: 'object',
-  properties: {
-    decimalSeparator: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    precision: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    max: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    min: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    step: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'middle',
-      },
-    },
-    formatter: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    parser: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    stringMode: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    keyboard: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Password.ts b/designable/antd/src/schemas/Password.ts
deleted file mode 100644
index 972ad912052..00000000000
--- a/designable/antd/src/schemas/Password.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ISchema } from '@formily/react'
-import { Input } from './Input'
-export const Password: ISchema = {
-  type: 'object',
-  properties: {
-    ...(Input.properties as any),
-    checkStrength: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Radio.ts b/designable/antd/src/schemas/Radio.ts
deleted file mode 100644
index 7101ab5051e..00000000000
--- a/designable/antd/src/schemas/Radio.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Radio: ISchema & { Group?: ISchema } = {
-  type: 'object',
-  properties: {
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-Radio.Group = {
-  type: 'object',
-  properties: {
-    optionType: {
-      type: 'string',
-      enum: ['default', 'button'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'default',
-        optionType: 'button',
-      },
-    },
-    buttonStyle: {
-      type: 'string',
-      enum: ['outline', 'solid'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'outline',
-        optionType: 'button',
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Rate.ts b/designable/antd/src/schemas/Rate.ts
deleted file mode 100644
index 1c03dbe0529..00000000000
--- a/designable/antd/src/schemas/Rate.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Rate: ISchema = {
-  type: 'object',
-  properties: {
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    count: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 5,
-      },
-    },
-    allowHalf: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    tooltips: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Select.ts b/designable/antd/src/schemas/Select.ts
deleted file mode 100644
index eb340cc30c9..00000000000
--- a/designable/antd/src/schemas/Select.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Select: ISchema = {
-  type: 'object',
-  properties: {
-    mode: {
-      type: 'string',
-      enum: ['multiple', 'tags', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: null,
-        optionType: 'button',
-      },
-    },
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    autoClearSearchValue: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    dropdownMatchSelectWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    defaultActiveFirstOption: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    defaultOpen: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    labelInValue: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showArrow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    virtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultValue: true,
-      },
-    },
-    filterOption: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['BOOLEAN', 'EXPRESSION'],
-      },
-    },
-    filterSort: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    listHeight: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 256,
-      },
-    },
-    maxTagCount: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    maxTagPlaceholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    maxTagTextLength: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    notFoundContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: 'Not Found',
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'middle',
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Slider.ts b/designable/antd/src/schemas/Slider.ts
deleted file mode 100644
index 00e185512a6..00000000000
--- a/designable/antd/src/schemas/Slider.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import { ISchema } from '@formily/react'
-
-export const Slider: ISchema = {
-  type: 'object',
-  properties: {
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    dots: {
-      title: GlobalRegistry.getDesignerMessage('settings.sliderDots'),
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    range: {
-      title: GlobalRegistry.getDesignerMessage('settings.sliderRange'),
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    reverse: {
-      title: GlobalRegistry.getDesignerMessage('settings.sliderReverse'),
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    vertical: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    tooltipVisible: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    tooltipPlacement: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    marks: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    max: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 100,
-      },
-    },
-    min: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 0,
-      },
-    },
-    step: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 1,
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Space.ts b/designable/antd/src/schemas/Space.ts
deleted file mode 100644
index da16defeaa7..00000000000
--- a/designable/antd/src/schemas/Space.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Space: ISchema = {
-  type: 'object',
-  properties: {
-    align: {
-      type: 'string',
-      enum: ['start', 'end', 'center', 'baseline'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-    },
-    direction: {
-      type: 'string',
-      enum: ['vertical', 'horizontal'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-        optionType: 'button',
-      },
-    },
-    size: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 8,
-      },
-    },
-    split: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    wrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Switch.ts b/designable/antd/src/schemas/Switch.ts
deleted file mode 100644
index 1b5a158ebbd..00000000000
--- a/designable/antd/src/schemas/Switch.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Switch: ISchema = {
-  type: 'object',
-  properties: {
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'default', ''],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Text.ts b/designable/antd/src/schemas/Text.ts
deleted file mode 100644
index 66784e1c78e..00000000000
--- a/designable/antd/src/schemas/Text.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Text: ISchema = {
-  type: 'object',
-  properties: {
-    content: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input.TextArea',
-    },
-    mode: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'normal',
-      },
-      enum: ['h1', 'h2', 'h3', 'p', 'normal'],
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/TimePicker.ts b/designable/antd/src/schemas/TimePicker.ts
deleted file mode 100644
index 8bb9a28f9f6..00000000000
--- a/designable/antd/src/schemas/TimePicker.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const CommonTimePickerAPI = {
-  allowClear: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-    'x-component-props': {
-      defaultChecked: true,
-    },
-  },
-  autoFocus: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  bordered: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-    'x-component-props': {
-      defaultChecked: true,
-    },
-  },
-  clearText: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  disabledHours: {
-    'x-decorator': 'FormItem',
-    'x-component': 'ValueInput',
-    'x-component-props': {
-      include: ['EXPRESSION'],
-    },
-  },
-  disabledMinutes: {
-    'x-decorator': 'FormItem',
-    'x-component': 'ValueInput',
-    'x-component-props': {
-      include: ['EXPRESSION'],
-    },
-  },
-  disabledSeconds: {
-    'x-decorator': 'FormItem',
-    'x-component': 'ValueInput',
-    'x-component-props': {
-      include: ['EXPRESSION'],
-    },
-  },
-  hideDisabledOptions: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  inputReadOnly: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  showNow: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  use12Hours: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  hourStep: {
-    type: 'number',
-    'x-decorator': 'FormItem',
-    'x-component': 'NumberPicker',
-    'x-component-props': {
-      defaultValue: 1,
-    },
-  },
-  minuteStep: {
-    type: 'number',
-    'x-decorator': 'FormItem',
-    'x-component': 'NumberPicker',
-    'x-component-props': {
-      defaultValue: 1,
-    },
-  },
-  secondStep: {
-    type: 'number',
-    'x-decorator': 'FormItem',
-    'x-component': 'NumberPicker',
-    'x-component-props': {
-      defaultValue: 1,
-    },
-  },
-  placeholder: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  size: {
-    type: 'string',
-    enum: ['large', 'small', 'middle', null],
-    'x-decorator': 'FormItem',
-    'x-component': 'Select',
-  },
-  format: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-    'x-component-props': {
-      placeholder: 'YYYY-MM-DD',
-    },
-  },
-}
-
-export const TimePicker: ISchema & { RangePicker?: ISchema } = {
-  type: 'object',
-  properties: CommonTimePickerAPI,
-}
-
-TimePicker.RangePicker = {
-  type: 'object',
-  properties: CommonTimePickerAPI,
-}
diff --git a/designable/antd/src/schemas/Transfer.ts b/designable/antd/src/schemas/Transfer.ts
deleted file mode 100644
index 7873d1d9213..00000000000
--- a/designable/antd/src/schemas/Transfer.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Transfer: ISchema = {
-  type: 'object',
-  properties: {
-    oneWay: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showSearchAll: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    filterOption: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    operations: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    titles: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/TreeSelect.ts b/designable/antd/src/schemas/TreeSelect.ts
deleted file mode 100644
index 96cc1dfd38e..00000000000
--- a/designable/antd/src/schemas/TreeSelect.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const TreeSelect: ISchema = {
-  type: 'object',
-  properties: {
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    autoClearSearchValue: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    labelInValue: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showArrow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    virtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    treeCheckable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    treeDefaultExpandAll: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    dropdownMatchSelectWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showCheckedStrategy: {
-      type: 'string',
-      enum: ['SHOW_ALL', 'SHOW_PARENT', 'SHOW_CHILD'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'SHOW_CHILD',
-      },
-    },
-    treeDefaultExpandedKeys: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    treeNodeFilterProp: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    treeNodeLabelProp: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    filterTreeNode: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['BOOLEAN', 'EXPRESSION'],
-      },
-    },
-    treeDataSimpleMode: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['BOOLEAN', 'EXPRESSION'],
-      },
-    },
-    listHeight: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 256,
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    size: {
-      type: 'string',
-      enum: ['large', 'small', 'middle', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'middle',
-      },
-    },
-  },
-}
diff --git a/designable/antd/src/schemas/Upload.ts b/designable/antd/src/schemas/Upload.ts
deleted file mode 100644
index a43dc306041..00000000000
--- a/designable/antd/src/schemas/Upload.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Upload: ISchema & { Dragger?: ISchema } = {
-  type: 'object',
-  properties: {
-    textContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    accept: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    action: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['TEXT', 'EXPRESSION'],
-      },
-    },
-    name: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: 'file',
-      },
-    },
-    maxCount: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    method: {
-      enum: ['POST', 'PUT', 'GET'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'POST',
-        optionType: 'button',
-      },
-    },
-    data: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    headers: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-
-    listType: {
-      enum: ['text', 'picture', 'picture-card'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'text',
-        optionType: 'button',
-      },
-    },
-    directory: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    multiple: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    openFileDialogOnClick: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showUploadList: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    withCredentials: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-Upload.Dragger = Upload
diff --git a/designable/antd/src/schemas/index.ts b/designable/antd/src/schemas/index.ts
deleted file mode 100644
index e046ffae474..00000000000
--- a/designable/antd/src/schemas/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export * from './Input'
-export * from './Text'
-export * from './FormLayout'
-export * from './CSSStyle'
-export * from './Form'
-export * from './FormItem'
-export * from './Select'
-export * from './Card'
-export * from './Cascader'
-export * from './Checkbox'
-export * from './Radio'
-export * from './DatePicker'
-export * from './NumberPicker'
-export * from './Password'
-export * from './Rate'
-export * from './Slider'
-export * from './TimePicker'
-export * from './TreeSelect'
-export * from './Transfer'
-export * from './Upload'
-export * from './Switch'
-export * from './FormGrid'
-export * from './Space'
-export * from './FormTab'
-export * from './FormCollapse'
-export * from './ArrayTable'
-export * from './ArrayCards'
diff --git a/designable/antd/src/shared.ts b/designable/antd/src/shared.ts
deleted file mode 100644
index 0edd6e34f8c..00000000000
--- a/designable/antd/src/shared.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { TreeNode, Engine } from '@designable/core'
-
-export type ComponentNameMatcher =
-  | string
-  | string[]
-  | ((name: string, node: TreeNode, context?: any) => boolean)
-
-export const matchComponent = (
-  node: TreeNode,
-  name: ComponentNameMatcher,
-  context?: any
-) => {
-  if (name === '*') return true
-  const componentName = node?.props?.['x-component']
-  if (typeof name === 'function')
-    return name(componentName || '', node, context)
-  if (Array.isArray(name)) return name.includes(componentName)
-  return componentName === name
-}
-
-export const matchChildComponent = (
-  node: TreeNode,
-  name: ComponentNameMatcher,
-  context?: any
-) => {
-  if (name === '*') return true
-  const componentName = node?.props?.['x-component']
-  if (!componentName) return false
-  if (typeof name === 'function')
-    return name(componentName || '', node, context)
-  if (Array.isArray(name)) return name.includes(componentName)
-  return componentName.indexOf(`${name}.`) > -1
-}
-
-export const includesComponent = (
-  node: TreeNode,
-  names: ComponentNameMatcher[],
-  target?: TreeNode
-) => {
-  return names.some((name) => matchComponent(node, name, target))
-}
-
-export const queryNodesByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-): TreeNode[] => {
-  if (path?.length === 0) return []
-  if (path?.length === 1) {
-    if (matchComponent(node, path[0])) {
-      return [node]
-    }
-  }
-  return matchComponent(node, path[0])
-    ? node.children.reduce((buf, child) => {
-        return buf.concat(queryNodesByComponentPath(child, path.slice(1)))
-      }, [])
-    : []
-}
-
-export const findNodeByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-): TreeNode => {
-  if (path?.length === 0) return
-  if (path?.length === 1) {
-    if (matchComponent(node, path[0])) {
-      return node
-    }
-  }
-  if (matchComponent(node, path[0])) {
-    for (let i = 0; i < node.children.length; i++) {
-      const next = findNodeByComponentPath(node.children[i], path.slice(1))
-      if (next) {
-        return next
-      }
-    }
-  }
-}
-
-export const hasNodeByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-) => !!findNodeByComponentPath(node, path)
-
-export const matchArrayItemsNode = (node: TreeNode) => {
-  return (
-    node?.parent?.props?.type === 'array' &&
-    node?.parent?.children?.[0] === node
-  )
-}
-
-export const createNodeId = (designer: Engine, id: string) => {
-  return {
-    [designer.props.nodeIdAttrName]: id,
-  }
-}
-
-export const createEnsureTypeItemsNode = (type: string) => (node: TreeNode) => {
-  const objectNode = node.children.find((child) => child.props['type'] === type)
-  if (
-    objectNode &&
-    objectNode.designerProps.droppable &&
-    !objectNode.props['x-component']
-  ) {
-    return objectNode
-  } else {
-    const newObjectNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type,
-      },
-    })
-    node.prepend(newObjectNode)
-    return newObjectNode
-  }
-}
diff --git a/designable/antd/src/sources/arrays.ts b/designable/antd/src/sources/arrays.ts
deleted file mode 100644
index 0f8cb421140..00000000000
--- a/designable/antd/src/sources/arrays.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('arrays', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'array',
-      'x-decorator': 'FormItem',
-      'x-component': 'ArrayTable',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'array',
-      'x-decorator': 'FormItem',
-      'x-component': 'ArrayCards',
-      'x-component-props': {
-        title: `Title`,
-      },
-    },
-  },
-])
diff --git a/designable/antd/src/sources/displays.ts b/designable/antd/src/sources/displays.ts
deleted file mode 100644
index 8506ea95256..00000000000
--- a/designable/antd/src/sources/displays.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('displays', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Text',
-    },
-  },
-])
diff --git a/designable/antd/src/sources/index.ts b/designable/antd/src/sources/index.ts
deleted file mode 100644
index c9da47ecd8a..00000000000
--- a/designable/antd/src/sources/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import './inputs'
-import './layouts'
-import './arrays'
-import './displays'
diff --git a/designable/antd/src/sources/inputs.ts b/designable/antd/src/sources/inputs.ts
deleted file mode 100644
index 703584626d7..00000000000
--- a/designable/antd/src/sources/inputs.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('inputs', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Input',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'TextArea',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input.TextArea',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Select',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Tree Select',
-      'x-decorator': 'FormItem',
-      'x-component': 'TreeSelect',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Cascader',
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string | number',
-      title: 'Radio Group',
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      enum: [
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 },
-      ],
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<string | number>',
-      title: 'Checkbox Group',
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox.Group',
-      enum: [
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 },
-      ],
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'Slider',
-      'x-decorator': 'FormItem',
-      'x-component': 'Slider',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'Rate',
-      'x-decorator': 'FormItem',
-      'x-component': 'Rate',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'DatePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: '[string,string]',
-      title: 'DateRangePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker.RangePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'TimePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'TimePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: '[string,string]',
-      title: 'TimeRangePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'TimePicker.RangePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'NumberPicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'Password',
-      'x-decorator': 'FormItem',
-      'x-component': 'Password',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<string>',
-      title: 'Transfer',
-      'x-decorator': 'FormItem',
-      'x-component': 'Transfer',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<object>',
-      title: 'Upload',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        textContent: 'Upload',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<object>',
-      title: 'Drag Upload',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload.Dragger',
-      'x-component-props': {
-        textContent: 'Click or drag file to this area to upload',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'boolean',
-      title: 'Switch',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'object',
-    },
-  },
-])
diff --git a/designable/antd/src/sources/layouts.ts b/designable/antd/src/sources/layouts.ts
deleted file mode 100644
index f7809a01540..00000000000
--- a/designable/antd/src/sources/layouts.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('layouts', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Card',
-      'x-component-props': {
-        title: 'Title',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormGrid',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormLayout',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Space',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormTab',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormCollapse',
-    },
-  },
-])
diff --git a/designable/next/.npmignore b/designable/next/.npmignore
deleted file mode 100644
index 1ff337420fd..00000000000
--- a/designable/next/.npmignore
+++ /dev/null
@@ -1,11 +0,0 @@
-node_modules
-*.log
-build
-docs
-doc-site
-__tests__
-.eslintrc
-jest.config.js
-tsconfig.json
-.umi
-src
\ No newline at end of file
diff --git a/designable/next/.umirc.js b/designable/next/.umirc.js
deleted file mode 100644
index 1362b3c43c6..00000000000
--- a/designable/next/.umirc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { resolve } from 'path'
-export default {
-  mode: 'site',
-  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-  title: 'Formily',
-  hash: true,
-  favicon:
-    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
-  outputPath: './doc-site',
-  navs: [
-    {
-      title: 'Ant Design',
-      path: '/components',
-    },
-    {
-      title: '主站',
-      path: 'https://v2.formilyjs.org',
-    },
-    {
-      title: 'GITHUB',
-      path: 'https://github.com/alibaba/formily',
-    },
-  ],
-  styles: [
-    `.__dumi-default-navbar-logo{
-      height: 60px !important;
-      width: 150px !important;
-      padding-left:0 !important;
-      color: transparent !important;
-    }
-    .__dumi-default-navbar{
-      padding: 0 28px !important;
-    }
-    .__dumi-default-layout-hero{
-      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-    nav a{
-      text-decoration: none !important;
-    }
-    `,
-  ],
-}
diff --git a/designable/next/LICENSE.md b/designable/next/LICENSE.md
deleted file mode 100644
index 509632e8e80..00000000000
--- a/designable/next/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/designable/next/README.md b/designable/next/README.md
deleted file mode 100644
index 79f8236d6e2..00000000000
--- a/designable/next/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @formily/designable-next
-
-### Install
-
-```bash
-npm install --save @formily/designable-next
-```
diff --git a/designable/next/copy.ts b/designable/next/copy.ts
deleted file mode 100644
index 669b8f3af0d..00000000000
--- a/designable/next/copy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runCopy } from '../../scripts/build-style'
-
-runCopy({
-  esStr: '@alifd/next/es/',
-  libStr: '@alifd/next/lib/',
-})
diff --git a/designable/next/package.json b/designable/next/package.json
deleted file mode 100644
index 8ed260399e6..00000000000
--- a/designable/next/package.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-  "name": "@formily/designable-next",
-  "version": "2.0.0-rc.7",
-  "license": "MIT",
-  "main": "lib",
-  "module": "esm",
-  "umd:main": "dist/formily.designable.next.umd.production.js",
-  "unpkg": "dist/formily.designable.next.umd.production.js",
-  "jsdelivr": "dist/formily.designable.next.umd.production.js",
-  "jsnext:main": "esm",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alibaba/formily.git"
-  },
-  "types": "esm/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/alibaba/formily/issues"
-  },
-  "homepage": "https://github.com/alibaba/formily#readme",
-  "engines": {
-    "npm": ">=3.0.0"
-  },
-  "scripts": {
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && ts-node copy",
-    "build:cjs": "tsc --project tsconfig.build.json",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
-    "build:umd": "rollup --config",
-    "build:playground": "webpack-cli --config playground/webpack.prod.ts",
-    "start": "webpack-dev-server --config playground/webpack.dev.ts"
-  },
-  "devDependencies": {
-    "@designable/react-settings-form": "^0.x",
-    "autoprefixer": "^9.0",
-    "file-loader": "^5.0.2",
-    "fs-extra": "^8.1.0",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "monaco-editor-webpack-plugin": "^4.0.0",
-    "raw-loader": "^4.0.0",
-    "react-monaco-editor": "^0.43.0",
-    "style-loader": "^1.1.3",
-    "ts-loader": "^7.0.4",
-    "typescript": "4.1.5",
-    "webpack": "^4.41.5",
-    "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
-  },
-  "peerDependencies": {
-    "@alifd/next": "^1.23.0",
-    "@types/react": ">=16.8.0 || >=17.0.0",
-    "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "antd": "^4.0.0",
-    "react": ">=16.8.0 || >=17.0.0",
-    "react-dom": ">=16.8.0",
-    "react-is": ">=16.8.0 || >=17.0.0"
-  },
-  "dependencies": {
-    "@designable/core": "^0.x",
-    "@designable/formily": "^0.x",
-    "@designable/react": "^0.x",
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/designable-setters": "2.0.0-rc.7",
-    "@formily/next": "2.0.0-rc.7",
-    "@formily/react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "2c44ae410a73f02735c63c6430e021a50e21f3ec"
-}
diff --git a/designable/next/playground/main.tsx b/designable/next/playground/main.tsx
deleted file mode 100644
index 65bf9a67592..00000000000
--- a/designable/next/playground/main.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import {
-  Designer,
-  DesignerToolsWidget,
-  ViewToolsWidget,
-  Workspace,
-  OutlineTreeWidget,
-  DragSourceWidget,
-  HistoryWidget,
-  MainPanel,
-  CompositePanel,
-  WorkspacePanel,
-  ToolbarPanel,
-  ViewportPanel,
-  ViewPanel,
-  SettingsPanel,
-  ComponentTreeWidget,
-} from '@designable/react'
-import { SettingsForm } from '@designable/react-settings-form'
-import {
-  createDesigner,
-  GlobalRegistry,
-  Shortcut,
-  KeyCode,
-} from '@designable/core'
-import { createDesignableField, createDesignableForm } from '../src'
-import {
-  LogoWidget,
-  ActionsWidget,
-  PreviewWidget,
-  SchemaEditorWidget,
-  MarkupSchemaWidget,
-} from './widgets'
-import { saveSchema } from './service'
-import 'antd/dist/antd.less'
-import '@alifd/next/dist/next.css'
-
-GlobalRegistry.registerDesignerLocales({
-  'zh-CN': {
-    sources: {
-      Inputs: '输入控件',
-      Layouts: '布局组件',
-      Arrays: '自增组件',
-      Displays: '展示组件',
-    },
-  },
-  'en-US': {
-    sources: {
-      Inputs: 'Inputs',
-      Layouts: 'Layouts',
-      Arrays: 'Arrays',
-      Displays: 'Displays',
-    },
-  },
-})
-
-const Root = createDesignableForm({
-  registryName: 'Root',
-})
-
-const DesignableField = createDesignableField({
-  registryName: 'DesignableField',
-})
-
-const SaveShortCut = new Shortcut({
-  codes: [
-    [KeyCode.Meta, KeyCode.S],
-    [KeyCode.Control, KeyCode.S],
-  ],
-  handler(ctx) {
-    saveSchema(ctx.engine)
-  },
-})
-
-const engine = createDesigner({
-  shortcuts: [SaveShortCut],
-})
-
-const App = () => {
-  return (
-    <Designer engine={engine}>
-      <MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
-        <CompositePanel>
-          <CompositePanel.Item title="panels.Component" icon="Component">
-            <DragSourceWidget title="sources.Inputs" name="inputs" />
-            <DragSourceWidget title="sources.Layouts" name="layouts" />
-            <DragSourceWidget title="sources.Arrays" name="arrays" />
-            <DragSourceWidget title="sources.Displays" name="displays" />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
-            <OutlineTreeWidget />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="panels.History" icon="History">
-            <HistoryWidget />
-          </CompositePanel.Item>
-        </CompositePanel>
-        <Workspace id="form">
-          <WorkspacePanel>
-            <ToolbarPanel>
-              <DesignerToolsWidget />
-              <ViewToolsWidget
-                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
-              />
-            </ToolbarPanel>
-            <ViewportPanel>
-              <ViewPanel type="DESIGNABLE">
-                {() => (
-                  <ComponentTreeWidget
-                    components={{
-                      Root,
-                      DesignableField,
-                    }}
-                  />
-                )}
-              </ViewPanel>
-              <ViewPanel type="JSONTREE" scrollable={false}>
-                {(tree, onChange) => (
-                  <SchemaEditorWidget tree={tree} onChange={onChange} />
-                )}
-              </ViewPanel>
-              <ViewPanel type="MARKUP" scrollable={false}>
-                {(tree) => <MarkupSchemaWidget tree={tree} />}
-              </ViewPanel>
-              <ViewPanel type="PREVIEW">
-                {(tree) => <PreviewWidget tree={tree} />}
-              </ViewPanel>
-            </ViewportPanel>
-          </WorkspacePanel>
-        </Workspace>
-        <SettingsPanel title="panels.PropertySettings">
-          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
-        </SettingsPanel>
-      </MainPanel>
-    </Designer>
-  )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/designable/next/playground/service/index.ts b/designable/next/playground/service/index.ts
deleted file mode 100644
index cb7cdd48bd0..00000000000
--- a/designable/next/playground/service/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './schema'
diff --git a/designable/next/playground/service/schema.ts b/designable/next/playground/service/schema.ts
deleted file mode 100644
index 1c7b2c63996..00000000000
--- a/designable/next/playground/service/schema.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Engine } from '@designable/core'
-import { transformToSchema, transformToTreeNode } from '@designable/formily'
-import { message } from 'antd'
-
-export const saveSchema = (designer: Engine) => {
-  localStorage.setItem(
-    'formily-schema',
-    JSON.stringify(
-      transformToSchema(designer.getCurrentTree(), {
-        designableFieldName: 'DesignableField',
-        designableFormName: 'Root',
-      })
-    )
-  )
-  message.success('Save Success')
-}
-
-export const loadInitialSchema = (designer: Engine) => {
-  try {
-    designer.setCurrentTree(
-      transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')), {
-        designableFieldName: 'DesignableField',
-        designableFormName: 'Root',
-      })
-    )
-  } catch {}
-}
diff --git a/designable/next/playground/template.ejs b/designable/next/playground/template.ejs
deleted file mode 100644
index a4dd656fb7d..00000000000
--- a/designable/next/playground/template.ejs
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <title>
-    Designable Playground
-  </title>
-  <style>
-    html,body{
-      user-select: none;
-      -webkit-user-select: none;
-    }
-  </style>
-</head>
-<body>
-  <div id="root">
-  </div>
-  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
-  <script src="https://unpkg.com/react/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
-  <script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
-</body>
\ No newline at end of file
diff --git a/designable/next/playground/webpack.base.ts b/designable/next/playground/webpack.base.ts
deleted file mode 100644
index 688533b50cb..00000000000
--- a/designable/next/playground/webpack.base.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import path from 'path'
-import fs from 'fs-extra'
-import { GlobSync } from 'glob'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import autoprefixer from 'autoprefixer'
-//import { getThemeVariables } from 'antd/dist/theme'
-
-const getWorkspaceAlias = () => {
-  const basePath = path.resolve(__dirname, '../../../')
-  const pkg = fs.readJSONSync(path.resolve(basePath, 'package.json')) || {}
-  const results = {}
-  const workspaces = pkg.workspaces
-  if (Array.isArray(workspaces)) {
-    workspaces.forEach((pattern) => {
-      const { found } = new GlobSync(pattern, { cwd: basePath })
-      found.forEach((name) => {
-        const pkg = fs.readJSONSync(
-          path.resolve(basePath, name, './package.json')
-        )
-        results[pkg.name] = path.resolve(basePath, name, './src')
-      })
-    })
-  }
-  return results
-}
-
-export default {
-  mode: 'development',
-  devtool: 'inline-source-map', // 嵌入到源文件中
-  stats: {
-    entrypoints: false,
-    children: false,
-  },
-  entry: {
-    playground: path.resolve(__dirname, './main'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../build'),
-    filename: '[name].[hash].bundle.js',
-  },
-  resolve: {
-    modules: ['node_modules'],
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
-    alias: getWorkspaceAlias(),
-  },
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    moment: 'moment',
-    antd: 'antd',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: require.resolve('ts-loader'),
-            options: {
-              transpileOnly: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
-      },
-      {
-        test: /\.less$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          { loader: 'css-loader' },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => autoprefixer(),
-            },
-          },
-          {
-            loader: 'less-loader',
-            options: {
-              // modifyVars: getThemeVariables({
-              //   dark: true // 开启暗黑模式
-              // }),
-              javascriptEnabled: true,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => autoprefixer(),
-            },
-          },
-          {
-            loader: 'sass-loader',
-          },
-        ],
-      },
-      {
-        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: ['url-loader'],
-      },
-      {
-        test: /\.html?$/,
-        loader: require.resolve('file-loader'),
-        options: {
-          name: '[name].[ext]',
-        },
-      },
-    ],
-  },
-}
diff --git a/designable/next/playground/widgets/ActionsWidget.tsx b/designable/next/playground/widgets/ActionsWidget.tsx
deleted file mode 100644
index 6ef85e1c374..00000000000
--- a/designable/next/playground/widgets/ActionsWidget.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useEffect } from 'react'
-import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
-import { useDesigner, TextWidget } from '@designable/react'
-import { GlobalRegistry } from '@designable/core'
-import { observer } from '@formily/react'
-import { loadInitialSchema, saveSchema } from '../service'
-
-export const ActionsWidget = observer(() => {
-  const designer = useDesigner()
-  useEffect(() => {
-    loadInitialSchema(designer)
-  }, [])
-  return (
-    <Space style={{ marginRight: 10 }}>
-      <Button href="https://designable-antd.formilyjs.org">Ant Design</Button>
-      <Radio.Group
-        value={GlobalRegistry.getDesignerLanguage()}
-        optionType="button"
-        options={[
-          { label: 'English', value: 'en-us' },
-          { label: '简体中文', value: 'zh-cn' },
-        ]}
-        onChange={(e) => {
-          GlobalRegistry.setDesignerLanguage(e.target.value)
-        }}
-      />
-      <Button href="https://github.com/alibaba/formily" target="_blank">
-        <GithubOutlined />
-        Github
-      </Button>
-      <Button
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Save</TextWidget>
-      </Button>
-      <Button
-        type="primary"
-        onClick={() => {
-          saveSchema(designer)
-        }}
-      >
-        <TextWidget>Publish</TextWidget>
-      </Button>
-    </Space>
-  )
-})
diff --git a/designable/next/playground/widgets/LogoWidget.tsx b/designable/next/playground/widgets/LogoWidget.tsx
deleted file mode 100644
index fa415acf8c4..00000000000
--- a/designable/next/playground/widgets/LogoWidget.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-export const LogoWidget: React.FC = () => (
-  <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
-    <img
-      src="//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg"
-      style={{ margin: '12px 8px', height: 18, width: 'auto' }}
-    />
-  </div>
-)
diff --git a/designable/next/playground/widgets/MarkupSchemaWidget.tsx b/designable/next/playground/widgets/MarkupSchemaWidget.tsx
deleted file mode 100644
index fe1e9651275..00000000000
--- a/designable/next/playground/widgets/MarkupSchemaWidget.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@designable/core'
-import { MonacoInput } from '@designable/react-settings-form'
-import { isEmpty, isPlainObj } from '@formily/shared'
-
-export interface IMarkupSchemaWidgetProps {
-  tree: TreeNode
-}
-
-const transformToMarkupSchemaCode = (tree: TreeNode) => {
-  const printAttribute = (node: TreeNode) => {
-    if (!node) return ''
-    return `${Object.keys(node.props || {})
-      .map((key) => {
-        if (
-          key === '_designableId' ||
-          key === '_isJSONSchemaObject' ||
-          key === 'version' ||
-          key === 'type'
-        )
-          return ''
-        const value = node.props[key]
-        if (isPlainObj(value) && isEmpty(value)) return ''
-        if (typeof value === 'string') return `${key}="${value}"`
-        return `${key}={${JSON.stringify(value)}}`
-      })
-      .join(' ')}`
-  }
-  const printChildren = (node: TreeNode) => {
-    if (!node) return ''
-    return node.children
-      .map((child) => {
-        return printNode(child)
-      })
-      .join('')
-  }
-  const printTag = (node: TreeNode) => {
-    if (node.props.type === 'string') return 'SchemaField.String'
-    if (node.props.type === 'number') return 'SchemaField.Number'
-    if (node.props.type === 'boolean') return 'SchemaField.Boolean'
-    if (node.props.type === 'date') return 'SchemaField.Date'
-    if (node.props.type === 'datetime') return 'SchemaField.DateTime'
-    if (node.props.type === 'array') return 'SchemaField.Array'
-    if (node.props.type === 'object') return 'SchemaField.Object'
-    if (node.props.type === 'void') return 'SchemaField.Void'
-    return 'SchemaField.Markup'
-  }
-  const printNode = (node: TreeNode) => {
-    if (!node) return ''
-    return `<${printTag(node)} ${printAttribute(node)} ${
-      node.children.length
-        ? `>${printChildren(node)}</${printTag(node)}>`
-        : '/>'
-    }`
-  }
-  const root = tree.find((child) => {
-    return child.componentName === 'Root'
-  })
-  return `import React, { useMemo } from 'react'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from '@formily/next'
-import { Card, Range, Rating } from '@alifd/next'
-
-const Text: React.FC<{
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, content)
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Range,
-    Rating,
-  },
-})
-
-export default ()=>{
-  const form = useMemo(() => createForm(), [])
-
-  return <Form form={form} ${printAttribute(root)}>
-    <SchemaField>
-      ${printChildren(root)}
-    </SchemaField>
-  </Form>
-}
-
-`
-}
-
-export const MarkupSchemaWidget: React.FC<IMarkupSchemaWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      options={{ readOnly: true }}
-      value={transformToMarkupSchemaCode(props.tree)}
-      language="typescript"
-    />
-  )
-}
diff --git a/designable/next/playground/widgets/PreviewWidget.tsx b/designable/next/playground/widgets/PreviewWidget.tsx
deleted file mode 100644
index d3250501804..00000000000
--- a/designable/next/playground/widgets/PreviewWidget.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useMemo } from 'react'
-import { createForm } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import {
-  Form,
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-  FormTab,
-  FormCollapse,
-  ArrayTable,
-  ArrayCards,
-} from '@formily/next'
-import { Card, Range, Rating } from '@alifd/next'
-import { TreeNode } from '@designable/core'
-import { transformToSchema } from '@designable/formily'
-
-const Text: React.FC<{
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-}> = ({ mode, content, ...props }) => {
-  const tagName = mode === 'normal' || !mode ? 'div' : mode
-  return React.createElement(tagName, props, content)
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Space,
-    FormGrid,
-    FormLayout,
-    FormTab,
-    FormCollapse,
-    ArrayTable,
-    ArrayCards,
-    FormItem,
-    DatePicker,
-    Checkbox,
-    Cascader,
-    Editable,
-    Input,
-    Text,
-    NumberPicker,
-    Switch,
-    Password,
-    PreviewText,
-    Radio,
-    Reset,
-    Select,
-    Submit,
-    TimePicker,
-    Transfer,
-    TreeSelect,
-    Upload,
-    Card,
-    Range,
-    Rating,
-  },
-})
-
-export interface IPreviewWidgetProps {
-  tree: TreeNode
-}
-
-export const PreviewWidget: React.FC<IPreviewWidgetProps> = (props) => {
-  const form = useMemo(() => createForm(), [])
-  const { form: formProps, schema } = transformToSchema(props.tree, {
-    designableFormName: 'Root',
-    designableFieldName: 'DesignableField',
-  })
-  return (
-    <Form {...formProps} form={form}>
-      <SchemaField schema={schema} />
-    </Form>
-  )
-}
diff --git a/designable/next/playground/widgets/SchemaEditorWidget.tsx b/designable/next/playground/widgets/SchemaEditorWidget.tsx
deleted file mode 100644
index 805703bd94d..00000000000
--- a/designable/next/playground/widgets/SchemaEditorWidget.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { transformToSchema, transformToTreeNode } from '@designable/formily'
-import { TreeNode, ITreeNode } from '@designable/core'
-import { MonacoInput } from '@designable/react-settings-form'
-
-export interface ISchemaEditorWidgetProps {
-  tree: TreeNode
-  onChange?: (tree: ITreeNode) => void
-}
-
-const Parser = {
-  designableFormName: 'Root',
-  designableFieldName: 'DesignableField',
-}
-
-export const SchemaEditorWidget: React.FC<ISchemaEditorWidgetProps> = (
-  props
-) => {
-  return (
-    <MonacoInput
-      {...props}
-      value={JSON.stringify(transformToSchema(props.tree, Parser), null, 2)}
-      onChange={(value) => {
-        props.onChange?.(transformToTreeNode(JSON.parse(value), Parser))
-      }}
-      language="json"
-    />
-  )
-}
diff --git a/designable/next/playground/widgets/index.ts b/designable/next/playground/widgets/index.ts
deleted file mode 100644
index 1ca916232fc..00000000000
--- a/designable/next/playground/widgets/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './LogoWidget'
-export * from './ActionsWidget'
-export * from './PreviewWidget'
-export * from './SchemaEditorWidget'
-export * from './MarkupSchemaWidget'
diff --git a/designable/next/rollup.config.js b/designable/next/rollup.config.js
deleted file mode 100644
index 3f5783a93d6..00000000000
--- a/designable/next/rollup.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import baseConfig, {
-  removeImportStyleFromInputFilePlugin,
-} from '../../scripts/rollup.base.js'
-import postcss from 'rollup-plugin-postcss'
-import NpmImport from 'less-plugin-npm-import'
-
-export default baseConfig(
-  'formily.designable.next',
-  'Formily.Designable.Next',
-  removeImportStyleFromInputFilePlugin(),
-  postcss({
-    extract: true,
-    minimize: true,
-    // extensions: ['.css', '.less', '.sass'],
-    use: {
-      less: {
-        plugins: [new NpmImport({ prefix: '~' })],
-        javascriptEnabled: true,
-      },
-      sass: {
-        plugins: [new NpmImport({ prefix: '~' })],
-        javascriptEnabled: true,
-      },
-      stylus: {},
-    },
-  })
-)
diff --git a/designable/next/src/components/DesignableArrayCards/index.tsx b/designable/next/src/components/DesignableArrayCards/index.tsx
deleted file mode 100644
index 3f3222dec03..00000000000
--- a/designable/next/src/components/DesignableArrayCards/index.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import React, { Fragment } from 'react'
-import { Card } from '@alifd/next'
-import { CardProps } from '@alifd/next/types/card'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { useTreeNode, TreeNodeWidget, useNodeIdProps } from '@designable/react'
-import { ArrayBase } from '@formily/next'
-import { observer } from '@formily/react'
-import { LoadTemplate } from '../LoadTemplate'
-import cls from 'classnames'
-import { useDropTemplate } from '../../hooks'
-import {
-  hasNodeByComponentPath,
-  queryNodesByComponentPath,
-  createEnsureTypeItemsNode,
-  findNodeByComponentPath,
-  createNodeId,
-} from '../../shared'
-import './styles.less'
-
-const ensureVoidItemsNode = createEnsureTypeItemsNode('void')
-
-const isArrayCardsOperation = (name: string) =>
-  name === 'ArrayCards.Remove' ||
-  name === 'ArrayCards.MoveDown' ||
-  name === 'ArrayCards.MoveUp'
-
-export const DesignableArrayCards: React.FC<CardProps> = observer((props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  const designer = useDropTemplate('ArrayCards', (source) => {
-    const indexNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'ArrayCards.Index',
-      },
-    })
-    const additionNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.Addition',
-      },
-    })
-    const removeNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.Remove',
-      },
-    })
-    const moveDownNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.MoveDown',
-      },
-    })
-    const moveUpNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayCards.MoveUp',
-      },
-    })
-
-    const voidNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-      },
-      children: [indexNode, ...source, removeNode, moveDownNode, moveUpNode],
-    })
-    return [voidNode, additionNode]
-  })
-  const renderCard = () => {
-    if (node.children.length === 0) return <Droppable />
-    const additions = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      'ArrayCards.Addition',
-    ])
-    const indexes = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      'ArrayCards.Index',
-    ])
-    const operations = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      isArrayCardsOperation,
-    ])
-    const children = queryNodesByComponentPath(node, [
-      'ArrayCards',
-      '*',
-      (name) => name.indexOf('ArrayCards.') === -1,
-    ])
-    return (
-      <ArrayBase disabled>
-        <ArrayBase.Item index={0}>
-          <Card
-            contentHeight="auto"
-            {...props}
-            title={
-              <span>
-                {indexes.map((node, key) => (
-                  <TreeNodeWidget key={key} node={node} />
-                ))}
-                {props.title}
-              </span>
-            }
-            className={cls('ant-formily-array-cards-item', props.className)}
-            extra={
-              <Fragment>
-                {operations.map((node) => (
-                  <TreeNodeWidget key={node.id} node={node} />
-                ))}
-                {props.extra}
-              </Fragment>
-            }
-          >
-            <div {...createNodeId(designer, ensureVoidItemsNode(node).id)}>
-              {children.length ? (
-                children.map((node) => (
-                  <TreeNodeWidget key={node.id} node={node} />
-                ))
-              ) : (
-                <Droppable />
-              )}
-            </div>
-          </Card>
-        </ArrayBase.Item>
-        {additions.map((node) => (
-          <TreeNodeWidget key={node.id} node={node} />
-        ))}
-      </ArrayBase>
-    )
-  }
-
-  return (
-    <div {...nodeId} className="dn-array-cards">
-      {renderCard()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addIndex',
-            onClick: () => {
-              if (
-                hasNodeByComponentPath(node, [
-                  'ArrayCards',
-                  '*',
-                  'ArrayCards.Index',
-                ])
-              )
-                return
-              const indexNode = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'ArrayCards.Index',
-                },
-              })
-              ensureVoidItemsNode(node).appendNode(indexNode)
-            },
-          },
-
-          {
-            title: 'Common.addOperation',
-            onClick: () => {
-              const oldAdditionNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                'ArrayCards.Addition',
-              ])
-              if (!oldAdditionNode) {
-                const additionNode = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    title: 'Addition',
-                    'x-component': 'ArrayCards.Addition',
-                  },
-                })
-                ensureVoidItemsNode(node).insertAfter(additionNode)
-              }
-              const oldRemoveNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.Remove',
-              ])
-              const oldMoveDownNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.MoveDown',
-              ])
-              const oldMoveUpNode = findNodeByComponentPath(node, [
-                'ArrayCards',
-                '*',
-                'ArrayCards.MoveUp',
-              ])
-              if (!oldRemoveNode) {
-                ensureVoidItemsNode(node).appendNode(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.Remove',
-                    },
-                  })
-                )
-              }
-              if (!oldMoveDownNode) {
-                ensureVoidItemsNode(node).appendNode(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.MoveDown',
-                    },
-                  })
-                )
-              }
-              if (!oldMoveUpNode) {
-                ensureVoidItemsNode(node).appendNode(
-                  new TreeNode({
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayCards.MoveUp',
-                    },
-                  })
-                )
-              }
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-ArrayBase.mixin(DesignableArrayCards)
diff --git a/designable/next/src/components/DesignableArrayCards/styles.less b/designable/next/src/components/DesignableArrayCards/styles.less
deleted file mode 100644
index 67e6789cd21..00000000000
--- a/designable/next/src/components/DesignableArrayCards/styles.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-array-cards {
-  background-color: @background-color-light;
-}
diff --git a/designable/next/src/components/DesignableArrayCollapse/index.tsx b/designable/next/src/components/DesignableArrayCollapse/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/next/src/components/DesignableArrayItems/index.tsx b/designable/next/src/components/DesignableArrayItems/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/next/src/components/DesignableArrayTable/index.tsx b/designable/next/src/components/DesignableArrayTable/index.tsx
deleted file mode 100644
index d55886020b7..00000000000
--- a/designable/next/src/components/DesignableArrayTable/index.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-import React from 'react'
-import { Table } from '@alifd/next'
-import { TableProps } from '@alifd/next/types/table'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { useTreeNode, TreeNodeWidget, useNodeIdProps } from '@designable/react'
-import { ArrayBase } from '@formily/next'
-import { observer } from '@formily/react'
-import { LoadTemplate } from '../LoadTemplate'
-import cls from 'classnames'
-import {
-  createNodeId,
-  queryNodesByComponentPath,
-  hasNodeByComponentPath,
-  findNodeByComponentPath,
-  createEnsureTypeItemsNode,
-} from '../../shared'
-import { useDropTemplate } from '../../hooks'
-import './styles.less'
-
-const ensureObjectItemsNode = createEnsureTypeItemsNode('object')
-
-export const DesignableArrayTable: React.FC<TableProps> = observer((props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  const designer = useDropTemplate('ArrayTable', (source) => {
-    const indexNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'ArrayTable.Column',
-        'x-component-props': {
-          title: `Title`,
-        },
-      },
-      children: [
-        {
-          componentName: 'DesignableField',
-          props: {
-            type: 'void',
-            'x-component': 'ArrayTable.Index',
-          },
-        },
-      ],
-    })
-    const columnNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'ArrayTable.Column',
-        'x-component-props': {
-          title: `Title`,
-        },
-      },
-      children: source.map((node) => {
-        node.props.title = undefined
-        return node
-      }),
-    })
-
-    const operationNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'ArrayTable.Column',
-        'x-component-props': {
-          title: `Title`,
-        },
-      },
-      children: [
-        {
-          componentName: 'DesignableField',
-          props: {
-            type: 'void',
-            'x-component': 'ArrayTable.Remove',
-          },
-        },
-        {
-          componentName: 'DesignableField',
-          props: {
-            type: 'void',
-            'x-component': 'ArrayTable.MoveDown',
-          },
-        },
-        {
-          componentName: 'DesignableField',
-          props: {
-            type: 'void',
-            'x-component': 'ArrayTable.MoveUp',
-          },
-        },
-      ],
-    })
-    const objectNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'object',
-      },
-      children: [indexNode, columnNode, operationNode],
-    })
-    const additionNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        title: 'Addition',
-        'x-component': 'ArrayTable.Addition',
-      },
-    })
-    return [objectNode, additionNode]
-  })
-  const columns = queryNodesByComponentPath(node, [
-    'ArrayTable',
-    '*',
-    'ArrayTable.Column',
-  ])
-  const additions = queryNodesByComponentPath(node, [
-    'ArrayTable',
-    'ArrayTable.Addition',
-  ])
-  const defaultRowKey = () => {
-    return node.id
-  }
-
-  const renderTable = () => {
-    if (node.children.length === 0) return <Droppable />
-    return (
-      <ArrayBase disabled>
-        <Table
-          size="small"
-          hasBorder
-          {...props}
-          className={cls('ant-formily-array-table', props.className)}
-          style={{ marginBottom: 10, ...props.style }}
-          primaryKey={defaultRowKey()}
-          dataSource={[{ id: '1' }]}
-        >
-          {columns.map((node, key) => {
-            const children = node.children.map((child) => {
-              return <TreeNodeWidget node={child} key={child.id} />
-            })
-            return (
-              <Table.Column
-                {...node.props['x-component-props']}
-                dataIndex={node.id}
-                {...createNodeId(designer, node.id)}
-                className={`data-id:${node.id}`}
-                key={key}
-                cell={(_, key: number) => {
-                  return (
-                    <ArrayBase.Item key={key} index={key}>
-                      {children.length > 0 ? children : 'Droppable'}
-                    </ArrayBase.Item>
-                  )
-                }}
-              />
-            )
-          })}
-          {columns.length === 0 && <Table.Column cell={() => <Droppable />} />}
-        </Table>
-        {additions.map((child) => {
-          return <TreeNodeWidget node={child} key={child.id} />
-        })}
-      </ArrayBase>
-    )
-  }
-
-  useDropTemplate('ArrayTable.Column', (source) => {
-    return source.map((node) => {
-      node.props.title = undefined
-      return node
-    })
-  })
-
-  return (
-    <div {...nodeId} className="dn-array-table">
-      {renderTable()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addIndex',
-            onClick: () => {
-              if (
-                hasNodeByComponentPath(node, [
-                  'ArrayTable',
-                  '*',
-                  'ArrayTable.Column',
-                  'ArrayTable.Index',
-                ])
-              )
-                return
-              const tableColumn = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'ArrayTable.Column',
-                  'x-component-props': {
-                    title: `Title`,
-                  },
-                },
-                children: [
-                  {
-                    componentName: 'DesignableField',
-                    props: {
-                      type: 'void',
-                      'x-component': 'ArrayTable.Index',
-                    },
-                  },
-                ],
-              })
-              const sortNode = findNodeByComponentPath(node, [
-                'ArrayTable',
-                '*',
-                'ArrayTable.Column',
-                'ArrayTable.SortHandle',
-              ])
-              if (sortNode) {
-                sortNode.parent.insertAfter(tableColumn)
-              } else {
-                ensureObjectItemsNode(node).prependNode(tableColumn)
-              }
-            },
-          },
-          {
-            title: 'Common.addTableColumn',
-            onClick: () => {
-              const operationNode = findNodeByComponentPath(node, [
-                'ArrayTable',
-                '*',
-                'ArrayTable.Column',
-                (name) => {
-                  return (
-                    name === 'ArrayTable.Remove' ||
-                    name === 'ArrayTable.MoveDown' ||
-                    name === 'ArrayTable.MoveUp'
-                  )
-                },
-              ])
-              const tableColumn = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'ArrayTable.Column',
-                  'x-component-props': {
-                    title: `Title`,
-                  },
-                },
-              })
-              if (operationNode) {
-                operationNode.parent.insertBefore(tableColumn)
-              } else {
-                ensureObjectItemsNode(node).appendNode(tableColumn)
-              }
-            },
-          },
-          {
-            title: 'Common.addOperation',
-            onClick: () => {
-              const oldOperationNode = findNodeByComponentPath(node, [
-                'ArrayTable',
-                '*',
-                'ArrayTable.Column',
-                (name) => {
-                  return (
-                    name === 'ArrayTable.Remove' ||
-                    name === 'ArrayTable.MoveDown' ||
-                    name === 'ArrayTable.MoveUp'
-                  )
-                },
-              ])
-              const oldAdditionNode = findNodeByComponentPath(node, [
-                'ArrayTable',
-                'ArrayTable.Addition',
-              ])
-              if (!oldOperationNode) {
-                const operationNode = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    'x-component': 'ArrayTable.Column',
-                    'x-component-props': {
-                      title: `Title`,
-                    },
-                  },
-                  children: [
-                    {
-                      componentName: 'DesignableField',
-                      props: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.Remove',
-                      },
-                    },
-                    {
-                      componentName: 'DesignableField',
-                      props: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveDown',
-                      },
-                    },
-                    {
-                      componentName: 'DesignableField',
-                      props: {
-                        type: 'void',
-                        'x-component': 'ArrayTable.MoveUp',
-                      },
-                    },
-                  ],
-                })
-                ensureObjectItemsNode(node).appendNode(operationNode)
-              }
-              if (!oldAdditionNode) {
-                const additionNode = new TreeNode({
-                  componentName: 'DesignableField',
-                  props: {
-                    type: 'void',
-                    title: 'Addition',
-                    'x-component': 'ArrayTable.Addition',
-                  },
-                })
-                ensureObjectItemsNode(node).insertAfter(additionNode)
-              }
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-ArrayBase.mixin(DesignableArrayTable)
diff --git a/designable/next/src/components/DesignableArrayTable/styles.less b/designable/next/src/components/DesignableArrayTable/styles.less
deleted file mode 100644
index a45490e2904..00000000000
--- a/designable/next/src/components/DesignableArrayTable/styles.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-array-table {
-  background-color: @background-color-light;
-}
diff --git a/designable/next/src/components/DesignableArrayTabs/index.tsx b/designable/next/src/components/DesignableArrayTabs/index.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/designable/next/src/components/DesignableContainer/index.tsx b/designable/next/src/components/DesignableContainer/index.tsx
deleted file mode 100644
index a892319c8c7..00000000000
--- a/designable/next/src/components/DesignableContainer/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { useNodeIdProps } from '@designable/react'
-import { Droppable } from '../Droppable'
-import './styles.less'
-
-export const createDesignableContainer = (
-  Target: React.JSXElementConstructor<any>
-) => {
-  return (props: any) => {
-    const nodeId = useNodeIdProps()
-    if (props.children) {
-      return (
-        <div {...nodeId}>
-          <Target {...props}>{props.children}</Target>
-        </div>
-      )
-    }
-    return <Droppable {...props} />
-  }
-}
diff --git a/designable/next/src/components/DesignableContainer/styles.less b/designable/next/src/components/DesignableContainer/styles.less
deleted file mode 100644
index e0f5c30388e..00000000000
--- a/designable/next/src/components/DesignableContainer/styles.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-form-container {
-  margin: 0 !important;
-  padding: 20px;
-  border: 1px solid @border-color-split;
-}
diff --git a/designable/next/src/components/DesignableField/index.tsx b/designable/next/src/components/DesignableField/index.tsx
deleted file mode 100644
index 5c4b7b2a2b3..00000000000
--- a/designable/next/src/components/DesignableField/index.tsx
+++ /dev/null
@@ -1,437 +0,0 @@
-import React from 'react'
-import { FormPath } from '@formily/core'
-import { GlobalRegistry, TreeNode } from '@designable/core'
-import { useDesigner, useTreeNode } from '@designable/react'
-import {
-  ArrayField,
-  Field,
-  ObjectField,
-  VoidField,
-  observer,
-  Schema,
-  ISchema,
-} from '@formily/react'
-import {
-  DataSourceSetter,
-  ReactionsSetter,
-  ValidatorSetter,
-} from '@formily/designable-setters'
-import { FormTab, FormItem } from '@formily/antd'
-import { isArr, isStr, each, reduce } from '@formily/shared'
-import { FormItemSwitcher } from '../FormItemSwitcher'
-import { DesignableObject } from '../DesignableObject'
-import { createOptions } from './options'
-import { IDesignableFieldFactoryProps } from './types'
-import { includesComponent } from '../../shared'
-import * as defaultSchemas from '../../schemas'
-
-Schema.silent()
-
-const SchemaStateMap = {
-  title: 'title',
-  description: 'description',
-  default: 'value',
-  enum: 'dataSource',
-  readOnly: 'readOnly',
-  writeOnly: 'editable',
-  required: 'required',
-  'x-content': 'content',
-  'x-value': 'value',
-  'x-editable': 'editable',
-  'x-disabled': 'disabled',
-  'x-read-pretty': 'readPretty',
-  'x-read-only': 'readOnly',
-  'x-visible': 'visible',
-  'x-hidden': 'hidden',
-  'x-display': 'display',
-  'x-pattern': 'pattern',
-}
-
-const NeedShownExpression = {
-  title: true,
-  description: true,
-  default: true,
-  'x-content': true,
-  'x-value': true,
-}
-
-const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val)
-
-const filterExpression = (val: any) => {
-  if (typeof val === 'object') {
-    const isArray = isArr(val)
-    const results = reduce(
-      val,
-      (buf: any, value, key) => {
-        if (isExpression(value)) {
-          return buf
-        } else {
-          const results = filterExpression(value)
-          if (results === undefined || results === null) return buf
-          if (isArray) {
-            return buf.concat([results])
-          }
-          buf[key] = results
-          return buf
-        }
-      },
-      isArray ? [] : {}
-    )
-    return results
-  }
-  if (isExpression(val)) {
-    return
-  }
-  return val
-}
-
-const toDesignableFieldProps = (
-  schema: ISchema,
-  components: any,
-  nodeIdAttrName: string,
-  id: string
-) => {
-  const results: any = {}
-  each(SchemaStateMap, (fieldKey, schemaKey) => {
-    const value = schema[schemaKey]
-    if (isExpression(value)) {
-      if (!NeedShownExpression[schemaKey]) return
-      if (value) {
-        results[fieldKey] = value
-        return
-      }
-    } else if (value) {
-      results[fieldKey] = filterExpression(value)
-    }
-  })
-  if (!components['FormItem']) {
-    components['FormItem'] = FormItem
-  }
-  const decorator =
-    schema['x-decorator'] && FormPath.getIn(components, schema['x-decorator'])
-  const component =
-    schema['x-component'] && FormPath.getIn(components, schema['x-component'])
-  const decoratorProps = schema['x-decorator-props'] || {}
-  const componentProps = schema['x-component-props'] || {}
-
-  if (decorator) {
-    results.decorator = [decorator, { ...decoratorProps }]
-  }
-  if (component) {
-    results.component = [component, { ...componentProps }]
-  }
-  if (decorator) {
-    FormPath.setIn(results['decorator'][1], nodeIdAttrName, id)
-  } else if (component) {
-    FormPath.setIn(results['component'][1], nodeIdAttrName, id)
-  }
-  results.title = results.title && (
-    <span data-content-editable="title">{results.title}</span>
-  )
-  results.description = results.description && (
-    <span data-content-editable="description">{results.description}</span>
-  )
-  return results
-}
-
-export const createDesignableField = (
-  options: IDesignableFieldFactoryProps
-) => {
-  const realOptions = createOptions(options)
-  const tabs = {}
-
-  const getFieldPropsSchema = (node: TreeNode): ISchema => {
-    const decorator = node.props['x-decorator']
-    const component = node.props['x-component']
-    const decoratorSchema =
-      decorator &&
-      (FormPath.getIn(realOptions.componentsPropsSchema, decorator) ||
-        FormPath.getIn(defaultSchemas, decorator))
-    const componentSchema =
-      component &&
-      (FormPath.getIn(realOptions.componentsPropsSchema, component) ||
-        FormPath.getIn(defaultSchemas, component))
-    const TabSchema = (key: string, schema: ISchema) => {
-      tabs[key] = tabs[key] || FormTab.createFormTab()
-      return {
-        type: 'object',
-        properties: {
-          propsTab: {
-            type: 'void',
-            'x-component': 'FormTab',
-            'x-component-props': {
-              formTab: tabs[key],
-              style: {
-                overflow: 'visible',
-              },
-            },
-            properties: {
-              propsPane: {
-                type: 'void',
-                'x-component': 'FormTab.TabPane',
-                'x-component-props': {
-                  tab: GlobalRegistry.getDesignerMessage(
-                    `settings.${key}.tab_property`
-                  ),
-                },
-                properties: schema.properties,
-              },
-              stylePane: {
-                type: 'void',
-                'x-component': 'FormTab.TabPane',
-                'x-component-props': {
-                  tab: GlobalRegistry.getDesignerMessage(
-                    `settings.${key}.tab_style`
-                  ),
-                },
-                properties: {
-                  style: defaultSchemas.CSSStyle,
-                },
-              },
-            },
-          },
-        },
-      }
-    }
-    const base = {
-      type: 'object',
-      properties: {
-        name: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-          'x-component-props': {
-            defaultValue: node.id,
-          },
-          'x-index': 0,
-        },
-        title: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-          'x-index': 1,
-        },
-        description: {
-          type: 'string',
-          'x-decorator': 'FormItem',
-          'x-component': 'Input.TextArea',
-          'x-index': 2,
-        },
-        'x-display': {
-          type: 'string',
-          enum: ['visible', 'hidden', 'none', ''],
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-component-props': {
-            defaultValue: 'visible',
-          },
-          'x-index': 3,
-        },
-        'x-pattern': {
-          type: 'string',
-          enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
-          'x-decorator': 'FormItem',
-          'x-component': 'Select',
-          'x-component-props': {
-            defaultValue: 'editable',
-          },
-          'x-index': 4,
-        },
-        'x-component-props':
-          componentSchema && TabSchema('x-component-props', componentSchema),
-        'x-decorator-props':
-          decoratorSchema && TabSchema('x-decorator-props', decoratorSchema),
-      },
-    }
-
-    if (node.props.type === 'void') {
-      if (!includesComponent(node, realOptions.dropReactionComponents)) {
-        Object.assign(base.properties, {
-          'x-reactions': {
-            'x-decorator': 'FormItem',
-            'x-index': 5,
-            'x-component': ReactionsSetter,
-          },
-        })
-      }
-      if (!includesComponent(node, realOptions.dropFormItemComponents)) {
-        Object.assign(base.properties, {
-          'x-decorator': {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': FormItemSwitcher,
-            'x-index': 10,
-            'x-reactions': {
-              target: '*(title,description)',
-              fulfill: {
-                state: {
-                  hidden: '{{$self.value !== "FormItem"}}',
-                },
-              },
-            },
-          },
-        })
-      } else {
-        delete base.properties.title
-        delete base.properties.description
-      }
-    } else {
-      if (!includesComponent(node, realOptions.dropReactionComponents)) {
-        Object.assign(base.properties, {
-          'x-reactions': {
-            'x-decorator': 'FormItem',
-            'x-index': 7,
-            'x-component': ReactionsSetter,
-          },
-        })
-      }
-      Object.assign(base.properties, {
-        default: {
-          'x-decorator': 'FormItem',
-          'x-component': 'ValueInput',
-          'x-index': 5,
-        },
-        enum: {
-          'x-decorator': 'FormItem',
-          'x-component': DataSourceSetter,
-          'x-index': 6,
-        },
-        'x-validator': {
-          type: 'array',
-          'x-component': ValidatorSetter,
-          'x-index': 8,
-        },
-        required: {
-          type: 'boolean',
-          'x-decorator': 'FormItem',
-          'x-component': 'Switch',
-          'x-index': 9,
-        },
-      })
-    }
-
-    base['$namespace'] = `namespace.${component}`
-
-    return base
-  }
-
-  const calculateChildrenRestricts = (target: TreeNode, source: TreeNode[]) => {
-    const targetComponent = target.props['x-component']
-    const restrictChildrenComponents =
-      realOptions.restrictChildrenComponents?.[targetComponent]
-    if (restrictChildrenComponents?.length) {
-      if (
-        source.every((node) =>
-          includesComponent(node, restrictChildrenComponents, target)
-        )
-      ) {
-        return true
-      }
-      return false
-    }
-    return true
-  }
-
-  const calculateSiblingsRestricts = (target: TreeNode, source: TreeNode[]) => {
-    const targetComponent = target.props['x-component']
-    const restrictSiblingComponents =
-      realOptions.restrictSiblingComponents?.[targetComponent]
-    if (restrictSiblingComponents?.length) {
-      if (
-        source.every((node) =>
-          includesComponent(node, restrictSiblingComponents, target)
-        )
-      ) {
-        return true
-      }
-      return false
-    }
-    return true
-  }
-
-  if (!realOptions.registryName) throw new Error('Can not found registryName')
-
-  GlobalRegistry.registerDesignerProps({
-    [realOptions.registryName]: (node) => {
-      const componentName = node.props?.['x-component']
-      const message = GlobalRegistry.getDesignerMessage(
-        `components.${componentName}`
-      )
-      const isObjectNode = node.props.type === 'object'
-      const isArrayNode = node.props.type === 'array'
-      const isVoidNode = node.props.type === 'void'
-      const title = typeof message === 'string' ? message : message?.title
-      const nodeTitle =
-        title ||
-        (isObjectNode
-          ? GlobalRegistry.getDesignerMessage('components.Object')
-          : isVoidNode
-          ? GlobalRegistry.getDesignerMessage('components.Void')
-          : '')
-      const sourceIcon = realOptions.componentsSourceIcon?.[componentName]
-      return {
-        title: nodeTitle,
-        sourceIcon: isObjectNode ? 'ObjectSource' : sourceIcon,
-        icon: realOptions.componentsIcon?.[componentName],
-        draggable: true,
-        droppable: isObjectNode || isArrayNode || isVoidNode,
-        selfRenderChildren:
-          isArrayNode ||
-          includesComponent(node, realOptions.selfRenderChildrenComponents),
-        inlineLayout: includesComponent(
-          node,
-          realOptions.inlineLayoutComponents
-        ),
-        inlineChildrenLayout: includesComponent(
-          node,
-          realOptions.inlineChildrenLayoutComponents
-        ),
-        allowSiblings(target, source) {
-          return calculateSiblingsRestricts(target, source)
-        },
-        allowAppend(target, source) {
-          return (
-            (target.props.type === 'void' ||
-              target.props.type === 'array' ||
-              target.props.type === 'object') &&
-            calculateChildrenRestricts(target, source)
-          )
-        },
-        propsSchema: getFieldPropsSchema(node),
-      }
-    },
-  })
-
-  const DesignableField: React.FC<ISchema> = observer((props) => {
-    const designer = useDesigner()
-    const node = useTreeNode()
-    if (!node) return null
-
-    const fieldProps = toDesignableFieldProps(
-      props,
-      realOptions.components,
-      designer.props.nodeIdAttrName,
-      node.id
-    )
-    if (props.type === 'object') {
-      return (
-        <DesignableObject>
-          <ObjectField {...fieldProps} name={node.id}>
-            {props.children}
-          </ObjectField>
-        </DesignableObject>
-      )
-    } else if (props.type === 'array') {
-      return <ArrayField {...fieldProps} name={node.id} />
-    } else if (node.props.type === 'void') {
-      return (
-        <VoidField {...fieldProps} name={node.id}>
-          {props.children}
-        </VoidField>
-      )
-    }
-    return <Field {...fieldProps} name={node.id} />
-  })
-
-  return DesignableField
-}
diff --git a/designable/next/src/components/DesignableField/options.ts b/designable/next/src/components/DesignableField/options.ts
deleted file mode 100644
index 71560594cd5..00000000000
--- a/designable/next/src/components/DesignableField/options.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { IDesignableFieldFactoryProps } from './types'
-import {
-  FormItem,
-  DatePicker,
-  Checkbox,
-  Cascader,
-  Editable,
-  Input,
-  NumberPicker,
-  Switch,
-  Password,
-  PreviewText,
-  Radio,
-  Reset,
-  Select,
-  Space,
-  Submit,
-  TimePicker,
-  Transfer,
-  TreeSelect,
-  Upload,
-  FormGrid,
-  FormLayout,
-} from '@formily/next'
-import { Card, Range, Rating } from '@alifd/next'
-import { createDesignableContainer } from '../DesignableContainer'
-import { DesignableFormTab } from '../DesignableFormTab'
-import { DesignableFormCollapse } from '../DesignableFormCollapse'
-import { DesignableArrayTable } from '../DesignableArrayTable'
-import { DesignableArrayCards } from '../DesignableArrayCards'
-import { DesignableText } from '../DesignableText'
-import { TreeNode } from '@designable/core'
-
-const isChildrenComponents =
-  (parentName: string, names?: string[]) => (name: string) =>
-    Array.isArray(names) && names.length > 0
-      ? names.some((key) => {
-          return `${parentName}.${key}` === name
-        })
-      : name.indexOf(`${parentName}.`) > -1
-
-const InlineArrayChildren = [
-  'Column',
-  'Index',
-  'SortHandle',
-  'Remove',
-  'MoveDown',
-  'MoveUp',
-]
-
-const isFormTabChildren = isChildrenComponents('FormTab')
-const isFormCollapseChildren = isChildrenComponents('FormCollapse')
-const isArrayTableInlineChildren = isChildrenComponents(
-  'ArrayTable',
-  InlineArrayChildren
-)
-const isArrayCardsInlineChildren = isChildrenComponents(
-  'ArrayCards',
-  InlineArrayChildren
-)
-const isObjectNode = (name: string, node: TreeNode) => {
-  return node.props['type'] === 'object'
-}
-
-const isNotArrayColumn = (name: string, node: TreeNode) => {
-  return node.props['x-component'] !== 'ArrayTable.Column'
-}
-
-const allowDropWithEmpty = (name: string, node: TreeNode, target: TreeNode) => {
-  if (target) return target.children.length === 0
-  return false
-}
-
-const noChildren = () => false
-
-export const createOptions = (
-  options: IDesignableFieldFactoryProps
-): IDesignableFieldFactoryProps => {
-  return {
-    ...options,
-    dropFormItemComponents: [
-      ...(options.dropFormItemComponents || []),
-      isFormTabChildren,
-      isFormCollapseChildren,
-    ],
-    dropReactionComponents: [
-      ...(options.dropReactionComponents || []),
-      isFormTabChildren,
-      isFormCollapseChildren,
-    ],
-    selfRenderChildrenComponents: [
-      ...(options.selfRenderChildrenComponents || []),
-      'FormTab',
-      'FormCollapse',
-    ],
-    inlineChildrenLayoutComponents: [
-      ...(options.inlineChildrenLayoutComponents || []),
-      'FormItem',
-      'FormGrid',
-      'Space',
-    ],
-    inlineLayoutComponents: [
-      ...(options.inlineLayoutComponents || []),
-      isArrayTableInlineChildren,
-      isArrayCardsInlineChildren,
-    ],
-    restrictChildrenComponents: {
-      FormTab: [allowDropWithEmpty, 'FormTab.TabPane'],
-      FormCollapse: [allowDropWithEmpty, 'FormCollapse.CollapsePanel'],
-      ArrayTable: [allowDropWithEmpty, isObjectNode, 'ArrayTable.Addition'],
-      'ArrayTable.Column': [isNotArrayColumn],
-      Text: [noChildren],
-    },
-    restrictSiblingComponents: {
-      'FormTab.TabPane': ['FormTab.TabPane'],
-      'FormCollapse.CollapsePanel': ['FormCollapse.CollapsePanel'],
-      'ArrayTable.Column': ['ArrayTable.Column'],
-    },
-    componentsSourceIcon: {
-      ...options.componentsSourceIcon,
-      Space: 'SpaceSource',
-      FormGrid: 'GridSource',
-      FormTab: 'TabSource',
-      FormCollapse: 'CollapseSource',
-      ArrayTable: 'ArrayTableSource',
-      ArrayCards: 'ArrayCardsSource',
-      DatePicker: 'DatePickerSource',
-      'DatePicker.RangePicker': 'DateRangePickerSource',
-      'Checkbox.Group': 'CheckboxGroupSource',
-      'Radio.Group': 'RadioGroupSource',
-      Range: 'SliderSource',
-      Rating: 'RateSource',
-      TimePicker: 'TimePickerSource',
-      'TimePicker.RangePicker': 'TimeRangePickerSource',
-      Cascader: 'CascaderSource',
-      TreeSelect: 'TreeSelectSource',
-      Select: 'SelectSource',
-      'Input.TextArea': 'TextAreaSource',
-      Input: 'InputSource',
-      NumberPicker: 'NumberPickerSource',
-      Password: 'PasswordSource',
-      Transfer: 'TransferSource',
-      Switch: 'SwitchSource',
-      Upload: 'UploadSource',
-      'Upload.Dragger': 'UploadDraggerSource',
-      Card: 'CardSource',
-      FormLayout: 'FormLayoutSource',
-      Text: 'TextSource',
-      Image: 'ImageSource',
-      Button: 'ButtonSource',
-      Video: 'MediaSource',
-    },
-    components: {
-      ...options.components,
-      Space: createDesignableContainer(Space),
-      FormGrid: createDesignableContainer(FormGrid),
-      FormLayout: createDesignableContainer(FormLayout),
-      FormTab: DesignableFormTab,
-      FormCollapse: DesignableFormCollapse,
-      ArrayTable: DesignableArrayTable,
-      ArrayCards: DesignableArrayCards,
-      Text: DesignableText,
-      FormItem,
-      DatePicker,
-      Checkbox,
-      Cascader,
-      Editable,
-      Input,
-      NumberPicker,
-      Switch,
-      Password,
-      PreviewText,
-      Radio,
-      Reset,
-      Select,
-      Submit,
-      TimePicker,
-      Transfer,
-      TreeSelect,
-      Upload,
-      Card,
-      Range,
-      Rating,
-    },
-  }
-}
diff --git a/designable/next/src/components/DesignableField/types.ts b/designable/next/src/components/DesignableField/types.ts
deleted file mode 100644
index ca1b59f7aab..00000000000
--- a/designable/next/src/components/DesignableField/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ISchema } from '@formily/react'
-import { ComponentNameMatcher } from '../../shared'
-export interface IDesignableFieldFactoryProps {
-  registryName: string
-  components?: Record<string, React.JSXElementConstructor<unknown>>
-  componentsIcon?: Record<string, React.ReactNode>
-  componentsSourceIcon?: Record<string, React.ReactNode>
-  componentsPropsSchema?: Record<string, ISchema>
-  dropFormItemComponents?: ComponentNameMatcher[]
-  dropReactionComponents?: ComponentNameMatcher[]
-  selfRenderChildrenComponents?: ComponentNameMatcher[]
-  inlineChildrenLayoutComponents?: ComponentNameMatcher[]
-  inlineLayoutComponents?: ComponentNameMatcher[]
-  restrictChildrenComponents?: Record<string, ComponentNameMatcher[]>
-  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]>
-}
diff --git a/designable/next/src/components/DesignableForm/index.tsx b/designable/next/src/components/DesignableForm/index.tsx
deleted file mode 100644
index 8f691abbff9..00000000000
--- a/designable/next/src/components/DesignableForm/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useMemo } from 'react'
-import { IDesignerProps, GlobalRegistry } from '@designable/core'
-import { createForm } from '@formily/core'
-import { Form, IFormLayoutProps } from '@formily/next'
-import { observer } from '@formily/react'
-import { usePrefix } from '@designable/react'
-import { Form as FormPropsSchema } from '../../schemas'
-import './styles.scss'
-
-export interface IDesignableFormFactoryProps extends IDesignerProps {
-  registryName: string
-  component?: React.JSXElementConstructor<unknown>
-}
-
-export const createDesignableForm = (options: IDesignableFormFactoryProps) => {
-  const realOptions: IDesignableFormFactoryProps = {
-    component: Form,
-    droppable: true,
-    draggable: false,
-    propsSchema: FormPropsSchema,
-    ...options,
-    defaultProps: {
-      labelCol: 6,
-      wrapperCol: 12,
-      ...options.defaultProps,
-    },
-  }
-
-  const FormComponent = realOptions.component || Form
-
-  const DesignableForm: React.FC<IFormLayoutProps> = observer((props) => {
-    const prefix = usePrefix('designable-form')
-    const form = useMemo(
-      () =>
-        createForm({
-          designable: true,
-        }),
-      []
-    )
-    return (
-      <FormComponent
-        {...props}
-        style={{ ...props.style }}
-        className={prefix}
-        form={form}
-      >
-        {props.children}
-      </FormComponent>
-    )
-  })
-
-  if (!realOptions.registryName) throw new Error('Can not found registryName')
-
-  realOptions.title = `components.${realOptions.registryName}`
-
-  GlobalRegistry.registerDesignerProps({
-    [realOptions.registryName]: realOptions,
-  })
-
-  return DesignableForm
-}
diff --git a/designable/next/src/components/DesignableForm/styles.scss b/designable/next/src/components/DesignableForm/styles.scss
deleted file mode 100644
index 857cadf3928..00000000000
--- a/designable/next/src/components/DesignableForm/styles.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import '~@alifd/next/lib/core/style/global';
-
-$next-prefix: $css-prefix;
-
-@mixin none-pointer-events($selector, $important: true) {
-  #{$selector} {
-    pointer-events: none #{if($important, !important, '')};
-  }
-}
-
-@mixin designable-bootstrap($components...) {
-  .dn-designable-form {
-    @each $component in $components {
-      $selector: #{$next-prefix}#{$component};
-      @include none-pointer-events('.#{$selector}, .#{$selector} input');
-    }
-    @include none-pointer-events('.anticon svg', false);
-  }
-}
-
-@include designable-bootstrap(
-  'input',
-  'input-textarea',
-  'select',
-  'radio-group',
-  'range',
-  'cascader',
-  'switch',
-  'checkbox-group',
-  'date-picker',
-  'range-picker',
-  'month-picker',
-  'year-picker',
-  'week-picker',
-  'time-picker',
-  'rating',
-  'transfer',
-  'tree-select',
-  'upload'
-);
diff --git a/designable/next/src/components/DesignableFormCollapse/index.tsx b/designable/next/src/components/DesignableFormCollapse/index.tsx
deleted file mode 100644
index a38e4cf85d3..00000000000
--- a/designable/next/src/components/DesignableFormCollapse/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { toArr } from '@formily/shared'
-import { Collapse } from '@alifd/next'
-import type {
-  CollapseProps,
-  PanelProps as CollapsePanelProps,
-} from '@alifd/next/types/collapse'
-import { useTreeNode, useNodeIdProps, TreeNodeWidget } from '@designable/react'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseCollpase = (parent: TreeNode) => {
-  const panels: TreeNode[] = []
-  parent.children.forEach((node) => {
-    if (matchComponent(node, 'FormCollapse.CollapsePanel')) {
-      panels.push(node)
-    }
-  })
-  return panels
-}
-
-export const DesignableFormCollapse: React.FC<CollapseProps> & {
-  CollapsePanel?: React.FC<CollapsePanelProps>
-} = observer((props) => {
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([])
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  const designer = useDropTemplate('FormCollapse', (source) => {
-    const panelNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type: 'void',
-        'x-component': 'FormCollapse.CollapsePanel',
-        'x-component-props': {
-          title: `Unnamed Title`,
-        },
-      },
-      children: source,
-    })
-
-    setExpandedKeys([...expandedKeys, panelNode.id])
-    return [panelNode]
-  })
-
-  const panels = parseCollpase(node)
-
-  const renderCollapse = () => {
-    if (!node.children?.length) return <Droppable {...props} />
-    return (
-      <Collapse
-        {...props}
-        expandedKeys={expandedKeys}
-        onExpand={(expandedKeys) => {
-          setExpandedKeys(toArr(expandedKeys))
-        }}
-      >
-        {panels.map((panel) => {
-          const props = panel.props['x-component-props'] || {}
-          return (
-            <Collapse.Panel
-              {...props}
-              style={{ ...props.style }}
-              title={props.title}
-              key={panel.id}
-            >
-              {React.createElement(
-                'div',
-                {
-                  [designer.props.nodeIdAttrName]: panel.id,
-                },
-                panel.children.length ? (
-                  <TreeNodeWidget node={panel} />
-                ) : (
-                  <Droppable />
-                )
-              )}
-            </Collapse.Panel>
-          )
-        })}
-      </Collapse>
-    )
-  }
-  return (
-    <div {...nodeId}>
-      {renderCollapse()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addCollapsePanel',
-            onClick: () => {
-              const collapsePanel = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'FormCollapse.CollapsePanel',
-                  'x-component-props': {
-                    title: `Unnamed Title`,
-                  },
-                },
-              })
-              node.appendNode(collapsePanel)
-              setExpandedKeys([...expandedKeys, collapsePanel.id])
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-DesignableFormCollapse.CollapsePanel = (props) => {
-  return <Fragment>{props.children}</Fragment>
-}
diff --git a/designable/next/src/components/DesignableFormTab/index.tsx b/designable/next/src/components/DesignableFormTab/index.tsx
deleted file mode 100644
index 1848d5b5273..00000000000
--- a/designable/next/src/components/DesignableFormTab/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { Fragment, useState } from 'react'
-import { observer } from '@formily/react'
-import { Tab } from '@alifd/next'
-import { ItemProps, TabProps } from '@alifd/next/types/tab'
-import { useNodeIdProps, useTreeNode, TreeNodeWidget } from '@designable/react'
-import { Droppable } from '../Droppable'
-import { TreeNode } from '@designable/core'
-import { LoadTemplate } from '../LoadTemplate'
-import { useDropTemplate } from '../../hooks'
-import { matchComponent } from '../../shared'
-
-const parseTabs = (parent: TreeNode) => {
-  const tabs: TreeNode[] = []
-  parent.children.forEach((node) => {
-    if (matchComponent(node, 'FormTab.TabPane')) {
-      tabs.push(node)
-    }
-  })
-  return tabs
-}
-
-const getCorrectActiveKey = (activeKey: string, tabs: TreeNode[]) => {
-  if (tabs.length === 0) return
-  if (tabs.some((node) => node.id === activeKey)) return activeKey
-  return tabs[tabs.length - 1].id
-}
-
-export const DesignableFormTab: React.FC<TabProps> & {
-  TabPane?: React.FC<ItemProps>
-} = observer((props) => {
-  const [activeKey, setActiveKey] = useState<string>()
-  const nodeId = useNodeIdProps()
-  const node = useTreeNode()
-  const designer = useDropTemplate('FormTab', (source) => {
-    return [
-      new TreeNode({
-        componentName: 'DesignableField',
-        props: {
-          type: 'void',
-          'x-component': 'FormTab.TabPane',
-          'x-component-props': {
-            title: `Unnamed Title`,
-          },
-        },
-        children: source,
-      }),
-    ]
-  })
-  const tabs = parseTabs(node)
-  const renderTabs = () => {
-    if (!node.children?.length) return <Droppable />
-    return (
-      <Tab
-        {...props}
-        activeKey={getCorrectActiveKey(activeKey, tabs)}
-        onChange={(id: string) => {
-          setActiveKey(id)
-        }}
-      >
-        {tabs.map((tab) => {
-          const props = tab.props['x-component-props'] || {}
-          return (
-            <Tab.Item
-              {...props}
-              style={{ ...props.style }}
-              title={props.title}
-              key={tab.id}
-            >
-              {React.createElement(
-                'div',
-                {
-                  [designer.props.nodeIdAttrName]: tab.id,
-                },
-                tab.children.length ? (
-                  <TreeNodeWidget node={tab} />
-                ) : (
-                  <Droppable />
-                )
-              )}
-            </Tab.Item>
-          )
-        })}
-      </Tab>
-    )
-  }
-  return (
-    <div {...nodeId}>
-      {renderTabs()}
-      <LoadTemplate
-        actions={[
-          {
-            title: 'Common.addTabPane',
-            onClick: () => {
-              const tabPane = new TreeNode({
-                componentName: 'DesignableField',
-                props: {
-                  type: 'void',
-                  'x-component': 'FormTab.TabPane',
-                  'x-component-props': {
-                    title: `Unnamed Title`,
-                  },
-                },
-              })
-              node.appendNode(tabPane)
-              setActiveKey(tabPane.id)
-            },
-          },
-        ]}
-      />
-    </div>
-  )
-})
-
-DesignableFormTab.TabPane = (props) => {
-  return <Fragment>{props.children}</Fragment>
-}
diff --git a/designable/next/src/components/DesignableObject/index.tsx b/designable/next/src/components/DesignableObject/index.tsx
deleted file mode 100644
index b894214f3d8..00000000000
--- a/designable/next/src/components/DesignableObject/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { useNodeIdProps, useTreeNode } from '@designable/react'
-import { Droppable } from '../Droppable'
-
-export const DesignableObject: React.FC = (props) => {
-  const node = useTreeNode()
-  const nodeId = useNodeIdProps()
-  if (node.children.length === 0) return <Droppable {...nodeId} />
-  return <div {...nodeId}>{props.children}</div>
-}
diff --git a/designable/next/src/components/DesignableText/index.tsx b/designable/next/src/components/DesignableText/index.tsx
deleted file mode 100644
index 6b08755dbf8..00000000000
--- a/designable/next/src/components/DesignableText/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { useDesigner } from '@designable/react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDesignableTextProps {
-  content?: string
-  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
-  style?: React.CSSProperties
-  className?: string
-}
-
-export const DesignableText: React.FC<IDesignableTextProps> = (props) => {
-  const designer = useDesigner()
-  const tagName = props.mode === 'normal' || !props.mode ? 'div' : props.mode
-  return React.createElement(
-    tagName,
-    {
-      ...props,
-      className: cls(props.className, 'dn-text'),
-      [designer.props.contentEditableAttrName]: 'x-component-props.content',
-    },
-    props.content
-  )
-}
diff --git a/designable/next/src/components/DesignableText/styles.less b/designable/next/src/components/DesignableText/styles.less
deleted file mode 100644
index a55fac3c947..00000000000
--- a/designable/next/src/components/DesignableText/styles.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.dn-text {
-  &:empty::before {
-    content: 'Please Input';
-    display: block;
-    opacity: 0.6;
-  }
-  &:focus{
-    padding: 4px;
-  }
-}
diff --git a/designable/next/src/components/Droppable/index.tsx b/designable/next/src/components/Droppable/index.tsx
deleted file mode 100644
index 0802ab99f5e..00000000000
--- a/designable/next/src/components/Droppable/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { usePrefix, TextWidget } from '@designable/react'
-import { Empty } from 'antd'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IDroppableProps {
-  style?: React.CSSProperties
-  className?: string
-}
-
-export const Droppable: React.FC<IDroppableProps> = (props: any) => {
-  const prefix = usePrefix('droppable')
-  return (
-    <Empty
-      {...props}
-      className={cls(prefix, props.className)}
-      description={<TextWidget token="Common.droppable" />}
-    />
-  )
-}
diff --git a/designable/next/src/components/Droppable/styles.less b/designable/next/src/components/Droppable/styles.less
deleted file mode 100644
index d175c36436a..00000000000
--- a/designable/next/src/components/Droppable/styles.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-droppable {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  padding: 20px;
-  border: 1px solid @border-color-split;
-  color: @text-color;
-}
diff --git a/designable/next/src/components/FormItemSwitcher/index.tsx b/designable/next/src/components/FormItemSwitcher/index.tsx
deleted file mode 100644
index 04134856fbd..00000000000
--- a/designable/next/src/components/FormItemSwitcher/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { Switch } from 'antd'
-
-export interface IFormItemSwitcherProps {
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export const FormItemSwitcher: React.FC<IFormItemSwitcherProps> = (props) => {
-  return (
-    <Switch
-      checked={props.value === 'FormItem'}
-      onChange={(value) => {
-        props.onChange(value ? 'FormItem' : undefined)
-      }}
-    />
-  )
-}
diff --git a/designable/next/src/components/LoadTemplate/index.tsx b/designable/next/src/components/LoadTemplate/index.tsx
deleted file mode 100644
index 3bd2e9fa764..00000000000
--- a/designable/next/src/components/LoadTemplate/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import { Button } from '@alifd/next'
-import { Space, Divider } from 'antd'
-import { usePrefix, TextWidget } from '@designable/react'
-import cls from 'classnames'
-import './styles.scss'
-
-export interface ITemplateAction {
-  title: React.ReactNode
-  tooltip?: React.ReactNode
-  icon?: string | React.ReactNode
-  onClick: () => void
-}
-
-export interface ILoadTemplateProps {
-  className?: string
-  style?: React.CSSProperties
-  actions?: ITemplateAction[]
-}
-
-export const LoadTemplate: React.FC<ILoadTemplateProps> = (props) => {
-  const prefix = usePrefix('load-template')
-  return (
-    <div className={cls(prefix, props.className)} style={props.style}>
-      <div className={prefix + '-actions'}>
-        <Space split={<Divider type="vertical" />}>
-          {props.actions?.map((action, key) => {
-            return (
-              <Button
-                key={key}
-                text
-                type="primary"
-                data-click-stop-propagation="true"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  action?.onClick?.()
-                }}
-              >
-                <TextWidget>{action.title}</TextWidget>
-              </Button>
-            )
-          })}
-        </Space>
-      </div>
-    </div>
-  )
-}
diff --git a/designable/next/src/components/LoadTemplate/styles.scss b/designable/next/src/components/LoadTemplate/styles.scss
deleted file mode 100644
index 152a6f3469d..00000000000
--- a/designable/next/src/components/LoadTemplate/styles.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '~@alifd/next/lib/core/style/_color.scss';
-
-.dn-load-template {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  overflow: hidden;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  &-actions {
-    position: relative;
-    padding: 0 20px;
-    &::before {
-      position: absolute;
-      content: '';
-      display: block;
-      height: 0;
-      width: 300%;
-      top: 50%;
-      border-bottom: 2px dashed $color-line1-2;
-      right: 100%;
-    }
-    &::after {
-      position: absolute;
-      content: '';
-      display: block;
-      height: 0;
-      width: 300%;
-      top: 50%;
-      border-bottom: 2px dashed $color-line1-2;
-      left: 100%;
-    }
-  }
-}
diff --git a/designable/next/src/components/index.ts b/designable/next/src/components/index.ts
deleted file mode 100644
index 19322276aac..00000000000
--- a/designable/next/src/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './DesignableField'
-export * from './DesignableForm'
diff --git a/designable/next/src/hooks/index.ts b/designable/next/src/hooks/index.ts
deleted file mode 100644
index 6ab5860beb4..00000000000
--- a/designable/next/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useDropTemplate'
diff --git a/designable/next/src/hooks/useDropTemplate.ts b/designable/next/src/hooks/useDropTemplate.ts
deleted file mode 100644
index 89a13ad3181..00000000000
--- a/designable/next/src/hooks/useDropTemplate.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { AppendNodeEvent, TreeNode } from '@designable/core'
-import { useDesigner } from '@designable/react'
-import { matchComponent, matchChildComponent } from '../shared'
-
-export const useDropTemplate = (
-  name: string,
-  getChildren: (source: TreeNode[]) => TreeNode[]
-) => {
-  return useDesigner((designer) => {
-    return designer.subscribeTo(AppendNodeEvent, (event) => {
-      const { source, target } = event.data
-      if (Array.isArray(target)) return
-      if (!Array.isArray(source)) return
-      if (
-        matchComponent(
-          target,
-          (key) =>
-            key === name &&
-            source.every((child) => !matchChildComponent(child, name))
-        ) &&
-        target.children.length === 0
-      ) {
-        target.setNodeChildren(...getChildren(source))
-        return false
-      }
-    })
-  })
-}
diff --git a/designable/next/src/index.ts b/designable/next/src/index.ts
deleted file mode 100644
index e1e3b6f0e4e..00000000000
--- a/designable/next/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import './locales'
-import './sources'
-export * from './components'
diff --git a/designable/next/src/locales/en-US/Array.ts b/designable/next/src/locales/en-US/Array.ts
deleted file mode 100644
index a567945a8fe..00000000000
--- a/designable/next/src/locales/en-US/Array.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-const ArrayOperations: ISettingsLocale = {
-  Index: 'Indexes',
-  SortHandle: 'Sort Handle',
-  Addition: 'Addition',
-  Remove: 'Remove',
-  MoveDown: 'Move Down',
-  MoveUp: 'Move Up',
-}
-
-export const ArrayTable: ISettingsLocale = {
-  ...ArrayOperations,
-  title: 'Array Table',
-  Column: 'Column',
-}
-
-export const ArrayCards: ISettingsLocale = {
-  ...ArrayOperations,
-  title: 'Array Cards',
-}
-
-export const ArrayTabs = {
-  ...ArrayOperations,
-  title: 'Array Tabs',
-}
-
-export const ArrayCollapse: ISettingsLocale = {
-  ...ArrayOperations,
-  title: 'Array Collapse',
-}
diff --git a/designable/next/src/locales/en-US/ArrayCards.ts b/designable/next/src/locales/en-US/ArrayCards.ts
deleted file mode 100644
index 11b5f1a4d56..00000000000
--- a/designable/next/src/locales/en-US/ArrayCards.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ArrayTable } from './ArrayTable'
-import { Card } from './Card'
-
-export const ArrayCards = Card
-
-ArrayCards.Addition = ArrayTable.Addition
diff --git a/designable/next/src/locales/en-US/ArrayTable.ts b/designable/next/src/locales/en-US/ArrayTable.ts
deleted file mode 100644
index 1b0bffbee12..00000000000
--- a/designable/next/src/locales/en-US/ArrayTable.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const ArrayTable: ISettingsLocale = {
-  primaryKey: 'Primary Key',
-  tableLayout: {
-    title: 'Table Layout',
-    dataSource: ['Auto', 'Fixed'],
-  },
-  size: {
-    title: 'Size',
-    dataSource: ['Small', 'Medium', 'Inherit', 'None'],
-  },
-  tableWidth: 'Table Width',
-  hasHeader: 'Header',
-  isZebra: 'Zebra',
-  emptyContent: 'Empty Content',
-  fixedHeader: 'Fixed Header',
-  maxBodyHeight: {
-    title: 'Max Body Height',
-    tooltip:
-      'When Fixed Header is enabled, scroll bars will appear when the height exceeds this height',
-  },
-  stickyHeader: 'Sticky Header',
-}
-
-ArrayTable.Column = {
-  align: {
-    title: 'Cell Alignment',
-    dataSource: ['Left', 'Medium', 'Right'],
-  },
-  alignHeader: {
-    title: 'Header alignment',
-    tooltip:
-      'If not set, the alignment will be the same as that of the Cell Alignment',
-    dataSource: ['Left', 'Center', 'Right'],
-  },
-  lock: {
-    title: 'Lock Column',
-    dataSource: ['None', 'Left', 'Right', 'Lock'],
-  },
-  colSpan: 'Col Span',
-  wordBreak: {
-    title: 'Word Break',
-    dataSource: ['All', 'Word'],
-  },
-}
-
-ArrayTable.Addition = {
-  method: {
-    title: 'Method',
-    dataSource: ['Push', 'Unshift'],
-  },
-  defaultValue: 'Default Value',
-}
diff --git a/designable/next/src/locales/en-US/Card.ts b/designable/next/src/locales/en-US/Card.ts
deleted file mode 100644
index f09046fca90..00000000000
--- a/designable/next/src/locales/en-US/Card.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Card: ISettingsLocale = {
-  subTitle: 'Subtitle',
-  showTitleBullet: 'Title Bullet',
-  showHeadDivider: 'Title Divider',
-  contentHeight: 'Content Height',
-}
diff --git a/designable/next/src/locales/en-US/Cascader.ts b/designable/next/src/locales/en-US/Cascader.ts
deleted file mode 100644
index 0291dd7a1ba..00000000000
--- a/designable/next/src/locales/en-US/Cascader.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Cascader: ISettingsLocale = {
-  expandTriggerType: {
-    title: 'Expand Trigger',
-    dataSource: ['Click', 'Hover'],
-  },
-  canOnlySelectLeaf: 'Only Select Leaf',
-  canOnlyCheckLeaf: 'Only Check Leaf',
-  checkStrictly: 'Check Strictly',
-}
diff --git a/designable/next/src/locales/en-US/Checkbox.ts b/designable/next/src/locales/en-US/Checkbox.ts
deleted file mode 100644
index 6e70835994f..00000000000
--- a/designable/next/src/locales/en-US/Checkbox.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Checkbox: ISettingsLocale = {}
-
-Checkbox.Group = {}
diff --git a/designable/next/src/locales/en-US/Common.ts b/designable/next/src/locales/en-US/Common.ts
deleted file mode 100644
index c9e52094bb4..00000000000
--- a/designable/next/src/locales/en-US/Common.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Style } from './Style'
-import type { ISettingsLocale } from '../types'
-
-export const Common: ISettingsLocale = {
-  title: 'Title',
-  placeholder: 'Placeholder',
-  extra: 'Extra',
-  min: 'Min Value',
-  max: 'Max Value',
-  step: 'Step',
-  closeable: 'Closeable',
-  autoFocus: 'Auto Focus',
-  width: 'Width',
-  height: 'Height',
-  minLength: 'Min Length',
-  maxLength: 'Max Length',
-  minWidth: 'Min Width',
-  maxWidth: 'Max Width',
-  minHeight: 'Min Height',
-  maxHeight: 'Max Height',
-  notFoundContent: 'No Content Prompt',
-  addonBefore: 'Addon Before',
-  addonAfter: 'Addon After',
-  innerBefore: 'Inner Before',
-  innerAfter: 'Inner After',
-  addonTextBefore: 'Addon Text Before',
-  addonTextAfter: 'Addon Text After',
-  tooltip: 'Tooltip',
-  autoWidth: 'Auto Width',
-  name: 'Name',
-  showSearch: 'Search Button',
-  multiple: 'Allow Multiple Selections',
-  hasArrow: 'Dropdown Arrow',
-  hasBorder: 'Frame',
-  hasClear: {
-    title: 'Clear Button',
-    tooltip:
-      'When enabled, you can click the clear button on the right to clear the input quickly',
-  },
-  style: Style,
-  size: {
-    title: 'Size',
-    dataSource: ['Small', 'Medium', 'Large', 'Inherit'],
-  },
-  direction: {
-    title: 'Direction',
-    dataSource: ['Horizontal', 'Vertical'],
-  },
-  followTrigger: {
-    title: 'Follow Scroll',
-    tooltip:
-      'When enabled, allows the popup layer to scroll with the component instead of staying in the popup position',
-  },
-  useVirtual: {
-    title: 'Virtual Scroll',
-    tooltip:
-      'It is used to optimize performance when the amount of data is large, and may flicker when scrolling quickly',
-  },
-  immutable: 'Immutable Data',
-  popupTriggerType: {
-    title: 'Popup Trigger',
-    dataSource: ['Click', 'Hover'],
-  },
-  popupAlign: {
-    title: 'Popup Align',
-    tooltip: 'Refer to the Overlay documentation',
-  },
-}
diff --git a/designable/next/src/locales/en-US/DatePicker.ts b/designable/next/src/locales/en-US/DatePicker.ts
deleted file mode 100644
index a259dde6288..00000000000
--- a/designable/next/src/locales/en-US/DatePicker.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-const CommonDatePickerLocale: ISettingsLocale = {
-  format: {
-    title: 'Format',
-    placeholder: 'YYYY-MM-DD',
-  },
-  showTime: 'Show Time',
-  resetTime: 'Reset On Select',
-}
-export const DatePicker: ISettingsLocale = {
-  ...CommonDatePickerLocale,
-}
-
-DatePicker.RangePicker = {
-  ...CommonDatePickerLocale,
-  type: {
-    title: 'Type',
-    dataSource: ['Date', 'Month', 'Year'],
-  },
-}
diff --git a/designable/next/src/locales/en-US/Field.ts b/designable/next/src/locales/en-US/Field.ts
deleted file mode 100644
index aad03b8ba7b..00000000000
--- a/designable/next/src/locales/en-US/Field.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FormItem } from './FormItem'
-import { Style } from './Style'
-import type { ISettingsLocale } from '../types'
-import { Common } from './Common'
-
-export const Field: ISettingsLocale = {
-  name: 'Name',
-  title: 'Title',
-  required: 'Required',
-  description: 'Description',
-  default: 'Default',
-  enum: 'Data Source',
-  'x-display': {
-    title: 'Display State',
-    tooltip:
-      'When the display value is "None", the data will be "Hidden" and deleted. When the display value is hidden, only the UI will be hidden',
-    dataSource: ['Visible', 'Hidden', 'None', 'Inherit'],
-  },
-  'x-pattern': {
-    title: 'UI Pattern',
-    dataSource: ['Editable', 'Disabled', 'ReadOnly', 'ReadPretty', 'Inherit'],
-  },
-  'x-validator': 'Validator',
-  'x-reactions': 'Reactions',
-  'x-decorator': 'Decorator',
-  'x-decorator-props': {
-    ...Common,
-    ...FormItem,
-    style: Style,
-    tab_property: 'Decorator',
-    tab_style: 'Style',
-  },
-  'x-component-props': {
-    ...Common,
-    tab_property: 'Component',
-    tab_style: 'Style',
-  },
-}
diff --git a/designable/next/src/locales/en-US/FormCollapse.ts b/designable/next/src/locales/en-US/FormCollapse.ts
deleted file mode 100644
index 22c855ee67d..00000000000
--- a/designable/next/src/locales/en-US/FormCollapse.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormCollapse: ISettingsLocale = {
-  accordion: {
-    title: 'Accordion',
-    tooltip: 'When enabled, only one can be expanded at a time',
-  },
-}
-
-FormCollapse.CollapsePanel = {}
diff --git a/designable/next/src/locales/en-US/FormGrid.ts b/designable/next/src/locales/en-US/FormGrid.ts
deleted file mode 100644
index c8a68cdb304..00000000000
--- a/designable/next/src/locales/en-US/FormGrid.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormGrid: ISettingsLocale = {
-  minColumns: 'Min Columns',
-  maxColumns: 'Max Columns',
-  breakpoints: 'Breakpoints',
-  columnGap: 'Column Gap',
-  rowGap: 'Row Gap',
-  colWrap: 'Col Wrap',
-}
diff --git a/designable/next/src/locales/en-US/FormItem.ts b/designable/next/src/locales/en-US/FormItem.ts
deleted file mode 100644
index abead7f5177..00000000000
--- a/designable/next/src/locales/en-US/FormItem.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { FormLayout } from './FormLayout'
-import type { ISettingsLocale } from '../types'
-
-export const FormItem: ISettingsLocale = {
-  ...FormLayout,
-  asterisk: 'Asterisk',
-  gridSpan: 'Grid Span',
-}
diff --git a/designable/next/src/locales/en-US/FormLayout.ts b/designable/next/src/locales/en-US/FormLayout.ts
deleted file mode 100644
index 375d215f26a..00000000000
--- a/designable/next/src/locales/en-US/FormLayout.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormLayout: ISettingsLocale = {
-  labelCol: 'Label Col',
-  wrapperCol: 'Component Col',
-  labelWidth: 'Label Width',
-  wrapperWidth: 'Wrapper Width',
-  colon: 'Colon',
-  feedbackLayout: {
-    title: 'Feedback layout',
-    dataSource: ['Loose', 'Terse', 'Popup', 'None', 'Inherit'],
-  },
-  layout: {
-    title: 'Layout',
-    dataSource: ['Horizontal', 'Vertical', 'Inline', 'Inherit'],
-  },
-  tooltipLayout: {
-    title: 'Tooltip Layout',
-    dataSource: ['Icon', 'Text', 'Inherit'],
-  },
-  labelAlign: {
-    title: 'Label Align',
-    dataSource: ['Left', 'Right', 'Inherit'],
-  },
-  wrapperAlign: {
-    title: 'Wrapper Align',
-    dataSource: ['Left', 'Right', 'Inherit'],
-  },
-  labelWrap: 'Label Wrap',
-  wrapperWrap: 'Wrapper wrap',
-  fullness: 'Fullness',
-  inset: 'Inset',
-  shallow: 'Shallow',
-  bordered: 'Border',
-}
diff --git a/designable/next/src/locales/en-US/FormTab.ts b/designable/next/src/locales/en-US/FormTab.ts
deleted file mode 100644
index 60ffee74be2..00000000000
--- a/designable/next/src/locales/en-US/FormTab.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormTab: ISettingsLocale = {
-  size: {
-    title: 'Size',
-    dataSource: ['Small', 'Medium', 'Inherit'],
-  },
-  shape: {
-    title: 'Shape',
-    dataSource: ['Pure', 'Wrapper', 'Text', 'Capsule'],
-  },
-  animation: 'Transition',
-  excessMode: {
-    title: 'Excess Mode',
-    tooltip: 'When there are too many tabs, how to slide?',
-    dataSource: ['Slider', 'Dropdown'],
-  },
-  tabPosition: {
-    title: 'Tab Position',
-    dataSource: ['Top', 'Bottom', 'Left', 'Right'],
-  },
-  triggerType: {
-    title: 'Trigger Type',
-    tooltip: 'Trigger method of activation tab',
-    dataSource: ['Click', 'Hover'],
-  },
-}
-
-FormTab.TabPane = {}
diff --git a/designable/next/src/locales/en-US/Input.ts b/designable/next/src/locales/en-US/Input.ts
deleted file mode 100644
index 95295cf8521..00000000000
--- a/designable/next/src/locales/en-US/Input.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Input: ISettingsLocale = {
-  showLimitHint: 'Show Limit Hint',
-  cutString: {
-    title: 'Cut String',
-    tooltip:
-      'When the maxLength is set, whether to truncate the string is exceeded',
-  },
-  trim: {
-    title: 'Trim',
-    tooltip: 'Remove leading and trailing spaces',
-  },
-  composition: 'Filter Ime Middle Letters',
-  hint: {
-    title: 'Hint',
-    tooltip:
-      'The value is taken from the type of Icon and is in the same position as the clear button',
-  },
-}
-
-Input.TextArea = {
-  ...Input,
-  autoHeight: 'Auto Height',
-  rows: 'Rows',
-}
diff --git a/designable/next/src/locales/en-US/NumberPicker.ts b/designable/next/src/locales/en-US/NumberPicker.ts
deleted file mode 100644
index 6fdafcfeda4..00000000000
--- a/designable/next/src/locales/en-US/NumberPicker.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const NumberPicker: ISettingsLocale = {
-  type: {
-    title: 'Type',
-    dataSource: ['Normal', 'Inline'],
-  },
-  precision: 'Precision',
-  innerAfter: 'Inner After',
-  device: {
-    title: 'Preset Device',
-    dataSource: ['Desktop', 'Phone', 'Pad'],
-  },
-  hasTrigger: 'Trigger',
-  alwaysShowTrigger: 'Always Show Trigger',
-}
diff --git a/designable/next/src/locales/en-US/Password.ts b/designable/next/src/locales/en-US/Password.ts
deleted file mode 100644
index 085fb24a106..00000000000
--- a/designable/next/src/locales/en-US/Password.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Password: ISettingsLocale = {}
diff --git a/designable/next/src/locales/en-US/Radio.ts b/designable/next/src/locales/en-US/Radio.ts
deleted file mode 100644
index 2d95c4a2690..00000000000
--- a/designable/next/src/locales/en-US/Radio.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Radio: ISettingsLocale = {}
-
-Radio.Group = {
-  shape: {
-    title: 'Shape',
-    dataSource: ['Normal', 'Button'],
-  },
-}
diff --git a/designable/next/src/locales/en-US/Range.ts b/designable/next/src/locales/en-US/Range.ts
deleted file mode 100644
index cbad183ee35..00000000000
--- a/designable/next/src/locales/en-US/Range.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Range: ISettingsLocale = {
-  slider: {
-    title: 'Slider',
-    dataSource: ['Single', 'Double'],
-  },
-  step: {
-    title: 'Step',
-    tooltip:
-      'The value must be greater than 0 and can be divided by (max - min)',
-  },
-  marks: {
-    title: 'Marks',
-    tooltip:
-      'False means not to display, Array enumeration shows the value, Number means to divide equally by number, Object means to divide by key, and value is displayed)',
-  },
-  marksPosition: {
-    title: 'Marks Position',
-    dataSource: ['Top', 'Bottom'],
-  },
-  hasTip: 'Show Tips',
-  reverse: {
-    title: 'Reversal',
-    tooltip: 'Selected state inversion',
-  },
-  pure: 'Pure Rendering',
-  fixedWidth: {
-    title: 'Fixed Width',
-  },
-  tooltipVisible: 'Tooltips Visible',
-}
diff --git a/designable/next/src/locales/en-US/Rating.ts b/designable/next/src/locales/en-US/Rating.ts
deleted file mode 100644
index 03b60ddc6fa..00000000000
--- a/designable/next/src/locales/en-US/Rating.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Rating: ISettingsLocale = {
-  count: 'Star Count',
-  showGrade: 'Grade',
-  allowHalf: 'Allow Half Star',
-  allowClear: {
-    title: 'Clear After Clicking',
-    tooltip: 'After scoring, click the Rating again to clear the count',
-  },
-}
diff --git a/designable/next/src/locales/en-US/Select.ts b/designable/next/src/locales/en-US/Select.ts
deleted file mode 100644
index 8a2d4a01882..00000000000
--- a/designable/next/src/locales/en-US/Select.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Select: ISettingsLocale = {
-  filterLocal: 'Local Filter',
-  filter: 'Filter Function',
-  autoHighlightFirstItem: 'Auto highlight first item',
-  mode: {
-    title: 'Mode',
-    dataSource: ['Single', 'Multiple', 'Tags'],
-  },
-  notFoundContent: 'No Content Prompt',
-  showDataSourceChildren: 'Show Data Source Children',
-  hasSelectAll: 'Can Select All',
-  cacheValue: {
-    title: 'Cache Value',
-    tooltip:
-      'Do you want to keep the selected value when the data source changes',
-  },
-  tagInline: 'Tag Inline',
-  tagClosable: 'Tag Closable',
-  adjustTagSize: {
-    title: 'Adjust Tag Size',
-    tooltip: 'Adjust the tag the same as the selector',
-  },
-  maxTagCount: 'Max Tag Count',
-  hiddenSelected: 'Hidden Selected',
-  popupAutoFocus: 'Popup Auto Focus',
-}
diff --git a/designable/next/src/locales/en-US/Space.ts b/designable/next/src/locales/en-US/Space.ts
deleted file mode 100644
index a156842dfcc..00000000000
--- a/designable/next/src/locales/en-US/Space.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Space: ISettingsLocale = {
-  align: {
-    title: 'Alignment',
-    dataSource: ['Start', 'End', 'Center', 'Baseline'],
-  },
-  split: 'Split',
-  wrap: 'Auto Wrap',
-}
diff --git a/designable/next/src/locales/en-US/Style.ts b/designable/next/src/locales/en-US/Style.ts
deleted file mode 100644
index 8dae5a1bc02..00000000000
--- a/designable/next/src/locales/en-US/Style.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Style: ISettingsLocale = {
-  width: 'Width',
-  height: 'Height',
-  display: 'Display',
-  background: 'Background',
-  boxShadow: 'Box Shadow',
-  font: 'Font',
-  margin: 'Margin',
-  padding: 'Padding',
-  borderRadius: 'Border Radius',
-  border: 'Border',
-  opacity: 'Opacity',
-}
diff --git a/designable/next/src/locales/en-US/Switch.ts b/designable/next/src/locales/en-US/Switch.ts
deleted file mode 100644
index 14fa275d935..00000000000
--- a/designable/next/src/locales/en-US/Switch.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Switch: ISettingsLocale = {
-  size: {
-    title: 'Size',
-    dataSource: ['Small', 'Medium', 'Inherit', 'Nothing'],
-  },
-  checkedChildren: 'Open Content',
-  unCheckedChildren: 'Close Content',
-}
diff --git a/designable/next/src/locales/en-US/Text.ts b/designable/next/src/locales/en-US/Text.ts
deleted file mode 100644
index 03179836474..00000000000
--- a/designable/next/src/locales/en-US/Text.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Text: ISettingsLocale = {
-  content: 'Text Content',
-  mode: {
-    title: 'Text Type',
-    dataSource: ['H1', 'H2', 'H3', 'Paragraph', 'Normal'],
-  },
-}
diff --git a/designable/next/src/locales/en-US/TimePicker.ts b/designable/next/src/locales/en-US/TimePicker.ts
deleted file mode 100644
index 59c3e81bf0b..00000000000
--- a/designable/next/src/locales/en-US/TimePicker.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const TimePicker: ISettingsLocale = {
-  format: {
-    title: 'Format',
-    placeholder: 'e.g. HH:mm:ss',
-  },
-  hourStep: 'Hour Step',
-  minuteStep: 'Minute Step',
-  secondStep: 'Second Step',
-}
diff --git a/designable/next/src/locales/en-US/Transfer.ts b/designable/next/src/locales/en-US/Transfer.ts
deleted file mode 100644
index 01ead4e6759..00000000000
--- a/designable/next/src/locales/en-US/Transfer.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Transfer: ISettingsLocale = {
-  id: 'Id',
-  mode: {
-    title: 'Mode',
-    dataSource: ['Normal', 'Simple'],
-  },
-  leftDisabled: 'Disable Left Panel',
-  rightDisabled: 'Disable Right Panel',
-  filter: 'Filter Function',
-  searchPlaceholder: 'Search placeholder tips',
-  titles: 'Titles',
-  sortable: 'Sortable',
-  showCheckAll: 'Show Check All',
-}
diff --git a/designable/next/src/locales/en-US/TreeSelect.ts b/designable/next/src/locales/en-US/TreeSelect.ts
deleted file mode 100644
index ba21dbcf5c9..00000000000
--- a/designable/next/src/locales/en-US/TreeSelect.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Select } from './Select'
-import type { ISettingsLocale } from '../types'
-
-export const TreeSelect: ISettingsLocale = {
-  ...Select,
-  treeCheckable: {
-    title: 'Tree Checkable',
-    tooltip:
-      'Whether the tree in the drop-down box supports checking the check box of the node',
-  },
-  treeCheckStrictly: {
-    title: 'Tree Check Strictly',
-    tooltip:
-      'Check whether the node check box in the tree in the drop-down box is completely controlled (the selected status of parent and child nodes is no longer associated)',
-  },
-  treeCheckedStrategy: {
-    title: 'Tree Checked Strategy',
-    tooltip: 'How to backfill when selected',
-    dataSource: [
-      'Return only parents',
-      'Return only children',
-      'Returns all selected',
-    ],
-  },
-  treeDefaultExpandAll: 'Expand All By Default',
-}
diff --git a/designable/next/src/locales/en-US/Upload.ts b/designable/next/src/locales/en-US/Upload.ts
deleted file mode 100644
index 187b431b9e7..00000000000
--- a/designable/next/src/locales/en-US/Upload.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Upload: ISettingsLocale = {
-  action: 'Upload Url',
-  shape: {
-    title: 'Shape',
-    dataSource: ['Normal', 'Card'],
-  },
-  accept: 'Accept File Type',
-  data: 'Upload Extra Data',
-  headers: 'Upload Headers',
-  withCredentials: 'With Credentials',
-  timeout: 'Timeout(ms)',
-  method: {
-    title: 'Upload Method',
-    dataSource: ['POST', 'PUT'],
-  },
-  request: 'Custom Upload Function',
-  name: 'Name Key',
-  listType: {
-    title: 'Upload List Type',
-    dataSource: ['Default', 'Text', 'Image', 'Card'],
-  },
-  limit: 'Max Upload count',
-  dragable: 'Dragable',
-  useDataURL: 'Local Preview',
-  autoUpload: 'Auto Upload',
-}
-
-Upload.Dragger = { ...Upload }
diff --git a/designable/next/src/locales/en-US/index.ts b/designable/next/src/locales/en-US/index.ts
deleted file mode 100644
index aa99fff17b9..00000000000
--- a/designable/next/src/locales/en-US/index.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Common } from './Common'
-import { Field } from './Field'
-import { FormLayout } from './FormLayout'
-import { Card } from './Card'
-import { FormGrid } from './FormGrid'
-import { Space } from './Space'
-import { FormTab } from './FormTab'
-import { FormCollapse } from './FormCollapse'
-import { Input } from './Input'
-import { Select } from './Select'
-import { TreeSelect } from './TreeSelect'
-import { Cascader } from './Cascader'
-import { Radio } from './Radio'
-import { Checkbox } from './Checkbox'
-import { Range } from './Range'
-import { Rating } from './Rating'
-import { DatePicker } from './DatePicker'
-import { TimePicker } from './TimePicker'
-import { NumberPicker } from './NumberPicker'
-import { Password } from './Password'
-import { Transfer } from './Transfer'
-import { Upload } from './Upload'
-import { Switch } from './Switch'
-import { ArrayTable } from './ArrayTable'
-import { ArrayCards } from './ArrayCards'
-import { Text } from './Text'
-import * as ArrayComponents from './Array'
-import type { ISettingsLocale } from '../types'
-
-const Form: ISettingsLocale = { ...Common, ...FormLayout }
-
-const Components: ISettingsLocale = {
-  FormLayout,
-  Card,
-  FormGrid,
-  Space,
-  FormTab,
-  FormCollapse,
-  Input,
-  Select,
-  TreeSelect,
-  Cascader,
-  Radio,
-  Checkbox,
-  Range,
-  Rating,
-  DatePicker,
-  TimePicker,
-  NumberPicker,
-  Password,
-  Transfer,
-  Upload,
-  Switch,
-  Text,
-  ArrayTable,
-  ArrayCards,
-}
-
-const enUS: ISettingsLocale = {
-  Components: {
-    Root: 'Root',
-    DesignableForm: 'Form',
-    DesignableField: 'Field',
-    Input: { title: 'Input', TextArea: 'TextArea' },
-    Select: 'Select',
-    Radio: { title: 'Radio', Group: 'Radio Group' },
-    Checkbox: {
-      title: 'Checkbox',
-      Group: 'Checkbox Group',
-    },
-    Card: 'Card',
-    FormGrid: 'Form Grid',
-    FormLayout: 'Form Layout',
-    Range: 'Range',
-    Rating: 'Rating',
-    Cascader: 'Cascader',
-    Space: 'Space',
-    DatePicker: { title: 'Date', RangePicker: 'Date Range' },
-    TimePicker: { title: 'Time', RangePicker: 'Time Range' },
-    NumberPicker: 'Number',
-    Password: 'Password',
-    Transfer: 'Transfer',
-    TreeSelect: 'TreeSelect',
-    Upload: { title: 'Upload', Dragger: 'Dragger Upload' },
-    Switch: 'Switch',
-    FormTab: { title: 'Form Tab', TabPane: 'Tab Panel' },
-    FormCollapse: { title: 'Form Collapse', CollapsePanel: 'Collapse Panel' },
-    Object: 'Object',
-    Void: 'Void Element',
-    Text: 'Text',
-    ...ArrayComponents,
-    FormItem: 'Form Item',
-  },
-  Settings: {
-    ...Form,
-    ...Field,
-    namespace: Components,
-  },
-  Common: {
-    droppable: 'Droppable',
-    addTabPane: 'Add Panel',
-    addCollapsePanel: 'Add Panel',
-    addTableColumn: 'Add Column',
-    addTableSortHandle: 'Add Sort Handle',
-    addIndex: 'Add Index',
-    addOperation: 'Add Operations',
-  },
-}
-
-export default enUS
diff --git a/designable/next/src/locales/index.ts b/designable/next/src/locales/index.ts
deleted file mode 100644
index a2ddf209801..00000000000
--- a/designable/next/src/locales/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import zhCN from './zh-CN'
-import enUS from './en-US'
-
-GlobalRegistry.registerDesignerLocales({
-  'zh-CN': zhCN,
-  'en-US': enUS,
-})
diff --git a/designable/next/src/locales/types.ts b/designable/next/src/locales/types.ts
deleted file mode 100644
index aff99c9b286..00000000000
--- a/designable/next/src/locales/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface ISettingsLocale {
-  [key: string]:
-    | string
-    | {
-        title?: string
-        description?: string
-        tooltip?: string
-        placeholder?: string
-        dataSource?: string[]
-      }
-    | ISettingsLocale
-}
diff --git a/designable/next/src/locales/zh-CN/Array.ts b/designable/next/src/locales/zh-CN/Array.ts
deleted file mode 100644
index f932b425633..00000000000
--- a/designable/next/src/locales/zh-CN/Array.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-const ArrayOperations: ISettingsLocale = {
-  Index: '索引',
-  SortHandle: '排序手柄',
-  Addition: '新增按钮',
-  Remove: '删除按钮',
-  MoveDown: '下移按钮',
-  MoveUp: '上移按钮',
-}
-
-export const ArrayTable: ISettingsLocale = {
-  ...ArrayOperations,
-  title: '自增表格',
-  Column: '表格列',
-}
-
-export const ArrayCards: ISettingsLocale = {
-  ...ArrayOperations,
-  title: '自增卡片',
-}
-
-export const ArrayTabs = {
-  ...ArrayOperations,
-  title: '自增选项卡',
-}
-
-export const ArrayCollapse: ISettingsLocale = {
-  ...ArrayOperations,
-  title: '自增手风琴',
-}
diff --git a/designable/next/src/locales/zh-CN/ArrayCards.ts b/designable/next/src/locales/zh-CN/ArrayCards.ts
deleted file mode 100644
index 11b5f1a4d56..00000000000
--- a/designable/next/src/locales/zh-CN/ArrayCards.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ArrayTable } from './ArrayTable'
-import { Card } from './Card'
-
-export const ArrayCards = Card
-
-ArrayCards.Addition = ArrayTable.Addition
diff --git a/designable/next/src/locales/zh-CN/ArrayTable.ts b/designable/next/src/locales/zh-CN/ArrayTable.ts
deleted file mode 100644
index 70b9080af4a..00000000000
--- a/designable/next/src/locales/zh-CN/ArrayTable.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const ArrayTable: ISettingsLocale = {
-  primaryKey: '主键',
-  tableLayout: {
-    title: '表格布局',
-    dataSource: ['自动', '固定'],
-  },
-  size: {
-    title: '尺寸',
-    dataSource: ['小', '中', '继承', '无'],
-  },
-  tableWidth: '表格宽度',
-  hasHeader: '表格头',
-  isZebra: '斑马线',
-  emptyContent: '空内容文案',
-  fixedHeader: '固定表格头',
-  maxBodyHeight: {
-    title: '最大主体高度',
-    tooltip: '启用固定表格头时，超过此高度时会出现滚动条',
-  },
-  stickyHeader: '粘性头部',
-}
-
-ArrayTable.Column = {
-  align: {
-    title: '单元格对齐',
-    dataSource: ['左', '中', '右'],
-  },
-  alignHeader: {
-    title: '表格头对齐',
-    tooltip: '不设置将与单元格对齐方式相同',
-    dataSource: ['左', '中', '右'],
-  },
-  lock: {
-    title: '锁列',
-    dataSource: ['不锁', '左', '右', '锁'],
-  },
-  colSpan: '格数',
-  wordBreak: {
-    title: '单词打破',
-    dataSource: ['全部', '单词'],
-  },
-}
-
-ArrayTable.Addition = {
-  method: {
-    title: '添加方法',
-    dataSource: ['尾部', '头部'],
-  },
-  defaultValue: '默认值',
-}
diff --git a/designable/next/src/locales/zh-CN/Card.ts b/designable/next/src/locales/zh-CN/Card.ts
deleted file mode 100644
index 0a62632e7c5..00000000000
--- a/designable/next/src/locales/zh-CN/Card.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Card: ISettingsLocale = {
-  subTitle: '子标题',
-  showTitleBullet: '标题项目符号',
-  showHeadDivider: '标题分割线',
-  contentHeight: '内容高度',
-}
diff --git a/designable/next/src/locales/zh-CN/Cascader.ts b/designable/next/src/locales/zh-CN/Cascader.ts
deleted file mode 100644
index 9378baa0d36..00000000000
--- a/designable/next/src/locales/zh-CN/Cascader.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Cascader: ISettingsLocale = {
-  expandTriggerType: {
-    title: '展开触发',
-    dataSource: ['点击', '移入'],
-  },
-  canOnlySelectLeaf: '单选仅叶节点',
-  canOnlyCheckLeaf: '多选仅叶节点',
-  checkStrictly: '父子节点选中不关联',
-}
diff --git a/designable/next/src/locales/zh-CN/Checkbox.ts b/designable/next/src/locales/zh-CN/Checkbox.ts
deleted file mode 100644
index 6e70835994f..00000000000
--- a/designable/next/src/locales/zh-CN/Checkbox.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Checkbox: ISettingsLocale = {}
-
-Checkbox.Group = {}
diff --git a/designable/next/src/locales/zh-CN/Common.ts b/designable/next/src/locales/zh-CN/Common.ts
deleted file mode 100644
index bca424e0b04..00000000000
--- a/designable/next/src/locales/zh-CN/Common.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Style } from './Style'
-import type { ISettingsLocale } from '../types'
-
-export const Common: ISettingsLocale = {
-  title: '标题',
-  placeholder: '占位提示',
-  extra: '右侧扩展',
-  min: '最小值',
-  max: '最大值',
-  step: '步长',
-  closeable: '可关闭',
-  autoFocus: '自动聚焦',
-  width: '宽度',
-  height: '高度',
-  minLength: '最小长度',
-  maxLength: '最大长度',
-  minWidth: '最小宽度',
-  maxWidth: '最大宽度',
-  minHeight: '最小高度',
-  maxHeight: '最大高度',
-  notFoundContent: '无内容提示文案',
-  addonBefore: '前缀',
-  addonAfter: '后缀',
-  innerBefore: '框内前缀',
-  innerAfter: '框内后缀',
-  addonTextBefore: '前缀标签',
-  addonTextAfter: '后缀标签',
-  tooltip: '提示',
-  autoWidth: '自动宽度',
-  name: '名称',
-  showSearch: '搜索按钮',
-  multiple: '允许多选',
-  hasArrow: '下拉箭头',
-  hasBorder: '边框',
-  hasClear: {
-    title: '清除按钮',
-    tooltip: '启用后，输入时可点击右侧清除按钮快速清空输入',
-  },
-  style: Style,
-  size: {
-    title: '尺寸',
-    dataSource: ['小', '中', '大', '继承'],
-  },
-  direction: {
-    title: '方向',
-    dataSource: ['水平', '垂直'],
-  },
-  followTrigger: {
-    title: '跟随滚动',
-    tooltip: '启用后可让弹层跟随组件一起滚动，而不是停留在弹出的位置',
-  },
-  useVirtual: {
-    title: '虚拟滚动',
-    tooltip: '用于数据量较大时优化性能，快速滚动时可能闪烁',
-  },
-  immutable: '不可变数据',
-  popupTriggerType: {
-    title: '触发弹层',
-    dataSource: ['点击', '移入'],
-  },
-  popupAlign: {
-    title: '弹层对齐方式',
-    tooltip: '参考 Overlay 文档',
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/DatePicker.ts b/designable/next/src/locales/zh-CN/DatePicker.ts
deleted file mode 100644
index d87f1a98049..00000000000
--- a/designable/next/src/locales/zh-CN/DatePicker.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-const CommonDatePickerLocale: ISettingsLocale = {
-  format: {
-    title: '格式',
-    placeholder: 'YYYY-MM-DD',
-  },
-  showTime: '使用时间控件',
-  resetTime: '选择时重置时间',
-}
-export const DatePicker: ISettingsLocale = {
-  ...CommonDatePickerLocale,
-}
-
-DatePicker.RangePicker = {
-  ...CommonDatePickerLocale,
-  type: {
-    title: '类型',
-    dataSource: ['日', '月', '年'],
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/Field.ts b/designable/next/src/locales/zh-CN/Field.ts
deleted file mode 100644
index c7439e55ee9..00000000000
--- a/designable/next/src/locales/zh-CN/Field.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FormItem } from './FormItem'
-import { Style } from './Style'
-import type { ISettingsLocale } from '../types'
-import { Common } from './Common'
-
-export const Field: ISettingsLocale = {
-  name: '字段标识',
-  title: '标题',
-  required: '必填',
-  description: '描述',
-  default: '默认值',
-  enum: '数据源',
-  'x-display': {
-    title: '展示状态',
-    tooltip: '半隐藏只会隐藏UI，全隐藏会删除数据',
-    dataSource: ['显示', '半隐藏', '全隐藏', '继承'],
-  },
-  'x-pattern': {
-    title: 'UI形态',
-    dataSource: ['可编辑', '禁用', '只读', '阅读', '继承'],
-  },
-  'x-validator': '校验规则',
-  'x-reactions': '响应器规则',
-  'x-decorator': '启用容器组件',
-  'x-decorator-props': {
-    ...Common,
-    ...FormItem,
-    style: Style,
-    tab_property: '容器属性',
-    tab_style: '容器样式',
-  },
-  'x-component-props': {
-    ...Common,
-    tab_property: '组件属性',
-    tab_style: '组件样式',
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/FormCollapse.ts b/designable/next/src/locales/zh-CN/FormCollapse.ts
deleted file mode 100644
index 2d6e0a7a05b..00000000000
--- a/designable/next/src/locales/zh-CN/FormCollapse.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormCollapse: ISettingsLocale = {
-  accordion: {
-    title: '手风琴模式',
-    tooltip: '启用后一次只能展开一个',
-  },
-}
-
-FormCollapse.CollapsePanel = {}
diff --git a/designable/next/src/locales/zh-CN/FormGrid.ts b/designable/next/src/locales/zh-CN/FormGrid.ts
deleted file mode 100644
index a14c0aeeddc..00000000000
--- a/designable/next/src/locales/zh-CN/FormGrid.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormGrid: ISettingsLocale = {
-  minColumns: '最小列数',
-  maxColumns: '最大列数',
-  breakpoints: '响应式断点',
-  columnGap: '列间距',
-  rowGap: '行间距',
-  colWrap: '自动换行',
-}
diff --git a/designable/next/src/locales/zh-CN/FormItem.ts b/designable/next/src/locales/zh-CN/FormItem.ts
deleted file mode 100644
index 88c2e057d7f..00000000000
--- a/designable/next/src/locales/zh-CN/FormItem.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { FormLayout } from './FormLayout'
-import type { ISettingsLocale } from '../types'
-
-export const FormItem: ISettingsLocale = {
-  ...FormLayout,
-  asterisk: '星号',
-  gridSpan: '网格跨列',
-}
diff --git a/designable/next/src/locales/zh-CN/FormLayout.ts b/designable/next/src/locales/zh-CN/FormLayout.ts
deleted file mode 100644
index 8361f0173fc..00000000000
--- a/designable/next/src/locales/zh-CN/FormLayout.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormLayout: ISettingsLocale = {
-  labelCol: '标签网格宽度',
-  wrapperCol: '组件网格宽度',
-  labelWidth: '标签宽度',
-  wrapperWidth: '组件宽度',
-  colon: '是否有冒号',
-  feedbackLayout: {
-    title: '反馈布局',
-    dataSource: ['宽松', '紧凑', '弹层', '无', '继承'],
-  },
-  layout: {
-    title: '布局',
-    dataSource: ['水平', '垂直', '内联', '继承'],
-  },
-  tooltipLayout: {
-    title: '提示布局',
-    dataSource: ['图标', '文本', '继承'],
-  },
-  labelAlign: {
-    title: '标签对齐',
-    dataSource: ['左', '右', '继承'],
-  },
-  wrapperAlign: {
-    title: '组件对齐',
-    dataSource: ['左', '右', '继承'],
-  },
-  labelWrap: '标签换行',
-  wrapperWrap: '组件换行',
-  fullness: '组件占满',
-  inset: '内联布局',
-  shallow: '是否浅传递',
-  bordered: '是否有边框',
-}
diff --git a/designable/next/src/locales/zh-CN/FormTab.ts b/designable/next/src/locales/zh-CN/FormTab.ts
deleted file mode 100644
index 9215a5b0157..00000000000
--- a/designable/next/src/locales/zh-CN/FormTab.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const FormTab: ISettingsLocale = {
-  size: {
-    title: '尺寸',
-    dataSource: ['小', '中', '继承'],
-  },
-  shape: {
-    title: '外观',
-    dataSource: ['纯净', '包裹', '文本', '胶囊'],
-  },
-  animation: '动画过渡',
-  excessMode: {
-    title: '滑动模式',
-    tooltip: '选项卡过多时，如何滑动？',
-    dataSource: ['滑动器', '下拉列表'],
-  },
-  tabPosition: {
-    title: '选项卡位置',
-    dataSource: ['上', '下', '左', '右'],
-  },
-  triggerType: {
-    title: '选项卡激活方式',
-    tooltip: '激活选项卡的触发方式',
-    dataSource: ['点击', '移入'],
-  },
-}
-
-FormTab.TabPane = {}
diff --git a/designable/next/src/locales/zh-CN/Input.ts b/designable/next/src/locales/zh-CN/Input.ts
deleted file mode 100644
index a0e4a501f4c..00000000000
--- a/designable/next/src/locales/zh-CN/Input.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Input: ISettingsLocale = {
-  showLimitHint: '长度限制提示',
-  cutString: {
-    title: '截断',
-    tooltip: '当设置最大长度后，超出是否截断字符串',
-  },
-  trim: {
-    title: '修剪',
-    tooltip: '移除首尾空格',
-  },
-  composition: '过滤输入法中间字母',
-  hint: {
-    title: '水印',
-    tooltip: '值取自 Icon 的 type，与清除按钮在同一位置',
-  },
-}
-
-Input.TextArea = {
-  ...Input,
-  autoHeight: '自动高度',
-  rows: '文本框高度',
-}
diff --git a/designable/next/src/locales/zh-CN/NumberPicker.ts b/designable/next/src/locales/zh-CN/NumberPicker.ts
deleted file mode 100644
index 7141f2570a6..00000000000
--- a/designable/next/src/locales/zh-CN/NumberPicker.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const NumberPicker: ISettingsLocale = {
-  type: {
-    title: '类型',
-    dataSource: ['正常', '内联'],
-  },
-  precision: '保留小数点后位数',
-  innerAfter: '后缀',
-  device: {
-    title: '预设设备',
-    dataSource: ['桌面', '手机', '平板'],
-  },
-  hasTrigger: '展示调整按钮',
-  alwaysShowTrigger: '总是展示调整按钮',
-}
diff --git a/designable/next/src/locales/zh-CN/Password.ts b/designable/next/src/locales/zh-CN/Password.ts
deleted file mode 100644
index 085fb24a106..00000000000
--- a/designable/next/src/locales/zh-CN/Password.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Password: ISettingsLocale = {}
diff --git a/designable/next/src/locales/zh-CN/Radio.ts b/designable/next/src/locales/zh-CN/Radio.ts
deleted file mode 100644
index d46d575081e..00000000000
--- a/designable/next/src/locales/zh-CN/Radio.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Radio: ISettingsLocale = {}
-
-Radio.Group = {
-  shape: {
-    title: '形状',
-    dataSource: ['正常', '按钮'],
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/Range.ts b/designable/next/src/locales/zh-CN/Range.ts
deleted file mode 100644
index bb0176709b3..00000000000
--- a/designable/next/src/locales/zh-CN/Range.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Range: ISettingsLocale = {
-  slider: {
-    title: '滑块个数',
-    dataSource: ['单个', '两个'],
-  },
-  step: {
-    title: '步长',
-    tooltip: '取值必须大于 0，并且可被 (最大值 - 最小值) 整除',
-  },
-  marks: {
-    title: '标记',
-    tooltip:
-      '刻度数值显示逻辑（false 代表不显示，array 枚举显示的值，number 代表按 number 平分，object 表示按 key 划分，value 值显示）',
-  },
-  marksPosition: {
-    title: '标记位置',
-    dataSource: ['上方', '下方'],
-  },
-  hasTip: '显示提示',
-  reverse: {
-    title: '反转',
-    tooltip: '选中态反转',
-  },
-  pure: '纯净渲染',
-  fixedWidth: {
-    title: '是否为拖动线段类型',
-  },
-  tooltipVisible: '默认展示提示',
-}
diff --git a/designable/next/src/locales/zh-CN/Rating.ts b/designable/next/src/locales/zh-CN/Rating.ts
deleted file mode 100644
index aeb22874375..00000000000
--- a/designable/next/src/locales/zh-CN/Rating.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Rating: ISettingsLocale = {
-  count: '评分总数',
-  showGrade: '星星总数',
-  allowHalf: '半星评分',
-  allowClear: {
-    title: '点击后清除',
-    tooltip: '评分后再次点击评分清除评分',
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/Select.ts b/designable/next/src/locales/zh-CN/Select.ts
deleted file mode 100644
index 7cfa9e81699..00000000000
--- a/designable/next/src/locales/zh-CN/Select.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Select: ISettingsLocale = {
-  filterLocal: '本地过滤',
-  filter: '过滤方法',
-  autoHighlightFirstItem: '自动高亮首项',
-  mode: {
-    title: '模式',
-    dataSource: ['单选', '多选', '标签'],
-  },
-  notFoundContent: {
-    title: '无内容提示',
-    tooltip: '弹层内容为空的文案',
-  },
-  showDataSourceChildren: {
-    title: '展示数据源子节点',
-  },
-  hasSelectAll: '多选模式下是否可全选',
-  cacheValue: {
-    title: '缓存选中值',
-    tooltip: '数据源变化的时是否保留已选的内容',
-  },
-  tagInline: '标签行内展示',
-  tagClosable: '标签可关闭',
-  adjustTagSize: {
-    title: '调整标签大小',
-    tooltip: '调整标签大小与选择器相同',
-  },
-  maxTagCount: '最多展示标签数量',
-  hiddenSelected: '选择后立即隐藏菜单',
-  popupAutoFocus: '弹出菜单时自动聚焦',
-}
diff --git a/designable/next/src/locales/zh-CN/Space.ts b/designable/next/src/locales/zh-CN/Space.ts
deleted file mode 100644
index 5e4905a741f..00000000000
--- a/designable/next/src/locales/zh-CN/Space.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Space: ISettingsLocale = {
-  align: {
-    title: '对齐',
-    dataSource: ['起始', '结尾', '中间', '基线'],
-  },
-  split: '分割内容',
-  wrap: '自动换行',
-}
diff --git a/designable/next/src/locales/zh-CN/Style.ts b/designable/next/src/locales/zh-CN/Style.ts
deleted file mode 100644
index 95f58f8a620..00000000000
--- a/designable/next/src/locales/zh-CN/Style.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Style: ISettingsLocale = {
-  width: '宽度',
-  height: '高度',
-  display: '展示',
-  background: '背景',
-  boxShadow: '阴影',
-  font: '字体',
-  margin: '外边距',
-  padding: '内边距',
-  borderRadius: '圆角',
-  border: '边框',
-  opacity: '透明度',
-}
diff --git a/designable/next/src/locales/zh-CN/Switch.ts b/designable/next/src/locales/zh-CN/Switch.ts
deleted file mode 100644
index 603f42f9f03..00000000000
--- a/designable/next/src/locales/zh-CN/Switch.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Switch: ISettingsLocale = {
-  size: {
-    title: '尺寸',
-    dataSource: ['小', '中', '继承', '无'],
-  },
-  checkedChildren: '打开时内容',
-  unCheckedChildren: '关闭时内容',
-}
diff --git a/designable/next/src/locales/zh-CN/Text.ts b/designable/next/src/locales/zh-CN/Text.ts
deleted file mode 100644
index 5ee0dbec454..00000000000
--- a/designable/next/src/locales/zh-CN/Text.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Text: ISettingsLocale = {
-  content: '文本内容',
-  mode: {
-    title: '文本类型',
-    dataSource: ['H1', 'H2', 'H3', 'Paragraph', 'Normal'],
-  },
-}
diff --git a/designable/next/src/locales/zh-CN/TimePicker.ts b/designable/next/src/locales/zh-CN/TimePicker.ts
deleted file mode 100644
index 7cb18b90d86..00000000000
--- a/designable/next/src/locales/zh-CN/TimePicker.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const TimePicker: ISettingsLocale = {
-  format: {
-    title: '格式化',
-    placeholder: '如 HH:mm:ss',
-  },
-  hourStep: '小时步长',
-  minuteStep: '分钟步长',
-  secondStep: '秒钟步长',
-}
diff --git a/designable/next/src/locales/zh-CN/Transfer.ts b/designable/next/src/locales/zh-CN/Transfer.ts
deleted file mode 100644
index d2beef4d636..00000000000
--- a/designable/next/src/locales/zh-CN/Transfer.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Transfer: ISettingsLocale = {
-  id: '标识',
-  mode: {
-    title: '模式',
-    dataSource: ['正常', '简单'],
-  },
-  leftDisabled: '禁用左侧面板',
-  rightDisabled: '禁用右侧面板',
-  filter: '过滤函数',
-  searchPlaceholder: '搜索占位提示',
-  titles: '左右面板标题',
-  sortable: '拖拽排序',
-  showCheckAll: '底部全选',
-}
diff --git a/designable/next/src/locales/zh-CN/TreeSelect.ts b/designable/next/src/locales/zh-CN/TreeSelect.ts
deleted file mode 100644
index caf633e5e71..00000000000
--- a/designable/next/src/locales/zh-CN/TreeSelect.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Select } from './Select'
-import type { ISettingsLocale } from '../types'
-
-export const TreeSelect: ISettingsLocale = {
-  ...Select,
-  treeCheckable: {
-    title: '勾选树',
-    tooltip: '下拉框中的树是否支持勾选节点的复选框',
-  },
-  treeCheckStrictly: {
-    title: '严格树勾选',
-    tooltip:
-      '下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）',
-  },
-  treeCheckedStrategy: {
-    title: '勾选树策略',
-    tooltip: '选中时回填的方式',
-    dataSource: ['只返回父节点', '只返回子节点', '返回所有选中的节点'],
-  },
-  treeDefaultExpandAll: '默认展开所有节点',
-}
diff --git a/designable/next/src/locales/zh-CN/Upload.ts b/designable/next/src/locales/zh-CN/Upload.ts
deleted file mode 100644
index dd20e75c140..00000000000
--- a/designable/next/src/locales/zh-CN/Upload.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ISettingsLocale } from '../types'
-
-export const Upload: ISettingsLocale = {
-  action: '上传地址',
-  shape: {
-    title: '外观',
-    dataSource: ['正常', '卡片'],
-  },
-  accept: '接受文件类型',
-  data: '上传额外参数',
-  headers: '上传请求头部',
-  withCredentials: '携带 Cookie',
-  timeout: '超时（ms）',
-  method: {
-    title: '上传方法',
-    dataSource: ['POST', 'PUT'],
-  },
-  request: '自定义上传函数',
-  name: '文件名键值',
-  listType: {
-    title: '上传列表样式',
-    dataSource: ['默认', '文本', '图片', '卡片'],
-  },
-  limit: '最大文件上传数量',
-  dragable: '支持拖拽上传',
-  useDataURL: '本地预览',
-  autoUpload: '自动上传',
-}
-
-Upload.Dragger = { ...Upload }
diff --git a/designable/next/src/locales/zh-CN/index.ts b/designable/next/src/locales/zh-CN/index.ts
deleted file mode 100644
index 6fc8d75e0b9..00000000000
--- a/designable/next/src/locales/zh-CN/index.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Common } from './Common'
-import { Field } from './Field'
-import { FormLayout } from './FormLayout'
-import { Card } from './Card'
-import { FormGrid } from './FormGrid'
-import { Space } from './Space'
-import { FormTab } from './FormTab'
-import { FormCollapse } from './FormCollapse'
-import { Input } from './Input'
-import { Select } from './Select'
-import { TreeSelect } from './TreeSelect'
-import { Cascader } from './Cascader'
-import { Radio } from './Radio'
-import { Checkbox } from './Checkbox'
-import { Range } from './Range'
-import { Rating } from './Rating'
-import { DatePicker } from './DatePicker'
-import { TimePicker } from './TimePicker'
-import { NumberPicker } from './NumberPicker'
-import { Password } from './Password'
-import { Transfer } from './Transfer'
-import { Upload } from './Upload'
-import { Switch } from './Switch'
-import { Text } from './Text'
-import { ArrayTable } from './ArrayTable'
-import { ArrayCards } from './ArrayCards'
-import * as ArrayComponents from './Array'
-import type { ISettingsLocale } from '../types'
-
-const Form: ISettingsLocale = { ...Common, ...FormLayout }
-
-const Components: ISettingsLocale = {
-  FormLayout,
-  Card,
-  FormGrid,
-  Space,
-  FormTab,
-  FormCollapse,
-  Input,
-  Select,
-  TreeSelect,
-  Cascader,
-  Radio,
-  Checkbox,
-  Range,
-  Rating,
-  Text,
-  DatePicker,
-  TimePicker,
-  NumberPicker,
-  Password,
-  Transfer,
-  Upload,
-  Switch,
-  ArrayTable,
-  ArrayCards,
-}
-
-const zhCN: ISettingsLocale = {
-  Components: {
-    Root: '根组件',
-    DesignableForm: '表单',
-    DesignableField: '字段',
-    Input: { title: '输入框', TextArea: '多行文本' },
-    Select: '选择框',
-    Radio: { title: '单选框', Group: '单选框组' },
-    Checkbox: {
-      title: '复选框',
-      Group: '复选框组',
-    },
-    Card: '卡片布局',
-    FormGrid: '网格布局',
-    FormLayout: '表单布局',
-    Range: '滑动条',
-    Rating: '评分器',
-    Cascader: '联级选择',
-    Space: '弹性间距',
-    DatePicker: { title: '日期选择', RangePicker: '日期范围' },
-    TimePicker: { title: '时间选择', RangePicker: '时间范围' },
-    NumberPicker: '数字输入',
-    Password: '密码输入',
-    Transfer: '穿梭框',
-    TreeSelect: '树选择',
-    Upload: { title: '上传', Dragger: '拖拽上传' },
-    Switch: '开关',
-    FormTab: { title: '选项卡布局', TabPane: '选项卡面板' },
-    FormCollapse: { title: '手风琴布局', CollapsePanel: '手风琴面板' },
-    Object: '数据对象',
-    Void: '虚拟容器',
-    Text: '文本',
-    ...ArrayComponents,
-    FormItem: '表单项容器',
-  },
-  Settings: {
-    ...Form,
-    ...Field,
-    namespace: Components,
-  },
-  Common: {
-    droppable: '可以拖入组件',
-    addTabPane: '添加选项卡',
-    addCollapsePanel: '添加手风琴卡片',
-    addTableColumn: '添加表格列',
-    addTableSortHandle: '添加排序',
-    addIndex: '添加索引',
-    addOperation: '添加操作',
-  },
-}
-
-export default zhCN
diff --git a/designable/next/src/schemas/ArrayCards.ts b/designable/next/src/schemas/ArrayCards.ts
deleted file mode 100644
index b970c033a98..00000000000
--- a/designable/next/src/schemas/ArrayCards.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ArrayTable } from './ArrayTable'
-import { Card } from './Card'
-
-export const ArrayCards = Card
-ArrayCards.Addition = ArrayTable.Addition
diff --git a/designable/next/src/schemas/ArrayTable.ts b/designable/next/src/schemas/ArrayTable.ts
deleted file mode 100644
index b4e8623c5e3..00000000000
--- a/designable/next/src/schemas/ArrayTable.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const ArrayTable: ISchema & { Addition?: ISchema; Column?: ISchema } = {
-  type: 'object',
-  properties: {
-    primaryKey: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-      'x-component-props': {
-        defaultValue: 'id',
-      },
-    },
-    tableLayout: {
-      type: 'string',
-      enum: ['auto', 'fixed'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'auto',
-        optionType: 'button',
-      },
-    },
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    tableWidth: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    hasBorder: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hasHeader: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    isZebra: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    emptyContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    fixedHeader: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      default: false,
-    },
-    maxBodyHeight: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-reactions': {
-        dependencies: ['.fixedHeader'],
-        fulfill: {
-          state: {
-            visible: '{{$deps[0]}}',
-          },
-        },
-      },
-    },
-    stickyHeader: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    useVirtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-const Column: ISchema = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    width: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    align: {
-      type: 'string',
-      enum: ['left', 'center', 'right'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-    alignHeader: {
-      type: 'string',
-      enum: ['left', 'center', 'right'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-    lock: {
-      type: 'string',
-      enum: [false, 'left', 'right', true],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-    colSpan: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    wordBreak: {
-      type: 'string',
-      enum: ['all', 'word'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'all',
-        optionType: 'button',
-      },
-    },
-  },
-}
-
-const Addition: ISchema = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    method: {
-      type: 'string',
-      enum: ['push', 'unshift'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'push',
-        optionType: 'button',
-      },
-    },
-    defaultValue: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-    },
-  },
-}
-
-ArrayTable.Column = Column
-ArrayTable.Addition = Addition
diff --git a/designable/next/src/schemas/CSSStyle.ts b/designable/next/src/schemas/CSSStyle.ts
deleted file mode 100644
index 8d60878091d..00000000000
--- a/designable/next/src/schemas/CSSStyle.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const CSSStyle: ISchema = {
-  type: 'void',
-  properties: {
-    'style.width': {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    'style.height': {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    'style.display': {
-      'x-component': 'DisplayStyleSetter',
-    },
-    'style.background': {
-      'x-component': 'BackgroundStyleSetter',
-    },
-    'style.boxShadow': {
-      'x-component': 'BoxShadowStyleSetter',
-    },
-    'style.font': {
-      'x-component': 'FontStyleSetter',
-    },
-    'style.margin': {
-      'x-component': 'BoxStyleSetter',
-    },
-    'style.padding': {
-      'x-component': 'BoxStyleSetter',
-    },
-    'style.borderRadius': {
-      'x-component': 'BorderRadiusStyleSetter',
-    },
-    'style.border': {
-      'x-component': 'BorderStyleSetter',
-    },
-    'style.opacity': {
-      'x-decorator': 'FormItem',
-      'x-component': 'Slider',
-      'x-component-props': {
-        defaultValue: 1,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Card.ts b/designable/next/src/schemas/Card.ts
deleted file mode 100644
index 5f6145433cb..00000000000
--- a/designable/next/src/schemas/Card.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Card: ISchema & { Addition?: ISchema } = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    subTitle: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    showTitleBullet: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showHeadDivider: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    contentHeight: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    extra: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Cascader.ts b/designable/next/src/schemas/Cascader.ts
deleted file mode 100644
index 38eec4d401b..00000000000
--- a/designable/next/src/schemas/Cascader.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Cascader: ISchema = {
-  type: 'object',
-  properties: {
-    expandTriggerType: {
-      type: 'string',
-      enum: ['click', 'hover'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'click',
-        optionType: 'button',
-      },
-    },
-    useVirtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    multiple: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      default: false,
-    },
-    canOnlySelectLeaf: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.multiple'],
-        fulfill: {
-          state: {
-            visible: '{{!$deps[0]}}',
-          },
-        },
-      },
-    },
-    canOnlyCheckLeaf: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.multiple'],
-        fulfill: {
-          state: {
-            visible: '{{$deps[0]}}',
-          },
-        },
-      },
-    },
-    checkStrictly: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    immutable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Checkbox.ts b/designable/next/src/schemas/Checkbox.ts
deleted file mode 100644
index 98226f8ff8a..00000000000
--- a/designable/next/src/schemas/Checkbox.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Checkbox: ISchema & { Group?: ISchema } = {
-  type: 'object',
-  properties: {},
-}
-
-Checkbox.Group = {
-  type: 'object',
-  properties: {
-    direction: {
-      type: 'string',
-      enum: ['hoz', 'ver'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'hoz',
-        optionType: 'button',
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/DatePicker.ts b/designable/next/src/schemas/DatePicker.ts
deleted file mode 100644
index 54382b5b74c..00000000000
--- a/designable/next/src/schemas/DatePicker.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-const CommonDatePickerAPI = {
-  size: {
-    type: 'string',
-    enum: ['small', 'medium', 'large', null],
-    'x-decorator': 'FormItem',
-    'x-component': 'Select',
-    'x-component-props': {
-      defaultValue: 'medium',
-    },
-  },
-  placeholder: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  format: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  showTime: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  resetTime: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-  hasClear: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-    'x-component-props': {
-      defaultChecked: true,
-    },
-  },
-  popupTriggerType: {
-    type: 'string',
-    enum: ['click', 'hover'],
-    'x-decorator': 'FormItem',
-    'x-component': 'Radio.Group',
-    'x-component-props': {
-      defaultValue: 'click',
-      optionType: 'button',
-    },
-  },
-  popupAlign: {
-    type: 'string',
-    'x-decorator': 'FormItem',
-    'x-component': 'Input',
-  },
-  followTrigger: {
-    type: 'boolean',
-    'x-decorator': 'FormItem',
-    'x-component': 'Switch',
-  },
-}
-
-export const DatePicker: ISchema & { RangePicker?: ISchema } = {
-  type: 'object',
-  properties: {
-    ...CommonDatePickerAPI,
-  },
-}
-
-DatePicker.RangePicker = {
-  type: 'object',
-  properties: {
-    ...CommonDatePickerAPI,
-    type: {
-      type: 'string',
-      enum: ['date', 'month', 'year'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'date',
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Form.ts b/designable/next/src/schemas/Form.ts
deleted file mode 100644
index 51b143ecd33..00000000000
--- a/designable/next/src/schemas/Form.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ISchema } from '@formily/react'
-import { FormLayout } from './FormLayout'
-import { CSSStyle } from './CSSStyle'
-
-export const Form: ISchema = {
-  type: 'object',
-  properties: {
-    ...(FormLayout.properties as any),
-    style: CSSStyle,
-  },
-}
diff --git a/designable/next/src/schemas/FormCollapse.ts b/designable/next/src/schemas/FormCollapse.ts
deleted file mode 100644
index 23e94628ec9..00000000000
--- a/designable/next/src/schemas/FormCollapse.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const FormCollapse: ISchema & { CollapsePanel?: ISchema } = {
-  type: 'object',
-  properties: {
-    accordion: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-FormCollapse.CollapsePanel = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/FormGrid.ts b/designable/next/src/schemas/FormGrid.ts
deleted file mode 100644
index ced61bbc994..00000000000
--- a/designable/next/src/schemas/FormGrid.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const FormGrid: ISchema = {
-  type: 'object',
-  properties: {
-    minWidth: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 100,
-      },
-    },
-    maxWidth: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    minColumns: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 0,
-      },
-    },
-    maxColumns: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    breakpoints: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    columnGap: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 10,
-      },
-    },
-    rowGap: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 5,
-      },
-    },
-    colWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/FormItem.ts b/designable/next/src/schemas/FormItem.ts
deleted file mode 100644
index b87bea7c1a1..00000000000
--- a/designable/next/src/schemas/FormItem.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const FormItem: ISchema = {
-  type: 'object',
-  properties: {
-    tooltip: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonBefore: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    labelCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    wrapperCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    labelWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    wrapperWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    colon: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    asterisk: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    gridSpan: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    feedbackLayout: {
-      type: 'string',
-      enum: ['loose', 'terse', 'popover', 'none', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'loose',
-      },
-    },
-    size: {
-      type: 'string',
-      enum: ['small', 'default', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    layout: {
-      type: 'string',
-      enum: ['horizontal', 'vertical', 'inline', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-      },
-    },
-    tooltipLayout: {
-      type: 'string',
-      enum: ['icon', 'text', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'icon',
-      },
-    },
-    labelAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'right',
-      },
-    },
-    wrapperAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'left',
-      },
-    },
-    labelWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    wrapperWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    fullness: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    inset: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/FormLayout.ts b/designable/next/src/schemas/FormLayout.ts
deleted file mode 100644
index 517aae1ebbf..00000000000
--- a/designable/next/src/schemas/FormLayout.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const FormLayout: ISchema = {
-  type: 'object',
-  properties: {
-    labelCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    wrapperCol: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    labelWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    wrapperWidth: {
-      'x-decorator': 'FormItem',
-      'x-component': 'SizeInput',
-    },
-    colon: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    feedbackLayout: {
-      type: 'string',
-      enum: ['loose', 'terse', 'popover', 'none', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'loose',
-      },
-    },
-    size: {
-      type: 'string',
-      enum: ['small', 'default', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'default',
-      },
-    },
-    layout: {
-      type: 'string',
-      enum: ['horizontal', 'vertical', 'inline', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-      },
-    },
-    tooltipLayout: {
-      type: 'string',
-      enum: ['icon', 'text', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'icon',
-      },
-    },
-    labelAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'right',
-      },
-    },
-    wrapperAlign: {
-      type: 'string',
-      enum: ['left', 'right', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'left',
-      },
-    },
-    labelWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    wrapperWrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    fullness: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    inset: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    shallow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    bordered: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/FormTab.ts b/designable/next/src/schemas/FormTab.ts
deleted file mode 100644
index 2e548c66506..00000000000
--- a/designable/next/src/schemas/FormTab.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const FormTab: ISchema & { TabPane?: ISchema } = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    shape: {
-      type: 'string',
-      enum: ['pure', 'wrapped', 'text', 'capsule'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      default: 'pure',
-    },
-    animation: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    excessMode: {
-      type: 'string',
-      enum: ['slide', 'dropdown'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'slide',
-        optionType: 'button',
-      },
-    },
-    tabPosition: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'top',
-        optionType: 'button',
-      },
-      'x-reactions': {
-        dependencies: ['.shape'],
-        when: `{{$deps[0] === 'wrapped'}}`,
-        fulfill: {
-          schema: {
-            enum: ['top', 'bottom', 'left', 'right'],
-          },
-        },
-        otherwise: {
-          schema: {
-            enum: ['top', 'bottom'],
-          },
-          state: {
-            value: `{{$self.value !== 'bottom' ? 'top' : 'bottom'}}`,
-          },
-        },
-      },
-    },
-    triggerType: {
-      type: 'string',
-      enum: ['click', 'hover'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'click',
-        optionType: 'button',
-      },
-    },
-    extra: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-}
-
-FormTab.TabPane = {
-  type: 'object',
-  properties: {
-    title: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    closeable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Input.ts b/designable/next/src/schemas/Input.ts
deleted file mode 100644
index 4b569352ffa..00000000000
--- a/designable/next/src/schemas/Input.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Input: ISchema & { TextArea?: ISchema } = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    maxLength: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    showLimitHint: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    cutString: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    trim: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    composition: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    hasClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    hasBorder: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hint: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    innerBefore: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    innerAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonTextBefore: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    addonTextAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
-
-Input.TextArea = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    maxLength: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    cutString: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    trim: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    composition: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    hasBorder: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    autoHeight: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      default: false,
-    },
-    rows: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-reactions': {
-        dependencies: ['.autoHeight'],
-        fulfill: {
-          state: {
-            visible: '{{!$deps[0]}}',
-          },
-        },
-      },
-      'x-component-props': {
-        min: 0,
-        precision: 0,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/NumberPicker.ts b/designable/next/src/schemas/NumberPicker.ts
deleted file mode 100644
index 01632c53a89..00000000000
--- a/designable/next/src/schemas/NumberPicker.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const NumberPicker: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    type: {
-      type: 'string',
-      enum: ['normal', 'inline'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'normal',
-        optionType: 'button',
-      },
-    },
-    step: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    precision: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        min: 0,
-        precision: 0,
-      },
-    },
-    autoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    max: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    min: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    innerAfter: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    device: {
-      type: 'string',
-      enum: ['desktop', 'phone', 'tablet'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'desktop',
-        optionType: 'button',
-      },
-    },
-    hasTrigger: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      default: true,
-    },
-    alwaysShowTrigger: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.hasTrigger'],
-        fulfill: {
-          state: {
-            visible: '{{$deps[0]}}',
-          },
-        },
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Password.ts b/designable/next/src/schemas/Password.ts
deleted file mode 100644
index f3fa977cd0b..00000000000
--- a/designable/next/src/schemas/Password.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ISchema } from '@formily/react'
-import { Input } from './Input'
-
-export const Password: ISchema = {
-  type: 'object',
-  properties: Input.properties,
-}
diff --git a/designable/next/src/schemas/Radio.ts b/designable/next/src/schemas/Radio.ts
deleted file mode 100644
index 6abe7312b31..00000000000
--- a/designable/next/src/schemas/Radio.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Radio: ISchema & { Group?: ISchema } = {
-  type: 'object',
-  properties: {},
-}
-
-Radio.Group = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    shape: {
-      type: 'string',
-      enum: ['normal', 'button'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      default: 'normal',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-    direction: {
-      type: 'string',
-      enum: ['hoz', 'ver'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'hoz',
-        optionType: 'button',
-      },
-      'x-reactions': {
-        dependencies: ['.shape'],
-        fulfill: {
-          state: {
-            visible: `{{$deps[0] === 'normal'}}`,
-          },
-        },
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Range.ts b/designable/next/src/schemas/Range.ts
deleted file mode 100644
index 5f99130c8b0..00000000000
--- a/designable/next/src/schemas/Range.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Range: ISchema = {
-  type: 'object',
-  properties: {
-    slider: {
-      type: 'string',
-      enum: ['single', 'double'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'single',
-        optionType: 'button',
-      },
-    },
-    min: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    max: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    step: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    marks: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION', 'BOOLEAN', 'NUMBER'],
-      },
-    },
-    marksPosition: {
-      type: 'string',
-      enum: ['above', 'below'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'above',
-        optionType: 'button',
-      },
-    },
-    hasTip: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    reverse: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    pure: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    fixedWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    tooltipVisible: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    rtl: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Rating.ts b/designable/next/src/schemas/Rating.ts
deleted file mode 100644
index 39ef62d611e..00000000000
--- a/designable/next/src/schemas/Rating.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Rating: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    count: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    showGrade: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    allowHalf: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    allowClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Select.ts b/designable/next/src/schemas/Select.ts
deleted file mode 100644
index cbc9bd0e1a7..00000000000
--- a/designable/next/src/schemas/Select.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Select: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    autoWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hasClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    followTrigger: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    filterLocal: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    filter: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-        helpCode:
-          'function(key: string, item: object): boolean {\n  return true\n}',
-      },
-    },
-    autoHighlightFirstItem: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    useVirtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    mode: {
-      type: 'string',
-      enum: ['single', 'multiple', 'tag'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      default: 'single',
-      'x-component-props': {
-        optionType: 'button',
-      },
-    },
-    notFoundContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    showDataSourceChildren: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    hasBorder: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hasArrow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.mode'],
-        fulfill: {
-          state: {
-            visible: `{{$deps[0] !== 'tag'}}`,
-          },
-        },
-      },
-    },
-    hasSelectAll: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    cacheValue: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    tagInline: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.mode'],
-        fulfill: {
-          state: {
-            visible: `{{$deps[0] === 'multiple'}}`,
-          },
-        },
-      },
-    },
-    tagClosable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    adjustTagSize: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: false,
-      },
-    },
-    maxTagCount: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    hiddenSelected: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-reactions': {
-        dependencies: ['.mode'],
-        fulfill: {
-          state: {
-            visible: `{{$deps[0] === 'tag' || $deps[0] === 'multiple'}}`,
-          },
-        },
-      },
-    },
-    popupAutoFocus: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Space.ts b/designable/next/src/schemas/Space.ts
deleted file mode 100644
index 0de4efe051c..00000000000
--- a/designable/next/src/schemas/Space.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Space: ISchema = {
-  type: 'object',
-  properties: {
-    align: {
-      type: 'string',
-      enum: ['start', 'end', 'center', 'baseline'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-    },
-    direction: {
-      type: 'string',
-      enum: ['horizontal', 'vertical'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'horizontal',
-        optionType: 'button',
-      },
-    },
-    size: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-      'x-component-props': {
-        defaultValue: 8,
-      },
-    },
-    split: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    wrap: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Switch.ts b/designable/next/src/schemas/Switch.ts
deleted file mode 100644
index 03b184c5d56..00000000000
--- a/designable/next/src/schemas/Switch.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Switch: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    checkedChildren: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    unCheckedChildren: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    autoWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Text.ts b/designable/next/src/schemas/Text.ts
deleted file mode 100644
index 66784e1c78e..00000000000
--- a/designable/next/src/schemas/Text.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ISchema } from '@formily/react'
-
-export const Text: ISchema = {
-  type: 'object',
-  properties: {
-    content: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input.TextArea',
-    },
-    mode: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'normal',
-      },
-      enum: ['h1', 'h2', 'h3', 'p', 'normal'],
-    },
-  },
-}
diff --git a/designable/next/src/schemas/TimePicker.ts b/designable/next/src/schemas/TimePicker.ts
deleted file mode 100644
index c9d0dba8f9e..00000000000
--- a/designable/next/src/schemas/TimePicker.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const TimePicker: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    hasClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    format: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    hourStep: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    minuteStep: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    secondStep: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    popupAlign: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    popupTriggerType: {
-      type: 'string',
-      enum: ['click', 'hover'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'click',
-        optionType: 'button',
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Transfer.ts b/designable/next/src/schemas/Transfer.ts
deleted file mode 100644
index 47cbb8cee21..00000000000
--- a/designable/next/src/schemas/Transfer.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Transfer: ISchema = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    mode: {
-      type: 'string',
-      enum: ['normal', 'simple'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'normal',
-        optionType: 'button',
-      },
-    },
-    leftDisabled: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    rightDisabled: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    filter: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-        helpCode:
-          'function(searchedValue: string, data: object): boolean {\n  return true\n}',
-      },
-    },
-    searchPlaceholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    notFoundContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    titles: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    sortable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    useVirtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    showCheckAll: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
diff --git a/designable/next/src/schemas/TreeSelect.ts b/designable/next/src/schemas/TreeSelect.ts
deleted file mode 100644
index 6038be397f0..00000000000
--- a/designable/next/src/schemas/TreeSelect.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const TreeSelect: ISchema = {
-  type: 'object',
-  properties: {
-    size: {
-      type: 'string',
-      enum: ['small', 'medium', 'large', null],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'medium',
-      },
-    },
-    placeholder: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    hasArrow: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hasBorder: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    hasClear: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    autoWidth: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    showSearch: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    notFoundContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    multiple: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    treeCheckable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    treeCheckStrictly: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    treeCheckedStrategy: {
-      type: 'string',
-      enum: ['parent', 'child', 'all'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: 'parent',
-      },
-    },
-    treeDefaultExpandAll: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    followTrigger: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    useVirtual: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    immutable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-}
diff --git a/designable/next/src/schemas/Upload.ts b/designable/next/src/schemas/Upload.ts
deleted file mode 100644
index 7019b05efd2..00000000000
--- a/designable/next/src/schemas/Upload.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import type { ISchema } from '@formily/react'
-
-export const Upload: ISchema & { Dragger?: ISchema } = {
-  type: 'object',
-  properties: {
-    action: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    shape: {
-      type: 'string',
-      enum: [null, 'card'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: null,
-        optionType: 'button',
-      },
-    },
-    accept: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    data: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    headers: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-      },
-    },
-    withCredentials: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-    timeout: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    method: {
-      type: 'string',
-      enum: ['post', 'put'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      'x-component-props': {
-        defaultValue: 'post',
-        optionType: 'button',
-      },
-    },
-    request: {
-      'x-decorator': 'FormItem',
-      'x-component': 'ValueInput',
-      'x-component-props': {
-        include: ['EXPRESSION'],
-        helpCode: `// Function(option: Object) => Object`,
-      },
-    },
-    name: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-    listType: {
-      type: 'string',
-      enum: [null, 'text', 'image', 'card'],
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        defaultValue: null,
-      },
-    },
-    limit: {
-      type: 'number',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-    dragable: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    useDataURL: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-    autoUpload: {
-      type: 'boolean',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-      'x-component-props': {
-        defaultChecked: true,
-      },
-    },
-  },
-}
-
-Upload.Dragger = Upload
diff --git a/designable/next/src/schemas/index.ts b/designable/next/src/schemas/index.ts
deleted file mode 100644
index 77c01f385c0..00000000000
--- a/designable/next/src/schemas/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export * from './Input'
-export * from './FormLayout'
-export * from './CSSStyle'
-export * from './Form'
-export * from './FormItem'
-export * from './Select'
-export * from './Card'
-export * from './Cascader'
-export * from './Checkbox'
-export * from './Radio'
-export * from './DatePicker'
-export * from './NumberPicker'
-export * from './Password'
-export * from './Rating'
-export * from './Range'
-export * from './TimePicker'
-export * from './TreeSelect'
-export * from './Transfer'
-export * from './Upload'
-export * from './Switch'
-export * from './FormGrid'
-export * from './Space'
-export * from './Text'
-export * from './FormTab'
-export * from './FormCollapse'
-export * from './ArrayTable'
-export * from './ArrayCards'
diff --git a/designable/next/src/shared.ts b/designable/next/src/shared.ts
deleted file mode 100644
index 42347831f5c..00000000000
--- a/designable/next/src/shared.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { TreeNode, Engine } from '@designable/core'
-
-export type ComponentNameMatcher =
-  | string
-  | string[]
-  | ((name: string, node: TreeNode, context?: any) => boolean)
-
-export const matchComponent = (
-  node: TreeNode,
-  name: ComponentNameMatcher,
-  context?: any
-) => {
-  if (name === '*') return true
-  const componentName = node?.props?.['x-component']
-  if (typeof name === 'function')
-    return name(componentName || '', node, context)
-  if (Array.isArray(name)) return name.includes(componentName)
-  return componentName === name
-}
-
-export const matchChildComponent = (
-  node: TreeNode,
-  name: ComponentNameMatcher,
-  context?: any
-) => {
-  if (name === '*') return true
-  const componentName = node?.props?.['x-component']
-  if (!componentName) return false
-  if (typeof name === 'function')
-    return name(componentName || '', node, context)
-  if (Array.isArray(name)) return name.includes(componentName)
-  return componentName.indexOf(`${name}.`) > -1
-}
-
-export const includesComponent = (
-  node: TreeNode,
-  names: ComponentNameMatcher[],
-  target?: TreeNode
-) => {
-  return names.some((name) => matchComponent(node, name, target))
-}
-
-export const queryNodesByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-): TreeNode[] => {
-  if (path?.length === 0) return []
-  if (path?.length === 1) {
-    if (matchComponent(node, path[0])) {
-      return [node]
-    }
-  }
-  return matchComponent(node, path[0])
-    ? node.children.reduce((buf, child) => {
-        return buf.concat(queryNodesByComponentPath(child, path.slice(1)))
-      }, [])
-    : []
-}
-
-export const findNodeByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-): TreeNode => {
-  if (path?.length === 0) return
-  if (path?.length === 1) {
-    if (matchComponent(node, path[0])) {
-      return node
-    }
-  }
-  if (matchComponent(node, path[0])) {
-    for (let i = 0; i < node.children.length; i++) {
-      const next = findNodeByComponentPath(node.children[i], path.slice(1))
-      if (next) {
-        return next
-      }
-    }
-  }
-}
-
-export const hasNodeByComponentPath = (
-  node: TreeNode,
-  path: ComponentNameMatcher[]
-) => !!findNodeByComponentPath(node, path)
-
-export const matchArrayItemsNode = (node: TreeNode) => {
-  return (
-    node?.parent?.props?.type === 'array' &&
-    node?.parent?.children?.[0] === node
-  )
-}
-
-export const createNodeId = (designer: Engine, id: string) => {
-  return {
-    [designer.props.nodeIdAttrName]: id,
-  }
-}
-
-export const createEnsureTypeItemsNode = (type: string) => (node: TreeNode) => {
-  const objectNode = node.children.find((child) => child.props['type'] === type)
-  if (
-    objectNode &&
-    objectNode.designerProps.droppable &&
-    !objectNode.props['x-component']
-  ) {
-    return objectNode
-  } else {
-    const newObjectNode = new TreeNode({
-      componentName: 'DesignableField',
-      props: {
-        type,
-      },
-    })
-    node.prependNode(newObjectNode)
-    return newObjectNode
-  }
-}
diff --git a/designable/next/src/sources/arrays.ts b/designable/next/src/sources/arrays.ts
deleted file mode 100644
index 0f8cb421140..00000000000
--- a/designable/next/src/sources/arrays.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('arrays', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'array',
-      'x-decorator': 'FormItem',
-      'x-component': 'ArrayTable',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'array',
-      'x-decorator': 'FormItem',
-      'x-component': 'ArrayCards',
-      'x-component-props': {
-        title: `Title`,
-      },
-    },
-  },
-])
diff --git a/designable/next/src/sources/displays.ts b/designable/next/src/sources/displays.ts
deleted file mode 100644
index 8506ea95256..00000000000
--- a/designable/next/src/sources/displays.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('displays', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Text',
-    },
-  },
-])
diff --git a/designable/next/src/sources/index.ts b/designable/next/src/sources/index.ts
deleted file mode 100644
index c9da47ecd8a..00000000000
--- a/designable/next/src/sources/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import './inputs'
-import './layouts'
-import './arrays'
-import './displays'
diff --git a/designable/next/src/sources/inputs.ts b/designable/next/src/sources/inputs.ts
deleted file mode 100644
index 40c03e750d6..00000000000
--- a/designable/next/src/sources/inputs.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('inputs', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Input',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'TextArea',
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input.TextArea',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Select',
-      'x-decorator': 'FormItem',
-      'x-component': 'Select',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Tree Select',
-      'x-decorator': 'FormItem',
-      'x-component': 'TreeSelect',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      title: 'Cascader',
-      'x-decorator': 'FormItem',
-      'x-component': 'Cascader',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string | number',
-      title: 'Radio Group',
-      'x-decorator': 'FormItem',
-      'x-component': 'Radio.Group',
-      enum: [
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 },
-      ],
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<string | number>',
-      title: 'Checkbox Group',
-      'x-decorator': 'FormItem',
-      'x-component': 'Checkbox.Group',
-      enum: [
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 },
-      ],
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'Range',
-      'x-decorator': 'FormItem',
-      'x-component': 'Range',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'Rating',
-      'x-decorator': 'FormItem',
-      'x-component': 'Rating',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'DatePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: '[string,string]',
-      title: 'DateRangePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'DatePicker.RangePicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'TimePicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'TimePicker',
-    },
-  },
-  // {
-  //   componentName: 'DesignableField',
-  //   props: {
-  //     type: '[string,string]',
-  //     title: 'TimeRangePicker',
-  //     'x-decorator': 'FormItem',
-  //     'x-component': 'TimePicker.RangePicker',
-  //   },
-  // },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'number',
-      title: 'NumberPicker',
-      'x-decorator': 'FormItem',
-      'x-component': 'NumberPicker',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'string',
-      title: 'Password',
-      'x-decorator': 'FormItem',
-      'x-component': 'Password',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<string>',
-      title: 'Transfer',
-      'x-decorator': 'FormItem',
-      'x-component': 'Transfer',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<object>',
-      title: 'Upload',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload',
-      'x-component-props': {
-        textContent: 'Upload',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'Array<object>',
-      title: 'Drag Upload',
-      'x-decorator': 'FormItem',
-      'x-component': 'Upload.Dragger',
-      'x-component-props': {
-        textContent: 'Click or drag file to this area to upload',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'boolean',
-      title: 'Switch',
-      'x-decorator': 'FormItem',
-      'x-component': 'Switch',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'object',
-    },
-  },
-])
diff --git a/designable/next/src/sources/layouts.ts b/designable/next/src/sources/layouts.ts
deleted file mode 100644
index 3cbaa54b251..00000000000
--- a/designable/next/src/sources/layouts.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { GlobalDragSource } from '@designable/core'
-
-GlobalDragSource.appendSourcesByGroup('layouts', [
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Card',
-      'x-component-props': {
-        title: 'Title',
-        contentHeight: 'auto',
-      },
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormGrid',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormLayout',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'Space',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormTab',
-    },
-  },
-  {
-    componentName: 'DesignableField',
-    props: {
-      type: 'void',
-      'x-component': 'FormCollapse',
-    },
-  },
-])
diff --git a/designable/next/tsconfig.build.json b/designable/next/tsconfig.build.json
deleted file mode 100644
index dbf069a065d..00000000000
--- a/designable/next/tsconfig.build.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./lib",
-    "paths": {
-      "@formily/*": [
-        "../../packages/*",
-        "../../designable/*",
-        "../../devtools/*"
-      ]
-    },
-    "declaration": true
-  }
-}
diff --git a/designable/next/tsconfig.json b/designable/next/tsconfig.json
deleted file mode 100644
index c6865c25a75..00000000000
--- a/designable/next/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
-  "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/designable/setters/.npmignore b/designable/setters/.npmignore
deleted file mode 100644
index 1ff337420fd..00000000000
--- a/designable/setters/.npmignore
+++ /dev/null
@@ -1,11 +0,0 @@
-node_modules
-*.log
-build
-docs
-doc-site
-__tests__
-.eslintrc
-jest.config.js
-tsconfig.json
-.umi
-src
\ No newline at end of file
diff --git a/designable/setters/.umirc.js b/designable/setters/.umirc.js
deleted file mode 100644
index 1362b3c43c6..00000000000
--- a/designable/setters/.umirc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { resolve } from 'path'
-export default {
-  mode: 'site',
-  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
-  title: 'Formily',
-  hash: true,
-  favicon:
-    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
-  outputPath: './doc-site',
-  navs: [
-    {
-      title: 'Ant Design',
-      path: '/components',
-    },
-    {
-      title: '主站',
-      path: 'https://v2.formilyjs.org',
-    },
-    {
-      title: 'GITHUB',
-      path: 'https://github.com/alibaba/formily',
-    },
-  ],
-  styles: [
-    `.__dumi-default-navbar-logo{
-      height: 60px !important;
-      width: 150px !important;
-      padding-left:0 !important;
-      color: transparent !important;
-    }
-    .__dumi-default-navbar{
-      padding: 0 28px !important;
-    }
-    .__dumi-default-layout-hero{
-      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-    }
-    nav a{
-      text-decoration: none !important;
-    }
-    `,
-  ],
-}
diff --git a/designable/setters/LICENSE.md b/designable/setters/LICENSE.md
deleted file mode 100644
index 509632e8e80..00000000000
--- a/designable/setters/LICENSE.md
+++ /dev/null
@@ -1,20 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/designable/setters/README.md b/designable/setters/README.md
deleted file mode 100644
index 84103eebdc5..00000000000
--- a/designable/setters/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @formily/designable-antd
-
-### Install
-
-```bash
-npm install --save @formily/designable-antd
-```
diff --git a/designable/setters/copy.ts b/designable/setters/copy.ts
deleted file mode 100644
index d451fc48651..00000000000
--- a/designable/setters/copy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runCopy } from '../../scripts/build-style'
-
-runCopy({
-  esStr: 'antd/es/',
-  libStr: 'antd/lib/',
-})
diff --git a/designable/setters/package.json b/designable/setters/package.json
deleted file mode 100644
index efbc3ca3a0d..00000000000
--- a/designable/setters/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@formily/designable-setters",
-  "version": "2.0.0-rc.7",
-  "license": "MIT",
-  "main": "lib",
-  "module": "esm",
-  "umd:main": "dist/formily.designable.antd.umd.production.js",
-  "unpkg": "dist/formily.designable.umd.production.js",
-  "jsdelivr": "dist/formily.designable.umd.production.js",
-  "jsnext:main": "esm",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alibaba/formily.git"
-  },
-  "types": "esm/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/alibaba/formily/issues"
-  },
-  "homepage": "https://github.com/alibaba/formily#readme",
-  "engines": {
-    "npm": ">=3.0.0"
-  },
-  "scripts": {
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && ts-node copy",
-    "build:cjs": "tsc --project tsconfig.build.json",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
-    "build:umd": "rollup --config",
-    "start": "webpack-dev-server --config playground/webpack.dev.ts"
-  },
-  "devDependencies": {
-    "antd": "^4.0.0"
-  },
-  "peerDependencies": {
-    "@types/react": ">=16.8.0 || >=17.0.0",
-    "@types/react-dom": ">=16.8.0 || >=17.0.0",
-    "antd": "^4.0.0",
-    "react": ">=16.8.0 || >=17.0.0",
-    "react-dom": ">=16.8.0",
-    "react-is": ">=16.8.0 || >=17.0.0"
-  },
-  "dependencies": {
-    "@designable/core": "^0.x",
-    "@designable/formily": "^0.x",
-    "@designable/react": "^0.x",
-    "@designable/react-settings-form": "^0.x",
-    "@formily/antd": "2.0.0-rc.7",
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "2c44ae410a73f02735c63c6430e021a50e21f3ec"
-}
diff --git a/designable/setters/rollup.config.js b/designable/setters/rollup.config.js
deleted file mode 100644
index 859c8d570c1..00000000000
--- a/designable/setters/rollup.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import baseConfig, {
-  removeImportStyleFromInputFilePlugin,
-} from '../../scripts/rollup.base.js'
-import postcss from 'rollup-plugin-postcss'
-import NpmImport from 'less-plugin-npm-import'
-
-export default baseConfig(
-  'formily.designable.antd',
-  'Formily.Designable.Antd',
-  removeImportStyleFromInputFilePlugin(),
-  postcss({
-    extract: true,
-    minimize: true,
-    // extensions: ['.css', '.less', '.sass'],
-    use: {
-      less: {
-        plugins: [new NpmImport({ prefix: '~' })],
-        javascriptEnabled: true,
-      },
-      sass: {},
-      stylus: {},
-    },
-  })
-)
diff --git a/designable/setters/src/components/DataSourceSetter/DataSettingPanel.tsx b/designable/setters/src/components/DataSourceSetter/DataSettingPanel.tsx
deleted file mode 100644
index 3989b9f5d34..00000000000
--- a/designable/setters/src/components/DataSourceSetter/DataSettingPanel.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { useMemo, Fragment } from 'react'
-import { Button } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import { ArrayItems, Form, Input, FormItem } from '@formily/antd'
-import { createForm } from '@formily/core'
-import { observer } from '@formily/reactive-react'
-import { createSchemaField } from '@formily/react'
-import { ValueInput } from '@designable/react-settings-form'
-import { usePrefix, TextWidget } from '@designable/react'
-import { Header } from './Header'
-import { traverseTree } from './shared'
-import { ITreeDataSource } from './types'
-import './styles.less'
-
-const SchemaField = createSchemaField({
-  components: {
-    FormItem,
-    Input,
-    ArrayItems,
-    ValueInput,
-  },
-})
-
-export interface IDataSettingPanelProps {
-  treeDataSource: ITreeDataSource
-}
-
-export const DataSettingPanel: React.FC<IDataSettingPanelProps> = observer(
-  (props) => {
-    const prefix = usePrefix('data-source-setter')
-    const form = useMemo(() => {
-      let values: any
-      traverseTree(props.treeDataSource.dataSource, (dataItem) => {
-        if (dataItem.key === props.treeDataSource.selectedKey) {
-          values = dataItem
-        }
-      })
-      return createForm({
-        values,
-      })
-    }, [
-      props.treeDataSource.selectedKey,
-      props.treeDataSource.dataSource.length,
-    ])
-    if (!props.treeDataSource.selectedKey)
-      return (
-        <Fragment>
-          <Header
-            title={
-              <TextWidget token="SettingComponents.DataSourceSetter.nodeProperty" />
-            }
-            extra={null}
-          />
-          <div className={`${prefix + '-layout-item-content'}`}>
-            <TextWidget token="SettingComponents.DataSourceSetter.pleaseSelectNode" />
-          </div>
-        </Fragment>
-      )
-    return (
-      <Fragment>
-        <Header
-          title={
-            <TextWidget token="SettingComponents.DataSourceSetter.nodeProperty" />
-          }
-          extra={
-            <Button
-              type="text"
-              onClick={() => {
-                form.setFieldState('map', (state) => {
-                  state.value.push({})
-                })
-              }}
-              icon={<PlusOutlined />}
-            >
-              <TextWidget token="SettingComponents.DataSourceSetter.addKeyValuePair" />
-            </Button>
-          }
-        />
-        <div className={`${prefix + '-layout-item-content'}`}>
-          <Form form={form} labelWidth={60} wrapperWidth={160}>
-            <SchemaField>
-              <SchemaField.Array name="map" x-component="ArrayItems">
-                <SchemaField.Object
-                  x-decorator="ArrayItems.Item"
-                  x-decorator-props={{ type: 'divide' }}
-                >
-                  <SchemaField.String
-                    title={
-                      <TextWidget token="SettingComponents.DataSourceSetter.label" />
-                    }
-                    x-decorator="FormItem"
-                    name="label"
-                    x-component="Input"
-                  />
-                  <SchemaField.String
-                    title={
-                      <TextWidget token="SettingComponents.DataSourceSetter.value" />
-                    }
-                    x-decorator="FormItem"
-                    name="value"
-                    x-component="ValueInput"
-                  />
-                  <SchemaField.Void
-                    x-component="ArrayItems.Remove"
-                    x-component-props={{
-                      style: {
-                        margin: 5,
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      },
-                    }}
-                  />
-                </SchemaField.Object>
-              </SchemaField.Array>
-            </SchemaField>
-          </Form>
-        </div>
-      </Fragment>
-    )
-  }
-)
diff --git a/designable/setters/src/components/DataSourceSetter/Header.tsx b/designable/setters/src/components/DataSourceSetter/Header.tsx
deleted file mode 100644
index 4e81abad2c6..00000000000
--- a/designable/setters/src/components/DataSourceSetter/Header.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react'
-import { observer } from '@formily/reactive-react'
-import { usePrefix } from '@designable/react'
-import './styles.less'
-
-export interface IHeaderProps {
-  extra: ReactNode | null
-  title: ReactNode | string
-}
-
-export const Header: React.FC<IHeaderProps> = observer(({ extra, title }) => {
-  const prefix = usePrefix('data-source-setter')
-  return (
-    <div className={`${prefix + '-layout-item-header'}`}>
-      <div className={`${prefix + '-layout-item-title'}`}>{title}</div>
-      {extra}
-    </div>
-  )
-})
diff --git a/designable/setters/src/components/DataSourceSetter/Title.tsx b/designable/setters/src/components/DataSourceSetter/Title.tsx
deleted file mode 100644
index b1a5f306da6..00000000000
--- a/designable/setters/src/components/DataSourceSetter/Title.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import { clone, toArr } from '@formily/shared'
-import { observer } from '@formily/reactive-react'
-import { IconWidget, TextWidget, usePrefix } from '@designable/react'
-import { INodeItem, ITreeDataSource } from './types'
-import { traverseTree } from './shared'
-import './styles.less'
-export interface ITitleProps extends INodeItem {
-  treeDataSource: ITreeDataSource
-}
-
-export const Title: React.FC<ITitleProps> = observer((props) => {
-  const prefix = usePrefix('data-source-setter-node-title')
-  const getTitleValue = (dataSource) => {
-    const optionalKeys = ['label', 'title', 'header']
-    let nodeTitle: string
-    optionalKeys.some((key) => {
-      const title = toArr(dataSource).find((item) => item.label === key)?.value
-      if (title !== undefined) {
-        nodeTitle = title
-        return true
-      }
-      return false
-    })
-    if (nodeTitle === undefined) {
-      toArr(dataSource || []).some((item) => {
-        if (item.value && typeof item.value === 'string') {
-          nodeTitle = item.value
-          return true
-        }
-        return false
-      })
-    }
-    return nodeTitle
-  }
-
-  const renderTitle = (dataSource) => {
-    const nodeTitle = getTitleValue(dataSource)
-    if (nodeTitle === undefined)
-      return (
-        <TextWidget token="SettingComponents.DataSourceSetter.defaultTitle" />
-      )
-    else return nodeTitle + ''
-  }
-
-  return (
-    <div className={prefix}>
-      <span style={{ marginRight: '5px' }}>
-        {renderTitle(props?.map || [])}
-      </span>
-      <IconWidget
-        className={prefix + '-icon'}
-        infer="Remove"
-        onClick={() => {
-          const newDataSource = clone(props?.treeDataSource?.dataSource)
-          traverseTree(newDataSource || [], (dataItem, i, data) => {
-            if (data[i].key === props.duplicateKey) toArr(data).splice(i, 1)
-          })
-          props.treeDataSource.dataSource = newDataSource
-        }}
-      />
-    </div>
-  )
-})
diff --git a/designable/setters/src/components/DataSourceSetter/TreePanel.tsx b/designable/setters/src/components/DataSourceSetter/TreePanel.tsx
deleted file mode 100644
index 3210fb0a4dd..00000000000
--- a/designable/setters/src/components/DataSourceSetter/TreePanel.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Fragment } from 'react'
-import { Tree, Button, TreeProps } from 'antd'
-import { uid } from '@formily/shared'
-import { observer } from '@formily/reactive-react'
-import { usePrefix, TextWidget, IconWidget } from '@designable/react'
-import { Title } from './Title'
-import { Header } from './Header'
-import { traverseTree } from './shared'
-import { ITreeDataSource, INodeItem } from './types'
-import './styles.less'
-import { GlobalRegistry } from '@designable/core'
-
-export interface ITreePanelProps {
-  treeDataSource: ITreeDataSource
-}
-
-export const TreePanel: React.FC<ITreePanelProps> = observer((props) => {
-  const prefix = usePrefix('data-source-setter')
-  const dropHandler = (info: Parameters<TreeProps['onDrop']>[0]) => {
-    const dropKey = info.node?.key
-    const dragKey = info.dragNode?.key
-    const dropPos = info.node.pos.split('-')
-    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
-    const data = [...props.treeDataSource.dataSource]
-    // Find dragObject
-    let dragObj: INodeItem
-    traverseTree(data, (item, index, arr) => {
-      if (arr[index].key === dragKey) {
-        arr.splice(index, 1)
-        dragObj = item
-      }
-    })
-    if (!info.dropToGap) {
-      traverseTree(data, (item) => {
-        if (item.key === dropKey) {
-          item.children = item.children || []
-          item.children.unshift(dragObj)
-        }
-      })
-    } else if (
-      (info.node.children || []).length > 0 &&
-      info.node.expanded &&
-      dropPosition === 1
-    ) {
-      traverseTree(data, (item) => {
-        if (item.key === dropKey) {
-          item.children = item.children || []
-          item.children.unshift(dragObj)
-        }
-      })
-    } else {
-      let ar: any[]
-      let i: number
-      traverseTree(data, (item, index, arr) => {
-        if (item.key === dropKey) {
-          ar = arr
-          i = index
-        }
-      })
-      if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj)
-      } else {
-        ar.splice(i + 1, 0, dragObj)
-      }
-    }
-    props.treeDataSource.dataSource = data
-  }
-  return (
-    <Fragment>
-      <Header
-        title={
-          <TextWidget token="SettingComponents.DataSourceSetter.dataSourceTree" />
-        }
-        extra={
-          <Button
-            type="text"
-            onClick={() => {
-              const uuid = uid()
-              const dataSource = props.treeDataSource.dataSource
-              props.treeDataSource.dataSource = dataSource.concat({
-                key: uuid,
-                duplicateKey: uuid,
-                map: [
-                  {
-                    label: 'label',
-                    value: `${GlobalRegistry.getDesignerMessage(
-                      `SettingComponents.DataSourceSetter.item`
-                    )} ${dataSource.length + 1}`,
-                  },
-                  { label: 'value', value: uuid },
-                ],
-                children: [],
-              })
-            }}
-            icon={<IconWidget infer="Add" />}
-          >
-            <TextWidget token="SettingComponents.DataSourceSetter.addNode" />
-          </Button>
-        }
-      />
-      <div className={`${prefix + '-layout-item-content'}`}>
-        <Tree
-          blockNode
-          draggable
-          defaultExpandAll
-          defaultExpandParent
-          autoExpandParent
-          showLine={{ showLeafIcon: false }}
-          treeData={props.treeDataSource.dataSource}
-          onDragEnter={() => {}}
-          onDrop={dropHandler}
-          titleRender={(titleProps: INodeItem) => {
-            return (
-              <Title
-                {...titleProps}
-                treeDataSource={props.treeDataSource}
-              ></Title>
-            )
-          }}
-          onSelect={(selectedKeys) => {
-            if (selectedKeys[0]) {
-              props.treeDataSource.selectedKey = selectedKeys[0].toString()
-            }
-          }}
-        ></Tree>
-      </div>
-    </Fragment>
-  )
-})
diff --git a/designable/setters/src/components/DataSourceSetter/index.tsx b/designable/setters/src/components/DataSourceSetter/index.tsx
deleted file mode 100644
index 9d8ef8606ac..00000000000
--- a/designable/setters/src/components/DataSourceSetter/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { Fragment, useMemo, useState } from 'react'
-import cls from 'classnames'
-import { Modal, Button } from 'antd'
-import { observable } from '@formily/reactive'
-import { observer } from '@formily/reactive-react'
-import { usePrefix, useTheme, TextWidget } from '@designable/react'
-import { DataSettingPanel } from './DataSettingPanel'
-import { TreePanel } from './TreePanel'
-import { transformDataToValue, transformValueToData } from './shared'
-import { IDataSourceItem, ITreeDataSource } from './types'
-import './styles.less'
-
-export interface IDataSourceSetterProps {
-  className?: string
-  style?: React.CSSProperties
-  onChange: (dataSource: IDataSourceItem[]) => void
-  value: IDataSourceItem[]
-}
-export const DataSourceSetter: React.FC<IDataSourceSetterProps> = observer(
-  (props) => {
-    const { className, value = [], onChange } = props
-    const theme = useTheme()
-    const prefix = usePrefix('data-source-setter')
-    const [modalVisible, setModalVisible] = useState(false)
-    const treeDataSource: ITreeDataSource = useMemo(
-      () =>
-        observable({
-          dataSource: transformValueToData(value),
-          selectedKey: '',
-        }),
-      [value, modalVisible]
-    )
-    const openModal = () => setModalVisible(true)
-    const closeModal = () => setModalVisible(false)
-    return (
-      <Fragment>
-        <Button block onClick={openModal}>
-          <TextWidget token="SettingComponents.DataSourceSetter.configureDataSource" />
-        </Button>
-        <Modal
-          title={
-            <TextWidget token="SettingComponents.DataSourceSetter.configureDataSource" />
-          }
-          width="65%"
-          bodyStyle={{ padding: 10 }}
-          transitionName=""
-          maskTransitionName=""
-          visible={modalVisible}
-          onCancel={closeModal}
-          onOk={() => {
-            onChange(transformDataToValue(treeDataSource.dataSource))
-            closeModal()
-          }}
-        >
-          <div
-            className={`${cls(prefix, className)} ${prefix + '-' + theme} ${
-              prefix + '-layout'
-            }`}
-          >
-            <div className={`${prefix + '-layout-item left'}`}>
-              <TreePanel treeDataSource={treeDataSource}></TreePanel>
-            </div>
-            <div className={`${prefix + '-layout-item right'}`}>
-              <DataSettingPanel
-                treeDataSource={treeDataSource}
-              ></DataSettingPanel>
-            </div>
-          </div>
-        </Modal>
-      </Fragment>
-    )
-  }
-)
diff --git a/designable/setters/src/components/DataSourceSetter/shared.ts b/designable/setters/src/components/DataSourceSetter/shared.ts
deleted file mode 100644
index 072c6c70f83..00000000000
--- a/designable/setters/src/components/DataSourceSetter/shared.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { uid, clone, toArr } from '@formily/shared'
-import { IDataSourceItem, INodeItem } from './types'
-
-export interface INode {
-  key?: string
-  map?: any
-  children?: INode[]
-}
-
-export const traverseTree = <T extends INode>(
-  data: T[],
-  callback: (dataItem: T, i: number, data: T[]) => any
-) => {
-  for (let i = 0; i < data.length; i++) {
-    callback(data[i], i, data)
-    if (data[i]?.children) {
-      traverseTree(data[i]?.children, callback)
-    }
-  }
-}
-
-export const transformValueToData = (value: IDataSourceItem[]): INodeItem[] => {
-  const data = clone(value)
-  traverseTree(data, (item, i, dataSource) => {
-    const dataItem = {
-      key: '',
-      duplicateKey: '',
-      map: [],
-      children: [],
-    }
-    for (const [key, value] of Object.entries(dataSource[i] || {})) {
-      if (key !== 'children') dataItem.map.push({ label: key, value: value })
-    }
-    const uuid = uid()
-    dataItem.key = uuid
-    dataItem.duplicateKey = uuid
-    dataItem.children = dataSource[i].children || []
-    dataSource[i] = dataItem
-  })
-  return data
-}
-
-export const transformDataToValue = (data: INodeItem[]): IDataSourceItem[] => {
-  const value = clone(data)
-  traverseTree(value, (item, i, dataSource) => {
-    let valueItem: IDataSourceItem = {
-      children: [],
-    }
-    toArr(dataSource[i].map).forEach((item) => {
-      if (item.label) valueItem[item.label] = item.value
-    })
-    valueItem.children = dataSource[i]?.children || []
-    dataSource[i] = valueItem
-  })
-  return value
-}
diff --git a/designable/setters/src/components/DataSourceSetter/styles.less b/designable/setters/src/components/DataSourceSetter/styles.less
deleted file mode 100644
index f2561f2726e..00000000000
--- a/designable/setters/src/components/DataSourceSetter/styles.less
+++ /dev/null
@@ -1,81 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-data-source-setter {
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    transition: all 0.25s ease-in-out;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-  &-node-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-icon {
-      transition: all 0.15s ease-in-out;
-      opacity: 0;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-  }
-
-  &-layout {
-    display: flex;
-    justify-content: space-around;
-    border: 1px solid @border-color-split;
-    border-radius: 3px;
-
-    .ant-tree-treenode {
-      padding-right: 10px;
-      white-space: nowrap;
-
-      &:hover {
-        .dn-data-source-setter-node-title-icon {
-          opacity: 1;
-        }
-      }
-    }
-
-    &-item {
-      position: relative;
-
-      &.left {
-        width: 40%;
-        border-right: 1px solid @border-color-split;
-      }
-
-      &.right {
-        width: 60%;
-      }
-
-      &-header {
-        display: flex;
-        flex: none;
-        align-items: center;
-        justify-content: space-between;
-        height: 40px;
-        padding: 8px 12px 9px;
-        border-bottom: 1px solid @border-color-split;
-        border-radius: 2px 2px 0 0;
-      }
-
-      &-content {
-        padding: 2%;
-        height: 300px;
-        max-height: 300px;
-        overflow: scroll;
-      }
-    }
-  }
-}
diff --git a/designable/setters/src/components/DataSourceSetter/types.ts b/designable/setters/src/components/DataSourceSetter/types.ts
deleted file mode 100644
index ffffd0e65b9..00000000000
--- a/designable/setters/src/components/DataSourceSetter/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface IDataSourceItem {
-  label?: ''
-  value?: any
-  children?: any[]
-}
-
-export interface INodeItem {
-  key: string
-  duplicateKey?: string
-  map?: { label: string; value: any }[]
-  children?: INodeItem[]
-}
-
-export interface ITreeDataSource {
-  dataSource: INodeItem[]
-  selectedKey: string
-}
diff --git a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx b/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx
deleted file mode 100644
index eb09e255880..00000000000
--- a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { useState } from 'react'
-import { TextWidget, usePrefix } from '@designable/react'
-import { Menu } from 'antd'
-import { MonacoInput } from '@designable/react-settings-form'
-import { isPlainObj, reduce } from '@formily/shared'
-import { FieldProperties } from './properties'
-export interface IFieldProperty {
-  [key: string]: string
-}
-
-export interface IFieldPropertySetterProps {
-  extraLib?: string
-  value?: IFieldProperty
-  onChange?: (value: IFieldProperty) => void
-}
-
-const template = (code: string) => {
-  if (!code) return
-  return code.trim()
-}
-
-export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
-  props
-) => {
-  const [selectKeys, setSelectKeys] = useState(['visible'])
-  const prefix = usePrefix('field-property-setter')
-  const value = { ...props.value }
-
-  const parseExpression = (expression: string) => {
-    if (!expression) return ''
-    return String(expression).match(/^\{\{([\s\S]*)\}\}$/)?.[1] || ''
-  }
-
-  const filterEmpty = (value: object) => {
-    return reduce(
-      value,
-      (buf, value, key) => {
-        if (!value || value === '{{}}') return buf
-        buf[key] = value
-        return buf
-      },
-      {}
-    )
-  }
-
-  const currentProperty = FieldProperties.find(
-    (item) => item.key === selectKeys[0]
-  )
-
-  return (
-    <div className={prefix}>
-      <Menu
-        mode="vertical"
-        style={{
-          width: 200,
-          height: 300,
-          paddingRight: 4,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-        defaultSelectedKeys={selectKeys}
-        selectedKeys={selectKeys}
-        onSelect={({ selectedKeys }) => {
-          setSelectKeys(selectedKeys)
-        }}
-      >
-        {FieldProperties.map((key) => {
-          if (isPlainObj(key)) {
-            return (
-              <Menu.Item key={key.key}>
-                <TextWidget
-                  token={`SettingComponents.ReactionsSetter.${
-                    key.token || key.key
-                  }`}
-                />
-              </Menu.Item>
-            )
-          }
-          return (
-            <Menu.Item key={key}>
-              <TextWidget token={`SettingComponents.ReactionsSetter.${key}`} />
-            </Menu.Item>
-          )
-        })}
-      </Menu>
-      <div className={prefix + '-coder-wrapper'}>
-        <div className={prefix + '-coder-start'}>
-          {`$self.${selectKeys[0]} = (`}
-          <span
-            style={{
-              fontSize: 14,
-              marginLeft: 10,
-              color: '#888',
-              fontWeight: 'normal',
-            }}
-          >
-            {'//'}{' '}
-            <TextWidget token="SettingComponents.ReactionsSetter.expressionValueTypeIs" />{' '}
-            {'`'}
-            {currentProperty?.type}
-            {'`'}
-          </span>
-        </div>
-        <div className={prefix + '-coder'}>
-          <MonacoInput
-            key={selectKeys[0]}
-            language="javascript.expression"
-            extraLib={props.extraLib}
-            helpCode={template(currentProperty?.helpCode)}
-            value={parseExpression(value[selectKeys[0]])}
-            options={{
-              lineNumbers: 'off',
-              wordWrap: 'on',
-              glyphMargin: false,
-              folding: false,
-              lineDecorationsWidth: 0,
-              lineNumbersMinChars: 0,
-              minimap: {
-                enabled: false,
-              },
-            }}
-            onChange={(expression) => {
-              props.onChange?.(
-                filterEmpty({
-                  ...value,
-                  [selectKeys[0]]: `{{${expression}}}`,
-                })
-              )
-            }}
-          />
-        </div>
-        <div className={prefix + '-coder-end'}>{`)`}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/designable/setters/src/components/ReactionsSetter/PathSelector.tsx b/designable/setters/src/components/ReactionsSetter/PathSelector.tsx
deleted file mode 100644
index b96d326aed6..00000000000
--- a/designable/setters/src/components/ReactionsSetter/PathSelector.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@designable/core'
-import { useCurrentNode } from '@designable/react'
-import { TreeSelectProps, TreeSelect } from 'antd'
-
-export interface IPathSelectorProps
-  extends Omit<TreeSelectProps<any>, 'onChange'> {
-  value?: string
-  onChange?: (value: string, node: TreeNode) => void
-  style?: React.CSSProperties
-  className?: string
-}
-
-const transformDataSource = (node: TreeNode) => {
-  const currentNode = node
-  const dots = (count: number) => {
-    let dots = ''
-    for (let i = 0; i < count; i++) {
-      dots += '.'
-    }
-    return dots
-  }
-  const targetPath = (parentNode: TreeNode, targetNode: TreeNode) => {
-    const path = []
-    const transform = (node: TreeNode) => {
-      if (node && node !== parentNode) {
-        path.push(node.props.name || node.id)
-      } else {
-        transform(node.parent)
-      }
-    }
-    transform(targetNode)
-    return path.reverse().join('.')
-  }
-  const hasNoVoidChildren = (node: TreeNode) => {
-    return node.children?.some((node) => {
-      if (node.props.type !== 'void' && node !== currentNode) return true
-      return hasNoVoidChildren(node)
-    })
-  }
-  const findRoot = (node: TreeNode): TreeNode => {
-    if (!node?.parent) return node
-    if (node?.parent?.componentName !== node.componentName) return node.parent
-    return findRoot(node.parent)
-  }
-  const findArrayParent = (node: TreeNode) => {
-    if (!node?.parent) return
-    if (node.parent.props.type === 'array') return node.parent
-    if (node.parent === root) return
-    return findArrayParent(node.parent)
-  }
-  const transformRelativePath = (arrayNode: TreeNode, targetNode: TreeNode) => {
-    if (targetNode.depth === currentNode.depth)
-      return `.${targetNode.props.name || targetNode.id}`
-    return `${dots(currentNode.depth - arrayNode.depth)}[].${targetPath(
-      arrayNode,
-      targetNode
-    )}`
-  }
-  const transformChildren = (children: TreeNode[], path = []) => {
-    return children.reduce((buf, node) => {
-      if (node === currentNode) return buf
-      if (node.props.type === 'array' && !node.contains(currentNode)) return buf
-      if (node.props.type === 'void' && !hasNoVoidChildren(node)) return buf
-      const currentPath = path.concat(node.props.name || node.id)
-      const arrayNode = findArrayParent(node)
-      const label =
-        node.props.title ||
-        node.props['x-component-props']?.title ||
-        node.props.name ||
-        node.designerProps.title
-      const value = arrayNode
-        ? transformRelativePath(arrayNode, node)
-        : currentPath.join('.')
-      return buf.concat({
-        label,
-        value,
-        node,
-        children: transformChildren(node.children, currentPath),
-      })
-    }, [])
-  }
-  const root = findRoot(node)
-  if (root) {
-    return transformChildren(root.children)
-  }
-  return []
-}
-
-export const PathSelector: React.FC<IPathSelectorProps> = (props) => {
-  const baseNode = useCurrentNode()
-  const dataSource = transformDataSource(baseNode)
-  const findNode = (dataSource: any[], value: string) => {
-    for (let i = 0; i < dataSource.length; i++) {
-      const item = dataSource[i]
-      if (item.value === value) return item.node
-      if (item.children?.length) {
-        const fondedChild = findNode(item.children, value)
-        if (fondedChild) return fondedChild
-      }
-    }
-  }
-  return (
-    <TreeSelect
-      {...props}
-      onChange={(value) => {
-        props.onChange(value, findNode(dataSource, value))
-      }}
-      treeDefaultExpandAll
-      treeData={dataSource}
-    />
-  )
-}
diff --git a/designable/setters/src/components/ReactionsSetter/declarations.ts b/designable/setters/src/components/ReactionsSetter/declarations.ts
deleted file mode 100644
index 80fedfaa790..00000000000
--- a/designable/setters/src/components/ReactionsSetter/declarations.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { MonacoInput } from '@designable/react-settings-form'
-
-export interface IDependency {
-  name: string
-  path: string
-}
-
-const loadDependencies = async (deps: IDependency[]) => {
-  return Promise.all(
-    deps.map(async ({ name, path }) => ({
-      name,
-      path,
-      library: await fetch(`//cdn.jsdelivr.net/npm/${name}/${path}`).then(
-        (res) => res.text()
-      ),
-    }))
-  )
-}
-
-MonacoInput.loader.init().then(async (monaco) => {
-  const deps = await loadDependencies([
-    { name: '@formily/core', path: 'dist/formily.core.all.d.ts' },
-  ])
-  deps?.forEach(({ name, library }) => {
-    monaco.languages.typescript.typescriptDefaults.addExtraLib(
-      `declare module '${name}'{ ${library} }`,
-      `file:///node_modules/${name}/index.d.ts`
-    )
-  })
-  monaco.languages.typescript.typescriptDefaults.addExtraLib(
-    `
-    import { Form, Field } from '@formily/core'
-    declare global {
-      /*
-       * Form Model
-       **/
-      declare var $form: Form
-      /*
-       * Field Model
-       **/
-      declare var $self: Field
-      /*
-       * create an persistent observable state object
-       **/
-      declare var $observable: <T>(target: T, deps?: any[]) => T
-      /*
-       * create a persistent data
-       **/
-      declare var $memo: <T>(callback: () => T, deps?: any[]) => T
-      /*
-       * handle side-effect logic
-       **/
-      declare var $effect: (callback: () => void | (() => void), deps?: any[]) => void
-      /*
-       * set initial component props to current field
-       **/
-      declare var $props: (props: any) => void
-    }
-    `,
-    `file:///node_modules/formily_global.d.ts`
-  )
-})
diff --git a/designable/setters/src/components/ReactionsSetter/helpers.ts b/designable/setters/src/components/ReactionsSetter/helpers.ts
deleted file mode 100644
index 0b28735bebc..00000000000
--- a/designable/setters/src/components/ReactionsSetter/helpers.ts
+++ /dev/null
@@ -1,393 +0,0 @@
-export const GlobalHelper = `
-/** 
- * You can use the built-in context variables
- * 
- * 1. \`$self\` is the current Field Model 
- * 
- * 2. \`$form\` is the current Form Model 
- * 
- * 3. \`$deps\` is the dependencies value
- * 
- * 4. \`$observable\` function is used to create an persistent observable state object
- *
- * 5. \`$memo\` function is is used to create a persistent data
- * 
- * 6. \`$effect\` function is used to handle side-effect logic
- * 
- * 7. \`$props\` function is used to set component props to current field
- * 
- * Document Links
- * 
- * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F
- **/
-`
-
-export const BooleanHelper = `
-/** 
- * Example 1
- * Static Boolean
- **/
-
-false
-
-/** 
- * Example 2
- * Equal Calculation
- **/
-
-$deps.VariableName === 'TARGET_VALUE'
-
-/** 
- * Example 3
- * Not Equal Calculation
- **/
-
-$deps.VariableName !== 'TARGET_VALUE'
-
-/** 
- * Example 4
- * And Logic Calculation
- **/
-
-$deps.VariableName1 && $deps.VariableName2
-
-/** 
- * Example 5
- * Grater Logic Calculation
- **/
-
-$deps.VariableName > 100
-
-/** 
- * Example 6
- * Not Logic Calculation
- **/
-
-!$deps.VariableName
-
-${GlobalHelper}
-`
-
-export const DisplayHelper = `
-/** 
- * Example 1
- * Static Mode
- **/
-
-'none'
-
-/** 
- * Example 2
- * Equal Condition Associated
- **/
-
-$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none'
-
-/** 
- * Example 3
- * Not Equal Condition Associated
- **/
-
-$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden'
-
-/** 
- * Example 4
- * And Logic Condition Associated
- **/
-
-$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none'
-
-/** 
- * Example 5
- * Grater Logic Condition Associated
- **/
-
-$deps.VariableName > 100 ? 'visible' : 'hidden'
-
-/** 
- * Example 6
- * Not Logic Condition Associated
- **/
-
-!$deps.VariableName ? 'visible' : 'none'
-
-${GlobalHelper}
-`
-
-export const PatternHelper = `
-/** 
- * Example 1
- * Static Mode
- **/
-
-'readPretty'
-
-/** 
- * Example 2
- * Equal Condition Associated
- **/
-
-$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled'
-
-/** 
- * Example 3
- * Not Equal Condition Associated
- **/
-
-$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly'
-
-/** 
- * Example 4
- * And Logic Condition Associated
- **/
-
-$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty'
-
-/** 
- * Example 5
- * Grater Logic Condition Associated
- **/
-
-$deps.VariableName > 100 ? 'editable' : 'readOnly'
-
-/** 
- * Example 6
- * Not Logic Condition Associated
- **/
-
-!$deps.VariableName ? 'editable' : 'disabled'
-
-${GlobalHelper}
-`
-
-export const StringHelper = `
-/** 
- * Example 1
- * Static String
- **/
-
-'Normal String Text'
-
-/** 
- * Example 2
- * Associated String
- **/
-
-$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''
-
-${GlobalHelper}
-`
-
-export const AnyHelper = `
-/** 
- * Example 1
- * String Type
- **/
-
-'String'
-
-/** 
- * Example 2
- * String Array
- **/
-
-['StringArray']
-
-/** 
- * Example 3
- * Object Array
- **/
-
-[{ key: 'ObjectArray' }]
-
-/** 
- * Example 4
- * Boolean
- **/
-
-true
-
-/** 
- * Example 5
- * RegExp
- **/
-
-/\d+/
-
-/** 
- * Example 1
- * Associated String Value
- **/
-
-$deps.VariableName + 'Compose String'
-
-/** 
- * Example 2
- * Associated Array Value
- **/
-
-[ $deps.VariableName ]
-
-/** 
- * Example 3
- * Associated Object Value
- **/
-
-{
-  key : $deps.VariableName
-}
-
-/** 
- * Example 4
- * Associated Boolean Value
- **/
-
-!$deps.VariableName
-
-${GlobalHelper}
-`
-
-export const DataSourceHelper = `
-/** 
- * Example 1
- * Static DataSource
- **/
-
-[
-  { label : "item1", value: "1" },
-  { label : "item2", value: "2" }
-]
-
-/** 
- * Example 2
- * Associated DataSource
- **/
-
-[
-  { label : "item1", value: "1" },
-  { label : "item2", value: "2" },
-  ...$deps.VariableName
-]
-
-${GlobalHelper}
-`
-
-export const ComponentPropsHelper = `
-/** 
- * Example 1
- * Static Props
- **/
-
-{
-  placeholder: "This is placeholder"
-}
-
-/** 
- * Example 2
- * Associated Props
- **/
-
-{
-  placeholder: $deps.VariableName
-}
-
-${GlobalHelper}
-`
-
-export const DecoratorPropsHelper = `
-/** 
- * Example 1
- * Static Props
- **/
-
-{
-  labelCol:6
-}
-
-/** 
- * Example 2
- * Associated Props
- **/
-
-{
-  labelCol: $deps.VariableName
-}
-
-${GlobalHelper}
-`
-
-export const FulfillRunHelper = `
-/** 
- * Example 1
- * Async Select
- **/
-
-$effect(()=>{
-  $self.loading = true
-  fetch('//some.domain/getSomething')
-    .then(response=>response.json())
-    .then(({ data })=>{
-      $self.loading = false
-      $self.dataSource = data
-    },()=>{
-      $self.loading = false
-    })
-},[])
-  
-
-/** 
- * Example 2
- * Async Search Select
- **/
-
-const state = $observable({
-  keyword:''
-})
-
-$props({
-  onSearch(keyword){
-    state.keyword = keyword
-  }
-})
-
-$effect(()=>{
-  $self.loading = true
-  fetch(\`//some.domain/getSomething?q=\${state.keyword}\`)
-    .then(response=>response.json())
-    .then(({ data })=>{
-      $self.loading = false
-      $self.dataSource = data
-    },()=>{
-      $self.loading = false
-    })
-},[ state.keyword ])
-
-/** 
- * Example 3
- * Async Associated Select
- **/
-
-const state = $observable({
-  keyword:''
-})
-
-$props({
-  onSearch(keyword){
-    state.keyword = keyword
-  }
-})
-
-$effect(()=>{
-  $self.loading = true
-  fetch(\`//some.domain/getSomething?q=\${state.keyword}&other=\${$deps.VariableName}\`)
-    .then(response=>response.json())
-    .then(({ data })=>{
-      $self.loading = false
-      $self.dataSource = data
-    },()=>{
-      $self.loading = false
-    })
-},[ state.keyword, $deps.VariableName ])
-
-${GlobalHelper}
-`
diff --git a/designable/setters/src/components/ReactionsSetter/index.tsx b/designable/setters/src/components/ReactionsSetter/index.tsx
deleted file mode 100644
index 19707f88a42..00000000000
--- a/designable/setters/src/components/ReactionsSetter/index.tsx
+++ /dev/null
@@ -1,435 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { clone, uid } from '@formily/shared'
-import { createForm, isVoidField } from '@formily/core'
-import { createSchemaField } from '@formily/react'
-import { GlobalRegistry } from '@designable/core'
-import { requestIdle } from '@designable/shared'
-import { usePrefix, TextWidget } from '@designable/react'
-import { MonacoInput } from '@designable/react-settings-form'
-import {
-  Form,
-  ArrayTable,
-  Input,
-  Select,
-  FormItem,
-  FormCollapse,
-} from '@formily/antd'
-import { Modal, Card, Button, Tag, Tooltip } from 'antd'
-import { PathSelector } from './PathSelector'
-import { FieldPropertySetter } from './FieldPropertySetter'
-import { FulfillRunHelper } from './helpers'
-import { IReaction } from './types'
-import './declarations'
-import './styles.less'
-
-export interface IReactionsSetterProps {
-  value?: IReaction
-  onChange?: (value: IReaction) => void
-}
-
-const TypeView = ({ value }) => {
-  const text = String(value)
-  if (text.length <= 26) return <Tag>{text}</Tag>
-  return (
-    <Tag>
-      <Tooltip
-        title={
-          <div style={{ fontSize: 12 }}>
-            <code>
-              <pre style={{ whiteSpace: 'pre-wrap', padding: 0, margin: 0 }}>
-                {text}
-              </pre>
-            </code>
-          </div>
-        }
-      >
-        {text.substring(0, 24)}...
-      </Tooltip>
-    </Tag>
-  )
-}
-
-const SchemaField = createSchemaField({
-  components: {
-    Card,
-    FormCollapse,
-    Input,
-    TypeView,
-    Select,
-    FormItem,
-    PathSelector,
-    FieldPropertySetter,
-    ArrayTable,
-    MonacoInput,
-  },
-})
-
-const FieldStateProperties = [
-  'value',
-  'initialValue',
-  'inputValue',
-  'inputValues',
-  'modified',
-  'initialized',
-  'title',
-  'description',
-  'mounted',
-  'unmounted',
-  'active',
-  'visited',
-  'loading',
-  'errors',
-  'warnings',
-  'successes',
-  'feedbacks',
-  'valid',
-  'invalid',
-  'pattern',
-  'display',
-  'disabled',
-  'readOnly',
-  'readPretty',
-  'visible',
-  'hidden',
-  'editable',
-  'validateStatus',
-  'validating',
-]
-
-const FieldStateValueTypes = {
-  modified: 'boolean',
-  initialized: 'boolean',
-  title: 'string',
-  description: 'string',
-  mounted: 'boolean',
-  unmounted: 'boolean',
-  active: 'boolean',
-  visited: 'boolean',
-  loading: 'boolean',
-  errors: 'string[]',
-  warnings: 'string[]',
-  successes: 'string[]',
-  feedbacks: `Array<
-  triggerType?: 'onInput' | 'onFocus' | 'onBlur'
-  type?: 'error' | 'success' | 'warning'
-  code?:
-    | 'ValidateError'
-    | 'ValidateSuccess'
-    | 'ValidateWarning'
-    | 'EffectError'
-    | 'EffectSuccess'
-    | 'EffectWarning'
-  messages?: string[]
->
-`,
-  valid: 'boolean',
-  invalid: 'boolean',
-  pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'",
-  display: "'visible' | 'hidden' | 'none'",
-  disabled: 'boolean',
-  readOnly: 'boolean',
-  readPretty: 'boolean',
-  visible: 'boolean',
-  hidden: 'boolean',
-  editable: 'boolean',
-  validateStatus: "'error' | 'warning' | 'success' | 'validating'",
-  validating: 'boolean',
-}
-
-export const ReactionsSetter: React.FC<IReactionsSetterProps> = (props) => {
-  const [modalVisible, setModalVisible] = useState(false)
-  const [innerVisible, setInnerVisible] = useState(false)
-  const prefix = usePrefix('reactions-setter')
-  const form = useMemo(() => {
-    return createForm({
-      values: clone(props.value),
-    })
-  }, [modalVisible, props.value])
-  const formCollapse = useMemo(
-    () => FormCollapse.createFormCollapse(['deps', 'state']),
-    [modalVisible]
-  )
-  const openModal = () => setModalVisible(true)
-  const closeModal = () => setModalVisible(false)
-  useEffect(() => {
-    if (modalVisible) {
-      requestIdle(
-        () => {
-          setInnerVisible(true)
-        },
-        {
-          timeout: 400,
-        }
-      )
-    } else {
-      setInnerVisible(false)
-    }
-  }, [modalVisible])
-  return (
-    <>
-      <Button block onClick={openModal}>
-        <TextWidget token="SettingComponents.ReactionsSetter.configureReactions" />
-      </Button>
-      <Modal
-        title={GlobalRegistry.getDesignerMessage(
-          'SettingComponents.ReactionsSetter.configureReactions'
-        )}
-        width="70%"
-        centered
-        bodyStyle={{ padding: 10 }}
-        transitionName=""
-        maskTransitionName=""
-        visible={modalVisible}
-        onCancel={closeModal}
-        destroyOnClose
-        onOk={() => {
-          form.submit((values) => {
-            props.onChange?.(values)
-          })
-          closeModal()
-        }}
-      >
-        <div className={prefix}>
-          {innerVisible && (
-            <Form form={form}>
-              <SchemaField>
-                <SchemaField.Void
-                  x-component="FormCollapse"
-                  x-component-props={{
-                    formCollapse,
-                    defaultActiveKey: ['deps', 'state'],
-                    style: { marginBottom: 10 },
-                  }}
-                >
-                  <SchemaField.Void
-                    x-component="FormCollapse.CollapsePanel"
-                    x-component-props={{
-                      key: 'deps',
-                      header: GlobalRegistry.getDesignerMessage(
-                        'SettingComponents.ReactionsSetter.relationsFields'
-                      ),
-                    }}
-                  >
-                    <SchemaField.Array
-                      name="dependencies"
-                      default={[{}]}
-                      x-component="ArrayTable"
-                    >
-                      <SchemaField.Object>
-                        <SchemaField.Void
-                          x-component="ArrayTable.Column"
-                          x-component-props={{
-                            title: GlobalRegistry.getDesignerMessage(
-                              'SettingComponents.ReactionsSetter.sourceField'
-                            ),
-                            width: 240,
-                          }}
-                        >
-                          <SchemaField.String
-                            name="source"
-                            x-decorator="FormItem"
-                            x-component="PathSelector"
-                            x-component-props={{
-                              placeholder: GlobalRegistry.getDesignerMessage(
-                                'SettingComponents.ReactionsSetter.pleaseSelect'
-                              ),
-                            }}
-                          />
-                        </SchemaField.Void>
-                        <SchemaField.Void
-                          x-component="ArrayTable.Column"
-                          x-component-props={{
-                            title: GlobalRegistry.getDesignerMessage(
-                              'SettingComponents.ReactionsSetter.sourceProperty'
-                            ),
-                            width: 200,
-                          }}
-                        >
-                          <SchemaField.String
-                            name="property"
-                            default="value"
-                            x-decorator="FormItem"
-                            x-component="Select"
-                            x-component-props={{ showSearch: true }}
-                            enum={FieldStateProperties}
-                          />
-                        </SchemaField.Void>
-                        <SchemaField.Void
-                          x-component="ArrayTable.Column"
-                          x-component-props={{
-                            title: GlobalRegistry.getDesignerMessage(
-                              'SettingComponents.ReactionsSetter.variableName'
-                            ),
-                            width: 200,
-                          }}
-                        >
-                          <SchemaField.String
-                            name="name"
-                            x-decorator="FormItem"
-                            x-validator={{
-                              pattern: /^[$_a-zA-Z]+[$_a-zA-Z0-9]*$/,
-                              message: GlobalRegistry.getDesignerMessage(
-                                'SettingComponents.ReactionsSetter.variableNameValidateMessage'
-                              ),
-                            }}
-                            x-component="Input"
-                            x-component-props={{
-                              addonBefore: '$deps.',
-                              placeholder: GlobalRegistry.getDesignerMessage(
-                                'SettingComponents.ReactionsSetter.pleaseInput'
-                              ),
-                            }}
-                            x-reactions={(field) => {
-                              if (isVoidField(field)) return
-                              field.query('.source').take((source) => {
-                                if (isVoidField(source)) return
-                                if (
-                                  source.value &&
-                                  !field.value &&
-                                  !field.modified
-                                ) {
-                                  field.value =
-                                    source.inputValues[1]?.props?.name ||
-                                    `v_${uid()}`
-                                }
-                              })
-                            }}
-                          />
-                        </SchemaField.Void>
-
-                        <SchemaField.Void
-                          x-component="ArrayTable.Column"
-                          x-component-props={{
-                            title: GlobalRegistry.getDesignerMessage(
-                              'SettingComponents.ReactionsSetter.variableType'
-                            ),
-                            ellipsis: {
-                              showTitle: false,
-                            },
-                            width: 200,
-                            align: 'center',
-                          }}
-                        >
-                          <SchemaField.String
-                            name="type"
-                            default="any"
-                            x-decorator="FormItem"
-                            x-component="TypeView"
-                            x-reactions={(field) => {
-                              if (isVoidField(field)) return
-                              const property = field
-                                .query('.property')
-                                .get('inputValues')
-                              field.query('.source').take((source) => {
-                                if (isVoidField(source)) return
-                                if (source.value) {
-                                  if (
-                                    property[0] === 'value' ||
-                                    property[0] === 'initialValue' ||
-                                    property[0] === 'inputValue'
-                                  ) {
-                                    field.value =
-                                      source.inputValues[1]?.props?.type ||
-                                      'any'
-                                  } else if (property[0] === 'inputValues') {
-                                    field.value = `any[]`
-                                  } else if (property[0]) {
-                                    field.value =
-                                      FieldStateValueTypes[property[0]]
-                                  } else {
-                                    field.value = 'any'
-                                  }
-                                }
-                              })
-                            }}
-                          />
-                        </SchemaField.Void>
-                        <SchemaField.Void
-                          x-component="ArrayTable.Column"
-                          x-component-props={{
-                            title: GlobalRegistry.getDesignerMessage(
-                              'SettingComponents.ReactionsSetter.operations'
-                            ),
-                            align: 'center',
-                            width: 80,
-                          }}
-                        >
-                          <SchemaField.Markup
-                            type="void"
-                            x-component="ArrayTable.Remove"
-                          />
-                        </SchemaField.Void>
-                      </SchemaField.Object>
-                      <SchemaField.Void
-                        title={GlobalRegistry.getDesignerMessage(
-                          'SettingComponents.ReactionsSetter.addRelationField'
-                        )}
-                        x-component="ArrayTable.Addition"
-                        x-component-props={{ style: { marginTop: 8 } }}
-                      />
-                    </SchemaField.Array>
-                  </SchemaField.Void>
-
-                  <SchemaField.Void
-                    x-component="FormCollapse.CollapsePanel"
-                    x-component-props={{
-                      header: GlobalRegistry.getDesignerMessage(
-                        'SettingComponents.ReactionsSetter.propertyReactions'
-                      ),
-                      key: 'state',
-                      className: 'reaction-state',
-                    }}
-                  >
-                    <SchemaField.Markup
-                      name="fulfill.state"
-                      x-component="FieldPropertySetter"
-                    />
-                  </SchemaField.Void>
-                  <SchemaField.Void
-                    x-component="FormCollapse.CollapsePanel"
-                    x-component-props={{
-                      key: 'run',
-                      header: GlobalRegistry.getDesignerMessage(
-                        'SettingComponents.ReactionsSetter.actionReactions'
-                      ),
-                      className: 'reaction-runner',
-                    }}
-                  >
-                    <SchemaField.String
-                      name="fulfill.run"
-                      x-component="MonacoInput"
-                      x-component-props={{
-                        width: '100%',
-                        height: 400,
-                        language: 'typescript',
-                        helpCode: FulfillRunHelper,
-                        options: {
-                          minimap: {
-                            enabled: false,
-                          },
-                        },
-                      }}
-                      x-reactions={(field) => {
-                        const deps = field.query('dependencies').value()
-                        if (Array.isArray(deps)) {
-                          field.componentProps.extraLib = `
-                          declare var $deps : {
-                            ${deps.map(({ name, type }) => {
-                              if (!name) return ''
-                              return `${name}?:${type || 'any'},`
-                            })}
-                          }
-                          `
-                        }
-                      }}
-                    />
-                  </SchemaField.Void>
-                </SchemaField.Void>
-              </SchemaField>
-            </Form>
-          )}
-        </div>
-      </Modal>
-    </>
-  )
-}
diff --git a/designable/setters/src/components/ReactionsSetter/properties.ts b/designable/setters/src/components/ReactionsSetter/properties.ts
deleted file mode 100644
index 25c2dffce91..00000000000
--- a/designable/setters/src/components/ReactionsSetter/properties.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  BooleanHelper,
-  PatternHelper,
-  StringHelper,
-  AnyHelper,
-  DataSourceHelper,
-  DecoratorPropsHelper,
-  DisplayHelper,
-  ComponentPropsHelper,
-} from './helpers'
-
-export const FieldProperties = [
-  {
-    key: 'visible',
-    type: 'boolean',
-    helpCode: BooleanHelper,
-  },
-  { key: 'hidden', type: 'boolean', helpCode: BooleanHelper },
-  {
-    key: 'display',
-    type: '"visible" | "hidden" | "none"',
-    helpCode: DisplayHelper,
-  },
-  {
-    key: 'pattern',
-    type: '"editable" | "disabled" | "readOnly" | "readPretty"',
-    helpCode: PatternHelper,
-  },
-  { key: 'title', type: 'string', helpCode: StringHelper },
-  { key: 'description', type: 'string', helpCode: StringHelper },
-  { key: 'value', type: 'any', helpCode: AnyHelper },
-  { key: 'initialValue', type: 'any', helpCode: AnyHelper },
-  { key: 'required', type: 'boolean', helpCode: BooleanHelper },
-  {
-    key: 'dataSource',
-    type: 'Array<{label?:string,value?:any}>',
-    helpCode: DataSourceHelper,
-  },
-  {
-    key: 'component[1]',
-    token: 'componentProps',
-    type: 'object',
-    helpCode: ComponentPropsHelper,
-  },
-  {
-    key: 'decorator[1]',
-    token: 'decoratorProps',
-    type: 'object',
-    helpCode: DecoratorPropsHelper,
-  },
-]
diff --git a/designable/setters/src/components/ReactionsSetter/styles.less b/designable/setters/src/components/ReactionsSetter/styles.less
deleted file mode 100644
index 45a223967b7..00000000000
--- a/designable/setters/src/components/ReactionsSetter/styles.less
+++ /dev/null
@@ -1,105 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.dn-reactions-setter {
-  width: 100%;
-  min-height: 623px;
-  overflow: hidden;
-
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 0;
-    transition: all 0.25s ease-in-out;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  .@{ant-prefix}-collapse {
-    border: 1px solid @border-color-split;
-
-    &-header {
-      padding: 8px 10px !important;
-      background-color: @background-color-light !important;
-      border-bottom: 1px solid @border-color-split !important;
-      font-weight: 500 !important;
-
-      .@{ant-prefix}-collapse-arrow {
-        margin-right: 4px !important;
-      }
-    }
-
-    &-item {
-      border: none !important;
-    }
-
-    &-content {
-      border: none !important;
-      transition: none !important;
-    }
-
-    &-content-box {
-      padding: 12px !important;
-    }
-  }
-
-  .reaction-runner {
-    .@{ant-prefix}-collapse-content-box {
-      padding: 12px 0 !important;
-    }
-  }
-
-  .reaction-state {
-    .@{ant-prefix}-collapse-content-box {
-      padding: 12px 0 !important;
-    }
-  }
-
-  .dn-field-property-setter {
-    display: flex;
-    height: 300px;
-
-    &-coder-wrapper {
-      display: flex;
-      flex-grow: 2;
-      height: 100%;
-      padding-left: 10px;
-      position: relative;
-      flex-direction: column;
-    }
-
-    &-coder-start {
-      font-size: 18px;
-      line-height: 30px;
-      margin-bottom: 4px;
-      color: @text-color;
-      font-weight: 300;
-      flex-grow: 0;
-      opacity: 0.96;
-      height: 31px;
-    }
-
-    &-coder-end {
-      font-size: 18px;
-      height: 31px;
-      color: @text-color;
-      margin-top: 4px;
-      margin-bottom: 4px;
-      line-height: 30px;
-      font-weight: 300;
-      flex-grow: 0;
-      opacity: 0.96;
-    }
-
-    &-coder {
-      min-width: 0;
-      flex-grow: 2;
-      padding-left: 10px;
-    }
-  }
-}
diff --git a/designable/setters/src/components/ReactionsSetter/types.ts b/designable/setters/src/components/ReactionsSetter/types.ts
deleted file mode 100644
index ad84a650ed3..00000000000
--- a/designable/setters/src/components/ReactionsSetter/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface IReaction {
-  dependencies?: {
-    [key: string]: string
-  }
-  fulfill?: {
-    state?: {
-      [key: string]: string
-    }
-    schema?: {
-      [key: string]: string
-    }
-  }
-}
diff --git a/designable/setters/src/components/ValidatorSetter/index.tsx b/designable/setters/src/components/ValidatorSetter/index.tsx
deleted file mode 100644
index ff02955c452..00000000000
--- a/designable/setters/src/components/ValidatorSetter/index.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React from 'react'
-import { ArrayField } from '@formily/core'
-import {
-  observer,
-  useField,
-  SchemaContext,
-  Schema,
-  ISchema,
-} from '@formily/react'
-import { GlobalRegistry } from '@designable/core'
-import { ArrayItems } from '@formily/antd'
-import { FoldItem } from '@designable/react-settings-form'
-import { Select } from 'antd'
-
-export interface IValidatorSetterProps {
-  value?: any
-  onChange?: (value: any) => void
-}
-
-const ValidatorSchema: ISchema = {
-  type: 'array',
-  items: {
-    type: 'object',
-    'x-decorator': 'ArrayItems.Item',
-    'x-decorator-props': {
-      style: {
-        alignItems: 'center',
-        borderRadius: 3,
-        paddingTop: 6,
-        paddingBottom: 6,
-      },
-    },
-    properties: {
-      sortable: {
-        type: 'void',
-        'x-component': 'ArrayItems.SortHandle',
-        'x-component-props': { style: { marginRight: 10 } },
-      },
-      drawer: {
-        type: 'void',
-        'x-component': 'DrawerSetter',
-        properties: {
-          triggerType: {
-            type: 'string',
-            enum: ['onInput', 'onFocus', 'onBlur'],
-            'x-decorator': 'FormItem',
-            'x-component': 'Select',
-          },
-          validator: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'ValueInput',
-            'x-component-props': {
-              include: ['EXPRESSION'],
-            },
-          },
-          message: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input.TextArea',
-          },
-          format: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Select',
-            'x-component-props': {
-              allowClear: true,
-            },
-          },
-          pattern: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-component-props': {
-              prefix: '/',
-              suffix: '/',
-            },
-          },
-          len: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'NumberPicker',
-          },
-          max: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'NumberPicker',
-          },
-          min: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'NumberPicker',
-          },
-          exclusiveMaximum: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'NumberPicker',
-          },
-          exclusiveMinimum: {
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'NumberPicker',
-          },
-          whitespace: {
-            type: 'boolean',
-            'x-decorator': 'FormItem',
-            'x-component': 'Switch',
-          },
-          required: {
-            type: 'boolean',
-            'x-decorator': 'FormItem',
-            'x-component': 'Switch',
-          },
-        },
-      },
-      moveDown: {
-        type: 'void',
-        'x-component': 'ArrayItems.MoveDown',
-        'x-component-props': { style: { marginLeft: 10 } },
-      },
-      moveUp: {
-        type: 'void',
-        'x-component': 'ArrayItems.MoveUp',
-        'x-component-props': { style: { marginLeft: 5 } },
-      },
-      remove: {
-        type: 'void',
-        'x-component': 'ArrayItems.Remove',
-        'x-component-props': { style: { marginLeft: 5 } },
-      },
-    },
-  },
-  properties: {
-    addValidatorRules: {
-      type: 'void',
-      'x-component': 'ArrayItems.Addition',
-      'x-component-props': {
-        style: {
-          marginBottom: 10,
-        },
-      },
-    },
-  },
-}
-
-export const ValidatorSetter: React.FC<IValidatorSetterProps> = observer(
-  (props) => {
-    const field = useField<ArrayField>()
-    return (
-      <FoldItem label={field.title}>
-        <FoldItem.Base>
-          <Select
-            value={Array.isArray(props.value) ? undefined : props.value}
-            onChange={props.onChange}
-            allowClear
-            placeholder={GlobalRegistry.getDesignerMessage(
-              'SettingComponents.ValidatorSetter.pleaseSelect'
-            )}
-            options={GlobalRegistry.getDesignerMessage(
-              'SettingComponents.ValidatorSetter.formats'
-            )}
-          />
-        </FoldItem.Base>
-        <FoldItem.Extra>
-          <SchemaContext.Provider value={new Schema(ValidatorSchema)}>
-            <ArrayItems />
-          </SchemaContext.Provider>
-        </FoldItem.Extra>
-      </FoldItem>
-    )
-  }
-)
diff --git a/designable/setters/src/components/index.ts b/designable/setters/src/components/index.ts
deleted file mode 100644
index 7d58492e5b1..00000000000
--- a/designable/setters/src/components/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './DataSourceSetter'
-export * from './ReactionsSetter'
-export * from './ValidatorSetter'
diff --git a/designable/setters/src/index.ts b/designable/setters/src/index.ts
deleted file mode 100644
index f8bfcd92109..00000000000
--- a/designable/setters/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import './locales'
-export * from './components'
diff --git a/designable/setters/src/locales/en-US.ts b/designable/setters/src/locales/en-US.ts
deleted file mode 100644
index 7604c1273fb..00000000000
--- a/designable/setters/src/locales/en-US.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-const ValidatorFormats = [
-  { label: 'URL', value: 'url' },
-  { label: 'Email', value: 'email' },
-  { label: 'IPV6', value: 'ipv6' },
-  { label: 'IPV4', value: 'ipv4' },
-  { label: 'Number', value: 'number' },
-  { label: 'Integer', value: 'integer' },
-  { label: 'ID', value: 'idcard' },
-  { label: 'QQ', value: 'qq' },
-  { label: 'Phone Number', value: 'phone' },
-  { label: 'Currency', value: 'money' },
-  { label: 'Chinese', value: 'zh' },
-  { label: 'Date', value: 'date' },
-  { label: 'Zip', value: 'zip' },
-]
-
-export default {
-  'en-US': {
-    settings: {
-      'x-validator': {
-        title: 'Validator',
-        addValidatorRules: 'Add Validator Rules',
-        drawer: 'Edit Rules',
-        triggerType: {
-          title: 'Trigger Type',
-          placeholder: 'Please Select',
-          dataSource: ['onInput', 'onFocus', 'onBlur'],
-        },
-        format: {
-          title: 'Format',
-          placeholder: 'Please Select',
-          dataSource: ValidatorFormats,
-        },
-        validator: {
-          title: 'Custom Validator',
-          tooltip: 'Format: function (value){ return "Error Message"}',
-        },
-        pattern: 'RegExp',
-        len: 'Length Limit',
-        max: 'Length/Value Lt',
-        min: 'Length/Value Gt',
-        exclusiveMaximum: 'Length/Value Lte',
-        exclusiveMinimum: 'Length/Value Gte',
-        whitespace: 'No Whitespace',
-        required: 'Required',
-        message: {
-          title: 'Error Message',
-          tooltip:
-            'The error message is only effective for one built-in rule of the current rule set. If you need to customize the error message for different built-in rules, please split into multiple rules',
-        },
-      },
-    },
-    SettingComponents: {
-      DataSourceSetter: {
-        nodeProperty: 'Node Property',
-        pleaseSelectNode: 'please select node from the tree on the left',
-        addKeyValuePair: 'Add Key Value Pair',
-        configureDataSource: 'Configure',
-        dataSource: 'DataSource',
-        defaultTitle: 'Default Title',
-        dataSourceTree: 'DataSource Tree',
-        addNode: 'Add Node',
-        label: 'label',
-        value: 'value',
-        item: 'Item',
-      },
-      ReactionsSetter: {
-        configureReactions: 'Configure',
-        relationsFields: 'Associated Fields',
-        variableName: 'Variable Name',
-        variableNameValidateMessage: 'This is not a standard variable name',
-        pleaseInput: 'Please Input',
-        sourceField: 'Source Field',
-        sourceProperty: 'Field Property',
-        variableType: 'Variable Type',
-        operations: 'Operations',
-        addRelationField: 'Add Associated Field',
-        propertyReactions:
-          'Property Reactions(Only Support Javascript Expression)',
-        actionReactions:
-          'Action Reactions(Optional, Support Javascript Statement)',
-        visible: 'Show/None',
-        hidden: 'Show/UI Hidden',
-        display: 'Display',
-        pattern: 'Pattern',
-        title: 'Title',
-        description: 'Description',
-        value: 'Value',
-        initialValue: 'InitialValue',
-        dataSource: 'DataSource',
-        required: 'Required',
-        component: 'Component',
-        componentProps: 'Component Props',
-        decorator: 'Decorator',
-        decoratorProps: 'Decorator Props',
-        pleaseSelect: 'Please Select',
-        expressionValueTypeIs: 'Expression value type is',
-      },
-      ValidatorSetter: {
-        pleaseSelect: 'Please Select',
-        formats: ValidatorFormats,
-      },
-    },
-  },
-}
diff --git a/designable/setters/src/locales/index.ts b/designable/setters/src/locales/index.ts
deleted file mode 100644
index 67a3fad40af..00000000000
--- a/designable/setters/src/locales/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { GlobalRegistry } from '@designable/core'
-import zhCN from './zh-CN'
-import enUS from './en-US'
-
-GlobalRegistry.registerDesignerLocales(zhCN, enUS)
diff --git a/designable/setters/src/locales/zh-CN.ts b/designable/setters/src/locales/zh-CN.ts
deleted file mode 100644
index c36ddfe6521..00000000000
--- a/designable/setters/src/locales/zh-CN.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-const ValidatorFormats = [
-  { label: 'URL地址', value: 'url' },
-  { label: '邮箱格式', value: 'email' },
-  { label: 'IPV6格式', value: 'ipv6' },
-  { label: 'IPV4格式', value: 'ipv4' },
-  { label: '数字格式', value: 'number' },
-  { label: '整数格式', value: 'integer' },
-  { label: '身份证格式', value: 'idcard' },
-  { label: 'QQ号格式', value: 'qq' },
-  { label: '手机号格式', value: 'phone' },
-  { label: '货币格式', value: 'money' },
-  { label: '中文格式', value: 'zh' },
-  { label: '日期格式', value: 'date' },
-  { label: '邮编格式', value: 'zip' },
-]
-
-export default {
-  'zh-CN': {
-    settings: {
-      'x-validator': {
-        title: '校验规则',
-        addValidatorRules: '添加校验规则',
-        drawer: '配置规则',
-        triggerType: {
-          title: '触发类型',
-          placeholder: '请选择',
-          dataSource: ['输入时', '聚焦时', '失焦时'],
-        },
-        format: {
-          title: '格式校验',
-          placeholder: '请选择',
-          dataSource: ValidatorFormats,
-        },
-        validator: {
-          title: '自定义校验器',
-          tooltip: '格式: function (value){ return "Error Message"}',
-        },
-        pattern: '正则表达式',
-        len: '长度限制',
-        max: '长度/数值小于',
-        min: '长度/数值大于',
-        exclusiveMaximum: '长度/数值小于等于',
-        exclusiveMinimum: '长度/数值大于等于',
-        whitespace: '不允许空白符',
-        required: '是否必填',
-        message: {
-          title: '错误消息',
-          tooltip:
-            '错误消息只对当前规则集的一个内置规则生效，如果需要对不同内置规则定制错误消息，请拆分成多条规则',
-        },
-      },
-    },
-    SettingComponents: {
-      DataSourceSetter: {
-        nodeProperty: '节点属性',
-        pleaseSelectNode: '请先选择左侧树节点',
-        addKeyValuePair: '添加键值对',
-        configureDataSource: '配置数据源',
-        dataSource: '数据源',
-        defaultTitle: '默认标题',
-        dataSourceTree: '数据源节点树',
-        addNode: '新增节点',
-        label: '键名',
-        value: '键值',
-        item: '选项',
-      },
-      ReactionsSetter: {
-        configureReactions: '配置响应器',
-        relationsFields: '依赖字段',
-        variableName: '变量名',
-        variableNameValidateMessage: '不符合变量命名规则',
-        pleaseInput: '请输入',
-        sourceField: '来源字段',
-        sourceProperty: '字段属性',
-        variableType: '变量类型',
-        operations: '操作',
-        addRelationField: '添加依赖字段',
-        propertyReactions: '属性响应(仅支持JS表达式)',
-        actionReactions: '动作响应(高级，可选，支持JS语句)',
-        visible: '显示/隐藏',
-        hidden: 'UI隐藏',
-        display: '展示状态',
-        pattern: 'UI形态',
-        title: '标题',
-        description: '描述',
-        value: '字段值',
-        initialValue: '默认值',
-        dataSource: '数据源',
-        required: '是否必填',
-        component: '组件',
-        componentProps: '组件属性',
-        decorator: '容器',
-        decoratorProps: '容器属性',
-        pleaseSelect: '请选择',
-        expressionValueTypeIs: '表达式值类型为',
-      },
-      ValidatorSetter: {
-        pleaseSelect: '请选择',
-        formats: ValidatorFormats,
-      },
-    },
-  },
-}
diff --git a/designable/setters/tsconfig.build.json b/designable/setters/tsconfig.build.json
deleted file mode 100644
index dbf069a065d..00000000000
--- a/designable/setters/tsconfig.build.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./lib",
-    "paths": {
-      "@formily/*": [
-        "../../packages/*",
-        "../../designable/*",
-        "../../devtools/*"
-      ]
-    },
-    "declaration": true
-  }
-}
diff --git a/designable/setters/tsconfig.json b/designable/setters/tsconfig.json
deleted file mode 100644
index c6865c25a75..00000000000
--- a/designable/setters/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
-  "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
-}
diff --git a/devtools/chrome-extension/package.json b/devtools/chrome-extension/package.json
index d542011f7b0..60de910b14e 100644
--- a/devtools/chrome-extension/package.json
+++ b/devtools/chrome-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/chrome-extension",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "private": true,
   "license": "MIT",
   "repository": {
@@ -21,8 +21,8 @@
     "start": "webpack-dev-server --config config/webpack.dev.ts"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-json-view": "^1.19.1",
diff --git a/docs/guide/advanced/validate.md b/docs/guide/advanced/validate.md
index 7824c5df46f..12dfde2f9a4 100644
--- a/docs/guide/advanced/validate.md
+++ b/docs/guide/advanced/validate.md
@@ -1955,7 +1955,7 @@ export default () => (
         title="AA"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value
               ? 'AA must be greater than BB'
               : ''
@@ -1968,7 +1968,7 @@ export default () => (
         title="BB"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('aa').value() <= field.value
               ? 'AA must be greater than BB'
               : ''
@@ -2005,7 +2005,7 @@ const schema = {
       title: 'AA',
       required: true,
       'x-reactions': `{{(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA must be greater than BB' : ''
       }}}`,
       'x-component': 'NumberPicker',
@@ -2018,7 +2018,7 @@ const schema = {
         dependencies: ['aa'],
         fulfill: {
           state: {
-            errors:
+            selfErrors:
               "{{$deps[0] <= $self.value ? 'AA must be greater than BB' : ''}}",
           },
         },
@@ -2053,7 +2053,7 @@ export default () => (
       title="AA"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('bb').value() >= field.value
             ? 'AA must be greater than BB'
             : ''
@@ -2066,7 +2066,7 @@ export default () => (
       title="BB"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('aa').value() <= field.value
             ? 'AA must be greater than BB'
             : ''
diff --git a/docs/guide/advanced/validate.zh-CN.md b/docs/guide/advanced/validate.zh-CN.md
index 3bc101e5004..7b9932871f4 100644
--- a/docs/guide/advanced/validate.zh-CN.md
+++ b/docs/guide/advanced/validate.zh-CN.md
@@ -1955,7 +1955,7 @@ export default () => (
         title="AA"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
         }}
         x-component="NumberPicker"
@@ -1966,7 +1966,7 @@ export default () => (
         title="BB"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('aa').value() <= field.value ? 'AA必须大于BB' : ''
         }}
         x-component="NumberPicker"
@@ -2001,7 +2001,7 @@ const schema = {
       title: 'AA',
       required: true,
       'x-reactions': `{{(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
       }}}`,
       'x-component': 'NumberPicker',
@@ -2014,7 +2014,7 @@ const schema = {
         dependencies: ['aa'],
         fulfill: {
           state: {
-            errors: "{{$deps[0] <= $self.value ? 'AA必须大于BB' : ''}}",
+            selfErrors: "{{$deps[0] <= $self.value ? 'AA必须大于BB' : ''}}",
           },
         },
       },
@@ -2048,7 +2048,7 @@ export default () => (
       title="AA"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
       }}
       component={[NumberPicker]}
@@ -2059,7 +2059,7 @@ export default () => (
       title="BB"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('aa').value() <= field.value ? 'AA必须大于BB' : ''
       }}
       component={[NumberPicker]}
diff --git a/docs/guide/form-builder.md b/docs/guide/form-builder.md
index c2dd86d1733..4e34f0bec6a 100644
--- a/docs/guide/form-builder.md
+++ b/docs/guide/form-builder.md
@@ -8,40 +8,39 @@ Formily Form Designer is an extension package based on [designable](https://gith
 
 ## Core Concept
 
-The core concept of Designable is to turn the designer into a modular combination, everything can be replaced. Designable itself provides a series of out-of-the-box components for users to use, but if users are not satisfied with the components, they can directly replace the components. To achieve maximum flexible customization, that is, Designable itself does not provide any plug-in related APIs
+The core concept of Designable is to turn the designer into a modular combination, everything can be replaced, Designable itself provides a series of out-of-the-box components for users to use, but if users are not satisfied with the components, they can directly replace the components. To achieve maximum flexible customization, that is, Designable itself does not provide any plug-in related APIs
 
 ## Install
 
 Ant Design users
 
 ```bash
-npm install --save @formily/designable-antd
+npm install --save @designable/formily-antd
 ```
 
 Alibaba Fusion users
 
 ```bash
-npm install --save @formily/designable-next
+npm install --save @designable/formily-next
 ```
 
 ## Get started quickly
 
-[Source Code](https://github.com/alibaba/formily/tree/formily_next/designable/antd/playground/widgets)
-
-In the following example, we will help you understand the usage of each component line by line through code comments.
+[Example Source Code](https://github.com/alibaba/designable/tree/main/formily/antd/playground)
 
 ```tsx pure
+import 'antd/dist/antd.less'
 import React, { useMemo } from 'react'
 import ReactDOM from 'react-dom'
 import {
-  Designer, //Designer root component, used to deliver context
-  IconWidget, //Icon widget, used to obtain various system built-in icons
+  Designer, //Designer root component, mainly used to deliver context
   DesignerToolsWidget, //Drawing board tool pendant
   ViewToolsWidget, //View switching tool pendant
   Workspace, //Workspace components, core components, used to manage drag and drop behavior in the workspace, tree node data, etc...
   OutlineTreeWidget, //Outline tree component, it will automatically identify the current workspace and display the tree nodes in the workspace
-  DragSourceWidget, //Drag and drop the source component
-  MainPanel, //Main layout panel
+  ResourceWidget, //Drag and drop the source widget
+  HistoryWidget, //History widget
+  StudioPanel, //Main layout panel
   CompositePanel, //Left combined layout panel
   WorkspacePanel, //Workspace layout panel
   ToolbarPanel, //Toolbar layout panel
@@ -51,23 +50,49 @@ import {
   ComponentTreeWidget, //Component tree renderer
 } from '@designable/react'
 import { SettingsForm } from '@designable/react-settings-form'
-import { createDesigner, GlobalRegistry } from '@designable/core'
-import {
-  createDesignableField,
-  createDesignableForm,
-} from '@formily/designable-antd'
 import {
-  transformToSchema, //Convert the component tree structure into Formily JSON Schema
-  transformToTreeNode, //Convert Formily JSON Schema into a component tree
-} from '@designable/formily'
+  createDesigner,
+  GlobalRegistry,
+  Shortcut,
+  KeyCode,
+} from '@designable/core'
 import {
-  LogoWidget, //Business custom Logo rendering component
-  PreviewWidget, //Business custom preview component
-  SchemaEditorWidget, //Business custom Schema editor
-  MarkupSchemaWidget, //Business custom source code previewer
+  LogoWidget,
+  ActionsWidget,
+  PreviewWidget,
+  SchemaEditorWidget,
+  MarkupSchemaWidget,
 } from './widgets'
-import { Button } from 'antd'
-import 'antd/dist/antd.less'
+import { saveSchema } from './service'
+import {
+  Form,
+  Field,
+  Input,
+  Select,
+  TreeSelect,
+  Cascader,
+  Radio,
+  Checkbox,
+  Slider,
+  Rate,
+  NumberPicker,
+  Transfer,
+  Password,
+  DatePicker,
+  TimePicker,
+  Upload,
+  Switch,
+  Text,
+  Card,
+  ArrayCards,
+  ObjectContainer,
+  ArrayTable,
+  Space,
+  FormTab,
+  FormCollapse,
+  FormLayout,
+  FormGrid,
+} from '../src'
 
 GlobalRegistry.registerDesignerLocales({
   'zh-CN': {
@@ -75,6 +100,7 @@ GlobalRegistry.registerDesignerLocales({
       Inputs: 'Input controls',
       Layouts: 'Layout components',
       Arrays: 'Self-incrementing components',
+      Displays: 'Display components',
     },
   },
   'en-US': {
@@ -82,67 +108,79 @@ GlobalRegistry.registerDesignerLocales({
       Inputs: 'Inputs',
       Layouts: 'Layouts',
       Arrays: 'Arrays',
+      Displays: 'Displays',
     },
   },
 })
 
-const Root = createDesignableForm({
-  registryName: 'Root',
-})
-
-const DesignableField = createDesignableField({
-  registryName: 'DesignableField',
-})
-
 const App = () => {
-  const engine = useMemo(() => createDesigner(), [])
-
-  useEffect(() => {
-    //The business layer gets the schema to echo the data
-    fetchSchema().then((schema) => {
-      engine.setCurrentTree(
-        transformToTreeNode(schema, {
-          designableFieldName: 'DesignableField',
-          designableFormName: 'Root',
-        })
-      )
-    })
-  }, [])
-
+  const engine = useMemo(
+    () =>
+      createDesigner({
+        shortcuts: [
+          new Shortcut({
+            codes: [
+              [KeyCode.Meta, KeyCode.S],
+              [KeyCode.Control, KeyCode.S],
+            ],
+            handler(ctx) {
+              saveSchema(ctx.engine)
+            },
+          }),
+        ],
+        rootComponentName: 'Form',
+      }),
+    []
+  )
   return (
-    <Designer engine={engine} theme="dark">
-      <MainPanel
-        logo={<LogoWidget />}
-        actions={
-          <Button
-            onClick={() => {
-              submitSchema({
-                schema: transformToSchema(engine.getCurrentTree(), {
-                  designableFieldName: 'DesignableField',
-                  designableFormName: 'Root',
-                }),
-              })
-            }}
-          >
-            Save
-          </Button>
-        }
-      >
+    <Designer engine={engine}>
+      <StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
         <CompositePanel>
-          <CompositePanel.Item
-            title="panels.Component"
-            icon={<IconWidget infer="Component" />}
-          >
-            <DragSourceWidget title="sources.Inputs" name="inputs" />
-            <DragSourceWidget title="sources.Layouts" name="layouts" />
-            <DragSourceWidget title="sources.Arrays" name="arrays" />
+          <CompositePanel.Item title="panels.Component" icon="Component">
+            <ResourceWidget
+              title="sources.Inputs"
+              sources={[
+                Input,
+                Password,
+                NumberPicker,
+                Rate,
+                Slider,
+                Select,
+                TreeSelect,
+                Cascader,
+                Transfer,
+                Checkbox,
+                Radio,
+                DatePicker,
+                TimePicker,
+                Upload,
+                Switch,
+                ObjectContainer,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Layouts"
+              sources={[
+                Card,
+                FormGrid,
+                FormTab,
+                FormLayout,
+                FormCollapse,
+                Space,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Arrays"
+              sources={[ArrayCards, ArrayTable]}
+            />
+            <ResourceWidget title="sources.Displays" sources={[Text]} />
           </CompositePanel.Item>
-          <CompositePanel.Item
-            title="panels.OutlinedTree"
-            icon={<IconWidget infer="Outline" />}
-          >
+          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
             <OutlineTreeWidget />
           </CompositePanel.Item>
+          <CompositePanel.Item title="panels.History" icon="History">
+            <HistoryWidget />
+          </CompositePanel.Item>
         </CompositePanel>
         <Workspace id="form">
           <WorkspacePanel>
@@ -157,8 +195,33 @@ const App = () => {
                 {() => (
                   <ComponentTreeWidget
                     components={{
-                      Root,
-                      DesignableField,
+                      Form,
+                      Field,
+                      Input,
+                      Select,
+                      TreeSelect,
+                      Cascader,
+                      Radio,
+                      Checkbox,
+                      Slider,
+                      Rate,
+                      NumberPicker,
+                      Transfer,
+                      Password,
+                      DatePicker,
+                      TimePicker,
+                      Upload,
+                      Switch,
+                      Text,
+                      Card,
+                      ArrayCards,
+                      ArrayTable,
+                      Space,
+                      FormTab,
+                      FormCollapse,
+                      FormGrid,
+                      FormLayout,
+                      ObjectContainer,
                     }}
                   />
                 )}
@@ -180,66 +243,10 @@ const App = () => {
         <SettingsPanel title="panels.PropertySettings">
           <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
         </SettingsPanel>
-      </MainPanel>
+      </StudioPanel>
     </Designer>
   )
 }
 
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
-
-## API
-
-> The Designable API document is currently unavailable, Yes, stay tuned~
-
-### createDesignableField
-
-#### Description
-
-Create DesignableField and consume it for ComponentTreeWidget to build
-
-#### Signature
-
-```ts
-interface IDesignableFieldFactoryProps {
-  registryName: string //Required, registered name, componentName that identifies DesignableField in the component tree
-  components?: Record<string, React.JSXElementConstructor<unknown>> //Custom canvas components, used to pass in x-component/x-decorator
-  componentsPropsSchema?: Record<string, ISchema> //Custom canvas component property schema configuration
-  componentsIcon?: Record<string, React.ReactNode> //Custom canvas component's icon
-  componentsSourceIcon?: Record<string, React.ReactNode> //Custom canvas component's drag source icon
-  dropFormItemComponents?: ComponentNameMatcher[] //Identify which components do not need to support FormItem
-  dropReactionComponents?: ComponentNameMatcher[] //Identify which components do not need to support responder configuration
-  selfRenderChildrenComponents?: ComponentNameMatcher[] //Identify which canvas components are rendered by the component itself, and currently internal components such as ArrayTable/FormTab are identified by default
-  inlineChildrenLayoutComponents?: ComponentNameMatcher[] //Identify which canvas component's child component layout mode is inline mode
-  inlineLayoutComponents?: ComponentNameMatcher[] //Identify which canvas components are in inline mode
-  restrictChildrenComponents?: Record<string, ComponentNameMatcher[]> //Node constraints, identify the upper and lower constraints between canvas components, for example, the child nodes of A component can only be B/C components
-  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]> //Node constraint, identifies the adjacent constraint relationship of canvas components, for example, adjacent nodes of component A can only be B/C components
-}
-
-interface createDesignableField {
-  (props: IDesignableFieldFactoryProps): React.FC
-}
-```
-
-### createDesignableForm
-
-#### Description
-
-Create DesignableForm and consume it for ComponentTreeWidget
-
-It should be noted here that if it is a pure form designer, we need to specify the registryName as Root, so that the Form component cannot be dragged. If it is specified as DesignableForm or other names, it can be dragged. This scenario is suitable for Page-level construction, you can embed the entire form into other modules
-
-#### Signature
-
-```ts
-import { IDesignerProps } from '@designable/core'
-
-interface IDesignableFormFactoryProps extends IDesignerProps {
-  registryName: string //Required, registered name, componentName that identifies DesignableForm in the component tree
-  component?: React.JSXElementConstructor<unknown> //The canvas component of the Form, no need to specify by default
-}
-
-interface createDesignableForm {
-  (props: IDesignableFormFactoryProps): React.FC
-}
-```
diff --git a/docs/guide/form-builder.zh-CN.md b/docs/guide/form-builder.zh-CN.md
index 2375e79986e..1c76cec945f 100644
--- a/docs/guide/form-builder.zh-CN.md
+++ b/docs/guide/form-builder.zh-CN.md
@@ -15,33 +15,32 @@ Designable 的核心理念是将设计器搭建变成模块化组合，一切可
 Ant Design 用户
 
 ```bash
-npm install --save @formily/designable-antd
+npm install --save @designable/formily-antd
 ```
 
 Alibaba Fusion 用户
 
 ```bash
-npm install --save @formily/designable-next
+npm install --save @designable/formily-next
 ```
 
 ## 快速上手
 
-[源代码](https://github.com/alibaba/formily/tree/formily_next/designable/antd/playground/widgets)
-
-以下示例，我们将通过代码注释的方式帮助大家一行一行理解每个组件的使用方式
+[示例源代码](https://github.com/alibaba/designable/tree/main/formily/antd/playground)
 
 ```tsx pure
+import 'antd/dist/antd.less'
 import React, { useMemo } from 'react'
 import ReactDOM from 'react-dom'
 import {
-  Designer, //设计器根组件，用于下发上下文
-  IconWidget, //图标挂件，用于获取各种系统内置图标
+  Designer, //设计器根组件，主要用于下发上下文
   DesignerToolsWidget, //画板工具挂件
   ViewToolsWidget, //视图切换工具挂件
   Workspace, //工作区组件，核心组件，用于管理工作区内的拖拽行为，树节点数据等等...
   OutlineTreeWidget, //大纲树组件，它会自动识别当前工作区，展示出工作区内树节点
-  DragSourceWidget, //拖拽源组件
-  MainPanel, //主布局面板
+  ResourceWidget, //拖拽源挂件
+  HistoryWidget, //历史记录挂件
+  StudioPanel, //主布局面板
   CompositePanel, //左侧组合布局面板
   WorkspacePanel, //工作区布局面板
   ToolbarPanel, //工具栏布局面板
@@ -51,23 +50,49 @@ import {
   ComponentTreeWidget, //组件树渲染器
 } from '@designable/react'
 import { SettingsForm } from '@designable/react-settings-form'
-import { createDesigner, GlobalRegistry } from '@designable/core'
-import {
-  createDesignableField,
-  createDesignableForm,
-} from '@formily/designable-antd'
 import {
-  transformToSchema, //将组件树结构转换成Formily JSON Schema
-  transformToTreeNode, //将Formily JSON Schema转换成组件树
-} from '@designable/formily'
+  createDesigner,
+  GlobalRegistry,
+  Shortcut,
+  KeyCode,
+} from '@designable/core'
 import {
-  LogoWidget, //业务自定义Logo渲染组件
-  PreviewWidget, //业务自定义预览组件
-  SchemaEditorWidget, //业务自定义Schema编辑器
-  MarkupSchemaWidget, //业务自定义源码预览器器
+  LogoWidget,
+  ActionsWidget,
+  PreviewWidget,
+  SchemaEditorWidget,
+  MarkupSchemaWidget,
 } from './widgets'
-import { Button } from 'antd'
-import 'antd/dist/antd.less'
+import { saveSchema } from './service'
+import {
+  Form,
+  Field,
+  Input,
+  Select,
+  TreeSelect,
+  Cascader,
+  Radio,
+  Checkbox,
+  Slider,
+  Rate,
+  NumberPicker,
+  Transfer,
+  Password,
+  DatePicker,
+  TimePicker,
+  Upload,
+  Switch,
+  Text,
+  Card,
+  ArrayCards,
+  ObjectContainer,
+  ArrayTable,
+  Space,
+  FormTab,
+  FormCollapse,
+  FormLayout,
+  FormGrid,
+} from '../src'
 
 GlobalRegistry.registerDesignerLocales({
   'zh-CN': {
@@ -75,6 +100,7 @@ GlobalRegistry.registerDesignerLocales({
       Inputs: '输入控件',
       Layouts: '布局组件',
       Arrays: '自增组件',
+      Displays: '展示组件',
     },
   },
   'en-US': {
@@ -82,67 +108,79 @@ GlobalRegistry.registerDesignerLocales({
       Inputs: 'Inputs',
       Layouts: 'Layouts',
       Arrays: 'Arrays',
+      Displays: 'Displays',
     },
   },
 })
 
-const Root = createDesignableForm({
-  registryName: 'Root',
-})
-
-const DesignableField = createDesignableField({
-  registryName: 'DesignableField',
-})
-
 const App = () => {
-  const engine = useMemo(() => createDesigner(), [])
-
-  useEffect(() => {
-    //业务层拿到schema用于回显数据
-    fetchSchema().then((schema) => {
-      engine.setCurrentTree(
-        transformToTreeNode(schema, {
-          designableFieldName: 'DesignableField',
-          designableFormName: 'Root',
-        })
-      )
-    })
-  }, [])
-
+  const engine = useMemo(
+    () =>
+      createDesigner({
+        shortcuts: [
+          new Shortcut({
+            codes: [
+              [KeyCode.Meta, KeyCode.S],
+              [KeyCode.Control, KeyCode.S],
+            ],
+            handler(ctx) {
+              saveSchema(ctx.engine)
+            },
+          }),
+        ],
+        rootComponentName: 'Form',
+      }),
+    []
+  )
   return (
-    <Designer engine={engine} theme="dark">
-      <MainPanel
-        logo={<LogoWidget />}
-        actions={
-          <Button
-            onClick={() => {
-              submitSchema({
-                schema: transformToSchema(engine.getCurrentTree(), {
-                  designableFieldName: 'DesignableField',
-                  designableFormName: 'Root',
-                }),
-              })
-            }}
-          >
-            Save
-          </Button>
-        }
-      >
+    <Designer engine={engine}>
+      <StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
         <CompositePanel>
-          <CompositePanel.Item
-            title="panels.Component"
-            icon={<IconWidget infer="Component" />}
-          >
-            <DragSourceWidget title="sources.Inputs" name="inputs" />
-            <DragSourceWidget title="sources.Layouts" name="layouts" />
-            <DragSourceWidget title="sources.Arrays" name="arrays" />
+          <CompositePanel.Item title="panels.Component" icon="Component">
+            <ResourceWidget
+              title="sources.Inputs"
+              sources={[
+                Input,
+                Password,
+                NumberPicker,
+                Rate,
+                Slider,
+                Select,
+                TreeSelect,
+                Cascader,
+                Transfer,
+                Checkbox,
+                Radio,
+                DatePicker,
+                TimePicker,
+                Upload,
+                Switch,
+                ObjectContainer,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Layouts"
+              sources={[
+                Card,
+                FormGrid,
+                FormTab,
+                FormLayout,
+                FormCollapse,
+                Space,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Arrays"
+              sources={[ArrayCards, ArrayTable]}
+            />
+            <ResourceWidget title="sources.Displays" sources={[Text]} />
           </CompositePanel.Item>
-          <CompositePanel.Item
-            title="panels.OutlinedTree"
-            icon={<IconWidget infer="Outline" />}
-          >
+          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
             <OutlineTreeWidget />
           </CompositePanel.Item>
+          <CompositePanel.Item title="panels.History" icon="History">
+            <HistoryWidget />
+          </CompositePanel.Item>
         </CompositePanel>
         <Workspace id="form">
           <WorkspacePanel>
@@ -157,8 +195,33 @@ const App = () => {
                 {() => (
                   <ComponentTreeWidget
                     components={{
-                      Root,
-                      DesignableField,
+                      Form,
+                      Field,
+                      Input,
+                      Select,
+                      TreeSelect,
+                      Cascader,
+                      Radio,
+                      Checkbox,
+                      Slider,
+                      Rate,
+                      NumberPicker,
+                      Transfer,
+                      Password,
+                      DatePicker,
+                      TimePicker,
+                      Upload,
+                      Switch,
+                      Text,
+                      Card,
+                      ArrayCards,
+                      ArrayTable,
+                      Space,
+                      FormTab,
+                      FormCollapse,
+                      FormGrid,
+                      FormLayout,
+                      ObjectContainer,
                     }}
                   />
                 )}
@@ -180,66 +243,10 @@ const App = () => {
         <SettingsPanel title="panels.PropertySettings">
           <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
         </SettingsPanel>
-      </MainPanel>
+      </StudioPanel>
     </Designer>
   )
 }
 
 ReactDOM.render(<App />, document.getElementById('root'))
 ```
-
-## API
-
-> Designable API 文档目前暂时没有，敬请期待~
-
-### createDesignableField
-
-#### 描述
-
-创建 DesignableField，给 ComponentTreeWidget 消费，用于搭建
-
-#### 签名
-
-```ts
-interface IDesignableFieldFactoryProps {
-  registryName: string //必填项，注册名称，标识DesignableField在组件树中的componentName
-  components?: Record<string, React.JSXElementConstructor<unknown>> //自定义画布组件，用于传入x-component/x-decorator
-  componentsPropsSchema?: Record<string, ISchema> //自定义画布组件属性schema配置
-  componentsIcon?: Record<string, React.ReactNode> //组件Icon
-  componentsSourceIcon?: Record<string, React.ReactNode> //组件拖拽源Icon
-  dropFormItemComponents?: ComponentNameMatcher[] //标识哪些组件不需要支持FormItem
-  dropReactionComponents?: ComponentNameMatcher[] //标识哪些组件不需要支持响应器配置
-  selfRenderChildrenComponents?: ComponentNameMatcher[] //标识哪些画布组件是由组件自身渲染子树，目前内部ArrayTable/FormTab这类组件是默认标识了
-  inlineChildrenLayoutComponents?: ComponentNameMatcher[] //标识哪些画布组件的子组件布局模式是内联模式
-  inlineLayoutComponents?: ComponentNameMatcher[] //标识哪些画布组件本身是内联模式
-  restrictChildrenComponents?: Record<string, ComponentNameMatcher[]> //节点约束，标识画布组件之间的上下级约束关系，比如A组件的子节点只能是B/C组件
-  restrictSiblingComponents?: Record<string, ComponentNameMatcher[]> //节点约束，标识画布组件相邻约束关系，比如A组件的相邻节点只能是B/C组件
-}
-
-interface createDesignableField {
-  (props: IDesignableFieldFactoryProps): React.FC
-}
-```
-
-### createDesignableForm
-
-#### 描述
-
-创建 DesignableForm，给 ComponentTreeWidget 消费
-
-这里需要注意的是，如果是作为纯表单设计器，我们需要指定 registryName 为 Root，这样 Form 组件是无法拖拽的，如果指定为 DesignableForm 或者其它名称，那就是可以拖拽的，这种场景适用于页面级搭建，可以将整个表单嵌入到其他模块中
-
-#### 签名
-
-```ts
-import { IDesignerProps } from '@designable/core'
-
-interface IDesignableFormFactoryProps extends IDesignerProps {
-  registryName: string //必填项，注册名称，标识DesignableForm在组件树中的componentName
-  component?: React.JSXElementConstructor<unknown> //Form的画布组件，默认不需要指定
-}
-
-interface createDesignableForm {
-  (props: IDesignableFormFactoryProps): React.FC
-}
-```
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
index 8f684139649..4b3dc330bfb 100644
--- a/docs/guide/quick-start.md
+++ b/docs/guide/quick-start.md
@@ -28,7 +28,7 @@ $ npm install --save @formily/vue
 
 ### Install component library
 
-To quickly implement beautiful forms, we usually need to use industry-leading component libraries, such as A[nt Design](https://ant.design) and [Alibaba Fusion](https://fusion.design). However, these excellent component libraries are not fully covered in some scenes of the form. For example, the detailed preview state is not supported by Ant Design, and some scene-based components are not supported, so Formily is in On top of this, @formily/antd and @formily/next are encapsulated to ensure that users can use it out of the box.
+To quickly implement beautiful forms, we usually need to use industry-leading component libraries, such as [Ant Design](https://ant.design) and [Alibaba Fusion](https://fusion.design). However, these excellent component libraries are not fully covered in some scenes of the form. For example, the detailed preview state is not supported by Ant Design, and some scene-based components are not supported, so Formily is in On top of this, @formily/antd and @formily/next are encapsulated to ensure that users can use it out of the box.
 
 **Ant Design users**
 
diff --git a/docs/guide/scenes/login-register.md b/docs/guide/scenes/login-register.md
index e9f33066f5d..84dc9afd72d 100644
--- a/docs/guide/scenes/login-register.md
+++ b/docs/guide/scenes/login-register.md
@@ -562,7 +562,7 @@ export default () => {
                   dependencies: ['.confirm_password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
                     },
                   },
@@ -583,7 +583,7 @@ export default () => {
                   dependencies: ['.password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
                     },
                   },
@@ -882,7 +882,7 @@ const schema = {
           dependencies: ['.confirm_password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认password不匹配" : ""}}',
             },
           },
@@ -903,7 +903,7 @@ const schema = {
           dependencies: ['.password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
             },
           },
@@ -1188,7 +1188,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.confirm_password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
@@ -1209,7 +1209,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const password = field.query('.password')
-              field.errors =
+              field.selfErrors =
                 password.get('value') &&
                 field.value &&
                 field.value !== password.get('value')
@@ -1431,7 +1431,7 @@ export default () => {
                   dependencies: ['.confirm_password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
                     },
                   },
@@ -1452,7 +1452,7 @@ export default () => {
                   dependencies: ['.password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
                     },
                   },
@@ -1539,7 +1539,7 @@ const schema = {
           dependencies: ['.confirm_password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
             },
           },
@@ -1560,7 +1560,7 @@ const schema = {
           dependencies: ['.password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "Confirm that the password does not match" : ""}}',
             },
           },
@@ -1672,7 +1672,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.confirm_password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
@@ -1693,7 +1693,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
diff --git a/docs/guide/scenes/login-register.zh-CN.md b/docs/guide/scenes/login-register.zh-CN.md
index 16e9dfb50cd..02fd0617aaf 100644
--- a/docs/guide/scenes/login-register.zh-CN.md
+++ b/docs/guide/scenes/login-register.zh-CN.md
@@ -562,7 +562,7 @@ export default () => {
                   dependencies: ['.confirm_password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
                     },
                   },
@@ -583,7 +583,7 @@ export default () => {
                   dependencies: ['.password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
                     },
                   },
@@ -882,7 +882,7 @@ const schema = {
           dependencies: ['.confirm_password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
             },
           },
@@ -903,7 +903,7 @@ const schema = {
           dependencies: ['.password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
             },
           },
@@ -1188,7 +1188,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.confirm_password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
@@ -1209,7 +1209,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const password = field.query('.password')
-              field.errors =
+              field.selfErrors =
                 password.get('value') &&
                 field.value &&
                 field.value !== password.get('value')
@@ -1431,7 +1431,7 @@ export default () => {
                   dependencies: ['.confirm_password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
                     },
                   },
@@ -1452,7 +1452,7 @@ export default () => {
                   dependencies: ['.password'],
                   fulfill: {
                     state: {
-                      errors:
+                      selfErrors:
                         '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
                     },
                   },
@@ -1539,7 +1539,7 @@ const schema = {
           dependencies: ['.confirm_password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
             },
           },
@@ -1560,7 +1560,7 @@ const schema = {
           dependencies: ['.password'],
           fulfill: {
             state: {
-              errors:
+              selfErrors:
                 '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
             },
           },
@@ -1672,7 +1672,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.confirm_password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
@@ -1693,7 +1693,7 @@ export default () => {
             ]}
             reactions={(field) => {
               const confirm = field.query('.password')
-              field.errors =
+              field.selfErrors =
                 confirm.get('value') &&
                 field.value &&
                 field.value !== confirm.get('value')
diff --git a/lerna.json b/lerna.json
index a0bc060351e..1e36219d01f 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "npmClientArgs": ["--ignore-engines"],
diff --git a/package.json b/package.json
index 657c7912a7d..be763703b7b 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "test:next": "jest packages/next",
     "test:watch": "jest --watch",
     "test:prod": "jest --coverage --silent",
-    "preversion": "npm run build && npm run lint && npm run test",
+    "preversion": "yarn install --ignore-engines && npm run build && npm run lint && npm run test",
     "version": "ts-node scripts/release changelog && git add -A",
     "publish:note": "ts-node scripts/release release",
     "version:alpha": "lerna version prerelease --preid alpha && npm run publish:note",
@@ -142,7 +142,7 @@
     "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-dts": "^2.0.0",
     "semver": "^7.3.5",
-    "semver-regex": "^2.0.0",
+    "semver-regex": "^3.1.3",
     "showdown": "^1.9.1",
     "staged-git-files": "^1.1.2",
     "string-similarity": "^4.0.4",
diff --git a/packages/antd/package.json b/packages/antd/package.json
index bfd8f22a6af..678c68c5475 100644
--- a/packages/antd/package.json
+++ b/packages/antd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/antd",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/json-schema": "2.0.0-rc.7",
-    "@formily/react": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/json-schema": "2.0.0-rc.11",
+    "@formily/react": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-react": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
     "@juggle/resize-observer": "^3.3.1",
     "classnames": "^2.2.6",
     "react-sortable-hoc": "^1.11.0",
diff --git a/packages/antd/src/__builtins__/pickDataProps.ts b/packages/antd/src/__builtins__/pickDataProps.ts
index 4364b8daaea..62ffea218da 100644
--- a/packages/antd/src/__builtins__/pickDataProps.ts
+++ b/packages/antd/src/__builtins__/pickDataProps.ts
@@ -1,8 +1,11 @@
 export const pickDataProps = (props: any = {}) => {
-  return Object.keys(props).reduce((buf, key) => {
-    if (key.includes('data-')) {
-      buf[key] = props[key]
+  const results = {}
+
+  for (let key in props) {
+    if (key.indexOf('data-') > -1) {
+      results[key] = props[key]
     }
-    return buf
-  }, {})
+  }
+
+  return results
 }
diff --git a/packages/antd/src/form-dialog/index.tsx b/packages/antd/src/form-dialog/index.tsx
index 1d10c155ace..2abafbfe599 100644
--- a/packages/antd/src/form-dialog/index.tsx
+++ b/packages/antd/src/form-dialog/index.tsx
@@ -43,8 +43,8 @@ const getModelProps = (props: any): IModalProps => {
 
 export interface IFormDialog {
   forOpen(middleware: IMiddleware<IFormProps>): IFormDialog
-  forConfirm(middleware: IMiddleware<IFormProps>): IFormDialog
-  forCancel(middleware: IMiddleware<IFormProps>): IFormDialog
+  forConfirm(middleware: IMiddleware<Form>): IFormDialog
+  forCancel(middleware: IMiddleware<Form>): IFormDialog
   open(props?: IFormProps): Promise<any>
   close(): void
 }
diff --git a/packages/antd/src/form-item/index.tsx b/packages/antd/src/form-item/index.tsx
index 57d9b7b3265..16d42b8c8f0 100644
--- a/packages/antd/src/form-item/index.tsx
+++ b/packages/antd/src/form-item/index.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import cls from 'classnames'
 import { usePrefixCls, pickDataProps } from '../__builtins__'
 import { isVoidField } from '@formily/core'
@@ -91,7 +91,7 @@ function useOverflow<
   const containerRef = useRef<Container>()
   const contentRef = useRef<Content>()
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (containerRef.current && contentRef.current) {
       const contentWidth = contentRef.current.getBoundingClientRect().width
       const containerWidth = containerRef.current.getBoundingClientRect().width
@@ -116,10 +116,9 @@ const ICON_MAP = {
   warning: <ExclamationCircleOutlined />,
 }
 
-export const BaseItem: React.FC<IFormItemProps> = (props) => {
-  const { children, ...others } = props
-  const [active, setActice] = useState(false)
-  const formLayout = useFormItemLayout(others)
+export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
+  const [active, setActive] = useState(false)
+  const formLayout = useFormItemLayout(props)
   const gridSpan = useGridSpan(props.gridSpan)
   const { containerRef, contentRef, overflow } = useOverflow<
     HTMLDivElement,
@@ -219,10 +218,8 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
 
   const renderLabelText = () => {
     const labelChildren = (
-      <div className={cls(`${prefixCls}-label-content`)} ref={containerRef}>
-        {asterisk && (
-          <span className={cls(`${prefixCls}-asterisk`)}>{'*'}</span>
-        )}
+      <div className={`${prefixCls}-label-content`} ref={containerRef}>
+        {asterisk && <span className={`${prefixCls}-asterisk`}>{'*'}</span>}
         <label ref={contentRef}>{label}</label>
       </div>
     )
@@ -244,7 +241,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
   const renderTooltipIcon = () => {
     if (tooltip && tooltipLayout === 'icon' && !overflow) {
       return (
-        <span className={cls(`${prefixCls}-label-tooltip-icon`)}>
+        <span className={`${prefixCls}-label-tooltip-icon`}>
           <Tooltip placement="top" align={{ offset: [0, 2] }} title={tooltip}>
             {tooltipIcon}
           </Tooltip>
@@ -268,7 +265,7 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
         {renderLabelText()}
         {renderTooltipIcon()}
         {label !== ' ' && (
-          <span className={cls(`${prefixCls}-colon`)}>{colon ? ':' : ''}</span>
+          <span className={`${prefixCls}-colon`}>{colon ? ':' : ''}</span>
         )}
       </div>
     )
@@ -303,12 +300,12 @@ export const BaseItem: React.FC<IFormItemProps> = (props) => {
       })}
       onFocus={() => {
         if (feedbackIcon || inset) {
-          setActice(true)
+          setActive(true)
         }
       }}
       onBlur={() => {
         if (feedbackIcon || inset) {
-          setActice(false)
+          setActive(false)
         }
       }}
     >
diff --git a/packages/antd/src/index.ts b/packages/antd/src/index.ts
index a7e8f19d6e5..3d0a8365176 100644
--- a/packages/antd/src/index.ts
+++ b/packages/antd/src/index.ts
@@ -30,7 +30,6 @@ export * from './time-picker'
 export * from './number-picker'
 export * from './switch'
 export * from './upload'
-export * from './preview-text'
 export * from './submit'
 export * from './reset'
 export * from './editable'
diff --git a/designable/antd/.npmignore b/packages/benchmark/.npmignore
similarity index 100%
rename from designable/antd/.npmignore
rename to packages/benchmark/.npmignore
diff --git a/packages/benchmark/.umirc.js b/packages/benchmark/.umirc.js
new file mode 100644
index 00000000000..fe35f093856
--- /dev/null
+++ b/packages/benchmark/.umirc.js
@@ -0,0 +1,92 @@
+import { resolve } from 'path'
+export default {
+  mode: 'site',
+  logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+  title: 'Formily',
+  hash: true,
+  favicon:
+    '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
+  outputPath: './doc-site',
+  navs: {
+    'en-US': [
+      {
+        title: 'Guide',
+        path: '/guide',
+      },
+      {
+        title: 'API',
+        path: '/api',
+      },
+      {
+        title: 'Home Site',
+        path: 'https://v2.formilyjs.org',
+      },
+      {
+        title: 'GITHUB',
+        path: 'https://github.com/alibaba/formily',
+      },
+    ],
+    'zh-CN': [
+      {
+        title: '指南',
+        path: '/zh-CN/guide',
+      },
+      {
+        title: 'API',
+        path: '/zh-CN/api',
+      },
+      {
+        title: '主站',
+        path: 'https://v2.formilyjs.org',
+      },
+      {
+        title: 'GITHUB',
+        path: 'https://github.com/alibaba/formily',
+      },
+    ],
+  },
+  links: [
+    {
+      rel: 'stylesheet',
+      href: 'https://unpkg.com/antd/dist/antd.css',
+    },
+  ],
+  styles: [
+    `.__dumi-default-navbar-logo{
+      height: 60px !important;
+      width: 150px !important;
+      padding-left:0 !important;
+      color: transparent !important;
+    }
+    .__dumi-default-navbar{
+      padding: 0 28px !important;
+    }
+    .__dumi-default-layout-hero{
+      background-image: url(//img.alicdn.com/imgextra/i4/O1CN01ZcvS4e26XMsdsCkf9_!!6000000007671-2-tps-6001-4001.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+    nav a{
+      text-decoration: none !important;
+    }
+    `,
+  ],
+  menus: {
+    '/guide': [
+      {
+        title: 'Introduction',
+        path: '/guide',
+      },
+      { title: 'Architecture', path: '/guide/architecture' },
+      { title: 'Concept', path: '/guide/concept' },
+    ],
+    '/zh-CN/guide': [
+      {
+        title: '介绍',
+        path: '/guide',
+      },
+      { title: '核心架构', path: '/zh-CN/guide/architecture' },
+      { title: '核心概念', path: '/zh-CN/guide/concept' },
+    ],
+  },
+}
diff --git a/designable/antd/LICENSE.md b/packages/benchmark/LICENSE.md
similarity index 100%
rename from designable/antd/LICENSE.md
rename to packages/benchmark/LICENSE.md
diff --git a/packages/benchmark/README.md b/packages/benchmark/README.md
new file mode 100644
index 00000000000..25c71ead6bb
--- /dev/null
+++ b/packages/benchmark/README.md
@@ -0,0 +1 @@
+# @formily/benchmark
diff --git a/packages/benchmark/jest.config.js b/packages/benchmark/jest.config.js
new file mode 100644
index 00000000000..dfc970503b3
--- /dev/null
+++ b/packages/benchmark/jest.config.js
@@ -0,0 +1 @@
+module.exports = require('../../scripts/jest.base')
diff --git a/packages/benchmark/package.json b/packages/benchmark/package.json
new file mode 100644
index 00000000000..95a0d69e957
--- /dev/null
+++ b/packages/benchmark/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@formily/benchmark",
+  "version": "2.0.0-rc.11",
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/formily.git"
+  },
+  "types": "esm/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/alibaba/formily/issues"
+  },
+  "homepage": "https://github.com/alibaba/formily#readme",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.ts"
+  },
+  "devDependencies": {
+    "css-loader": "^5.0.0",
+    "file-loader": "^5.0.2",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^1.6.0",
+    "postcss": "^7.0.0",
+    "postcss-less": "^4.0.0",
+    "postcss-loader": "^3.x",
+    "raw-loader": "^4.0.0",
+    "style-loader": "^1.1.3",
+    "ts-loader": "^7.0.4",
+    "webpack": "^4.41.5",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "resolutions": {
+    "react": "next",
+    "react-dom": "next",
+    "react-is": "next"
+  },
+  "dependencies": {
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-react": "2.0.0-rc.11",
+    "react": "next",
+    "react-dom": "next",
+    "react-is": "next"
+  },
+  "gitHead": "ac79c196ae9324889aca5e0501146f9b37b04283"
+}
diff --git a/packages/benchmark/src/index.tsx b/packages/benchmark/src/index.tsx
new file mode 100644
index 00000000000..d2c43694e60
--- /dev/null
+++ b/packages/benchmark/src/index.tsx
@@ -0,0 +1,167 @@
+import React, { useMemo, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { createForm } from '@formily/core'
+import { Field, createSchemaField } from '@formily/react'
+import { Input, Form, FormItem } from '@formily/antd'
+import { Form as AntdForm, Input as AntdInput } from 'antd'
+const SchemaField = createSchemaField({
+  components: {
+    Input,
+    FormItem,
+  },
+})
+
+const PureAntdInput = () => {
+  return (
+    <>
+      {Array.from({ length: 2000 }).map((_, i) => {
+        return <AntdInput key={i} />
+      })}
+    </>
+  )
+}
+
+const PureAntd = () => {
+  return (
+    <AntdForm>
+      <h1>Please pay attention to the performance of the form input</h1>
+      {Array.from({ length: 2000 }).map((_, i) => {
+        return (
+          <AntdForm.Item
+            key={i}
+            name={`name_${i}`}
+            required
+            label={`name ${i + 1}`}
+          >
+            <AntdInput />
+          </AntdForm.Item>
+        )
+      })}
+    </AntdForm>
+  )
+}
+
+const PureJSX = () => {
+  const form = useMemo(() => createForm(), [])
+  return (
+    <Form form={form}>
+      <h1>Please pay attention to the performance of the form input</h1>
+      {Array.from({ length: 2000 }).map((_, i) => {
+        return (
+          <Field
+            key={i}
+            name={`name_${i}`}
+            title={`name ${i + 1}`}
+            required
+            decorator={[FormItem]}
+            component={[Input, { placeholder: 'Please Input' }]}
+          />
+        )
+      })}
+    </Form>
+  )
+}
+
+const PureJSONSchema = () => {
+  const form = useMemo(() => createForm(), [])
+  const schema = {
+    type: 'object',
+    properties: {},
+  }
+  Array.from({ length: 2000 }).forEach((_, i) => {
+    schema.properties[`name_${i}`] = {
+      type: 'string',
+      title: `name ${i + 1}`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+      'x-component-props': {
+        placeholder: 'Please Input',
+      },
+    }
+  })
+  return (
+    <Form form={form}>
+      <h1>Please pay attention to the performance of the form input</h1>
+      <SchemaField schema={schema} />
+    </Form>
+  )
+}
+
+const PureMarkupSchema = () => {
+  const form = useMemo(() => createForm(), [])
+  return (
+    <Form form={form}>
+      <h1>Please pay attention to the performance of the form input</h1>
+      <SchemaField>
+        {Array.from({ length: 2000 }).map((_, i) => {
+          return (
+            <SchemaField.String
+              key={i}
+              name={`name_${i}`}
+              title={`name ${i + 1}`}
+              required
+              x-decorator="FormItem"
+              x-component="Input"
+              x-component-props={{
+                placeholder: 'Please Input',
+              }}
+            />
+          )
+        })}
+      </SchemaField>
+    </Form>
+  )
+}
+
+const App = () => {
+  const [visibleAntd, setVisibleAntd] = useState(false)
+  const [visibleJSX, setVisibleJSX] = useState(false)
+  const [visibleMarkupSchema, setVisibleMarkupSchema] = useState(false)
+  const [visibleJSONSchema, setVisibleJSONSchema] = useState(false)
+  const [visibleAntdInput, setVisibleAntdInput] = useState(false)
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setVisibleJSX(!visibleJSX)
+        }}
+      >
+        Show JSX
+      </button>
+      <button
+        onClick={() => {
+          setVisibleMarkupSchema(!visibleMarkupSchema)
+        }}
+      >
+        Show Markup Schema
+      </button>
+      <button
+        onClick={() => {
+          setVisibleJSONSchema(!visibleJSONSchema)
+        }}
+      >
+        Show JSON Schema
+      </button>
+      <button
+        onClick={() => {
+          setVisibleAntd(!visibleAntd)
+        }}
+      >
+        Show Antd
+      </button>
+      <button
+        onClick={() => {
+          setVisibleAntdInput(!visibleAntdInput)
+        }}
+      >
+        Show Antd Input
+      </button>
+      {visibleJSX && <PureJSX />}
+      {visibleMarkupSchema && <PureMarkupSchema />}
+      {visibleJSONSchema && <PureJSONSchema />}
+      {visibleAntd && <PureAntd />}
+      {visibleAntdInput && <PureAntdInput />}
+    </div>
+  )
+}
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/designable/antd/playground/template.ejs b/packages/benchmark/template.ejs
similarity index 52%
rename from designable/antd/playground/template.ejs
rename to packages/benchmark/template.ejs
index 4ea62ab0bcd..e81c907f5b2 100644
--- a/designable/antd/playground/template.ejs
+++ b/packages/benchmark/template.ejs
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
+
 <head>
-  <meta charset="utf-8">
   <title>
-    Designable Playground
+    Formily benchmark
   </title>
   <style>
-    html,body{
+    html,
+    body {
       user-select: none;
       -webkit-user-select: none;
     }
   </style>
+  <link type="text/css" rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css"/>
 </head>
+
 <body>
   <div id="root">
   </div>
   <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
-  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/react@next/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@next/umd/react-dom.production.min.js"></script>
   <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
 </body>
\ No newline at end of file
diff --git a/designable/antd/tsconfig.build.json b/packages/benchmark/tsconfig.build.json
similarity index 100%
rename from designable/antd/tsconfig.build.json
rename to packages/benchmark/tsconfig.build.json
diff --git a/designable/antd/tsconfig.json b/packages/benchmark/tsconfig.json
similarity index 100%
rename from designable/antd/tsconfig.json
rename to packages/benchmark/tsconfig.json
diff --git a/designable/antd/playground/webpack.base.ts b/packages/benchmark/webpack.base.ts
similarity index 94%
rename from designable/antd/playground/webpack.base.ts
rename to packages/benchmark/webpack.base.ts
index 1fe60d689fb..a00f4793251 100644
--- a/designable/antd/playground/webpack.base.ts
+++ b/packages/benchmark/webpack.base.ts
@@ -6,7 +6,7 @@ import autoprefixer from 'autoprefixer'
 //import { getThemeVariables } from 'antd/dist/theme'
 
 const getWorkspaceAlias = () => {
-  const basePath = path.resolve(__dirname, '../../../')
+  const basePath = path.resolve(__dirname, '../../')
   const pkg = fs.readJSONSync(path.resolve(basePath, 'package.json')) || {}
   const results = {}
   const workspaces = pkg.workspaces
@@ -32,10 +32,10 @@ export default {
     children: false,
   },
   entry: {
-    playground: path.resolve(__dirname, './main'),
+    index: path.resolve(__dirname, './src/index'),
   },
   output: {
-    path: path.resolve(__dirname, '../build'),
+    path: path.resolve(__dirname, 'build'),
     filename: '[name].[hash].bundle.js',
   },
   resolve: {
diff --git a/designable/next/playground/webpack.dev.ts b/packages/benchmark/webpack.dev.ts
similarity index 84%
rename from designable/next/playground/webpack.dev.ts
rename to packages/benchmark/webpack.dev.ts
index 710c0570dae..eb040d3adf0 100644
--- a/designable/next/playground/webpack.dev.ts
+++ b/packages/benchmark/webpack.dev.ts
@@ -1,8 +1,6 @@
 import baseConfig from './webpack.base'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
-//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import webpack from 'webpack'
 import path from 'path'
 
@@ -39,13 +37,10 @@ export default {
       {
         filename: 'index.html',
         template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
+        chunk: ['index'],
       },
     ]),
     new webpack.HotModuleReplacementPlugin(),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
     // new BundleAnalyzerPlugin()
   ],
   devServer: {
diff --git a/designable/next/playground/webpack.prod.ts b/packages/benchmark/webpack.prod.ts
similarity index 84%
rename from designable/next/playground/webpack.prod.ts
rename to packages/benchmark/webpack.prod.ts
index 520f909e4f0..d4fe970e3cb 100644
--- a/designable/next/playground/webpack.prod.ts
+++ b/packages/benchmark/webpack.prod.ts
@@ -1,7 +1,6 @@
 import baseConfig from './webpack.base'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
 import path from 'path'
 
 const createPages = (pages) => {
@@ -27,12 +26,9 @@ export default {
       {
         filename: 'index.html',
         template: path.resolve(__dirname, './template.ejs'),
-        chunk: ['playground'],
+        chunk: ['index'],
       },
     ]),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
   ],
   optimization: {
     minimize: true,
diff --git a/packages/core/docs/index.md b/packages/core/docs/index.md
index 69bc3263026..e3e93c3fd09 100644
--- a/packages/core/docs/index.md
+++ b/packages/core/docs/index.md
@@ -104,7 +104,7 @@ const FormItem = observer(({ children }) => {
       <div style={{ height: 20 }}>{field.title}:</div>
       {children}
       <div style={{ height: 20, fontSize: 12, color: 'red' }}>
-        {field.errors.join(',')}
+        {field.selfErrors.join(',')}
       </div>
     </div>
   )
@@ -167,9 +167,9 @@ export default () => {
       field.value &&
       form.values[equalName] !== field.value
     ) {
-      field.errors = ['Password does not match Confirm Password.']
+      field.selfErrors = ['Password does not match Confirm Password.']
     } else {
-      field.errors = []
+      field.selfErrors = []
     }
   }
 
diff --git a/packages/core/docs/index.zh-CN.md b/packages/core/docs/index.zh-CN.md
index b4fd197b64f..ceefedec7af 100644
--- a/packages/core/docs/index.zh-CN.md
+++ b/packages/core/docs/index.zh-CN.md
@@ -104,7 +104,7 @@ const FormItem = observer(({ children }) => {
       <div style={{ height: 20 }}>{field.title}:</div>
       {children}
       <div style={{ height: 20, fontSize: 12, color: 'red' }}>
-        {field.errors.join(',')}
+        {field.selfErrors.join(',')}
       </div>
     </div>
   )
@@ -167,9 +167,9 @@ export default () => {
       field.value &&
       form.values[equalName] !== field.value
     ) {
-      field.errors = ['Password does not match Confirm Password.']
+      field.selfErrors = ['Password does not match Confirm Password.']
     } else {
-      field.errors = []
+      field.selfErrors = []
     }
   }
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 5b7e942135c..0bd1208c9bd 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/core",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -33,9 +33,9 @@
     "dumi": "^1.1.0-rc.8"
   },
   "dependencies": {
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
-    "@formily/validator": "2.0.0-rc.7"
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
+    "@formily/validator": "2.0.0-rc.11"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/core/src/__tests__/array.spec.ts b/packages/core/src/__tests__/array.spec.ts
index 3635d69a2cf..e7582a27a74 100644
--- a/packages/core/src/__tests__/array.spec.ts
+++ b/packages/core/src/__tests__/array.spec.ts
@@ -391,7 +391,7 @@ test('array field remove memo leak', async () => {
       basePath: 'array',
     })
   )
-  expect(handler).toBeCalledTimes(1)
+  expect(handler).toBeCalledTimes(0)
   expect(valuesChange).toBeCalledTimes(4)
 })
 
diff --git a/packages/core/src/__tests__/field.spec.ts b/packages/core/src/__tests__/field.spec.ts
index dd86180d8d9..749ea8955cd 100644
--- a/packages/core/src/__tests__/field.spec.ts
+++ b/packages/core/src/__tests__/field.spec.ts
@@ -330,6 +330,35 @@ test('setDecorator/setDecoratorProps', () => {
   expect(field.decorator[1]).toEqual({ props: 123, hello: 'world' })
 })
 
+test('reaction initialValue', () => {
+  const form = attach(
+    createForm({
+      values: {
+        aa: 123,
+      },
+    })
+  )
+  const aa = attach(
+    form.createField({
+      name: 'aa',
+      reactions(field) {
+        field.initialValue = 321
+      },
+    })
+  )
+  const bb = attach(
+    form.createField({
+      name: 'bb',
+      value: 123,
+      reactions(field) {
+        field.initialValue = 321
+      },
+    })
+  )
+  expect(aa.value).toEqual(123)
+  expect(bb.value).toEqual(123)
+})
+
 test('selfValidate/errors/warnings/successes/valid/invalid/validateStatus/queryFeedbacks', async () => {
   const form = attach(createForm())
   const field = attach(
@@ -425,20 +454,20 @@ test('selfValidate/errors/warnings/successes/valid/invalid/validateStatus/queryF
   expect(field.selfErrors).toEqual(['error'])
   await field.onBlur()
   expect(field.selfErrors).toEqual([
-    'The field value is a invalid url',
     'error',
+    'The field value is a invalid url',
   ])
   await field.onFocus()
   expect(field.selfErrors).toEqual([
+    'error',
     'The field value is a invalid url',
     'The field value is not a valid date format',
-    'error',
   ])
   field.setFeedback()
   expect(field.selfErrors).toEqual([
+    'error',
     'The field value is a invalid url',
     'The field value is not a valid date format',
-    'error',
   ])
   expect(field3.feedbacks).toEqual([])
   field3.setFeedback()
@@ -1494,3 +1523,83 @@ test('field submit', async () => {
   }
   expect(onSubmit).toBeCalledTimes(0)
 })
+
+test('initial display with value', () => {
+  const form = attach(createForm())
+  const aa = attach(
+    form.createField({
+      name: 'aa',
+      value: 123,
+      visible: false,
+    })
+  )
+  const bb = attach(
+    form.createField({
+      name: 'bb',
+      value: 123,
+      visible: true,
+    })
+  )
+  const cc = attach(
+    form.createField({
+      name: 'cc',
+      value: 123,
+      hidden: true,
+    })
+  )
+  expect(aa.value).toBeUndefined()
+  expect(aa.visible).toBeFalsy()
+  expect(bb.value).toEqual(123)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.value).toEqual(123)
+  expect(cc.hidden).toBeTruthy()
+})
+
+test('state depend field visible value', async () => {
+  const form = attach(createForm())
+  const aa = attach(
+    form.createField({
+      name: 'aa',
+    })
+  )
+  const bb = attach(
+    form.createField({
+      name: 'bb',
+      reactions(field) {
+        field.visible = aa.value === '123'
+      },
+    })
+  )
+  const cc = attach(
+    form.createField({
+      name: 'cc',
+      reactions(field) {
+        field.visible = aa.value === '123'
+        field.disabled = !bb.value
+      },
+    })
+  )
+  expect(bb.visible).toBeFalsy()
+  expect(cc.visible).toBeFalsy()
+  expect(cc.disabled).toBeTruthy()
+  aa.value = '123'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeTruthy()
+  bb.value = '321'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeFalsy()
+  aa.value = ''
+  await sleep(10)
+  expect(bb.visible).toBeFalsy()
+  expect(cc.visible).toBeFalsy()
+  expect(cc.disabled).toBeTruthy()
+  aa.value = '123'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeFalsy()
+})
diff --git a/packages/core/src/__tests__/form.spec.ts b/packages/core/src/__tests__/form.spec.ts
index 5a0aa89bc66..49f81866e04 100644
--- a/packages/core/src/__tests__/form.spec.ts
+++ b/packages/core/src/__tests__/form.spec.ts
@@ -975,7 +975,6 @@ test('initialValues merge values before create field', () => {
       name: 'array',
     })
   )
-
   form.values.array = [{ aa: '321' }]
   const arr_0_aa = attach(
     form.createField({
@@ -988,6 +987,25 @@ test('initialValues merge values before create field', () => {
   expect(arr_0_aa.value).toEqual('321')
 })
 
+test('no patch with empty initialValues', () => {
+  const form = attach(
+    createForm({
+      values: {
+        array: [1, 2, 3],
+      },
+    })
+  )
+  attach(
+    form.createObjectField({
+      name: 'array.0.1',
+    })
+  )
+
+  expect(form.values).toEqual({
+    array: [1, 2, 3],
+  })
+})
+
 test('initialValues merge values after create field', () => {
   const form = attach(createForm())
   const aa = attach(
@@ -1062,8 +1080,8 @@ test('empty array initialValues', () => {
   expect(form.values.aa).toEqual([0])
   expect(form.values.bb).toEqual([''])
   expect(form.values.cc).toEqual([])
-  expect(form.values.dd).toEqual([])
-  expect(form.values.ee).toEqual([])
+  expect(form.values.dd).toEqual([null])
+  expect(form.values.ee).toEqual([undefined])
 })
 
 test('form lifecycle can be triggered after call form.setXXX', () => {
diff --git a/packages/core/src/__tests__/graph.spec.ts b/packages/core/src/__tests__/graph.spec.ts
index 322e021417b..c32937704ee 100644
--- a/packages/core/src/__tests__/graph.spec.ts
+++ b/packages/core/src/__tests__/graph.spec.ts
@@ -26,7 +26,7 @@ test('getGraph/setGraph', () => {
   )
   form.query('normal').take((field) => {
     if (isVoidField(field)) return
-    field.errors = ['error']
+    field.selfErrors = ['error']
   })
   const graph = form.getFormGraph()
   form.clearFormGraph()
diff --git a/packages/core/src/__tests__/internals.spec.ts b/packages/core/src/__tests__/internals.spec.ts
index 3c21f7f5bb9..a65c7e6977e 100644
--- a/packages/core/src/__tests__/internals.spec.ts
+++ b/packages/core/src/__tests__/internals.spec.ts
@@ -1,7 +1,7 @@
 import {
   getValuesFromEvent,
   matchFeedback,
-  applyFieldPatches,
+  patchFieldStates,
   setModelState,
   isHTMLInputEvent,
 } from '../shared/internals'
@@ -19,10 +19,10 @@ test('empty', () => {
   expect(matchFeedback()).toBeFalsy()
 })
 
-test('applyFieldPatches', () => {
+test('patchFieldStates', () => {
   const fields = {}
-  applyFieldPatches(fields, [{ type: 'update', address: 'aaa', payload: null }])
-  applyFieldPatches(fields, [
+  patchFieldStates(fields, [{ type: 'update', address: 'aaa', payload: null }])
+  patchFieldStates(fields, [
     { type: 'update3' as any, address: 'aaa', payload: null },
   ])
   expect(fields).toEqual({})
diff --git a/packages/core/src/models/Field.ts b/packages/core/src/models/Field.ts
index 23443e89b59..4de444da950 100644
--- a/packages/core/src/models/Field.ts
+++ b/packages/core/src/models/Field.ts
@@ -2,7 +2,6 @@ import {
   FormPath,
   isValid,
   FormPathPattern,
-  isFn,
   isEmpty,
   toArr,
 } from '@formily/shared'
@@ -16,7 +15,6 @@ import {
   reaction,
   batch,
   toJS,
-  autorun,
   action,
 } from '@formily/reactive'
 import { Form } from './Form'
@@ -45,12 +43,13 @@ import {
   initFieldUpdate,
   updateFeedback,
   queryFeedbacks,
+  allowAssignDefaultValue,
   queryFeedbackMessages,
   getValuesFromEvent,
-  modelStateSetter,
-  modelStateGetter,
+  createReactions,
+  createStateSetter,
+  createStateGetter,
   isHTMLInputEvent,
-  initFieldValue,
   setValidatorRule,
   batchValidate,
   batchSubmit,
@@ -58,7 +57,8 @@ import {
   setValidating,
   setSubmitting,
   setLoading,
-  selfValidate,
+  validateSelf,
+  getValidFieldDefaultValue,
 } from '../shared/internals'
 import { Query } from './Query'
 export class Field<
@@ -96,6 +96,7 @@ export class Field<
   path: FormPath
 
   form: Form
+  designable: boolean
   props: IFieldProps<Decorator, Component, TextType, ValueType>
 
   caches: IFieldCaches = {}
@@ -108,23 +109,22 @@ export class Field<
     form: Form,
     designable: boolean
   ) {
-    this.initialize(props, form)
+    this.form = form
+    this.props = props
+    this.designable = designable
     this.makeIndexes(address)
-    this.makeObservable(designable)
-    this.makeReactive(designable)
-    this.onInit(designable)
+    this.initialize()
+    this.makeObservable()
+    this.makeReactive()
+    this.onInit()
   }
 
   protected makeIndexes(address: FormPathPattern) {
+    this.form.fields[address.toString()] = this
     buildNodeIndexes(this, address)
   }
 
-  protected initialize(
-    props: IFieldProps<Decorator, Component, TextType, ValueType>,
-    form: Form
-  ) {
-    this.form = form
-    this.props = props
+  protected initialize() {
     this.initialized = false
     this.loading = false
     this.validating = false
@@ -137,8 +137,8 @@ export class Field<
     this.inputValues = []
     this.inputValue = null
     this.feedbacks = []
-    this.title = props.title
-    this.description = props.description
+    this.title = this.props.title
+    this.description = this.props.description
     this.display = this.props.display
     this.pattern = this.props.pattern
     this.editable = this.props.editable
@@ -151,13 +151,18 @@ export class Field<
     this.validator = this.props.validator
     this.required = this.props.required
     this.content = this.props.content
+    this.value = getValidFieldDefaultValue(
+      this.props.value,
+      this.props.initialValue
+    )
+    this.initialValue = this.props.initialValue
     this.data = this.props.data
     this.decorator = toArr(this.props.decorator)
     this.component = toArr(this.props.component)
   }
 
-  protected makeObservable(designable: boolean) {
-    if (designable) return
+  protected makeObservable() {
+    if (this.designable) return
     define(this, {
       title: observable.ref,
       description: observable.ref,
@@ -237,15 +242,15 @@ export class Field<
     })
   }
 
-  protected makeReactive(designable: boolean) {
-    if (designable) return
+  protected makeReactive() {
+    if (this.designable) return
     this.disposers.push(
       reaction(
         () => this.value,
         (value) => {
           this.notify(LifeCycleTypes.ON_FIELD_VALUE_CHANGE)
           if (isValid(value) && this.modified && !this.caches.inputting) {
-            selfValidate(this)
+            validateSelf(this)
           }
         }
       ),
@@ -289,14 +294,7 @@ export class Field<
         }
       )
     )
-    const reactions = toArr(this.props.reactions)
-    this.form.addEffects(this, () => {
-      reactions.forEach((reaction) => {
-        if (isFn(reaction)) {
-          this.disposers.push(autorun(() => reaction(this)))
-        }
-      })
-    })
+    createReactions(this)
   }
 
   get parent() {
@@ -516,10 +514,27 @@ export class Field<
   }
 
   set value(value: ValueType) {
+    if (!this.initialized) {
+      if (this.display === 'none') {
+        this.caches.value = value
+        return
+      }
+      if (!allowAssignDefaultValue(this.value, value) && !this.designable) {
+        return
+      }
+    }
     this.form.setValuesIn(this.path, value)
   }
 
   set initialValue(initialValue: ValueType) {
+    if (!this.initialized) {
+      if (
+        !allowAssignDefaultValue(this.initialValue, initialValue) &&
+        !this.designable
+      ) {
+        return
+      }
+    }
     this.form.setInitialValuesIn(this.path, initialValue)
   }
 
@@ -659,18 +674,13 @@ export class Field<
     }
   }
 
-  setState: IModelSetter<IFieldState> = modelStateSetter(this)
+  setState: IModelSetter<IFieldState> = createStateSetter(this)
 
-  getState: IModelGetter<IFieldState> = modelStateGetter(this)
+  getState: IModelGetter<IFieldState> = createStateGetter(this)
 
-  onInit = (designable: boolean) => {
+  onInit = () => {
     this.initialized = true
-    batch.scope(() => {
-      initFieldValue(this, designable)
-    })
-    batch.scope(() => {
-      initFieldUpdate(this)
-    })
+    initFieldUpdate(this)
     this.notify(LifeCycleTypes.ON_FIELD_INIT)
   }
 
@@ -700,7 +710,7 @@ export class Field<
     this.form.modified = true
     this.notify(LifeCycleTypes.ON_FIELD_INPUT_VALUE_CHANGE)
     this.notify(LifeCycleTypes.ON_FORM_INPUT_CHANGE, this.form)
-    await selfValidate(this, 'onInput')
+    await validateSelf(this, 'onInput')
     this.caches.inputting = false
   }
 
@@ -710,7 +720,7 @@ export class Field<
     }
     this.active = true
     this.visited = true
-    await selfValidate(this, 'onFocus')
+    await validateSelf(this, 'onFocus')
   }
 
   onBlur = async (...args: any[]) => {
@@ -718,7 +728,7 @@ export class Field<
       if (!isHTMLInputEvent(args[0], false)) return
     }
     this.active = false
-    await selfValidate(this, 'onBlur')
+    await validateSelf(this, 'onBlur')
   }
 
   validate = (triggerType?: ValidatorTriggerType) => {
diff --git a/packages/core/src/models/Form.ts b/packages/core/src/models/Form.ts
index 4c3a1906428..304f13d5c30 100644
--- a/packages/core/src/models/Form.ts
+++ b/packages/core/src/models/Form.ts
@@ -1,11 +1,4 @@
-import {
-  define,
-  observable,
-  batch,
-  action,
-  isObservable,
-  observe,
-} from '@formily/reactive'
+import { define, observable, batch, action, observe } from '@formily/reactive'
 import {
   FormPath,
   FormPathPattern,
@@ -13,7 +6,6 @@ import {
   uid,
   globalThisPolyfill,
   merge,
-  clone,
   isPlainObj,
   isArr,
   isObj,
@@ -43,11 +35,10 @@ import {
   IFormMergeStrategy,
 } from '../types'
 import {
-  modelStateGetter,
-  modelStateSetter,
-  createFieldStateSetter,
-  createFieldStateGetter,
-  applyValuesPatch,
+  createStateGetter,
+  createStateSetter,
+  createBatchStateSetter,
+  createBatchStateGetter,
   triggerFormInitialValuesChange,
   triggerFormValuesChange,
   batchValidate,
@@ -56,6 +47,7 @@ import {
   setValidating,
   setSubmitting,
   setLoading,
+  getValidFormValues,
 } from '../shared/internals'
 import { isVoidField } from '../shared/checkers'
 import { runEffects } from '../shared/effectbox'
@@ -91,9 +83,9 @@ export class Form<ValueType extends object = any> {
 
   constructor(props: IFormProps<ValueType>) {
     this.initialize(props)
-    this.makeInitialValues()
     this.makeObservable()
     this.makeReactive()
+    this.makeValues()
     this.onInit()
   }
 
@@ -122,14 +114,9 @@ export class Form<ValueType extends object = any> {
     })
   }
 
-  protected makeInitialValues() {
-    this.values = isObservable(this.props.values)
-      ? this.props.values
-      : clone(this.props.values) || ({} as any)
-    this.initialValues = isObservable(this.props.initialValues)
-      ? this.props.initialValues
-      : clone(this.props.initialValues) || ({} as any)
-    applyValuesPatch(this, [], this.initialValues)
+  protected makeValues() {
+    this.values = getValidFormValues(this.props.values)
+    this.initialValues = getValidFormValues(this.props.initialValues)
   }
 
   protected makeObservable() {
@@ -180,7 +167,6 @@ export class Form<ValueType extends object = any> {
   }
 
   protected makeReactive() {
-    if (this.props.designable) return
     this.disposers.push(
       observe(
         this,
@@ -314,12 +300,7 @@ export class Form<ValueType extends object = any> {
     if (!identifier) return
     if (!this.fields[identifier] || this.props.designable) {
       batch(() => {
-        this.fields[identifier] = new Field(
-          address,
-          props,
-          this,
-          this.props.designable
-        )
+        new Field(address, props, this, this.props.designable)
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
@@ -337,7 +318,7 @@ export class Form<ValueType extends object = any> {
     if (!identifier) return
     if (!this.fields[identifier] || this.props.designable) {
       batch(() => {
-        this.fields[identifier] = new ArrayField(
+        new ArrayField(
           address,
           {
             ...props,
@@ -363,7 +344,7 @@ export class Form<ValueType extends object = any> {
     if (!identifier) return
     if (!this.fields[identifier] || this.props.designable) {
       batch(() => {
-        this.fields[identifier] = new ObjectField(
+        new ObjectField(
           address,
           {
             ...props,
@@ -389,12 +370,7 @@ export class Form<ValueType extends object = any> {
     if (!identifier) return
     if (!this.fields[identifier] || this.props.designable) {
       batch(() => {
-        this.fields[identifier] = new VoidField(
-          address,
-          props,
-          this,
-          this.props.designable
-        )
+        new VoidField(address, props, this, this.props.designable)
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
@@ -597,17 +573,17 @@ export class Form<ValueType extends object = any> {
     }
   }
 
-  setState: IModelSetter<IFormState<ValueType>> = modelStateSetter(this)
+  setState: IModelSetter<IFormState<ValueType>> = createStateSetter(this)
 
-  getState: IModelGetter<IFormState<ValueType>> = modelStateGetter(this)
+  getState: IModelGetter<IFormState<ValueType>> = createStateGetter(this)
 
-  setFormState: IModelSetter<IFormState<ValueType>> = modelStateSetter(this)
+  setFormState: IModelSetter<IFormState<ValueType>> = createStateSetter(this)
 
-  getFormState: IModelGetter<IFormState<ValueType>> = modelStateGetter(this)
+  getFormState: IModelGetter<IFormState<ValueType>> = createStateGetter(this)
 
-  setFieldState: IFieldStateSetter = createFieldStateSetter(this)
+  setFieldState: IFieldStateSetter = createBatchStateSetter(this)
 
-  getFieldState: IFieldStateGetter = createFieldStateGetter(this)
+  getFieldState: IFieldStateGetter = createBatchStateGetter(this)
 
   getFormGraph = () => {
     return this.graph.getGraph()
diff --git a/packages/core/src/models/VoidField.ts b/packages/core/src/models/VoidField.ts
index b5a58c04dc9..b840e5c8164 100644
--- a/packages/core/src/models/VoidField.ts
+++ b/packages/core/src/models/VoidField.ts
@@ -1,11 +1,5 @@
-import {
-  FormPath,
-  FormPathPattern,
-  isFn,
-  isValid,
-  toArr,
-} from '@formily/shared'
-import { define, observable, autorun, batch, action } from '@formily/reactive'
+import { FormPath, FormPathPattern, isValid, toArr } from '@formily/shared'
+import { define, observable, batch, action } from '@formily/reactive'
 import {
   JSXComponent,
   LifeCycleTypes,
@@ -21,8 +15,9 @@ import {
 } from '../types'
 import {
   buildNodeIndexes,
-  modelStateGetter,
-  modelStateSetter,
+  createReactions,
+  createStateGetter,
+  createStateSetter,
   initFieldUpdate,
 } from '../shared/internals'
 import { Form } from './Form'
@@ -49,6 +44,7 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
   componentType: Component
   componentProps: Record<string, any>
 
+  designable: boolean
   address: FormPath
   path: FormPath
   form: Form
@@ -62,30 +58,29 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     form: Form,
     designable: boolean
   ) {
-    this.initialize(props, form)
+    this.form = form
+    this.props = props
+    this.designable = designable
     this.makeIndexes(address)
-    this.makeObservable(designable)
-    this.makeReactive(designable)
+    this.initialize()
+    this.makeObservable()
+    this.makeReactive()
     this.onInit()
   }
 
   protected makeIndexes(address: FormPathPattern) {
+    this.form.fields[address.toString()] = this
     buildNodeIndexes(this, address)
   }
 
-  protected initialize(
-    props: IVoidFieldProps<Decorator, Component>,
-    form: Form
-  ) {
-    this.form = form
-    this.props = props
+  protected initialize() {
     this.mounted = false
     this.unmounted = false
     this.initialized = false
-    this.title = props.title
-    this.description = props.description
+    this.title = this.props.title
+    this.description = this.props.description
     this.pattern = this.props.pattern
-    this.display = props.display
+    this.display = this.props.display
     this.hidden = this.props.hidden
     this.editable = this.props.editable
     this.disabled = this.props.disabled
@@ -98,8 +93,8 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     this.component = toArr(this.props.component)
   }
 
-  protected makeObservable(designable: boolean) {
-    if (designable) return
+  protected makeObservable() {
+    if (this.designable) return
     define(this, {
       title: observable.ref,
       description: observable.ref,
@@ -138,15 +133,9 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     })
   }
 
-  protected makeReactive(designable: boolean) {
-    if (designable) return
-    this.form.addEffects(this, () => {
-      toArr(this.props.reactions).forEach((reaction) => {
-        if (isFn(reaction)) {
-          this.disposers.push(autorun(() => reaction(this)))
-        }
-      })
-    })
+  protected makeReactive() {
+    if (this.designable) return
+    createReactions(this)
   }
 
   get parent() {
@@ -343,15 +332,13 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     }
   }
 
-  setState: IModelSetter<IVoidFieldState> = modelStateSetter(this)
+  setState: IModelSetter<IVoidFieldState> = createStateSetter(this)
 
-  getState: IModelGetter<IVoidFieldState> = modelStateGetter(this)
+  getState: IModelGetter<IVoidFieldState> = createStateGetter(this)
 
   onInit = () => {
     this.initialized = true
-    batch.scope(() => {
-      initFieldUpdate(this)
-    })
+    initFieldUpdate(this)
     this.notify(LifeCycleTypes.ON_FIELD_INIT)
   }
 
diff --git a/packages/core/src/shared/constants.ts b/packages/core/src/shared/constants.ts
index ad96672164b..3152cd7f4a1 100644
--- a/packages/core/src/shared/constants.ts
+++ b/packages/core/src/shared/constants.ts
@@ -20,7 +20,6 @@ export const ReservedProperties = new Set([
 export const RESPONSE_REQUEST_DURATION = 100
 
 export const GlobalState = {
-  initializing: false,
   lifecycles: [],
   context: [],
   effectStart: false,
diff --git a/packages/core/src/shared/internals.ts b/packages/core/src/shared/internals.ts
index fcf6ad4d1e7..7340596842b 100644
--- a/packages/core/src/shared/internals.ts
+++ b/packages/core/src/shared/internals.ts
@@ -8,18 +8,22 @@ import {
   isEmpty,
   isArr,
   isPlainObj,
-  toArr,
   isNumberLike,
-  shallowClone,
   clone,
-  isEqual,
+  toArr,
 } from '@formily/shared'
 import {
   ValidatorTriggerType,
   validate,
   parseValidatorDescriptions,
 } from '@formily/validator'
-import { batch, toJS, DataChange } from '@formily/reactive'
+import {
+  autorun,
+  batch,
+  toJS,
+  isObservable,
+  DataChange,
+} from '@formily/reactive'
 import { Field, ArrayField, Form, ObjectField } from '../models'
 import {
   ISpliceArrayStateProps,
@@ -44,7 +48,6 @@ import {
 import {
   RESPONSE_REQUEST_DURATION,
   ReservedProperties,
-  GlobalState,
   NumberIndexReg,
 } from './constants'
 
@@ -118,7 +121,7 @@ export const buildNodeIndexes = (
   return field
 }
 
-export const applyFieldPatches = (
+export const patchFieldStates = (
   target: Record<string, GeneralField>,
   patches: INodePatch<GeneralField>[]
 ) => {
@@ -138,6 +141,47 @@ export const applyFieldPatches = (
   })
 }
 
+export const patchFormValues = (
+  form: Form,
+  path: Array<string | number>,
+  source: any
+) => {
+  const update = (path: Array<string | number>, source: any) => {
+    if (path.length) {
+      form.setValuesIn(path, clone(source))
+    } else {
+      Object.assign(form.values, clone(source))
+    }
+  }
+
+  const patch = (source: any, path: Array<string | number> = []) => {
+    const targetValue = form.getValuesIn(path)
+    const targetField = form.query(path).take()
+    if (allowAssignDefaultValue(targetValue, source)) {
+      update(path, source)
+    } else {
+      if (isPlainObj(targetValue) && isPlainObj(source)) {
+        each(source, (value, key) => {
+          patch(value, path.concat(key))
+        })
+      } else if (!isEmpty(source)) {
+        if (targetField) {
+          if (
+            !isVoidField(targetField) &&
+            targetField.initialized &&
+            !targetField.modified
+          ) {
+            update(path, source)
+          }
+        } else {
+          update(path, source)
+        }
+      }
+    }
+  }
+  patch(source, path)
+}
+
 export const matchFeedback = (
   search?: ISearchFeedback,
   feedback?: IFormFeedback
@@ -158,6 +202,7 @@ export const matchFeedback = (
 
 export const queryFeedbacks = (field: Field, search?: ISearchFeedback) => {
   return field.feedbacks.filter((feedback) => {
+    if (!feedback.messages?.length) return false
     return matchFeedback(search, {
       ...feedback,
       address: field.address?.toString(),
@@ -189,9 +234,8 @@ export const updateFeedback = (field: Field, feedback?: IFieldFeedback) => {
       if (searched.length) {
         field.feedbacks = field.feedbacks.reduce((buf, item) => {
           if (searched.includes(item)) {
-            const messages = toArr(feedback.messages)
-            if (messages?.length) {
-              item.messages = messages
+            if (feedback.messages?.length) {
+              item.messages = feedback.messages
               return buf.concat(item)
             } else {
               return buf
@@ -201,8 +245,9 @@ export const updateFeedback = (field: Field, feedback?: IFieldFeedback) => {
           }
         }, [])
         return
+      } else if (feedback.messages?.length) {
+        field.feedbacks = field.feedbacks.concat(feedback)
       }
-      field.feedbacks = field.feedbacks.concat(feedback)
     }
   })
 }
@@ -363,7 +408,7 @@ export const spliceArrayState = (
         }
       }
     })
-    applyFieldPatches(fields, fieldPatches)
+    patchFieldStates(fields, fieldPatches)
   })
   field.form.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
 }
@@ -428,7 +473,7 @@ export const exchangeArrayState = (
         }
       }
     })
-    applyFieldPatches(fields, fieldPatches)
+    patchFieldStates(fields, fieldPatches)
   })
   field.form.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
 }
@@ -487,64 +532,7 @@ export const cleanupObjectChildren = (field: ObjectField, keys: string[]) => {
   })
 }
 
-export const initFieldValue = (field: Field, designable: boolean) => {
-  GlobalState.initializing = true
-  if (designable) {
-    if (isValid(field.props.initialValue)) {
-      field.initialValue = shallowClone(field.props.initialValue)
-    }
-    if (isValid(field.props.value)) {
-      field.value = field.props.value
-    }
-  } else {
-    const fromValue = (value: any) => [
-      isValid(value),
-      isEmpty(value, true),
-      value,
-    ]
-    const [, isEmptySelfValue, selfValue] = fromValue(field.value)
-    const [, isEmptySelfInitialValue, selfInitialValue] = fromValue(
-      field.initialValue
-    )
-    const [isValidPropsValue, isEmptyPropsValue, propsValue] = fromValue(
-      field.props.value
-    )
-    const [
-      isValidPropsInitialValue,
-      isEmptyPropsInitialValue,
-      propsInitialValue,
-    ] = fromValue(field.props.initialValue)
-    if (isEmptySelfInitialValue) {
-      if (isEmptyPropsInitialValue) {
-        if (!isEqual(selfInitialValue, propsInitialValue)) {
-          field.initialValue = shallowClone(propsInitialValue)
-        }
-      } else if (isValidPropsInitialValue) {
-        field.initialValue = shallowClone(propsInitialValue)
-      }
-    }
-    if (isEmptySelfValue) {
-      if (!isEmptyPropsValue) {
-        field.value = shallowClone(propsValue)
-      } else {
-        if (!isEmptyPropsInitialValue) {
-          field.value = shallowClone(propsInitialValue)
-        } else if (isValidPropsValue) {
-          if (!isEqual(selfValue, propsValue)) {
-            field.value = shallowClone(propsValue)
-          }
-        } else if (isValidPropsInitialValue) {
-          if (!isEqual(selfValue, propsInitialValue)) {
-            field.value = shallowClone(propsInitialValue)
-          }
-        }
-      }
-    }
-  }
-  GlobalState.initializing = false
-}
-
-export const initFieldUpdate = (field: GeneralField) => {
+export const initFieldUpdate = batch.scope.bound((field: GeneralField) => {
   const form = field.form
   const updates = FormPath.ensureIn(form, 'requests.updates', [])
   const indexes = FormPath.ensureIn(form, 'requests.updateIndexes', {})
@@ -566,7 +554,7 @@ export const initFieldUpdate = (field: GeneralField) => {
       delete indexes[pattern.toString()]
     }
   }
-}
+})
 
 export const subscribeUpdate = (
   form: Form,
@@ -603,12 +591,8 @@ export const setModelState = (model: any, setter: any) => {
     if (key === 'componentType' || key === 'componentProps') return true
     if (key === 'decoratorType' || key === 'decoratorProps') return true
     if (key === 'validateStatus') return true
-    if (key === 'errors' || key === 'warnings' || key === 'successes') {
-      if (model.displayName === 'Form') return true
-      if (setter.feedbacks?.length) {
-        return true
-      }
-    }
+    if (key === 'errors' || key === 'warnings' || key === 'successes')
+      return true
     if (
       (key === 'display' || key === 'visible' || key === 'hidden') &&
       'selfDisplay' in setter &&
@@ -663,15 +647,15 @@ export const getModelState = (model: any, getter?: any) => {
   }
 }
 
-export const modelStateSetter = (model: any) => {
+export const createStateSetter = (model: any) => {
   return batch.bound((state?: any) => setModelState(model, state))
 }
 
-export const modelStateGetter = (model: any) => {
+export const createStateGetter = (model: any) => {
   return (getter?: any) => getModelState(model, getter)
 }
 
-export const createFieldStateSetter = (form: Form) => {
+export const createBatchStateSetter = (form: Form) => {
   return batch.bound((pattern: FieldMatchPattern, payload?: any) => {
     if (isQuery(pattern)) {
       pattern.forEach((field) => {
@@ -693,7 +677,7 @@ export const createFieldStateSetter = (form: Form) => {
     }
   })
 }
-export const createFieldStateGetter = (form: Form) => {
+export const createBatchStateGetter = (form: Form) => {
   return (pattern: FieldMatchPattern, payload?: any) => {
     if (isQuery(pattern)) {
       return pattern.take(payload)
@@ -707,50 +691,6 @@ export const createFieldStateGetter = (form: Form) => {
   }
 }
 
-export const applyValuesPatch = (
-  form: Form,
-  path: Array<string | number>,
-  source: any
-) => {
-  const update = (path: Array<string | number>, source: any) => {
-    if (path.length) {
-      form.setValuesIn(path, clone(source))
-    } else {
-      Object.assign(form.values, clone(source))
-    }
-  }
-
-  const patch = (source: any, path: Array<string | number> = []) => {
-    const targetValue = form.getValuesIn(path)
-    const targetField = form.query(path).take()
-    if (isEmpty(targetValue)) {
-      if (isEmpty(source)) return
-      update(path, source)
-    } else {
-      const arrA = isArr(targetValue)
-      const arrB = isArr(source)
-      const objA = isPlainObj(targetValue)
-      const objB = isPlainObj(source)
-      if ((arrA && arrA === arrB) || (objA && objA === objB)) {
-        each(source, (value, key) => {
-          if (isEmpty(value)) return
-          patch(value, path.concat(key))
-        })
-      } else {
-        if (targetField) {
-          if (!isVoidField(targetField) && !targetField.modified) {
-            update(path, source)
-          }
-        } else {
-          update(path, source)
-        }
-      }
-    }
-  }
-  if (GlobalState.initializing) return
-  patch(source, path)
-}
-
 export const triggerFormInitialValuesChange = (
   form: Form,
   change: DataChange
@@ -759,27 +699,22 @@ export const triggerFormInitialValuesChange = (
   if (path[path.length - 1] === 'length') return
   if (path[0] === 'initialValues') {
     if (change.type === 'add' || change.type === 'set') {
-      applyValuesPatch(form, path.slice(1), change.value)
+      patchFormValues(form, path.slice(1), change.value)
+    }
+    if (form.initialized) {
+      form.notify(LifeCycleTypes.ON_FORM_INITIAL_VALUES_CHANGE)
     }
-    form.notify(LifeCycleTypes.ON_FORM_INITIAL_VALUES_CHANGE)
   }
 }
 
 export const triggerFormValuesChange = (form: Form, change: DataChange) => {
   const path = change.path
   if (path[path.length - 1] === 'length') return
-  if (path[0] === 'values') {
+  if (path[0] === 'values' && form.initialized) {
     form.notify(LifeCycleTypes.ON_FORM_VALUES_CHANGE)
   }
 }
 
-const getValues = (target: Form | Field) => {
-  if (isForm(target)) {
-    return toJS(target.values)
-  }
-  return toJS(target.value)
-}
-
 const notify = (
   target: Form | Field,
   formType: LifeCycleTypes,
@@ -874,6 +809,12 @@ export const batchSubmit = async <T>(
   target: Form | Field,
   onSubmit?: (values: any) => Promise<T> | void
 ): Promise<T> => {
+  const getValues = (target: Form | Field) => {
+    if (isForm(target)) {
+      return toJS(target.values)
+    }
+    return toJS(target.value)
+  }
   target.setSubmitting(true)
   try {
     notify(
@@ -942,7 +883,7 @@ export const batchValidate = async (
   const tasks = []
   target.query(pattern).forEach((field) => {
     if (!isVoidField(field)) {
-      tasks.push(selfValidate(field, triggerType, field === target))
+      tasks.push(validateSelf(field, triggerType, field === target))
     }
   })
   await Promise.all(tasks)
@@ -970,14 +911,14 @@ export const batchReset = async (
   const tasks = []
   target.query(pattern).forEach((field) => {
     if (!isVoidField(field)) {
-      tasks.push(selfReset(field, options, target === field))
+      tasks.push(resetSelf(field, options, target === field))
     }
   })
   notify(target, LifeCycleTypes.ON_FORM_RESET, LifeCycleTypes.ON_FIELD_RESET)
   await Promise.all(tasks)
 }
 
-export const selfValidate = batch.bound(
+export const validateSelf = batch.bound(
   async (target: Field, triggerType?: ValidatorTriggerType, noEmit = false) => {
     const start = () => {
       setValidating(target, true)
@@ -1013,7 +954,7 @@ export const selfValidate = batch.bound(
   }
 )
 
-export const selfReset = batch.bound(
+export const resetSelf = batch.bound(
   async (target: Field, options?: IFieldResetOptions, noEmit = false) => {
     target.modified = false
     target.visited = false
@@ -1022,9 +963,9 @@ export const selfReset = batch.bound(
     target.inputValues = []
     if (options?.forceClear) {
       if (isArrayField(target)) {
-        target.value = [] as any
+        target.value = []
       } else if (isObjectField(target)) {
-        target.value = {} as any
+        target.value = {}
       } else {
         target.value = undefined
       }
@@ -1035,7 +976,50 @@ export const selfReset = batch.bound(
       target.notify(LifeCycleTypes.ON_FIELD_RESET)
     }
     if (options?.validate) {
-      return await selfValidate(target)
+      return await validateSelf(target)
     }
   }
 )
+
+export const getValidFormValues = (values: any) => {
+  if (isObservable(values)) return values
+  return clone(values || {})
+}
+
+export const getValidFieldDefaultValue = (value: any, initialValue: any) => {
+  if (allowAssignDefaultValue(value, initialValue)) return initialValue
+  return value
+}
+
+export const allowAssignDefaultValue = (target: any, source: any) => {
+  const isEmptyTarget = isEmpty(target)
+  const isEmptySource = isEmpty(source)
+  const isValidTarget = isValid(target)
+  const isValidSource = isValid(source)
+  if (!isValidTarget) {
+    if (isValidSource) {
+      return true
+    }
+    return false
+  }
+
+  if (isEmptyTarget) {
+    if (isEmptySource) {
+      return false
+    } else {
+      return true
+    }
+  }
+  return false
+}
+
+export const createReactions = (field: GeneralField) => {
+  const reactions = toArr(field.props.reactions)
+  field.form.addEffects(field, () => {
+    reactions.forEach((reaction) => {
+      if (isFn(reaction)) {
+        field.disposers.push(autorun(batch.scope.bound(() => reaction(field))))
+      }
+    })
+  })
+}
diff --git a/packages/element/docs/.vuepress/components/createCodeSandBox.js b/packages/element/docs/.vuepress/components/createCodeSandBox.js
new file mode 100644
index 00000000000..d6ca26e5100
--- /dev/null
+++ b/packages/element/docs/.vuepress/components/createCodeSandBox.js
@@ -0,0 +1,114 @@
+import { getParameters } from 'codesandbox/lib/api/define'
+
+const CodeSandBoxHTML = '<div id="app"></div>'
+const CodeSandBoxJS = `
+import Vue from 'vue'
+import App from './App.vue'
+import Element  from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.config.productionTip = false
+Vue.use(Element, { size: 'small' });
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')`
+
+const createForm = ({ method, action, data }) => {
+  const form = document.createElement('form') // 构造 form
+  form.style.display = 'none' // 设置为不显示
+  form.target = '_blank' // 指向 iframe
+
+  // 构造 formdata
+  Object.keys(data).forEach((key) => {
+    const input = document.createElement('input') // 创建 input
+
+    input.name = key // 设置 name
+    input.value = data[key] // 设置 value
+
+    form.appendChild(input)
+  })
+
+  form.method = method // 设置方法
+  form.action = action // 设置地址
+
+  document.body.appendChild(form)
+
+  // 对该 form 执行提交
+  form.submit()
+
+  document.body.removeChild(form)
+}
+
+export function createCodeSandBox(codeStr) {
+  const parameters = getParameters({
+    files: {
+      'sandbox.config.json': {
+        content: {
+          template: 'node',
+          infiniteLoopProtection: true,
+          hardReloadOnChange: false,
+          view: 'browser',
+          container: {
+            port: 8080,
+            node: '14',
+          },
+        },
+      },
+      'package.json': {
+        content: {
+          scripts: {
+            serve: 'vue-cli-service serve',
+            build: 'vue-cli-service build',
+            lint: 'vue-cli-service lint',
+          },
+          dependencies: {
+            '@formily/core': 'latest',
+            '@formily/vue': 'latest',
+            '@formily/element': 'latest',
+            axios: '^0.21.1',
+            'core-js': '^3.6.5',
+            'element-ui': 'latest',
+            'vue-demi': 'latest',
+            vue: '^2.6.11',
+          },
+          devDependencies: {
+            '@vue/cli-plugin-babel': '~4.5.0',
+            '@vue/cli-service': '~4.5.0',
+            '@vue/composition-api': 'latest',
+            'vue-template-compiler': '^2.6.11',
+            sass: '^1.34.1',
+            'sass-loader': '^8.0.2',
+          },
+          babel: {
+            presets: ['@vue/cli-plugin-babel/preset'],
+          },
+          vue: {
+            devServer: {
+              host: '0.0.0.0',
+              disableHostCheck: true, // 必须
+            },
+          },
+        },
+      },
+      'src/App.vue': {
+        content: codeStr,
+      },
+      'src/main.js': {
+        content: CodeSandBoxJS,
+      },
+      'public/index.html': {
+        content: CodeSandBoxHTML,
+      },
+    },
+  })
+
+  createForm({
+    method: 'post',
+    action: 'https://codesandbox.io/api/v1/sandboxes/define',
+    data: {
+      parameters,
+      query: 'file=/src/App.vue',
+    },
+  })
+}
diff --git a/packages/element/docs/.vuepress/components/dumi-previewer.vue b/packages/element/docs/.vuepress/components/dumi-previewer.vue
index 00276132d72..fe7826b65b0 100644
--- a/packages/element/docs/.vuepress/components/dumi-previewer.vue
+++ b/packages/element/docs/.vuepress/components/dumi-previewer.vue
@@ -12,7 +12,20 @@
       </div>
 
       <div class="dumi-previewer-actions">
-        <div></div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            class="dumi-previewer-actions__icon"
+            viewBox="0 0 256 296"
+            @click="openCodeSandBox"
+          >
+            <path
+              d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z"
+              fill="#000"
+            ></path>
+          </svg>
+        </div>
 
         <div>
           <svg
@@ -71,6 +84,7 @@
 <script>
 import copy from 'copy-to-clipboard'
 import highlight from './highlight'
+import { createCodeSandBox } from './createCodeSandBox'
 
 export default {
   name: 'dumi-previewer',
@@ -148,6 +162,10 @@ export default {
         this.copied = false
       }, 2000)
     },
+
+    openCodeSandBox() {
+      createCodeSandBox(this.demoStr)
+    },
   },
 }
 </script>
diff --git a/packages/element/docs/demos/guide/select/template-async.vue b/packages/element/docs/demos/guide/select/template-async.vue
index f3e57188e6f..102afb523ca 100644
--- a/packages/element/docs/demos/guide/select/template-async.vue
+++ b/packages/element/docs/demos/guide/select/template-async.vue
@@ -12,13 +12,13 @@
           },
         },
       ]"
-      :enum="[
+      :dataSource="[
         { label: '发请求1', value: 1 },
         { label: '发请求2', value: 2 },
       ]"
     />
     <Field
-      name="[Select]"
+      name="select"
       title="异步选择框"
       :decorator="[FormItem]"
       :component="[
@@ -57,6 +57,7 @@ const form = createForm({
     useAsyncDataSource('select', async (field) => {
       const linkage = field.query('linkage').get('value')
       if (!linkage) return []
+
       return new Promise((resolve) => {
         setTimeout(() => {
           if (linkage === 1) {
diff --git a/packages/element/package.json b/packages/element/package.json
index 995fda5a4c4..0504d17381b 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/element",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -36,8 +36,9 @@
     "@vuepress/plugin-back-to-top": "^1.8.2",
     "@vuepress/plugin-medium-zoom": "^1.8.2",
     "axios": "^0.21.1",
+    "codesandbox": "^2.2.3",
     "core-js": "^2.4.0",
-    "element-ui": "^2.15.2",
+    "element-ui": "latest",
     "sass": "^1.34.1",
     "ts-import-plugin": "^1.6.7",
     "ttypescript": "^1.5.12",
@@ -46,12 +47,12 @@
     "vuepress-plugin-typescript": "^0.3.1"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/json-schema": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-vue": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
-    "@formily/vue": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/json-schema": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-vue": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
+    "@formily/vue": "2.0.0-rc.11",
     "portal-vue": "^2.1.7",
     "vue-slicksort": "^1.2.0"
   },
diff --git a/packages/element/src/__builtins__/shared/get-component-by-tag.ts b/packages/element/src/__builtins__/shared/get-component-by-tag.ts
deleted file mode 100644
index cb3b2f50de4..00000000000
--- a/packages/element/src/__builtins__/shared/get-component-by-tag.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Component } from 'vue'
-import { merge } from '@formily/shared'
-import { h } from '@formily/vue'
-import { isVue2 } from 'vue-demi'
-
-type ListenersTransformRules = Record<string, string>
-
-export const getComponentByTag = <T extends Record<string, any>>(
-  tag: any,
-  transformRules?: ListenersTransformRules,
-  defaultProps?: Partial<T>
-): Component<T> | any => {
-  if (isVue2) {
-    return {
-      functional: true,
-      render(h, context) {
-        const data = context.data
-        if (transformRules) {
-          const listeners = transformRules
-          Object.keys(listeners).forEach((extract) => {
-            if (data.on !== undefined) {
-              data.on[listeners[extract]] = context.listeners[extract]
-            }
-          })
-        }
-        if (defaultProps) {
-          data.props = merge(defaultProps, data.props)
-        }
-        return h(tag, data, context.children)
-      },
-    }
-  } else {
-    return {
-      setup(props, { attrs, slots }) {
-        return () => {
-          let data = {
-            ...attrs,
-          }
-          if (transformRules) {
-            const listeners = transformRules
-            Object.keys(listeners).forEach((extract) => {
-              const event = listeners[extract]
-              data[`on${event[0].toUpperCase()}${event.slice(1)}`] =
-                attrs[`on${extract[0].toUpperCase()}${extract.slice(1)}`]
-            })
-          }
-          if (defaultProps) {
-            data = merge(defaultProps, data)
-          }
-          return h(tag, attrs, slots)
-        }
-      },
-    }
-  }
-}
diff --git a/packages/element/src/__builtins__/shared/index.ts b/packages/element/src/__builtins__/shared/index.ts
index d7b9d7e4ddd..25aee28cd35 100644
--- a/packages/element/src/__builtins__/shared/index.ts
+++ b/packages/element/src/__builtins__/shared/index.ts
@@ -1,4 +1,4 @@
-export * from './get-component-by-tag'
+export * from './transform-component'
 export * from './resolve-component'
 export * from './create-context'
 export * from './utils'
diff --git a/packages/element/src/__builtins__/shared/resolve-component.ts b/packages/element/src/__builtins__/shared/resolve-component.ts
index 9eec7b3b0b4..b9ff6615582 100644
--- a/packages/element/src/__builtins__/shared/resolve-component.ts
+++ b/packages/element/src/__builtins__/shared/resolve-component.ts
@@ -1,26 +1,21 @@
+import { Component } from 'vue'
 import { h, toRaw } from '@vue/composition-api'
-import { Component, VNode } from 'vue'
+import { SlotTypes } from '.'
+import { isVnode } from './utils'
 
 export const resolveComponent = (
-  child?:
-    | Component
-    | string
-    | number
-    | boolean
-    | ((...args: any[]) => VNode[] | VNode),
+  child?: SlotTypes,
   props?: Record<string, any>
 ) => {
   if (child) {
-    if (
-      typeof child === 'string' ||
-      typeof child === 'number' ||
-      typeof child === 'boolean'
-    ) {
+    if (typeof child === 'string' || typeof child === 'number') {
       return child
     } else if (typeof child === 'function') {
       return (child as Function)(props)
+    } else if (isVnode(child)) {
+      return child
     } else {
-      return h(toRaw(child), { props })
+      return h(toRaw(child as Component), { props })
     }
   }
 
diff --git a/packages/element/src/__builtins__/shared/transform-component.ts b/packages/element/src/__builtins__/shared/transform-component.ts
new file mode 100644
index 00000000000..4c8af267117
--- /dev/null
+++ b/packages/element/src/__builtins__/shared/transform-component.ts
@@ -0,0 +1,65 @@
+import type { Component } from 'vue'
+import { merge } from '@formily/shared'
+import { h } from '@formily/vue'
+import { isVue2, h as hInVue2, defineComponent } from 'vue-demi'
+
+type ListenersTransformRules = Record<string, string>
+
+export const transformComponent = <T extends Record<string, any>>(
+  tag: any,
+  transformRules?: ListenersTransformRules,
+  defaultProps?: Partial<T>
+): Component<T> | any => {
+  if (isVue2) {
+    return defineComponent({
+      setup(props, { attrs, slots, listeners }) {
+        return () => {
+          const data = {
+            attrs: {
+              ...attrs,
+            },
+            on: {
+              ...listeners,
+            },
+          }
+
+          if (transformRules) {
+            const transformListeners = transformRules
+            Object.keys(transformListeners).forEach((extract) => {
+              if (data.on !== undefined) {
+                data.on[transformListeners[extract]] = listeners[extract]
+              }
+            })
+          }
+          if (defaultProps) {
+            data.attrs = merge(defaultProps, data.attrs)
+          }
+
+          return h(tag, data, slots)
+        }
+      },
+    })
+  } else {
+    return defineComponent({
+      setup(props, { attrs, slots }) {
+        return () => {
+          let data = {
+            ...attrs,
+          }
+          if (transformRules) {
+            const listeners = transformRules
+            Object.keys(listeners).forEach((extract) => {
+              const event = listeners[extract]
+              data[`on${event[0].toUpperCase()}${event.slice(1)}`] =
+                attrs[`on${extract[0].toUpperCase()}${extract.slice(1)}`]
+            })
+          }
+          if (defaultProps) {
+            data = merge(defaultProps, data)
+          }
+          return h(tag, data, slots)
+        }
+      },
+    })
+  }
+}
diff --git a/packages/element/src/__builtins__/shared/utils.ts b/packages/element/src/__builtins__/shared/utils.ts
index 3d2fc2d205a..e98703446ca 100644
--- a/packages/element/src/__builtins__/shared/utils.ts
+++ b/packages/element/src/__builtins__/shared/utils.ts
@@ -9,6 +9,16 @@ export function isValidElement(element) {
   ) // remove text node
 }
 
+export function isVnode(element: any): boolean {
+  return (
+    element &&
+    typeof element === 'object' &&
+    'componentOptions' in element &&
+    'context' in element &&
+    element.tag !== undefined
+  )
+}
+
 export function isVueOptions(options) {
   return (
     options &&
diff --git a/packages/element/src/array-cards/index.ts b/packages/element/src/array-cards/index.ts
index f26ea7a5544..7f8a1f4c8f0 100644
--- a/packages/element/src/array-cards/index.ts
+++ b/packages/element/src/array-cards/index.ts
@@ -143,8 +143,8 @@ const ArrayCardsInner = observer(
                       },
                     },
                     {
-                      default: () => [
-                        content,
+                      default: () => [content],
+                      header: () =>
                         h(
                           Row,
                           {
@@ -152,13 +152,11 @@ const ArrayCardsInner = observer(
                               type: 'flex',
                               justify: 'space-between',
                             },
-                            slot: 'header',
                           },
                           {
                             default: () => [title, extra],
                           }
                         ),
-                      ],
                     }
                   ),
               }
diff --git a/packages/element/src/array-collapse/index.ts b/packages/element/src/array-collapse/index.ts
index 536af1956f9..281fae8830e 100644
--- a/packages/element/src/array-collapse/index.ts
+++ b/packages/element/src/array-collapse/index.ts
@@ -243,6 +243,8 @@ export const ArrayCollapseInner = observer(
                       default: () => [content],
                     }
                   ),
+                ],
+                title: () =>
                   h(
                     Row,
                     {
@@ -251,7 +253,6 @@ export const ArrayCollapseInner = observer(
                         type: 'flex',
                         justify: 'space-between',
                       },
-                      slot: 'title',
                     },
                     {
                       default: () => [
@@ -260,7 +261,6 @@ export const ArrayCollapseInner = observer(
                       ],
                     }
                   ),
-                ],
               }
             )
           })
diff --git a/packages/element/src/array-tabs/index.ts b/packages/element/src/array-tabs/index.ts
index 5381cb419e9..4d26366a829 100644
--- a/packages/element/src/array-tabs/index.ts
+++ b/packages/element/src/array-tabs/index.ts
@@ -42,25 +42,6 @@ export const ArrayTabs = observer(
           }
         }
 
-        const addButton = h(
-          Button,
-          {
-            class: [`${prefixCls}-addition`],
-            attrs: {
-              size: 'large',
-              icon: 'el-icon-plus',
-            },
-            on: {
-              click: (e: MouseEvent) => {
-                e.stopPropagation()
-                e.preventDefault()
-                onEdit(null, 'add')
-              },
-            },
-          },
-          {}
-        )
-
         const badgedTab = (index: number) => {
           const tab = `${field.title || 'Untitled'} ${index + 1}`
           const path = field.address.concat(index)
@@ -71,7 +52,7 @@ export const ArrayTabs = observer(
           if (errors.length) {
             return h(
               'span',
-              { slot: 'label' },
+              {},
               {
                 default: () => [
                   h(
@@ -86,19 +67,15 @@ export const ArrayTabs = observer(
                       default: () => [tab],
                     }
                   ),
-                  index === dataSource.length - 1 ? addButton : null,
                 ],
               }
             )
           }
           return h(
             'span',
-            { slot: 'label' },
+            {},
             {
-              default: () => [
-                tab,
-                index === dataSource.length - 1 ? addButton : null,
-              ],
+              default: () => [tab],
             }
           )
         }
@@ -120,7 +97,7 @@ export const ArrayTabs = observer(
                 },
               },
               {
-                default: () => [
+                default: () =>
                   h(
                     RecursionField,
                     {
@@ -131,8 +108,8 @@ export const ArrayTabs = observer(
                     },
                     {}
                   ),
-                  badgedTab(index),
-                ],
+
+                label: () => [badgedTab(index)],
               }
             )
           })
@@ -151,6 +128,7 @@ export const ArrayTabs = observer(
                 activeKey.value = key
               },
               'tab-remove': (target) => onEdit(target, 'remove'),
+              'tab-add': () => onEdit(null, 'add'),
             },
           },
           {
diff --git a/packages/element/src/checkbox/index.ts b/packages/element/src/checkbox/index.ts
index da22fa269de..d0144701f7e 100644
--- a/packages/element/src/checkbox/index.ts
+++ b/packages/element/src/checkbox/index.ts
@@ -2,7 +2,7 @@ import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
 import { defineComponent, PropType } from '@vue/composition-api'
 import {
   composeExport,
-  getComponentByTag,
+  transformComponent,
   resolveComponent,
   SlotTypes,
 } from '../__builtins__/shared'
@@ -83,7 +83,7 @@ export type CheckboxGroupProps = ElCheckboxGroupProps & {
   optionType: 'default' | 'button'
 }
 
-const TransformElCheckboxGroup = getComponentByTag(ElCheckboxGroup, {
+const TransformElCheckboxGroup = transformComponent(ElCheckboxGroup, {
   change: 'input',
 })
 
diff --git a/packages/element/src/date-picker/index.ts b/packages/element/src/date-picker/index.ts
index cd5a705e52c..eaab986b073 100644
--- a/packages/element/src/date-picker/index.ts
+++ b/packages/element/src/date-picker/index.ts
@@ -1,4 +1,4 @@
-import { getComponentByTag } from '../__builtins__/shared'
+import { transformComponent } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
 
 import type { DatePicker as ElDatePickerProps } from 'element-ui'
@@ -7,9 +7,12 @@ import { PreviewText } from '../preview-text'
 
 export type DatePickerProps = ElDatePickerProps
 
-const TransformElDatePicker = getComponentByTag<DatePickerProps>(ElDatePicker, {
-  change: 'input',
-})
+const TransformElDatePicker = transformComponent<DatePickerProps>(
+  ElDatePicker,
+  {
+    change: 'input',
+  }
+)
 
 const getDefaultFormat = (props, formatType = 'format') => {
   const type = props.type
diff --git a/packages/element/src/editable/index.ts b/packages/element/src/editable/index.ts
index bdfdbdc3d6f..e0de10fb978 100644
--- a/packages/element/src/editable/index.ts
+++ b/packages/element/src/editable/index.ts
@@ -220,11 +220,11 @@ const EditablePopover = observer(
             },
           },
           {
-            default: () => [
-              slots.default(),
+            default: () => [slots.default()],
+            reference: () =>
               h(
                 FormBaseItem,
-                { slot: 'reference', class: [`${prefixCls}-trigger`] },
+                { class: [`${prefixCls}-trigger`] },
                 {
                   default: () =>
                     h(
@@ -260,7 +260,6 @@ const EditablePopover = observer(
                     ),
                 }
               ),
-            ],
           }
         )
       }
diff --git a/packages/element/src/form-collapse/index.ts b/packages/element/src/form-collapse/index.ts
index 240bf08df82..bbccd6ee01b 100644
--- a/packages/element/src/form-collapse/index.ts
+++ b/packages/element/src/form-collapse/index.ts
@@ -174,12 +174,13 @@ const FormCollapse = observer(
                   {
                     default: () => [
                       h(RecursionField, { props: { schema, name } }, {}),
+                    ],
+                    title: () =>
                       h(
                         'span',
-                        { slot: 'title' },
+                        {},
                         { default: () => badgedHeader(name, props) }
                       ),
-                    ],
                   }
                 )
               })
diff --git a/packages/element/src/form-dialog/index.ts b/packages/element/src/form-dialog/index.ts
index 42745ef31a8..f69e8ac7047 100644
--- a/packages/element/src/form-dialog/index.ts
+++ b/packages/element/src/form-dialog/index.ts
@@ -211,20 +211,17 @@ export function FormDialog(
                       },
                     },
                     {
-                      default: () => [
-                        h(component, {}, {}),
+                      default: () => [h(component, {}, {})],
+                      title: () =>
                         h(
                           'div',
-                          {
-                            slot: 'title',
-                          },
+                          {},
                           { default: () => resolveComponent(title) }
                         ),
+                      footer: () =>
                         h(
                           'div',
-                          {
-                            slot: 'footer',
-                          },
+                          {},
                           {
                             default: () => {
                               const FooterProtalTarget = h(
@@ -295,7 +292,6 @@ export function FormDialog(
                             },
                           }
                         ),
-                      ],
                     }
                   ),
               }
@@ -402,9 +398,7 @@ const FormDialogFooter = defineComponent({
             to: PORTAL_TARGET_NAME,
           },
         },
-        {
-          default: () => h(Fragment, {}, slots),
-        }
+        slots
       )
     }
   },
diff --git a/packages/element/src/form-drawer/index.ts b/packages/element/src/form-drawer/index.ts
index 2964a72eece..fa810dde407 100644
--- a/packages/element/src/form-drawer/index.ts
+++ b/packages/element/src/form-drawer/index.ts
@@ -295,14 +295,9 @@ export function FormDrawer(
                           },
                         }
                       ),
-                      h(
-                        'div',
-                        {
-                          slot: 'title',
-                        },
-                        { default: () => resolveComponent(title) }
-                      ),
                     ],
+                    title: () =>
+                      h('div', {}, { default: () => resolveComponent(title) }),
                   }
                 ),
             }
@@ -408,9 +403,7 @@ const FormDrawerFooter = defineComponent({
             to: PORTAL_TARGET_NAME,
           },
         },
-        {
-          default: () => h(Fragment, {}, slots),
-        }
+        slots
       )
     }
   },
diff --git a/packages/element/src/form-item/index.ts b/packages/element/src/form-item/index.ts
index ef6ee080024..8c3c4def88c 100644
--- a/packages/element/src/form-item/index.ts
+++ b/packages/element/src/form-item/index.ts
@@ -271,13 +271,11 @@ export const FormBaseItem = defineComponent<FormItemProps>({
               },
             },
             {
-              default: () => [
-                labelChildren,
+              default: () => [labelChildren],
+              content: () =>
                 h(
                   'div',
-                  {
-                    slot: 'content',
-                  },
+                  {},
                   {
                     default: () => [
                       overflow.value && resolveComponent(label),
@@ -285,7 +283,6 @@ export const FormBaseItem = defineComponent<FormItemProps>({
                     ],
                   }
                 ),
-              ],
             }
           )
         } else {
@@ -309,19 +306,17 @@ export const FormBaseItem = defineComponent<FormItemProps>({
                     },
                   },
                   {
-                    default: () => [
-                      h('i', { class: 'el-icon-info' }, {}),
+                    default: () => [h('i', { class: 'el-icon-info' }, {})],
+                    content: () =>
                       h(
                         'div',
                         {
                           class: `${prefixCls}-label-tooltip-content`,
-                          slot: 'content',
                         },
                         {
                           default: () => [resolveComponent(tooltip)],
                         }
                       ),
-                    ],
                   }
                 ),
               ],
diff --git a/packages/element/src/form-layout/style.scss b/packages/element/src/form-layout/style.scss
index e69de29bb2d..c77f85a5797 100644
--- a/packages/element/src/form-layout/style.scss
+++ b/packages/element/src/form-layout/style.scss
@@ -0,0 +1,6 @@
+@import '../__builtins__/styles/common.scss';
+
+.#{$formily-prefix}-form-inline {
+  display: flex;
+  flex-wrap: wrap;
+}
diff --git a/packages/element/src/form-tab/index.ts b/packages/element/src/form-tab/index.ts
index 9ceb048f5c1..cf21aaf9f1f 100644
--- a/packages/element/src/form-tab/index.ts
+++ b/packages/element/src/form-tab/index.ts
@@ -114,11 +114,9 @@ const FormTabInner = observer(
                     },
                     {}
                   ),
-                  h(
-                    'div',
-                    { slot: 'label' },
-                    { default: badgedTab(name, props) }
-                  ),
+                ],
+                label: () => [
+                  h('div', {}, { default: badgedTab(name, props) }),
                 ],
               }
             )
diff --git a/packages/element/src/input-number/index.ts b/packages/element/src/input-number/index.ts
index 5683acf3154..fb4c325e2bd 100644
--- a/packages/element/src/input-number/index.ts
+++ b/packages/element/src/input-number/index.ts
@@ -1,4 +1,4 @@
-import { getComponentByTag } from '../__builtins__/shared'
+import { transformComponent } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
 
 import type { InputNumber as _ElInputNumberProps } from 'element-ui'
@@ -7,7 +7,7 @@ import { PreviewText } from '../preview-text'
 
 export type InputNumberProps = _ElInputNumberProps
 
-const TransformElInputNumber = getComponentByTag<InputNumberProps>(
+const TransformElInputNumber = transformComponent<InputNumberProps>(
   ElInputNumber,
   {
     change: 'input',
diff --git a/packages/element/src/input/index.ts b/packages/element/src/input/index.ts
index 2407aa4422c..2c5c07b1767 100644
--- a/packages/element/src/input/index.ts
+++ b/packages/element/src/input/index.ts
@@ -1,4 +1,4 @@
-import { composeExport, getComponentByTag } from '../__builtins__/shared'
+import { composeExport, transformComponent } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
 import { PreviewText } from '../preview-text'
 import type { Input as ElInputProps } from 'element-ui'
@@ -6,7 +6,7 @@ import { Input as ElInput } from 'element-ui'
 
 export type InputProps = ElInputProps
 
-const TransformElInput = getComponentByTag<InputProps>(ElInput, {
+const TransformElInput = transformComponent<InputProps>(ElInput, {
   change: 'input',
 })
 
diff --git a/packages/element/src/radio/index.ts b/packages/element/src/radio/index.ts
index fcf498ca2e2..384ffbfb639 100644
--- a/packages/element/src/radio/index.ts
+++ b/packages/element/src/radio/index.ts
@@ -2,7 +2,7 @@ import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
 import { defineComponent, PropType } from '@vue/composition-api'
 import {
   composeExport,
-  getComponentByTag,
+  transformComponent,
   resolveComponent,
   SlotTypes,
 } from '../__builtins__/shared'
@@ -31,7 +31,7 @@ export type RadioGroupProps = ElRadioGroupProps & {
 
 export type RadioProps = ElRadioProps
 
-const TransformElRadioGroup = getComponentByTag(ElRadioGroup, {
+const TransformElRadioGroup = transformComponent(ElRadioGroup, {
   change: 'input',
 })
 
diff --git a/packages/element/src/select/index.ts b/packages/element/src/select/index.ts
index 53d08efbb53..d7d0a1e44a5 100644
--- a/packages/element/src/select/index.ts
+++ b/packages/element/src/select/index.ts
@@ -7,9 +7,10 @@ import type {
   Option as ElOptionProps,
 } from 'element-ui'
 import { Select as ElSelect, Option as ElOption } from 'element-ui'
+import { resolveComponent } from '../__builtins__'
 
 export type SelectProps = ElSelectProps & {
-  options?: Array<ElOptionProps | string>
+  options?: Array<ElOptionProps>
 }
 
 const SelectOption = defineComponent<SelectProps>({
@@ -26,11 +27,29 @@ const SelectOption = defineComponent<SelectProps>({
                   if (typeof option === 'string') {
                     return h(
                       ElOption,
-                      { props: { label: option, value: option } },
-                      {}
+                      { props: { value: option, label: option } },
+                      {
+                        default: () => [
+                          resolveComponent(slots?.option, { option }),
+                        ],
+                      }
                     )
                   } else {
-                    return h(ElOption, { props: option }, {})
+                    return h(
+                      ElOption,
+                      {
+                        props: {
+                          ...option,
+                        },
+                      },
+                      {
+                        default: () => [
+                          resolveComponent(slots?.option, {
+                            option,
+                          }),
+                        ],
+                      }
+                    )
                   }
                 }),
             }
diff --git a/packages/element/src/time-picker/index.ts b/packages/element/src/time-picker/index.ts
index 4a74f655e17..cc40bdc0a26 100644
--- a/packages/element/src/time-picker/index.ts
+++ b/packages/element/src/time-picker/index.ts
@@ -1,4 +1,4 @@
-import { getComponentByTag } from '../__builtins__/shared'
+import { transformComponent } from '../__builtins__/shared'
 import { connect, mapProps, mapReadPretty } from '@formily/vue'
 import { PreviewText } from '../preview-text'
 import type { TimePicker as ElTimePickerProps } from 'element-ui'
@@ -6,9 +6,12 @@ import { TimePicker as ElTimePicker } from 'element-ui'
 
 export type TimePickerProps = ElTimePickerProps
 
-const TransformElTimePicker = getComponentByTag<TimePickerProps>(ElTimePicker, {
-  change: 'input',
-})
+const TransformElTimePicker = transformComponent<TimePickerProps>(
+  ElTimePicker,
+  {
+    change: 'input',
+  }
+)
 
 export const TimePicker = connect(
   TransformElTimePicker,
diff --git a/packages/json-schema/package.json b/packages/json-schema/package.json
index dc49ceb920c..d28eaf85828 100644
--- a/packages/json-schema/package.json
+++ b/packages/json-schema/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/json-schema",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -28,9 +28,9 @@
     "build:global": "ts-node ../../scripts/build-global"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7"
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/json-schema/src/__tests__/traverse.spec.ts b/packages/json-schema/src/__tests__/traverse.spec.ts
index d87f19ada6c..7ab1ed4ee9c 100644
--- a/packages/json-schema/src/__tests__/traverse.spec.ts
+++ b/packages/json-schema/src/__tests__/traverse.spec.ts
@@ -1,6 +1,21 @@
-import { traverse } from '../traverse'
+import { traverse, traverseSchema } from '../shared'
 import { FormPath } from '@formily/shared'
 
+test('traverseSchema', () => {
+  const visited = []
+  traverseSchema(
+    {
+      type: 'string',
+      required: true,
+      'x-validator': 'phone',
+    },
+    (value, path) => {
+      visited.push(path)
+    }
+  )
+  expect(visited).toEqual([['x-validator'], ['type'], ['required']])
+})
+
 test('traverse circular reference', () => {
   // eslint-disable-next-line
   var a = {
@@ -12,6 +27,9 @@ test('traverse circular reference', () => {
         dd: 123,
       },
     },
+    kk: {
+      toJS() {},
+    },
   }
   a.dd.mm = a
   traverse(a, () => {})
diff --git a/packages/json-schema/src/compiler.ts b/packages/json-schema/src/compiler.ts
index bea5e14a867..7b12d2dd874 100644
--- a/packages/json-schema/src/compiler.ts
+++ b/packages/json-schema/src/compiler.ts
@@ -9,11 +9,12 @@ import {
 import { IGeneralFieldState } from '@formily/core'
 import { untracked, hasCollected } from '@formily/reactive'
 import {
+  traverse,
+  traverseSchema,
   isNoNeedCompileObject,
   hasOwnProperty,
   patchStateFormSchema,
 } from './shared'
-import { traverse, traverseSchema } from './traverse'
 import { ISchema } from './types'
 
 const ExpRE = /^\s*\{\{([\s\S]*)\}\}\s*$/
@@ -62,7 +63,7 @@ export const compile = <Source = any, Scope = any>(
   source: Source,
   scope?: Scope
 ): any => {
-  const seenObjects = new WeakSet()
+  const seenObjects = []
   const compile = (source: any) => {
     if (isStr(source)) {
       return shallowCompile(source, scope)
@@ -70,10 +71,12 @@ export const compile = <Source = any, Scope = any>(
       return source.map((value: any) => compile(value))
     } else if (isPlainObj(source)) {
       if (isNoNeedCompileObject(source)) return source
-      if (seenObjects.has(source)) {
+      const seenIndex = seenObjects.indexOf(source)
+      if (seenIndex > -1) {
         return source
       }
-      seenObjects.add(source)
+      const addIndex = seenObjects.length
+      seenObjects.push(source)
       const results = reduce(
         source,
         (buf, value, key) => {
@@ -82,7 +85,7 @@ export const compile = <Source = any, Scope = any>(
         },
         {}
       )
-      seenObjects.delete(source)
+      seenObjects.splice(addIndex, 1)
       return results
     }
     return source
diff --git a/packages/json-schema/src/schema.ts b/packages/json-schema/src/schema.ts
index 8dfb1cdf6ad..04ad5136dea 100644
--- a/packages/json-schema/src/schema.ts
+++ b/packages/json-schema/src/schema.ts
@@ -21,7 +21,7 @@ import {
   registerVoidComponents,
   registerTypeDefaultComponents,
 } from './polyfills'
-import { SchemaNestedKeys } from './shared'
+import { SchemaNestedMap } from './shared'
 
 export class Schema<
   Decorator = any,
@@ -467,7 +467,7 @@ export class Schema<
     each(this, (value, key) => {
       if (isFn(value) && !key.includes('x-')) return
       if (key === 'parent' || key === 'root') return
-      if (!SchemaNestedKeys[key]) {
+      if (!SchemaNestedMap[key]) {
         schema[key] = value ? compile(value, scope) : value
       } else {
         schema[key] = value ? shallowCompile(value, scope) : value
diff --git a/packages/json-schema/src/shared.ts b/packages/json-schema/src/shared.ts
index 2e8fb87c778..99b14306c19 100644
--- a/packages/json-schema/src/shared.ts
+++ b/packages/json-schema/src/shared.ts
@@ -1,12 +1,11 @@
-import { isFn, isArr, toArr, FormPath } from '@formily/shared'
+import { isFn, each, isPlainObj, isArr, toArr, FormPath } from '@formily/shared'
 import { isObservable, untracked } from '@formily/reactive'
 import { Schema } from './schema'
+import { ISchema } from './types'
 
 const REVA_ACTIONS_KEY = Symbol.for('__REVA_ACTIONS')
 
-export const hasOwnProperty = Object.prototype.hasOwnProperty
-
-export const SchemaNestedKeys = {
+export const SchemaNestedMap = {
   parent: true,
   root: true,
   properties: true,
@@ -43,7 +42,7 @@ export const SchemaStateMap = {
   'x-component-props': 'componentProps',
 }
 
-export const SchemaValidatorKeys = {
+export const SchemaValidatorMap = {
   required: true,
   format: true,
   maxItems: true,
@@ -62,6 +61,59 @@ export const SchemaValidatorKeys = {
   uniqueItems: true,
 }
 
+export const SchemaNormalKeys = Object.keys(SchemaStateMap)
+
+export const SchemaValidatorKeys = Object.keys(SchemaValidatorMap)
+
+export const hasOwnProperty = Object.prototype.hasOwnProperty
+
+export const traverse = (
+  target: any,
+  visitor: (value: any, path: Array<string | number>) => void,
+  filter?: (value: any, path: Array<string | number>) => boolean
+) => {
+  const seenObjects = []
+  const root = target
+  const traverse = (target: any, path = []) => {
+    if (filter?.(target, path) === false) return
+
+    if (isPlainObj(target)) {
+      const seenIndex = seenObjects.indexOf(target)
+      if (seenIndex > -1) {
+        return
+      }
+      const addIndex = seenObjects.length
+      seenObjects.push(target)
+      if (isNoNeedCompileObject(target) && root !== target) {
+        visitor(target, path)
+        return
+      }
+      each(target, (value, key) => {
+        traverse(value, path.concat(key))
+      })
+      seenObjects.splice(addIndex, 1)
+    } else {
+      visitor(target, path)
+    }
+  }
+  traverse(target)
+}
+
+export const traverseSchema = (
+  schema: ISchema,
+  visitor: (value: any, path: any[]) => void
+) => {
+  if (schema['x-validator'] !== undefined) {
+    visitor(schema['x-validator'], ['x-validator'])
+  }
+  traverse(schema, visitor, (value, path) => {
+    if (path[0] === 'x-validator') return false
+    if (String(path[0]).indexOf('x-') == -1 && isFn(value)) return false
+    if (SchemaNestedMap[path[0]]) return false
+    return true
+  })
+}
+
 export const isNoNeedCompileObject = (source: any) => {
   if ('$$typeof' in source && '_owner' in source) {
     return true
@@ -118,7 +170,7 @@ export const patchStateFormSchema = (
         isEnum ? createDataSource(compiled) : compiled
       )
     } else {
-      const isValidatorKey = SchemaValidatorKeys[key]
+      const isValidatorKey = SchemaValidatorMap[key]
       if (isValidatorKey) {
         targetState['setValidatorRule'](key, compiled)
       }
diff --git a/packages/json-schema/src/traverse.ts b/packages/json-schema/src/traverse.ts
deleted file mode 100644
index a5ac80a108f..00000000000
--- a/packages/json-schema/src/traverse.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { each, isFn, isPlainObj } from '@formily/shared'
-import { isNoNeedCompileObject, SchemaNestedKeys } from './shared'
-import { ISchema } from './types'
-
-export const traverse = (
-  target: any,
-  visitor: (value: any, path: Array<string | number>, address: string) => void,
-  filter?: (value: any, path: Array<string | number>) => boolean
-) => {
-  const seenObjects = new WeakSet()
-  const root = target
-  const traverse = (target: any, path = [], address = '') => {
-    if (filter?.(target, path) === false) return
-
-    if (isPlainObj(target)) {
-      if (seenObjects.has(target)) {
-        return
-      }
-      seenObjects.add(target)
-      if (isNoNeedCompileObject(target) && root !== target) {
-        visitor(target, path, address)
-        return
-      }
-      each(target, (value, key) => {
-        traverse(value, path.concat(key), address + '.' + key)
-      })
-      seenObjects.delete(target)
-    } else {
-      visitor(target, path, address)
-    }
-  }
-  traverse(target)
-}
-
-export const traverseSchema = (
-  schema: ISchema,
-  visitor: (value: any, path: any[]) => void
-) => {
-  traverse(schema, visitor, (value, path) => {
-    if (String(path[0]).indexOf('x-') == -1 && isFn(value)) return false
-    if (SchemaNestedKeys[path[0]]) return false
-    return true
-  })
-}
diff --git a/packages/next/package.json b/packages/next/package.json
index 21869eb31a2..13ec887350e 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/next",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "umd:main": "dist/formily.next.umd.production.js",
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/json-schema": "2.0.0-rc.7",
-    "@formily/react": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/json-schema": "2.0.0-rc.11",
+    "@formily/react": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-react": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
     "@juggle/resize-observer": "^3.3.1",
     "classnames": "^2.2.6",
     "react-sortable-hoc": "^1.11.0",
diff --git a/packages/next/src/form-dialog/index.tsx b/packages/next/src/form-dialog/index.tsx
index de39300a0c0..9bab62e06f6 100644
--- a/packages/next/src/form-dialog/index.tsx
+++ b/packages/next/src/form-dialog/index.tsx
@@ -52,8 +52,8 @@ export interface IDialogProps extends DialogProps {
 
 export interface IFormDialog {
   forOpen(middleware: IMiddleware<IFormProps>): IFormDialog
-  forConfirm(middleware: IMiddleware<IFormProps>): IFormDialog
-  forCancel(middleware: IMiddleware<IFormProps>): IFormDialog
+  forConfirm(middleware: IMiddleware<Form>): IFormDialog
+  forCancel(middleware: IMiddleware<Form>): IFormDialog
   open(props?: IFormProps): Promise<any>
   close(): void
 }
diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
index c1d6f4155e6..50ea8f4f198 100644
--- a/packages/next/src/form-item/index.tsx
+++ b/packages/next/src/form-item/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import cls from 'classnames'
 import { usePrefixCls, pickDataProps } from '../__builtins__'
 import { isVoidField } from '@formily/core'
@@ -91,7 +91,7 @@ function useOverflow<
   const containerRef = useRef<Container>()
   const contentRef = useRef<Content>()
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (containerRef.current && contentRef.current) {
       const contentWidth = contentRef.current.getBoundingClientRect().width
       const containerWidth = containerRef.current.getBoundingClientRect().width
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 570ea56b6d1..63a4926e82d 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -29,7 +29,6 @@ export * from './time-picker'
 export * from './number-picker'
 export * from './switch'
 export * from './upload'
-export * from './preview-text'
 export * from './submit'
 export * from './reset'
 export * from './editable'
diff --git a/packages/path/package.json b/packages/path/package.json
index 009ff77f935..0ca533ff683 100644
--- a/packages/path/package.json
+++ b/packages/path/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/path",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
diff --git a/packages/path/src/index.ts b/packages/path/src/index.ts
index 822d06a3f8b..1623128e60e 100644
--- a/packages/path/src/index.ts
+++ b/packages/path/src/index.ts
@@ -8,10 +8,9 @@ import {
   existInByDestructor,
 } from './destructor'
 import { Segments, Node, Pattern } from './types'
-import { LRUMap } from './lru'
 import { Matcher } from './matcher'
 
-const pathCache = new LRUMap(10000)
+const pathCache = new Map()
 
 const isMatcher = Symbol('PATH_MATCHER')
 
@@ -248,8 +247,8 @@ export class Path {
     this.isRegExp = isRegExp
     this.haveExcludePattern = haveExcludePattern
     this.tree = tree as Node
-    this.matchCache = new LRUMap(200)
-    this.includesCache = new LRUMap(200)
+    this.matchCache = new Map()
+    this.includesCache = new Map()
   }
 
   toString() {
diff --git a/packages/path/src/lru.ts b/packages/path/src/lru.ts
deleted file mode 100644
index ac27f0fe373..00000000000
--- a/packages/path/src/lru.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-/* istanbul ignore file */
-/**
- * A doubly linked list-based Least Recently Used (LRU) cache. Will keep most
- * recently used items while discarding least recently used items when its limit
- * is reached.
- *
- * Licensed under MIT. Copyright (c) 2010 Rasmus Andersson <http://hunch.se/>
- * See README.md for details.
- *
- * Illustration of the design:
- *
- *       entry             entry             entry             entry
- *       ______            ______            ______            ______
- *      | head |.newer => |      |.newer => |      |.newer => | tail |
- *      |  A   |          |  B   |          |  C   |          |  D   |
- *      |______| <= older.|______| <= older.|______| <= older.|______|
- *
- *  removed  <--  <--  <--  <--  <--  <--  <--  <--  <--  <--  <--  added
- */
-/* eslint-disable */
-
-const NEWER = Symbol('newer')
-const OLDER = Symbol('older')
-
-export function LRUMap(limit: number, entries?: any) {
-  if (typeof limit !== 'number') {
-    // called as (entries)
-    entries = limit
-    limit = 0
-  }
-
-  this.size = 0
-  this.limit = limit
-  this.oldest = this.newest = undefined
-  this._keymap = new Map()
-
-  if (entries) {
-    this.assign(entries)
-    if (limit < 1) {
-      this.limit = this.size
-    }
-  }
-}
-
-function Entry(key: any, value: any) {
-  this.key = key
-  this.value = value
-  this[NEWER] = undefined
-  this[OLDER] = undefined
-}
-
-LRUMap.prototype._markEntryAsUsed = function (entry: any) {
-  if (entry === this.newest) {
-    // Already the most recenlty used entry, so no need to update the list
-    return
-  }
-  // HEAD--------------TAIL
-  //   <.older   .newer>
-  //  <--- add direction --
-  //   A  B  C  <D>  E
-  if (entry[NEWER]) {
-    if (entry === this.oldest) {
-      this.oldest = entry[NEWER]
-    }
-    entry[NEWER][OLDER] = entry[OLDER] // C <-- E.
-  }
-  if (entry[OLDER]) {
-    entry[OLDER][NEWER] = entry[NEWER] // C. --> E
-  }
-  entry[NEWER] = undefined // D --x
-  entry[OLDER] = this.newest // D. --> E
-  if (this.newest) {
-    this.newest[NEWER] = entry // E. <-- D
-  }
-  this.newest = entry
-}
-
-LRUMap.prototype.assign = function (entries: any) {
-  let entry: any
-  let limit = this.limit || Number.MAX_VALUE
-  this._keymap.clear()
-  const it = entries[Symbol.iterator]()
-  for (let itv = it.next(); !itv.done; itv = it.next()) {
-    const e = new Entry(itv.value[0], itv.value[1])
-    this._keymap.set(e.key, e)
-    if (!entry) {
-      this.oldest = e
-    } else {
-      entry[NEWER] = e
-      e[OLDER] = entry
-    }
-    entry = e
-    if (limit-- === 0) {
-      throw new Error('overflow')
-    }
-  }
-  this.newest = entry
-  this.size = this._keymap.size
-}
-
-LRUMap.prototype.get = function (key: any) {
-  // First, find our cache entry
-  const entry = this._keymap.get(key)
-  if (!entry) {
-    return
-  } // Not cached. Sorry.
-  // As <key> was found in the cache, register it as being requested recently
-  this._markEntryAsUsed(entry)
-  return entry.value
-}
-
-LRUMap.prototype.set = function (key: any, value: any) {
-  let entry = this._keymap.get(key)
-
-  if (entry) {
-    // update existing
-    entry.value = value
-    this._markEntryAsUsed(entry)
-    return this
-  }
-
-  // new entry
-  this._keymap.set(key, (entry = new Entry(key, value)))
-
-  if (this.newest) {
-    // link previous tail to the new tail (entry)
-    this.newest[NEWER] = entry
-    entry[OLDER] = this.newest
-  } else {
-    // we're first in -- yay
-    this.oldest = entry
-  }
-
-  // add new entry to the end of the linked list -- it's now the freshest entry.
-  this.newest = entry
-  ++this.size
-  if (this.size > this.limit) {
-    // we hit the limit -- remove the head
-    this.shift()
-  }
-
-  return this
-}
-
-LRUMap.prototype.shift = function () {
-  // todo: handle special case when limit == 1
-  const entry = this.oldest
-  if (entry) {
-    if (this.oldest[NEWER]) {
-      // advance the list
-      this.oldest = this.oldest[NEWER]
-      this.oldest[OLDER] = undefined
-    } else {
-      // the cache is exhausted
-      this.oldest = undefined
-      this.newest = undefined
-    }
-    // Remove last strong reference to <entry> and remove links from the purged
-    // entry being returned:
-    entry[NEWER] = entry[OLDER] = undefined
-    this._keymap.delete(entry.key)
-    --this.size
-    return [entry.key, entry.value]
-  }
-}
-
-// ----------------------------------------------------------------------------
-// Following code is optional and can be removed without breaking the core
-// functionality.
-
-LRUMap.prototype.find = function (key: any) {
-  const e = this._keymap.get(key)
-  return e ? e.value : undefined
-}
-
-LRUMap.prototype.has = function (key: any) {
-  return this._keymap.has(key)
-}
-
-LRUMap.prototype.delete = function (key: any) {
-  const entry = this._keymap.get(key)
-  if (!entry) {
-    return
-  }
-  this._keymap.delete(entry.key)
-  if (entry[NEWER] && entry[OLDER]) {
-    // relink the older entry with the newer entry
-    entry[OLDER][NEWER] = entry[NEWER]
-    entry[NEWER][OLDER] = entry[OLDER]
-  } else if (entry[NEWER]) {
-    // remove the link to us
-    entry[NEWER][OLDER] = undefined
-    // link the newer entry to head
-    this.oldest = entry[NEWER]
-  } else if (entry[OLDER]) {
-    // remove the link to us
-    entry[OLDER][NEWER] = undefined
-    // link the newer entry to head
-    this.newest = entry[OLDER]
-  } else {
-    // if(entry[OLDER] === undefined && entry.newer === undefined) {
-    this.oldest = this.newest = undefined
-  }
-
-  this.size--
-  return entry.value
-}
-
-LRUMap.prototype.clear = function () {
-  // Not clearing links should be safe, as we don't expose live links to user
-  this.oldest = this.newest = undefined
-  this.size = 0
-  this._keymap.clear()
-}
-
-function EntryIterator(oldestEntry: any) {
-  this.entry = oldestEntry
-}
-EntryIterator.prototype[Symbol.iterator] = function () {
-  return this
-}
-EntryIterator.prototype.next = function () {
-  const ent = this.entry
-  if (ent) {
-    this.entry = ent[NEWER]
-    return { done: false, value: [ent.key, ent.value] }
-  } else {
-    return { done: true, value: undefined }
-  }
-}
-
-function KeyIterator(oldestEntry) {
-  this.entry = oldestEntry
-}
-KeyIterator.prototype[Symbol.iterator] = function () {
-  return this
-}
-KeyIterator.prototype.next = function () {
-  const ent = this.entry
-  if (ent) {
-    this.entry = ent[NEWER]
-    return { done: false, value: ent.key }
-  } else {
-    return { done: true, value: undefined }
-  }
-}
-
-function ValueIterator(oldestEntry) {
-  this.entry = oldestEntry
-}
-ValueIterator.prototype[Symbol.iterator] = function () {
-  return this
-}
-ValueIterator.prototype.next = function () {
-  const ent = this.entry
-  if (ent) {
-    this.entry = ent[NEWER]
-    return { done: false, value: ent.value }
-  } else {
-    return { done: true, value: undefined }
-  }
-}
-
-LRUMap.prototype.keys = function () {
-  return new KeyIterator(this.oldest)
-}
-
-LRUMap.prototype.values = function () {
-  return new ValueIterator(this.oldest)
-}
-
-LRUMap.prototype.entries = function () {
-  return this
-}
-
-LRUMap.prototype[Symbol.iterator] = function () {
-  return new EntryIterator(this.oldest)
-}
-
-LRUMap.prototype.forEach = function (
-  fun: (value: any, key: any, ctx: object) => void,
-  thisObj: any
-) {
-  if (typeof thisObj !== 'object') {
-    thisObj = this
-  }
-  let entry = this.oldest
-  while (entry) {
-    fun.call(thisObj, entry.value, entry.key, this)
-    entry = entry[NEWER]
-  }
-}
-
-/** Returns a JSON (array) representation */
-LRUMap.prototype.toJSON = function () {
-  const s = new Array(this.size)
-  let i = 0
-  let entry = this.oldest
-  while (entry) {
-    s[i++] = { key: entry.key, value: entry.value }
-    entry = entry[NEWER]
-  }
-  return s
-}
-
-/** Returns a String representation */
-LRUMap.prototype.toString = function () {
-  let s = ''
-  let entry = this.oldest
-  while (entry) {
-    s += String(entry.key) + ':' + entry.value
-    entry = entry[NEWER]
-    if (entry) {
-      s += ' < '
-    }
-  }
-  return s
-}
diff --git a/packages/react/docs/api/hooks/useField.md b/packages/react/docs/api/hooks/useField.md
index eb26ff5dd89..b020bd84870 100644
--- a/packages/react/docs/api/hooks/useField.md
+++ b/packages/react/docs/api/hooks/useField.md
@@ -36,7 +36,7 @@ const FormItem = observer(({ children }) => {
   return (
     <Form.Item
       label={field.title}
-      help={field.errors?.length ? field.errors : undefined}
+      help={field.selfErrors?.length ? field.selfErrors : undefined}
       extra={field.description}
       validateStatus={field.validateStatus}
     >
diff --git a/packages/react/docs/api/hooks/useField.zh-CN.md b/packages/react/docs/api/hooks/useField.zh-CN.md
index 0b48c82ee38..dd307d0f204 100644
--- a/packages/react/docs/api/hooks/useField.zh-CN.md
+++ b/packages/react/docs/api/hooks/useField.zh-CN.md
@@ -36,7 +36,7 @@ const FormItem = observer(({ children }) => {
   return (
     <Form.Item
       label={field.title}
-      help={field.errors?.length ? field.errors : undefined}
+      help={field.selfErrors?.length ? field.selfErrors : undefined}
       extra={field.description}
       validateStatus={field.validateStatus}
     >
diff --git a/packages/react/docs/api/shared/connect.md b/packages/react/docs/api/shared/connect.md
index e3b6ad50022..e49a3c30556 100644
--- a/packages/react/docs/api/shared/connect.md
+++ b/packages/react/docs/api/shared/connect.md
@@ -44,7 +44,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/api/shared/connect.zh-CN.md b/packages/react/docs/api/shared/connect.zh-CN.md
index 27214680931..0b74837a4cd 100644
--- a/packages/react/docs/api/shared/connect.zh-CN.md
+++ b/packages/react/docs/api/shared/connect.zh-CN.md
@@ -44,7 +44,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/api/shared/mapProps.md b/packages/react/docs/api/shared/mapProps.md
index e10f59ed0d4..1cfc862fa2b 100644
--- a/packages/react/docs/api/shared/mapProps.md
+++ b/packages/react/docs/api/shared/mapProps.md
@@ -49,7 +49,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/api/shared/mapProps.zh-CN.md b/packages/react/docs/api/shared/mapProps.zh-CN.md
index 19dcee9e233..2df2db18099 100644
--- a/packages/react/docs/api/shared/mapProps.zh-CN.md
+++ b/packages/react/docs/api/shared/mapProps.zh-CN.md
@@ -49,7 +49,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/api/shared/mapReadPretty.md b/packages/react/docs/api/shared/mapReadPretty.md
index 5f7f17c096d..8736fdc2ddd 100644
--- a/packages/react/docs/api/shared/mapReadPretty.md
+++ b/packages/react/docs/api/shared/mapReadPretty.md
@@ -39,7 +39,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/api/shared/mapReadPretty.zh-CN.md b/packages/react/docs/api/shared/mapReadPretty.zh-CN.md
index 15a5c53e2de..a3484dd42e8 100644
--- a/packages/react/docs/api/shared/mapReadPretty.zh-CN.md
+++ b/packages/react/docs/api/shared/mapReadPretty.zh-CN.md
@@ -39,7 +39,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/react/docs/index.md b/packages/react/docs/index.md
index c525c2e1afa..5e835d09787 100644
--- a/packages/react/docs/index.md
+++ b/packages/react/docs/index.md
@@ -61,7 +61,7 @@ const FormItem = observer(({ children }) => {
   return (
     <Form.Item
       label={field.title}
-      help={field.errors?.length ? field.errors : undefined}
+      help={field.selfErrors?.length ? field.selfErrors : undefined}
       extra={field.description}
       validateStatus={field.validateStatus}
     >
@@ -86,9 +86,9 @@ export default () => {
       field.value &&
       form.values[equalName] !== field.value
     ) {
-      field.errors = ['Password does not match Confirm Password.']
+      field.selfErrors = ['Password does not match Confirm Password.']
     } else {
-      field.errors = []
+      field.selfErrors = []
     }
   }
 
diff --git a/packages/react/docs/index.zh-CN.md b/packages/react/docs/index.zh-CN.md
index a8a58cae6e1..a1d4e22875d 100644
--- a/packages/react/docs/index.zh-CN.md
+++ b/packages/react/docs/index.zh-CN.md
@@ -61,7 +61,7 @@ const FormItem = observer(({ children }) => {
   return (
     <Form.Item
       label={field.title}
-      help={field.errors?.length ? field.errors : undefined}
+      help={field.selfErrors?.length ? field.selfErrors : undefined}
       extra={field.description}
       validateStatus={field.validateStatus}
     >
@@ -86,9 +86,9 @@ export default () => {
       field.value &&
       form.values[equalName] !== field.value
     ) {
-      field.errors = ['Password does not match Confirm Password.']
+      field.selfErrors = ['Password does not match Confirm Password.']
     } else {
-      field.errors = []
+      field.selfErrors = []
     }
   }
 
diff --git a/packages/react/package.json b/packages/react/package.json
index 7fd2402cdb2..8a6666badaf 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/react",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -40,12 +40,12 @@
     "dumi": "^1.1.0-rc.8"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/json-schema": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-react": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
-    "@formily/validator": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/json-schema": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-react": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
+    "@formily/validator": "2.0.0-rc.11",
     "hoist-non-react-statics": "^3.3.2"
   },
   "publishConfig": {
diff --git a/packages/react/src/__tests__/schema.markup.spec.tsx b/packages/react/src/__tests__/schema.markup.spec.tsx
index 2c328aef023..9a9de289c2d 100644
--- a/packages/react/src/__tests__/schema.markup.spec.tsx
+++ b/packages/react/src/__tests__/schema.markup.spec.tsx
@@ -769,3 +769,36 @@ test('nested update component props with x-reactions', async () => {
     expect(queryByText('10')).not.toBeNull()
   })
 })
+
+test('schema x-validator/required', async () => {
+  const form = createForm({
+    values: {
+      aaa: 'xxx',
+    },
+  })
+  const SchemaField = createSchemaField({
+    components: {
+      Input: () => <div></div>,
+    },
+  })
+
+  render(
+    <FormProvider form={form}>
+      <SchemaField>
+        <SchemaField.String
+          name="input"
+          required
+          x-validator="email"
+          x-component="Input"
+        />
+      </SchemaField>
+    </FormProvider>
+  )
+  await waitFor(() => {
+    expect(form.query('input').get('required')).toBeTruthy()
+    expect(form.query('input').get('validator')).toEqual([
+      { required: true },
+      'email',
+    ])
+  })
+})
diff --git a/packages/reactive-react/package.json b/packages/reactive-react/package.json
index 8fbea1fefa3..e31168981b0 100644
--- a/packages/reactive-react/package.json
+++ b/packages/reactive-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/reactive-react",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -39,7 +39,7 @@
     "dumi": "^1.1.0-rc.8"
   },
   "dependencies": {
-    "@formily/reactive": "2.0.0-rc.7",
+    "@formily/reactive": "2.0.0-rc.11",
     "hoist-non-react-statics": "^3.3.2"
   },
   "publishConfig": {
diff --git a/packages/reactive-test-cases-for-react18/package.json b/packages/reactive-test-cases-for-react18/package.json
index 465085644e0..f03fe176f76 100644
--- a/packages/reactive-test-cases-for-react18/package.json
+++ b/packages/reactive-test-cases-for-react18/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/reactive-test-cases-for-react18",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "private": true,
   "repository": {
@@ -36,8 +36,8 @@
     "react-is": "next"
   },
   "dependencies": {
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-react": "2.0.0-rc.7",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-react": "2.0.0-rc.11",
     "react": "next",
     "react-dom": "next",
     "react-is": "next"
diff --git a/packages/reactive-vue/package.json b/packages/reactive-vue/package.json
index 585e0740feb..668241f9306 100644
--- a/packages/reactive-vue/package.json
+++ b/packages/reactive-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/reactive-vue",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -33,7 +33,7 @@
     "vue": "^2.6.12"
   },
   "dependencies": {
-    "@formily/reactive": "2.0.0-rc.7",
+    "@formily/reactive": "2.0.0-rc.11",
     "vue-demi": "^0.9.0"
   },
   "peerDependencies": {
diff --git a/packages/reactive/package.json b/packages/reactive/package.json
index a4e0adb3902..0ecdc9f1e80 100644
--- a/packages/reactive/package.json
+++ b/packages/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/reactive",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
diff --git a/packages/reactive/src/__tests__/array.spec.ts b/packages/reactive/src/__tests__/array.spec.ts
index 341e6654c77..cc48692a963 100644
--- a/packages/reactive/src/__tests__/array.spec.ts
+++ b/packages/reactive/src/__tests__/array.spec.ts
@@ -1,4 +1,4 @@
-import { toArray } from '../array'
+import { toArray, ArraySet } from '../array'
 
 test('toArray', () => {
   expect(toArray([])).toEqual([])
@@ -6,3 +6,12 @@ test('toArray', () => {
   expect(toArray(undefined)).toEqual([])
   expect(toArray(0)).toEqual([0])
 })
+
+test('ArraySet', () => {
+  const set = new ArraySet()
+  set.add(11)
+  set.add(11)
+  expect(set.value).toEqual([11])
+  set.clear()
+  expect(set.value).toEqual([])
+})
diff --git a/packages/reactive/src/__tests__/test.spec.ts b/packages/reactive/src/__tests__/hasCollected.spec.ts
similarity index 100%
rename from packages/reactive/src/__tests__/test.spec.ts
rename to packages/reactive/src/__tests__/hasCollected.spec.ts
diff --git a/packages/reactive/src/__tests__/observable.spec.ts b/packages/reactive/src/__tests__/observable.spec.ts
new file mode 100644
index 00000000000..eebbd8031c9
--- /dev/null
+++ b/packages/reactive/src/__tests__/observable.spec.ts
@@ -0,0 +1,7 @@
+import { observable } from '../'
+
+test('array mutation', () => {
+  const arr = observable([1, 2, 3, 4])
+  arr.splice(2, 1)
+  expect(arr).toEqual([1, 2, 4])
+})
diff --git a/packages/reactive/src/array.ts b/packages/reactive/src/array.ts
index 8602c0fbd6a..a239ddf287c 100644
--- a/packages/reactive/src/array.ts
+++ b/packages/reactive/src/array.ts
@@ -1,12 +1,3 @@
-export const concat = (array: any[], target: any) => {
-  const arr = []
-  for (let i = 0; i < array.length; i++) {
-    arr.push(array[i])
-  }
-  arr.push(target)
-  return arr
-}
-
 export const toArray = (value: any) => {
   return Array.isArray(value)
     ? value
@@ -14,3 +5,46 @@ export const toArray = (value: any) => {
     ? [value]
     : []
 }
+
+export class ArraySet<T> {
+  value: T[]
+  constructor(value: T[] = []) {
+    this.value = value
+  }
+
+  add(item: T) {
+    if (!this.has(item)) {
+      this.value.push(item)
+    }
+  }
+
+  has(item: T) {
+    return this.value.indexOf(item) > -1
+  }
+
+  delete(item: T) {
+    const index = this.value.indexOf(item)
+    if (index > -1) {
+      this.value.splice(index, 1)
+    }
+  }
+
+  forEach(callback: (value: T) => void) {
+    for (let index = 0; index < this.value.length; index++) {
+      callback(this.value[index])
+    }
+  }
+
+  forEachDelete(callback: (value: T) => void) {
+    for (let index = 0; index < this.value.length; index++) {
+      const item = this.value[index]
+      this.value.splice(index, 1)
+      callback(item)
+      index--
+    }
+  }
+
+  clear() {
+    this.value.length = 0
+  }
+}
diff --git a/packages/reactive/src/datatree.ts b/packages/reactive/src/datatree.ts
index 173473e3cae..d0492bdb493 100644
--- a/packages/reactive/src/datatree.ts
+++ b/packages/reactive/src/datatree.ts
@@ -1,6 +1,5 @@
 import { ProxyRaw, RawNode } from './environment'
 import { ObservablePath, PropertyKey, IOperation } from './types'
-import { concat } from './array'
 
 export class DataChange {
   path: ObservablePath
@@ -13,7 +12,7 @@ export class DataChange {
     this.type = operation.type
     this.value = operation.value
     this.oldValue = operation.oldValue
-    this.path = concat(node.path, operation.key)
+    this.path = node.path.concat(operation.key)
   }
 }
 export class DataNode {
@@ -31,7 +30,7 @@ export class DataNode {
 
   get path() {
     if (!this.parent) return this.key ? [this.key] : []
-    return concat(this.parent.path, this.key)
+    return this.parent.path.concat(this.key)
   }
 
   get targetRaw() {
diff --git a/packages/reactive/src/environment.ts b/packages/reactive/src/environment.ts
index 2d196ec4185..813d4265bdf 100644
--- a/packages/reactive/src/environment.ts
+++ b/packages/reactive/src/environment.ts
@@ -1,4 +1,5 @@
 import { ObservableListener, Reaction, ReactionsMap } from './types'
+import { ArraySet } from './array'
 import { DataNode } from './datatree'
 
 export const ProxyRaw = new WeakMap()
@@ -12,7 +13,7 @@ export const BatchCount = { value: 0 }
 export const UntrackCount = { value: 0 }
 export const BatchScope = { value: false }
 export const DependencyCollected = { value: false }
-export const PendingReactions = new Set<Reaction>()
-export const PendingScopeReactions = new Set<Reaction>()
+export const PendingReactions = new ArraySet<Reaction>()
+export const PendingScopeReactions = new ArraySet<Reaction>()
 export const MakeObservableSymbol = Symbol('MakeObservableSymbol')
-export const ObserverListeners = new Set<ObservableListener>()
+export const ObserverListeners = new ArraySet<ObservableListener>()
diff --git a/packages/reactive/src/handlers.ts b/packages/reactive/src/handlers.ts
index 477fe3a3059..991478c2bfc 100644
--- a/packages/reactive/src/handlers.ts
+++ b/packages/reactive/src/handlers.ts
@@ -191,8 +191,9 @@ export const baseHandlers: ProxyHandler<any> = {
     return result
   },
   ownKeys(target) {
+    const keys = Reflect.ownKeys(target)
     bindTargetKeyWithCurrentReaction({ target, type: 'iterate' })
-    return Reflect.ownKeys(target)
+    return keys
   },
   set(target, key, value, receiver) {
     const hadKey = hasOwnProperty.call(target, key)
@@ -221,14 +222,14 @@ export const baseHandlers: ProxyHandler<any> = {
     return true
   },
   deleteProperty(target, key) {
-    const res = Reflect.deleteProperty(target, key)
     const oldValue = target[key]
+    delete target[key]
     runReactionsFromTargetKey({
       target,
       key,
       oldValue,
       type: 'delete',
     })
-    return res
+    return true
   },
 }
diff --git a/packages/reactive/src/reaction.ts b/packages/reactive/src/reaction.ts
index 32d3575a981..b888b625f49 100644
--- a/packages/reactive/src/reaction.ts
+++ b/packages/reactive/src/reaction.ts
@@ -1,4 +1,5 @@
 import { isFn } from './checkers'
+import { ArraySet } from './array'
 import { IOperation, ReactionsMap, Reaction, PropertyKey } from './types'
 import {
   ReactionStack,
@@ -25,11 +26,13 @@ const addRawReactionsMap = (
     if (reactions) {
       reactions.add(reaction)
     } else {
-      reactionsMap.set(key, new Set([reaction]))
+      reactionsMap.set(key, new ArraySet([reaction]))
     }
     return reactionsMap
   } else {
-    const reactionsMap: ReactionsMap = new Map([[key, new Set([reaction])]])
+    const reactionsMap: ReactionsMap = new Map([
+      [key, new ArraySet([reaction])],
+    ])
     RawReactionsMap.set(target, reactionsMap)
     return reactionsMap
   }
@@ -43,7 +46,7 @@ const addReactionsMapToReaction = (
   if (bindSet) {
     bindSet.add(reactionsMap)
   } else {
-    reaction._reactionsSet = new Set([reactionsMap])
+    reaction._reactionsSet = new ArraySet([reactionsMap])
   }
   return bindSet
 }
@@ -113,7 +116,7 @@ export const bindComputedReactions = (reaction: Reaction) => {
       if (computes) {
         computes.add(reaction)
       } else {
-        current._computesSet = new Set([reaction])
+        current._computesSet = new ArraySet([reaction])
       }
     }
   }
@@ -191,8 +194,7 @@ export const batchScopeEnd = () => {
   const prevUntrackCount = UntrackCount.value
   BatchScope.value = false
   UntrackCount.value = 0
-  PendingScopeReactions.forEach((reaction) => {
-    PendingScopeReactions.delete(reaction)
+  PendingScopeReactions.forEachDelete((reaction) => {
     if (isFn(reaction._scheduler)) {
       reaction._scheduler(reaction)
     } else {
@@ -217,8 +219,7 @@ export const isScopeBatching = () => BatchScope.value
 export const isUntracking = () => UntrackCount.value > 0
 
 export const executePendingReactions = () => {
-  PendingReactions.forEach((reaction) => {
-    PendingReactions.delete(reaction)
+  PendingReactions.forEachDelete((reaction) => {
     if (isFn(reaction._scheduler)) {
       reaction._scheduler(reaction)
     } else {
diff --git a/packages/reactive/src/types.ts b/packages/reactive/src/types.ts
index 027a6f39aff..65a749a6a2f 100644
--- a/packages/reactive/src/types.ts
+++ b/packages/reactive/src/types.ts
@@ -1,3 +1,5 @@
+import { ArraySet } from './array'
+
 export * from './datatree'
 
 export type PropertyKey = string | number | symbol
@@ -66,8 +68,8 @@ export type Reaction = ((...args: any[]) => any) & {
   _context?: any
   _disposed?: boolean
   _property?: PropertyKey
-  _computesSet?: Set<Reaction>
-  _reactionsSet?: Set<ReactionsMap>
+  _computesSet?: ArraySet<Reaction>
+  _reactionsSet?: ArraySet<ReactionsMap>
   _scheduler?: (reaction: Reaction) => void
   _memos?: {
     queue: IMemoQueueItem[]
@@ -79,7 +81,7 @@ export type Reaction = ((...args: any[]) => any) & {
   }
 }
 
-export type ReactionsMap = Map<PropertyKey, Set<Reaction>>
+export type ReactionsMap = Map<PropertyKey, ArraySet<Reaction>>
 
 export interface IReactionOptions<T> {
   name?: string
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 8b7d475ae7d..22b25e41c7f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/shared",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -31,7 +31,7 @@
     "build:umd": "rollup --config"
   },
   "dependencies": {
-    "@formily/path": "2.0.0-rc.7",
+    "@formily/path": "2.0.0-rc.11",
     "camel-case": "^4.1.1",
     "lower-case": "^2.0.1",
     "no-case": "^3.0.4",
diff --git a/packages/validator/package.json b/packages/validator/package.json
index ffe4e7844ea..99cc0e45f3c 100644
--- a/packages/validator/package.json
+++ b/packages/validator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/validator",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -27,7 +27,7 @@
     "build:umd": "rollup --config"
   },
   "dependencies": {
-    "@formily/shared": "2.0.0-rc.7"
+    "@formily/shared": "2.0.0-rc.11"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/vue/docs/.vuepress/components/createCodeSandBox.js b/packages/vue/docs/.vuepress/components/createCodeSandBox.js
new file mode 100644
index 00000000000..4d0519eae47
--- /dev/null
+++ b/packages/vue/docs/.vuepress/components/createCodeSandBox.js
@@ -0,0 +1,112 @@
+import { getParameters } from 'codesandbox/lib/api/define'
+
+const CodeSandBoxHTML = '<div id="app"></div>'
+const CodeSandBoxJS = `
+import Vue from 'vue'
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+import App from './App.vue'
+
+Vue.config.productionTip = false;
+
+Vue.use(Antd);
+
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')`
+
+const createForm = ({ method, action, data }) => {
+  const form = document.createElement('form') // 构造 form
+  form.style.display = 'none' // 设置为不显示
+  form.target = '_blank' // 指向 iframe
+
+  // 构造 formdata
+  Object.keys(data).forEach((key) => {
+    const input = document.createElement('input') // 创建 input
+
+    input.name = key // 设置 name
+    input.value = data[key] // 设置 value
+
+    form.appendChild(input)
+  })
+
+  form.method = method // 设置方法
+  form.action = action // 设置地址
+
+  document.body.appendChild(form)
+
+  // 对该 form 执行提交
+  form.submit()
+
+  document.body.removeChild(form)
+}
+
+export function createCodeSandBox(codeStr) {
+  const parameters = getParameters({
+    files: {
+      'sandbox.config.json': {
+        content: {
+          template: 'node',
+          infiniteLoopProtection: true,
+          hardReloadOnChange: false,
+          view: 'browser',
+          container: {
+            port: 8080,
+            node: '14',
+          },
+        },
+      },
+      'package.json': {
+        content: {
+          scripts: {
+            serve: 'vue-cli-service serve',
+            build: 'vue-cli-service build',
+            lint: 'vue-cli-service lint',
+          },
+          dependencies: {
+            '@formily/core': 'latest',
+            '@formily/vue': 'latest',
+            'core-js': '^3.6.5',
+            'ant-design-vue': 'latest',
+            'vue-demi': 'latest',
+            vue: '^2.6.11',
+          },
+          devDependencies: {
+            '@vue/cli-plugin-babel': '~4.5.0',
+            '@vue/cli-service': '~4.5.0',
+            '@vue/composition-api': 'latest',
+            'vue-template-compiler': '^2.6.11',
+          },
+          babel: {
+            presets: ['@vue/cli-plugin-babel/preset'],
+          },
+          vue: {
+            devServer: {
+              host: '0.0.0.0',
+              disableHostCheck: true, // 必须
+            },
+          },
+        },
+      },
+      'src/App.vue': {
+        content: codeStr,
+      },
+      'src/main.js': {
+        content: CodeSandBoxJS,
+      },
+      'public/index.html': {
+        content: CodeSandBoxHTML,
+      },
+    },
+  })
+
+  createForm({
+    method: 'post',
+    action: 'https://codesandbox.io/api/v1/sandboxes/define',
+    data: {
+      parameters,
+      query: 'file=/src/App.vue',
+    },
+  })
+}
diff --git a/packages/vue/docs/.vuepress/components/dumi-previewer.vue b/packages/vue/docs/.vuepress/components/dumi-previewer.vue
index 13a94882c32..3b88f72c688 100644
--- a/packages/vue/docs/.vuepress/components/dumi-previewer.vue
+++ b/packages/vue/docs/.vuepress/components/dumi-previewer.vue
@@ -12,7 +12,20 @@
       </div>
 
       <div class="dumi-previewer-actions">
-        <div></div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            class="dumi-previewer-actions__icon"
+            viewBox="0 0 256 296"
+            @click="openCodeSandBox"
+          >
+            <path
+              d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z"
+              fill="#000"
+            ></path>
+          </svg>
+        </div>
 
         <div>
           <svg
@@ -71,6 +84,7 @@
 <script>
 import copy from 'copy-to-clipboard'
 import highlight from './highlight'
+import { createCodeSandBox } from './createCodeSandBox'
 
 export default {
   name: 'dumi-previewer',
@@ -144,6 +158,10 @@ export default {
         this.copied = false
       }, 2000)
     },
+
+    openCodeSandBox() {
+      createCodeSandBox(this.demoStr)
+    },
   },
 }
 </script>
diff --git a/packages/vue/docs/demos/api/hooks/use-field.vue b/packages/vue/docs/demos/api/hooks/use-field.vue
index 123727a40bb..87457f0ba10 100644
--- a/packages/vue/docs/demos/api/hooks/use-field.vue
+++ b/packages/vue/docs/demos/api/hooks/use-field.vue
@@ -51,7 +51,7 @@ const FormItem = observer(
             props: {
               label: field.title,
               required: field.required,
-              help: field.errors?.length ? field.errors : undefined,
+              help: field.selfErrors?.length ? field.selfErrors : undefined,
               extra: field.description,
               validateStatus: field.validateStatus,
             },
diff --git a/packages/vue/docs/demos/api/shared/connect.vue b/packages/vue/docs/demos/api/shared/connect.vue
index 663ae11e468..de0e28593b9 100644
--- a/packages/vue/docs/demos/api/shared/connect.vue
+++ b/packages/vue/docs/demos/api/shared/connect.vue
@@ -55,7 +55,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/vue/docs/demos/api/shared/map-props.vue b/packages/vue/docs/demos/api/shared/map-props.vue
index 663ae11e468..de0e28593b9 100644
--- a/packages/vue/docs/demos/api/shared/map-props.vue
+++ b/packages/vue/docs/demos/api/shared/map-props.vue
@@ -55,7 +55,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/vue/docs/demos/api/shared/map-read-pretty.vue b/packages/vue/docs/demos/api/shared/map-read-pretty.vue
index c0c642dbc03..bb12d7a6320 100644
--- a/packages/vue/docs/demos/api/shared/map-read-pretty.vue
+++ b/packages/vue/docs/demos/api/shared/map-read-pretty.vue
@@ -39,7 +39,7 @@ const FormItem = connect(
     (props, field) => {
       return {
         ...props,
-        help: field.errors?.length ? field.errors : undefined,
+        help: field.selfErrors?.length ? field.selfErrors : undefined,
       }
     }
   )
diff --git a/packages/vue/docs/demos/index.vue b/packages/vue/docs/demos/index.vue
index f607f3ff527..af13fade23e 100644
--- a/packages/vue/docs/demos/index.vue
+++ b/packages/vue/docs/demos/index.vue
@@ -54,8 +54,8 @@ const FormItem = connect(
     (props, field) => {
       return {
         help: !isVoidField(field)
-          ? field.errors.length
-            ? field.errors
+          ? field.selfErrors.length
+            ? field.selfErrors
             : undefined
           : undefined,
         extra: field.description,
@@ -78,9 +78,9 @@ export default {
         field.value &&
         form.values[equalName] !== field.value
       ) {
-        field.errors = ['Password does not match Confirm Password.']
+        field.selfErrors = ['Password does not match Confirm Password.']
       } else {
-        field.errors = []
+        field.selfErrors = []
       }
     }
     return {
diff --git a/packages/vue/docs/demos/questions/scoped-slot.vue b/packages/vue/docs/demos/questions/scoped-slot.vue
index b912dcefb42..32819e24855 100644
--- a/packages/vue/docs/demos/questions/scoped-slot.vue
+++ b/packages/vue/docs/demos/questions/scoped-slot.vue
@@ -16,7 +16,7 @@ const TextPreviewer = {
   render(h, context) {
     return h('div', {}, [
       context.scopedSlots.default({
-        scopedProp: 'default 作用域插槽',
+        slotProp: '有 default 作用域插槽组件的插槽属性值',
         onScopedFunc: ($event) => {
           alert($event)
         },
@@ -53,7 +53,7 @@ const ScopedSlotComponent = {
           },
         },
       },
-      [props.scopedProp]
+      [props.slotProp]
     )
   },
 }
diff --git a/packages/vue/docs/questions/README.md b/packages/vue/docs/questions/README.md
index 764f4446b75..2a50400fb96 100644
--- a/packages/vue/docs/questions/README.md
+++ b/packages/vue/docs/questions/README.md
@@ -32,6 +32,6 @@ sidebar: auto
 
 ## 如何使用作用域插槽？
 
-`x-content` 使用函数式组件时, 渲染函数增加第二个参数，通过其 `props` 成员访问作用域插槽传入属性。
+`x-content` 使用函数式组件时, 渲染函数增加第二个参数，通过其 `props` 成员访问作用域插槽传入属性，支持 observer() 和 connect() 接入组件。
 
 <dumi-previewer demoPath="questions/scoped-slot" />
diff --git a/packages/vue/package.json b/packages/vue/package.json
index fd75baa204e..145ebe274fd 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formily/vue",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.11",
   "license": "MIT",
   "main": "lib",
   "module": "esm",
@@ -30,18 +30,19 @@
     "@vuepress/plugin-back-to-top": "^1.8.2",
     "@vuepress/plugin-medium-zoom": "^1.8.2",
     "ant-design-vue": "^1.7.3",
+    "codesandbox": "^2.2.3",
     "core-js": "^2.4.0",
     "vue": "^2.6.12",
     "vuepress": "^1.8.2",
     "vuepress-plugin-typescript": "^0.3.1"
   },
   "dependencies": {
-    "@formily/core": "2.0.0-rc.7",
-    "@formily/json-schema": "2.0.0-rc.7",
-    "@formily/reactive": "2.0.0-rc.7",
-    "@formily/reactive-vue": "2.0.0-rc.7",
-    "@formily/shared": "2.0.0-rc.7",
-    "@formily/validator": "2.0.0-rc.7",
+    "@formily/core": "2.0.0-rc.11",
+    "@formily/json-schema": "2.0.0-rc.11",
+    "@formily/reactive": "2.0.0-rc.11",
+    "@formily/reactive-vue": "2.0.0-rc.11",
+    "@formily/shared": "2.0.0-rc.11",
+    "@formily/validator": "2.0.0-rc.11",
     "@type-helper/vue2": "npm:vue@2",
     "@type-helper/vue3": "npm:vue@3",
     "vue-demi": "^0.9.0",
diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts
index bb35cff0596..59e4a53e88b 100644
--- a/packages/vue/src/__tests__/schema.json.spec.ts
+++ b/packages/vue/src/__tests__/schema.json.spec.ts
@@ -4,6 +4,8 @@ import { render, waitFor } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 import Vue, { FunctionalComponentOptions } from 'vue'
 import { FormProvider, createSchemaField } from '../vue2-components'
+import { connect, mapProps, mapReadPretty } from '../'
+import { defineComponent } from 'vue-demi'
 
 Vue.component('FormProvider', FormProvider)
 
@@ -81,7 +83,7 @@ const Previewer3: FunctionalComponentOptions = {
       },
       [
         context.scopedSlots.default({
-          scopedProp: '123',
+          slotProp: '123',
         }),
       ]
     )
@@ -100,7 +102,7 @@ const Previewer4: FunctionalComponentOptions = {
       },
       [
         context.scopedSlots.content({
-          scopedProp: '123',
+          slotProp: '123',
         }),
       ]
     )
@@ -444,7 +446,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
 
@@ -481,7 +483,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -520,7 +522,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -558,7 +560,7 @@ describe('x-content', () => {
     const Content = {
       functional: true,
       render(h, context) {
-        return h('span', context.props.scopedProp)
+        return h('span', context.props.slotProp)
       },
     }
     const { SchemaField } = createSchemaField({
@@ -591,6 +593,142 @@ describe('x-content', () => {
     expect(queryByTestId('previewer4').textContent).toEqual('123')
   })
 
+  test('scoped slot with connect', () => {
+    const form = createForm()
+    const ConnectedComponent = connect(
+      defineComponent({
+        render(h) {
+          return h(
+            'div',
+            {
+              attrs: {
+                'data-testid': 'ConnectedComponent',
+              },
+            },
+            [
+              this.$scopedSlots.default({
+                slotProp: '123',
+              }),
+            ]
+          )
+        },
+      }),
+      mapProps((props, field) => {
+        return {
+          ...props,
+        }
+      })
+    )
+
+    const scopeSlotComponent = {
+      functional: true,
+      render(h, context) {
+        return h('span', context.props.slotProp)
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        ConnectedComponent,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            name: 'ConnectedComponent',
+            'x-component': 'ConnectedComponent',
+            'x-content': {
+              default: scopeSlotComponent,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('ConnectedComponent')).toBeVisible()
+    expect(queryByTestId('ConnectedComponent').textContent).toEqual('123')
+  })
+
+  test('scoped slot with connect and readPretty', () => {
+    const form = createForm()
+
+    const ConnectedWithMapReadPretty = connect(
+      defineComponent({
+        render(h) {
+          return h(
+            'div',
+            {
+              attrs: {
+                'data-testid': 'ConnectedWithMapReadPretty',
+              },
+            },
+            [
+              this.$scopedSlots.withMapReadPretty({
+                slotProp: '123',
+              }),
+            ]
+          )
+        },
+      }),
+      mapProps((props, field) => {
+        return {
+          ...props,
+        }
+      }),
+      mapReadPretty({
+        render(h) {
+          return h('div', 'read pretty')
+        },
+      })
+    )
+
+    const scopeSlotComponent = {
+      functional: true,
+      render(h, context) {
+        return h('span', context.props.slotProp)
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        ConnectedWithMapReadPretty,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            name: 'ConnectedWithMapReadPretty',
+            'x-component': 'ConnectedWithMapReadPretty',
+            'x-content': {
+              withMapReadPretty: scopeSlotComponent,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('ConnectedWithMapReadPretty')).toBeVisible()
+    expect(queryByTestId('ConnectedWithMapReadPretty').textContent).toEqual(
+      '123'
+    )
+  })
+
   test('slot compitible', () => {
     const form = createForm()
     const { SchemaField } = createSchemaField({
diff --git a/packages/vue/src/shared/fragment.ts b/packages/vue/src/shared/fragment.ts
index ca92820c570..65e6a11b19e 100644
--- a/packages/vue/src/shared/fragment.ts
+++ b/packages/vue/src/shared/fragment.ts
@@ -23,7 +23,7 @@ if (isVue2) {
             },
           ],
         },
-        vm?.$slots?.default
+        vm?.$scopedSlots?.default?.(vm.$attrs)
       )
     },
   }
diff --git a/packages/vue/src/shared/h.ts b/packages/vue/src/shared/h.ts
index 804fe16385a..be02eadd8db 100644
--- a/packages/vue/src/shared/h.ts
+++ b/packages/vue/src/shared/h.ts
@@ -23,20 +23,30 @@ const compatibleCreateElement = (
       data?: VNodeData,
       components?: VNodeChildren
     ) => VNode
-    const scopedSlots = {}
+    const scopedSlots = components // 默认全部作为 scopedSlots 处理
     const children = []
+
+    /**
+     * scopedSlots 不会映射为slots，所以这里手动映射一遍
+     * 主要为了解决 slots.x 问题
+     */
     Object.keys(components).forEach((key) => {
       const func = components[key]
-      if (typeof func === 'function') {
-        if (func.length !== 0) {
-          scopedSlots[key] = func
-        } else if (key !== 'default') {
-          scopedSlots[key] = func
-          // compatible with slots usage
-          children.push(hInVue2(FragmentComponent, { slot: key }, func()))
-        } else {
-          children.push(func())
-        }
+
+      // 转换为 slots 传递
+      if (typeof func === 'function' && func.length === 0) {
+        /**
+         * func 参数为0的判断不准确，因为composition-api包了一层，导致全部为0
+         * try catch 解决scoped slots 转换参数异常问题
+         * */
+        try {
+          const child = func()
+          children.push(
+            key === 'default'
+              ? child
+              : hInVue2(FragmentComponent, { slot: key }, [child])
+          )
+        } catch (error) {}
       }
     })
     const newData = Object.assign({}, data)
diff --git a/yarn.lock b/yarn.lock
index ad143ff149f..eaff1f9a2de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -387,11 +387,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
   integrity sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==
 
-"@babel/parser@^7.14.7":
-  version "7.15.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
-  integrity sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==
-
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz#4b467302e1548ed3b1be43beae2cc9cf45e0bb7e"
@@ -1166,67 +1161,6 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
   integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
 
-"@designable/core@0.5.29", "@designable/core@^0.x":
-  version "0.5.29"
-  resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.5.29.tgz#de866560fb62bf644d650cf35c718234e377022e"
-  integrity sha512-SZDaIwg853C08MrNQAksCgVZjxY/qgPxpomBwkSJyjs9v4FOEMOgrkjMelofNCzfnuRQeBWnHrQoWXy0F9GEpQ==
-  dependencies:
-    "@designable/shared" "0.5.29"
-    "@formily/json-schema" "^2.0.0-beta.84"
-    "@formily/path" "^2.0.0-beta.84"
-    "@formily/reactive" "^2.0.0-beta.84"
-    "@juggle/resize-observer" "^3.3.1"
-
-"@designable/formily@^0.x":
-  version "0.5.29"
-  resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.5.29.tgz#33e4d2c482af05e85ccf10439c748261e9fab2ba"
-  integrity sha512-JCTYEKOuDH1Yr82GC6pAF9zSQxN1PaHSruam4AyrsTWygr5uotcAPObYVWT13IZIfWiSWQSuryBKXDC05PnXVQ==
-  dependencies:
-    "@designable/core" "0.5.29"
-    "@designable/shared" "0.5.29"
-    "@formily/core" "^2.0.0-beta.84"
-    "@formily/json-schema" "^2.0.0-beta.84"
-
-"@designable/react-settings-form@^0.x":
-  version "0.5.29"
-  resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.5.29.tgz#09dab2de564a2eaa8fe746b18e259309fe83bf84"
-  integrity sha512-1WbA1ALzUOvQ9FRYY10kHyhXqL0ZBCHZF/8XSpDdy7p30arYm4hifDhabJet4D2I18Mijd7VaZQ2dC1R1iKM2A==
-  dependencies:
-    "@babel/parser" "^7.14.7"
-    "@designable/core" "0.5.29"
-    "@designable/react" "0.5.29"
-    "@designable/shared" "0.5.29"
-    "@formily/antd" "^2.0.0-beta.84"
-    "@formily/core" "^2.0.0-beta.84"
-    "@formily/react" "^2.0.0-beta.84"
-    "@formily/reactive" "^2.0.0-beta.84"
-    "@formily/reactive-react" "^2.0.0-beta.84"
-    "@formily/shared" "^2.0.0-beta.84"
-    "@monaco-editor/react" "^4.2.1"
-    monaco-editor "^0.25.2"
-    prettier "^2.3.2"
-    react-color "^2.19.3"
-    react-tiny-popover "^6.0.5"
-
-"@designable/react@0.5.29", "@designable/react@^0.x":
-  version "0.5.29"
-  resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.5.29.tgz#7cc99c65ab4205436a16803c06c27d9b94016e6a"
-  integrity sha512-zTdFxG/8EykSavwxdI4n10aTQxRv8w0OTIT6Zng3+rumSnXxPlvwXbVE+HtUTVVrG7luKyjnAXW1XT74Xb4dSA==
-  dependencies:
-    "@designable/core" "0.5.29"
-    "@designable/shared" "0.5.29"
-    "@formily/reactive" "^2.0.0-beta.84"
-    "@formily/reactive-react" "^2.0.0-beta.84"
-    "@juggle/resize-observer" "^3.3.1"
-    dateformat "^4.5.1"
-
-"@designable/shared@0.5.29":
-  version "0.5.29"
-  resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.5.29.tgz#47e60c0a16776c126b002aeee262416c06de7e64"
-  integrity sha512-z/+koR92O9lrjEn+wevWWTcZyc71klAF9KYRFiuiMgLpLGmC121ZVrBJuaf3/lcshSnOJZwe8ThTW0O1CG1pvg==
-  dependencies:
-    requestidlecallback "^0.3.0"
-
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -1419,11 +1353,6 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
-"@icons/material@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
-  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2320,21 +2249,6 @@
     stringify-entities "^3.0.1"
     stringify-object "^3.3.0"
 
-"@monaco-editor/loader@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.1.1.tgz#37db648c81a86946d0febd391de00df9c28a0a3d"
-  integrity sha512-mkT4r4xDjIyOG9o9M6rJDSzEIeonwF80sYErxEvAAL4LncFVdcbNli8Qv6NDqF6nyv6sunuKkDzo4iFjxPL+uQ==
-  dependencies:
-    state-local "^1.0.6"
-
-"@monaco-editor/react@^4.2.1":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.2.2.tgz#636e5b8eb9519ef62f475f9a4a50f62ee0c493a8"
-  integrity sha512-yDDct+f/mZ946tJEXudvmMC8zXDygkELNujpJGjqJ0gS3WePZmS/IwBBsuJ8JyKQQC3Dy/+Ivg1sSpW+UvCv9g==
-  dependencies:
-    "@monaco-editor/loader" "^1.1.1"
-    prop-types "^15.7.2"
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3999,6 +3913,13 @@ add-stream@^1.0.0:
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
   integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
 
+agent-base@4, agent-base@^4.1.0, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -4011,6 +3932,13 @@ agentkeepalive@^2.2.0:
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
   integrity sha1-xdG9SxKQCPEWPyNvhuX66iAm4u8=
 
+agentkeepalive@^3.3.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-3.5.2.tgz#a113924dd3fa24a0bc3b78108c450c2abee00f67"
+  integrity sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==
+  dependencies:
+    humanize-ms "^1.2.1"
+
 agentkeepalive@^4.1.3:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.1.4.tgz#d928028a4862cb11718e55227872e842a44c945b"
@@ -4565,7 +4493,7 @@ autocomplete.js@0.36.0:
   dependencies:
     immediate "^3.2.3"
 
-autoprefixer@^9.0, autoprefixer@^9.5.1, autoprefixer@^9.6.1:
+autoprefixer@^9.5.1, autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -4588,6 +4516,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
+  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
@@ -4880,6 +4816,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+binaryextensions@^2.1.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
+  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
+
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -4887,6 +4828,14 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
+bl@^1.0.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.3.tgz#1e8dd80142eac80d7158c9dccc047fb620e035e7"
+  integrity sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==
+  dependencies:
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"
+
 bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -4896,7 +4845,7 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-bluebird@^3.1.1, bluebird@^3.5.5:
+bluebird@^3.1.1, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -5112,11 +5061,29 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
   integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
 
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
 buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -5194,6 +5161,25 @@ cac@^6.5.6:
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.3.tgz#10410b8611677990cc2e3c8b576d471c1d71b768"
   integrity sha512-ECVqVZh74qgSuZG9YOt2OJPI3wGcf+EwwuF/XIOYqZBD0KZYLtgPWqFPxmDPQ6joxI1nOlvVgRV6VT53Ooyocg==
 
+cacache@^10.0.0:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
+  integrity sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==
+  dependencies:
+    bluebird "^3.5.1"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^2.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^5.2.4"
+    unique-filename "^1.1.0"
+    y18n "^4.0.0"
+
 cacache@^12.0.2, cacache@^12.0.3:
   version "12.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
@@ -5238,6 +5224,25 @@ cacache@^15.0.5, cacache@^15.2.0:
     tar "^6.0.2"
     unique-filename "^1.1.1"
 
+cacache@^9.2.9:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-9.3.0.tgz#9cd58f2dd0b8c8cacf685b7067b416d6d3cf9db1"
+  integrity sha512-Vbi8J1XfC8v+FbQ6QkOtKXsHpPnB0i9uMeYFJoj40EbdOsEqWB3DPpNjfsnYBkqOPYA8UvrqH6FZPpBP0zdN7g==
+  dependencies:
+    bluebird "^3.5.0"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^1.3.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.1"
+    ssri "^4.1.6"
+    unique-filename "^1.1.0"
+    y18n "^3.2.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -5426,7 +5431,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.3, chalk@~1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -5548,7 +5553,7 @@ chokidar@^2.0.0, chokidar@^2.0.3, chokidar@^2.1.2, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chownr@^1.1.1, chownr@^1.1.4:
+chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
@@ -5642,6 +5647,11 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
+cli-spinners@^1.0.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+  integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==
+
 cli-spinners@^2.2.0, cli-spinners@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.0.tgz#36c7dc98fb6a9a76bd6238ec3f77e2425627e939"
@@ -5735,6 +5745,47 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codesandbox-import-util-types@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
+  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
+
+codesandbox-import-utils@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.2.3.tgz#f7b4801245b381cb8c90fe245e336624e19b6c84"
+  integrity sha512-ymtmcgZKU27U+nM2qUb21aO8Ut/u2S9s6KorOgG81weP+NA0UZkaHKlaRqbLJ9h4i/4FLvwmEXYAnTjNmp6ogg==
+  dependencies:
+    codesandbox-import-util-types "^2.2.3"
+    istextorbinary "^2.2.1"
+    lz-string "^1.4.4"
+
+codesandbox@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codesandbox/-/codesandbox-2.2.3.tgz#092de403506d9e4c5358cd61dc84068c3ee8ceea"
+  integrity sha512-IAkWFk6UUglOhSemI7UFgNNL/jgg+1YjVEIllFULLgsaHhFnY51pCqAifMNuAd5d9Zp4Nk/xMgrEaGNV0L4Xlg==
+  dependencies:
+    axios "^0.18.1"
+    chalk "^2.4.1"
+    codesandbox-import-util-types "^2.2.3"
+    codesandbox-import-utils "^2.2.3"
+    commander "^2.9.0"
+    datauri "^3.0.0"
+    filesize "^3.6.1"
+    fs-extra "^3.0.1"
+    git-branch "^1.0.0"
+    git-repo-name "^0.6.0"
+    git-username "^0.5.0"
+    humps "^2.0.1"
+    inquirer "^6.2.2"
+    lodash "^4.17.5"
+    lz-string "^1.4.4"
+    ms "^2.0.0"
+    open "^6.3.0"
+    ora "^1.3.0"
+    pacote "^2.7.36"
+    shortid "^2.2.8"
+    update-notifier "^2.2.0"
+
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -6726,6 +6777,13 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
+cwd@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/cwd/-/cwd-0.9.1.tgz#41e10a7e1ab833dc59c2eca83814c7de77b5a4fd"
+  integrity sha1-QeEKfhq4M9xZwuyoOBTH3ne1pP0=
+  dependencies:
+    find-pkg "^0.1.0"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -6763,6 +6821,14 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+datauri@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/datauri/-/datauri-3.0.0.tgz#6196997e9a7bbbee81b60e8c8acb1a2c871e2349"
+  integrity sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==
+  dependencies:
+    image-size "0.8.3"
+    mimer "1.1.0"
+
 date-fns@2.x:
   version "2.23.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
@@ -6778,11 +6844,6 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-dateformat@^4.5.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.5.1.tgz#c20e7a9ca77d147906b6dc2261a8be0a5bd2173c"
-  integrity sha512-OD0TZ+B7yP7ZgpJf5K2DIbj3FZvFvxgFUuaqA/V5zTjAtAAXZ1E8bktHxmAGs4x5b7PflqA9LeQ84Og7wYtF7Q==
-
 dayjs@1.x, dayjs@^1.9.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"
@@ -6800,6 +6861,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@3.1.0, debug@=3.1.0, debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
@@ -6814,13 +6882,6 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -7355,6 +7416,14 @@ ecdsa-sig-formatter@1.0.11, ecdsa-sig-formatter@^1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
+editions@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-2.3.1.tgz#3bc9962f1978e801312fbd0aebfed63b49bfe698"
+  integrity sha512-ptGvkwTvGdGfC0hfhKg0MT+TRLRKGtUiWGBInxOm5pz7ssADezahjCUaYuZ8Dr+C05FW0AECIIPt4WBxVINEhA==
+  dependencies:
+    errlop "^2.0.0"
+    semver "^6.3.0"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
@@ -7385,10 +7454,10 @@ elegant-spinner@^1.0.1:
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
-element-ui@^2.15.2:
-  version "2.15.5"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.5.tgz#dfb376dc5cd60adab21c991bd4fac3e67e5300f4"
-  integrity sha512-B/YCdz2aRY2WnFXzbTRTHPKZHBD/2KV6u88EBnkaARC/Lyxnap+7vpvrcW5UNTyVwjItS5Fj1eQyRy6236lbXg==
+element-ui@latest:
+  version "2.15.6"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.15.6.tgz#c9609add35af5a686a4b7685dc1d757c75e01df3"
+  integrity sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -7513,11 +7582,21 @@ envinfo@^7.2.0, envinfo@^7.7.4:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
+err-code@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
+  integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
+
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
+errlop@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b"
+  integrity sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==
+
 errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -7581,11 +7660,18 @@ es5-imcompatible-versions@^0.1.62:
   resolved "https://registry.yarnpkg.com/es5-imcompatible-versions/-/es5-imcompatible-versions-0.1.73.tgz#2d34dbb29cbc54f38902cc1150bbe301b388c014"
   integrity sha512-P0SgLrYl9iqlrt0h6n/iz5z5P1uuhnfHp9BA/tcLfqgVIWHNvY4Rm+jtSvnh1ADK4DJOYDwJvxlrHMRoLQMgmQ==
 
-es6-promise@^4.1.0:
+es6-promise@^4.0.3, es6-promise@^4.1.0:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
   integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
 
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 esbuild@0.12.15:
   version "0.12.15"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.15.tgz#9d99cf39aeb2188265c5983e983e236829f08af0"
@@ -8036,6 +8122,13 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expand-tilde@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-1.2.2.tgz#0b81eba897e5a3d31d1c3d102f8f01441e559449"
+  integrity sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=
+  dependencies:
+    os-homedir "^1.0.1"
+
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
@@ -8309,6 +8402,11 @@ file-loader@^5.0.2:
     loader-utils "^1.4.0"
     schema-utils "^2.5.0"
 
+file-name@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/file-name/-/file-name-0.1.0.tgz#12b122f120f9c34dbc176c1ab81a548aced6def7"
+  integrity sha1-ErEi8SD5w028F2wauBpUis7W3vc=
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -8380,6 +8478,21 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-file-up@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/find-file-up/-/find-file-up-0.1.3.tgz#cf68091bcf9f300a40da411b37da5cce5a2fbea0"
+  integrity sha1-z2gJG8+fMApA2kEbN9pczlovvqA=
+  dependencies:
+    fs-exists-sync "^0.1.0"
+    resolve-dir "^0.1.0"
+
+find-pkg@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/find-pkg/-/find-pkg-0.1.2.tgz#1bdc22c06e36365532e2a248046854b9788da557"
+  integrity sha1-G9wiwG42NlUy4qJIBGhUuXiNpVc=
+  dependencies:
+    find-file-up "^0.1.2"
+
 find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@@ -8477,6 +8590,13 @@ fn-name@~2.0.1:
   resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
   integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.14.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.2.tgz#cecb825047c00f5e66b142f90fed4f515dec789b"
@@ -8545,7 +8665,17 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@8.1.0, fs-extra@^8.1.0:
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
+fs-exists-sync@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
+  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
+
+fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -8554,6 +8684,15 @@ fs-extra@8.1.0, fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -8674,6 +8813,11 @@ generic-names@^2.0.1:
   dependencies:
     loader-utils "^1.1.0"
 
+genfun@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/genfun/-/genfun-4.0.1.tgz#ed10041f2e4a7f1b0a38466d17a5c3e27df1dfc1"
+  integrity sha1-7RAEHy5KfxsKOEZtF6XD4n3x38E=
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -8811,6 +8955,20 @@ ghooks@^2.0.4:
     path-exists "3.0.0"
     spawn-command "0.0.2"
 
+git-branch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/git-branch/-/git-branch-1.0.0.tgz#64cc7dd75da2d81a9d4679087c1f8b56e6bd2d3d"
+  integrity sha512-ZTzuqw5Df8fyLXQWrX6hK+4FpNCdKzMcERlxENEGO5aKcLmG7MAszhrMhluUKNKmOS/JAGijDMQDXDCDw1mE/A==
+
+git-config-path@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/git-config-path/-/git-config-path-1.0.1.tgz#6d33f7ed63db0d0e118131503bab3aca47d54664"
+  integrity sha1-bTP37WPbDQ4RgTFQO6s6ykfVRmQ=
+  dependencies:
+    extend-shallow "^2.0.1"
+    fs-exists-sync "^0.1.0"
+    homedir-polyfill "^1.0.0"
+
 git-raw-commits@^2.0.8:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.10.tgz#e2255ed9563b1c9c3ea6bd05806410290297bbc1"
@@ -8830,6 +8988,16 @@ git-remote-origin-url@^2.0.0:
     gitconfiglocal "^1.0.0"
     pify "^2.3.0"
 
+git-repo-name@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/git-repo-name/-/git-repo-name-0.6.0.tgz#af09884656aa537ec625c7087008175cd61228ff"
+  integrity sha1-rwmIRlaqU37GJccIcAgXXNYSKP8=
+  dependencies:
+    cwd "^0.9.1"
+    file-name "^0.1.0"
+    lazy-cache "^1.0.4"
+    remote-origin-url "^0.5.1"
+
 git-semver-tags@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-4.1.1.tgz#63191bcd809b0ec3e151ba4751c16c444e5b5780"
@@ -8853,6 +9021,13 @@ git-url-parse@^11.4.4:
   dependencies:
     git-up "^4.0.0"
 
+git-username@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/git-username/-/git-username-0.5.1.tgz#432a41b34a19607892354004c9893a8829ffa4f0"
+  integrity sha512-xjUjrj3i4kup2A3a/ZVZB1Nt0PUX7SU7KeVqIbXPdslT7NbNfyO04JMxBv4gar77JePdS+A6f05jG1Viy6+U1w==
+  dependencies:
+    remote-origin-url "^0.4.0"
+
 gitconfiglocal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
@@ -8927,6 +9102,14 @@ global-dirs@^3.0.0:
   dependencies:
     ini "2.0.0"
 
+global-modules@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-0.2.3.tgz#ea5a3bed42c6d6ce995a4f8a1269b5dae223828d"
+  integrity sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=
+  dependencies:
+    global-prefix "^0.1.4"
+    is-windows "^0.2.0"
+
 global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -8943,6 +9126,16 @@ global-modules@^2.0.0:
   dependencies:
     global-prefix "^3.0.0"
 
+global-prefix@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-0.1.5.tgz#8d3bc6b8da3ca8112a160d8d496ff0462bfef78f"
+  integrity sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=
+  dependencies:
+    homedir-polyfill "^1.0.0"
+    ini "^1.3.4"
+    is-windows "^0.2.0"
+    which "^1.2.12"
+
 global-prefix@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
@@ -9487,7 +9680,7 @@ hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-
   dependencies:
     react-is "^16.7.0"
 
-homedir-polyfill@^1.0.1:
+homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
   integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
@@ -9499,7 +9692,7 @@ hoopy@^0.1.4:
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
-hosted-git-info@^2.1.4:
+hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
@@ -9611,6 +9804,11 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
+http-cache-semantics@^3.8.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
+  integrity sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==
+
 http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -9658,6 +9856,14 @@ http-parser-js@>=0.5.1:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
   integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
 
+http-proxy-agent@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz#e4821beef5b2142a2026bd73926fe537631c5405"
+  integrity sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==
+  dependencies:
+    agent-base "4"
+    debug "3.1.0"
+
 http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
@@ -9700,6 +9906,14 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+https-proxy-agent@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -9725,6 +9939,11 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
+
 iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -9788,6 +10007,13 @@ ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+image-size@0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.8.3.tgz#f0b568857e034f29baffd37013587f2c0cad8b46"
+  integrity sha512-SMtq1AJ+aqHB45c3FsB4ERK0UCiA2d3H1uq8s+8T0Pf8A3W4teyBQyaFaktH6xvZqh+npwlKU7i4fJo0r7TYTg==
+  dependencies:
+    queue "6.0.1"
+
 image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
@@ -9933,7 +10159,7 @@ ini@2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
-ini@^1.3.2, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.2, ini@^1.3.3, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
@@ -9976,7 +10202,7 @@ inquirer@3.0.6:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@^6.2.1:
+inquirer@^6.2.1, inquirer@^6.2.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
   integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
@@ -10073,7 +10299,7 @@ ip-regex@^2.1.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
   integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
-ip@^1.1.0, ip@^1.1.5:
+ip@^1.1.0, ip@^1.1.4, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
@@ -10172,7 +10398,7 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0:
+is-buffer@^2.0.0, is-buffer@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
@@ -10636,6 +10862,11 @@ is-whitespace@^0.3.0:
   resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
   integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
 
+is-windows@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+  integrity sha1-3hqm1j6indJIc3tp8f+LgALSEIw=
+
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -10812,6 +11043,15 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+istextorbinary@^2.2.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.6.0.tgz#60776315fb0fa3999add276c02c69557b9ca28ab"
+  integrity sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==
+  dependencies:
+    binaryextensions "^2.1.2"
+    editions "^2.2.0"
+    textextensions "^2.5.0"
+
 javascript-stringify@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
@@ -11408,7 +11648,7 @@ json-buffer@3.0.0:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
   integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
 
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -11483,6 +11723,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -11619,6 +11866,11 @@ latest-version@^5.0.0, latest-version@^5.1.0:
   dependencies:
     package-json "^6.3.0"
 
+lazy-cache@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
+
 lerna@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/lerna/-/lerna-4.0.0.tgz#b139d685d50ea0ca1be87713a7c2f44a5b678e9e"
@@ -11907,11 +12159,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.17.15:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash._baseclone@~4.5.0:
   version "4.5.7"
   resolved "https://registry.yarnpkg.com/lodash._baseclone/-/lodash._baseclone-4.5.7.tgz#ce42ade08384ef5d62fa77c30f61a46e686f8434"
@@ -12014,7 +12261,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.x, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.7.0:
+lodash@4.x, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12026,7 +12273,7 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.2.0:
+log-symbols@^2.1.0, log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
@@ -12124,7 +12371,7 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
+lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -12185,6 +12432,23 @@ make-error@1.x, make-error@^1.1.1:
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+make-fetch-happen@^2.4.13:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-2.6.0.tgz#8474aa52198f6b1ae4f3094c04e8370d35ea8a38"
+  integrity sha512-FFq0lNI0ax+n9IWzWpH8A4JdgYiAp2DDYIZ3rsaav8JDe8I+72CzK6PQW/oom15YDZpV5bYW/9INd6nIJ2ZfZw==
+  dependencies:
+    agentkeepalive "^3.3.0"
+    cacache "^10.0.0"
+    http-cache-semantics "^3.8.0"
+    http-proxy-agent "^2.0.0"
+    https-proxy-agent "^2.1.0"
+    lru-cache "^4.1.1"
+    mississippi "^1.2.0"
+    node-fetch-npm "^2.0.2"
+    promise-retry "^1.1.1"
+    socks-proxy-agent "^3.0.1"
+    ssri "^5.0.0"
+
 make-fetch-happen@^8.0.9:
   version "8.0.14"
   resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-8.0.14.tgz#aaba73ae0ab5586ad8eaa68bd83332669393e222"
@@ -12326,11 +12590,6 @@ matcher@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.4"
 
-material-colors@^1.2.1:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
-  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
-
 mathjax-full@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.2.0.tgz#e53269842a943d4df10502937518991268996c5c"
@@ -12749,6 +13008,11 @@ mime@^2.0.3, mime@^2.4.4, mime@^2.4.6:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
   integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
 
+mimer@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mimer/-/mimer-1.1.0.tgz#2cb67f7093998e772a0e62c090f77daa1b8a2dbe"
+  integrity sha512-y9dVfy2uiycQvDNiAYW6zp49ZhFlXDMr5wfdOiMbdzGM/0N5LNR6HTUn3un+WUQcM0koaw8FMTG1bt5EnHJdvQ==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -12921,6 +13185,38 @@ minizlib@^2.0.0, minizlib@^2.1.1:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
+mississippi@^1.2.0, mississippi@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.1.tgz#2a8bb465e86550ac8b36a7b6f45599171d78671e"
+  integrity sha512-/6rB8YXFbAtsUVRphIRQqB0+9c7VaPHCjVtvto+JqwVxgz8Zz+I+f68/JgQ+Pb4VlZb2svA9OtdXnHHsZz7ltg==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^1.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mississippi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
+  integrity sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^2.0.1"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -12996,23 +13292,6 @@ moment@^2.21.0, moment@^2.24.0, moment@^2.25.3:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-monaco-editor-webpack-plugin@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.1.2.tgz#afea30e4e0374132f8f298d358c99efc2cad3e84"
-  integrity sha512-snmHecygICKT0UlHhva+Cs2WaLPpxy3111xbvInhjjTr5m0xQTFHlmJ2QQDcB14Vzmm7f07uc1TtbvOpmL50BA==
-  dependencies:
-    loader-utils "^2.0.0"
-
-monaco-editor@*:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.27.0.tgz#4b69108bb1dc1f60174c5dcdf51bc5306ab5ba26"
-  integrity sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ==
-
-monaco-editor@^0.25.2:
-  version "0.25.2"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.2.tgz#119e2b15bbd968a1a99c03cac9c329316d7c37e9"
-  integrity sha512-5iylzSJevCnzJn9UVsW8yOZ3yHjmAs4TfvH3zsbftKiFKmHG0xirGN6DK9Kk04VSWxYCZZAIafYJoNJJMAU1KA==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -13115,7 +13394,17 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@^3.1.23:
+nanocolors@^0.1.5:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6"
+  integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
+
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
+nanoid@^3.1.23, nanoid@^3.1.25:
   version "3.1.25"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
   integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
@@ -13200,6 +13489,15 @@ node-emoji@^1.10.0:
   dependencies:
     lodash "^4.17.21"
 
+node-fetch-npm@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz#6507d0e17a9ec0be3bec516958a497cec54bf5a4"
+  integrity sha512-iOuIQDWDyjhv9qSDrj9aq/klt6F9z1p2otB3AV7v3zBDcL/x+OfGsvGQZZCcMZbUf4Ujw1xGNQkjvGnVT22cKg==
+  dependencies:
+    encoding "^0.1.11"
+    json-parse-better-errors "^1.0.0"
+    safe-buffer "^5.1.1"
+
 node-fetch@1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -13329,7 +13627,7 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
+normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -13438,6 +13736,16 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
   resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
   integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
 
+npm-package-arg@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-5.1.2.tgz#fb18d17bb61e60900d6312619919bd753755ab37"
+  integrity sha512-wJBsrf0qpypPT7A0LART18hCdyhpCMxeTtcb0X4IZO2jsP6Om7EHN1d9KSKiqD+KVH030RVNpWS9thk+pb7wzA==
+  dependencies:
+    hosted-git-info "^2.4.2"
+    osenv "^0.1.4"
+    semver "^5.1.0"
+    validate-npm-package-name "^3.0.0"
+
 npm-package-arg@^8.0.0, npm-package-arg@^8.0.1, npm-package-arg@^8.1.0, npm-package-arg@^8.1.2:
   version "8.1.5"
   resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-8.1.5.tgz#3369b2d5fe8fdc674baa7f1786514ddc15466e44"
@@ -13464,6 +13772,14 @@ npm-path@^2.0.2:
   dependencies:
     which "^1.2.10"
 
+npm-pick-manifest@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-1.0.4.tgz#a5ee6510c1fe7221c0bc0414e70924c14045f7e8"
+  integrity sha512-MKxNdeyOZysPRTTbHtW0M5Fw38Jo/3ARsoGw5qjCfS+XGjvNB/Gb4qtAZUFmKPM2mVum+eX559eHvKywU856BQ==
+  dependencies:
+    npm-package-arg "^5.1.2"
+    semver "^5.3.0"
+
 npm-pick-manifest@^6.0.0, npm-pick-manifest@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-6.1.1.tgz#7b5484ca2c908565f43b7f27644f36bb816f5148"
@@ -13735,6 +14051,13 @@ onetime@^5.1.0, onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+open@^6.3.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
+  dependencies:
+    is-wsl "^1.1.0"
+
 opencollective-postinstall@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
@@ -13814,6 +14137,16 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+ora@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-1.4.0.tgz#884458215b3a5d4097592285f93321bb7a79e2e5"
+  integrity sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==
+  dependencies:
+    chalk "^2.1.0"
+    cli-cursor "^2.1.0"
+    cli-spinners "^1.0.1"
+    log-symbols "^2.1.0"
+
 ora@^4.0.5:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ora/-/ora-4.1.1.tgz#566cc0348a15c36f5f0e979612842e02ba9dddbc"
@@ -13855,7 +14188,7 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0:
+os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
@@ -14039,6 +14372,33 @@ pacote@^11.2.6:
     ssri "^8.0.1"
     tar "^6.1.0"
 
+pacote@^2.7.36:
+  version "2.7.38"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-2.7.38.tgz#5091f8774298c26c3eca24606037f1bb73db74c1"
+  integrity sha512-XxHUyHQB7QCVBxoXeVu0yKxT+2PvJucsc0+1E+6f95lMUxEAYERgSAc71ckYXrYr35Ew3xFU/LrhdIK21GQFFA==
+  dependencies:
+    bluebird "^3.5.0"
+    cacache "^9.2.9"
+    glob "^7.1.2"
+    lru-cache "^4.1.1"
+    make-fetch-happen "^2.4.13"
+    minimatch "^3.0.4"
+    mississippi "^1.2.0"
+    normalize-package-data "^2.4.0"
+    npm-package-arg "^5.1.2"
+    npm-pick-manifest "^1.0.4"
+    osenv "^0.1.4"
+    promise-inflight "^1.0.1"
+    promise-retry "^1.1.1"
+    protoduck "^4.0.0"
+    safe-buffer "^5.1.1"
+    semver "^5.3.0"
+    ssri "^4.1.6"
+    tar-fs "^1.15.3"
+    tar-stream "^1.5.4"
+    unique-filename "^1.1.0"
+    which "^1.2.12"
+
 pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
@@ -14098,6 +14458,23 @@ parse-entities@^2.0.0:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-git-config@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-0.2.0.tgz#272833fdd15fea146fb75d336d236b963b6ff706"
+  integrity sha1-Jygz/dFf6hRvt10zbSNrljtv9wY=
+  dependencies:
+    ini "^1.3.3"
+
+parse-git-config@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/parse-git-config/-/parse-git-config-1.1.1.tgz#d3a9984317132f57398712bba438e129590ddf8c"
+  integrity sha1-06mYQxcTL1c5hxK7pDjhKVkN34w=
+  dependencies:
+    extend-shallow "^2.0.1"
+    fs-exists-sync "^0.1.0"
+    git-config-path "^1.0.1"
+    ini "^1.3.4"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
@@ -14650,6 +15027,13 @@ postcss-lab-function@^2.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-less@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-4.0.1.tgz#73caf5dac056d4b706f4cc136cefeaf4e79067a4"
+  integrity sha512-C92S4sHlbDpefJ2QQJjrucCcypq3+KZPstjfuvgOCNnGx0tF9h8hXgAlOIATGAxMXZXaF+nVp+/Mi8pCAWdSmw==
+  dependencies:
+    postcss "^8.1.2"
+
 postcss-load-config@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
@@ -14667,7 +15051,7 @@ postcss-load-config@^3.0.0:
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
-postcss-loader@3.0.0, postcss-loader@^3.0.0:
+postcss-loader@3.0.0, postcss-loader@^3.0.0, postcss-loader@^3.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
   integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
@@ -15300,6 +15684,15 @@ postcss@^8.0.0, postcss@^8.2.15:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+postcss@^8.1.2:
+  version "8.3.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.7.tgz#ec88563588c8da8e58e7226f7633b51ae221eeda"
+  integrity sha512-9SaY7nnyQ63/WittqZYAvkkYPyKxchMKH71UDzeTmWuLSvxTRpeEeABZAzlCi55cuGcoFyoV/amX2BdsafQidQ==
+  dependencies:
+    nanocolors "^0.1.5"
+    nanoid "^3.1.25"
+    source-map-js "^0.6.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -15342,11 +15735,6 @@ prettier@^2.1.2, prettier@^2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
   integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
 
-prettier@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.0.tgz#85bdfe0f70c3e777cf13a4ffff39713ca6f64cba"
-  integrity sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==
-
 pretty-error@^2.0.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
@@ -15454,6 +15842,14 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+promise-retry@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
+  integrity sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=
+  dependencies:
+    err-code "^1.0.0"
+    retry "^0.10.0"
+
 promise-retry@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
@@ -15504,7 +15900,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -15559,6 +15955,13 @@ protocols@^1.1.0, protocols@^1.4.0:
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
   integrity sha512-IgjKyaUSjsROSO8/D49Ab7hP8mJgTYcqApOqdPhLoPxAplXmkp+zRvsrSQjFn5by0rhm4VH0GAUELIPpx7B1yg==
 
+protoduck@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/protoduck/-/protoduck-4.0.0.tgz#fe4874d8c7913366cfd9ead12453a22cd3657f8e"
+  integrity sha1-/kh02MeRM2bP2erRJFOiLNNlf44=
+  dependencies:
+    genfun "^4.0.1"
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -15594,7 +15997,15 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
-pump@^2.0.0:
+pump@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
+  integrity sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^2.0.0, pump@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
   integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
@@ -15724,6 +16135,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+queue@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.1.tgz#abd5a5b0376912f070a25729e0b6a7d565683791"
+  integrity sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==
+  dependencies:
+    inherits "~2.0.3"
+
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
@@ -16143,19 +16561,6 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-color@^2.19.3:
-  version "2.19.3"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
-  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
-  dependencies:
-    "@icons/material" "^0.2.4"
-    lodash "^4.17.15"
-    lodash-es "^4.17.15"
-    material-colors "^1.2.1"
-    prop-types "^15.5.10"
-    reactcss "^1.2.0"
-    tinycolor2 "^1.4.1"
-
 react-docgen-typescript-dumi-tmp@^1.22.1-0:
   version "1.22.1-0"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-dumi-tmp/-/react-docgen-typescript-dumi-tmp-1.22.1-0.tgz#6f452de05c5c114a6e1dd60b34930afaa7ae39a0"
@@ -16224,14 +16629,6 @@ react-mde@^11.5.0:
   resolved "https://registry.yarnpkg.com/react-mde/-/react-mde-11.5.0.tgz#3e81a505071aa80287fb23a1c0ce5e8b34c82055"
   integrity sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag==
 
-react-monaco-editor@^0.43.0:
-  version "0.43.0"
-  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.43.0.tgz#495578470db7b27ab306af813b31f206a6bf9d1c"
-  integrity sha512-2PXSDwOzjUDlwdsK8psrmezSB2lPnjLQ/SRNwqoRF2+TAB2n4Q+Bs1wGlWOZbU8WI7s6Wnni0+3PdT9nSPtzRA==
-  dependencies:
-    monaco-editor "*"
-    prop-types "^15.7.2"
-
 react-refresh@0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
@@ -16309,11 +16706,6 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react-tiny-popover@^6.0.5:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/react-tiny-popover/-/react-tiny-popover-6.0.10.tgz#6167a1b4a1ae6cf847d2909057defd00d95d726c"
-  integrity sha512-ECMucd701SxWHGa+2YuVvccCxxTjmhomcD0ZYTF+Qmi5qNAj8pdlExFN+k+p1G78QTYIGPGNLocxRb9f6cZ0Mw==
-
 react-transition-group@^2.0.0, react-transition-group@^2.2.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -16360,13 +16752,6 @@ react@next:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-reactcss@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
-  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
-  dependencies:
-    lodash "^4.0.1"
-
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
@@ -16488,7 +16873,7 @@ read@1, read@^1.0.7, read@~1.0.1:
   dependencies:
     mute-stream "~0.0.4"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -16796,6 +17181,20 @@ remark-stringify@^9.0.0:
   dependencies:
     mdast-util-to-markdown "^0.6.0"
 
+remote-origin-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/remote-origin-url/-/remote-origin-url-0.4.0.tgz#4d3e2902f34e2d37d1c263d87710b77eb4086a30"
+  integrity sha1-TT4pAvNOLTfRwmPYdxC3frQIajA=
+  dependencies:
+    parse-git-config "^0.2.0"
+
+remote-origin-url@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/remote-origin-url/-/remote-origin-url-0.5.3.tgz#b9fc6ced2c826690d0b07218b2b8c17fcec88e87"
+  integrity sha512-crQ7Xk1m/F2IiwBx5oTqk/c0hjoumrEz+a36+ZoVupskQRE/q7pAwHKsTNeiZ31sbSTELvVlVv4h1W0Xo5szKg==
+  dependencies:
+    parse-git-config "^1.1.1"
+
 remove-markdown@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/remove-markdown/-/remove-markdown-0.2.2.tgz#66b0ceeba9fb77ca9636bb1b0307ce21a32a12a6"
@@ -16860,11 +17259,6 @@ request@^2.87.0, request@^2.88.0, request@^2.88.2:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-requestidlecallback@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/requestidlecallback/-/requestidlecallback-0.3.0.tgz#6fb74e0733f90df3faa4838f9f6a2a5f9b742ac5"
-  integrity sha1-b7dOBzP5DfP6pIOPn2oqX5t0KsU=
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -16899,6 +17293,14 @@ resolve-cwd@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
+resolve-dir@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
+  integrity sha1-shklmlYC+sXFxJatiUpujMQwJh4=
+  dependencies:
+    expand-tilde "^1.2.2"
+    global-modules "^0.2.3"
+
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
@@ -16989,6 +17391,11 @@ retry-request@^4.0.0, retry-request@^4.2.2:
     debug "^4.1.1"
     extend "^3.0.2"
 
+retry@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
+  integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
+
 retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
@@ -17014,7 +17421,7 @@ right-pad@^1.0.1:
   resolved "https://registry.yarnpkg.com/right-pad/-/right-pad-1.0.1.tgz#8ca08c2cbb5b55e74dafa96bf7fd1a27d568c8d0"
   integrity sha1-jKCMLLtbVedNr6lr9/0aJ9VoyNA=
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -17346,12 +17753,12 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-semver-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
-  integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
+semver-regex@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.3.tgz#b2bcc6f97f63269f286994e297e229b6245d0dc3"
+  integrity sha512-Aqi54Mk9uYTjVexLnR67rTyBusmwd04cLkHy9hNvk3+G3nT2Oyg7E0l4XVbOaNwIvQ3hHeYxGcyEy+mKreyBFQ==
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -17529,6 +17936,13 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.8:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
+  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
+  dependencies:
+    nanoid "^2.1.0"
+
 showdown@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
@@ -17637,6 +18051,11 @@ slide@^1.1.6:
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
   integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
 
+smart-buffer@^1.0.13:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-1.1.15.tgz#7f114b5b65fab3e2a35aa775bb12f0d1c649bf16"
+  integrity sha1-fxFLW2X6s+KjWqd1uxLw0cZJvxY=
+
 smart-buffer@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
@@ -17698,6 +18117,14 @@ sockjs@^0.3.21:
     uuid "^3.4.0"
     websocket-driver "^0.7.4"
 
+socks-proxy-agent@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-3.0.1.tgz#2eae7cf8e2a82d34565761539a7f9718c5617659"
+  integrity sha512-ZwEDymm204mTzvdqyUqOdovVr2YRd2NYskrYrF2LXyZ9qDiMAoFESGK8CRphiO7rtbo2Y757k2Nia3x2hGtalA==
+  dependencies:
+    agent-base "^4.1.0"
+    socks "^1.1.10"
+
 socks-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-5.0.1.tgz#032fb583048a29ebffec2e6a73fca0761f48177e"
@@ -17716,6 +18143,14 @@ socks-proxy-agent@^6.0.0:
     debug "^4.3.1"
     socks "^2.6.1"
 
+socks@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-1.1.10.tgz#5b8b7fc7c8f341c53ed056e929b7bf4de8ba7b5a"
+  integrity sha1-W4t/x8jzQcU+0FbpKbe/Tei6e1o=
+  dependencies:
+    ip "^1.1.4"
+    smart-buffer "^1.0.13"
+
 socks@^2.3.3, socks@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.1.tgz#989e6534a07cf337deb1b1c94aaa44296520d30e"
@@ -17936,6 +18371,20 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssri@^4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-4.1.6.tgz#0cb49b6ac84457e7bdd466cb730c3cb623e9a25b"
+  integrity sha512-WUbCdgSAMQjTFZRWvSPpauryvREEA+Krn19rx67UlJEJx/M192ZHxMmJXjZ4tkdFm+Sb0SXGlENeQVlA5wY7kA==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+ssri@^5.0.0, ssri@^5.2.4:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.3.0.tgz#ba3872c9c6d33a0704a7d71ff045e5ec48999d06"
+  integrity sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==
+  dependencies:
+    safe-buffer "^5.1.1"
+
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
@@ -17984,11 +18433,6 @@ staged-git-files@^1.1.2:
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.2.0.tgz#05b43f4fcec6d4799ac41c826ecd17c0bd53ce82"
   integrity sha512-MYK3aDsO8XAXkv2ASsrznObxVDlocYm7gc/cMk/hB4vbJZeEqOO7H1mZR7EY2C5q3YgKOBo3Tmu0D30h7RjdWg==
 
-state-local@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
-  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -18487,6 +18931,29 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tar-fs@^1.15.3:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.3.tgz#966a628841da2c4010406a82167cbd5e0c72d509"
+  integrity sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==
+  dependencies:
+    chownr "^1.0.1"
+    mkdirp "^0.5.1"
+    pump "^1.0.0"
+    tar-stream "^1.1.2"
+
+tar-stream@^1.1.2, tar-stream@^1.5.4:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
+  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
+  dependencies:
+    bl "^1.0.0"
+    buffer-alloc "^1.2.0"
+    end-of-stream "^1.0.0"
+    fs-constants "^1.0.0"
+    readable-stream "^2.3.0"
+    to-buffer "^1.1.1"
+    xtend "^4.0.0"
+
 tar@^4.4.12:
   version "4.4.19"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.19.tgz#2e4d7263df26f2b914dee10c825ab132123742f3"
@@ -18627,6 +19094,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+textextensions@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
+  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
@@ -18711,6 +19183,11 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
+to-buffer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
+  integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
+
 to-factory@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/to-factory/-/to-factory-1.0.0.tgz#8738af8bd97120ad1d4047972ada5563bf9479b1"
@@ -19143,7 +19620,7 @@ uniqs@^2.0.0:
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
   integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
-unique-filename@^1.1.1:
+unique-filename@^1.1.0, unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
   integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
@@ -20027,7 +20504,7 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which@^1.2.10, which@^1.2.14, which@^1.2.8, which@^1.2.9, which@^1.3.1:
+which@^1.2.10, which@^1.2.12, which@^1.2.14, which@^1.2.8, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -20218,6 +20695,11 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+y18n@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"