refactor(tree): Refactor tree to support antv3.0

vben
1 parent 50cf2d0b
Showing 21 changed files with 1139 additions and 835 deletions
.eslintrc.js
.vscode/settings.json
build/vite/plugin/hmr.ts
build/vite/plugin/styleImport.ts
package.json
pnpm-lock.yaml
src/components/Tree/index.ts
src/components/Tree/src/Tree.vue
src/components/Tree/src/TreeHeader.vue
src/components/Tree/src/TreeIcon.ts
src/components/Tree/src/props.ts
src/components/Tree/src/tree.ts
src/components/Tree/src/typing.ts
src/components/Tree/src/useTree.ts
src/components/Tree/style/index.less
src/components/Tree/style/index.ts
src/main.ts
src/utils/bem.ts
src/utils/props.ts
src/utils/types.ts
@@ -62,6 +62,7 @@ module.exports = defineConfig({
     'vue/singleline-html-element-content-newline': 'off',
     'vue/attribute-hyphenation': 'off',
     'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
     'vue/html-self-closing': [
       'error',
       {
@@ -74,6 +75,6 @@ module.exports = defineConfig({
         math: 'always',
       },
     ],
-		'vue/multi-word-component-names': 'off'
+    'vue/multi-word-component-names': 'off',
   },
 });
@@ -132,6 +132,7 @@
     "brotli",
     "tailwindcss",
     "sider",
-    "pnpm"
+    "pnpm",
+    "antd"
   ]
 }
@@ -9,17 +9,17 @@ import type { Plugin } from &#39;vite&#39;;
 export function configHmrPlugin(): Plugin {
   return {
     name: 'singleHMR',
-    handleHotUpdate({ modules, file }) {
-      if (file.match(/xml$/)) return [];
+    // handleHotUpdate({ modules, file }) {
+    //   if (file.match(/xml$/)) return [];
-      modules.forEach((m) => {
-        if (!m.url.match(/\.(css|less)/)) {
-          m.importedModules = new Set();
-          m.importers = new Set();
-        }
-      });
+    //   modules.forEach((m) => {
+    //     if (!m.url.match(/\.(css|less)/)) {
+    //       m.importedModules = new Set();
+    //       m.importers = new Set();
+    //     }
+    //   });
-      return modules;
-    },
+    //   return modules;
+    // },
   };
 }
@@ -4,10 +4,10 @@
  */
 import styleImport from 'vite-plugin-style-import';
-export function configStyleImportPlugin(isBuild: boolean) {
-  if (!isBuild) {
-    return [];
-  }
+export function configStyleImportPlugin(_isBuild: boolean) {
+  // if (!isBuild) {
+  //   return [];
+  // }
   const styleImportPlugin = styleImport({
     libs: [
       {
@@ -19,6 +19,7 @@ export function configStyleImportPlugin(isBuild: boolean) {
             'anchor-link',
             'sub-menu',
             'menu-item',
+            'menu-divider',
             'menu-item-group',
             'breadcrumb-item',
             'breadcrumb-separator',
@@ -72,7 +72,7 @@
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@iconify/json": "^2.0.2",
+    "@iconify/json": "^2.0.3",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.5",
     "@types/crypto-js": "^4.0.2",
@@ -110,7 +110,7 @@
     "fs-extra": "^10.0.0",
     "husky": "^7.0.4",
     "inquirer": "^8.2.0",
-    "jest": "^27.3.1",
+    "jest": "^27.4.0",
     "less": "^4.1.2",
     "lint-staged": "12.1.2",
     "npm-run-all": "^4.1.5",
@@ -135,14 +135,14 @@
     "vite-plugin-imagemin": "^0.4.6",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.7.0",
-    "vite-plugin-pwa": "^0.11.7",
+    "vite-plugin-pwa": "^0.11.8",
     "vite-plugin-style-import": "^1.4.0",
     "vite-plugin-svg-icons": "^1.0.5",
     "vite-plugin-theme": "^0.8.1",
     "vite-plugin-vue-setup-extend": "^0.1.0",
     "vite-plugin-windicss": "^1.5.3",
     "vue-eslint-parser": "^8.0.1",
-    "vue-tsc": "^0.29.6"
+    "vue-tsc": "^0.29.7"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
@@ -12,7 +12,7 @@ specifiers:
   '@commitlint/cli': ^15.0.0
   '@commitlint/config-conventional': ^15.0.0
   '@iconify/iconify': ^2.1.0
-  '@iconify/json': ^2.0.2
+  '@iconify/json': ^2.0.3
   '@logicflow/core': ^0.7.10
   '@logicflow/extension': ^0.7.10
   '@purge-icons/generated': ^0.7.0
@@ -63,7 +63,7 @@ specifiers:
   husky: ^7.0.4
   inquirer: ^8.2.0
   intro.js: ^4.3.0
-  jest: ^27.3.1
+  jest: ^27.4.0
   less: ^4.1.2
   lint-staged: 12.1.2
   lodash-es: ^4.17.21
@@ -101,7 +101,7 @@ specifiers:
   vite-plugin-imagemin: ^0.4.6
   vite-plugin-mock: ^2.9.6
   vite-plugin-purge-icons: ^0.7.0
-  vite-plugin-pwa: ^0.11.7
+  vite-plugin-pwa: ^0.11.8
   vite-plugin-style-import: ^1.4.0
   vite-plugin-svg-icons: ^1.0.5
   vite-plugin-theme: ^0.8.1
@@ -112,7 +112,7 @@ specifiers:
   vue-i18n: ^9.1.9
   vue-json-pretty: ^2.0.6
   vue-router: ^4.0.12
-  vue-tsc: ^0.29.6
+  vue-tsc: ^0.29.7
   vue-types: ^4.1.1
   xlsx: ^0.17.4
@@ -156,7 +156,7 @@ dependencies:
 devDependencies:
   '@commitlint/cli': 15.0.0
   '@commitlint/config-conventional': 15.0.0
-  '@iconify/json': 2.0.2
+  '@iconify/json': 2.0.3
   '@purge-icons/generated': 0.7.0
   '@types/codemirror': 5.60.5
   '@types/crypto-js': 4.0.2
@@ -187,14 +187,14 @@ devDependencies:
   eslint: 8.3.0
   eslint-config-prettier: 8.3.0_eslint@8.3.0
   eslint-define-config: 1.2.0
-  eslint-plugin-jest: 25.3.0_4e52e098c69dc02e5d836ed593524821
+  eslint-plugin-jest: 25.3.0_4a9aadc9705c463d5cb0fc674dd30934
   eslint-plugin-prettier: 4.0.0_d8c6a2a4ba8850181fffb74d8e835cec
   eslint-plugin-vue: 8.1.1_eslint@8.3.0
   esno: 0.12.1_typescript@4.5.2
   fs-extra: 10.0.0
   husky: 7.0.4
   inquirer: 8.2.0
-  jest: 27.3.1_ts-node@10.4.0
+  jest: 27.4.0_ts-node@10.4.0
   less: 4.1.2
   lint-staged: 12.1.2
   npm-run-all: 4.1.5
@@ -210,7 +210,7 @@ devDependencies:
   stylelint-config-recommended: 6.0.0_stylelint@14.1.0
   stylelint-config-standard: 24.0.0_stylelint@14.1.0
   stylelint-order: 5.0.0_stylelint@14.1.0
-  ts-jest: 27.0.7_7e2a439bb7b53c38ff0c1a3c5e04c2c5
+  ts-jest: 27.0.7_bfad92f4d8caf69d57ace222bbbf1afc
   ts-node: 10.4.0_36929cccfdb926da0bb85cc291f27124
   typescript: 4.5.2
   vite: 2.7.0-beta.9_less@4.1.2
@@ -219,14 +219,14 @@ devDependencies:
   vite-plugin-imagemin: 0.4.6_vite@2.7.0-beta.9
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.7.0-beta.9
   vite-plugin-purge-icons: 0.7.0_vite@2.7.0-beta.9
-  vite-plugin-pwa: 0.11.7_vite@2.7.0-beta.9
+  vite-plugin-pwa: 0.11.8_vite@2.7.0-beta.9
   vite-plugin-style-import: 1.4.0_vite@2.7.0-beta.9
   vite-plugin-svg-icons: 1.0.5_vite@2.7.0-beta.9
   vite-plugin-theme: 0.8.1_vite@2.7.0-beta.9
   vite-plugin-vue-setup-extend: 0.1.0_vite@2.7.0-beta.9
   vite-plugin-windicss: 1.5.3_vite@2.7.0-beta.9
   vue-eslint-parser: 8.0.1_eslint@8.3.0
-  vue-tsc: 0.29.6_typescript@4.5.2
+  vue-tsc: 0.29.7_typescript@4.5.2
 packages:
@@ -386,7 +386,7 @@ packages:
       '@babel/helper-module-imports': 7.16.0
       '@babel/helper-plugin-utils': 7.14.5
       '@babel/traverse': 7.16.3
-      debug: 4.3.2
+      debug: 4.3.3
       lodash.debounce: 4.0.8
       resolve: 1.20.0
       semver: 6.3.0
@@ -1685,8 +1685,8 @@ packages:
     dependencies:
       cross-fetch: 3.1.4
-  /@iconify/json/2.0.2:
-    resolution: {integrity: sha512-LcGJCnYcnTBrbLEjC8ynJ9T2Pj5C3nt6dKksZAb+kCYD1kQReDen/Pjvo5ggFE1JkwMrBrzbjojR87YQGnh12g==}
+  /@iconify/json/2.0.3:
+    resolution: {integrity: sha512-aAbuycbHyjaepxsj+Vp2u6AO9VIfbFiHQ1NO8lYdsH2IYCauXWeVSe+rBkkIntxGcc0dgYL/+jAX0s+R3oCNvQ==}
     dependencies:
       '@iconify/types': 1.0.12
       pathe: 0.0.2
@@ -1768,20 +1768,20 @@ packages:
     engines: {node: '>=8'}
     dev: true
-  /@jest/console/27.3.1:
-    resolution: {integrity: sha512-RkFNWmv0iui+qsOr/29q9dyfKTTT5DCuP31kUwg7rmOKPT/ozLeGLKJKVIiOfbiKyleUZKIrHwhmiZWVe8IMdw==}
+  /@jest/console/27.4.0:
+    resolution: {integrity: sha512-2m7Xwcd1zTWtai5DCl+b0TAfoH8p5uqUoKmfzJCAfCrIwoJAf3xB+4nx3eKEGoyNfg5oavrh3gjbZ1n5z5eh4Q==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       chalk: 4.1.2
-      jest-message-util: 27.3.1
-      jest-util: 27.3.1
+      jest-message-util: 27.4.0
+      jest-util: 27.4.0
       slash: 3.0.0
     dev: true
-  /@jest/core/27.3.1_ts-node@10.4.0:
-    resolution: {integrity: sha512-DMNE90RR5QKx0EA+wqe3/TNEwiRpOkhshKNxtLxd4rt3IZpCt+RSL+FoJsGeblRZmqdK4upHA/mKKGPPRAifhg==}
+  /@jest/core/27.4.0_ts-node@10.4.0:
+    resolution: {integrity: sha512-P6eoNIbE0OeenvCxrwdj0jRgeZg8r4eXNCS2zMgAS8EADzdp03mKe7TNwCsEPr460QIYCBwJo4W8wqai3UPXOA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -1789,30 +1789,30 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/console': 27.3.1
-      '@jest/reporters': 27.3.1
-      '@jest/test-result': 27.3.1
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/console': 27.4.0
+      '@jest/reporters': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.8.1
       exit: 0.1.2
       graceful-fs: 4.2.8
-      jest-changed-files: 27.3.0
-      jest-config: 27.3.1_ts-node@10.4.0
-      jest-haste-map: 27.3.1
-      jest-message-util: 27.3.1
-      jest-regex-util: 27.0.6
-      jest-resolve: 27.3.1
-      jest-resolve-dependencies: 27.3.1
-      jest-runner: 27.3.1
-      jest-runtime: 27.3.1
-      jest-snapshot: 27.3.1
-      jest-util: 27.3.1
-      jest-validate: 27.3.1
-      jest-watcher: 27.3.1
+      jest-changed-files: 27.4.0
+      jest-config: 27.4.0_ts-node@10.4.0
+      jest-haste-map: 27.4.0
+      jest-message-util: 27.4.0
+      jest-regex-util: 27.4.0
+      jest-resolve: 27.4.0
+      jest-resolve-dependencies: 27.4.0
+      jest-runner: 27.4.0
+      jest-runtime: 27.4.0
+      jest-snapshot: 27.4.0
+      jest-util: 27.4.0
+      jest-validate: 27.4.0
+      jest-watcher: 27.4.0
       micromatch: 4.0.4
       rimraf: 3.0.2
       slash: 3.0.0
@@ -1825,39 +1825,39 @@ packages:
       - utf-8-validate
     dev: true
-  /@jest/environment/27.3.1:
-    resolution: {integrity: sha512-BCKCj4mOVLme6Tanoyc9k0ultp3pnmuyHw73UHRPeeZxirsU/7E3HC4le/VDb/SMzE1JcPnto+XBKFOcoiJzVw==}
+  /@jest/environment/27.4.0:
+    resolution: {integrity: sha512-7HJ1c6lVNuxrj9PT5AD4yVDDqFt9B0lLsshxZJXShL/LOkLnBO4MoZMH3w1lXQJY3zxk3/l1yg2j7uRKpxF4yw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/fake-timers': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/fake-timers': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
-      jest-mock: 27.3.0
+      jest-mock: 27.4.0
     dev: true
-  /@jest/fake-timers/27.3.1:
-    resolution: {integrity: sha512-M3ZFgwwlqJtWZ+QkBG5NmC23A9w+A6ZxNsO5nJxJsKYt4yguBd3i8TpjQz5NfCX91nEve1KqD9RA2Q+Q1uWqoA==}
+  /@jest/fake-timers/27.4.0:
+    resolution: {integrity: sha512-oyMxDKlj/ThRms9eS0xFkxmUvjJ8lHsNS4gNErDRFSruTER1/OQi2L5N0sJav+/AcBoY/Pa313CpB6RgdDacGA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       '@sinonjs/fake-timers': 8.1.0
       '@types/node': 16.11.10
-      jest-message-util: 27.3.1
-      jest-mock: 27.3.0
-      jest-util: 27.3.1
+      jest-message-util: 27.4.0
+      jest-mock: 27.4.0
+      jest-util: 27.4.0
     dev: true
-  /@jest/globals/27.3.1:
-    resolution: {integrity: sha512-Q651FWiWQAIFiN+zS51xqhdZ8g9b88nGCobC87argAxA7nMfNQq0Q0i9zTfQYgLa6qFXk2cGANEqfK051CZ8Pg==}
+  /@jest/globals/27.4.0:
+    resolution: {integrity: sha512-jIkd2RSV18wvOqFx5climVkwONuxqNKD8jHMvIumj8+E0qqWqymBcWymidjbxmJ3L3Zr60l0lAJGKw0BstREeQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/environment': 27.3.1
-      '@jest/types': 27.2.5
-      expect: 27.3.1
+      '@jest/environment': 27.4.0
+      '@jest/types': 27.4.0
+      expect: 27.4.0
     dev: true
-  /@jest/reporters/27.3.1:
-    resolution: {integrity: sha512-m2YxPmL9Qn1emFVgZGEiMwDntDxRRQ2D58tiDQlwYTg5GvbFOKseYCcHtn0WsI8CG4vzPglo3nqbOiT8ySBT/w==}
+  /@jest/reporters/27.4.0:
+    resolution: {integrity: sha512-QqIdI9WBH5tBwSHZ81FEZkt3h8fvw+zdV0YQrUtdEbJEBGV/AHgRsIP23sdD/ybLfRFpjZJEyWT+7dM4mxnPYQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -1866,10 +1866,10 @@ packages:
         optional: true
     dependencies:
       '@bcoe/v8-coverage': 0.2.3
-      '@jest/console': 27.3.1
-      '@jest/test-result': 27.3.1
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/console': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       chalk: 4.1.2
       collect-v8-coverage: 1.0.1
@@ -1881,10 +1881,10 @@ packages:
       istanbul-lib-report: 3.0.0
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.0.5
-      jest-haste-map: 27.3.1
-      jest-resolve: 27.3.1
-      jest-util: 27.3.1
-      jest-worker: 27.3.1
+      jest-haste-map: 27.4.0
+      jest-resolve: 27.4.0
+      jest-util: 27.4.0
+      jest-worker: 27.4.0
       slash: 3.0.0
       source-map: 0.6.1
       string-length: 4.0.2
@@ -1894,8 +1894,8 @@ packages:
       - supports-color
     dev: true
-  /@jest/source-map/27.0.6:
-    resolution: {integrity: sha512-Fek4mi5KQrqmlY07T23JRi0e7Z9bXTOOD86V/uS0EIW4PClvPDqZOyFlLpNJheS6QI0FNX1CgmPjtJ4EA/2M+g==}
+  /@jest/source-map/27.4.0:
+    resolution: {integrity: sha512-Ntjx9jzP26Bvhbm93z/AKcPRj/9wrkI88/gK60glXDx1q+IeI0rf7Lw2c89Ch6ofonB0On/iRDreQuQ6te9pgQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       callsites: 3.1.0
@@ -1903,42 +1903,42 @@ packages:
       source-map: 0.6.1
     dev: true
-  /@jest/test-result/27.3.1:
-    resolution: {integrity: sha512-mLn6Thm+w2yl0opM8J/QnPTqrfS4FoXsXF2WIWJb2O/GBSyResL71BRuMYbYRsGt7ELwS5JGcEcGb52BNrumgg==}
+  /@jest/test-result/27.4.0:
+    resolution: {integrity: sha512-/RiwMUC9pKK1E85CEflPvb4uE4Zo9JK2Iq3RbkbBoj4FkEASb/Zsqta8WGot2J1GxOk3rqdW513tfSDYQQJVpA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/console': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/console': 27.4.0
+      '@jest/types': 27.4.0
       '@types/istanbul-lib-coverage': 2.0.3
       collect-v8-coverage: 1.0.1
     dev: true
-  /@jest/test-sequencer/27.3.1:
-    resolution: {integrity: sha512-siySLo07IMEdSjA4fqEnxfIX8lB/lWYsBPwNFtkOvsFQvmBrL3yj3k3uFNZv/JDyApTakRpxbKLJ3CT8UGVCrA==}
+  /@jest/test-sequencer/27.4.0:
+    resolution: {integrity: sha512-yKu+sjFgelc5zUf0kcbbsO86qV0NIMPyYFFRaWTaEsq+j7aueX/Zev+NcX+bm7BCwCMWeK7V5AUE6HUOblylHA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/test-result': 27.3.1
+      '@jest/test-result': 27.4.0
       graceful-fs: 4.2.8
-      jest-haste-map: 27.3.1
-      jest-runtime: 27.3.1
+      jest-haste-map: 27.4.0
+      jest-runtime: 27.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
-  /@jest/transform/27.3.1:
-    resolution: {integrity: sha512-3fSvQ02kuvjOI1C1ssqMVBKJpZf6nwoCiSu00zAKh5nrp3SptNtZy/8s5deayHnqxhjD9CWDJ+yqQwuQ0ZafXQ==}
+  /@jest/transform/27.4.0:
+    resolution: {integrity: sha512-/8Cb8kEoCtXN/Co5lvv+jG0zv4Uj3ruIvffYUzxNGRGmM7qqaHtOBZ3WbH0T1Nvjya5utTA4YtwbInZVS6Zt9A==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/core': 7.16.0
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 1.8.0
       fast-json-stable-stringify: 2.1.0
       graceful-fs: 4.2.8
-      jest-haste-map: 27.3.1
-      jest-regex-util: 27.0.6
-      jest-util: 27.3.1
+      jest-haste-map: 27.4.0
+      jest-regex-util: 27.4.0
+      jest-util: 27.4.0
       micromatch: 4.0.4
       pirates: 4.0.1
       slash: 3.0.0
@@ -1959,6 +1959,17 @@ packages:
       chalk: 4.1.2
     dev: true
+  /@jest/types/27.4.0:
+    resolution: {integrity: sha512-jIsLdASXMf8GS7P7oGFGwobNse/6Ewq3GBPHoo0i6XRmja+NrUoDqJm4a1ffF2bHGleKJizxokcp1sCqSktP3g==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.3
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 16.11.10
+      '@types/yargs': 16.0.4
+      chalk: 4.1.2
+    dev: true
+
   /@logicflow/core/0.7.10:
     resolution: {integrity: sha512-aZi/dH6aAsfvTrMgwcfPMWNRdDrpasOTr1E49DRlaMwKzUlczF2up4tnJooX/5O6oAQ/jiJ/pIzAmmWy3nwg4w==}
     dependencies:
@@ -2303,6 +2314,14 @@ packages:
       pretty-format: 27.3.1
     dev: true
+  /@types/jsdom/16.2.13:
+    resolution: {integrity: sha512-8JQCjdeAidptSsOcRWk2iTm9wCcwn9l+kRG6k5bzUacrnm1ezV4forq0kWjUih/tumAeoG+OspOvQEbbRucBTw==}
+    dependencies:
+      '@types/node': 16.11.10
+      '@types/parse5': 6.0.2
+      '@types/tough-cookie': 4.0.1
+    dev: true
+
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
     dev: true
@@ -2352,6 +2371,10 @@ packages:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
+  /@types/parse5/6.0.2:
+    resolution: {integrity: sha512-+hQX+WyJAOne7Fh3zF5CxPemILIbuhNcqHHodzK9caYOLnC8pD5efmPleRnw0z++LfKUC/sVNMwk0Gap+B0baA==}
+    dev: true
+
   /@types/prettier/2.4.2:
     resolution: {integrity: sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA==}
     dev: true
@@ -2414,6 +2437,10 @@ packages:
     resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
     dev: true
+  /@types/tough-cookie/4.0.1:
+    resolution: {integrity: sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==}
+    dev: true
+
   /@types/trusted-types/2.0.2:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
     dev: true
@@ -2571,15 +2598,15 @@ packages:
       vite: 2.7.0-beta.9_less@4.1.2
     dev: true
-  /@volar/code-gen/0.29.6:
-    resolution: {integrity: sha512-qF2YHUj1Wk8X9uozdKfVnOImXpoduqWp8qkmrXBKO1nxZLoou/7Y2VWJhDVm4uDkKpsMW1s7ttz+a2/hDRKf4A==}
+  /@volar/code-gen/0.29.7:
+    resolution: {integrity: sha512-PLcTp/37NMKA/urAkKCy+/oOCwNOsw0ywsz3Wc31c94bX6BAcMBHha5F3NPPY8U4CWuxoyxe2Enj0Ojdtkm2Kw==}
     dependencies:
-      '@volar/shared': 0.29.6
-      '@volar/source-map': 0.29.6
+      '@volar/shared': 0.29.7
+      '@volar/source-map': 0.29.7
     dev: true
-  /@volar/html2pug/0.29.6:
-    resolution: {integrity: sha512-GhDe7lkpa6F/UV0q5Bztsrxgd05QEtcbWECHk6LwHXIJSb3t6SKQswQJmgbEgk38c3rIp647D7s0E1BRW/rZHg==}
+  /@volar/html2pug/0.29.7:
+    resolution: {integrity: sha512-YEu1yl11pvyaElYDFzuo3kMr6Sr9c8n+BC93pF3e7ykDrejEq7GsUVlhzl1w41s6MjeheGD/Iq1vwVQE4o3E0A==}
     dependencies:
       domelementtype: 2.2.0
       domhandler: 4.2.2
@@ -2587,33 +2614,33 @@ packages:
       pug: 3.0.2
     dev: true
-  /@volar/shared/0.29.6:
-    resolution: {integrity: sha512-s397k+x70rHoccDwx6YVtpFOfAK+/b/bptRueLyQRM9d/21fk54csvC1bcc4Uk/fHw/j6p3FUfumohWtDRJ32w==}
+  /@volar/shared/0.29.7:
+    resolution: {integrity: sha512-n9TXdin0q4fyGodL5zKh2YMlelYeAxdeuGw8epmf0kolQc26bHici7AIhfj6mmpDox7zRZoqShHgmB4/zJolfw==}
     dependencies:
       upath: 2.0.1
       vscode-jsonrpc: 8.0.0-next.4
       vscode-uri: 3.0.2
     dev: true
-  /@volar/source-map/0.29.6:
-    resolution: {integrity: sha512-C8SFAu3nYsXeDR5mKQsr2fqf81SZI3rcbwCMLTjvps81lzFXboxWfmQIIDvdeKH91H2z/S8juHm3W3Prj3iLLg==}
+  /@volar/source-map/0.29.7:
+    resolution: {integrity: sha512-O2EI4kcqNQHzWa7V6HOdNFC2VLRJwH+fneTtDH4JAltDLJEhoIUb4jrBNcFGjY38W/KMUXqxKm00cUM+ktATjA==}
     dependencies:
-      '@volar/shared': 0.29.6
+      '@volar/shared': 0.29.7
     dev: true
-  /@volar/transforms/0.29.6:
-    resolution: {integrity: sha512-bST+MnQDueGGBtnhYgA3uWmfp8gUKaKKD5dy3HCGWaPIgcBmzzTwsg//beBaoyJpihKSCq9AaJQd+rNmVZredg==}
+  /@volar/transforms/0.29.7:
+    resolution: {integrity: sha512-5Yzm4NVQu4binahCA0tuTQyNhxC+VVddt0AsdhCPkUzO+hLR17Ye2QqIsFL72aMvC2tYA2vdNQ+0KxbeyIqG2Q==}
     dependencies:
-      '@volar/shared': 0.29.6
+      '@volar/shared': 0.29.7
       vscode-languageserver: 8.0.0-next.5
     dev: true
-  /@volar/vue-code-gen/0.29.6:
-    resolution: {integrity: sha512-N3TlKuvPHqVaRhoyh6zogG0UAAJX0gTWsWHiR9Cpu59RNlpgCTymigsnvzXBKAMsefhxpupy05dXn04Su1+ORA==}
+  /@volar/vue-code-gen/0.29.7:
+    resolution: {integrity: sha512-xrG2rtw5cKf+Os6qIa9EUPCTG1z4CeFmSKrzD5bAww/n+9QNMy6slkTSvnKjdCqvW4TzL8STlBWC96aEL1qoDA==}
     dependencies:
-      '@volar/code-gen': 0.29.6
-      '@volar/shared': 0.29.6
-      '@volar/source-map': 0.29.6
+      '@volar/code-gen': 0.29.7
+      '@volar/shared': 0.29.7
+      '@volar/source-map': 0.29.7
       '@vue/compiler-core': 3.2.23
       '@vue/compiler-dom': 3.2.23
       '@vue/shared': 3.2.23
@@ -2690,17 +2717,10 @@ packages:
     resolution: {integrity: sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q==}
     dev: false
-  /@vue/reactivity/3.2.22:
-    resolution: {integrity: sha512-xNkLAItjI0xB+lFeDgKCrSItmrHTaAzSnt8LmdSCPQnDyarmzbi/u4ESQnckWvlL7lSRKiEaOvblaNyqAa7OnQ==}
-    dependencies:
-      '@vue/shared': 3.2.22
-    dev: true
-
   /@vue/reactivity/3.2.23:
     resolution: {integrity: sha512-8RGVr/5Kpgb/EkCjgHXqttgA5IMc6n0lIXFY4TVbMkzdXrvaIhzBd7Te44oIDsTSYVKZLpfHd6/wEnuDqE8vFw==}
     dependencies:
       '@vue/shared': 3.2.23
-    dev: false
   /@vue/ref-transform/3.2.23:
     resolution: {integrity: sha512-gW0GD2PSAs/th7mC7tPB/UwpIQxclbApVtsDtscDmOJXb2+cdu60ny+SuHNgfrlUT/JqWKQHq7jFKO4woxLNaA==}
@@ -2736,10 +2756,6 @@ packages:
       vue: 3.2.23
     dev: false
-  /@vue/shared/3.2.22:
-    resolution: {integrity: sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==}
-    dev: true
-
   /@vue/shared/3.2.23:
     resolution: {integrity: sha512-U+/Jefa0QfXUF2qVy9Dqlrb6HKJSr9/wJcM66wXmWcTOoqg7hOWzF4qruDle51pyF4x3wMn6TSH54UdjKjCKMA==}
@@ -2883,7 +2899,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.2
+      debug: 4.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3156,18 +3172,18 @@ packages:
       - debug
     dev: false
-  /babel-jest/27.3.1_@babel+core@7.16.0:
-    resolution: {integrity: sha512-SjIF8hh/ir0peae2D6S6ZKRhUy7q/DnpH7k/V6fT4Bgs/LXXUztOpX4G2tCgq8mLo5HA9mN6NmlFMeYtKmIsTQ==}
+  /babel-jest/27.4.0_@babel+core@7.16.0:
+    resolution: {integrity: sha512-4855S+YT4Hx0OiXFDBOWhrMj1Y9zYE7StlchuZtr1vbo1LEDBIkt8U6+7cse8jkpJSV98w3nBVDrPgol5Ab/cQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
       '@babel/core': 7.16.0
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/babel__core': 7.1.16
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 27.2.0_@babel+core@7.16.0
+      babel-preset-jest: 27.4.0_@babel+core@7.16.0
       chalk: 4.1.2
       graceful-fs: 4.2.8
       slash: 3.0.0
@@ -3194,8 +3210,8 @@ packages:
       - supports-color
     dev: true
-  /babel-plugin-jest-hoist/27.2.0:
-    resolution: {integrity: sha512-TOux9khNKdi64mW+0OIhcmbAn75tTlzKhxmiNXevQaPbrBYK7YKjP1jl6NHTJ6XR5UgUrJbCnWlKVnJn29dfjw==}
+  /babel-plugin-jest-hoist/27.4.0:
+    resolution: {integrity: sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/template': 7.16.0
@@ -3260,14 +3276,14 @@ packages:
       '@babel/plugin-syntax-top-level-await': 7.14.5_@babel+core@7.16.0
     dev: true
-  /babel-preset-jest/27.2.0_@babel+core@7.16.0:
-    resolution: {integrity: sha512-z7MgQ3peBwN5L5aCqBKnF6iqdlvZvFUQynEhu0J+X9nHLU72jO3iY331lcYrg+AssJ8q7xsv5/3AICzVmJ/wvg==}
+  /babel-preset-jest/27.4.0_@babel+core@7.16.0:
+    resolution: {integrity: sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.16.0
-      babel-plugin-jest-hoist: 27.2.0
+      babel-plugin-jest-hoist: 27.4.0
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.16.0
     dev: true
@@ -4561,6 +4577,11 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dev: true
+  /diff-sequences/27.4.0:
+    resolution: {integrity: sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -5101,7 +5122,7 @@ packages:
     engines: {node: '>= 16.9.0', npm: '>= 7.0.0', pnpm: '>= 6.17.0'}
     dev: true
-  /eslint-plugin-jest/25.3.0_4e52e098c69dc02e5d836ed593524821:
+  /eslint-plugin-jest/25.3.0_4a9aadc9705c463d5cb0fc674dd30934:
     resolution: {integrity: sha512-79WQtuBsTN1S8Y9+7euBYwxIOia/k7ykkl9OCBHL3xuww5ecursHy/D8GCIlvzHVWv85gOkS5Kv6Sh7RxOgK1Q==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -5117,7 +5138,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 5.4.0_5c8ff4cecd5a55e744866c0654edac32
       '@typescript-eslint/experimental-utils': 5.4.0_eslint@8.3.0+typescript@4.5.2
       eslint: 8.3.0
-      jest: 27.3.1_ts-node@10.4.0
+      jest: 27.4.0_ts-node@10.4.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -5426,16 +5447,16 @@ packages:
       homedir-polyfill: 1.0.3
     dev: true
-  /expect/27.3.1:
-    resolution: {integrity: sha512-MrNXV2sL9iDRebWPGOGFdPQRl2eDQNu/uhxIMShjjx74T6kC6jFIkmQ6OqXDtevjGUkyB2IT56RzDBqXf/QPCg==}
+  /expect/27.4.0:
+    resolution: {integrity: sha512-3V4Nq5E5dS7bzFfinUThG0OnOnNIDdEPC0KG1pBgB1Z7ZTDVuuyvSBTOQewi0z0vaGKWPaJ880tGI+pPm+5aCg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       ansi-styles: 5.2.0
-      jest-get-type: 27.3.1
-      jest-matcher-utils: 27.3.1
-      jest-message-util: 27.3.1
-      jest-regex-util: 27.0.6
+      jest-get-type: 27.4.0
+      jest-matcher-utils: 27.4.0
+      jest-message-util: 27.4.0
+      jest-regex-util: 27.4.0
     dev: true
   /ext-list/2.2.2:
@@ -6344,7 +6365,7 @@ packages:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.3.2
+      debug: 4.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6354,7 +6375,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.2
+      debug: 4.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7026,7 +7047,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.3.2
+      debug: 4.3.3
       istanbul-lib-coverage: 3.2.0
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -7059,35 +7080,35 @@ packages:
       minimatch: 3.0.4
     dev: true
-  /jest-changed-files/27.3.0:
-    resolution: {integrity: sha512-9DJs9garMHv4RhylUMZgbdCJ3+jHSkpL9aaVKp13xtXAD80qLTLrqcDZL1PHA9dYA0bCI86Nv2BhkLpLhrBcPg==}
+  /jest-changed-files/27.4.0:
+    resolution: {integrity: sha512-TacYni8ZumaB10L/fGRH92MbLYkn+MF2KtgHeAOcwnOzfmt+S6CDmJeslZuLOpnRUQKkV/Vr4qPAlrBTE5r67A==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       execa: 5.1.1
       throat: 6.0.1
     dev: true
-  /jest-circus/27.3.1:
-    resolution: {integrity: sha512-v1dsM9II6gvXokgqq6Yh2jHCpfg7ZqV4jWY66u7npz24JnhP3NHxI0sKT7+ZMQ7IrOWHYAaeEllOySbDbWsiXw==}
+  /jest-circus/27.4.0:
+    resolution: {integrity: sha512-WYmHSsuH82HZqOHPU1vD2AKyzUp5t/0R7jT1XJ8ga+hIGR5Ddv6PUQeMJvjnftyLC0izSm3tZaIYB+H6FfYqZA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/environment': 27.3.1
-      '@jest/test-result': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/environment': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       chalk: 4.1.2
       co: 4.6.0
       dedent: 0.7.0
-      expect: 27.3.1
+      expect: 27.4.0
       is-generator-fn: 2.1.0
-      jest-each: 27.3.1
-      jest-matcher-utils: 27.3.1
-      jest-message-util: 27.3.1
-      jest-runtime: 27.3.1
-      jest-snapshot: 27.3.1
-      jest-util: 27.3.1
-      pretty-format: 27.3.1
+      jest-each: 27.4.0
+      jest-matcher-utils: 27.4.0
+      jest-message-util: 27.4.0
+      jest-runtime: 27.4.0
+      jest-snapshot: 27.4.0
+      jest-util: 27.4.0
+      pretty-format: 27.4.0
       slash: 3.0.0
       stack-utils: 2.0.5
       throat: 6.0.1
@@ -7095,8 +7116,8 @@ packages:
       - supports-color
     dev: true
-  /jest-cli/27.3.1_ts-node@10.4.0:
-    resolution: {integrity: sha512-WHnCqpfK+6EvT62me6WVs8NhtbjAS4/6vZJnk7/2+oOr50cwAzG4Wxt6RXX0hu6m1169ZGMlhYYUNeKBXCph/Q==}
+  /jest-cli/27.4.0_ts-node@10.4.0:
+    resolution: {integrity: sha512-cTL2ORt/ha+x6KJfVp0oTAyPmHVw7IJ+lA3kmT/kNcWoCiKa+t/JlF5x+nJ0UfL3/IQLV+ysYgu8MjGM8WXH+w==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
     peerDependencies:
@@ -7105,16 +7126,16 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.3.1_ts-node@10.4.0
-      '@jest/test-result': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/core': 27.4.0_ts-node@10.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/types': 27.4.0
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.8
       import-local: 3.0.3
-      jest-config: 27.3.1_ts-node@10.4.0
-      jest-util: 27.3.1
-      jest-validate: 27.3.1
+      jest-config: 27.4.0_ts-node@10.4.0
+      jest-util: 27.4.0
+      jest-validate: 27.4.0
       prompts: 2.4.2
       yargs: 16.2.0
     transitivePeerDependencies:
@@ -7125,8 +7146,8 @@ packages:
       - utf-8-validate
     dev: true
-  /jest-config/27.3.1_ts-node@10.4.0:
-    resolution: {integrity: sha512-KY8xOIbIACZ/vdYCKSopL44I0xboxC751IX+DXL2+Wx6DKNycyEfV3rryC3BPm5Uq/BBqDoMrKuqLEUNJmMKKg==}
+  /jest-config/27.4.0_ts-node@10.4.0:
+    resolution: {integrity: sha512-4ZDJd0HLX4snqDNOQYswMjQj7d7I2Bm8+TYIytDcRSAy7mkneQCKHBJu2NtIuzXxAoS2Sy+sjZ1UX/9L06zZCQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     peerDependencies:
       ts-node: '>=9.0.0'
@@ -7135,26 +7156,27 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.16.0
-      '@jest/test-sequencer': 27.3.1
-      '@jest/types': 27.2.5
-      babel-jest: 27.3.1_@babel+core@7.16.0
+      '@jest/test-sequencer': 27.4.0
+      '@jest/types': 27.4.0
+      babel-jest: 27.4.0_@babel+core@7.16.0
       chalk: 4.1.2
       ci-info: 3.3.0
       deepmerge: 4.2.2
       glob: 7.2.0
       graceful-fs: 4.2.8
-      jest-circus: 27.3.1
-      jest-environment-jsdom: 27.3.1
-      jest-environment-node: 27.3.1
-      jest-get-type: 27.3.1
-      jest-jasmine2: 27.3.1
-      jest-regex-util: 27.0.6
-      jest-resolve: 27.3.1
-      jest-runner: 27.3.1
-      jest-util: 27.3.1
-      jest-validate: 27.3.1
+      jest-circus: 27.4.0
+      jest-environment-jsdom: 27.4.0
+      jest-environment-node: 27.4.0
+      jest-get-type: 27.4.0
+      jest-jasmine2: 27.4.0
+      jest-regex-util: 27.4.0
+      jest-resolve: 27.4.0
+      jest-runner: 27.4.0
+      jest-util: 27.4.0
+      jest-validate: 27.4.0
       micromatch: 4.0.4
-      pretty-format: 27.3.1
+      pretty-format: 27.4.0
+      slash: 3.0.0
       ts-node: 10.4.0_36929cccfdb926da0bb85cc291f27124
     transitivePeerDependencies:
       - bufferutil
@@ -7173,34 +7195,45 @@ packages:
       pretty-format: 27.3.1
     dev: true
-  /jest-docblock/27.0.6:
-    resolution: {integrity: sha512-Fid6dPcjwepTFraz0YxIMCi7dejjJ/KL9FBjPYhBp4Sv1Y9PdhImlKZqYU555BlN4TQKaTc+F2Av1z+anVyGkA==}
+  /jest-diff/27.4.0:
+    resolution: {integrity: sha512-fdXgpnyQH4LNSnYgRfHN/g413bqbPspWIAZPlXrdNISehDih1VNDtuRvlzGQJ4Go+fur1HKB2IyI25t6cWi5EA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 27.4.0
+      jest-get-type: 27.4.0
+      pretty-format: 27.4.0
+    dev: true
+
+  /jest-docblock/27.4.0:
+    resolution: {integrity: sha512-7TBazUdCKGV7svZ+gh7C8esAnweJoG+SvcF6Cjqj4l17zA2q1cMwx2JObSioubk317H+cjcHgP+7fTs60paulg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       detect-newline: 3.1.0
     dev: true
-  /jest-each/27.3.1:
-    resolution: {integrity: sha512-E4SwfzKJWYcvOYCjOxhZcxwL+AY0uFMvdCOwvzgutJiaiodFjkxQQDxHm8FQBeTqDnSmKsQWn7ldMRzTn2zJaQ==}
+  /jest-each/27.4.0:
+    resolution: {integrity: sha512-dq6r/Uf6Q7sI/gND7WyCmQ7Z13p1CSusMkHEC//+schTrhTRe+ubPO2GtejHlWV+BldH6aMAAmtlEZgBroNrNg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       chalk: 4.1.2
-      jest-get-type: 27.3.1
-      jest-util: 27.3.1
-      pretty-format: 27.3.1
+      jest-get-type: 27.4.0
+      jest-util: 27.4.0
+      pretty-format: 27.4.0
     dev: true
-  /jest-environment-jsdom/27.3.1:
-    resolution: {integrity: sha512-3MOy8qMzIkQlfb3W1TfrD7uZHj+xx8Olix5vMENkj5djPmRqndMaXtpnaZkxmxM+Qc3lo+yVzJjzuXbCcZjAlg==}
+  /jest-environment-jsdom/27.4.0:
+    resolution: {integrity: sha512-fgM6g4WftTTpRA8dB5FnmS3n+PthwjTdMwl/Lcq2QlCo0I5smyD+t82bzO9tX5w6ygxbCbnP4VkSWWYdqO4j+w==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/environment': 27.3.1
-      '@jest/fake-timers': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/environment': 27.4.0
+      '@jest/fake-timers': 27.4.0
+      '@jest/types': 27.4.0
+      '@types/jsdom': 16.2.13
       '@types/node': 16.11.10
-      jest-mock: 27.3.0
-      jest-util: 27.3.1
+      jest-mock: 27.4.0
+      jest-util: 27.4.0
       jsdom: 16.7.0
     transitivePeerDependencies:
       - bufferutil
@@ -7209,16 +7242,16 @@ packages:
       - utf-8-validate
     dev: true
-  /jest-environment-node/27.3.1:
-    resolution: {integrity: sha512-T89F/FgkE8waqrTSA7/ydMkcc52uYPgZZ6q8OaZgyiZkJb5QNNCF6oPZjH9IfPFfcc9uBWh1574N0kY0pSvTXw==}
+  /jest-environment-node/27.4.0:
+    resolution: {integrity: sha512-VG3jLukpPhpffd7dUiC7+usyTG8Omytg4NOjGQtv88208O2AAMwcqpOAl1/uVOhUvbiegtVztyd3ZzAQtBxifA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/environment': 27.3.1
-      '@jest/fake-timers': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/environment': 27.4.0
+      '@jest/fake-timers': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
-      jest-mock: 27.3.0
-      jest-util: 27.3.1
+      jest-mock: 27.4.0
+      jest-util: 27.4.0
     dev: true
   /jest-get-type/27.3.1:
@@ -7226,94 +7259,99 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dev: true
-  /jest-haste-map/27.3.1:
-    resolution: {integrity: sha512-lYfNZIzwPccDJZIyk9Iz5iQMM/MH56NIIcGj7AFU1YyA4ewWFBl8z+YPJuSCRML/ee2cCt2y3W4K3VXPT6Nhzg==}
+  /jest-get-type/27.4.0:
+    resolution: {integrity: sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dev: true
+
+  /jest-haste-map/27.4.0:
+    resolution: {integrity: sha512-xTXw1/JBJvdvTEsnTlRj9u9AAg2t23r5GHbtc5eC6AuEIRPfGWV02Y67U0p4K1KpEWLsk9Pb3b6Kfde/5a3C5A==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       '@types/graceful-fs': 4.1.5
       '@types/node': 16.11.10
       anymatch: 3.1.2
       fb-watchman: 2.0.1
       graceful-fs: 4.2.8
-      jest-regex-util: 27.0.6
-      jest-serializer: 27.0.6
-      jest-util: 27.3.1
-      jest-worker: 27.3.1
+      jest-regex-util: 27.4.0
+      jest-serializer: 27.4.0
+      jest-util: 27.4.0
+      jest-worker: 27.4.0
       micromatch: 4.0.4
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
-  /jest-jasmine2/27.3.1:
-    resolution: {integrity: sha512-WK11ZUetDQaC09w4/j7o4FZDUIp+4iYWH/Lik34Pv7ukL+DuXFGdnmmi7dT58J2ZYKFB5r13GyE0z3NPeyJmsg==}
+  /jest-jasmine2/27.4.0:
+    resolution: {integrity: sha512-yvfWhQM/ZoxXfBZJdiKXCQxt18pOrciQUDqkT+EXtzhpKPIsbPdWCVv53NOqeWnRQR4HVhNgKK/fYD6BUXCxzA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/traverse': 7.16.3
-      '@jest/environment': 27.3.1
-      '@jest/source-map': 27.0.6
-      '@jest/test-result': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/environment': 27.4.0
+      '@jest/source-map': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       chalk: 4.1.2
       co: 4.6.0
-      expect: 27.3.1
+      expect: 27.4.0
       is-generator-fn: 2.1.0
-      jest-each: 27.3.1
-      jest-matcher-utils: 27.3.1
-      jest-message-util: 27.3.1
-      jest-runtime: 27.3.1
-      jest-snapshot: 27.3.1
-      jest-util: 27.3.1
-      pretty-format: 27.3.1
+      jest-each: 27.4.0
+      jest-matcher-utils: 27.4.0
+      jest-message-util: 27.4.0
+      jest-runtime: 27.4.0
+      jest-snapshot: 27.4.0
+      jest-util: 27.4.0
+      pretty-format: 27.4.0
       throat: 6.0.1
     transitivePeerDependencies:
       - supports-color
     dev: true
-  /jest-leak-detector/27.3.1:
-    resolution: {integrity: sha512-78QstU9tXbaHzwlRlKmTpjP9k4Pvre5l0r8Spo4SbFFVy/4Abg9I6ZjHwjg2QyKEAMg020XcjP+UgLZIY50yEg==}
+  /jest-leak-detector/27.4.0:
+    resolution: {integrity: sha512-d7QeqzIOVQeMI6VROLPNeYagcxPCvqYD6A34Ol9D+vPzs72omGXsGbuuJrChD51zuA4ESXcLYZ81L9JHr1VYGw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      jest-get-type: 27.3.1
-      pretty-format: 27.3.1
+      jest-get-type: 27.4.0
+      pretty-format: 27.4.0
     dev: true
-  /jest-matcher-utils/27.3.1:
-    resolution: {integrity: sha512-hX8N7zXS4k+8bC1Aj0OWpGb7D3gIXxYvPNK1inP5xvE4ztbz3rc4AkI6jGVaerepBnfWB17FL5lWFJT3s7qo8w==}
+  /jest-matcher-utils/27.4.0:
+    resolution: {integrity: sha512-vBy1tEyuKiItYgV9x9ubccyadOy5xAAmDBgXk8dMppXBXG4glggrGcZvE+8l1r+te477bRcFLB/hRyGm5Tdxzw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       chalk: 4.1.2
-      jest-diff: 27.3.1
-      jest-get-type: 27.3.1
-      pretty-format: 27.3.1
+      jest-diff: 27.4.0
+      jest-get-type: 27.4.0
+      pretty-format: 27.4.0
     dev: true
-  /jest-message-util/27.3.1:
-    resolution: {integrity: sha512-bh3JEmxsTZ/9rTm0jQrPElbY2+y48Rw2t47uMfByNyUVR+OfPh4anuyKsGqsNkXk/TI4JbLRZx+7p7Hdt6q1yg==}
+  /jest-message-util/27.4.0:
+    resolution: {integrity: sha512-2KmfpnxFwt+5CF0YST6U1IwFomX9gx2dmcAV/ZjzF9/4tlmieExl7Ch7D36l94mIxWTXhDuPji4XOvxRBdswrQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/code-frame': 7.16.0
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
       graceful-fs: 4.2.8
       micromatch: 4.0.4
-      pretty-format: 27.3.1
+      pretty-format: 27.4.0
       slash: 3.0.0
       stack-utils: 2.0.5
     dev: true
-  /jest-mock/27.3.0:
-    resolution: {integrity: sha512-ziZiLk0elZOQjD08bLkegBzv5hCABu/c8Ytx45nJKkysQwGaonvmTxwjLqEA4qGdasq9o2I8/HtdGMNnVsMTGw==}
+  /jest-mock/27.4.0:
+    resolution: {integrity: sha512-hQMpGIFEjhb6rtOz4JZcZaMdQytXjm54tBif9rpXfdzbEgYZ9+JGOUNqdtu3n09KG95/zEVwRI07HAuoSV1Dxw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
     dev: true
-  /jest-pnp-resolver/1.2.2_jest-resolve@27.3.1:
+  /jest-pnp-resolver/1.2.2_jest-resolve@27.4.0:
     resolution: {integrity: sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==}
     engines: {node: '>=6'}
     peerDependencies:
@@ -7322,65 +7360,65 @@ packages:
       jest-resolve:
         optional: true
     dependencies:
-      jest-resolve: 27.3.1
+      jest-resolve: 27.4.0
     dev: true
-  /jest-regex-util/27.0.6:
-    resolution: {integrity: sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==}
+  /jest-regex-util/27.4.0:
+    resolution: {integrity: sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dev: true
-  /jest-resolve-dependencies/27.3.1:
-    resolution: {integrity: sha512-X7iLzY8pCiYOnvYo2YrK3P9oSE8/3N2f4pUZMJ8IUcZnT81vlSonya1KTO9ZfKGuC+svE6FHK/XOb8SsoRUV1A==}
+  /jest-resolve-dependencies/27.4.0:
+    resolution: {integrity: sha512-D+Ean4nLgbRqhWCSKJIWpC36O7itmZbVQjnHWLF4brAP0r2sGATXjjhERIaiBCt/V2IhCDcH0EvS+PA7gSrf5g==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
-      jest-regex-util: 27.0.6
-      jest-snapshot: 27.3.1
+      '@jest/types': 27.4.0
+      jest-regex-util: 27.4.0
+      jest-snapshot: 27.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
-  /jest-resolve/27.3.1:
-    resolution: {integrity: sha512-Dfzt25CFSPo3Y3GCbxynRBZzxq9AdyNN+x/v2IqYx6KVT5Z6me2Z/PsSGFSv3cOSUZqJ9pHxilao/I/m9FouLw==}
+  /jest-resolve/27.4.0:
+    resolution: {integrity: sha512-XF54RYG9a9fHTlovCwC5U49TVAfCkHLoJnMhgaT2AYif4E5BechlKUAlhYE4fkbr1J5LzP7O9qfgRA5JSR8HzQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
       chalk: 4.1.2
       graceful-fs: 4.2.8
-      jest-haste-map: 27.3.1
-      jest-pnp-resolver: 1.2.2_jest-resolve@27.3.1
-      jest-util: 27.3.1
-      jest-validate: 27.3.1
+      jest-haste-map: 27.4.0
+      jest-pnp-resolver: 1.2.2_jest-resolve@27.4.0
+      jest-util: 27.4.0
+      jest-validate: 27.4.0
       resolve: 1.20.0
       resolve.exports: 1.1.0
       slash: 3.0.0
     dev: true
-  /jest-runner/27.3.1:
-    resolution: {integrity: sha512-r4W6kBn6sPr3TBwQNmqE94mPlYVn7fLBseeJfo4E2uCTmAyDFm2O5DYAQAFP7Q3YfiA/bMwg8TVsciP7k0xOww==}
+  /jest-runner/27.4.0:
+    resolution: {integrity: sha512-ncnnOVQlqDorBAMNTuA2Htg3XJlnwAySpUBDmlJy4+WEwb5zB2cDLA3roPSMe0lVn8mGGXccl1/a8xwvE6txiQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/console': 27.3.1
-      '@jest/environment': 27.3.1
-      '@jest/test-result': 27.3.1
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/console': 27.4.0
+      '@jest/environment': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       chalk: 4.1.2
       emittery: 0.8.1
       exit: 0.1.2
       graceful-fs: 4.2.8
-      jest-docblock: 27.0.6
-      jest-environment-jsdom: 27.3.1
-      jest-environment-node: 27.3.1
-      jest-haste-map: 27.3.1
-      jest-leak-detector: 27.3.1
-      jest-message-util: 27.3.1
-      jest-resolve: 27.3.1
-      jest-runtime: 27.3.1
-      jest-util: 27.3.1
-      jest-worker: 27.3.1
+      jest-docblock: 27.4.0
+      jest-environment-jsdom: 27.4.0
+      jest-environment-node: 27.4.0
+      jest-haste-map: 27.4.0
+      jest-leak-detector: 27.4.0
+      jest-message-util: 27.4.0
+      jest-resolve: 27.4.0
+      jest-runtime: 27.4.0
+      jest-util: 27.4.0
+      jest-worker: 27.4.0
       source-map-support: 0.5.21
       throat: 6.0.1
     transitivePeerDependencies:
@@ -7390,17 +7428,17 @@ packages:
       - utf-8-validate
     dev: true
-  /jest-runtime/27.3.1:
-    resolution: {integrity: sha512-qtO6VxPbS8umqhEDpjA4pqTkKQ1Hy4ZSi9mDVeE9Za7LKBo2LdW2jmT+Iod3XFaJqINikZQsn2wEi0j9wPRbLg==}
+  /jest-runtime/27.4.0:
+    resolution: {integrity: sha512-8IcQQFhVWWNq45wuDYooIDNdmhOVebOsIDOfXN/Xbw4h/6G1qy9+i5OND7Qmb4g+cSawK5C2tAdHcdR8Q9eSew==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/console': 27.3.1
-      '@jest/environment': 27.3.1
-      '@jest/globals': 27.3.1
-      '@jest/source-map': 27.0.6
-      '@jest/test-result': 27.3.1
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/console': 27.4.0
+      '@jest/environment': 27.4.0
+      '@jest/globals': 27.4.0
+      '@jest/source-map': 27.4.0
+      '@jest/test-result': 27.4.0
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/yargs': 16.0.4
       chalk: 4.1.2
       cjs-module-lexer: 1.2.2
@@ -7409,14 +7447,14 @@ packages:
       exit: 0.1.2
       glob: 7.2.0
       graceful-fs: 4.2.8
-      jest-haste-map: 27.3.1
-      jest-message-util: 27.3.1
-      jest-mock: 27.3.0
-      jest-regex-util: 27.0.6
-      jest-resolve: 27.3.1
-      jest-snapshot: 27.3.1
-      jest-util: 27.3.1
-      jest-validate: 27.3.1
+      jest-haste-map: 27.4.0
+      jest-message-util: 27.4.0
+      jest-mock: 27.4.0
+      jest-regex-util: 27.4.0
+      jest-resolve: 27.4.0
+      jest-snapshot: 27.4.0
+      jest-util: 27.4.0
+      jest-validate: 27.4.0
       slash: 3.0.0
       strip-bom: 4.0.0
       yargs: 16.2.0
@@ -7424,16 +7462,16 @@ packages:
       - supports-color
     dev: true
-  /jest-serializer/27.0.6:
-    resolution: {integrity: sha512-PtGdVK9EGC7dsaziskfqaAPib6wTViY3G8E5wz9tLVPhHyiDNTZn/xjZ4khAw+09QkoOVpn7vF5nPSN6dtBexA==}
+  /jest-serializer/27.4.0:
+    resolution: {integrity: sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@types/node': 16.11.10
       graceful-fs: 4.2.8
     dev: true
-  /jest-snapshot/27.3.1:
-    resolution: {integrity: sha512-APZyBvSgQgOT0XumwfFu7X3G5elj6TGhCBLbBdn3R1IzYustPGPE38F51dBWMQ8hRXa9je0vAdeVDtqHLvB6lg==}
+  /jest-snapshot/27.4.0:
+    resolution: {integrity: sha512-iOisfzB00tQE/rk+LzLzjbjElT4Lq26ZrYHX/1OfhVb7IZbu/2i4bkS7YK3fimfw3zleWRTleUMCmWGi+GCjpQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/core': 7.16.0
@@ -7442,23 +7480,23 @@ packages:
       '@babel/plugin-syntax-typescript': 7.16.0_@babel+core@7.16.0
       '@babel/traverse': 7.16.3
       '@babel/types': 7.16.0
-      '@jest/transform': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/transform': 27.4.0
+      '@jest/types': 27.4.0
       '@types/babel__traverse': 7.14.2
       '@types/prettier': 2.4.2
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.16.0
       chalk: 4.1.2
-      expect: 27.3.1
+      expect: 27.4.0
       graceful-fs: 4.2.8
-      jest-diff: 27.3.1
-      jest-get-type: 27.3.1
-      jest-haste-map: 27.3.1
-      jest-matcher-utils: 27.3.1
-      jest-message-util: 27.3.1
-      jest-resolve: 27.3.1
-      jest-util: 27.3.1
+      jest-diff: 27.4.0
+      jest-get-type: 27.4.0
+      jest-haste-map: 27.4.0
+      jest-matcher-utils: 27.4.0
+      jest-message-util: 27.4.0
+      jest-resolve: 27.4.0
+      jest-util: 27.4.0
       natural-compare: 1.4.0
-      pretty-format: 27.3.1
+      pretty-format: 27.4.0
       semver: 7.3.5
     transitivePeerDependencies:
       - supports-color
@@ -7476,28 +7514,40 @@ packages:
       picomatch: 2.3.0
     dev: true
-  /jest-validate/27.3.1:
-    resolution: {integrity: sha512-3H0XCHDFLA9uDII67Bwi1Vy7AqwA5HqEEjyy934lgVhtJ3eisw6ShOF1MDmRPspyikef5MyExvIm0/TuLzZ86Q==}
+  /jest-util/27.4.0:
+    resolution: {integrity: sha512-9HL5h/IWeg2u2dt0UIiseVRCnadh7CMPD4B9AeoEO23/NofaEfcPzIfl8dw45CpGHjP+xenw1viQYMd25DWquA==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/types': 27.2.5
+      '@jest/types': 27.4.0
+      '@types/node': 16.11.10
+      chalk: 4.1.2
+      ci-info: 3.3.0
+      graceful-fs: 4.2.8
+      picomatch: 2.3.0
+    dev: true
+
+  /jest-validate/27.4.0:
+    resolution: {integrity: sha512-Gsfh/KtS7fXDNzz3oKmB1F8dFVqWwqOwhUqEHhKM8Y0R0bJK8R2HLiuqKfnqfbuybdiGiVdzqaK5c0poZaQAew==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.4.0
       camelcase: 6.2.1
       chalk: 4.1.2
-      jest-get-type: 27.3.1
+      jest-get-type: 27.4.0
       leven: 3.1.0
-      pretty-format: 27.3.1
+      pretty-format: 27.4.0
     dev: true
-  /jest-watcher/27.3.1:
-    resolution: {integrity: sha512-9/xbV6chABsGHWh9yPaAGYVVKurWoP3ZMCv6h+O1v9/+pkOroigs6WzZ0e9gLP/njokUwM7yQhr01LKJVMkaZA==}
+  /jest-watcher/27.4.0:
+    resolution: {integrity: sha512-0ZXzsp/NArW6IXxo4g7DP/nCJqS/OLCZyl08qzd8ANGSEoTsliivBumjUK5/0gvx/K4Oc60APNyTMfJJ6WENcg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@jest/test-result': 27.3.1
-      '@jest/types': 27.2.5
+      '@jest/test-result': 27.4.0
+      '@jest/types': 27.4.0
       '@types/node': 16.11.10
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      jest-util: 27.3.1
+      jest-util: 27.4.0
       string-length: 4.0.2
     dev: true
@@ -7510,8 +7560,8 @@ packages:
       supports-color: 7.2.0
     dev: true
-  /jest-worker/27.3.1:
-    resolution: {integrity: sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==}
+  /jest-worker/27.4.0:
+    resolution: {integrity: sha512-4WuKcUxtzxBoKOUFbt1MtTY9fJwPVD4aN/4Cgxee7OLetPZn5as2bjfZz98XSf2Zq1JFfhqPZpS+43BmWXKgCA==}
     engines: {node: '>= 10.13.0'}
     dependencies:
       '@types/node': 16.11.10
@@ -7519,8 +7569,8 @@ packages:
       supports-color: 8.1.1
     dev: true
-  /jest/27.3.1_ts-node@10.4.0:
-    resolution: {integrity: sha512-U2AX0AgQGd5EzMsiZpYt8HyZ+nSVIh5ujQ9CPp9EQZJMjXIiSZpJNweZl0swatKRoqHWgGKM3zaSwm4Zaz87ng==}
+  /jest/27.4.0_ts-node@10.4.0:
+    resolution: {integrity: sha512-54SYE6EmGRoHS+9/OCspbb7tAD2WYAvBBXmny2Zp39/QgnNIWZD4KujhAZyRXHWASTBa9/WfXM2oekNBIOFV2A==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
     peerDependencies:
@@ -7529,9 +7579,9 @@ packages:
       node-notifier:
         optional: true
     dependencies:
-      '@jest/core': 27.3.1_ts-node@10.4.0
+      '@jest/core': 27.4.0_ts-node@10.4.0
       import-local: 3.0.3
-      jest-cli: 27.3.1_ts-node@10.4.0
+      jest-cli: 27.4.0_ts-node@10.4.0
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -9178,6 +9228,16 @@ packages:
       react-is: 17.0.2
     dev: true
+  /pretty-format/27.4.0:
+    resolution: {integrity: sha512-n0QR6hMREfp6nLzfVksXMAfIxk1ffOOfbb/FzKHFmRtn9iJKaZXB8WMzLr8a72IASShEAhqK06nlwp1gVWgqKg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      '@jest/types': 27.4.0
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
   /print-js/1.6.0:
     resolution: {integrity: sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==}
     dev: false
@@ -10820,7 +10880,7 @@ packages:
       escape-string-regexp: 1.0.5
     dev: true
-  /ts-jest/27.0.7_7e2a439bb7b53c38ff0c1a3c5e04c2c5:
+  /ts-jest/27.0.7_bfad92f4d8caf69d57ace222bbbf1afc:
     resolution: {integrity: sha512-O41shibMqzdafpuP+CkrOL7ykbmLh+FqQrXEmV9CydQ5JBk0Sj0uAEF5TNNe94fZWKm3yYvWa/IbyV4Yg1zK2Q==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -10841,7 +10901,7 @@ packages:
       '@types/jest': 27.0.3
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 27.3.1_ts-node@10.4.0
+      jest: 27.4.0_ts-node@10.4.0
       jest-util: 27.3.1
       json5: 2.2.0
       lodash.memoize: 4.1.2
@@ -11279,13 +11339,13 @@ packages:
       - supports-color
     dev: true
-  /vite-plugin-pwa/0.11.7_vite@2.7.0-beta.9:
-    resolution: {integrity: sha512-sU+VrUNVP87E79GCCBTusdoiqja3Qapsrp48+xFDf28zaeNZ2nuuCoCIPshmyusGuY0I51wRFxiBjcbdheEBSw==}
+  /vite-plugin-pwa/0.11.8_vite@2.7.0-beta.9:
+    resolution: {integrity: sha512-IbiVEwvvXWlm2LeNPcTjnQfYTwPN/BDicbY6Nn9LNx2ECKjjCDDraLpqFe8v7OKATAiuXnx35q4DDI7UvJoqPw==}
     peerDependencies:
       vite: ^2.0.0
     dependencies:
       chalk: 4.1.2
-      debug: 4.3.2
+      debug: 4.3.3
       fast-glob: 3.2.7
       pretty-bytes: 5.6.0
       rollup: 2.60.1
@@ -11466,22 +11526,22 @@ packages:
     resolution: {integrity: sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==}
     dev: true
-  /vscode-pug-languageservice/0.29.6:
-    resolution: {integrity: sha512-gkoM82pkCzYW+dfkLVRh22Bt3rjMT9QYl2X9lx1vV8yjeJjdYKM0vIhhio7+ZtmOO94JkdKI2YwA0K619/YEIA==}
+  /vscode-pug-languageservice/0.29.7:
+    resolution: {integrity: sha512-OJ5N6Q1CU0uFvF8kSzRIqxsKYNGnexDss54DPSxla0f1E465ddHxxRsdI+bZQ8Va3rnyLBLGmEcM0gRn75DCWA==}
     dependencies:
-      '@volar/code-gen': 0.29.6
-      '@volar/shared': 0.29.6
-      '@volar/source-map': 0.29.6
-      '@volar/transforms': 0.29.6
+      '@volar/code-gen': 0.29.7
+      '@volar/shared': 0.29.7
+      '@volar/source-map': 0.29.7
+      '@volar/transforms': 0.29.7
       pug-lexer: 5.0.1
       pug-parser: 6.0.0
       vscode-languageserver: 8.0.0-next.5
     dev: true
-  /vscode-typescript-languageservice/0.29.6:
-    resolution: {integrity: sha512-bPfQWUw6EIDS6mlvie896IZ0RgvhtehZIAWB/fmqPFH5FU/tEcGj4E3y9pZEwCtG9xUtBbW6UcVI71HmrOXB+Q==}
+  /vscode-typescript-languageservice/0.29.7:
+    resolution: {integrity: sha512-paqAiBPB3alZ/tnPHYf4y35+ob167r3YNZHWS1w7gKHqhnz/pOtdZG6MSya0FmSBRk9XdV//5xo3qZ5zZRCxjg==}
     dependencies:
-      '@volar/shared': 0.29.6
+      '@volar/shared': 0.29.7
       semver: 7.3.5
       upath: 2.0.1
       vscode-languageserver: 8.0.0-next.5
@@ -11496,18 +11556,18 @@ packages:
     resolution: {integrity: sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==}
     dev: true
-  /vscode-vue-languageservice/0.29.6:
-    resolution: {integrity: sha512-5qZY6wMxDdMC82uye5EiUcWEHci06an4liYFMDHO9h0VpulLifLN0L3jAUNGfgAMSnevKqzgvY6FsxEDxDR/8g==}
+  /vscode-vue-languageservice/0.29.7:
+    resolution: {integrity: sha512-YKIVJMLNmB81/D+z9hNMaSsn/4809bClYk5jk3X78zskGE7nIV9KfjhqY0LiO/SneF1ypvIxz/xJeEBILhDGBg==}
     dependencies:
-      '@volar/code-gen': 0.29.6
-      '@volar/html2pug': 0.29.6
-      '@volar/shared': 0.29.6
-      '@volar/source-map': 0.29.6
-      '@volar/transforms': 0.29.6
-      '@volar/vue-code-gen': 0.29.6
+      '@volar/code-gen': 0.29.7
+      '@volar/html2pug': 0.29.7
+      '@volar/shared': 0.29.7
+      '@volar/source-map': 0.29.7
+      '@volar/transforms': 0.29.7
+      '@volar/vue-code-gen': 0.29.7
       '@vscode/emmet-helper': 2.8.2
-      '@vue/reactivity': 3.2.22
-      '@vue/shared': 3.2.22
+      '@vue/reactivity': 3.2.23
+      '@vue/shared': 3.2.23
       request-light: 0.5.5
       upath: 2.0.1
       vscode-css-languageservice: 5.1.8
@@ -11515,8 +11575,8 @@ packages:
       vscode-json-languageservice: 4.1.10
       vscode-languageserver: 8.0.0-next.5
       vscode-languageserver-textdocument: 1.0.3
-      vscode-pug-languageservice: 0.29.6
-      vscode-typescript-languageservice: 0.29.6
+      vscode-pug-languageservice: 0.29.7
+      vscode-typescript-languageservice: 0.29.7
     dev: true
   /vue-demi/0.12.1_vue@3.2.23:
@@ -11583,15 +11643,15 @@ packages:
       vue: 3.2.23
     dev: false
-  /vue-tsc/0.29.6_typescript@4.5.2:
-    resolution: {integrity: sha512-P0vBtyS19vacn97qJtx+ZaJzPq/vNA42D8oe+FT9dhCeiey3+nvuyzHVzYGK1/AQYaMGq6FAP+scK1hQtSQk7g==}
+  /vue-tsc/0.29.7_typescript@4.5.2:
+    resolution: {integrity: sha512-8jCGovixOZgV6Qu9nOyoTon3HUNUG9YD8cnMHUCGqdu/H21P5D+4k/d8rHzpGvbUlwq5dP2pFCx6rmRwfTfDmA==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
-      '@volar/shared': 0.29.6
+      '@volar/shared': 0.29.7
       typescript: 4.5.2
-      vscode-vue-languageservice: 0.29.6
+      vscode-vue-languageservice: 0.29.7
     dev: true
   /vue-types/3.0.2_vue@3.2.23:
 import BasicTree from './src/Tree.vue';
+import './style';
 export { BasicTree };
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-export * from './src/typing';
+export * from './src/tree';
 <script lang="tsx">
-  import type { ReplaceFields, Keys, CheckKeys, TreeActionType, TreeItem } from './typing';
-  import type { CheckEvent } from './typing';
+  import type { CSSProperties } from 'vue';
+  import type { FieldNames, TreeState, TreeItem, KeyType, CheckKeys, TreeActionType } from './tree';
   import {
     defineComponent,
@@ -11,43 +11,31 @@
     watchEffect,
     toRaw,
     watch,
-    CSSProperties,
     onMounted,
   } from 'vue';
   import { Tree, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import { ScrollContainer } from '/@/components/Container';
-  import { omit, get, difference } from 'lodash-es';
+  import { omit, get, difference, cloneDeep } from 'lodash-es';
   import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
   import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
   import { filter, treeToList } from '/@/utils/helper/treeHelper';
   import { useTree } from './useTree';
   import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { basicProps } from './props';
   import { CreateContextOptions } from '/@/components/ContextMenu';
   import TreeHeader from './TreeHeader.vue';
+  import { treeEmits, treeProps } from './tree';
+  import { createBEM } from '/@/utils/bem';
-  interface State {
-    expandedKeys: Keys;
-    selectedKeys: Keys;
-    checkedKeys: CheckKeys;
-    checkStrictly: boolean;
-  }
   export default defineComponent({
     name: 'BasicTree',
     inheritAttrs: false,
-    props: basicProps,
-    emits: [
-      'update:expandedKeys',
-      'update:selectedKeys',
-      'update:value',
-      'change',
-      'check',
-      'update:searchValue',
-    ],
+    props: treeProps,
+    emits: treeEmits,
     setup(props, { attrs, slots, emit, expose }) {
-      const state = reactive<State>({
+      const [bem] = createBEM('tree');
+
+      const state = reactive<TreeState>({
         checkStrictly: props.checkStrictly,
         expandedKeys: props.expandedKeys || [],
         selectedKeys: props.selectedKeys || [],
@@ -63,15 +51,14 @@
       const treeDataRef = ref<TreeItem[]>([]);
       const [createContextMenu] = useContextMenu();
-      const { prefixCls } = useDesign('basic-tree');
-      const getReplaceFields = computed((): Required<ReplaceFields> => {
-        const { replaceFields } = props;
+      const getFieldNames = computed((): Required<FieldNames> => {
+        const { fieldNames } = props;
         return {
           children: 'children',
           title: 'title',
           key: 'key',
-          ...replaceFields,
+          ...fieldNames,
         };
       });
@@ -84,19 +71,19 @@
           selectedKeys: state.selectedKeys,
           checkedKeys: state.checkedKeys,
           checkStrictly: state.checkStrictly,
-          replaceFields: unref(getReplaceFields),
-          'onUpdate:expandedKeys': (v: Keys) => {
+          filedNames: unref(getFieldNames),
+          'onUpdate:expandedKeys': (v: KeyType[]) => {
             state.expandedKeys = v;
             emit('update:expandedKeys', v);
           },
-          'onUpdate:selectedKeys': (v: Keys) => {
+          'onUpdate:selectedKeys': (v: KeyType[]) => {
             state.selectedKeys = v;
             emit('update:selectedKeys', v);
           },
-          onCheck: (v: CheckKeys, e: CheckEvent) => {
-            let currentValue = toRaw(state.checkedKeys) as Keys;
+          onCheck: (v: CheckKeys, e) => {
+            let currentValue = toRaw(state.checkedKeys) as KeyType[];
             if (isArray(currentValue) && searchState.startSearch) {
-              const { key } = unref(getReplaceFields);
+              const { key } = unref(getFieldNames);
               currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
               if (e.checked) {
                 currentValue.push(e.node.$attrs.node[key]);
@@ -132,7 +119,7 @@
         getAllKeys,
         getChildrenKeys,
         getEnabledKeys,
-      } = useTree(treeDataRef, getReplaceFields);
+      } = useTree(treeDataRef, getFieldNames);
       function getIcon(params: Recordable, icon?: string) {
         if (!icon) {
@@ -161,14 +148,14 @@
         createContextMenu(contextMenuOptions);
       }
-      function setExpandedKeys(keys: Keys) {
+      function setExpandedKeys(keys: KeyType[]) {
         state.expandedKeys = keys;
       }
       function getExpandedKeys() {
         return state.expandedKeys;
       }
-      function setSelectedKeys(keys: Keys) {
+      function setSelectedKeys(keys: KeyType[]) {
         state.selectedKeys = keys;
       }
@@ -185,11 +172,11 @@
       }
       function checkAll(checkAll: boolean) {
-        state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys);
+        state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]);
       }
       function expandAll(expandAll: boolean) {
-        state.expandedKeys = expandAll ? getAllKeys() : ([] as Keys);
+        state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]);
       }
       function onStrictlyChange(strictly: boolean) {
@@ -227,21 +214,21 @@
         const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
           unref(props);
         searchState.startSearch = true;
-        const { title: titleField, key: keyField } = unref(getReplaceFields);
+        const { title: titleField, key: keyField } = unref(getFieldNames);
         const matchedKeys: string[] = [];
         searchState.searchData = filter(
           unref(treeDataRef),
           (node) => {
             const result = filterFn
-              ? filterFn(searchValue, node, unref(getReplaceFields))
+              ? filterFn(searchValue, node, unref(getFieldNames))
               : node[titleField]?.includes(searchValue) ?? false;
             if (result) {
               matchedKeys.push(node[keyField]);
             }
             return result;
           },
-          unref(getReplaceFields),
+          unref(getFieldNames),
         );
         if (expandOnSearch) {
@@ -317,15 +304,6 @@
         },
       );
-      // watchEffect(() => {
-      //   console.log('======================');
-      //   console.log(props.value);
-      //   console.log('======================');
-      //   if (props.value) {
-      //     state.checkedKeys = props.value;
-      //   }
-      // });
-
       watchEffect(() => {
         state.checkStrictly = props.checkStrictly;
       });
@@ -354,8 +332,6 @@
         },
       };
-      expose(instance);
-
       function renderAction(node: TreeItem) {
         const { actionList } = props;
         if (!actionList || actionList.length === 0) return;
@@ -370,29 +346,25 @@
           if (!nodeShow) return null;
           return (
-            <span key={index} class={`${prefixCls}__action`}>
+            <span key={index} class={bem('action')}>
               {item.render(node)}
             </span>
           );
         });
       }
-      function renderTreeNode({ data, level }: { data: TreeItem[] | undefined; level: number }) {
-        if (!data) {
-          return null;
-        }
-        const searchText = searchState.searchText;
-        const { highlight } = unref(props);
-        return data.map((item) => {
+      const treeData = computed(() => {
+        const data = cloneDeep(getTreeData.value);
+        data.forEach((item) => {
+          const searchText = searchState.searchText;
+          const { highlight } = unref(props);
           const {
             title: titleField,
             key: keyField,
             children: childrenField,
-          } = unref(getReplaceFields);
+          } = unref(getFieldNames);
-          const propsData = omit(item, 'title');
-          const icon = getIcon({ ...item, level }, item.icon);
-          const children = get(item, childrenField) || [];
+          const icon = getIcon(item, item.icon);
           const title = get(item, titleField);
           const searchIdx = searchText ? title.indexOf(searchText) : -1;
@@ -401,7 +373,7 @@
           const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
           const titleDom = isHighlight ? (
-            <span class={unref(getBindValues)?.blockNode ? `${prefixCls}__content` : ''}>
+            <span class={unref(getBindValues)?.blockNode ? `${bem('content')}` : ''}>
               <span>{title.substr(0, searchIdx)}</span>
               <span style={highlightStyle}>{searchText}</span>
               <span>{title.substr(searchIdx + (searchText as string).length)}</span>
@@ -409,41 +381,34 @@
           ) : (
             title
           );
-
-          return (
-            <Tree.TreeNode {...propsData} node={toRaw(item)} key={get(item, keyField)}>
-              {{
-                title: () => (
-                  <span
-                    class={`${prefixCls}-title pl-2`}
-                    onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
-                  >
-                    {item.slots?.title ? (
-                      getSlot(slots, item.slots?.title, item)
-                    ) : (
-                      <>
-                        {icon && <TreeIcon icon={icon} />}
-                        {titleDom}
-                        {/*{get(item, titleField)}*/}
-                        <span class={`${prefixCls}__actions`}>
-                          {renderAction({ ...item, level })}
-                        </span>
-                      </>
-                    )}
-                  </span>
-                ),
-                default: () => renderTreeNode({ data: children, level: level + 1 }),
-              }}
-            </Tree.TreeNode>
+          item.title = (
+            <span
+              class={`${bem('title')} pl-2`}
+              onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
+            >
+              {item.slots?.title ? (
+                getSlot(slots, item.slots?.title, item)
+              ) : (
+                <>
+                  {icon && <TreeIcon icon={icon} />}
+                  {titleDom}
+                  <span class={bem('actions')}>{renderAction(item)}</span>
+                </>
+              )}
+            </span>
           );
         });
-      }
+        return data;
+      });
+
+      expose(instance);
+
       return () => {
         const { title, helpMessage, toolbar, search, checkable } = props;
         const showTitle = title || toolbar || search || slots.headerTitle;
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
-          <div class={[prefixCls, 'h-full', attrs.class]}>
+          <div class={[bem(), 'h-full', attrs.class]}>
             {showTitle && (
               <TreeHeader
                 checkable={checkable}
@@ -461,15 +426,10 @@
               </TreeHeader>
             )}
             <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
-              <Tree {...unref(getBindValues)} showIcon={false}>
-                {{
-                  // switcherIcon: () => <DownOutlined />,
-                  default: () => renderTreeNode({ data: unref(getTreeData), level: 1 }),
-                  ...extendSlots(slots),
-                }}
+              <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value}>
+                {extendSlots(slots)}
               </Tree>
             </ScrollContainer>
-
             <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
           </div>
         );
@@ -477,50 +437,3 @@
     },
   });
 </script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-tree';
-
-  .@{prefix-cls} {
-    background-color: @component-background;
-
-    .ant-tree-node-content-wrapper {
-      position: relative;
-
-      .ant-tree-title {
-        position: absolute;
-        left: 0;
-        width: 100%;
-      }
-    }
-
-    &-title {
-      position: relative;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding-right: 10px;
-
-      &:hover {
-        .@{prefix-cls}__action {
-          visibility: visible;
-        }
-      }
-    }
-
-    &__content {
-      overflow: hidden;
-    }
-
-    &__actions {
-      position: absolute;
-      top: 2px;
-      right: 3px;
-      display: flex;
-    }
-
-    &__action {
-      margin-left: 4px;
-      visibility: hidden;
-    }
-  }
-</style>
 <template>
-  <div class="flex px-2 py-1.5 items-center basic-tree-header">
-    <slot name="headerTitle" v-if="$slots.headerTitle"></slot>
-    <BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">
+  <div :class="bem()" class="flex px-2 py-1.5 items-center">
+    <slot name="headerTitle" v-if="slots.headerTitle"></slot>
+    <BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
       {{ title }}
     </BasicTitle>
-
     <div
       class="flex flex-1 justify-self-stretch items-center cursor-pointer"
       v-if="search || toolbar"
@@ -33,148 +32,140 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { PropType } from 'vue';
-  import { defineComponent, computed, ref, watch } from 'vue';
-
-  import { Dropdown, Menu, Input } from 'ant-design-vue';
+<script lang="ts" setup>
+  import { computed, ref, watch, useSlots } from 'vue';
+  import { Dropdown, Menu, MenuItem, MenuDivider, InputSearch } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
   import { BasicTitle } from '/@/components/Basic';
-
-  import { propTypes } from '/@/utils/propTypes';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
+  import { createBEM } from '/@/utils/bem';
+  import { ToolbarEnum } from './tree';
-  enum ToolbarEnum {
-    SELECT_ALL,
-    UN_SELECT_ALL,
-    EXPAND_ALL,
-    UN_EXPAND_ALL,
-    CHECK_STRICTLY,
-    CHECK_UN_STRICTLY,
-  }
+  const searchValue = ref('');
-  interface MenuInfo {
-    key: ToolbarEnum;
-  }
-  export default defineComponent({
-    name: 'BasicTreeHeader',
-    components: {
-      BasicTitle,
-      Icon,
-      Dropdown,
-      Menu,
-      MenuItem: Menu.Item,
-      MenuDivider: Menu.Divider,
-      InputSearch: Input.Search,
+  const [bem] = createBEM('tree-header');
+
+  // eslint-disable vue/valid-define-emits
+  const props = defineProps({
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
     },
-    props: {
-      helpMessage: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: '',
-      },
-      title: propTypes.string,
-      toolbar: propTypes.bool,
-      checkable: propTypes.bool,
-      search: propTypes.bool,
-      checkAll: propTypes.func,
-      expandAll: propTypes.func,
-      searchText: propTypes.string,
+    title: {
+      type: String,
+      default: '',
     },
-    emits: ['strictly-change', 'search'],
-    setup(props, { emit, slots }) {
-      const { t } = useI18n();
-      const searchValue = ref('');
+    toolbar: {
+      type: Boolean,
+      default: false,
+    },
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    searchText: {
+      type: String,
+      default: '',
+    },
+    checkAll: {
+      type: Function,
+      default: undefined,
+    },
+    expandAll: {
+      type: Function,
+      default: undefined,
+    },
+  } as const);
+  const emit = defineEmits(['strictly-change', 'search']);
-      const getInputSearchCls = computed(() => {
-        const titleExists = slots.headerTitle || props.title;
-        return [
-          'mr-1',
-          'w-full',
-          // titleExists ? 'w-2/3' : 'w-full',
-          {
-            ['ml-5']: titleExists,
-          },
-        ];
-      });
+  const slots = useSlots();
+  const { t } = useI18n();
+
+  const getInputSearchCls = computed(() => {
+    const titleExists = slots.headerTitle || props.title;
+    return [
+      'mr-1',
+      'w-full',
+      {
+        ['ml-5']: titleExists,
+      },
+    ];
+  });
-      const toolbarList = computed(() => {
-        const { checkable } = props;
-        const defaultToolbarList = [
-          { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+  const toolbarList = computed(() => {
+    const { checkable } = props;
+    const defaultToolbarList = [
+      { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+      {
+        label: t('component.tree.unExpandAll'),
+        value: ToolbarEnum.UN_EXPAND_ALL,
+        divider: checkable,
+      },
+    ];
+
+    return checkable
+      ? [
+          { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
           {
-            label: t('component.tree.unExpandAll'),
-            value: ToolbarEnum.UN_EXPAND_ALL,
+            label: t('component.tree.unSelectAll'),
+            value: ToolbarEnum.UN_SELECT_ALL,
             divider: checkable,
           },
-        ];
+          ...defaultToolbarList,
+          { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+          { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
+        ]
+      : defaultToolbarList;
+  });
-        return checkable
-          ? [
-              { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
-              {
-                label: t('component.tree.unSelectAll'),
-                value: ToolbarEnum.UN_SELECT_ALL,
-                divider: checkable,
-              },
-              ...defaultToolbarList,
-              { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
-              { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
-            ]
-          : defaultToolbarList;
-      });
+  function handleMenuClick(e: { key: ToolbarEnum }) {
+    const { key } = e;
+    switch (key) {
+      case ToolbarEnum.SELECT_ALL:
+        props.checkAll?.(true);
+        break;
+      case ToolbarEnum.UN_SELECT_ALL:
+        props.checkAll?.(false);
+        break;
+      case ToolbarEnum.EXPAND_ALL:
+        props.expandAll?.(true);
+        break;
+      case ToolbarEnum.UN_EXPAND_ALL:
+        props.expandAll?.(false);
+        break;
+      case ToolbarEnum.CHECK_STRICTLY:
+        emit('strictly-change', false);
+        break;
+      case ToolbarEnum.CHECK_UN_STRICTLY:
+        emit('strictly-change', true);
+        break;
+    }
+  }
-      function handleMenuClick(e: MenuInfo) {
-        const { key } = e;
-        switch (key) {
-          case ToolbarEnum.SELECT_ALL:
-            props.checkAll?.(true);
-            break;
-          case ToolbarEnum.UN_SELECT_ALL:
-            props.checkAll?.(false);
-            break;
-          case ToolbarEnum.EXPAND_ALL:
-            props.expandAll?.(true);
-            break;
-          case ToolbarEnum.UN_EXPAND_ALL:
-            props.expandAll?.(false);
-            break;
-          case ToolbarEnum.CHECK_STRICTLY:
-            emit('strictly-change', false);
-            break;
-          case ToolbarEnum.CHECK_UN_STRICTLY:
-            emit('strictly-change', true);
-            break;
-        }
-      }
+  function emitChange(value?: string): void {
+    emit('search', value);
+  }
-      function emitChange(value?: string): void {
-        emit('search', value);
-      }
-      const debounceEmitChange = useDebounceFn(emitChange, 200);
+  const debounceEmitChange = useDebounceFn(emitChange, 200);
-      watch(
-        () => searchValue.value,
-        (v) => {
-          debounceEmitChange(v);
-        },
-      );
-      watch(
-        () => props.searchText,
-        (v) => {
-          if (v !== searchValue.value) {
-            searchValue.value = v;
-          }
-        },
-      );
+  watch(
+    () => searchValue.value,
+    (v) => {
+      debounceEmitChange(v);
+    },
+  );
-      return { t, toolbarList, handleMenuClick, searchValue, getInputSearchCls };
+  watch(
+    () => props.searchText,
+    (v) => {
+      if (v !== searchValue.value) {
+        searchValue.value = v;
+      }
     },
-  });
+  );
 </script>
-<style lang="less" scoped>
-  .basic-tree-header {
-    border-bottom: 1px solid @border-color-base;
-  }
-</style>
 import type { VNode, FunctionalComponent } from 'vue';
 import { h } from 'vue';
-import { isString } from '/@/utils/is';
+import { isString } from '@vue/shared';
 import { Icon } from '/@/components/Icon';
-export interface ComponentProps {
-  icon: VNode | string;
-}
-
-export const TreeIcon: FunctionalComponent = ({ icon }: ComponentProps) => {
+export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
   if (!icon) return null;
   if (isString(icon)) {
     return h(Icon, { icon, class: 'mr-1' });
-import type { PropType } from 'vue';
-import type {
-  ReplaceFields,
-  ActionItem,
-  Keys,
-  CheckKeys,
-  ContextMenuOptions,
-  TreeItem,
-} from './typing';
-import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-import type { TreeDataItem } from 'ant-design-vue/es/tree';
-import { propTypes } from '/@/utils/propTypes';
-
-export const basicProps = {
-  value: {
-    type: [Object, Array] as PropType<Keys | CheckKeys>,
-  },
-  renderIcon: {
-    type: Function as PropType<(params: Recordable) => string>,
-  },
-
-  helpMessage: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: '',
-  },
-
-  title: propTypes.string,
-  toolbar: propTypes.bool,
-  search: propTypes.bool,
-  searchValue: propTypes.string,
-  checkStrictly: propTypes.bool,
-  clickRowToExpand: propTypes.bool.def(true),
-  checkable: propTypes.bool.def(false),
-  defaultExpandLevel: {
-    type: [String, Number] as PropType<string | number>,
-    default: '',
-  },
-  defaultExpandAll: propTypes.bool.def(false),
-
-  replaceFields: {
-    type: Object as PropType<ReplaceFields>,
-  },
-
-  treeData: {
-    type: Array as PropType<TreeDataItem[]>,
-  },
-
-  actionList: {
-    type: Array as PropType<ActionItem[]>,
-    default: () => [],
-  },
-
-  expandedKeys: {
-    type: Array as PropType<Keys>,
-    default: () => [],
-  },
-
-  selectedKeys: {
-    type: Array as PropType<Keys>,
-    default: () => [],
-  },
-
-  checkedKeys: {
-    type: Array as PropType<CheckKeys>,
-    default: () => [],
-  },
-
-  beforeRightClick: {
-    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
-    default: null,
-  },
-
-  rightMenuList: {
-    type: Array as PropType<ContextMenuItem[]>,
-  },
-  // 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
-  filterFn: {
-    type: Function as PropType<
-      (searchValue: any, node: TreeItem, replaceFields: ReplaceFields) => boolean
-    >,
-    default: null,
-  },
-  // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
-  highlight: {
-    type: [Boolean, String] as PropType<Boolean | String>,
-    default: false,
-  },
-  // 搜索完成时自动展开结果
-  expandOnSearch: propTypes.bool.def(false),
-  // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
-  checkOnSearch: propTypes.bool.def(false),
-  // 搜索完成自动select所有结果
-  selectedOnSearch: propTypes.bool.def(false),
-};
-
-export const treeNodeProps = {
-  actionList: {
-    type: Array as PropType<ActionItem[]>,
-    default: () => [],
-  },
-  replaceFields: {
-    type: Object as PropType<ReplaceFields>,
-  },
-  treeData: {
-    type: Array as PropType<TreeDataItem[]>,
-    default: () => [],
-  },
-};
+import type { ExtractPropTypes } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { buildProps } from '/@/utils/props';
+
+export enum ToolbarEnum {
+  SELECT_ALL,
+  UN_SELECT_ALL,
+  EXPAND_ALL,
+  UN_EXPAND_ALL,
+  CHECK_STRICTLY,
+  CHECK_UN_STRICTLY,
+}
+
+export const treeEmits = [
+  'update:expandedKeys',
+  'update:selectedKeys',
+  'update:value',
+  'change',
+  'check',
+  'update:searchValue',
+];
+
+export interface TreeState {
+  expandedKeys: KeyType[];
+  selectedKeys: KeyType[];
+  checkedKeys: CheckKeys;
+  checkStrictly: boolean;
+}
+
+export interface FieldNames {
+  children?: string;
+  title?: string;
+  key?: string;
+}
+
+export type KeyType = string | number;
+
+export type CheckKeys =
+  | KeyType[]
+  | { checked: string[] | number[]; halfChecked: string[] | number[] };
+
+export const treeProps = buildProps({
+  value: {
+    type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
+  },
+
+  renderIcon: {
+    type: Function as PropType<(params: Recordable) => string>,
+  },
+
+  helpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+
+  title: {
+    type: String,
+    default: '',
+  },
+  toolbar: Boolean,
+  search: Boolean,
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  checkStrictly: Boolean,
+  clickRowToExpand: {
+    type: Boolean,
+    default: false,
+  },
+  checkable: Boolean,
+  defaultExpandLevel: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  defaultExpandAll: Boolean,
+
+  fieldNames: {
+    type: Object as PropType<FieldNames>,
+  },
+
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+  },
+
+  actionList: {
+    type: Array as PropType<TreeActionItem[]>,
+    default: () => [],
+  },
+
+  expandedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  selectedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  checkedKeys: {
+    type: Array as PropType<CheckKeys>,
+    default: () => [],
+  },
+
+  beforeRightClick: {
+    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
+    default: undefined,
+  },
+
+  rightMenuList: {
+    type: Array as PropType<ContextMenuItem[]>,
+  },
+  // 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
+  filterFn: {
+    type: Function as PropType<
+      (searchValue: any, node: TreeItem, replaceFields: FieldNames) => boolean
+    >,
+    default: undefined,
+  },
+  // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+  highlight: {
+    type: [Boolean, String] as PropType<Boolean | String>,
+    default: false,
+  },
+  // 搜索完成时自动展开结果
+  expandOnSearch: Boolean,
+  // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+  checkOnSearch: Boolean,
+  // 搜索完成自动select所有结果
+  selectedOnSearch: Boolean,
+});
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+  children?: ContextMenuItem[];
+}
+
+export interface ContextMenuOptions {
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export interface TreeItem extends TreeDataItem {
+  icon?: any;
+}
+
+export interface TreeActionItem {
+  render: (record: Recordable) => any;
+  show?: boolean | ((record: Recordable) => boolean);
+}
+
+export interface InsertNodeParams {
+  parentKey: string | null;
+  node: TreeDataItem;
+  list?: TreeDataItem[];
+  push?: 'push' | 'unshift';
+}
+
+export interface TreeActionType {
+  checkAll: (checkAll: boolean) => void;
+  expandAll: (expandAll: boolean) => void;
+  setExpandedKeys: (keys: KeyType[]) => void;
+  getExpandedKeys: () => KeyType[];
+  setSelectedKeys: (keys: KeyType[]) => void;
+  getSelectedKeys: () => KeyType[];
+  setCheckedKeys: (keys: CheckKeys) => void;
+  getCheckedKeys: () => CheckKeys;
+  filterByLevel: (level: number) => void;
+  insertNodeByKey: (opt: InsertNodeParams) => void;
+  insertNodesByKey: (opt: InsertNodeParams) => void;
+  deleteNodeByKey: (key: string) => void;
+  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
+  setSearchValue: (value: string) => void;
+  getSearchValue: () => string;
+}
-import type { TreeDataItem, CheckEvent as CheckEventOrigin } from 'ant-design-vue/es/tree/Tree';
-
-import { ContextMenuItem } from '/@/hooks/web/useContextMenu';
-
-export interface ActionItem {
-  render: (record: Recordable) => any;
-  show?: boolean | ((record: Recordable) => boolean);
-}
-
-export interface TreeItem extends TreeDataItem {
-  icon?: any;
-}
-
-export interface ReplaceFields {
-  children?: string;
-  title?: string;
-  key?: string;
-}
-
-export type Keys = (string | number)[];
-export type CheckKeys =
-  | (string | number)[]
-  | { checked: (string | number)[]; halfChecked: (string | number)[] };
-
-export interface TreeActionType {
-  checkAll: (checkAll: boolean) => void;
-  expandAll: (expandAll: boolean) => void;
-  setExpandedKeys: (keys: Keys) => void;
-  getExpandedKeys: () => Keys;
-  setSelectedKeys: (keys: Keys) => void;
-  getSelectedKeys: () => Keys;
-  setCheckedKeys: (keys: CheckKeys) => void;
-  getCheckedKeys: () => CheckKeys;
-  filterByLevel: (level: number) => void;
-  insertNodeByKey: (opt: InsertNodeParams) => void;
-  insertNodesByKey: (opt: InsertNodeParams) => void;
-  deleteNodeByKey: (key: string) => void;
-  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
-  setSearchValue: (value: string) => void;
-  getSearchValue: () => string;
-}
-
-export interface InsertNodeParams {
-  parentKey: string | null;
-  node: TreeDataItem;
-  list?: TreeDataItem[];
-  push?: 'push' | 'unshift';
-}
-
-export interface ContextMenuOptions {
-  icon?: string;
-  styles?: any;
-  items?: ContextMenuItem[];
-}
-
-export type CheckEvent = CheckEventOrigin;
-import type { InsertNodeParams, Keys, ReplaceFields } from './typing';
+import type { InsertNodeParams, KeyType, FieldNames } from './tree';
 import type { Ref, ComputedRef } from 'vue';
 import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
@@ -6,14 +6,11 @@ import { cloneDeep } from &#39;lodash-es&#39;;
 import { unref } from 'vue';
 import { forEach } from '/@/utils/helper/treeHelper';
-export function useTree(
-  treeDataRef: Ref<TreeDataItem[]>,
-  getReplaceFields: ComputedRef<ReplaceFields>,
-) {
+export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
   function getAllKeys(list?: TreeDataItem[]) {
     const keys: string[] = [];
     const treeData = list || unref(treeDataRef);
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return keys;
     for (let index = 0; index < treeData.length; index++) {
@@ -24,14 +21,14 @@ export function useTree(
         keys.push(...(getAllKeys(children) as string[]));
       }
     }
-    return keys as Keys;
+    return keys as KeyType[];
   }
   // get keys that can be checked and selected
   function getEnabledKeys(list?: TreeDataItem[]) {
     const keys: string[] = [];
     const treeData = list || unref(treeDataRef);
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return keys;
     for (let index = 0; index < treeData.length; index++) {
@@ -42,13 +39,13 @@ export function useTree(
         keys.push(...(getEnabledKeys(children) as string[]));
       }
     }
-    return keys as Keys;
+    return keys as KeyType[];
   }
-  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]): Keys {
-    const keys: Keys = [];
+  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
+    const keys: KeyType[] = [];
     const treeData = list || unref(treeDataRef);
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return keys;
     for (let index = 0; index < treeData.length; index++) {
       const node = treeData[index];
@@ -64,14 +61,14 @@ export function useTree(
         }
       }
     }
-    return keys as Keys;
+    return keys as KeyType[];
   }
   // Update node
   function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
     if (!key) return;
     const treeData = list || unref(treeDataRef);
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return;
@@ -98,7 +95,7 @@ export function useTree(
     for (let index = 0; index < data.length; index++) {
       const item = data[index];
-      const { key: keyField, children: childrenField } = unref(getReplaceFields);
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
       const key = keyField ? item[keyField] : '';
       const children = childrenField ? item[childrenField] : [];
       res.push(key);
@@ -120,7 +117,7 @@ export function useTree(
       treeDataRef.value = treeData;
       return;
     }
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return;
     forEach(treeData, (treeItem) => {
@@ -145,7 +142,7 @@ export function useTree(
         treeData[push](list[i]);
       }
     } else {
-      const { key: keyField, children: childrenField } = unref(getReplaceFields);
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
       if (!childrenField || !keyField) return;
       forEach(treeData, (treeItem) => {
@@ -164,7 +161,7 @@ export function useTree(
   function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
     if (!key) return;
     const treeData = list || unref(treeDataRef);
-    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!childrenField || !keyField) return;
     for (let index = 0; index < treeData.length; index++) {
+@tree-prefix-cls: ~'@{namespace}-tree';
+
+.@{tree-prefix-cls} {
+  background-color: @component-background;
+
+  .ant-tree-node-content-wrapper {
+    position: relative;
+
+    .ant-tree-title {
+      position: absolute;
+      left: 0;
+      width: 100%;
+    }
+  }
+
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 10px;
+
+    &:hover {
+      .@{tree-prefix-cls}__action {
+        visibility: visible;
+      }
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+  }
+
+  &__actions {
+    position: absolute;
+    top: 2px;
+    right: 3px;
+    display: flex;
+  }
+
+  &__action {
+    margin-left: 4px;
+    visibility: hidden;
+  }
+
+  &-header {
+    border-bottom: 1px solid @border-color-base;
+  }
+}
+import './index.less';
@@ -15,13 +15,6 @@ import { setupGlobDirectives } from &#39;/@/directives&#39;;
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
-// Importing on demand in local development will increase the number of browser requests by around 20%.
-// This may slow down the browser refresh speed.
-// Therefore, only enable on-demand importing in production environments .
-if (import.meta.env.DEV) {
-  import('ant-design-vue/dist/antd.less');
-}
-
 async function bootstrap() {
   const app = createApp(App);
+import { prefixCls } from '/@/settings/designSetting';
+
+type Mod = string | { [key: string]: any };
+type Mods = Mod | Mod[];
+
+export type BEM = ReturnType<typeof createBEM>;
+
+function genBem(name: string, mods?: Mods): string {
+  if (!mods) {
+    return '';
+  }
+
+  if (typeof mods === 'string') {
+    return ` ${name}--${mods}`;
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.reduce<string>((ret, item) => ret + genBem(name, item), '');
+  }
+
+  return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), '');
+}
+
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+ */
+export function buildBEM(name: string) {
+  return (el?: Mods, mods?: Mods): Mods => {
+    if (el && typeof el !== 'string') {
+      mods = el;
+      el = '';
+    }
+
+    el = el ? `${name}__${el}` : name;
+
+    return `${el}${genBem(el, mods)}`;
+  };
+}
+
+export function createBEM(name: string) {
+  return [buildBEM(`${prefixCls}-${name}`)];
+}
+
+export function createNamespace(name: string) {
+  const prefixedName = `${prefixCls}-${name}`;
+  return [prefixedName, buildBEM(prefixedName)] as const;
+}
+// copy from element-plus
+
+import { warn } from 'vue';
+import { isObject } from '@vue/shared';
+import { fromPairs } from 'lodash-es';
+import type { ExtractPropTypes, PropType } from '@vue/runtime-core';
+import type { Mutable } from './types';
+
+const wrapperKey = Symbol();
+export type PropWrapper<T> = { [wrapperKey]: T };
+
+export const propKey = Symbol();
+
+type ResolveProp<T> = ExtractPropTypes<{
+  key: { type: T; required: true };
+}>['key'];
+type ResolvePropType<T> = ResolveProp<T> extends { type: infer V } ? V : ResolveProp<T>;
+type ResolvePropTypeWithReadonly<T> = Readonly<T> extends Readonly<Array<infer A>>
+  ? ResolvePropType<A[]>
+  : ResolvePropType<T>;
+
+type IfUnknown<T, V> = [unknown] extends [T] ? V : T;
+
+export type BuildPropOption<T, D extends BuildPropType<T, V, C>, R, V, C> = {
+  type?: T;
+  values?: readonly V[];
+  required?: R;
+  default?: R extends true
+    ? never
+    : D extends Record<string, unknown> | Array<any>
+    ? () => D
+    : (() => D) | D;
+  validator?: ((val: any) => val is C) | ((val: any) => boolean);
+};
+
+type _BuildPropType<T, V, C> =
+  | (T extends PropWrapper<unknown>
+      ? T[typeof wrapperKey]
+      : [V] extends [never]
+      ? ResolvePropTypeWithReadonly<T>
+      : never)
+  | V
+  | C;
+export type BuildPropType<T, V, C> = _BuildPropType<
+  IfUnknown<T, never>,
+  IfUnknown<V, never>,
+  IfUnknown<C, never>
+>;
+
+type _BuildPropDefault<T, D> = [T] extends [
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  Record<string, unknown> | Array<any> | Function,
+]
+  ? D
+  : D extends () => T
+  ? ReturnType<D>
+  : D;
+
+export type BuildPropDefault<T, D, R> = R extends true
+  ? { readonly default?: undefined }
+  : {
+      readonly default: Exclude<D, undefined> extends never
+        ? undefined
+        : Exclude<_BuildPropDefault<T, D>, undefined>;
+    };
+export type BuildPropReturn<T, D, R, V, C> = {
+  readonly type: PropType<BuildPropType<T, V, C>>;
+  readonly required: IfUnknown<R, false>;
+  readonly validator: ((val: unknown) => boolean) | undefined;
+  [propKey]: true;
+} & BuildPropDefault<BuildPropType<T, V, C>, IfUnknown<D, never>, IfUnknown<R, false>>;
+
+/**
+ * @description Build prop. It can better optimize prop types
+ * @description 生成 prop，能更好地优化类型
+ * @example
+  // limited options
+  // the type will be PropType<'light' | 'dark'>
+  buildProp({
+    type: String,
+    values: ['light', 'dark'],
+  } as const)
+  * @example
+  // limited options and other types
+  // the type will be PropType<'small' | 'medium' | number>
+  buildProp({
+    type: [String, Number],
+    values: ['small', 'medium'],
+    validator: (val: unknown): val is number => typeof val === 'number',
+  } as const)
+  @link see more: https://github.com/element-plus/element-plus/pull/3341
+ */
+export function buildProp<
+  T = never,
+  D extends BuildPropType<T, V, C> = never,
+  R extends boolean = false,
+  V = never,
+  C = never,
+>(option: BuildPropOption<T, D, R, V, C>, key?: string): BuildPropReturn<T, D, R, V, C> {
+  // filter native prop type and nested prop, e.g `null`, `undefined` (from `buildProps`)
+  if (!isObject(option) || !!option[propKey]) return option as any;
+
+  const { values, required, default: defaultValue, type, validator } = option;
+
+  const _validator =
+    values || validator
+      ? (val: unknown) => {
+          let valid = false;
+          let allowedValues: unknown[] = [];
+
+          if (values) {
+            allowedValues = [...values, defaultValue];
+            valid ||= allowedValues.includes(val);
+          }
+          if (validator) valid ||= validator(val);
+
+          if (!valid && allowedValues.length > 0) {
+            const allowValuesText = [...new Set(allowedValues)]
+              .map((value) => JSON.stringify(value))
+              .join(', ');
+            warn(
+              `Invalid prop: validation failed${
+                key ? ` for prop "${key}"` : ''
+              }. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`,
+            );
+          }
+          return valid;
+        }
+      : undefined;
+
+  return {
+    type:
+      typeof type === 'object' && Object.getOwnPropertySymbols(type).includes(wrapperKey)
+        ? type[wrapperKey]
+        : type,
+    required: !!required,
+    default: defaultValue,
+    validator: _validator,
+    [propKey]: true,
+  } as unknown as BuildPropReturn<T, D, R, V, C>;
+}
+
+type NativePropType = [((...args: any) => any) | { new (...args: any): any } | undefined | null];
+
+export const buildProps = <
+  O extends {
+    [K in keyof O]: O[K] extends BuildPropReturn<any, any, any, any, any>
+      ? O[K]
+      : [O[K]] extends NativePropType
+      ? O[K]
+      : O[K] extends BuildPropOption<infer T, infer D, infer R, infer V, infer C>
+      ? D extends BuildPropType<T, V, C>
+        ? BuildPropOption<T, D, R, V, C>
+        : never
+      : never;
+  },
+>(
+  props: O,
+) =>
+  fromPairs(
+    Object.entries(props).map(([key, option]) => [key, buildProp(option as any, key)]),
+  ) as unknown as {
+    [K in keyof O]: O[K] extends { [propKey]: boolean }
+      ? O[K]
+      : [O[K]] extends NativePropType
+      ? O[K]
+      : O[K] extends BuildPropOption<
+          infer T,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          infer _D,
+          infer R,
+          infer V,
+          infer C
+        >
+      ? BuildPropReturn<T, O[K]['default'], R, V, C>
+      : never;
+  };
+
+export const definePropType = <T>(val: any) => ({ [wrapperKey]: val } as PropWrapper<T>);
+
+export const keyOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>;
+export const mutable = <T extends readonly any[] | Record<string, unknown>>(val: T) =>
+  val as Mutable<typeof val>;
+
+export const componentSize = ['large', 'medium', 'small', 'mini'] as const;
+// copy from element-plus
+
+import type { CSSProperties, Plugin } from 'vue';
+
+type OptionalKeys<T extends Record<string, unknown>> = {
+  [K in keyof T]: T extends Record<K, T[K]> ? never : K;
+}[keyof T];
+
+type RequiredKeys<T extends Record<string, unknown>> = Exclude<keyof T, OptionalKeys<T>>;
+
+type MonoArgEmitter<T, Keys extends keyof T> = <K extends Keys>(evt: K, arg?: T[K]) => void;
+
+type BiArgEmitter<T, Keys extends keyof T> = <K extends Keys>(evt: K, arg: T[K]) => void;
+
+export type EventEmitter<T extends Record<string, unknown>> = MonoArgEmitter<T, OptionalKeys<T>> &
+  BiArgEmitter<T, RequiredKeys<T>>;
+
+export type AnyFunction<T> = (...args: any[]) => T;
+
+export type PartialReturnType<T extends (...args: unknown[]) => unknown> = Partial<ReturnType<T>>;
+
+export type SFCWithInstall<T> = T & Plugin;
+
+export type Nullable<T> = T | null;
+
+export type RefElement = Nullable<HTMLElement>;
+
+export type CustomizedHTMLElement<T> = HTMLElement & T;
+
+export type Indexable<T> = {
+  [key: string]: T;
+};
+
+export type Hash<T> = Indexable<T>;
+
+export type TimeoutHandle = ReturnType<typeof global.setTimeout>;
+
+export type ComponentSize = 'large' | 'medium' | 'small' | 'mini';
+
+export type StyleValue = string | CSSProperties | Array<StyleValue>;
+
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] };
@@ -95,6 +95,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     optimizeDeps: {
       // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
       include: [
+        '@vue/shared',
         '@iconify/iconify',
         'ant-design-vue/es/locale/zh_CN',
         'ant-design-vue/es/locale/en_US',