feat: 集成 unocss

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "vue.vscode-typescript-vue-plugin",
-    "Vue.volar"
+    "vue.volar",
+    "antfu.unocss"
   ]
 }

README.md

@@ -19,6 +19,7 @@
 - **ESlint**：代码校验
 - **Prettier**：代码格式化
 - **Axios**：没啥好说的，已封装好
+- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
 - **注释**：各个配置项都写有尽可能详细的注释
 
 ## 功能

package.json

@@ -57,6 +57,7 @@
     "prettier": "^2.6.2",
     "sass": "^1.51.0",
     "typescript": "^4.6.4",
+    "unocss": "^0.33.2",
     "vite": "^2.9.8",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^8.3.0",

pnpm-lock.yaml

@@ -31,6 +31,7 @@ specifiers:
   sass: ^1.51.0
   screenfull: ^6.0.1
   typescript: ^4.6.4
+  unocss: ^0.33.2
   vite: ^2.9.8
   vite-plugin-svg-icons: ^2.0.1
   vue: ^3.2.33
@@ -73,6 +74,7 @@ devDependencies:
   prettier: 2.6.2
   sass: 1.51.0
   typescript: 4.6.4
+  unocss: 0.33.2_vite@2.9.8
   vite: 2.9.8_sass@1.51.0
   vite-plugin-svg-icons: 2.0.1_vite@2.9.8
   vue-eslint-parser: 8.3.0_eslint@8.15.0
@@ -80,6 +82,17 @@ devDependencies:
 
 packages:
 
+  /@antfu/install-pkg/0.1.0:
+    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
+    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
+
   /@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
     engines: {node: '>=6.9.0'}
@@ -153,6 +166,23 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/types/1.1.0:
+    resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
+    dev: true
+
+  /@iconify/utils/1.0.32:
+    resolution: {integrity: sha512-m+rnw7qKHq/XF7DAi4BcFoEAcXBfqqMgQJh8brGEHeqE/RUvgDMjmxsHgWnVpFsG+VmjGyAiI7nwXdliCwEU0Q==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.5.2
+      '@iconify/types': 1.1.0
+      debug: 4.3.4
+      kolorist: 1.5.1
+      local-pkg: 0.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -174,6 +204,18 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@polka/url/1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@sxzz/popperjs-es/2.11.7:
     resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
     dev: false
@@ -343,6 +385,133 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@unocss/cli/0.33.2:
+    resolution: {integrity: sha512-X64DpwvPnHHjTROm+6fZb/HoMl4SYzaVjNg/XxmGxrbBbh18tbY6rAcjQF6O7TGPVn07ZuSTEGUsH4PsCaOxXg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@unocss/config': 0.33.2
+      '@unocss/core': 0.33.2
+      '@unocss/preset-uno': 0.33.2
+      cac: 6.7.12
+      chokidar: 3.5.3
+      colorette: 2.0.16
+      consola: 2.15.3
+      fast-glob: 3.2.11
+      pathe: 0.3.0
+      perfect-debounce: 0.1.3
+    dev: true
+
+  /@unocss/config/0.33.2:
+    resolution: {integrity: sha512-0IntORr7pTYVngdHUS1RUtRFKBJ/wuOy/i9/s2gGYA+Dmh9odZHzB1ExpMckrnGZEjzq6VYX69bDtwSgvl4cyQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.33.2
+      unconfig: 0.3.4
+    dev: true
+
+  /@unocss/core/0.33.2:
+    resolution: {integrity: sha512-o6x1SyO9gUHMhXagUNekZ0Bj/GOg1a2QSorFBg1NoR36GHuX+Uz9UJqzHPx5QS7g2jbJdeR01zG9pwVw0R5Tlg==}
+    dev: true
+
+  /@unocss/inspector/0.33.2:
+    resolution: {integrity: sha512-3/DwcEvnrnIMDL0pCSAkFQoEDR64H/U+WP78vczF1gwBYXGp+feBSBCKvUy7EjU1SWzFh6FW821oSjhyyM8P8A==}
+    dependencies:
+      gzip-size: 6.0.0
+      sirv: 2.0.2
+    dev: true
+
+  /@unocss/preset-attributify/0.33.2:
+    resolution: {integrity: sha512-07SAPb/ehSDoigk80ivyGQcY0QqIonN99v8uZCZR4GtYaSJ8jHjL17TlXoWYMbbB26qdc0XxwWyajD2bQw1NaQ==}
+    dependencies:
+      '@unocss/core': 0.33.2
+    dev: true
+
+  /@unocss/preset-icons/0.33.2:
+    resolution: {integrity: sha512-KU5TFR1teW3FEtronf3ihVFK68UU+9h62umSxoxJtn9W7wsX/NXzysl2UN6usbWLcg6TjCpZAyPtuap1/29XSg==}
+    dependencies:
+      '@iconify/utils': 1.0.32
+      '@unocss/core': 0.33.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini/0.33.2:
+    resolution: {integrity: sha512-Fa+BD5kGo3YQ87A67GzkLhxLzyL5LGyHTlnGsktMQOpcLVpiQKnWAjleCfDN3joSUcX/j7Yny+ruOR1XEFvrrQ==}
+    dependencies:
+      '@unocss/core': 0.33.2
+    dev: true
+
+  /@unocss/preset-typography/0.33.2:
+    resolution: {integrity: sha512-ArR/a3K4yEcUkJN6woHw6ClCHUBsKK0wcpZDJkcIOyJJI/a8NkNmJdH7uNAn1SnX4nyOIkdD2WTF3kU4f+mhVA==}
+    dependencies:
+      '@unocss/core': 0.33.2
+    dev: true
+
+  /@unocss/preset-uno/0.33.2:
+    resolution: {integrity: sha512-iFmYzGXicf8ny4lg5wGK9pGFmDbih2qWYZnNFS1PWwWe4a1rNJUO2ZKi0XesSvdTNNyrxzvWv+39rikGhlDwyw==}
+    dependencies:
+      '@unocss/core': 0.33.2
+      '@unocss/preset-mini': 0.33.2
+      '@unocss/preset-wind': 0.33.2
+    dev: true
+
+  /@unocss/preset-web-fonts/0.33.2:
+    resolution: {integrity: sha512-PxMhZiM5WpqXpSSUlJ+46au+te/ZJ77dpyv3HJ0leiMxUx3UWkUKOlNWyBUPWO61EpxlXisLEmdhEU/xyZ318g==}
+    dependencies:
+      '@unocss/core': 0.33.2
+      ohmyfetch: 0.4.17
+    dev: true
+
+  /@unocss/preset-wind/0.33.2:
+    resolution: {integrity: sha512-ecuUaDMxOgflMDXSG+hBZ0C9R8tb36nVmyxctEd6oBBG8Trabd8wuZhlTvq59mEfcDcMtK77lgAfDlJxX+/GSQ==}
+    dependencies:
+      '@unocss/core': 0.33.2
+      '@unocss/preset-mini': 0.33.2
+    dev: true
+
+  /@unocss/reset/0.33.2:
+    resolution: {integrity: sha512-ArrkGVr8OEfCHZ5p3IiCi2sv5qXRJZ45zzhCr6vuwP+7+RbgMiyDKhV5oYqIGu7oxFesgXxeD+nRe/v4tKL33g==}
+    dev: true
+
+  /@unocss/scope/0.33.2:
+    resolution: {integrity: sha512-Pt267ptQwvdefq16dJxxCKTsWEiIdSfUfYv1KLsr7BQB/AFiiJLuRNn1rjUCrdYrLlA7riav9zdVk85x/u0PAg==}
+    dev: true
+
+  /@unocss/transformer-compile-class/0.33.2:
+    resolution: {integrity: sha512-m9whHhhiv93yWyE+Dl5+tBHDItZ+ndiAicNqDYhu1mGsqi4nsPM6xJbbDibiXJWU2W4X+ZA6xhy3GvPkHut+tA==}
+    dependencies:
+      '@unocss/core': 0.33.2
+    dev: true
+
+  /@unocss/transformer-directives/0.33.2:
+    resolution: {integrity: sha512-nv1Fxh5iIJPkS7APVZ8EJqjehKXOh5RVX8E1zIFNe0DPrU4xpzrWD8JT0uJJdkBa4eZakB+ElpErej0yc4mhgg==}
+    dependencies:
+      '@unocss/core': 0.33.2
+      css-tree: 2.1.0
+    dev: true
+
+  /@unocss/transformer-variant-group/0.33.2:
+    resolution: {integrity: sha512-1fk9mYxpnTl6ieLZ3dZ451u0JpVaGy/EzA5CUYQrbXZJKeGcQQzu61okHQOTVAaOXWFkqhiVXbCMSPNGy7HMHA==}
+    dependencies:
+      '@unocss/core': 0.33.2
+    dev: true
+
+  /@unocss/vite/0.33.2_vite@2.9.8:
+    resolution: {integrity: sha512-oRt1ejtUEHwGMKXfuXy9BiETkeV27J8miOKrlt+tlg/pm2y0h8113C12J0m15FS3cJhls4eBZs5umPr4J+shDw==}
+    peerDependencies:
+      vite: ^2.9.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@unocss/config': 0.33.2
+      '@unocss/core': 0.33.2
+      '@unocss/inspector': 0.33.2
+      '@unocss/scope': 0.33.2
+      '@unocss/transformer-directives': 0.33.2
+      magic-string: 0.26.2
+      vite: 2.9.8_sass@1.51.0
+    dev: true
+
   /@vitejs/plugin-vue/2.3.2_vite@2.9.8+vue@3.2.33:
     resolution: {integrity: sha512-umyypfSHS4kQLdYAnJHhaASq7FRzNCdvcRoQ3uYGNk1/M4a+hXUd7ysN7BLhCrWH6uBokyCkFeUAaFDzSaaSrQ==}
     engines: {node: '>=12.0.0'}
@@ -739,6 +908,11 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /cac/6.7.12:
+    resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /cache-base/1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
     engines: {node: '>=0.10.0'}
@@ -884,6 +1058,10 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /consola/2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
+    dev: true
+
   /copy-descriptor/0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
     engines: {node: '>=0.10.0'}
@@ -924,6 +1102,14 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /css-tree/2.1.0:
+    resolution: {integrity: sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.27
+      source-map-js: 1.0.2
+    dev: true
+
   /css-what/6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -1017,11 +1203,19 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /defu/6.0.0:
+    resolution: {integrity: sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==}
+    dev: true
+
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /destr/1.1.1:
+    resolution: {integrity: sha512-QqkneF8LrYmwATMdnuD2MLI3GHQIcBnG6qFC2q9bSH430VTCDAVjcspPmUaKhPGtAtPAftIUFqY1obQYQuwmbg==}
+    dev: true
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1087,6 +1281,10 @@ packages:
       domhandler: 4.3.1
     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
@@ -1662,6 +1860,14 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
   /flat-cache/3.0.4:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1792,6 +1998,13 @@ packages:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     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
+
   /has-ansi/2.0.0:
     resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
     engines: {node: '>=0.10.0'}
@@ -2069,6 +2282,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /jiti/1.13.0:
+    resolution: {integrity: sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==}
+    hasBin: true
+    dev: true
+
   /js-base64/2.6.4:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
     dev: true
@@ -2132,6 +2350,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /kolorist/1.5.1:
+    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
+    dev: true
+
   /levn/0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2196,6 +2418,18 @@ packages:
       json5: 1.0.1
     dev: true
 
+  /local-pkg/0.4.1:
+    resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
   /lodash-es/4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
@@ -2241,6 +2475,13 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
+  /magic-string/0.26.2:
+    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /map-cache/0.2.2:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
@@ -2257,6 +2498,10 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: true
 
+  /mdn-data/2.0.27:
+    resolution: {integrity: sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==}
+    dev: true
+
   /memoize-one/6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
     dev: false
@@ -2341,6 +2586,11 @@ packages:
       is-extendable: 1.0.1
     dev: true
 
+  /mrmime/1.0.0:
+    resolution: {integrity: sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -2377,6 +2627,10 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /node-fetch-native/0.1.3:
+    resolution: {integrity: sha512-Jf1IQZdovUIv9E+5avmN6Sf+bND+rnMlODnBQhdE2VRyuWP9WgqZb/KEgPekh19DAN1X2C4vbS1VCOaz2OH19g==}
+    dev: true
+
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -2439,6 +2693,15 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /ohmyfetch/0.4.17:
+    resolution: {integrity: sha512-jUpCDJIDlTZdS4PE3veoHIXoUSm2NRJfFMIROd29/qeOsbJEoEYBzJ6re+W1hskc44ej11IL//scfhckIcCN8Q==}
+    dependencies:
+      destr: 1.1.1
+      node-fetch-native: 0.1.3
+      ufo: 0.8.4
+      undici: 5.2.0
+    dev: true
+
   /once/1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -2464,6 +2727,20 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /p-limit/3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
   /p-map/4.0.0:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
     engines: {node: '>=10'}
@@ -2487,6 +2764,11 @@ packages:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
     dev: false
 
+  /path-exists/4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -2514,6 +2796,14 @@ packages:
     resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
     dev: true
 
+  /pathe/0.3.0:
+    resolution: {integrity: sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==}
+    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==}
 
@@ -2821,6 +3111,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.0
+      totalist: 3.0.0
+    dev: true
+
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -3107,6 +3406,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
+
   /traverse/0.6.6:
     resolution: {integrity: sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw==}
     dev: true
@@ -3152,6 +3456,23 @@ packages:
     hasBin: true
     dev: true
 
+  /ufo/0.8.4:
+    resolution: {integrity: sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==}
+    dev: true
+
+  /unconfig/0.3.4:
+    resolution: {integrity: sha512-cf39F1brwQuLSuMLTYXOdWJH0O1CJee6a4QW1nYtO7SoBUfVvQCvEel6ssTNXtPfi17kop1ADmVtmC49NlFkIQ==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      defu: 6.0.0
+      jiti: 1.13.0
+    dev: true
+
+  /undici/5.2.0:
+    resolution: {integrity: sha512-XY6+NS3WH9b3TKOHeNz2CjR+qrVz/k4fO9g3etPpLozRvULoQmZ1+dk9JbIz40ehn27xzFk4jYVU2MU3Nle62A==}
+    engines: {node: '>=12.18'}
+    dev: true
+
   /union-value/1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
     engines: {node: '>=0.10.0'}
@@ -3167,6 +3488,29 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
+  /unocss/0.33.2_vite@2.9.8:
+    resolution: {integrity: sha512-ISGmthl9kNPujda/Yt25irdV9s9F3hr8MWpd/NE7Kv/qkZJC3/FvO/l/9d5ggkbgsAuGQrsfuaQnxT2p4k9Yug==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/cli': 0.33.2
+      '@unocss/core': 0.33.2
+      '@unocss/preset-attributify': 0.33.2
+      '@unocss/preset-icons': 0.33.2
+      '@unocss/preset-mini': 0.33.2
+      '@unocss/preset-typography': 0.33.2
+      '@unocss/preset-uno': 0.33.2
+      '@unocss/preset-web-fonts': 0.33.2
+      '@unocss/preset-wind': 0.33.2
+      '@unocss/reset': 0.33.2
+      '@unocss/transformer-compile-class': 0.33.2
+      '@unocss/transformer-directives': 0.33.2
+      '@unocss/transformer-variant-group': 0.33.2
+      '@unocss/vite': 0.33.2_vite@2.9.8
+    transitivePeerDependencies:
+      - supports-color
+      - vite
+    dev: true
+
   /unset-value/1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -3352,3 +3696,8 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
     dev: true
+
+  /yocto-queue/0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true

src/config/layout.ts

@@ -17,7 +17,7 @@ interface ILayoutSettings {
 const layoutSettings: ILayoutSettings = {
   showSettings: true,
   showTagsView: true,
-  fixedHeader: false,
+  fixedHeader: true,
   showSidebarLogo: true,
   showThemeSwitch: true,
   showScreenfull: true

src/icons/svg/unocss.svg

@@ -0,0 +1,11 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M117.722 167.444C117.722 139.83 140.108 117.444 167.722 117.444V117.444C195.336 117.444 217.722 139.83 217.722 167.444V167.444C217.722 195.058 195.336 217.444 167.722 217.444V217.444C140.108 217.444 117.722 195.058 117.722 167.444V167.444Z"
+    fill="#fff" fill-opacity="0.6" />
+  <path
+    d="M117.722 52.5561C117.722 24.9419 140.108 2.55614 167.722 2.55614V2.55614C195.336 2.55614 217.722 24.9419 217.722 52.5561V97.5561C217.722 100.318 215.483 102.556 212.722 102.556H122.722C119.961 102.556 117.722 100.318 117.722 97.5561V52.5561Z"
+    fill="#fff" fill-opacity="0.3" />
+  <path
+    d="M102.278 167.444C102.278 195.058 79.8922 217.444 52.278 217.444V217.444C24.6637 217.444 2.27796 195.058 2.27796 167.444L2.27796 122.444C2.27796 119.682 4.51654 117.444 7.27796 117.444L97.278 117.444C100.039 117.444 102.278 119.682 102.278 122.444L102.278 167.444Z"
+    fill="#fff" />
+</svg>

src/main.ts

@@ -4,12 +4,14 @@ import "@/router/permission"
 import store from "./store"
 import App from "./App.vue"
 import ElementPlus from "element-plus"
-import "element-plus/dist/index.css"
-import "element-plus/theme-chalk/dark/css-vars.css"
 import loadSvg from "@/icons"
 import * as directives from "@/directives"
-import "@/styles/index.scss"
+
+import "uno.css"
 import "normalize.css"
+import "element-plus/dist/index.css"
+import "element-plus/theme-chalk/dark/css-vars.css"
+import "@/styles/index.scss"
 
 const app = createApp(App)
 /** element-plus 组件完整引入 */

src/router/index.ts

@@ -40,6 +40,22 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       }
     ]
   },
+  {
+    path: "/unocss",
+    component: Layout,
+    redirect: "/unocss/index",
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/unocss/index.vue"),
+        name: "Unocss",
+        meta: {
+          title: "unocss",
+          icon: "unocss"
+        }
+      }
+    ]
+  },
   {
     path: "/link",
     component: Layout,

src/store/modules/app.ts

@@ -56,14 +56,12 @@ export const useAppStore = defineStore({
         ? activeThemeName
         : this.themeList[0].name
       // 应用到 dom
-      // document.documentElement.className = `theme-${this.activeThemeName}`
       document.documentElement.className = this.activeThemeName
       // 持久化
       setActiveThemeName(this.activeThemeName)
     },
     initTheme() {
       // 初始化
-      // document.documentElement.className = `theme-${this.activeThemeName}`
       document.documentElement.className = this.activeThemeName
     }
   }

src/views/unocss/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div h-full app-container>
+    <div h-full text-center flex select-none all:transition-400>
+      <div ma>
+        <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>unocss</div>
+        <div op30 dark:op60 text-lg fw300 m1>具有高性能且极具灵活性的即时原子化 CSS 引擎</div>
+        <div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
+          <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">推荐阅读：重新构想原子化 CSS</a>
+        </div>
+      </div>
+    </div>
+    <div absolute bottom-5 right-0 left-0 text-center op30 dark:op60 fw300>
+      该页面是一个 unocss 的使用案例，其他页面依旧采用 sass
+    </div>
+  </div>
+</template>

unocss.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, presetAttributify, presetUno } from "unocss"
+
+export default defineConfig({
+  /** 排除 */
+  exclude: ["node_modules"],
+  /** 预设 */
+  presets: [
+    /** 属性化模式 & 无值的属性模式 */
+    presetAttributify(),
+    /** 默认预设 */
+    presetUno()
+  ],
+  /** 自定义规则 */
+  rules: [["app-container", { padding: "20px" }]],
+  /** 自定义快捷方式 */
+  shortcuts: {
+    "wh-full": "w-full h-full",
+    "flex-center": "flex justify-center items-center",
+    "flex-x-center": "flex justify-center",
+    "flex-y-center": "flex items-center"
+  }
+})

vite.config.ts

@@ -2,6 +2,7 @@ import { UserConfigExport } from "vite"
 import path, { resolve } from "path"
 import vue from "@vitejs/plugin-vue"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
+import Unocss from "unocss/vite"
 
 /** 配置项文档：https://vitejs.dev/config */
 export default (): UserConfigExport => {
@@ -66,7 +67,10 @@ export default (): UserConfigExport => {
       createSvgIconsPlugin({
         iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
         symbolId: "icon-[dir]-[name]"
-      })
+      }),
+      /** unocss */
+      Unocss()
+      /** 自动按需引入（已更改为完整引入，所以注释了） */
       // AutoImport({
       //   dts: "./types/auto-imports.d.ts",
       //   /** 自动按需导入 element-plus 相关函数，比如 ElMessage */