chore(projects): add unocss eslint config

2024-03-03 10:32:00 +08:00 · 2024-03-03 10:32:00 +08:00 · 4063529a25
commit 4063529a25
parent b4c00ce199
34 changed files with 165 additions and 64 deletions
--- 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': [
--- 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",
--- 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>
--- 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 },
--- 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>

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