From 9acc5f156e373849ba7ea03c5023522fc2c5860d Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 12 Feb 2025 14:05:27 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=20UnoCSS=20?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/demo/unocss/index.vue |  4 ++--
 uno.config.ts                   | 15 +++++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/pages/demo/unocss/index.vue b/src/pages/demo/unocss/index.vue
index a75a544..64b69bf 100644
--- a/src/pages/demo/unocss/index.vue
+++ b/src/pages/demo/unocss/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div uno-padding-20 h-full text-center flex select-none all:transition-400>
+  <div pa-20px h-full text-center flex select-none all:transition-400>
     <div ma>
       <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
         UnoCSS
@@ -7,7 +7,7 @@
       <div op30 text-lg fw300 m1 dark:op60>
         该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
       </div>
-      <div m2 uno-flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
+      <div m2 flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
         <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
           推荐阅读：重新构想原子化 CSS
         </a>
diff --git a/uno.config.ts b/uno.config.ts
index 4d989bb..be4d434 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -4,19 +4,22 @@ export default defineConfig({
   // 预设
   presets: [
     // 属性化模式 & 无值的属性模式
-    presetAttributify(),
+    presetAttributify({
+      prefix: "un-",
+      prefixedOnly: false
+    }),
     // 默认预设
     presetUno({
       important: "#app"
     })
   ],
   // 自定义规则
-  rules: [["uno-padding-20", { padding: "20px" }]],
+  rules: [],
   // 自定义快捷方式
   shortcuts: {
-    "uno-wh-full": "w-full h-full",
-    "uno-flex-center": "flex justify-center items-center",
-    "uno-flex-x-center": "flex justify-center",
-    "uno-flex-y-center": "flex items-center"
+    "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"
   }
 })