From bd782cf88dff19d5b8ef2c3c55e31762e1817a76 Mon Sep 17 00:00:00 2001 From: pany <939630029@qq.com> Date: Thu, 12 May 2022 19:07:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=20unocss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/extensions.json | 3 +- README.md | 1 + package.json | 1 + pnpm-lock.yaml | 349 +++++++++++++++++++++++++++++++++++++ src/config/layout.ts | 2 +- src/icons/svg/unocss.svg | 11 ++ src/main.ts | 8 +- src/router/index.ts | 16 ++ src/store/modules/app.ts | 2 - src/views/unocss/index.vue | 16 ++ unocss.config.ts | 22 +++ vite.config.ts | 6 +- 12 files changed, 429 insertions(+), 8 deletions(-) create mode 100644 src/icons/svg/unocss.svg create mode 100644 src/views/unocss/index.vue create mode 100644 unocss.config.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json index cc06c180..aa68d056 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,6 +4,7 @@ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "vue.vscode-typescript-vue-plugin", - "Vue.volar" + "vue.volar", + "antfu.unocss" ] } diff --git a/README.md b/README.md index 59fdb5bf..c463f5e4 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ - **ESlint**：代码校验 - **Prettier**：代码格式化 - **Axios**：没啥好说的，已封装好 +- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎 - **注释**：各个配置项都写有尽可能详细的注释 ## 功能 diff --git a/package.json b/package.json index fcbd3a63..b2314a47 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2876042f..b1f40e23 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/config/layout.ts b/src/config/layout.ts index e81d9423..ff2323a3 100644 --- a/src/config/layout.ts +++ b/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 diff --git a/src/icons/svg/unocss.svg b/src/icons/svg/unocss.svg new file mode 100644 index 00000000..0acc6a07 --- /dev/null +++ b/src/icons/svg/unocss.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 2f892d4f..327f0529 100644 --- a/src/main.ts +++ b/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 组件完整引入 */ diff --git a/src/router/index.ts b/src/router/index.ts index 0d71cc6c..da701c53 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -40,6 +40,22 @@ export const constantRoutes: Array = [ } ] }, + { + 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, diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 6de0d92c..7028aed6 100644 --- a/src/store/modules/app.ts +++ b/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 } } diff --git a/src/views/unocss/index.vue b/src/views/unocss/index.vue new file mode 100644 index 00000000..9bdddc70 --- /dev/null +++ b/src/views/unocss/index.vue @@ -0,0 +1,16 @@ + diff --git a/unocss.config.ts b/unocss.config.ts new file mode 100644 index 00000000..27827c52 --- /dev/null +++ b/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" + } +}) diff --git a/vite.config.ts b/vite.config.ts index 77c36617..8b8f57c2 100644 --- a/vite.config.ts +++ b/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 */