diff --git a/.vscode/settings.json b/.vscode/settings.json
index 61716811ccb9d5b0e9016d4ccbf7e7ce043c8838..378cd3b2eecafb70e983f0cb7611b48fd23af2d1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -104,7 +104,6 @@
   "i18n-ally.enabledFrameworks": ["vue", "react"],
   "cSpell.words": [
     "vben",
-    "windi",
     "browserslist",
     "tailwindcss",
     "esnext",
diff --git a/internal/stylelint-config/src/index.ts b/internal/stylelint-config/src/index.ts
index 23a18655b18a062898fddd90cc5ee0ba1225a564..3dc0475b49cb47f5d9f5071bfc7b6dbcfcdeb8b7 100644
--- a/internal/stylelint-config/src/index.ts
+++ b/internal/stylelint-config/src/index.ts
@@ -22,6 +22,8 @@ export default {
     },
   ],
   rules: {
+    'selector-not-notation': null,
+    'import-notation': null,
     'function-no-unknown': null,
     'selector-class-pattern': null,
     'selector-pseudo-class-no-unknown': [
diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json
index 5be979d77ae4e9a34bbe4e5ecd325e80280ebe36..60843a2c2bdc5bd4e3f21afb74b03e2139a03512 100644
--- a/internal/vite-config/package.json
+++ b/internal/vite-config/package.json
@@ -45,11 +45,11 @@
     "pkg-types": "^1.0.2",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.60.0",
+    "unocss": "^0.50.6",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-purge-icons": "^0.9.2",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.8.10"
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }
diff --git a/internal/vite-config/src/config/common.ts b/internal/vite-config/src/config/common.ts
index 12bfd65130b26959fedf7c292dfe2d8d53b45f29..d00e9c4cd23b9927893af4aef1dadfeb41dfb2ed 100644
--- a/internal/vite-config/src/config/common.ts
+++ b/internal/vite-config/src/config/common.ts
@@ -1,4 +1,6 @@
 import { type UserConfig } from 'vite';
+import UnoCSS from 'unocss/vite';
+import { presetTypography, presetUno } from 'unocss';
 
 const commonConfig: UserConfig = {
   server: {
@@ -15,6 +17,11 @@ const commonConfig: UserConfig = {
       maxParallelFileOps: 3,
     },
   },
+  plugins: [
+    UnoCSS({
+      presets: [presetUno(), presetTypography()],
+    }),
+  ],
 };
 
 export { commonConfig };
diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts
index 378b3694b4303649f2b9d0168a7c6f3ebe181631..344ec01b751a2c9529020bfd10f1120fd506b73f 100644
--- a/internal/vite-config/src/plugins/index.ts
+++ b/internal/vite-config/src/plugins/index.ts
@@ -8,7 +8,6 @@ import { createAppConfigPlugin } from './appConfig';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import purgeIcons from 'vite-plugin-purge-icons';
-import windiCSS from 'vite-plugin-windicss';
 
 interface Options {
   isBuild: boolean;
@@ -24,9 +23,6 @@ async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyz
   const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
   vitePlugins.push(appConfigPlugin);
 
-  // vite-plugin-windicss
-  vitePlugins.push(windiCSS());
-
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin({ isBuild }));
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c15f14be0d955a25d1a770bf371f47b1ca039430..f532b62936006a283597d8b56befb34bb71f5802 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,6 +409,9 @@ importers:
       sass:
         specifier: ^1.60.0
         version: 1.60.0
+      unocss:
+        specifier: ^0.50.6
+        version: 0.50.6(postcss@8.4.21)(rollup@2.79.1)(vite@4.3.0-beta.1)
       vite-plugin-compression:
         specifier: ^0.5.1
         version: 0.5.1(vite@4.3.0-beta.1)
@@ -424,9 +427,6 @@ importers:
       vite-plugin-svg-icons:
         specifier: ^2.0.1
         version: 2.0.1(vite@4.3.0-beta.1)
-      vite-plugin-windicss:
-        specifier: ^1.8.10
-        version: 1.8.10(vite@4.3.0-beta.1)
 
 packages:
 
@@ -461,6 +461,17 @@ packages:
       '@ant-design/icons-svg': 4.2.1
       vue: 3.2.47
 
+  /@antfu/install-pkg@0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
+  /@antfu/utils@0.5.2:
+    resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
+    dev: true
+
   /@antfu/utils@0.7.2:
     resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==}
     dev: true
@@ -1260,6 +1271,19 @@ packages:
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  /@iconify/utils@2.1.5:
+    resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.2
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.7.0
+      local-pkg: 0.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@intlify/core-base@9.2.2:
     resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
     engines: {node: '>= 14'}
@@ -1493,6 +1517,10 @@ packages:
       - supports-color
     dev: true
 
+  /@polka/url@1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
   /@purge-icons/core@0.9.1:
     resolution: {integrity: sha512-sx8/a30MbbqQVEqhuMPE1wJpdVRRbEmwEPZpFzVkcDixzX4p+R2A0WVxqkb0xfHUBAVQwrSE2SeAyniIQLqbLw==}
     dependencies:
@@ -1623,6 +1651,21 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@rollup/pluginutils@5.0.2(rollup@2.79.1):
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.79.1
+    dev: true
+
   /@rollup/pluginutils@5.0.2(rollup@3.20.2):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -2028,6 +2071,182 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
+  /@unocss/astro@0.50.6(rollup@2.79.1)(vite@4.3.0-beta.1):
+    resolution: {integrity: sha512-gSGQIh+hBCor7KbAylu4wBQaMZp3AkT8dW9E6jrecpluVxzGGdar93a79Wqs76OlWiu7hr8zOyRbSDgfkwDung==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      '@unocss/reset': 0.50.6
+      '@unocss/vite': 0.50.6(rollup@2.79.1)(vite@4.3.0-beta.1)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
+  /@unocss/cli@0.50.6(rollup@2.79.1):
+    resolution: {integrity: sha512-La/KeZCpI7WxuqiUj37K7k/mh08oIGm15u8pkHUs2z+XtFWLemjWPeu84NK3cLgyUGlO2nwpDm2Awye4G1GgCg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.50.6
+      '@unocss/core': 0.50.6
+      '@unocss/preset-uno': 0.50.6
+      cac: 6.7.14
+      chokidar: 3.5.3
+      colorette: 2.0.19
+      consola: 2.15.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      pathe: 1.1.0
+      perfect-debounce: 0.1.3
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@unocss/config@0.50.6:
+    resolution: {integrity: sha512-/IdnXyU4NOQCXBryZsEv9GYAnTvCZ/wmm5mv5ZIPXrS1ZClVbCbnwUxIW08t4EHIX/E9gSFClzXJ52pLBFkZ7g==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.50.6
+      unconfig: 0.3.7
+    dev: true
+
+  /@unocss/core@0.50.6:
+    resolution: {integrity: sha512-WMIp8xr7YSlID2whqfRGLwagp59e6u4ckPACEpoDOW8sTeSPRZm54hxPhuWXD1SQuqcwHPMtM9nzGD8UOnqQxA==}
+    dev: true
+
+  /@unocss/inspector@0.50.6:
+    resolution: {integrity: sha512-6nX1YtaL67ohn/PfSSBv3npJ8qZcdc7S9X2zE6PUD/xhwtz7Bohx9I/KtmFdjJz5WeeGR7di0uYC6xsAcFLndQ==}
+    dependencies:
+      gzip-size: 6.0.0
+      sirv: 2.0.2
+    dev: true
+
+  /@unocss/postcss@0.50.6(postcss@8.4.21):
+    resolution: {integrity: sha512-pRPBVPmwjsVu3v1T0hQuqq3L4K74Wobo6pGDypvK/MuzWdWDhHiktWwmXGNxlYSWK7mGJBIa+vI10pp4e15OUw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      '@unocss/config': 0.50.6
+      '@unocss/core': 0.50.6
+      css-tree: 2.3.1
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      postcss: 8.4.21
+    dev: true
+
+  /@unocss/preset-attributify@0.50.6:
+    resolution: {integrity: sha512-hLxBoOnwMLILhJ5fM2AtnjSWej2GffIjTdrAHIBctEy8sLssou5lIbSukDptuGRTSwkishuvQhH020dptB3YJw==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/preset-icons@0.50.6:
+    resolution: {integrity: sha512-ADnvX8JCThEr2DBiDprTh2q4bfvULbCg9hL5DZIuP9/31FvzNqpAI8xo9KpsCPBoQMksg+GVoXhj1CN2IxLhtg==}
+    dependencies:
+      '@iconify/utils': 2.1.5
+      '@unocss/core': 0.50.6
+      ofetch: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini@0.50.6:
+    resolution: {integrity: sha512-Ejgib688uvzCVgT/DHAOyXxKcM8vX55mxh8m3GAEx1H1pxg0IBfJO4QCKa3uAnasxj27XescBbvqv04dWi+jEQ==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/preset-tagify@0.50.6:
+    resolution: {integrity: sha512-ZyG/SJMobn4GZMbgrZOxT59ARp22LwgJGArCwJVosh3rraRVlb+B4x6ctMl6JOiLG5B1lHT9vZ92//u51Y0WTw==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/preset-typography@0.50.6:
+    resolution: {integrity: sha512-5WBsvHHVBBNJVoh38GwkJpcfS+JTdi0KuQuTsz6SvhQg+xuth3a6ebhAlrEpdS2G9BL5lpMwBd9SbgvpkE75Og==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      '@unocss/preset-mini': 0.50.6
+    dev: true
+
+  /@unocss/preset-uno@0.50.6:
+    resolution: {integrity: sha512-MTuTd49mU8CfKGP/SVMqxNBDEXJmJPes+K6uwZnOsoEwySh1ZrGdApwmIeJurlDEsBiQFQfaSHKHQ25JWVPg3A==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      '@unocss/preset-mini': 0.50.6
+      '@unocss/preset-wind': 0.50.6
+    dev: true
+
+  /@unocss/preset-web-fonts@0.50.6:
+    resolution: {integrity: sha512-81meQMAq2lOy7k5qHQZ2EGWN5iJQUJOLl8dc9dxIo1eZPgiZQruxTVr4AkNVH5LRFcjHs/1sDb2CYxAiakwTVg==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      ofetch: 1.0.1
+    dev: true
+
+  /@unocss/preset-wind@0.50.6:
+    resolution: {integrity: sha512-LU5fAad+okonKfP1eHY5Q63uhoiSstQf4lU7CZ97eZdduqN1ODLzeBegjMGHHi1K2112AvzN/Au0WEPjQFgf7Q==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      '@unocss/preset-mini': 0.50.6
+    dev: true
+
+  /@unocss/reset@0.50.6:
+    resolution: {integrity: sha512-e1fuSEgp1p7FgpsIZKNejOKgq4gyZcDGDvi+6544x458hInM6MfiMQNP95UBJEG4JZXq6qCZ8t7tRVWS2m5IXg==}
+    dev: true
+
+  /@unocss/scope@0.50.6:
+    resolution: {integrity: sha512-ep1RRJzA3xbVmEcsBYvY8i/LQIfoCFaw1bx9hvGLhdCIdboy58sL4R4GigOukBJiufykKkrLNzFmlIsi3EfJWg==}
+    dev: true
+
+  /@unocss/transformer-attributify-jsx@0.50.6:
+    resolution: {integrity: sha512-nXt9Kj9L72ehiDwkzjzxXV4QcV7VS60kP4PXuf+Gp70wE3/19iZl3K3Um/lGo3WHgAYvr91hxBkcyxYBOLUIFA==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/transformer-compile-class@0.50.6:
+    resolution: {integrity: sha512-MWpxO94bq28+HWxniED4BP26aIs5hGhTnaTBkTrisiF8T9xyNPwXaSUobuYkjP1s3ojrXHha8ic0uIXy5OC5nw==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/transformer-directives@0.50.6:
+    resolution: {integrity: sha512-deUJMZDDYQ/kGRFdGe3JrmnbiScs9Smc5Vj35Pr/MNMAM9pItbMwCgZLc+EcHgYNvO5tp0qfA9prPAIs4YpRbg==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      css-tree: 2.3.1
+    dev: true
+
+  /@unocss/transformer-variant-group@0.50.6:
+    resolution: {integrity: sha512-eAbJ2Ho1lYaFvpKexqUqixh2TvzcE/DNSIHncr/9Ezo9s06kkHxw4KeIxw//TF26zYP7IJx8l5F58HoSjdKwbQ==}
+    dependencies:
+      '@unocss/core': 0.50.6
+    dev: true
+
+  /@unocss/vite@0.50.6(rollup@2.79.1)(vite@4.3.0-beta.1):
+    resolution: {integrity: sha512-BBfNHWRTD69ToNX4NlYdORFG6uH51HCjX+vZ8HAVgYHpSeVWziG3srnGYOk5IS0pKPzQGoLBlz8rstMsGhrAjA==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.50.6
+      '@unocss/core': 0.50.6
+      '@unocss/inspector': 0.50.6
+      '@unocss/scope': 0.50.6
+      '@unocss/transformer-directives': 0.50.6
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      vite: 4.3.0-beta.1(@types/node@18.15.11)(less@4.1.3)(sass@1.60.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@vitejs/plugin-vue-jsx@3.0.1(vite@4.3.0-beta.1)(vue@3.2.47):
     resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2229,30 +2448,6 @@ packages:
       - vue
     dev: false
 
-  /@windicss/config@1.8.10:
-    resolution: {integrity: sha512-O9SsC110b1Ik3YYa4Ck/0TWuCo7YFfA9KDrwD5sAeqscT5COIGK1HszdCT3oh0MJFej2wNrvpfyW9h6yQaW6PA==}
-    dependencies:
-      debug: 4.3.4
-      jiti: 1.18.2
-      windicss: 3.5.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@windicss/plugin-utils@1.8.10:
-    resolution: {integrity: sha512-Phqk5OW1w+Mv+ry6t7BzAeDq3aMhbI94gR49j9vQCufFfDGCHndhhjtMK0sBv+NPJUsIAIh6qayb1iwBCXUGrw==}
-    dependencies:
-      '@antfu/utils': 0.7.2
-      '@windicss/config': 1.8.10
-      debug: 4.3.4
-      fast-glob: 3.2.12
-      magic-string: 0.27.0
-      micromatch: 4.0.5
-      windicss: 3.5.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@zxcvbn-ts/core@2.2.1:
     resolution: {integrity: sha512-Cg1JyRpCDIF+Dh3nauqygmmCYxogNVZDxSn+9PgkPD1HZ2QiJe4elruVJrGmYRS7muGmZ1hNJq8ySQdPv6GHaw==}
     dependencies:
@@ -3535,6 +3730,10 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  /destr@1.2.2:
+    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
+    dev: true
+
   /destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -3698,6 +3897,10 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
+  /duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
@@ -4584,6 +4787,13 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
   /hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -5540,6 +5750,11 @@ packages:
       json5: 1.0.2
     dev: true
 
+  /local-pkg@0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
   /locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -6000,6 +6215,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /mrmime@1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -6103,6 +6323,10 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /node-fetch-native@1.0.2:
+    resolution: {integrity: sha512-KIkvH1jl6b3O7es/0ShyCgWLcfXxlBrLBbP3rOr23WArC66IMcU4DeZEeYEOwnopYhawLTn7/y+YtmASe8DFVQ==}
+    dev: true
+
   /node-fetch@2.6.7:
     resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
     engines: {node: 4.x || >=6.0.0}
@@ -6244,6 +6468,14 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /ofetch@1.0.1:
+    resolution: {integrity: sha512-icBz2JYfEpt+wZz1FRoGcrMigjNKjzvufE26m9+yUiacRQRHwnNlGRPiDnW4op7WX/MR6aniwS8xw8jyVelF2g==}
+    dependencies:
+      destr: 1.2.2
+      node-fetch-native: 1.0.2
+      ufo: 1.1.1
+    dev: true
+
   /on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
     engines: {node: '>= 0.8'}
@@ -6480,6 +6712,10 @@ packages:
     resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
     dev: true
 
+  /perfect-debounce@0.1.3:
+    resolution: {integrity: sha512-NOT9AcKiDGpnV/HBhI22Str++XWcErO/bALvHCuhv33owZW/CjH8KAFLZDCmu3727sihe0wTxpDhyGc6M8qacQ==}
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -7364,6 +7600,15 @@ packages:
       semver: 7.0.0
     dev: true
 
+  /sirv@2.0.2:
+    resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.1
+    dev: true
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -8108,6 +8353,11 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
   /touch@3.1.0:
     resolution: {integrity: sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==}
     hasBin: true
@@ -8416,6 +8666,14 @@ packages:
       - supports-color
     dev: true
 
+  /unconfig@0.3.7:
+    resolution: {integrity: sha512-1589b7oGa8ILBYpta7TndM5mLHLzHUqBfhszeZxuUBrjO/RoQ52VGVWsS3w0C0GLNxO9RPmqkf6BmIvBApaRdA==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      defu: 6.1.2
+      jiti: 1.18.2
+    dev: true
+
   /undefsafe@2.0.5:
     resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
     dev: true
@@ -8439,6 +8697,40 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
+  /unocss@0.50.6(postcss@8.4.21)(rollup@2.79.1)(vite@4.3.0-beta.1):
+    resolution: {integrity: sha512-7cKiIB/ssAPvCDUcFMs0jm0FzIyQKfgIjUzBYZ5dVFthOvN5dcFh7bCZE9dIM862n7oW8FjbkTxwdTbRqqJQVQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.50.6
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.50.6(rollup@2.79.1)(vite@4.3.0-beta.1)
+      '@unocss/cli': 0.50.6(rollup@2.79.1)
+      '@unocss/core': 0.50.6
+      '@unocss/postcss': 0.50.6(postcss@8.4.21)
+      '@unocss/preset-attributify': 0.50.6
+      '@unocss/preset-icons': 0.50.6
+      '@unocss/preset-mini': 0.50.6
+      '@unocss/preset-tagify': 0.50.6
+      '@unocss/preset-typography': 0.50.6
+      '@unocss/preset-uno': 0.50.6
+      '@unocss/preset-web-fonts': 0.50.6
+      '@unocss/preset-wind': 0.50.6
+      '@unocss/reset': 0.50.6
+      '@unocss/transformer-attributify-jsx': 0.50.6
+      '@unocss/transformer-compile-class': 0.50.6
+      '@unocss/transformer-directives': 0.50.6
+      '@unocss/transformer-variant-group': 0.50.6
+      '@unocss/vite': 0.50.6(rollup@2.79.1)(vite@4.3.0-beta.1)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -8641,20 +8933,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-windicss@1.8.10(vite@4.3.0-beta.1):
-    resolution: {integrity: sha512-scywsuzo46lcTBohspmF0WiwhWEte6p+OUVrX4yr7VMRvLHMHVfLtJReyD5pppjijG7YOwVsZn7XBWWZtF658Q==}
-    peerDependencies:
-      vite: ^2.0.1 || ^3.0.0 || ^4.0.0
-    dependencies:
-      '@windicss/plugin-utils': 1.8.10
-      debug: 4.3.4
-      kolorist: 1.7.0
-      vite: 4.3.0-beta.1(@types/node@18.15.11)(less@4.1.3)(sass@1.60.0)
-      windicss: 3.5.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite@4.3.0-beta.1(@types/node@18.15.11)(less@4.1.3)(sass@1.60.0):
     resolution: {integrity: sha512-D4j9bail/S/OopyozlmQv7zPxf0xwe0zgZTkOAT61yD0lCUF29GgarhU6Z2hPEXelQyKGYyPFwUmuUX4tze9sA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -8896,12 +9174,6 @@ packages:
       isexe: 2.0.0
     dev: true
 
-  /windicss@3.5.6:
-    resolution: {integrity: sha512-P1mzPEjgFMZLX0ZqfFht4fhV/FX8DTG7ERG1fBLiWvd34pTLVReS5CVsewKn9PApSgXnVfPWwvq+qUsRwpnwFA==}
-    engines: {node: '>= 12'}
-    hasBin: true
-    dev: true
-
   /wmf@1.0.2:
     resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
     engines: {node: '>=0.8'}
diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
index c997d0168313c5a6c7128da451a15e0e4deb0d77..5fa6f6eeb37c7631e39ecc8e5a3a7d3ebd881c65 100644
--- a/src/design/ant/btn.less
+++ b/src/design/ant/btn.less
@@ -7,13 +7,13 @@
   }
 
   &-primary {
-    color: @white;
     background-color: @button-primary-color;
+    color: @white;
 
     &:hover,
     &:focus {
-      color: @white;
       background-color: @button-primary-hover-color;
+      color: @white;
     }
   }
 
@@ -22,15 +22,15 @@
   }
 
   &-default {
-    color: @button-cancel-color;
-    background-color: @button-cancel-bg-color;
     border-color: @button-cancel-border-color;
+    background-color: @button-cancel-bg-color;
+    color: @button-cancel-color;
 
     &:hover,
     &:focus {
-      color: @button-cancel-hover-color;
-      background-color: @button-cancel-hover-bg-color;
       border-color: @button-cancel-hover-border-color;
+      background-color: @button-cancel-hover-bg-color;
+      color: @button-cancel-hover-color;
     }
     //
     //&[disabled],
@@ -42,21 +42,21 @@
   }
 
   [data-theme='light'] &.ant-btn-link.is-disabled {
+    border-color: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none;
     color: rgb(0 0 0 / 25%);
     text-shadow: none;
     cursor: not-allowed !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none;
   }
 
   [data-theme='dark'] &.ant-btn-link.is-disabled {
+    border-color: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none;
     color: rgb(255 255 255 / 25%) !important;
     text-shadow: none;
     cursor: not-allowed !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none;
   }
 
   // color: @white;
@@ -66,8 +66,8 @@
 
     &:hover,
     &:focus {
-      color: @button-success-hover-color;
       border-color: transparent;
+      color: @button-success-hover-color;
     }
 
     &:active {
@@ -86,21 +86,21 @@
   }
 
   &-success:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-success-color;
     border-color: @button-success-color;
+    background-color: @button-success-color;
+    color: @white;
     //border-width: 0;
 
     &:hover,
     &:focus {
-      color: @white;
-      background-color: @button-success-hover-color;
       border-color: @button-success-hover-color;
+      background-color: @button-success-hover-color;
+      color: @white;
     }
 
     &:active {
-      background-color: @button-success-active-color;
       border-color: @button-success-active-color;
+      background-color: @button-success-active-color;
     }
   }
 
@@ -109,8 +109,8 @@
 
     &:hover,
     &:focus {
-      color: @button-warn-hover-color;
       border-color: transparent;
+      color: @button-warn-hover-color;
     }
 
     &:active {
@@ -119,21 +119,21 @@
   }
 
   &-warning:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-warn-color;
     border-color: @button-warn-color;
+    background-color: @button-warn-color;
+    color: @white;
     //border-width: 0;
 
     &:hover,
     &:focus {
-      color: @white;
-      background-color: @button-warn-hover-color;
       border-color: @button-warn-hover-color;
+      background-color: @button-warn-hover-color;
+      color: @white;
     }
 
     &:active {
-      background-color: @button-warn-active-color;
       border-color: @button-warn-active-color;
+      background-color: @button-warn-active-color;
     }
 
     //&[disabled],
@@ -149,8 +149,8 @@
 
     &:hover,
     &:focus {
-      color: @button-error-hover-color;
       border-color: transparent;
+      color: @button-error-hover-color;
     }
 
     &:active {
@@ -159,21 +159,21 @@
   }
 
   &-error:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-error-color;
     border-color: @button-error-color;
+    background-color: @button-error-color;
+    color: @white;
     //border-width: 0;
 
     &:hover,
     &:focus {
-      color: @white;
-      background-color: @button-error-hover-color;
       border-color: @button-error-hover-color;
+      background-color: @button-error-hover-color;
+      color: @white;
     }
 
     &:active {
-      background-color: @button-error-active-color;
       border-color: @button-error-active-color;
+      background-color: @button-error-active-color;
     }
 
     //&[disabled],
@@ -190,86 +190,86 @@
 
     &[disabled],
     &[disabled]:hover {
-      color: fade(@white, 40%) !important;
-      background-color: transparent !important;
       border-color: fade(@white, 40%) !important;
+      background-color: transparent !important;
+      color: fade(@white, 40%) !important;
     }
   }
 
   &-dashed&-background-ghost,
   &-default&-background-ghost {
-    color: @button-ghost-color;
     border-color: @button-ghost-color;
+    color: @button-ghost-color;
 
     &:hover,
     &:focus {
-      color: @button-ghost-hover-color;
       border-color: @button-ghost-hover-color;
+      color: @button-ghost-hover-color;
     }
 
     &:active {
-      color: @button-ghost-active-color;
       border-color: @button-ghost-active-color;
+      color: @button-ghost-active-color;
     }
 
     &[disabled],
     &[disabled]:hover {
-      color: fade(@white, 40%) !important;
       border-color: fade(@white, 40%) !important;
+      color: fade(@white, 40%) !important;
     }
   }
 
   &-background-ghost&-success:not(.ant-btn-link) {
-    color: @button-success-color;
-    background-color: transparent;
-    border-color: @button-success-color;
     border-width: 1px;
+    border-color: @button-success-color;
+    background-color: transparent;
+    color: @button-success-color;
 
     &:hover,
     &:focus {
-      color: @button-success-hover-color !important;
       border-color: @button-success-hover-color;
+      color: @button-success-hover-color !important;
     }
 
     &:active {
-      color: @button-success-active-color;
       border-color: @button-success-active-color;
+      color: @button-success-active-color;
     }
   }
 
   &-background-ghost&-warning:not(.ant-btn-link) {
-    color: @button-warn-color;
-    background-color: transparent;
-    border-color: @button-warn-color;
     border-width: 1px;
+    border-color: @button-warn-color;
+    background-color: transparent;
+    color: @button-warn-color;
 
     &:hover,
     &:focus {
-      color: @button-warn-hover-color !important;
       border-color: @button-warn-hover-color;
+      color: @button-warn-hover-color !important;
     }
 
     &:active {
-      color: @button-warn-active-color;
       border-color: @button-warn-active-color;
+      color: @button-warn-active-color;
     }
   }
 
   &-background-ghost&-error:not(.ant-btn-link) {
-    color: @button-error-color;
-    background-color: transparent;
-    border-color: @button-error-color;
     border-width: 1px;
+    border-color: @button-error-color;
+    background-color: transparent;
+    color: @button-error-color;
 
     &:hover,
     &:focus {
-      color: @button-error-hover-color !important;
       border-color: @button-error-hover-color;
+      color: @button-error-hover-color !important;
     }
 
     &:active {
-      color: @button-error-active-color;
       border-color: @button-error-active-color;
+      color: @button-error-active-color;
     }
   }
 
@@ -278,8 +278,8 @@
 
     &:hover,
     &:focus {
-      color: @button-ghost-hover-color;
       border-color: transparent;
+      color: @button-ghost-hover-color;
     }
   }
 }
diff --git a/src/design/entry.css b/src/design/entry.css
new file mode 100644
index 0000000000000000000000000000000000000000..1d40f5dbf5e45977d2f0c46da7b5c1f9c0373f78
--- /dev/null
+++ b/src/design/entry.css
@@ -0,0 +1,168 @@
+* > .enter-x:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(1),
+* > .-enter-x:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-x:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(2),
+* > .-enter-x:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-x:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(3),
+* > .-enter-x:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-x:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(4),
+* > .-enter-x:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-x:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(5),
+* > .-enter-x:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+* > .enter-y:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(1),
+* > .-enter-y:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-y:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(2),
+* > .-enter-y:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-y:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(3),
+* > .-enter-y:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-y:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(4),
+* > .-enter-y:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-y:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(5),
+* > .-enter-y:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/design/index.less b/src/design/index.less
index 7727586910f8f3fea90ef84497861ba8bccab1d6..9758c166a480b15122f80ad855d3feb224af70ad 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'ant/index.less';
 @import './theme.less';
+@import './entry.css';
 
 input:-webkit-autofill {
   box-shadow: 0 0 0 1000px white inset !important;
diff --git a/src/main.ts b/src/main.ts
index 50b0d94eb9378bbbbfe0e731d8327958b7b11175..401c260a51f0dfd3e367c8572cdaa107d0fe4e60 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,6 @@
-import 'virtual:windi-base.css';
-import 'virtual:windi-components.css';
+import 'uno.css';
 import '/@/design/index.less';
 import '/@/components/VxeTable/src/css/index.scss';
-import 'virtual:windi-utilities.css';
 import 'ant-design-vue/dist/antd.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
diff --git a/windi.config.ts b/windi.config.ts
deleted file mode 100644
index be79ddf6419a10cd8b6b534269f400e531cb3e41..0000000000000000000000000000000000000000
--- a/windi.config.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-const primaryColor = '#0960bd';
-
-export default {
-  darkMode: 'class',
-  plugins: [createEnterPlugin()],
-  theme: {
-    extend: {
-      zIndex: {
-        '-1': '-1',
-      },
-      colors: {
-        primary: primaryColor,
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px',
-      },
-    },
-  },
-};
-
-/**
- * Used for animation when the element is displayed.
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
- */
-function createEnterPlugin(maxOutput = 6) {
-  const createCss = (index: number, d = 'x') => {
-    const upd = d.toUpperCase();
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`,
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`,
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`,
-      },
-    };
-  };
-  const handler = ({ addBase }) => {
-    const addRawCss = {};
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(addRawCss, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y'),
-      });
-    }
-    addBase({
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)',
-        },
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)',
-        },
-      },
-    });
-  };
-  return { handler };
-}