chore: 优化 UnoCSS 配置

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>

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