refactor: ♻️ 移除 windicss 改用 unocss

build/vite/plugin/index.ts

@@ -2,7 +2,7 @@ import type { PluginOption } from 'vite';
 import Components from 'unplugin-vue-components/vite';
 import { VantResolver } from 'unplugin-vue-components/resolvers';
 import vue from '@vitejs/plugin-vue';
-import WindiCSS from 'vite-plugin-windicss';
+import UnoCSS from 'unocss/vite';
 
 import { configHtmlPlugin } from './html';
 import { configMockPlugin } from './mock';
@@ -36,7 +36,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock:
   ];
 
   // vite-plugin-windicss
-  vitePlugins.push(WindiCSS());
+  vitePlugins.push(UnoCSS());
 
   // 加载 html 插件 vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));

package.json

@@ -55,6 +55,8 @@
     "@typescript-eslint/parser": "^6.16.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "@unocss/transformer-directives": "^0.58.4",
+    "@unocss/transformer-variant-group": "^0.58.4",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "cz-git": "^1.8.0",
@@ -86,6 +88,7 @@
     "stylelint-config-standard": "^27.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^5.3.3",
+    "unocss": "^0.58.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.0.10",
     "vite-plugin-compression": "^0.5.1",

src/layout/index.vue

@@ -16,9 +16,8 @@
         <component v-else :is="Component" :key="route.fullPath" />
       </template>
     </routerView>
-    <van-tabbar route class="tabbar">
+    <van-tabbar route fixed placeholder>
       <van-tabbar-item
-        fixed
         replace
         v-for="menu in getMenus"
         :key="menu.name"
@@ -52,9 +51,4 @@
   const getShowHeader = computed(() => !currentRoute.meta.hiddenHeader);
 </script>
 
-<style scoped lang="less">
+<style scoped lang="less"></style>
-  .tabbar {
-    position: fixed;
-    width: 100%;
-  }
-</style>

src/main.ts

@@ -1,4 +1,4 @@
-import 'virtual:windi.css';
+import 'virtual:uno.css';
 import 'vant/es/toast/style';
 import 'vant/es/dialog/style';
 // Register icon sprite

src/views/my/ThemeSetting.vue

@@ -14,9 +14,9 @@
         <span
           h="70px"
           w="70px"
+          items-center
           border="2 rounded-md border-white"
           flex="~"
-          align="items-center"
           justify="center"
           v-for="(item, index) in designStore.appThemeList"
           :key="index"

uno.config.ts

@@ -0,0 +1,64 @@
+// uno.config.ts
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+} from 'unocss';
+
+import transformerVariantGroup from '@unocss/transformer-variant-group';
+import transformerDirectives from '@unocss/transformer-directives';
+
+export default defineConfig({
+  // ...UnoCSS options
+  presets: [
+    // 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
+    presetUno(),
+
+    // 图标预设: https://unocss.dev/presets/icons
+    presetIcons({
+      extraProperties: {
+        display: 'inline-block',
+        'vertical-align': 'middle',
+        // ...
+      },
+    }),
+
+    // 属性模式(在 class 属性过多的情况下优先使用属性模式，否则将会变得难以维护)
+    // https://unocss.dev/presets/attributify#attributify-mode
+    presetAttributify(),
+
+    // https://unocss.dev/presets/typography#usage
+    presetTypography(),
+
+    // 网络字体预设：https://unocss.dev/presets/web-fonts
+    presetWebFonts({
+      // 默认字体提供商 https://unocss.dev/presets/web-fonts#providers
+      provider: 'google',
+      // https://unocss.dev/presets/web-fonts#example
+      fonts: {
+        mono: ['Fira Code'],
+      },
+    }),
+  ],
+  transformers: [
+    // 启用 Windi CSS for UnoCSS 的变体组功能(就是简写，具体看链接): https://unocss.dev/transformers/variant-group#usage
+    transformerVariantGroup(),
+    // 在样式类里你也可以写原子化 css 具体看链接: https://unocss.dev/transformers/directives#usage
+    // Unknown at rule @apply: https://github.com/unocss/unocss/issues/2401
+    transformerDirectives(),
+  ],
+
+  // 一些实用的自定义组合
+  shortcuts: {
+    'm-0-auto': 'm-0 ma', // margin: 0 auto
+    'wh-full': 'w-full h-full', // width: 100%, height: 100%
+    'flex-center': 'flex justify-center items-center', // flex布局居中
+    'flex-x-center': 'flex justify-center', // flex布局：主轴居中
+    'flex-y-center': 'flex items-center', // flex布局：交叉轴居中
+    'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
+    'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
+  },
+});

windi.config.ts

@@ -1,78 +0,0 @@
-import { defineConfig } from 'vite-plugin-windicss';
-
-export default defineConfig({
-  darkMode: 'class',
-  attributify: true,
-  plugins: [createEnterPlugin()],
-  theme: {
-    extend: {
-      textColor: {
-        darkBlue: '#243658',
-        garyWhite: '#f5f5f5',
-      },
-      zIndex: {
-        '-1': '-1',
-      },
-      colors: {
-        primary: '#5d9dfe',
-      },
-      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 = 10) {
-  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 };
-}