uno

build/platform.ts

@@ -3,13 +3,11 @@ import process from 'node:process';
 const currentPlatform = process.env.UNI_PLATFORM;
 const isH5 = currentPlatform === 'h5';
 const isApp = currentPlatform === 'app';
-const WeappTailwindcssDisabled = isH5 || isApp;
 const isMp = !isH5 && !isApp;
 
 export {
   isH5,
   isApp,
-  WeappTailwindcssDisabled,
   isMp,
   currentPlatform,
 };

build/vitePlugins.ts

@@ -1,14 +1,15 @@
 import type { PluginOption } from 'vite';
 import uni from '@dcloudio/vite-plugin-uni';
-import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite';
 import autoImport from 'unplugin-auto-import/vite';
 import viteRestart from 'vite-plugin-restart';
 import { visualizer } from 'rollup-plugin-visualizer';
+import Unocss from 'unocss/vite';
 import { appProvider, buildThemeConfig, createComponents } from '../vite/plugins/index';
-import { WeappTailwindcssDisabled, isH5 } from './platform';
+import { isH5 } from './platform';
 
 interface VitePluginConfig {
   isProd: boolean
+  env?: Record<string, string>
 }
 
 export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[] {
@@ -18,13 +19,8 @@ export function createVitePlugins({ isProd }: VitePluginConfig): PluginOption[]
     appProvider(),
     buildThemeConfig(),
     createComponents(),
-    uvtw({
-      rem2rpx: true,
-      disabled: WeappTailwindcssDisabled,
-      // 使用新的 ast-grep 来处理 js 资源，速度是 babel 的2倍左右
-      // 需要先安装 `@ast-grep/napi`
-      // jsAstTool: 'ast-grep'
-    }),
+
+    Unocss(),
     autoImport({
       include: [
         /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx

package.json

@@ -77,12 +77,15 @@
     "@dcloudio/uni-cli-shared": "3.0.0-alpha-4020620240822002",
     "@dcloudio/uni-stacktracey": "3.0.0-alpha-4020620240822002",
     "@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020620240822002",
-    "@egoist/tailwindcss-icons": "^1.8.1",
-    "@iconify/json": "^2.2.239",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.16.1",
     "@types/normalize-path": "^3.0.0",
+    "@unocss/eslint-config": "^0.62.3",
+    "@unocss/preset-icons": "^0.62.3",
+    "@unocss/preset-uno": "^0.62.3",
+    "@unocss/transformer-directives": "^0.62.3",
+    "@unocss/vite": "0.62.3",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/runtime-core": "^3.4.38",
     "autoprefixer": "^10.4.20",
@@ -92,19 +95,18 @@
     "globals": "^15.9.0",
     "lint-staged": "^15.2.9",
     "picocolors": "^1.0.1",
-    "postcss": "^8.4.41",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
-    "tailwindcss": "^3.4.10",
     "tsx": "^4.17.0",
     "typescript": "^5.5.4",
     "uni-mini-router": "^0.1.6",
     "uni-read-pages-vite": "^0.0.6",
+    "unocss": "^0.62.3",
+    "unocss-preset-weapp": "^0.62.0",
     "unplugin-auto-import": "^0.18.2",
     "vite": "^5.4.2",
-    "vite-plugin-restart": "^0.4.1",
-    "weapp-tailwindcss": "^3.5.0"
+    "vite-plugin-restart": "^0.4.1"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged",

postcss.config.ts

@@ -1,12 +0,0 @@
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-import type { AcceptedPlugin } from 'postcss';
-import cssMacro from 'weapp-tailwindcss/css-macro/postcss';
-
-const plugins: AcceptedPlugin[] = [tailwindcss(), autoprefixer()];
-
-// 可以使用 postcss-pxtransform 来进行 px 转 rpx 的功能
-
-plugins.push(cssMacro);
-
-export default plugins;

src/App.vue

@@ -13,7 +13,5 @@ onHide(() => {
 </script>
 
 <style lang="scss">
-@import 'tailwindcss/base';
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/components';
+
 </style>

src/assets/svg-icon/activity.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>

src/assets/svg-icon/at-sign.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="prefix__prefix__feather prefix__prefix__feather-at-sign"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 7.94"/></svg>

src/assets/svg-icon/cast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="prefix__prefix__feather prefix__prefix__feather-cast"><path d="M2 16.1A5 5 0 015.9 20M2 12.05A9 9 0 019.95 20M2 8V6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2h-6M2 20h.01"/></svg>

src/assets/svg-icon/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="M21.17 8H12M3.95 6.06L8.54 14m2.34 7.94L15.46 14"/></svg>

src/assets/svg-icon/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>

src/assets/svg-icon/custom-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24"><path fill="currentColor" d="M19 10c0 1.38-2.12 2.5-3.5 2.5s-2.75-1.12-2.75-2.5h-1.5c0 1.38-1.37 2.5-2.75 2.5S5 11.38 5 10h-.75c-.16.64-.25 1.31-.25 2a8 8 0 008 8 8 8 0 008-8c0-.69-.09-1.36-.25-2H19m-7-6C9.04 4 6.45 5.61 5.07 8h13.86C17.55 5.61 14.96 4 12 4m10 8a10 10 0 01-10 10A10 10 0 012 12 10 10 0 0112 2a10 10 0 0110 10m-10 5.23c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81z"/></svg>

src/assets/svg-icon/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>

src/assets/svg-icon/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><path d="M81.28 55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1 8.1 0 014-8.61 7.89 7.89 0 019.3 1.23 35.999 35.999 0 015.9 8.83 75.18 75.18 0 018.44 28.58 83.211 83.211 0 01-5.23 36.74 102.983 102.983 0 01-3 7.28 1.2 1.2 0 000 1.41c9.58 13.3 21.76 23 37.85 27.24a54.37 54.37 0 0019.68 1.57 7.72 7.72 0 018.36 6.9 7.903 7.903 0 01-6.7 9 64.744 64.744 0 01-23-1.33 77.68 77.68 0 01-36.93-19.88 93.628 93.628 0 01-11.91-13.71 2.18 2.18 0 00-2.3-1.06 72.744 72.744 0 00-27.38 7.55c-11.6 6-20.67 14.58-26.4 26.45a10.134 10.134 0 01-3.7 4.7 8 8 0 01-9.19-.7 7.86 7.86 0 01-2.36-9.28 60.324 60.324 0 018.72-14.52c12.2-15.43 28.21-24.59 47.32-28.57A85.085 85.085 0 0173.07 87c.524.015 1-.307 1.18-.8a76.06 76.06 0 006.53-22.3c.351-2.652.518-5.325.5-8z" fill="currentColor"/><path d="M136.26 108.34a44.742 44.742 0 01-11.13-2.87 46.108 46.108 0 01-19.66-13.76 8 8 0 015.72-13.22 7.93 7.93 0 016.54 2.93 33.27 33.27 0 0018.87 10.75c1.546.155 3.058.553 4.48 1.18a8.08 8.08 0 013.84 9.21c-.92 3.52-4.13 5.81-8.66 5.78zm-80.6-75.02a7.61 7.61 0 016.64 5 49.139 49.139 0 013.64 17 46.33 46.33 0 01-2.46 17.28c-2 5.77-8.24 7.79-12.89 4.15a8.1 8.1 0 01-2.39-9 31.679 31.679 0 001.68-12.36 35.77 35.77 0 00-2.43-11c-2.1-5.45 1.75-11.07 8.21-11.07zm22.26 93.25a8 8 0 01-6.68 7.86 32.88 32.88 0 00-19.7 12.19 8.13 8.13 0 01-11.21 1.62 8 8 0 01-1.41-11.58A51.043 51.043 0 0154 123.81a45.842 45.842 0 0114-5.1c5.35-1.04 9.91 2.56 9.92 7.86z" fill="currentColor"/></svg>

src/assets/svg-icon/wind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>

src/components/Iconify/index.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-/**
- * @name Iconify
- * @desc 图标组件 使用 iconify + tailwindcss
- * 更多图标库 https://icon-sets.iconify.design/
- * @docs https://github.com/egoist/tailwindcss-icons
- * @example <Iconify icon="i-mdi-account-box" size="32" color="green" />
- */
-
-interface Props {
-  icon: string
-  size?: string | number
-  class?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  size: 'inherit',
-  class: '',
-});
-
-const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
-
-const iconStyle = computed(() => {
-  const styles: Record<string, string> = {};
-  if (props.size) {
-    styles.fontSize = iconSize.value;
-  }
-  return styles;
-});
-</script>
-
-<template>
-  <span class="iconify " :class="[props.icon, props.class]" :style="iconStyle" />
-</template>
-
-<style lang="scss" scoped>
-.iconify {
-  display: inline-block;
-  line-height: 1;
-}
-</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup name="Iconify">
+import { assign } from 'lodash-es';
+import { defineComponent } from 'vue';
+import { isBoolean } from '@/utils/is';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'default-icon',
+  },
+  size: {
+    type: [Number, String],
+    default: 44,
+  },
+  class: {
+    type: String,
+    default: 'text-black',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+defineComponent({ name: 'SvgIcon' });
+
+const iconSize = computed<string | boolean>(() => (props.size ? `${props.size}rpx` : false));
+
+const style = computed(() => {
+  const ISize = unref(iconSize);
+  return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize });
+});
+
+function onClick() {
+  emit('click');
+}
+</script>
+
+<template>
+  <view class="block" :class="[props.icon, props.class]" :style="style" @click="onClick" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/main.ts

@@ -3,17 +3,13 @@ import App from './App.vue';
 import { setupRouter } from './router';
 import { setupStore } from './stores';
 import { themeMixin } from '@/mixins/theme';
+import 'uno.css';
 
 export function createApp() {
   const app = createSSRApp(App);
-
   setupStore(app);
-
-  //
   app.mixin(themeMixin);
-
   setupRouter(app);
-
   return {
     app,
   };

src/pages/demo/index.vue

@@ -4,14 +4,14 @@
 <template>
   <view class="flex flex-col items-center justify-center pt-36 text-lg font-medium">
     <view class="mt-30px">
-      iconify 组件
+      SvgIcon 组件
     </view>
     <view class="mt-30rpx center flex flex-row gap-10px">
-      <Iconify icon="i-mdi-account-box" size="64" color="blue" />
-      <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-mdi-account-box" size="32" class="text-green-400" />
-      <Iconify icon="i-mdi-account-box" class="text-red-400" />
-      <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
+      <svg-icon local-icon="activity" class="text-amber text-30 w-30 h-30" />
+      <svg-icon icon="i-mdi-account-box" size="48" class="text-blue" />
+      <svg-icon icon="i-mdi-account-box" size="32" class="text-green-400" />
+      <svg-icon icon="i-mdi-account-box" class="text-red-400" />
+      <svg-icon icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>
   </view>
 </template>

src/pages/splashScreen/index.vue

@@ -26,20 +26,20 @@ onMounted(async () => {
   const userStore = useUserStore();
   const { isLogined } = userStore;
   // 如果已经登录，跳转到首页
-  // if (isLogined) {
-  //   userStore.initUserInfo();
-  //   router.pushTab({
-  //     name: 'Home',
-  //   });
-  // } else {
-  //   router.replace({
-  //     name: 'Login',
-  //     params: {
-  //       redirect: 'Home',
-  //       tabBar: 'true',
-  //     },
-  //   });
-  // }
+  if (isLogined) {
+    userStore.initUserInfo();
+    router.pushTab({
+      name: 'Home',
+    });
+  } else {
+    router.replace({
+      name: 'Login',
+      params: {
+        redirect: 'Home',
+        tabBar: 'true',
+      },
+    });
+  }
 });
 
 // fuc : 切换主题

src/types/import-components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
     BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
-    Iconify: typeof import('./../components/Iconify/index.vue')['default']
+    'svg-icon': typeof import('./../components/SvgIcon/index.vue')['default']
+    SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
   }
 }

src/typings/components.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
+    BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    'svg-icon': typeof import('./../components/SvgIcon/index.vue')['default']
+  }
+}

tailwind.config.ts

@@ -1,74 +0,0 @@
-
-  import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
-  import { isMp } from './build/platform';
-
-  /** @type {import('tailwindcss').Config} */
-  export default {
-    content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'],
-    corePlugins: {
-      // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
-      preflight: !isMp,
-      container: !isMp,
-    },
-    plugins: [iconsPlugin({
-      collections: getIconCollections(['mdi', 'svg-spinners']),
-    })],
-    theme: {
-    "extend": {
-        "opacity": {
-            "disabled": "var(--opacity-disabled)"
-        }
-    },
-    "colors": {
-        "primary": "var(--colors-primary)",
-        "secondary": "var(--colors-secondary)",
-        "accent": "var(--colors-accent)",
-        "success": "var(--colors-success)",
-        "warning": "var(--colors-warning)",
-        "error": "var(--colors-error)",
-        "disable": "var(--colors-disable)",
-        "danger": "var(--colors-danger)",
-        "mark": "var(--colors-mark)",
-        "title": "var(--colors-title)",
-        "subtitle": "var(--colors-subtitle)",
-        "paragraph": "var(--colors-paragraph)",
-        "fontColorblack": "var(--colors-fontColorblack)",
-        "fontColorPrimary": "var(--colors-fontColorPrimary)",
-        "fontColorInverse": "var(--colors-fontColorInverse)",
-        "fontColorGrey": "var(--colors-fontColorGrey)",
-        "fontColorPlaceholder": "var(--colors-fontColorPlaceholder)",
-        "fontColorDisable": "var(--colors-fontColorDisable)",
-        "fontColorBottomText": "var(--colors-fontColorBottomText)",
-        "container": "var(--colors-container)",
-        "page": "var(--colors-page)",
-        "containerInverse": "var(--colors-containerInverse)",
-        "containerHover": "var(--colors-containerHover)",
-        "secondaryHover": "var(--colors-secondaryHover)",
-        "containerMask": "var(--colors-containerMask)",
-        "iconButton": "var(--colors-iconButton)",
-        "borderColor": "var(--colors-borderColor)"
-    },
-    "fontSize": {
-        "sm": "var(--fontSize-sm)",
-        "base": "var(--fontSize-base)",
-        "lg": "var(--fontSize-lg)",
-        "title": "var(--fontSize-title)",
-        "subtitle": "var(--fontSize-subtitle)",
-        "paragraph": "var(--fontSize-paragraph)"
-    },
-    "borderRadius": {
-        "sm": "var(--borderRadius-sm)",
-        "base": "var(--borderRadius-base)",
-        "lg": "var(--borderRadius-lg)",
-        "circle": "var(--borderRadius-circle)"
-    },
-    "spacing": {
-        "rowSm": "var(--spacing-rowSm)",
-        "rowBase": "var(--spacing-rowBase)",
-        "rowLg": "var(--spacing-rowLg)",
-        "colSm": "var(--spacing-colSm)",
-        "colBase": "var(--spacing-colBase)",
-        "colLg": "var(--spacing-colLg)"
-    }
-}
-  };

unocss.config.ts

@@ -0,0 +1,75 @@
+/**
+ * unocss defineConfig
+ * @link unocss: https://github.com/unocss/unocss
+ * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
+ */
+
+import { defineConfig, presetIcons } from 'unocss';
+import presetWeapp from 'unocss-preset-weapp';
+import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
+import transformerDirectives from '@unocss/transformer-directives';
+
+const transformRules = {
+  '.': '-d111-',
+  '/': '-s111-',
+  ':': '-c111-',
+  '%': '-p111-',
+  '!': '-e111-',
+  '#': '-w111-',
+  '(': '-b111l-',
+  ')': '-b111r-',
+  '[': '-f111l-',
+  ']': '-f111r-',
+  '$': '-r111-',
+  ',': '-r222-',
+};
+
+const prefix = '';
+
+export default defineConfig({
+  presets: [
+    // https://github.com/MellowCo/unocss-preset-weapp
+    presetWeapp({
+      nonValuedAttribute: true,
+      prefix,
+      whRpx: true,
+      transform: true,
+      platform: 'uniapp',
+      transformRules,
+    }),
+    // 由 Iconify 提供支持的纯 CSS 图标解决方案
+    presetIcons({
+      scale: 1,
+      warn: true,
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+  // transformers: [transformerDirectives()],
+  // attributify: false,
+  shortcuts: [
+    {
+      'border-base': 'border border-gray-500_10',
+      'z-tar-both': 'z-988',
+      'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
+      'center': 'flex justify-center items-center',
+    },
+  ],
+  theme: { extend: { opacity: { disabled: 'var(--opacity-disabled)' } }, colors: { primary: 'var(--colors-primary)', secondary: 'var(--colors-secondary)', accent: 'var(--colors-accent)', success: 'var(--colors-success)', warning: 'var(--colors-warning)', error: 'var(--colors-error)', disable: 'var(--colors-disable)', danger: 'var(--colors-danger)', mark: 'var(--colors-mark)', title: 'var(--colors-title)', subtitle: 'var(--colors-subtitle)', paragraph: 'var(--colors-paragraph)', fontColorblack: 'var(--colors-fontColorblack)', fontColorPrimary: 'var(--colors-fontColorPrimary)', fontColorInverse: 'var(--colors-fontColorInverse)', fontColorGrey: 'var(--colors-fontColorGrey)', fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)', fontColorDisable: 'var(--colors-fontColorDisable)', fontColorBottomText: 'var(--colors-fontColorBottomText)', container: 'var(--colors-container)', page: 'var(--colors-page)', containerInverse: 'var(--colors-containerInverse)', containerHover: 'var(--colors-containerHover)', secondaryHover: 'var(--colors-secondaryHover)', containerMask: 'var(--colors-containerMask)', iconButton: 'var(--colors-iconButton)', borderColor: 'var(--colors-borderColor)' }, fontSize: { sm: 'var(--fontSize-sm)', base: 'var(--fontSize-base)', lg: 'var(--fontSize-lg)', title: 'var(--fontSize-title)', subtitle: 'var(--fontSize-subtitle)', paragraph: 'var(--fontSize-paragraph)' }, borderRadius: { sm: 'var(--borderRadius-sm)', base: 'var(--borderRadius-base)', lg: 'var(--borderRadius-lg)', circle: 'var(--borderRadius-circle)' }, spacing: { rowSm: 'var(--spacing-rowSm)', rowBase: 'var(--spacing-rowBase)', rowLg: 'var(--spacing-rowLg)', colSm: 'var(--spacing-colSm)', colBase: 'var(--spacing-colBase)', colLg: 'var(--spacing-colLg)' } },
+  transformers: [
+    transformerDirectives({
+      applyVariable: ['--at-apply', '--uno-apply', '--uno'],
+      enforce: 'pre',
+    }),
+    transformerAttributify({
+      classPrefix: prefix,
+      transformRules,
+      nonValuedAttribute: true,
+    }),
+    transformerClass({
+      transformRules,
+    }),
+  ],
+});

vite.config.ts

@@ -8,7 +8,6 @@ import process from 'node:process';
 import type { UserConfig } from 'vite';
 import { defineConfig, loadEnv } from 'vite';
 import TransformPages from 'uni-read-pages-vite';
-import postcssPlugins from './postcss.config';
 import { createVitePlugins, currentPlatform, resolveProxy } from './build';
 
 export default defineConfig(async ({ mode }) => {
@@ -38,11 +37,9 @@ export default defineConfig(async ({ mode }) => {
           additionalData: '@import "./src/uni.scss";',
         },
       },
-      postcss: {
-        plugins: postcssPlugins,
-      },
+
     },
-    plugins: createVitePlugins({ isProd }),
+    plugins: createVitePlugins({ isProd, env }),
     // 开发服务器配置
     server: {
       // host: true,

vite/plugins/build.unocss.config.ts

@@ -2,14 +2,14 @@ import * as fs from 'node:fs';
 import { buildTheme } from '../../src/theme/theme';
 
 export default function buildThemeConfig() {
-  const fileName = './tailwind.config.ts';
+  const fileName = './unocss.config.ts';
   const _data = buildTheme();
   // 写入时会先清空文件
   fs.writeFile(fileName, `${createFileByTemplate(_data)}`, (err: any) => {
     if (err) {
       console.error(err);
     } else {
-      console.log('构建 css 提示文件完成');
+      // console.log('构建 css 提示文件完成');
       console.table(flatten(_data));
     }
   });
@@ -36,23 +36,84 @@ function flatten(obj: any, parentKey = ''): any {
 
 // 通过模版生成文件
 function createFileByTemplate(theme: any) {
-  const fileString = `
-  import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
-  import { isMp } from './build/platform';
+  const file_string = `
   
-  /** @type {import('tailwindcss').Config} */
-  export default {
-    content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'],
-    corePlugins: {
-      // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
-      preflight: !isMp,
-      container: !isMp,
-    },
-    plugins: [iconsPlugin({
-      collections: getIconCollections(['mdi', 'svg-spinners']),
-    })],
-    theme: ${JSON.stringify(theme, null, 4)}
-  };
-`;
-  return fileString;
+  /**
+   * unocss defineConfig
+   * @link unocss: https://github.com/unocss/unocss
+   * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
+   * */
+  
+  import { defineConfig, presetIcons } from 'unocss';
+  import presetWeapp from 'unocss-preset-weapp';
+  import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
+  import transformerDirectives from '@unocss/transformer-directives';
+  
+    const transformRules = {
+        '.': '-d111-',
+        '/': '-s111-',
+        ':': '-c111-',
+        '%': '-p111-',
+        '!': '-e111-',
+        '#': '-w111-',
+        '(': '-b111l-',
+        ')': '-b111r-',
+        '[': '-f111l-',
+        ']': '-f111r-',
+        $: '-r111-',
+        ',': '-r222-',
+    };
+    
+    const prefix = '';
+    
+    export default defineConfig({
+        presets: [
+            // https://github.com/MellowCo/unocss-preset-weapp
+            presetWeapp({
+                nonValuedAttribute: true,
+                prefix: prefix,
+                whRpx: true,
+                transform: true,
+                platform: 'uniapp',
+                transformRules,
+            }),
+            // 由 Iconify 提供支持的纯 CSS 图标解决方案
+            presetIcons({
+                scale: 1,
+                warn: true,
+                extraProperties: {
+                    'display': 'inline-block',
+                    'vertical-align': 'middle',
+                },
+            }),
+        ],
+        // transformers: [transformerDirectives()],
+        // attributify: false,
+        shortcuts: [
+            {
+                'border-base': 'border border-gray-500_10',
+                'z-tar-both': 'z-988',
+                'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
+                center: 'flex justify-center items-center',
+            },
+        ],
+        theme: ${JSON.stringify(theme)},
+        transformers: [
+            transformerDirectives({
+                applyVariable: ['--at-apply', '--uno-apply', '--uno'],
+                enforce: 'pre'
+            }),
+            transformerAttributify({
+                classPrefix: prefix,
+                transformRules,
+                nonValuedAttribute: true,
+            }),
+            transformerClass({
+                transformRules,
+            }),
+        ],
+    });
+  `;
+
+  return file_string;
 }