chore: unocss

2023-03-24 23:42:18 +08:00 · 2023-03-24 23:42:18 +08:00 · 86bd1c7cbc
parent adcb0c6393
commit 86bd1c7cbc
14 changed files with 409 additions and 141 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -104,7 +104,8 @@
  "i18n-ally.enabledFrameworks": ["vue", "react"],
  "cSpell.words": [
    "vben",
-    "windi",
+    "unocss",
+    "uno.css",
    "browserslist",
    "tailwindcss",
    "esnext",
--- a/README.md
+++ b/README.md
@ -34,7 +34,7 @@
 | [vueuse](https://vueuse.org/) | 常用工具集 | 9.13.0 |
 | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |
 | [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.1.6 |
-| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
+| [unocss](https://uno.antfu.me/) | 原子 CSS  | 0.50.6 |
 | [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.1.0 |

 <p align="center">
--- a/build/vite/optimize.ts
+++ b/build/vite/optimize.ts
@ -5,6 +5,7 @@ const include = [
  'axios',
  'pinia',
  'dayjs',
+  'unocss',
  'qrcode',
  'echarts',
  'intro.js',
@ -26,8 +27,7 @@ const include = [
  'ant-design-vue',
  'ant-design-vue/es/style',
  'ant-design-vue/es/locale/zh_CN',
-  'ant-design-vue/es/locale/en_US',
-  'vite-plugin-windicss'
+  'ant-design-vue/es/locale/en_US'
 ]

 const exclude = ['@iconify/json']
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@ -1,9 +1,9 @@
 import { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Unocss from 'unocss/vite'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import legacy from '@vitejs/plugin-legacy'
 import progress from 'vite-plugin-progress'
-import windiCSS from 'vite-plugin-windicss'
 import purgeIcons from 'vite-plugin-purge-icons'
 import VitePluginCertificate from 'vite-plugin-mkcert'
 import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
@ -33,8 +33,8 @@ export function createVitePlugins(mode: string, viteEnv: ViteEnv, isBuild: boole
    })
  ]

-  // vite-plugin-windicss
-  vitePlugins.push(windiCSS())
+  // Unocss
+  vitePlugins.push(Unocss())

  // @vitejs/plugin-legacy
  VITE_LEGACY && isBuild && vitePlugins.push(legacy())
--- a/package.json
+++ b/package.json
@ -117,6 +117,7 @@
    "stylelint-order": "^6.0.3",
    "terser": "^5.16.6",
    "typescript": "^5.0.2",
+    "unocss": "^0.50.6",
    "unplugin-vue-setup-extend-plus": "^0.4.9",
    "vite": "^4.2.1",
    "vite-plugin-compression": "^0.5.1",
@ -125,7 +126,6 @@
    "vite-plugin-purge-icons": "^0.9.2",
    "vite-plugin-pwa": "^0.14.6",
    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.8.10",
    "vite-vue-plugin-html": "^1.0.1",
    "vite-vue-plugin-theme": "^1.0.0",
    "vite-vue-plugin-style-import": "^0.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -77,6 +77,7 @@ specifiers:
  terser: ^5.16.6
  tinymce: ^5.10.7
  typescript: ^5.0.2
+  unocss: ^0.50.6
  unplugin-vue-setup-extend-plus: ^0.4.9
  vditor: ^3.9.1
  vite: ^4.2.1
@ -86,7 +87,6 @@ specifiers:
  vite-plugin-purge-icons: ^0.9.2
  vite-plugin-pwa: ^0.14.6
  vite-plugin-svg-icons: ^2.0.1
-  vite-plugin-windicss: ^1.8.10
  vite-vue-plugin-html: ^1.0.1
  vite-vue-plugin-style-import: ^0.1.0
  vite-vue-plugin-theme: ^1.0.0
@ -185,6 +185,7 @@ devDependencies:
  stylelint-order: 6.0.3_stylelint@15.3.0
  terser: 5.16.6
  typescript: 5.0.2
+  unocss: 0.50.6_tpn2xygpgdsxofkv7wgj5mw654
  unplugin-vue-setup-extend-plus: 0.4.9
  vite: 4.2.1_sq5ln4aqyose73xngooyn3aq4e
  vite-plugin-compression: 0.5.1_vite@4.2.1
@ -193,7 +194,6 @@ devDependencies:
  vite-plugin-purge-icons: 0.9.2_vite@4.2.1
  vite-plugin-pwa: 0.14.6_vite@4.2.1
  vite-plugin-svg-icons: 2.0.1_vite@4.2.1
-  vite-plugin-windicss: 1.8.10_vite@4.2.1
  vite-vue-plugin-html: 1.0.1_rollup@3.20.2+vite@4.2.1
  vite-vue-plugin-style-import: 0.1.0_rollup@3.20.2+vite@4.2.1
  vite-vue-plugin-theme: 1.0.0_vite@4.2.1
@ -236,6 +236,17 @@ packages:
      vue: 3.2.47
    dev: false

+  /@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
@ -2155,6 +2166,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'}
@ -2382,6 +2406,10 @@ packages:
      '@octokit/openapi-types': 16.0.0
    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:
@ -2781,6 +2809,182 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

+  /@unocss/astro/0.50.6_rollup@3.20.2+vite@4.2.1:
+    resolution: {integrity: sha512-gSGQIh+hBCor7KbAylu4wBQaMZp3AkT8dW9E6jrecpluVxzGGdar93a79Wqs76OlWiu7hr8zOyRbSDgfkwDung==}
+    dependencies:
+      '@unocss/core': 0.50.6
+      '@unocss/reset': 0.50.6
+      '@unocss/vite': 0.50.6_rollup@3.20.2+vite@4.2.1
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
+  /@unocss/cli/0.50.6_rollup@3.20.2:
+    resolution: {integrity: sha512-La/KeZCpI7WxuqiUj37K7k/mh08oIGm15u8pkHUs2z+XtFWLemjWPeu84NK3cLgyUGlO2nwpDm2Awye4G1GgCg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@rollup/pluginutils': 5.0.2_rollup@3.20.2
+      '@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@3.20.2+vite@4.2.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@3.20.2
+      '@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.2.1_sq5ln4aqyose73xngooyn3aq4e
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
  /@vitejs/plugin-legacy/4.0.2_terser@5.16.6+vite@4.2.1:
    resolution: {integrity: sha512-ivnt9sCkgwJTYTWLjuvY6H/HTuiQC1EgzAPkiAvi0yNAssiqOJjyjhG3hAK5LFUUorE0w9kGxn8K0f/74DlbxQ==}
    engines: {node: ^14.18.0 || >=16.0.0}
@ -2990,30 +3194,6 @@ packages:
      - vue
    dev: false

-  /@windicss/config/1.8.10:
-    resolution: {integrity: sha512-O9SsC110b1Ik3YYa4Ck/0TWuCo7YFfA9KDrwD5sAeqscT5COIGK1HszdCT3oh0MJFej2wNrvpfyW9h6yQaW6PA==}
-    dependencies:
-      debug: 4.3.4
-      jiti: 1.17.1
-      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:
@ -3449,6 +3629,11 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /cac/6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
  /cache-base/1.0.1:
    resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
    engines: {node: '>=0.10.0'}
@ -4270,6 +4455,10 @@ packages:
      isobject: 3.0.1
    dev: true

+  /defu/6.1.2:
+    resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
+    dev: true
+
  /delayed-stream/1.0.0:
    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
    engines: {node: '>=0.4.0'}
@ -4278,6 +4467,10 @@ packages:
    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
    dev: true

+  /destr/1.2.2:
+    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
+    dev: true
+
  /diff-match-patch/1.0.5:
    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
    dev: false
@ -4411,6 +4604,10 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /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
@ -5314,6 +5511,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
+
  /handlebars/4.7.7:
    resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
    engines: {node: '>=0.4.7'}
@ -6170,6 +6374,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/2.0.0:
    resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
    engines: {node: '>=4'}
@ -6548,6 +6757,11 @@ packages:
    engines: {node: '>=0.10.0'}
    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
@ -6631,6 +6845,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}
@ -6765,6 +6983,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
+
  /once/1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
@ -6998,6 +7224,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==}

@ -7699,6 +7929,15 @@ packages:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
    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.0
+    dev: true
+
  /slash/3.0.0:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
    engines: {node: '>=8'}
@ -8325,6 +8564,11 @@ packages:
      safe-regex: 1.1.0
    dev: true

+  /totalist/3.0.0:
+    resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
+    engines: {node: '>=6'}
+    dev: true
+
  /tr46/0.0.3:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
    dev: true
@ -8463,6 +8707,10 @@ packages:
    engines: {node: '>=12.20'}
    hasBin: true

+  /ufo/1.1.1:
+    resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
+    dev: true
+
  /uglify-js/3.17.4:
    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
    engines: {node: '>=0.8.0'}
@ -8480,6 +8728,14 @@ packages:
      which-boxed-primitive: 1.0.2
    dev: true

+  /unconfig/0.3.7:
+    resolution: {integrity: sha512-1589b7oGa8ILBYpta7TndM5mLHLzHUqBfhszeZxuUBrjO/RoQ52VGVWsS3w0C0GLNxO9RPmqkf6BmIvBApaRdA==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      defu: 6.1.2
+      jiti: 1.17.1
+    dev: true
+
  /unicode-canonical-property-names-ecmascript/2.0.0:
    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
    engines: {node: '>=4'}
@ -8529,6 +8785,40 @@ packages:
    engines: {node: '>= 10.0.0'}
    dev: true

+  /unocss/0.50.6_tpn2xygpgdsxofkv7wgj5mw654:
+    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@3.20.2+vite@4.2.1
+      '@unocss/cli': 0.50.6_rollup@3.20.2
+      '@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@3.20.2+vite@4.2.1
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
  /unplugin-vue-setup-extend-plus/0.4.9:
    resolution: {integrity: sha512-4a4CvMkoZRuUHLQq1kkcuZ7HG85xM6MPMa+E1pEf5/PX6ovaCXwZ20qVOIQUIGkh3sHVp0VBhJaibHzC8hPtoA==}
    dependencies:
@ -8726,20 +9016,6 @@ packages:
      - supports-color
    dev: true

-  /vite-plugin-windicss/1.8.10_vite@4.2.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.2.1_sq5ln4aqyose73xngooyn3aq4e
-      windicss: 3.5.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /vite-vue-plugin-html/1.0.1_rollup@3.20.2+vite@4.2.1:
    resolution: {integrity: sha512-jbN7p8pOR0aiYndFuPgyQwRAyEp8kIoy6EL741wMh3nDLVjHn4Atfby0k0Jg0aDfWCjoAc9paKdoLoEqOAC9PA==}
    peerDependencies:
@ -9032,12 +9308,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'}
--- a/src/components/Tinymce/src/helper.ts
+++ b/src/components/Tinymce/src/helper.ts
@ -74,7 +74,7 @@ export const bindHandlers = (initEvent: Event, listeners: any, editor: any): voi
        if (key === 'onInit') {
          handler(initEvent, editor)
        } else {
-          editor.on(key.slice(2), (e: any) => handler(e, editor))
+          editor.on(key.substring(2), (e: any) => handler(e, editor))
        }
      }
    })
--- a/src/locales/helper.ts
+++ b/src/locales/helper.ts
@ -19,7 +19,7 @@ export function genMessage(langs: Record<string, Record<string, any>>, prefix =
    const langFileModule = langs[key].default
    let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '')
    const lastIndex = fileName.lastIndexOf('.')
-    fileName = fileName.slice(0, lastIndex)
+    fileName = fileName.substring(0, lastIndex)
    const keyList = fileName.split('/')
    const moduleName = keyList.shift()
    const objKey = keyList.join('.')
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,5 @@
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
+import 'uno.css'
 import '@/design/index.less'
-import 'virtual:windi-utilities.css'
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import App from './App.vue'
--- a/src/router/helper/routeHelper.ts
+++ b/src/router/helper/routeHelper.ts
@ -53,7 +53,7 @@ function dynamicImport(dynamicViewsModules: Record<string, () => Promise<Recorda
    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
    const startIndex = startFlag ? 0 : 1
    const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
-    return k.slice(startIndex, lastIndex) === component
+    return k.substring(startIndex, lastIndex) === component
  })
  if (matchKeys?.length === 1) {
    const matchKey = matchKeys[0]
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@ -65,10 +65,10 @@ export function colorIsDark(color: string) {
 * @returns {string} The HEX representation of the processed color
 */
 export function darken(color: string, amount: number) {
-  color = color.indexOf('#') >= 0 ? color.slice(1, color.length) : color
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
  amount = Math.trunc((255 * amount) / 100)
-  return `#${subtractLight(color.slice(0, 2), amount)}${subtractLight(color.slice(2, 4), amount)}${subtractLight(
-    color.slice(4, 6),
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(color.substring(2, 4), amount)}${subtractLight(
+    color.substring(4, 6),
    amount
  )}`
 }
@ -80,9 +80,9 @@ export function darken(color: string, amount: number) {
 * @returns {string} The processed color represented as HEX
 */
 export function lighten(color: string, amount: number) {
-  color = color.indexOf('#') >= 0 ? color.slice(1, color.length) : color
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
  amount = Math.trunc((255 * amount) / 100)
-  return `#${addLight(color.slice(0, 2), amount)}${addLight(color.slice(2, 4), amount)}${addLight(color.slice(4, 6), amount)}`
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(color.substring(2, 4), amount)}${addLight(color.substring(4, 6), amount)}`
 }

 /* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
@ -126,7 +126,7 @@ function contrast(rgb1: string[], rgb2: number[]) {
 * @param hexColor - Last selected color by the user
 */
 export function calculateBestTextColor(hexColor: string) {
-  const rgbColor = hexToRGB(hexColor.slice(1))
+  const rgbColor = hexToRGB(hexColor.substring(1))
  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])

  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'
--- a/src/utils/file/download.ts
+++ b/src/utils/file/download.ts
@ -69,7 +69,7 @@ export function downloadByUrl({ url, target = '_blank', fileName }: { url: strin
    link.target = target

    if (link.download !== undefined) {
-      link.download = fileName || url.slice(url.lastIndexOf('/') + 1, url.length)
+      link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length)
    }

    if (document.createEvent) {
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -0,0 +1,73 @@
+import { defineConfig, presetAttributify, presetMini, presetUno } from 'unocss'
+import { primaryColor } from './build/config/themeConfig'
+
+export default defineConfig({
+  presets: [presetMini({ dark: 'class' }), presetAttributify(), presetUno()],
+  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 }
+// }
--- a/windi.config.ts
+++ b/windi.config.ts
@ -1,74 +0,0 @@
-import { defineConfig } from 'vite-plugin-windicss'
-import { primaryColor } from './build/config/themeConfig'
-
-export default defineConfig({
-  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 }
-}