feat: add unocss

package.json

@@ -37,6 +37,7 @@
     "@iconify/vue": "^5.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.2",
+    "@unocss/preset-wind3": "^66.5.10",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
@@ -52,6 +53,7 @@
     "simple-git-hooks": "^2.13.1",
     "terser": "^5.44.1",
     "typescript": "~5.9.3",
+    "unocss": "^66.5.10",
     "unplugin-auto-import": "^20.3.0",
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^30.0.0",

src/main.ts

@@ -4,6 +4,9 @@ import App from "./App.vue";
 
 import router from "./router";
 
+/* UnoCSS */
+import "virtual:uno.css";
+
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/vue/css/core.css";
 

src/views/onchain-address/index.vue

@@ -41,7 +41,7 @@ const { user } = useAuth();
           </div>
         </div>
 
-        <div class="ion-margin-top ion-text-center operations">
+        <div class="ion-margin-top ion-text-center flex gap-24px">
           <ion-button fill="clear">
             <ion-icon slot="start" :icon="shareOutline" />
             Share
@@ -120,8 +120,4 @@ const { user } = useAuth();
   max-width: 250px;
   max-height: 250px;
 }
-.operations {
-  display: flex;
-  gap: 24px;
-}
 </style>

uno.config.ts

@@ -0,0 +1,38 @@
+import { presetWind3 } from "@unocss/preset-wind3";
+import {
+  defineConfig,
+  presetIcons,
+  transformerDirectives,
+  transformerVariantGroup,
+} from "unocss";
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetIcons(),
+  ],
+  transformers: [
+    transformerDirectives({
+      applyVariable: ["--at-apply", "--uno-apply", "--uno"],
+    }),
+    transformerVariantGroup(),
+  ],
+  shortcuts: {
+    "flex-center": "flex items-center justify-center",
+    "flex-col-center": "flex flex-col items-center justify-center",
+  },
+  // 为 Ionic 添加 CSS 变量支持
+  theme: {
+    colors: {
+      primary: "var(--ion-color-primary)",
+      secondary: "var(--ion-color-secondary)",
+      tertiary: "var(--ion-color-tertiary)",
+      success: "var(--ion-color-success)",
+      warning: "var(--ion-color-warning)",
+      danger: "var(--ion-color-danger)",
+      light: "var(--ion-color-light)",
+      medium: "var(--ion-color-medium)",
+      dark: "var(--ion-color-dark)",
+    },
+  },
+});

vite.config.ts

@@ -3,6 +3,7 @@ import legacy from "@vitejs/plugin-legacy";
 import vue from "@vitejs/plugin-vue";
 import jsx from "@vitejs/plugin-vue-jsx";
 import dotenv from "dotenv";
+import UnoCSS from "unocss/vite";
 import autoImport from "unplugin-auto-import/vite";
 import iconsResolver from "unplugin-icons/resolver";
 import icons from "unplugin-icons/vite";
@@ -33,6 +34,7 @@ export default defineConfig({
     icons({
       autoInstall: true,
     }),
+    UnoCSS(),
   ],
   resolve: {
     alias: {