diff --git a/eslint.config.js b/eslint.config.js
index 3762778a..44224b59 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from '@soybeanjs/eslint-config';
 
 export default defineConfig(
-  { vue: true },
+  { vue: true, unocss: true },
   {
     rules: {
       'vue/multi-word-component-names': [
diff --git a/package.json b/package.json
index 413de73c..ee74bcbd 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "20.11.24",
     "@types/nprogress": "0.2.3",
+    "@unocss/eslint-config": "0.58.5",
     "@unocss/preset-icons": "0.58.5",
     "@unocss/preset-uno": "0.58.5",
     "@unocss/transformer-directives": "0.58.5",
diff --git a/packages/materials/src/libs/admin-layout/index.vue b/packages/materials/src/libs/admin-layout/index.vue
index 0c0444c6..14a099fb 100644
--- a/packages/materials/src/libs/admin-layout/index.vue
+++ b/packages/materials/src/libs/admin-layout/index.vue
@@ -116,7 +116,7 @@ function handleClickMask() {
   <div class="relative h-full" :class="[commonClass]" :style="cssVars">
     <div
       :id="isWrapperScroll ? scrollElId : undefined"
-      class="flex flex-col h-full"
+      class="h-full flex flex-col"
       :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
     >
       <!-- Header -->
@@ -182,7 +182,7 @@ function handleClickMask() {
       <!-- Mobile Sider -->
       <template v-if="showMobileSider">
         <aside
-          class="absolute left-0 top-0 w-0 h-full bg-white"
+          class="absolute left-0 top-0 h-full w-0 bg-white"
           :class="[
             commonClass,
             mobileSiderClass,
@@ -194,7 +194,7 @@ function handleClickMask() {
         </aside>
         <div
           v-show="!siderCollapse"
-          class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]"
+          class="absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)]"
           :class="[style['layout-mobile-sider-mask']]"
           @click="handleClickMask"
         ></div>
@@ -203,7 +203,7 @@ function handleClickMask() {
       <!-- Main Content -->
       <main
         :id="isContentScroll ? scrollElId : undefined"
-        class="flex flex-col flex-grow"
+        class="flex flex-grow flex-col"
         :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
       >
         <slot></slot>
diff --git a/packages/materials/src/libs/page-tab/button-tab.vue b/packages/materials/src/libs/page-tab/button-tab.vue
index be4f2c42..bce4db53 100644
--- a/packages/materials/src/libs/page-tab/button-tab.vue
+++ b/packages/materials/src/libs/page-tab/button-tab.vue
@@ -36,7 +36,7 @@ defineSlots<Slots>();
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap"
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-1px rounded-4px border-solid px-12px py-4px"
     :class="[
       style['button-tab'],
       { [style['button-tab_dark']]: darkMode },
diff --git a/packages/materials/src/libs/page-tab/chrome-tab.vue b/packages/materials/src/libs/page-tab/chrome-tab.vue
index 64dc6985..e4509b06 100644
--- a/packages/materials/src/libs/page-tab/chrome-tab.vue
+++ b/packages/materials/src/libs/page-tab/chrome-tab.vue
@@ -37,7 +37,7 @@ defineSlots<Slots>();
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap"
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-16px whitespace-nowrap px-24px py-6px -mr-18px"
     :class="[
       style['chrome-tab'],
       { [style['chrome-tab_dark']]: darkMode },
@@ -45,13 +45,13 @@ defineSlots<Slots>();
       { [style['chrome-tab_active_dark']]: active && darkMode }
     ]"
   >
-    <div class=":soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none" :class="[style['chrome-tab__bg']]">
+    <div class=":soy: pointer-events-none absolute left-0 top-0 h-full w-full -z-1" :class="[style['chrome-tab__bg']]">
       <ChromeTabBg />
     </div>
     <slot name="prefix"></slot>
     <slot></slot>
     <slot name="suffix"></slot>
-    <div class=":soy: absolute right-7px w-1px h-16px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
+    <div class=":soy: absolute right-7px h-16px w-1px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
   </div>
 </template>
 
diff --git a/packages/materials/src/libs/page-tab/svg-close.vue b/packages/materials/src/libs/page-tab/svg-close.vue
index 43f39a15..560686c9 100644
--- a/packages/materials/src/libs/page-tab/svg-close.vue
+++ b/packages/materials/src/libs/page-tab/svg-close.vue
@@ -16,7 +16,7 @@ function handleClick() {
 
 <template>
   <div
-    class=":soy: relative inline-flex justify-center items-center w-16px h-16px text-14px rd-50%"
+    class=":soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px"
     @click.stop="handleClick"
   >
     <svg width="1em" height="1em" viewBox="0 0 1024 1024">
diff --git a/packages/materials/src/libs/simple-scrollbar/index.vue b/packages/materials/src/libs/simple-scrollbar/index.vue
index b10d9ec3..1e8076b1 100644
--- a/packages/materials/src/libs/simple-scrollbar/index.vue
+++ b/packages/materials/src/libs/simple-scrollbar/index.vue
@@ -8,7 +8,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex-1-hidden h-full">
+  <div class="h-full flex-1-hidden">
     <Simplebar class="h-full">
       <slot />
     </Simplebar>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3875873..27618d87 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,7 +80,7 @@ importers:
         version: link:packages/uno-preset
       '@soybeanjs/eslint-config':
         specifier: 1.2.3
-        version: 1.2.3(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
+        version: 1.2.3(@unocss/eslint-config@0.58.5)(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
       '@types/lodash-es':
         specifier: 4.17.12
         version: 4.17.12
@@ -90,6 +90,9 @@ importers:
       '@types/nprogress':
         specifier: 0.2.3
         version: 0.2.3
+      '@unocss/eslint-config':
+        specifier: ^0.58.5
+        version: 0.58.5(eslint@8.57.0)(typescript@5.3.3)
       '@unocss/preset-icons':
         specifier: 0.58.5
         version: 0.58.5
@@ -211,7 +214,7 @@ importers:
     devDependencies:
       '@soybeanjs/changelog':
         specifier: 0.3.12
-        version: 0.3.12(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
+        version: 0.3.12(@unocss/eslint-config@0.58.5)(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
       '@types/prompts':
         specifier: 2.4.9
         version: 2.4.9
@@ -1380,11 +1383,11 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /@soybeanjs/changelog@0.3.12(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2):
+  /@soybeanjs/changelog@0.3.12(@unocss/eslint-config@0.58.5)(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2):
     resolution: {integrity: sha512-pqxINyDJo8Z9DHffrus2lu8U1huN0a11OSgzQrYJtMFLz3LXW3uJM3+bkuf4s4MzS6DfSsKtf365dq19KHzRfw==}
     engines: {node: '>=14'}
     dependencies:
-      '@soybeanjs/eslint-config': 1.2.3(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
+      '@soybeanjs/eslint-config': 1.2.3(@unocss/eslint-config@0.58.5)(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
       cli-progress: 3.12.0
       convert-gitmoji: 0.1.3
       dayjs: 1.11.10
@@ -1413,7 +1416,7 @@ packages:
       - vue-eslint-parser
     dev: true
 
-  /@soybeanjs/eslint-config@1.2.3(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2):
+  /@soybeanjs/eslint-config@1.2.3(@unocss/eslint-config@0.58.5)(eslint-plugin-vue@9.22.0)(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2):
     resolution: {integrity: sha512-OEBHuhpfDZU/DMcku5kQo0fu/42lOQaKstRUZMTZcMbKpQIfQ4I3KhruRrtfAflCBJ35NPeF4mN1LhxumMBKjg==}
     peerDependencies:
       '@toml-tools/parser': '*'
@@ -1468,6 +1471,7 @@ packages:
       '@eslint/js': 8.57.0
       '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@unocss/eslint-config': 0.58.5(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
       eslint-config-prettier: 9.1.0(eslint@8.57.0)
       eslint-parser-plain: 0.1.0
@@ -1666,6 +1670,14 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
+
   /@typescript-eslint/scope-manager@7.1.0:
     resolution: {integrity: sha512-6TmN4OJiohHfoOdGZ3huuLhpiUgOGTpgXNUPJgeZOZR3DnIpdSgtt83RS35OYNNXxM4TScVlpVKC9jyQSETR1A==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1694,11 +1706,38 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
   /@typescript-eslint/types@7.1.0:
     resolution: {integrity: sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.6.0
+      ts-api-utils: 1.2.1(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/typescript-estree@7.1.0(typescript@5.3.3):
     resolution: {integrity: sha512-k7MyrbD6E463CBbSpcOnwa8oXRdHzH1WiVzOipK3L5KSML92ZKgUBrTlehdi7PEIMT8k0bQixHUGXggPAlKnOQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1721,6 +1760,25 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
+      eslint: 8.57.0
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/utils@7.1.0(eslint@8.57.0)(typescript@5.3.3):
     resolution: {integrity: sha512-WUFba6PZC5OCGEmbweGpnNJytJiLG7ZvDBJJoUcX4qZYf1mGZ97mO2Mps6O2efxJcJdRNpqweCistDbZMwIVHw==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1740,6 +1798,14 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@typescript-eslint/visitor-keys@7.1.0:
     resolution: {integrity: sha512-FhUqNWluiGNzlvnDZiXad4mZRhtghdoKW6e98GoEOYSu5cND+E39rG5KwJMUzeENwm1ztYBRqof8wMLP+wNPIA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1764,6 +1830,32 @@ packages:
     resolution: {integrity: sha512-qbPqL+46hf1/UelQOwUwpAuvm6buoss43DPYHOPdfNJ+NTWkSpATQMF0JKT04QE0QRQbHNSHdMe9ariG+IIlCw==}
     dev: true
 
+  /@unocss/eslint-config@0.58.5(eslint@8.57.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-HaRLlr9YBG0QPAn8nnIgYTpQ1HBVn3nuZs7hlPwV/IvFiMIY33BLVfNLEuKuGgkqxT04LmO4Oelsdau3a02+ug==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/eslint-plugin': 0.58.5(eslint@8.57.0)(typescript@5.3.3)
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - typescript
+    dev: true
+
+  /@unocss/eslint-plugin@0.58.5(eslint@8.57.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-QGB/Srml1XGiunuwbBmiVsXnkjjkRhg4/mTZ6HFkG1qZBAbsyE2QVxYJ6L7S4x4qdEgij2h2DK/Y90Cutwc7Mw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@unocss/config': 0.58.5
+      '@unocss/core': 0.58.5
+      magic-string: 0.30.7
+      synckit: 0.9.0
+    transitivePeerDependencies:
+      - eslint
+      - supports-color
+      - typescript
+    dev: true
+
   /@unocss/extractor-arbitrary-variants@0.58.5:
     resolution: {integrity: sha512-KJQX0OJKzy4YjJo09h2la2Q+cn5IJ1JdyPVJJkzovHnv7jSBWzsfct+bj/6a+SJ4p4JBIqEJz3M/qxHv4EPJyA==}
     dependencies:
@@ -7208,6 +7300,14 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /synckit@0.9.0:
+    resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.6.2
+    dev: true
+
   /tar@6.2.0:
     resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==}
     engines: {node: '>=10'}
diff --git a/src/components/advanced/table-column-setting.vue b/src/components/advanced/table-column-setting.vue
index 15730e91..f6a0e482 100644
--- a/src/components/advanced/table-column-setting.vue
+++ b/src/components/advanced/table-column-setting.vue
@@ -23,8 +23,8 @@ const columns = defineModel<FilteredColumn[]>('columns', {
       </NButton>
     </template>
     <VueDraggable v-model="columns">
-      <div v-for="item in columns" :key="item.key" class="flex-y-center h-36px hover:(bg-primary bg-opacity-20) rd-4px">
-        <icon-mdi-drag class="mr-8px text-icon cursor-move" />
+      <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
+        <icon-mdi-drag class="mr-8px cursor-move text-icon" />
         <NCheckbox v-model:checked="item.checked">
           {{ item.title }}
         </NCheckbox>
diff --git a/src/components/common/exception-base.vue b/src/components/common/exception-base.vue
index 7c6779f2..cbb48794 100644
--- a/src/components/common/exception-base.vue
+++ b/src/components/common/exception-base.vue
@@ -29,7 +29,7 @@ const icon = computed(() => iconMap[props.type]);
 </script>
 
 <template>
-  <div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
+  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
     <div class="flex text-400px text-primary">
       <SvgIcon :local-icon="icon" />
     </div>
diff --git a/src/components/custom/look-forward.vue b/src/components/custom/look-forward.vue
index c00a3617..d36e986f 100644
--- a/src/components/custom/look-forward.vue
+++ b/src/components/custom/look-forward.vue
@@ -7,12 +7,12 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
+  <div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
     <div class="flex text-400px text-primary">
       <SvgIcon local-icon="expectation" />
     </div>
     <slot>
-      <h3 class="text-28px font-500 text-primary">{{ $t('common.lookForward') }}</h3>
+      <h3 class="text-28px text-primary font-500">{{ $t('common.lookForward') }}</h3>
     </slot>
   </div>
 </template>
diff --git a/src/components/custom/soybean-avatar.vue b/src/components/custom/soybean-avatar.vue
index 1fea3dea..8d3278a0 100644
--- a/src/components/custom/soybean-avatar.vue
+++ b/src/components/custom/soybean-avatar.vue
@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="size-72px rd-1/2 overflow-hidden">
+  <div class="size-72px overflow-hidden rd-1/2">
     <img src="@/assets/imgs/soybean.jpg" class="size-full" />
   </div>
 </template>
diff --git a/src/components/custom/wave-bg.vue b/src/components/custom/wave-bg.vue
index 72cb04aa..52a215e6 100644
--- a/src/components/custom/wave-bg.vue
+++ b/src/components/custom/wave-bg.vue
@@ -36,7 +36,7 @@ const darkColor = computed(() => getColorPalette(props.themeColor, 6));
         </g>
       </svg>
     </div>
-    <div class="absolute -left-200px -bottom-400px <sm:(-left-100px -bottom-760px)">
+    <div class="absolute -bottom-400px -left-200px <sm:(-bottom-760px -left-100px)">
       <svg height="896" width="967.8852157128662">
         <defs>
           <path
diff --git a/src/layouts/modules/global-footer/index.vue b/src/layouts/modules/global-footer/index.vue
index c3272a2b..603cbaff 100644
--- a/src/layouts/modules/global-footer/index.vue
+++ b/src/layouts/modules/global-footer/index.vue
@@ -5,7 +5,7 @@ defineOptions({
 </script>
 
 <template>
-  <DarkModeContainer class="flex-center h-full">
+  <DarkModeContainer class="h-full flex-center">
     <a href="https://github.com/soybeanjs/soybean-admin/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
       Copyright MIT © 2021 Soybean
     </a>
diff --git a/src/layouts/modules/global-header/index.vue b/src/layouts/modules/global-header/index.vue
index 253876e7..705b41c6 100644
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@@ -46,14 +46,14 @@ const headerMenus = computed(() => {
 </script>
 
 <template>
-  <DarkModeContainer class="flex-y-center h-full shadow-header">
+  <DarkModeContainer class="h-full flex-y-center shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
     <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
-    <div v-else class="flex-1-hidden flex-y-center h-full">
+    <div v-else class="h-full flex-y-center flex-1-hidden">
       <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
-    <div class="flex-y-center justify-end h-full">
+    <div class="h-full flex-y-center justify-end">
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <ThemeSchemaSwitch
diff --git a/src/layouts/modules/global-logo/index.vue b/src/layouts/modules/global-logo/index.vue
index a44d388d..40ec52b0 100644
--- a/src/layouts/modules/global-logo/index.vue
+++ b/src/layouts/modules/global-logo/index.vue
@@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <RouterLink to="/" class="flex-center w-full nowrap-hidden">
+  <RouterLink to="/" class="w-full flex-center nowrap-hidden">
     <SystemLogo class="text-32px text-primary" />
-    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
+    <h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
       {{ $t('system.title') }}
     </h2>
   </RouterLink>
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/first-level-menu.vue
index 0ae7c8a3..c90a4fe3 100644
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/first-level-menu.vue
@@ -58,7 +58,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
   <!-- define component: MixMenuItem -->
   <DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
     <div
-      class="flex-vertical-center mx-4px mb-6px py-8px px-4px rounded-8px bg-transparent transition-300 cursor-pointer hover:bg-[rgb(0,0,0,0.08)]"
+      class="mx-4px mb-6px flex-vertical-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]"
       :class="{
         'text-primary selected-mix-menu': active,
         'text-white:65 hover:text-white': inverted,
@@ -67,7 +67,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     >
       <component :is="icon" :class="[isMini ? 'text-icon-small' : 'text-icon-large']" />
       <p
-        class="w-full text-center ellipsis-text text-12px transition-height-300"
+        class="w-full ellipsis-text text-center text-12px transition-height-300"
         :class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
       >
         {{ label }}
@@ -76,7 +76,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
   </DefineMixMenuItem>
 
   <!-- template -->
-  <div class="flex-1-hidden flex-vertical-stretch h-full">
+  <div class="h-full flex-vertical-stretch flex-1-hidden">
     <slot></slot>
     <SimpleScrollbar>
       <MixMenuItem
diff --git a/src/layouts/modules/global-menu/vertical-mix-menu.vue b/src/layouts/modules/global-menu/vertical-mix-menu.vue
index a633928a..b408ded0 100644
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ b/src/layouts/modules/global-menu/vertical-mix-menu.vue
@@ -43,7 +43,7 @@ function handleResetActiveMenu() {
 </script>
 
 <template>
-  <div class="flex h-full" @mouseleave="handleResetActiveMenu">
+  <div class="h-full flex" @mouseleave="handleResetActiveMenu">
     <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
       <slot></slot>
     </FirstLevelMenu>
@@ -52,12 +52,12 @@ function handleResetActiveMenu() {
       :style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
     >
       <DarkModeContainer
-        class="absolute-lt flex-vertical-stretch h-full nowrap-hidden transition-all-300 shadow-sm"
+        class="absolute-lt h-full flex-vertical-stretch nowrap-hidden shadow-sm transition-all-300"
         :inverted="siderInverted"
         :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
       >
         <header class="flex-y-center justify-between" :style="{ height: themeStore.header.height + 'px' }">
-          <h2 class="text-primary pl-8px text-16px font-bold">{{ $t('system.title') }}</h2>
+          <h2 class="pl-8px text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
           <PinToggler
             :pin="appStore.mixSiderFixed"
             :class="{ 'text-white:88 !hover:text-white': siderInverted }"
diff --git a/src/layouts/modules/global-sider/index.vue b/src/layouts/modules/global-sider/index.vue
index 71591921..35853c19 100644
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@@ -23,7 +23,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
 </script>
 
 <template>
-  <DarkModeContainer class="flex-vertical-stretch size-full shadow-sider" :inverted="darkMenu">
+  <DarkModeContainer class="size-full flex-vertical-stretch shadow-sider" :inverted="darkMenu">
     <GlobalLogo
       v-if="showLogo"
       :show-title="!appStore.siderCollapse"
diff --git a/src/layouts/modules/global-tab/index.vue b/src/layouts/modules/global-tab/index.vue
index 8e929d0e..ea851081 100644
--- a/src/layouts/modules/global-tab/index.vue
+++ b/src/layouts/modules/global-tab/index.vue
@@ -159,12 +159,12 @@ init();
 </script>
 
 <template>
-  <DarkModeContainer class="flex-y-center size-full px-16px shadow-tab">
-    <div ref="bsWrapper" class="flex-1-hidden h-full">
+  <DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
+    <div ref="bsWrapper" class="h-full flex-1-hidden">
       <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
         <div
           ref="tabRef"
-          class="flex h-full pr-18px"
+          class="h-full flex pr-18px"
           :class="[themeStore.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px']"
         >
           <PageTab
diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
index 6a6b969d..2e008fd3 100644
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -72,14 +72,14 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
     <div
       v-for="(item, key) in layoutConfig"
       :key="key"
-      class="flex border-2px rounded-6px cursor-pointer hover:border-primary"
+      class="flex cursor-pointer border-2px rounded-6px hover:border-primary"
       :class="[mode === key ? 'border-primary' : 'border-transparent']"
       @click="handleChangeMode(key)"
     >
       <NTooltip :placement="item.placement">
         <template #trigger>
           <div
-            class="gap-6px w-96px h-64px p-6px rd-4px shadow dark:shadow-coolGray-5"
+            class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
             :class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
           >
             <slot :name="key"></slot>
diff --git a/src/layouts/modules/theme-drawer/components/setting-item.vue b/src/layouts/modules/theme-drawer/components/setting-item.vue
index 9def299a..fd2111e9 100644
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -12,9 +12,9 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div class="flex-y-center justify-between w-full">
+  <div class="w-full flex-y-center justify-between">
     <div>
-      <span class="text-base_text pr-8px">{{ label }}</span>
+      <span class="pr-8px text-base_text">{{ label }}</span>
       <slot name="suffix"></slot>
     </div>
     <slot></slot>
diff --git a/src/layouts/modules/theme-drawer/modules/config-operation.vue b/src/layouts/modules/theme-drawer/modules/config-operation.vue
index 6233c985..04408f2a 100644
--- a/src/layouts/modules/theme-drawer/modules/config-operation.vue
+++ b/src/layouts/modules/theme-drawer/modules/config-operation.vue
@@ -46,7 +46,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex justify-between w-full">
+  <div class="w-full flex justify-between">
     <textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0 -z-1" />
     <NButton type="error" ghost @click="handleReset">{{ $t('theme.configOperation.resetConfig') }}</NButton>
     <div ref="domRef" data-clipboard-target="#themeConfigCopyTarget">
diff --git a/src/layouts/modules/theme-drawer/modules/layout-mode.vue b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
index b15a1e82..fa508fba 100644
--- a/src/layouts/modules/theme-drawer/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@@ -16,15 +16,15 @@ const themeStore = useThemeStore();
   <NDivider>{{ $t('theme.layoutMode.title') }}</NDivider>
   <LayoutModeCard v-model:mode="themeStore.layout.mode" :disabled="appStore.isMobile">
     <template #vertical>
-      <div class="layout-sider w-18px h-full"></div>
+      <div class="layout-sider h-full w-18px"></div>
       <div class="vertical-wrapper">
         <div class="layout-header"></div>
         <div class="layout-main"></div>
       </div>
     </template>
     <template #vertical-mix>
-      <div class="layout-sider w-8px h-full"></div>
-      <div class="layout-sider w-16px h-full"></div>
+      <div class="layout-sider h-full w-8px"></div>
+      <div class="layout-sider h-full w-16px"></div>
       <div class="vertical-wrapper">
         <div class="layout-header"></div>
         <div class="layout-main"></div>
diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
index bb622887..a2e8e567 100644
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -57,13 +57,13 @@ const bgColor = computed(() => {
 </script>
 
 <template>
-  <div class="relative flex-center size-full overflow-hidden" :style="{ backgroundColor: bgColor }">
+  <div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
     <WaveBg :theme-color="bgThemeColor" />
-    <NCard :bordered="false" class="relative w-auto rd-12px z-4">
+    <NCard :bordered="false" class="relative z-4 w-auto rd-12px">
       <div class="w-400px <sm:w-300px">
         <header class="flex-y-center justify-between">
           <SystemLogo class="text-64px text-primary <sm:text-48px" />
-          <h3 class="text-28px font-500 text-primary <sm:text-22px">{{ $t('system.title') }}</h3>
+          <h3 class="text-28px text-primary font-500 <sm:text-22px">{{ $t('system.title') }}</h3>
           <div class="i-flex-vertical">
             <ThemeSchemaSwitch
               :theme-schema="themeStore.themeScheme"
diff --git a/src/views/_builtin/login/modules/code-login.vue b/src/views/_builtin/login/modules/code-login.vue
index 6acd6732..8431aa7a 100644
--- a/src/views/_builtin/login/modules/code-login.vue
+++ b/src/views/_builtin/login/modules/code-login.vue
@@ -18,10 +18,10 @@ const { toggleLoginModule } = useRouterPush();
       <NInput :placeholder="$t('page.login.common.codePlaceholder')" />
     </NFormItem>
     <NSpace vertical :size="18" class="w-full">
-      <NButton type="primary" size="large" block round>
+      <NButton type="primary" size="large" round block>
         {{ $t('common.confirm') }}
       </NButton>
-      <NButton size="large" block round @click="toggleLoginModule('pwd-login')">
+      <NButton size="large" round block @click="toggleLoginModule('pwd-login')">
         {{ $t('page.login.common.back') }}
       </NButton>
     </NSpace>
diff --git a/src/views/_builtin/login/modules/pwd-login.vue b/src/views/_builtin/login/modules/pwd-login.vue
index 9bd498e2..8ba229d9 100644
--- a/src/views/_builtin/login/modules/pwd-login.vue
+++ b/src/views/_builtin/login/modules/pwd-login.vue
@@ -56,7 +56,7 @@ async function handleSubmit() {
         <NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
         <NButton quaternary>{{ $t('page.login.pwdLogin.forgetPassword') }}</NButton>
       </div>
-      <NButton type="primary" size="large" block round :loading="authStore.loginLoading" @click="handleSubmit">
+      <NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="handleSubmit">
         {{ $t('common.confirm') }}
       </NButton>
       <div class="flex-y-center justify-between gap-12px">
diff --git a/src/views/_builtin/login/modules/register.vue b/src/views/_builtin/login/modules/register.vue
index 6acd6732..8431aa7a 100644
--- a/src/views/_builtin/login/modules/register.vue
+++ b/src/views/_builtin/login/modules/register.vue
@@ -18,10 +18,10 @@ const { toggleLoginModule } = useRouterPush();
       <NInput :placeholder="$t('page.login.common.codePlaceholder')" />
     </NFormItem>
     <NSpace vertical :size="18" class="w-full">
-      <NButton type="primary" size="large" block round>
+      <NButton type="primary" size="large" round block>
         {{ $t('common.confirm') }}
       </NButton>
-      <NButton size="large" block round @click="toggleLoginModule('pwd-login')">
+      <NButton size="large" round block @click="toggleLoginModule('pwd-login')">
         {{ $t('page.login.common.back') }}
       </NButton>
     </NSpace>
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index badb8660..59104700 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -81,7 +81,7 @@ function getGradientColor(color: CardData['color']) {
   <NCard :bordered="false" size="small" class="card-wrapper">
     <!-- define component start: GradientBg -->
     <DefineGradientBg v-slot="{ $slots, gradientColor }">
-      <div class="px-16px pt-8px pb-4px rd-8px text-white" :style="{ backgroundImage: gradientColor }">
+      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
         <component :is="$slots.default" />
       </div>
     </DefineGradientBg>
diff --git a/src/views/home/modules/creativity-banner.vue b/src/views/home/modules/creativity-banner.vue
index 8296d951..4b1cf23b 100644
--- a/src/views/home/modules/creativity-banner.vue
+++ b/src/views/home/modules/creativity-banner.vue
@@ -7,9 +7,9 @@ defineOptions({
 </script>
 
 <template>
-  <NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="card-wrapper h-full">
-    <div class="flex-center h-full">
-      <IconLocalBanner class="text-400px sm:text-320px text-primary" />
+  <NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="h-full card-wrapper">
+    <div class="h-full flex-center">
+      <IconLocalBanner class="text-400px text-primary sm:text-320px" />
     </div>
   </NCard>
 </template>
diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue
index 3dc6f80b..42da0423 100644
--- a/src/views/home/modules/header-banner.vue
+++ b/src/views/home/modules/header-banner.vue
@@ -43,14 +43,14 @@ const statisticData = computed<StatisticData[]>(() => [
     <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
       <NGi span="24 s:24 m:18">
         <div class="flex-y-center">
-          <div class="shrink-0 size-72px rd-1/2 overflow-hidden">
+          <div class="size-72px shrink-0 overflow-hidden rd-1/2">
             <img src="@/assets/imgs/soybean.jpg" class="size-full" />
           </div>
           <div class="pl-12px">
             <h3 class="text-18px font-semibold">
               {{ $t('page.home.greeting', { userName: authStore.userInfo.userName }) }}
             </h3>
-            <p class="leading-30px text-#999">{{ $t('page.home.weatherDesc') }}</p>
+            <p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
           </div>
         </div>
       </NGi>
diff --git a/src/views/manage/menu/index.vue b/src/views/manage/menu/index.vue
index 094b92b8..a7778984 100644
--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@@ -227,7 +227,7 @@ async function handleDelete(id: number) {
 
 <template>
   <div ref="wrapperRef" class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
-    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="filteredColumns"
diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
index 8ab1b427..83133038 100644
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@@ -176,7 +176,7 @@ function getIndex(index: number) {
 <template>
   <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
     <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="filteredColumns"
diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
index 44456a38..ad5949f1 100644
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -206,7 +206,7 @@ function getIndex(index: number) {
 <template>
   <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="filteredColumns"