Merge branch 'main' into perf/tailwindcss-class

2026-02-13 17:30:27 +08:00 · 2026-01-17 06:30:19 +08:00 · 2026-01-16 11:36:01 +08:00 · 2026-01-16 09:59:20 +08:00 · 2026-01-16 09:31:24 +08:00 · 2026-01-15 12:58:46 +08:00
94 changed files with 344 additions and 272 deletions
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,6 +5,7 @@ import * as parserVue from "vue-eslint-parser";
 import configPrettier from "eslint-config-prettier";
 import pluginPrettier from "eslint-plugin-prettier";
 import { defineConfig, globalIgnores } from "eslint/config";
+import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";

 export default defineConfig([
  globalIgnores([
@@ -172,5 +173,21 @@ export default defineConfig([
        }
      ]
    }
+  },
+  {
+    files: ["**/*.vue", "**/*.tsx"],
+    plugins: {
+      "better-tailwindcss": eslintPluginBetterTailwindcss
+    },
+    rules: {
+      "better-tailwindcss/enforce-consistent-variable-syntax": "warn",
+      "better-tailwindcss/enforce-canonical-classes": "warn"
+    },
+    settings: {
+      "better-tailwindcss": {
+        entryPoint: "src/style/tailwind.css",
+        rootFontSize: 16
+      }
+    }
  }
 ]);
--- a/package.json
+++ b/package.json
@@ -141,6 +141,7 @@
    "dagre": "^0.8.5",
    "eslint": "^9.39.2",
    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "^4.0.1",
    "eslint-plugin-prettier": "^5.5.5",
    "eslint-plugin-vue": "^10.6.2",
    "gradient-string": "^3.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -285,6 +285,9 @@ importers:
      eslint-config-prettier:
        specifier: ^10.1.8
        version: 10.1.8(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-better-tailwindcss:
+        specifier: ^4.0.1
+        version: 4.0.1(eslint@9.39.2(jiti@2.6.1))(tailwindcss@4.1.18)(typescript@5.9.3)
      eslint-plugin-prettier:
        specifier: ^5.5.5
        version: 5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.0)
@@ -1212,6 +1215,10 @@ packages:
    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@eslint/css-tree@3.6.8':
+    resolution: {integrity: sha512-s0f40zY7dlMp8i0Jf0u6l/aSswS0WRAgkhgETgiCJRcxIWb4S/Sp9uScKHWbkM3BnoFLbJbmOYk5AZUDFVxaLA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
  '@eslint/eslintrc@3.3.3':
    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2100,6 +2107,11 @@ packages:
    peerDependencies:
      '@uppy/core': ^2.3.3

+  '@valibot/to-json-schema@1.5.0':
+    resolution: {integrity: sha512-GE7DmSr1C2UCWPiV0upRH6mv0cCPsqYGs819fb6srCS1tWhyXrkGGe+zxUiwzn/L1BOfADH4sNjY/YHCuP8phQ==}
+    peerDependencies:
+      valibot: ^1.2.0
+
  '@vitejs/plugin-vue-jsx@5.1.3':
    resolution: {integrity: sha512-I6Zr8cYVr5WHMW5gNOP09DNqW9rgO8RX73Wa6Czgq/0ndpTfJM4vfDChfOT1+3KtdrNqilNBtNlFwVeB02ZzGw==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -3125,6 +3137,19 @@ packages:
    peerDependencies:
      eslint: '>=7.0.0'

+  eslint-plugin-better-tailwindcss@4.0.1:
+    resolution: {integrity: sha512-iHf7tMgISkXJ5XLgskpxMPgHSHorI28cN4rQyn1Q5YFTovObZwESi/r5cmF49hTQfWkb0B8s7Me6BLM2efvzlQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
  eslint-plugin-prettier@5.5.5:
    resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -4154,6 +4179,9 @@ packages:
  mdn-data@2.12.2:
    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}

+  mdn-data@2.23.0:
+    resolution: {integrity: sha512-786vq1+4079JSeu2XdcDjrhi/Ry7BWtjDl9WtGPWLiIHb2T66GvIVflZTBoSNZ5JqTtJGYEVMuFA/lbQlMOyDQ==}
+
  mdn-data@2.26.0:
    resolution: {integrity: sha512-ZqI0qjKWHMPcGUfLmlr80NPNVHIOjPMHtIOe1qXYFGS0YBZ1YKAzo9yk8W+gGrLCN0Xdv/RKxqdIsqPakEfmow==}

@@ -5068,6 +5096,10 @@ packages:
    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
    engines: {node: '>=12'}

+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
  strip-bom@4.0.0:
    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
    engines: {node: '>=8'}
@@ -5221,6 +5253,10 @@ packages:
    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
    engines: {node: '>=10.0.0'}

+  tailwind-csstree@0.1.4:
+    resolution: {integrity: sha512-FzD187HuFIZEyeR7Xy6sJbJll2d4SybS90satC8SKIuaNRC05CxMvdzN7BUsfDQffcnabckRM5OIcfArjsZ0mg==}
+    engines: {node: '>=18.18'}
+
  tailwindcss@4.1.18:
    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}

@@ -5287,6 +5323,14 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
  tslib@2.3.0:
    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

@@ -5414,6 +5458,14 @@ packages:
    resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
    engines: {node: '>=10.12.0'}

+  valibot@1.2.0:
+    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  vditor@3.11.2:
    resolution: {integrity: sha512-8QguQQUPWbBFocnfQmWjz4jiykQnvsmCuhOomGIVVK7vc+dQq2h8w9qQQuEjUTZpnZT5fEdYbj4aLr1NGdAZaA==}

@@ -6485,6 +6537,11 @@ snapshots:
    dependencies:
      '@types/json-schema': 7.0.15

+  '@eslint/css-tree@3.6.8':
+    dependencies:
+      mdn-data: 2.23.0
+      source-map-js: 1.2.1
+
  '@eslint/eslintrc@3.3.3':
    dependencies:
      ajv: 6.12.6
@@ -7404,6 +7461,10 @@ snapshots:
      '@uppy/utils': 4.1.3
      nanoid: 3.3.11

+  '@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3))':
+    dependencies:
+      valibot: 1.2.0(typescript@5.9.3)
+
  '@vitejs/plugin-vue-jsx@5.1.3(vite@7.3.1(@types/node@20.19.30)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
    dependencies:
      '@babel/core': 7.28.6
@@ -8675,6 +8736,22 @@ snapshots:
    dependencies:
      eslint: 9.39.2(jiti@2.6.1)

+  eslint-plugin-better-tailwindcss@4.0.1(eslint@9.39.2(jiti@2.6.1))(tailwindcss@4.1.18)(typescript@5.9.3):
+    dependencies:
+      '@eslint/css-tree': 3.6.8
+      '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
+      enhanced-resolve: 5.18.4
+      jiti: 2.6.1
+      synckit: 0.11.12
+      tailwind-csstree: 0.1.4
+      tailwindcss: 4.1.18
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.2.0(typescript@5.9.3)
+    optionalDependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+    transitivePeerDependencies:
+      - typescript
+
  eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.8.0):
    dependencies:
      eslint: 9.39.2(jiti@2.6.1)
@@ -9910,6 +9987,8 @@ snapshots:

  mdn-data@2.12.2: {}

+  mdn-data@2.23.0: {}
+
  mdn-data@2.26.0: {}

  memoize-one@6.0.0: {}
@@ -10781,6 +10860,8 @@ snapshots:
    dependencies:
      ansi-regex: 6.2.2

+  strip-bom@3.0.0: {}
+
  strip-bom@4.0.0: {}

  strip-final-newline@2.0.0: {}
@@ -10974,6 +11055,8 @@ snapshots:
      string-width: 4.2.3
      strip-ansi: 6.0.1

+  tailwind-csstree@0.1.4: {}
+
  tailwindcss@4.1.18: {}

  tapable@2.3.0: {}
@@ -11036,6 +11119,19 @@ snapshots:
    dependencies:
      typescript: 5.9.3

+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.18.4
+      tapable: 2.3.0
+      tsconfig-paths: 4.2.0
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
  tslib@2.3.0: {}

  tslib@2.4.0: {}
@@ -11152,6 +11248,10 @@ snapshots:
      convert-source-map: 1.9.0
      source-map: 0.7.6

+  valibot@1.2.0(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
  vditor@3.11.2:
    dependencies:
      diff-match-patch: 1.0.5
--- a/src/components/ReAnimateSelector/src/index.vue
+++ b/src/components/ReAnimateSelector/src/index.vue
@@ -23,17 +23,15 @@ const copyAnimatesList = cloneDeep(animatesList);
 const animateClass = computed(() => {
  return [
    "mt-1",
-    "flex",
+    "flex-c",
    "border",
-    "w-[130px]",
-    "h-[100px]",
-    "items-center",
+    "w-32.5",
+    "h-25",
    "cursor-pointer",
    "transition-all",
-    "justify-center",
    "border-[#e5e7eb]",
    "hover:text-primary",
-    "hover:duration-[700ms]"
+    "hover:duration-700"
  ];
 });

@@ -88,7 +86,7 @@ function onMouseleave() {
    @clear="onClear"
  >
    <template #empty>
-      <div class="w-[280px]">
+      <div class="w-70">
        <el-scrollbar
          noresize
          height="212px"
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -116,11 +116,10 @@ export default defineComponent({

    const iconClass = computed(() => {
      return [
-        "p-[6px]",
-        "h-[30px]",
-        "w-[30px]",
+        "p-1.5",
+        "size-7.5",
+        "rounded-sm",
        "outline-hidden",
-        "rounded-[4px]",
        "cursor-pointer",
        "hover:bg-[rgba(0,0,0,0.06)]"
      ];
@@ -252,7 +251,7 @@ export default defineComponent({
      },
      setup() {
        return () => (
-          <div class="flex flex-wrap w-[60px] justify-between">
+          <div class="flex flex-wrap w-15 justify-between">
            <ElUpload
              accept="image/*"
              show-file-list={false}
--- a/src/components/ReCropperPreview/src/index.vue
+++ b/src/components/ReCropperPreview/src/index.vue
@@ -54,7 +54,7 @@ defineExpose({ hidePopover });
          </p>
        </div>
      </template>
-      <div class="flex flex-wrap justify-center items-center text-center">
+      <div class="flex-c flex-wrap text-center">
        <el-image
          v-if="cropperImg"
          :src="cropperImg"
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -123,10 +123,7 @@ function handleClose(
      v-if="options?.fullscreenIcon || options?.headerRenderer"
      #header="{ close, titleId, titleClass }"
    >
-      <div
-        v-if="options?.fullscreenIcon"
-        class="flex items-center justify-between"
-      >
+      <div v-if="options?.fullscreenIcon" class="flex-bc">
        <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
        <i
          v-if="!options?.fullscreen"
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -135,9 +135,7 @@ watch(
          @after-leave="onAfterLeave"
        >
          <template #reference>
-            <div
-              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
-            >
+            <div class="w-10 h-8 cursor-pointer flex-c">
              <IconifyIconOffline v-if="!icon" :icon="Search" />
              <IconifyIconOnline v-else :icon="inputValue" />
            </div>
@@ -163,7 +161,7 @@ watch(
                    v-for="(item, key) in pageList"
                    :key="key"
                    :title="item"
-                    class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
+                    class="icon-item p-2 cursor-pointer mr-2 mt-1 flex-c border border-[#e5e7eb]"
                    :style="iconItemStyle(item)"
                    @click="onChangeIcon(item)"
                  >
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -97,9 +97,9 @@ export default defineComponent({
      return [
        "flex",
        "justify-between",
-        "pt-[3px]",
-        "px-[11px]",
-        "border-b-[1px]",
+        "pt-0.75",
+        "px-2.75",
+        "border-b",
        "border-b-solid",
        "border-[#dcdfe6]",
        "dark:border-[#303030]"
@@ -244,7 +244,7 @@ export default defineComponent({
    const reference = {
      reference: () => (
        <SettingIcon
-          class={["w-[16px]", iconClass.value]}
+          class={["w-4", iconClass.value]}
          v-tippy={rendTippyProps(
            transformI18n($t("tableBar.pureColumnSettings"))
          )}
@@ -266,20 +266,20 @@ export default defineComponent({
              : "mt-2"
          ]}
        >
-          <div class="flex justify-between w-full h-[60px] p-4">
+          <div class="flex justify-between w-full h-15 p-4">
            {slots?.title ? (
              slots.title()
            ) : (
              <p class="font-bold truncate">{transformI18n(props.title)}</p>
            )}
-            <div class="flex items-center justify-around">
+            <div class="flex-ac">
              {slots?.buttons ? (
                <div class="flex mr-4">{slots.buttons()}</div>
              ) : null}
              {props.tableRef?.size ? (
                <>
                  <ExpandIcon
-                    class={["w-[16px]", iconClass.value]}
+                    class={["w-4", iconClass.value]}
                    style={{
                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
                    }}
@@ -295,7 +295,7 @@ export default defineComponent({
              ) : null}
              <RefreshIcon
                class={[
-                  "w-[16px]",
+                  "w-4",
                  iconClass.value,
                  loading.value ? "animate-spin" : ""
                ]}
@@ -312,7 +312,7 @@ export default defineComponent({
                  transformI18n($t("tableBar.pureDensity"))
                )}
              >
-                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+                <CollapseIcon class={["w-4", iconClass.value]} />
              </el-dropdown>
              <el-divider direction="vertical" />

@@ -336,7 +336,7 @@ export default defineComponent({
                  </el-button>
                </div>

-                <div class="pt-[6px] pl-[11px]">
+                <div class="pt-1.5 pl-2.75">
                  <el-scrollbar max-height="36vh">
                    <el-checkbox-group
                      ref={`GroupRef${unref(props.tableKey)}`}
@@ -353,7 +353,7 @@ export default defineComponent({
                            <div class="flex items-center">
                              <DragIcon
                                class={[
-                                  "drag-btn w-[16px] mr-2",
+                                  "drag-btn w-4 mr-2",
                                  isFixedColumn(item)
                                    ? "cursor-no-drop!"
                                    : "cursor-grab!"
@@ -372,7 +372,7 @@ export default defineComponent({
                              >
                                <span
                                  title={transformI18n(item)}
-                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                  class="inline-block w-30 truncate hover:text-text_color_primary"
                                >
                                  {transformI18n(item)}
                                </span>
@@ -388,7 +388,7 @@ export default defineComponent({
              <el-divider direction="vertical" />

              <iconifyIconOffline
-                class={["w-[16px]", iconClass.value]}
+                class={["w-4", iconClass.value]}
                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                v-tippy={
                  isFullscreen.value
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -240,7 +240,7 @@ export default defineComponent({
          )}
          {props.disabled && (
            <div
-              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              class="qrcode--disabled absolute top-0 left-0 flex-c size-full"
              onClick={disabledClick}
            >
              <div class="absolute top-[50%] left-[50%] font-bold">
--- a/src/components/ReVxeTableBar/src/bar.tsx
+++ b/src/components/ReVxeTableBar/src/bar.tsx
@@ -90,9 +90,9 @@ export default defineComponent({
      return [
        "flex",
        "justify-between",
-        "pt-[3px]",
-        "px-[11px]",
-        "border-b-[1px]",
+        "pt-0.75",
+        "px-2.75",
+        "border-b",
        "border-b-solid",
        "border-[#dcdfe6]",
        "dark:border-[#303030]"
@@ -237,7 +237,7 @@ export default defineComponent({
    const reference = {
      reference: () => (
        <SettingIcon
-          class={["w-[16px]", iconClass.value]}
+          class={["w-4", iconClass.value]}
          v-tippy={rendTippyProps(
            transformI18n($t("tableBar.pureColumnSettings"))
          )}
@@ -259,20 +259,20 @@ export default defineComponent({
              : "mt-2"
          ]}
        >
-          <div class="flex justify-between w-full h-[60px] p-4">
+          <div class="flex justify-between w-full h-15 p-4">
            {slots?.title ? (
              slots.title()
            ) : (
              <p class="font-bold truncate">{transformI18n(props.title)}</p>
            )}
-            <div class="flex items-center justify-around">
+            <div class="flex-ac">
              {slots?.buttons ? (
                <div class="flex mr-4">{slots.buttons()}</div>
              ) : null}
              {props.tree ? (
                <>
                  <ExpandIcon
-                    class={["w-[16px]", iconClass.value]}
+                    class={["w-4", iconClass.value]}
                    style={{
                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
                    }}
@@ -288,7 +288,7 @@ export default defineComponent({
              ) : null}
              <RefreshIcon
                class={[
-                  "w-[16px]",
+                  "w-4",
                  iconClass.value,
                  loading.value ? "animate-spin" : ""
                ]}
@@ -305,7 +305,7 @@ export default defineComponent({
                  transformI18n($t("tableBar.pureDensity"))
                )}
              >
-                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+                <CollapseIcon class={["w-4", iconClass.value]} />
              </el-dropdown>
              <el-divider direction="vertical" />

@@ -329,7 +329,7 @@ export default defineComponent({
                  </el-button>
                </div>

-                <div class="pt-[6px] pl-[11px]">
+                <div class="pt-1.5 pl-2.75">
                  <el-scrollbar max-height="36vh">
                    <el-checkbox-group
                      ref={`VxeGroupRef${unref(props.tableKey)}`}
@@ -346,7 +346,7 @@ export default defineComponent({
                            <div class="flex items-center">
                              <DragIcon
                                class={[
-                                  "drag-btn w-[16px] mr-2",
+                                  "drag-btn w-4 mr-2",
                                  isFixedColumn(item)
                                    ? "cursor-no-drop!"
                                    : "cursor-grab!"
@@ -363,7 +363,7 @@ export default defineComponent({
                              >
                                <span
                                  title={transformI18n(item)}
-                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                  class="inline-block w-30 truncate hover:text-text_color_primary"
                                >
                                  {transformI18n(item)}
                                </span>
@@ -379,7 +379,7 @@ export default defineComponent({
              <el-divider direction="vertical" />

              <iconifyIconOffline
-                class={["w-[16px]", iconClass.value]}
+                class={["w-4", iconClass.value]}
                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                v-tippy={
                  isFullscreen.value
--- a/src/layout/components/lay-frame/index.vue
+++ b/src/layout/components/lay-frame/index.vue
@@ -65,7 +65,7 @@ watch(
 </script>
 <template>
  <template v-for="[fullPath, Comp] in compList" :key="fullPath">
-    <div v-show="fullPath === currRoute.fullPath" class="w-full h-full">
+    <div v-show="fullPath === currRoute.fullPath" class="size-full">
      <slot
        :fullPath="fullPath"
        :Comp="Comp"
@@ -73,7 +73,7 @@ watch(
      />
    </div>
  </template>
-  <div v-show="!keep" class="w-full h-full">
+  <div v-show="!keep" class="size-full">
    <slot :Comp="normalComp" :fullPath="currRoute.fullPath" frameInfo />
  </div>
 </template>
--- a/src/layout/components/lay-navbar/index.vue
+++ b/src/layout/components/lay-navbar/index.vue
@@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>

 <template>
-  <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
+  <div class="navbar bg-white shadow-xs shadow-[rgba(0,21,41,0.08)]">
    <LaySidebarTopCollapse
      v-if="device === 'mobile'"
      class="hamburger-container"
--- a/src/layout/components/lay-notice/components/NoticeItem.vue
+++ b/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -49,7 +49,7 @@ function hoverDescription(event, description) {

 <template>
  <div
-    class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-0 border-b border-solid border-[#f0f0f0] dark:border-[#303030]"
  >
    <el-avatar
      v-if="noticeItem.avatar"
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -18,7 +18,7 @@ const getLabel = computed(
 <template>
  <el-dropdown trigger="click" placement="bottom-end">
    <span
-      :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', 'mr-[7px]']"
+      :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', 'mr-1.75']"
    >
      <el-badge is-dot>
        <span class="header-notice-icon">
--- a/src/layout/components/lay-panel/index.vue
+++ b/src/layout/components/lay-panel/index.vue
@@ -11,13 +11,10 @@ const show = ref<Boolean>(false);

 const iconClass = computed(() => {
  return [
-    "w-[22px]",
-    "h-[22px]",
-    "flex",
-    "justify-center",
-    "items-center",
+    "size-5.5",
+    "flex-c",
    "outline-hidden",
-    "rounded-[4px]",
+    "rounded-sm",
    "cursor-pointer",
    "transition-colors",
    "hover:bg-[#0000000f]",
--- a/src/layout/components/lay-search/components/SearchHistoryItem.vue
+++ b/src/layout/components/lay-search/components/SearchHistoryItem.vue
@@ -34,12 +34,12 @@ function handleDelete(item) {
  <IconifyIconOffline
    v-show="item.type === 'history'"
    :icon="StarIcon"
-    class="w-[18px] h-[18px] mr-2 hover:text-[#d7d5d4]"
+    class="size-4.5 mr-2 hover:text-[#d7d5d4]"
    @click.stop="handleCollect(item)"
  />
  <IconifyIconOffline
    :icon="CloseIcon"
-    class="w-[18px] h-[18px] hover:text-[#d7d5d4] cursor-pointer"
+    class="size-4.5 hover:text-[#d7d5d4] cursor-pointer"
    @click.stop="handleDelete(item)"
  />
 </template>
--- a/src/layout/components/lay-search/components/SearchModal.vue
+++ b/src/layout/components/lay-search/components/SearchModal.vue
@@ -297,10 +297,7 @@ onKeyStroke("ArrowDown", handleDown);
      @input="handleSearch"
    >
      <template #prefix>
-        <IconifyIconOffline
-          :icon="SearchIcon"
-          class="text-primary w-[24px] h-[24px]"
-        />
+        <IconifyIconOffline :icon="SearchIcon" class="text-primary size-6" />
      </template>
    </el-input>
    <div class="search-content">
--- a/src/layout/components/lay-search/index.vue
+++ b/src/layout/components/lay-search/index.vue
@@ -11,7 +11,7 @@ function handleSearch() {
 <template>
  <div>
    <div
-      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
+      class="search-container w-10 h-12 flex-c cursor-pointer navbar-bg-hover hover:[&>svg]:animate-scale-bounce"
      @click="handleSearch"
    >
      <IconifyIconOffline icon="ri/search-line" />
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -189,7 +189,7 @@ const getThemeColor = computed(() => {
 });

 const pClass = computed(() => {
-  return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
+  return ["mb-3!", "font-medium", "text-sm", "dark:text-white"];
 });

 const themeOptions = computed<Array<OptionsType>>(() => {
@@ -416,7 +416,7 @@ onUnmounted(() => removeMatchMedia);
        <button
          v-else
          v-ripple="{ class: 'text-gray-300' }"
-          class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-(--pure-border-color)"
          @click="setStretch(!settings.stretch)"
        >
          <div
--- a/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
@@ -105,7 +105,7 @@ watch(
 </script>

 <template>
-  <el-breadcrumb class="leading-[50px]! select-none" separator="/">
+  <el-breadcrumb class="leading-12.5! select-none" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="item in levelList"
--- a/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
@@ -18,7 +18,7 @@ const { t } = useI18n();
 const { tooltipEffect } = useNav();

 const iconClass = computed(() => {
-  return ["w-[16px]", "h-[16px]"];
+  return ["size-4"];
 });

 const { $storage } = useGlobal<GlobalPropertiesApi>();
--- a/src/layout/components/lay-sidebar/components/SidebarExtraIcon.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarExtraIcon.vue
@@ -11,10 +11,7 @@ defineProps({
 </script>

 <template>
-  <div v-if="extraIcon" class="flex justify-center items-center">
-    <component
-      :is="useRenderIcon(toRaw(extraIcon))"
-      class="w-[30px] h-[30px]"
-    />
+  <div v-if="extraIcon" class="flex-c">
+    <component :is="useRenderIcon(toRaw(extraIcon))" class="size-7.5" />
  </div>
 </template>
--- a/src/layout/components/lay-sidebar/components/SidebarItem.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarItem.vue
@@ -71,7 +71,7 @@ const textClass = computed(() => {
    ((layout.value === "vertical" && item.parentId === null) ||
      (layout.value === "mix" && item.pathList.length === 2))
  ) {
-    return `${baseClass} min-w-[54px]! text-center! px-3!`;
+    return `${baseClass} min-w-13.5! text-center! px-3!`;
  }
  return baseClass;
 });
@@ -159,7 +159,7 @@ function resolvePath(routePath) {
            item?.pathList?.length === 2)
        "
        truncated
-        class="w-full! px-3! min-w-[54px]! text-center! text-inherit!"
+        class="w-full! px-3! min-w-13.5! text-center! text-inherit!"
      >
        {{ transformI18n(onlyOneChild.meta.title) }}
      </el-text>
--- a/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
@@ -21,12 +21,11 @@ const iconClass = computed(() => {
  return [
    "ml-4",
    "mb-1",
-    "w-[16px]",
-    "h-[16px]",
+    "size-4",
    "inline-block!",
    "align-middle",
    "cursor-pointer",
-    "duration-[100ms]"
+    "duration-100"
  ];
 });

--- a/src/layout/components/lay-tag/components/TagChrome.vue
+++ b/src/layout/components/lay-tag/components/TagChrome.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="w-full h-full">
+  <svg class="size-full">
    <defs>
      <symbol id="geometry-left" viewBox="0 0 214 36">
        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
--- a/src/views/able/directives.vue
+++ b/src/views/able/directives.vue
@@ -76,7 +76,7 @@ function onReset() {
          immediate: true,
          timeout: 1000
        }"
-        class="w-[200px]!"
+        class="w-50!"
        clearable
        @clear="onInput"
      />
@@ -86,7 +86,7 @@ function onReset() {
      <el-input
        v-model="searchTwo"
        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
-        class="w-[200px]!"
+        class="w-50!"
        clearable
      />
    </div>
@@ -100,7 +100,7 @@ function onReset() {
          timeout: 400,
          params: { name: '小明', sex: '男' }
        }"
-        class="w-[200px]!"
+        class="w-50!"
        clearable
      />
    </div>
@@ -112,7 +112,7 @@ function onReset() {
      <el-input
        v-model="searchFour"
        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
-        class="w-[200px]!"
+        class="w-50!"
        clearable
      />
    </div>
@@ -125,7 +125,7 @@ function onReset() {
          fn: onInputFive,
          params: { name: '小明', sex: '男' }
        }"
-        class="w-[200px]!"
+        class="w-50!"
        clearable
      />
    </div>
@@ -134,7 +134,7 @@ function onReset() {

    <div class="mb-2">
      文本复制指令（双击输入框内容即可复制）
-      <el-input v-model="searchSix" v-copy="searchSix" class="w-[200px]!" />
+      <el-input v-model="searchSix" v-copy="searchSix" class="w-50!" />
    </div>
    <div>
      文本复制指令（自定义触发事件，单击复制）
--- a/src/views/able/excel.vue
+++ b/src/views/able/excel.vue
@@ -89,7 +89,7 @@ const exportExcel = () => {
      </el-link>
    </template>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
-    <div class="h-[25rem] mt-3">
+    <div class="h-100 mt-3">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -39,12 +39,12 @@ const dataProps = {
    </template>

    <el-row :gutter="24">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-5">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">普通树结构</div>
          </template>
-          <div class="max-h-[550px] overflow-y-auto">
+          <div class="max-h-137.5 overflow-y-auto">
            <el-tree
              :data="menusData"
              :props="dataProps"
@@ -71,7 +71,7 @@ const dataProps = {
          <template #header>
            <div class="card-header">虚拟树结构</div>
          </template>
-          <div class="max-h-[550px] overflow-y-auto">
+          <div class="max-h-137.5 overflow-y-auto">
            <el-tree-v2
              :data="menusData"
              :props="dataProps"
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -59,7 +59,7 @@ const onPrint = () => {
      class="h-[calc(100vh-295px)]"
      :element-loading-text="t('status.pureLoad')"
    >
-      <div class="flex justify-between items-center h-9">
+      <div class="flex-bc h-9">
        <div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
          共{{ pageCount }}页
        </div>
@@ -74,7 +74,7 @@ const onPrint = () => {
            {{ currentPage }} / {{ pageCount }}
          </el-pagination>
        </div>
-        <div class="w-[170px] flex-bc">
+        <div class="w-42.5 flex-bc">
          <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
            显示所有页面
          </el-checkbox>
--- a/src/views/able/print/index.vue
+++ b/src/views/able/print/index.vue
@@ -83,7 +83,7 @@ const tableData: User[] = [
        <span class="font-medium">打印功能（报表、图表、图片）</span>
        <el-select
          v-model="value"
-          class="w-[100px]! mr-2"
+          class="w-25! mr-2"
          placeholder="Select"
          size="small"
        >
@@ -131,7 +131,7 @@ const tableData: User[] = [
          border
          :data="tableData"
          :row-class-name="tableRowClassName"
-          class="el-table w-full mt-[10px]"
+          class="el-table w-full mt-2.5"
        >
          <el-table-column prop="date" label="Date" />
          <el-table-column prop="name" label="Name" />
@@ -160,7 +160,7 @@ const tableData: User[] = [
        }"
      >
        <p class="font-medium text-lg text-center">Echart</p>
-        <pieChart class="echart mt-[10px]" />
+        <pieChart class="echart mt-2.5" />
      </el-col>

      <el-col
@@ -186,7 +186,7 @@ const tableData: User[] = [
        <img
          src="https://pure-admin-utils.netlify.app/logo.png"
          alt="avatars"
-          class="img mt-[10px] m-auto"
+          class="img mt-2.5 m-auto"
        />
      </el-col>
    </el-row>
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -46,19 +46,19 @@ const disabledClick = () => {
      </template>
      <el-row :gutter="20" justify="space-between">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">基础用法</div>
            <ReQrcode :text="qrcodeText" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">img标签</div>
            <ReQrcode :text="qrcodeText" tag="img" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">样式配置</div>
            <ReQrcode
              :text="qrcodeText"
@@ -72,19 +72,19 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">点击事件</div>
            <ReQrcode :text="qrcodeText" @click="codeClick" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">异步内容</div>
            <ReQrcode :text="asyncTitle" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">失效</div>
            <ReQrcode
              :text="qrcodeText"
@@ -94,7 +94,7 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">logo配置</div>
            <ReQrcode
              :text="qrcodeText"
@@ -103,7 +103,7 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">logo样式</div>
            <ReQrcode
              :text="qrcodeText"
@@ -118,7 +118,7 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-[10px] text-center">
+          <el-card shadow="hover" class="mb-2.5 text-center">
            <div class="font-bold">大小配置</div>
            <ReQrcode :text="qrcodeText" :width="100" />
          </el-card>
--- a/src/views/able/ripple.vue
+++ b/src/views/able/ripple.vue
@@ -30,7 +30,7 @@ defineOptions({
      <el-button v-ripple type="warning">Warning</el-button>
      <el-button v-ripple type="danger">Danger</el-button>
    </el-space>
-    <el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
+    <el-card v-ripple class="mb-5 w-127.5 select-none" shadow="hover">
      卡片
    </el-card>

--- a/src/views/able/verify.vue
+++ b/src/views/able/verify.vue
@@ -33,7 +33,7 @@ function onFail() {
        代码位置 src/views/able/verify.vue
      </el-link>
    </template>
-    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
+    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-90">
      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
    </div>
  </el-card>
--- a/src/views/able/video-frame/index.vue
+++ b/src/views/able/video-frame/index.vue
@@ -158,14 +158,14 @@ onBeforeUnmount(() => {
        v-if="curImg"
        :src="curImg"
        :preview-src-list="Array.of(curImg)"
-        class="w-[180px] h-[180px] ml-2 rounded-[6px]"
+        class="size-45 ml-2 rounded-md"
      />
    </div>
    <div
      id="canvas-container"
      v-loading="loading"
      element-loading-text="温馨提示：可左右拖拽图片并单击选取所需的帧图片"
-      class="w-full h-[200px] overflow-hidden mt-6"
+      class="w-full h-50 overflow-hidden mt-6"
    />
  </el-card>
 </template>
--- a/src/views/able/watermark.vue
+++ b/src/views/able/watermark.vue
@@ -126,7 +126,7 @@ onBeforeUnmount(() => {
      <el-button plain @click="clear">清除整页水印</el-button>
    </el-space>

-    <div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
+    <div ref="local" class="w-1/2 h-50 border border-sky-500 mt-4" />

    <el-space wrap class="mt-6">
      <el-button
@@ -194,9 +194,6 @@ onBeforeUnmount(() => {
      <el-button plain @click="clearLocal">清除局部水印</el-button>
    </el-space>

-    <div
-      ref="preventLocal"
-      class="w-1/2 h-[200px] border border-indigo-500 mt-4"
-    />
+    <div ref="preventLocal" class="w-1/2 h-50 border border-indigo-500 mt-4" />
  </el-card>
 </template>
--- a/src/views/able/wavesurfer/index.vue
+++ b/src/views/able/wavesurfer/index.vue
@@ -103,7 +103,7 @@ onBeforeUnmount(() => {
    </template>
    <div
      v-loading="loading"
-      class="w-8/12 m-auto! mt-[20px]!"
+      class="w-8/12 m-auto! mt-5!"
      element-loading-background="transparent"
    >
      <div ref="wavesurferRef" />
@@ -112,7 +112,7 @@ onBeforeUnmount(() => {
        <h1 class="text-4xl mt-2!">{{ curTime }}</h1>
        <span class="text-[#81888f]">{{ totalTime }}</span>
      </div>
-      <div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">
+      <div v-show="totalTime" class="flex mt-2 w-45 justify-around m-auto">
        <Rewind
          v-tippy="{
            content: '快退（可长按）',
--- a/src/views/account-settings/components/AccountManagement.vue
+++ b/src/views/account-settings/components/AccountManagement.vue
@@ -37,12 +37,7 @@ function onClick(item) {
 </script>

 <template>
-  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
-  >
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
    <h3 class="my-8!">账户管理</h3>
    <div v-for="(item, index) in list" :key="index">
      <div class="flex items-center">
--- a/src/views/account-settings/components/Preferences.vue
+++ b/src/views/account-settings/components/Preferences.vue
@@ -32,12 +32,7 @@ function onChange(val, item) {
 </script>

 <template>
-  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
-  >
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
    <h3 class="my-8!">偏好设置</h3>
    <div v-for="(item, index) in list" :key="index">
      <div class="flex items-center">
--- a/src/views/account-settings/components/Profile.vue
+++ b/src/views/account-settings/components/Profile.vue
@@ -107,12 +107,7 @@ onMounted(async () => {
 </script>

 <template>
-  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
-  >
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
    <h3 class="my-8!">个人信息</h3>
    <el-form
      ref="userInfoFormRef"
--- a/src/views/account-settings/components/SecurityLog.vue
+++ b/src/views/account-settings/components/SecurityLog.vue
@@ -74,12 +74,7 @@ onMounted(() => {
 </script>

 <template>
-  <div
-    :class="[
-      'min-w-[180px]',
-      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
-    ]"
-  >
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
    <h3 class="my-8!">安全日志</h3>
    <pure-table
      row-key="id"
--- a/src/views/account-settings/index.vue
+++ b/src/views/account-settings/index.vue
@@ -73,24 +73,24 @@ onMounted(async () => {
  <el-container class="h-full">
    <el-aside
      v-if="isOpen"
-      class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r-[1px] border-[var(--pure-border-color)]"
+      class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r border-(--pure-border-color)"
      :width="deviceDetection() ? '180px' : '240px'"
    >
      <el-menu :default-active="witchPane" class="pure-account-settings-menu">
        <div
-          class="h-[50px]! text-[var(--pure-theme-menu-text)] cursor-pointer text-sm transition-all duration-300 ease-in-out hover:scale-105 will-change-transform transform-gpu origin-center hover:text-base! hover:text-[var(--pure-theme-menu-title-hover)]!"
+          class="h-12.5! text-(--pure-theme-menu-text) cursor-pointer text-sm transition-all duration-300 ease-in-out hover:scale-105 will-change-transform transform-gpu origin-center hover:text-base! hover:text-(--pure-theme-menu-title-hover)!"
          @click="router.go(-1)"
        >
          <div
-            class="h-full flex items-center px-[var(--el-menu-base-level-padding)]"
+            class="h-full flex items-center px-(--el-menu-base-level-padding)"
          >
            <IconifyIconOffline :icon="leftLine" />
            <span class="ml-2">返回</span>
          </div>
        </div>
-        <div class="flex items-center ml-8 mt-4 mb-4">
+        <div class="flex items-center ml-8 my-4">
          <el-avatar :size="48" :src="userInfo.avatar" />
-          <div class="ml-4 flex flex-col max-w-[130px]">
+          <div class="ml-4 flex flex-col max-w-32.5">
            <ReText class="font-bold self-baseline!">
              {{ userInfo.nickname }}
            </ReText>
@@ -128,7 +128,7 @@ onMounted(async () => {
      />
      <component
        :is="panes.find(item => item.key === witchPane).component"
-        :class="[!deviceDetection() && 'ml-[120px]']"
+        :class="[!deviceDetection() && 'ml-30']"
      />
    </el-main>
  </el-container>
--- a/src/views/components/animatecss.vue
+++ b/src/views/components/animatecss.vue
@@ -36,6 +36,6 @@ watch(animate, () => {
        代码位置 src/views/components/animatecss.vue
      </el-link>
    </template>
-    <ReAnimateSelector v-model="animate" class="w-[200px]!" />
+    <ReAnimateSelector v-model="animate" class="w-50!" />
  </el-card>
 </template>
--- a/src/views/components/cascader.vue
+++ b/src/views/components/cascader.vue
@@ -37,8 +37,8 @@ const handleChange = value => {
    </template>
    <el-row :gutter="24">
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
-        <div class="flex flex-col items-center justify-center">
-          <span class="text-[var(--el-color-primary)]">
+        <div class="flex-c flex-col">
+          <span class="text-(--el-color-primary)">
            1. 二级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions1"
@@ -66,8 +66,8 @@ const handleChange = value => {
        </div>
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
-        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+        <div class="flex-c flex-col mt-3">
+          <span class="text-(--el-color-primary)">
            2. 二级联动（带有“全部”选项）
            <el-cascader
              v-model="selectedOptions3"
@@ -95,8 +95,8 @@ const handleChange = value => {
        </div>
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
-        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+        <div class="flex-c flex-col mt-3">
+          <span class="text-(--el-color-primary)">
            3. 三级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions2"
@@ -126,8 +126,8 @@ const handleChange = value => {
        </div>
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
-        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="text-[var(--el-color-primary)]">
+        <div class="flex-c flex-col mt-3">
+          <span class="text-(--el-color-primary)">
            4. 三级联动（带"全部选项"）
            <el-cascader
              v-model="selectedOptions4"
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@@ -221,7 +221,7 @@ watch(size, val =>
    <div>可控制间距的按钮样式</div>
    <el-slider
      v-model="spaceSize"
-      class="mb-2 w-[300px]!"
+      class="mb-2 w-75!"
      :show-tooltip="false"
      :disabled="size === 'disabled'"
    />
--- a/src/views/components/collapse.vue
+++ b/src/views/components/collapse.vue
@@ -61,7 +61,7 @@ const handleChange = (val: string[]) => {
    <el-collapse
      ref="collapseRef"
      v-model="activeNames"
-      class="w-[360px]"
+      class="w-90"
      :accordion="radio === 'accordion' ? true : false"
      @change="handleChange"
    >
--- a/src/views/components/date-picker.vue
+++ b/src/views/components/date-picker.vue
@@ -164,7 +164,7 @@ watch(size, val =>
    <el-date-picker
      v-model="value"
      type="date"
-      class="w-[160px]!"
+      class="w-40!"
      placeholder="请选择"
      :disabled-date="disabledDate"
      :shortcuts="shortcuts"
@@ -180,7 +180,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value1"
        type="week"
-        class="w-[160px]!"
+        class="w-40!"
        format="YYYY年第ww周"
        placeholder="选择某年中的某周"
        :size="dynamicSize"
@@ -189,7 +189,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value2"
        type="month"
-        class="w-[160px]!"
+        class="w-40!"
        placeholder="选择某月"
        :size="dynamicSize"
        :disabled="size === 'disabled'"
@@ -197,7 +197,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value3"
        type="year"
-        class="w-[160px]!"
+        class="w-40!"
        placeholder="选择某年"
        :size="dynamicSize"
        :disabled="size === 'disabled'"
@@ -205,7 +205,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value4"
        type="dates"
-        class="w-[160px]!"
+        class="w-40!"
        placeholder="选择多个日期"
        :size="dynamicSize"
        :disabled="size === 'disabled'"
@@ -216,7 +216,7 @@ watch(size, val =>
    <el-date-picker
      v-model="value5"
      type="daterange"
-      class="w-[240px]!"
+      class="w-60!"
      unlink-panels
      range-separator="至"
      start-placeholder="开始时间"
@@ -261,7 +261,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value7"
        type="date"
-        class="w-[160px]!"
+        class="w-40!"
        placeholder="请选择日期"
        format="YYYY/MM/DD"
        :value-format="dateFormat"
@@ -275,7 +275,7 @@ watch(size, val =>
    <el-date-picker
      v-model="value8"
      type="date"
-      class="w-[160px]!"
+      class="w-40!"
      placeholder="请选择日期"
      :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
      :size="dynamicSize"
--- a/src/views/components/datetime-picker.vue
+++ b/src/views/components/datetime-picker.vue
@@ -190,7 +190,7 @@ watch(size, val =>
    <el-date-picker
      v-model="value"
      type="datetime"
-      class="w-[200px]!"
+      class="w-50!"
      placeholder="请选择日期时间"
      :shortcuts="shortcuts"
      :size="dynamicSize"
@@ -213,7 +213,7 @@ watch(size, val =>
      <el-date-picker
        v-model="value1"
        type="datetime"
-        class="w-[200px]!"
+        class="w-50!"
        placeholder="请选择日期时间"
        format="YYYY/MM/DD hh:mm:ss"
        :value-format="datetimeFormat"
@@ -241,7 +241,7 @@ watch(size, val =>
    <div class="mb-2 mt-4">
      弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
    </div>
-    <el-space wrap class="w-[400px]">
+    <el-space wrap class="w-100">
      <el-check-tag
        v-for="(tag, index) in checkTag"
        :key="index"
--- a/src/views/components/dialog/form.vue
+++ b/src/views/components/dialog/form.vue
@@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
    <el-form-item label="姓名">
      <el-input
        v-model="newFormInline.user"
-        class="w-[220px]!"
+        class="w-55!"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item label="城市">
      <el-select
        v-model="newFormInline.region"
-        class="w-[220px]!"
+        class="w-55!"
        placeholder="请选择城市"
      >
        <el-option label="上海" value="上海" />
--- a/src/views/components/dialog/formPrimitive.vue
+++ b/src/views/components/dialog/formPrimitive.vue
@@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
 </script>

 <template>
-  <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
+  <el-input v-model="data" class="w-55!" placeholder="请输入内容" />
 </template>
--- a/src/views/components/drawer/form.vue
+++ b/src/views/components/drawer/form.vue
@@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
    <el-form-item label="姓名">
      <el-input
        v-model="newFormInline.user"
-        class="w-[220px]!"
+        class="w-55!"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item label="城市">
      <el-select
        v-model="newFormInline.region"
-        class="w-[220px]!"
+        class="w-55!"
        placeholder="请选择城市"
      >
        <el-option label="上海" value="上海" />
--- a/src/views/components/drawer/formPrimitive.vue
+++ b/src/views/components/drawer/formPrimitive.vue
@@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
 </script>

 <template>
-  <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
+  <el-input v-model="data" class="w-55!" placeholder="请输入内容" />
 </template>
--- a/src/views/components/icon-select.vue
+++ b/src/views/components/icon-select.vue
@@ -23,6 +23,6 @@ const icon = ref("ep:add-location");
        代码位置 src/views/components/icon-select.vue
      </el-link>
    </template>
-    <IconSelect v-model="icon" class="w-[200px]" />
+    <IconSelect v-model="icon" class="w-50" />
  </el-card>
 </template>
--- a/src/views/components/slider/components/Size.vue
+++ b/src/views/components/slider/components/Size.vue
@@ -5,7 +5,7 @@ const value = ref(0);
 </script>

 <template>
-  <div class="max-w-[600px] ml-4">
+  <div class="max-w-150 ml-4">
    <el-slider v-model="value" show-input size="large" />
    <el-slider v-model="value" show-input />
    <el-slider v-model="value" show-input size="small" />
--- a/src/views/components/swiper.vue
+++ b/src/views/components/swiper.vue
@@ -106,11 +106,11 @@ const swiperExample: any[] = [
    </template>
    <el-row :gutter="10">
      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
-        <h6 class="py-[16px]! text-base">{{ item.label }}</h6>
+        <h6 class="py-4! text-base">{{ item.label }}</h6>
        <swiper v-bind="item.options">
          <swiper-slide v-for="i in 5" :key="i">
            <div
-              class="flex justify-center items-center h-[240px] border border-[#999]"
+              class="flex justify-center items-center h-60 border border-[#999]"
            >
              Slide{{ i }}
            </div>
--- a/src/views/components/time-picker.vue
+++ b/src/views/components/time-picker.vue
@@ -91,7 +91,7 @@ const endTime = ref("");
        <el-time-picker
          v-model="value"
          placeholder="请选择时间"
-          class="w-[140px]!"
+          class="w-35!"
          :size="dynamicSize"
          :disabled="size === 'disabled'"
        />
@@ -100,7 +100,7 @@ const endTime = ref("");
          v-model="value1"
          arrow-control
          placeholder="请选择时间"
-          class="w-[140px]!"
+          class="w-35!"
          :size="dynamicSize"
          :disabled="size === 'disabled'"
        />
@@ -110,7 +110,7 @@ const endTime = ref("");
      <div class="mb-2">限制时间选择范围</div>
      <el-time-picker
        v-model="value2"
-        class="w-[140px]!"
+        class="w-35!"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
@@ -123,7 +123,7 @@ const endTime = ref("");
      <div class="mb-2">任意时间范围</div>
      <el-time-picker
        v-model="value3"
-        class="w-[220px]!"
+        class="w-55!"
        is-range
        range-separator="至"
        start-placeholder="开始时间"
@@ -153,7 +153,7 @@ const endTime = ref("");
      <el-time-select
        v-model="value4"
        placeholder="请选择时间"
-        class="w-[140px]!"
+        class="w-35!"
        start="08:30"
        step="00:15"
        end="18:30"
@@ -165,7 +165,7 @@ const endTime = ref("");
      <el-time-select
        v-model="value5"
        placeholder="请选择时间"
-        class="w-[140px]!"
+        class="w-35!"
        start="00:00"
        step="00:30"
        end="23:59"
@@ -179,7 +179,7 @@ const endTime = ref("");
        <el-time-select
          v-model="startTime"
          placeholder="开始时间"
-          class="w-[140px]!"
+          class="w-35!"
          :max-time="endTime"
          start="08:30"
          step="00:15"
@@ -190,7 +190,7 @@ const endTime = ref("");
        <el-time-select
          v-model="endTime"
          placeholder="结束时间"
-          class="w-[140px]!"
+          class="w-35!"
          :min-time="startTime"
          start="08:30"
          step="00:15"
--- a/src/views/components/upload/form.vue
+++ b/src/views/components/upload/form.vue
@@ -58,7 +58,7 @@ const resetForm = formEl => {
        drag
        multiple
        action="#"
-        class="w-[200px]!"
+        class="w-50!"
        :auto-upload="false"
      >
        <div class="el-upload__text">
@@ -75,7 +75,7 @@ const resetForm = formEl => {
      <el-date-picker
        v-model="validateForm.date"
        type="datetime"
-        class="w-[200px]!"
+        class="w-50!"
        placeholder="请选择日期时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
--- a/src/views/components/upload/index.vue
+++ b/src/views/components/upload/index.vue
@@ -190,7 +190,7 @@ const onDownload = () => {
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
-              <span title="移除" class="hover:text-[var(--el-color-danger)]">
+              <span title="移除" class="hover:text-(--el-color-danger)">
                <IconifyIconOffline
                  :icon="Delete"
                  class="hover:scale-125 duration-100"
@@ -222,7 +222,7 @@ const onDownload = () => {
        type="info"
        class="img-name"
      >
-        <p class="text-[#fff] dark:text-black">
+        <p class="text-white dark:text-black">
          {{ fileList[curOpenImgIndex].name }}
        </p>
      </div>
@@ -243,7 +243,7 @@ const onDownload = () => {
      <div>
        <p class="text-center">上传接口相关截图</p>
        <el-image
-          class="w-[200px] rounded-md"
+          class="w-50 rounded-md"
          :src="srcList[0]"
          :preview-src-list="srcList"
          fit="cover"
--- a/src/views/components/virtual-list/index.vue
+++ b/src/views/components/virtual-list/index.vue
@@ -29,8 +29,8 @@ defineOptions({
      </el-link>
    </template>
    <div class="w-full flex justify-around flex-wrap">
-      <vertical-list class="h-[500px] w-[500px]" />
-      <horizontal-list class="h-[500px] w-[500px]" />
+      <vertical-list class="size-125" />
+      <horizontal-list class="size-125" />
    </div>
  </el-card>
 </template>
--- a/src/views/components/virtual-list/vertical.vue
+++ b/src/views/components/virtual-list/vertical.vue
@@ -24,7 +24,7 @@ const filteredItems = computed(() => {
      垂直模式 vertical
      <el-input
        v-model="search"
-        class="w-[350px]!"
+        class="w-87.5!"
        clearable
        placeholder="Filter..."
      />
--- a/src/views/empty/index.vue
+++ b/src/views/empty/index.vue
@@ -14,7 +14,7 @@ const router = useRouter();
    <h1>业务内容模块</h1>
    <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
    <div class="back" title="返回上一页" @click="router.go(-1)">
-      <back class="w-[80px] h-[80px]" />
+      <back class="size-20" />
    </div>
  </div>
 </template>
--- a/src/views/login/components/LoginQrCode.vue
+++ b/src/views/login/components/LoginQrCode.vue
@@ -8,7 +8,7 @@ const { t } = useI18n();
 </script>

 <template>
-  <Motion class="-mt-2 -mb-2">
+  <Motion class="-my-2">
    <ReQrcode :text="t('login.pureTest')" />
  </Motion>
  <Motion :delay="100">
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -133,7 +133,7 @@ watch(loginDay, value => {
      <!-- 国际化 -->
      <el-dropdown trigger="click">
        <globalization
-          class="hover:text-primary hover:bg-[transparent]! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
+          class="hover:text-primary hover:bg-transparent! size-5 ml-1.5 cursor-pointer outline-hidden duration-300"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
@@ -234,7 +234,7 @@ watch(loginDay, value => {

            <Motion :delay="250">
              <el-form-item>
-                <div class="w-full h-[20px] flex justify-between items-center">
+                <div class="w-full h-5 flex-bc">
                  <el-checkbox v-model="checked">
                    <span class="flex">
                      <select
@@ -285,7 +285,7 @@ watch(loginDay, value => {

            <Motion :delay="300">
              <el-form-item>
-                <div class="w-full h-[20px] flex justify-between items-center">
+                <div class="w-full h-5 flex-bc">
                  <el-button
                    v-for="(item, index) in operates"
                    :key="index"
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -39,14 +39,14 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          clearable
-          class="w-[150px]!"
+          class="w-37.5!"
        />
      </el-form-item>
      <el-form-item label="登录状态" prop="status">
@@ -54,7 +54,7 @@ const {
          v-model="form.status"
          placeholder="请选择"
          clearable
-          class="w-[150px]!"
+          class="w-37.5!"
        >
          <el-option label="成功" value="1" />
          <el-option label="失败" value="0" />
@@ -103,7 +103,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -39,14 +39,14 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="所属模块" prop="module">
        <el-input
          v-model="form.module"
          placeholder="请输入所属模块"
          clearable
-          class="w-[170px]!"
+          class="w-42.5!"
        />
      </el-form-item>
      <el-form-item label="操作状态" prop="status">
@@ -54,7 +54,7 @@ const {
          v-model="form.status"
          placeholder="请选择"
          clearable
-          class="w-[150px]!"
+          class="w-37.5!"
        >
          <el-option label="成功" value="1" />
          <el-option label="失败" value="0" />
@@ -103,7 +103,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -42,14 +42,14 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="所属模块" prop="module">
        <el-input
          v-model="form.module"
          placeholder="请输入所属模块"
          clearable
-          class="w-[170px]!"
+          class="w-42.5!"
        />
      </el-form-item>
      <el-form-item label="请求时间" prop="requestTime">
@@ -95,7 +95,7 @@ const {
        <div
          v-if="selectedNum > 0"
          v-motion-fade
-          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -33,14 +33,14 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        />
      </el-form-item>
      <el-form-item>
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -62,7 +62,7 @@ function onChange() {
          代码位置 src/views/permission/page/index.vue
        </el-link>
      </template>
-      <el-select v-model="username" class="w-[160px]!" @change="onChange">
+      <el-select v-model="username" class="w-40!" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
--- a/src/views/schema-form/form/base.vue
+++ b/src/views/schema-form/form/base.vue
@@ -149,7 +149,7 @@ const handleReset = () => {
 <template>
  <PlusForm
    v-model="state"
-    class="w-[450px] m-auto"
+    class="w-112.5 m-auto"
    :columns="columns"
    :rules="rules"
    label-position="right"
--- a/src/views/schema-form/form/steps.vue
+++ b/src/views/schema-form/form/steps.vue
@@ -196,7 +196,7 @@ const next = (actives: number, values: any) => {
  <PlusStepsForm
    v-model="active"
    simple
-    class="w-[800px] m-auto"
+    class="w-200 m-auto"
    :data="stepForm as any"
    align-center
    @next="next"
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -39,14 +39,14 @@ function onFullscreen() {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="部门名称：" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入部门名称"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
@@ -54,7 +54,7 @@ function onFullscreen() {
          v-model="form.status"
          placeholder="请选择状态"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        >
          <el-option label="启用" :value="1" />
          <el-option label="停用" :value="0" />
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -40,14 +40,14 @@ function onFullscreen() {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="菜单名称：" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入菜单名称"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        />
      </el-form-item>
      <el-form-item>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -26,13 +26,10 @@ defineOptions({

 const iconClass = computed(() => {
  return [
-    "w-[22px]",
-    "h-[22px]",
-    "flex",
-    "justify-center",
-    "items-center",
+    "size-5.5",
+    "flex-c",
    "outline-hidden",
-    "rounded-[4px]",
+    "rounded-sm",
    "cursor-pointer",
    "transition-colors",
    "hover:bg-[#0000000f]",
@@ -96,14 +93,14 @@ onMounted(() => {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入角色名称"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        />
      </el-form-item>
      <el-form-item label="角色标识：" prop="code">
@@ -111,7 +108,7 @@ onMounted(() => {
          v-model="form.code"
          placeholder="请输入角色标识"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
@@ -119,7 +116,7 @@ onMounted(() => {
          v-model="form.status"
          placeholder="请选择状态"
          clearable
-          class="w-[180px]!"
+          class="w-45!"
        >
          <el-option label="已启用" value="1" />
          <el-option label="已停用" value="0" />
--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@@ -94,7 +94,7 @@ export function useRole(treeRef: Ref) {
  ];
  // const buttonClass = computed(() => {
  //   return [
-  //     "h-[20px]!",
+  //     "h-5!",
  //     "reset-margin",
  //     "text-gray-500!",
  //     "dark:text-white!",
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -54,7 +54,7 @@ const {
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <tree
      ref="treeRef"
-      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
+      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-50']"
      :treeData="treeData"
      :treeLoading="treeLoading"
      @tree-select="onTreeSelect"
@@ -66,14 +66,14 @@ const {
        ref="formRef"
        :inline="true"
        :model="form"
-        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+        class="search-form bg-bg_color w-full pl-8 pt-3 overflow-auto"
      >
        <el-form-item label="用户名称：" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名称"
            clearable
-            class="w-[180px]!"
+            class="w-45!"
          />
        </el-form-item>
        <el-form-item label="手机号码：" prop="phone">
@@ -81,7 +81,7 @@ const {
            v-model="form.phone"
            placeholder="请输入手机号码"
            clearable
-            class="w-[180px]!"
+            class="w-45!"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
@@ -89,7 +89,7 @@ const {
            v-model="form.status"
            placeholder="请选择"
            clearable
-            class="w-[180px]!"
+            class="w-45!"
          >
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
@@ -128,7 +128,7 @@ const {
          <div
            v-if="selectedNum > 0"
            v-motion-fade
-            class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+            class="bg-(--el-fill-color-light) w-full h-11.5 mb-2 pl-4 flex items-center"
          >
            <div class="flex-auto">
              <span
@@ -198,7 +198,7 @@ const {
              </el-popconfirm>
              <el-dropdown>
                <el-button
-                  class="ml-3! mt-[2px]!"
+                  class="ml-3! mt-0.5!"
                  link
                  type="primary"
                  :size="size"
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -35,7 +35,7 @@ const defaultProps = {
 };
 const buttonClass = computed(() => {
  return [
-    "h-[20px]!",
+    "h-5!",
    "text-sm!",
    "reset-margin",
    "text-(--el-text-color-regular)!",
@@ -99,7 +99,7 @@ defineExpose({ onTreeReset });
    class="h-full bg-bg_color overflow-hidden relative"
    :style="{ minHeight: `calc(100vh - 141px)` }"
  >
-    <div class="flex items-center h-[34px]">
+    <div class="flex items-center h-8.5">
      <el-input
        v-model="searchValue"
        class="ml-2"
@@ -117,7 +117,7 @@ defineExpose({ onTreeReset });
        </template>
      </el-input>
      <el-dropdown :hide-on-click="false">
-        <More2Fill class="w-[28px] cursor-pointer outline-hidden" />
+        <More2Fill class="w-7 cursor-pointer outline-hidden" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
@@ -190,7 +190,7 @@ defineExpose({ onTreeReset });
                    : Dept
              "
            />
-            <span class="w-[120px]! truncate!" :title="node.label">
+            <span class="w-30! truncate!" :title="node.label">
              {{ node.label }}
            </span>
          </div>
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@@ -88,7 +88,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
          preview-teleported={true}
          src={row.avatar || userAvatar}
          preview-src-list={Array.of(row.avatar || userAvatar)}
-          class="w-[24px] h-[24px] rounded-full align-middle"
+          class="size-6 rounded-full align-middle"
        />
      ),
      width: 90
@@ -163,7 +163,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
  ];
  const buttonClass = computed(() => {
    return [
-      "h-[20px]!",
+      "h-5!",
      "reset-margin",
      "text-gray-500!",
      "dark:text-white!",
--- a/src/views/table/base/imgPreview.vue
+++ b/src/views/table/base/imgPreview.vue
@@ -49,7 +49,7 @@ const columns: TableColumnList = [
        :preview-src-list="tableDataImage.map(v => v.image)"
        :initial-index="index"
        fit="cover"
-        class="w-[100px] h-[100px]"
+        class="size-25"
      />
    </template>
  </pure-table>
--- a/src/views/table/edit/demo1/index.vue
+++ b/src/views/table/edit/demo1/index.vue
@@ -12,7 +12,7 @@ const { columns, dataList, onAdd, onDel } = useColumns();
  <div class="flex">
    <el-scrollbar height="540px">
      <code>
-        <pre class="w-[400px]"> {{ dataList }}</pre>
+        <pre class="w-100"> {{ dataList }}</pre>
      </code>
    </el-scrollbar>
    <pure-table
--- a/src/views/table/edit/demo2/index.vue
+++ b/src/views/table/edit/demo2/index.vue
@@ -8,7 +8,7 @@ const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
  <div class="flex">
    <el-scrollbar>
      <code>
-        <pre class="w-[400px]"> {{ dataList }}</pre>
+        <pre class="w-100"> {{ dataList }}</pre>
      </code>
    </el-scrollbar>
    <pure-table
--- a/src/views/table/edit/demo3/columns.tsx
+++ b/src/views/table/edit/demo3/columns.tsx
@@ -35,7 +35,7 @@ export function useColumns() {
      prop: "name",
      cellRenderer: ({ row, index }) => (
        <div
-          class="flex-bc w-full h-[32px]"
+          class="flex-bc w-full h-8"
          onMouseenter={() => (activeIndex.value = index)}
          onMouseleave={() => onMouseleave(index)}
        >
--- a/src/views/table/edit/demo3/index.vue
+++ b/src/views/table/edit/demo3/index.vue
@@ -8,7 +8,7 @@ const { columns, dataList } = useColumns();
  <div class="flex">
    <el-scrollbar>
      <code>
-        <pre class="w-[400px]"> {{ dataList }}</pre>
+        <pre class="w-100"> {{ dataList }}</pre>
      </code>
    </el-scrollbar>
    <pure-table
--- a/src/views/table/high/drag/column/index.vue
+++ b/src/views/table/high/drag/column/index.vue
@@ -8,7 +8,7 @@ const { columns, dataList, columnsDrag } = useColumns();
  <div class="flex">
    <el-scrollbar height="700px">
      <code>
-        <pre class="w-[700px]"> {{ columnsDrag }}</pre>
+        <pre class="w-175"> {{ columnsDrag }}</pre>
      </code>
    </el-scrollbar>
    <pure-table row-key="id" :data="dataList" :columns="columns" />
--- a/src/views/table/high/drag/row/columns.tsx
+++ b/src/views/table/high/drag/row/columns.tsx
@@ -49,7 +49,7 @@ export function useColumns() {
              rowDrop(event)
            }
          />
-          <p class="ml-[16px]">{row.id}</p>
+          <p class="ml-4">{row.id}</p>
        </div>
      )
    },
--- a/src/views/table/high/drag/row/index.vue
+++ b/src/views/table/high/drag/row/index.vue
@@ -8,7 +8,7 @@ const { columns, dataList } = useColumns();
  <div class="flex">
    <el-scrollbar height="700px">
      <code>
-        <pre class="w-[700px]"> {{ dataList }}</pre>
+        <pre class="w-175"> {{ dataList }}</pre>
      </code>
    </el-scrollbar>
    <pure-table row-key="id" :data="dataList" :columns="columns" />
--- a/src/views/table/high/echarts/index.vue
+++ b/src/views/table/high/echarts/index.vue
@@ -7,7 +7,7 @@ const { columns, dataList } = useColumns();
 <template>
  <pure-table row-key="id" border :data="dataList" :columns="columns">
    <template #echart="{ index }">
-      <div :ref="'PieChartRef' + index" class="w-full h-[100px]" />
+      <div :ref="'PieChartRef' + index" class="w-full h-25" />
    </template>
  </pure-table>
 </template>
--- a/src/views/table/high/excel/index.vue
+++ b/src/views/table/high/excel/index.vue
@@ -6,7 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();

 <template>
  <div>
-    <el-button type="primary" class="mb-[20px]!" @click="exportExcel">
+    <el-button type="primary" class="mb-5!" @click="exportExcel">
      导出
    </el-button>
    <pure-table row-key="id" border :data="dataList" :columns="columns" />
--- a/src/views/table/high/header/index.vue
+++ b/src/views/table/high/header/index.vue
@@ -9,7 +9,7 @@ const { columns, dataList, onChange } = useColumns();

 <template>
  <div>
-    <el-button type="primary" class="mb-[20px]!" @click="onChange">
+    <el-button type="primary" class="mb-5!" @click="onChange">
      切换表头
    </el-button>
    <pure-table
--- a/src/views/table/high/prints/index.vue
+++ b/src/views/table/high/prints/index.vue
@@ -9,9 +9,7 @@ const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =

 <template>
  <div>
-    <el-button type="primary" class="mb-[20px]!" @click="print">
-      打印
-    </el-button>
+    <el-button type="primary" class="mb-5!" @click="print"> 打印 </el-button>
    <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->
    <pure-table
      ref="printRef"
--- a/src/views/table/high/table-select/multiple/index.vue
+++ b/src/views/table/high/table-select/multiple/index.vue
@@ -25,7 +25,7 @@ const {
  <el-select
    ref="selectRef"
    v-model="selectValue"
-    class="w-[200px]!"
+    class="w-50!"
    placeholder="请选择"
    clearable
    multiple
@@ -41,7 +41,7 @@ const {
          <el-form-item prop="sexValue">
            <el-select
              v-model="searchForm.sexValue"
-              class="w-[120px]!"
+              class="w-30!"
              placeholder="请选择性别"
              :teleported="false"
              clearable
@@ -57,7 +57,7 @@ const {
          <el-form-item prop="searchDate">
            <el-date-picker
              v-model="searchForm.searchDate"
-              class="w-[150px]!"
+              class="w-37.5!"
              type="date"
              placeholder="请选择日期"
              format="YYYY/MM/DD"
@@ -91,7 +91,7 @@ const {
          @selection-change="handleSelectionChange"
        />
        <el-button
-          class="absolute bottom-[25px] left-[20px]"
+          class="absolute bottom-6.25 left-5"
          type="primary"
          size="small"
          text
--- a/src/views/table/high/table-select/radio/index.vue
+++ b/src/views/table/high/table-select/radio/index.vue
@@ -17,7 +17,7 @@ const {
  <el-select
    ref="selectRef"
    v-model="selectValue"
-    class="w-[200px]!"
+    class="w-50!"
    placeholder="请选择"
    value-key="id"
    clearable
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -93,7 +93,7 @@ function onCloseTags() {
    <el-divider />
    <el-tree-select
      v-model="currentValues"
-      class="w-[300px]!"
+      class="w-75!"
      node-key="uniqueId"
      placeholder="请选择要关闭的标签"
      clearable
--- a/src/views/welcome/components/table/columns.tsx
+++ b/src/views/welcome/components/table/columns.tsx
@@ -48,7 +48,7 @@ export function useColumns() {
      prop: "satisfaction",
      cellRenderer: ({ row }) => (
        <div class="flex justify-center w-full">
-          <span class="flex items-center w-[60px]">
+          <span class="flex items-center w-15">
            <span class="ml-auto mr-2">{row.satisfaction}%</span>
            <iconifyIconOffline
              icon={row.satisfaction > 98 ? Hearts : ThumbUp}
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -33,7 +33,7 @@ const optionsBasis: Array<OptionsType> = [
        v-for="(item, index) in chartData"
        :key="index"
        v-motion
-        class="mb-[18px]"
+        class="mb-4.5"
        :value="6"
        :md="12"
        :sm="12"
@@ -92,7 +92,7 @@ const optionsBasis: Array<OptionsType> = [

      <re-col
        v-motion
-        class="mb-[18px]"
+        class="mb-4.5"
        :value="18"
        :xs="24"
        :initial="{
@@ -123,7 +123,7 @@ const optionsBasis: Array<OptionsType> = [

      <re-col
        v-motion
-        class="mb-[18px]"
+        class="mb-4.5"
        :value="6"
        :xs="24"
        :initial="{
@@ -170,7 +170,7 @@ const optionsBasis: Array<OptionsType> = [

      <re-col
        v-motion
-        class="mb-[18px]"
+        class="mb-4.5"
        :value="18"
        :xs="24"
        :initial="{
@@ -185,7 +185,7 @@ const optionsBasis: Array<OptionsType> = [
          }
        }"
      >
-        <el-card shadow="never" class="h-[580px]">
+        <el-card shadow="never" class="h-145">
          <div class="flex justify-between">
            <span class="text-md font-medium">数据统计</span>
          </div>
@@ -195,7 +195,7 @@ const optionsBasis: Array<OptionsType> = [

      <re-col
        v-motion
-        class="mb-[18px]"
+        class="mb-4.5"
        :value="6"
        :xs="24"
        :initial="{
Author	SHA1	Message	Date
xiaoxian521	8d2e121eef	Merge branch 'main' into perf/tailwindcss-class	2026-01-17 06:30:19 +08:00
xiaoxian521	82ecbb8ab4	Merge branch 'main' into perf/tailwindcss-class	2026-01-16 11:36:01 +08:00
xiaoxian521	8119144205	Merge branch 'main' into perf/tailwindcss-class	2026-01-16 09:59:20 +08:00
xiaoxian521	add85a8a56	chore: update	2026-01-16 09:31:24 +08:00
xiaoxian521	debe617664	chore: update	2026-01-15 12:58:46 +08:00
xiaoxian521	9f707170e8	chore: update	2026-01-15 12:33:39 +08:00
xiaoxian521	ee4ec7d944	chore: update	2026-01-14 15:35:11 +08:00
xiaoxian521	18ae47a569	chore: update	2026-01-14 07:06:24 +08:00
xiaoxian521	bc1469d330	Merge branch 'main' into perf/tailwindcss-class	2026-01-13 15:22:38 +08:00
xiaoxian521	4c805b3668	chore: update	2026-01-13 14:37:38 +08:00
xiaoxian521	b7a9cb0755	Merge branch 'main' into perf/tailwindcss-class	2026-01-07 11:09:43 +08:00
xiaoxian521	97bd47efca	chore: add `better-tailwindcss/enforce-canonical-classes`	2025-12-09 09:59:08 +08:00
xiaoxian521	d794c7965c	perf: 根据`tailwindcss`推荐优化类名	2025-12-08 15:44:00 +08:00