chore: use unocss

.vscode/settings.json

@@ -104,7 +104,7 @@
   "i18n-ally.enabledFrameworks": ["vue", "react"],
   "cSpell.words": [
     "vben",
-    "windicss",
+    "unocss",
     "tailwind",
     "browserslist",
     "tailwindcss",

build/vite/optimize.ts

@@ -28,8 +28,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']

build/vite/plugin/index.ts

@@ -1,7 +1,6 @@
 import { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import windiCSS from 'vite-plugin-windicss'
 import progress from 'vite-plugin-progress'
 import purgeIcons from 'vite-plugin-purge-icons'
 import VitePluginCertificate from 'vite-plugin-mkcert'
@@ -12,6 +11,8 @@ import { configStyleImportPlugin } from './styleImport'
 import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
+import UnoCSS from 'unocss/vite'
+import { presetTypography, presetUno } from 'unocss'
 
 export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
@@ -21,6 +22,10 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vue(),
     // have to
     vueJsx(),
+    // UnoCSS
+    UnoCSS({
+      presets: [presetUno(), presetTypography()]
+    }),
     // 打包进度条
     progress(),
     VitePluginCertificate({
@@ -28,9 +33,6 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     })
   ]
 
-  // windiCSS
-  vitePlugins.push(windiCSS())
-
   // vite-vue-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
 

package.json

@@ -92,14 +92,14 @@
     "cz-git": "^1.7.0",
     "czg": "^1.7.0",
     "dotenv": "^16.3.1",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.15.1",
     "esno": "^0.17.0",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
-    "inquirer": "^9.2.8",
+    "inquirer": "^9.2.9",
     "less": "^4.1.3",
     "lint-staged": "^13.2.3",
     "picocolors": "^1.0.0",
@@ -108,8 +108,9 @@
     "postcss-less": "^6.0.0",
     "prettier": "^3.0.0",
     "rimraf": "^5.0.1",
-    "rollup": "^3.26.3",
+    "rollup": "^3.27.0",
     "rollup-plugin-visualizer": "^5.9.2",
+    "unocss": "^0.54.0",
     "stylelint": "^15.10.2",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -125,7 +126,6 @@
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.9.0",
     "vite-vue-plugin-html": "^1.0.2",
     "vite-vue-plugin-theme": "^1.0.2",
     "vue-eslint-parser": "^9.3.1",

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

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);
+  }
+}

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;
@@ -66,3 +67,10 @@ html[data-theme='dark'] {
     box-shadow: none;
   }
 }
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

src/layouts/default/tabs/index.less

@@ -6,11 +6,13 @@ html[data-theme='dark'] {
       border-bottom: none !important;
     }
   }
+
   .ant-tabs-tab:not(.ant-tabs-tab-active) {
     border: none !important;
+
     &:hover {
       color: inherit;
-      background-color: rgba(255, 255, 255, 0.5) !important;
+      background-color: rgba(255, 255, 255/50%) !important;
     }
   }
 }
@@ -19,6 +21,7 @@ html[data-theme='light'] {
   .@{prefix-cls} {
     .ant-tabs-tab:not(.ant-tabs-tab-active) {
       border: none !important;
+
       &:hover {
         color: inherit;
         background-color: #dee1e6;
@@ -58,13 +61,14 @@ html[data-theme='light'] {
         color: @text-color-base;
         background-color: @component-background;
         transition: padding 0.3s;
-        padding: 0 20px;
+        padding: 0 16px;
         margin: 0 -14px 0 0 !important;
         /* stylelint-disable-next-line function-url-quotes */
         mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
         mask-size: 100% 100%;
         position: relative;
         z-index: 1;
+        border-radius: 8px 8px 0 0;
 
         .ant-tabs-tab-btn {
           color: @text-color-base;
@@ -133,7 +137,7 @@ html[data-theme='light'] {
 
       .ant-tabs-tab-active {
         position: relative;
-        padding: 0 20px;
+        padding: 0 16px;
         color: @primary-color !important;
         background: #d4ebff;
         border: 0;

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'

stylelint.config.js

@@ -21,7 +21,7 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
+        ignoreAtRules: ['unocss', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin']
       }
     ],
     'no-empty-source': null,

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 }
-}