chore: update

eslint.config.js

@@ -185,7 +185,8 @@ export default defineConfig([
     },
     settings: {
       "better-tailwindcss": {
-        entryPoint: "src/style/tailwind.css"
+        entryPoint: "src/style/tailwind.css",
+        rootFontSize: 16
       }
     }
   }

package.json

@@ -141,7 +141,7 @@
     "dagre": "^0.8.5",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-better-tailwindcss": "4.0.0-rc.0",
+    "eslint-plugin-better-tailwindcss": "^4.0.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^10.6.2",
     "gradient-string": "^3.0.0",

pnpm-lock.yaml

@@ -76,7 +76,7 @@ importers:
         version: 1.11.19
       deep-chat:
         specifier: ^2.3.0
-        version: 2.4.0
+        version: 2.4.1
       echarts:
         specifier: ^6.0.0
         version: 6.0.0
@@ -97,7 +97,7 @@ importers:
         version: 3.0.5
       jsbarcode:
         specifier: ^3.12.1
-        version: 3.12.1
+        version: 3.12.3
       localforage:
         specifier: ^1.10.0
         version: 1.10.0
@@ -230,7 +230,7 @@ importers:
         version: 11.0.3(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(rollup@4.55.1)(typescript@5.9.3)(vue-i18n@11.2.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
       '@tailwindcss/vite':
         specifier: ^4.1.18
-        version: 4.1.18(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
+        version: 4.1.18(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
       '@types/codemirror':
         specifier: ^5.60.17
         version: 5.60.17
@@ -263,10 +263,10 @@ importers:
         version: 1.15.9
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 6.0.3(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: ^5.1.2
-        version: 5.1.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 5.1.3(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       boxen:
         specifier: ^8.0.1
         version: 8.0.1
@@ -286,8 +286,8 @@ importers:
         specifier: ^10.1.8
         version: 10.1.8(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-better-tailwindcss:
-        specifier: 4.0.0-rc.0
+        specifier: ^4.0.0
-        version: 4.0.0-rc.0(eslint@9.39.2(jiti@2.6.1))(tailwindcss@4.1.18)(typescript@5.9.3)
+        version: 4.0.0(eslint@9.39.2(jiti@2.6.1))(tailwindcss@4.1.18)(typescript@5.9.3)
       eslint-plugin-prettier:
         specifier: ^5.5.4
         version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4)
@@ -359,13 +359,13 @@ importers:
         version: 22.5.0(@vue/compiler-sfc@3.5.26)
       vite:
         specifier: ^7.3.0
-        version: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+        version: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
       vite-plugin-cdn-import:
         specifier: ^1.0.1
-        version: 1.0.1(rollup@4.55.1)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
+        version: 1.0.1(rollup@4.55.1)(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
+        version: 0.5.1(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
       vite-plugin-fake-server:
         specifier: ^2.2.2
         version: 2.2.2
@@ -695,8 +695,8 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.22':
+  '@csstools/css-syntax-patches-for-csstree@1.0.23':
-    resolution: {integrity: sha512-qBcx6zYlhleiFfdtzkRgwNC7VVoAwfK76Vmsw5t+PbvtdknO9StgRk7ROvq9so1iqbdW4uLIDAsXRsTfUrIoOw==}
+    resolution: {integrity: sha512-YEmgyklR6l/oKUltidNVYdjSmLSW88vMsKx0pmiS3r71s8ZZRpd8A0Yf0U+6p/RzElmMnPBv27hNWjDQMSZRtQ==}
     engines: {node: '>=18'}
 
   '@csstools/css-tokenizer@3.0.4':
@@ -1655,8 +1655,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.53':
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
 
-  '@rolldown/pluginutils@1.0.0-beta.58':
+  '@rolldown/pluginutils@1.0.0-beta.59':
-    resolution: {integrity: sha512-qWhDs6yFGR5xDfdrwiSa3CWGIHxD597uGE/A9xGqytBjANvh4rLCTTkq7szhMV4+Ygh+PMS90KVJ8xWG/TkX4w==}
+    resolution: {integrity: sha512-aoh6LAJRyhtazs98ydgpNOYstxUlsOV1KJXcpf/0c0vFcUA8uyd/hwKRhqE/AAPNqAho9RliGsvitCoOzREoVA==}
 
   '@rollup/pluginutils@5.3.0':
     resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
@@ -2489,8 +2489,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.9.11:
+  baseline-browser-mapping@2.9.12:
-    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+    resolution: {integrity: sha512-Mij6Lij93pTAIsSYy5cyBQ975Qh9uLEc5rwGTpomiZeXZL9yIS6uORJakb3ScHgfs0serMMfIbXzokPMuEiRyw==}
     hasBin: true
 
   birpc@2.9.0:
@@ -2921,8 +2921,8 @@ packages:
   dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
-  deep-chat@2.4.0:
+  deep-chat@2.4.1:
-    resolution: {integrity: sha512-854quInHyBwolf+opE5XU/KLD5R965U5W3sBQR7YbtTxHGZLFZ8gFcMfvS0h6AcZ/1lXpVf5c+6Nbs454EvYKQ==}
+    resolution: {integrity: sha512-Se0ZSIrXQbgD1DblbXtbUeEgbCi+TTMOQXGAMyURy6F9AGxPlDsa5dfkqSaY7F8OkO8d5H2w1RHDarfuKw4w+g==}
 
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -3142,8 +3142,8 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-better-tailwindcss@4.0.0-rc.0:
+  eslint-plugin-better-tailwindcss@4.0.0:
-    resolution: {integrity: sha512-GhVpJvjDt5PpIe3ryyj/ahSVeMfYyd+oRExorluBL/1AYPwL2l0yiKKTIvdqyl2VXFDxD/v3NKMRBZvHkeySFA==}
+    resolution: {integrity: sha512-+WATD4w/3W7NCo2Fg2cizq0Z1hEGpRth3e0NQ2B9sDKcjzoQi/8nmPVHK4rD2cizkqaTQStBgu8DRefrUIvjzw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -3868,8 +3868,8 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsbarcode@3.12.1:
+  jsbarcode@3.12.3:
-    resolution: {integrity: sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==}
+    resolution: {integrity: sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==}
 
   jsdom@16.7.0:
     resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
@@ -5498,8 +5498,8 @@ packages:
     peerDependencies:
       vue: '>=3.2.13'
 
-  vite@7.3.0:
+  vite@7.3.1:
-    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -6257,7 +6257,7 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.22': {}
+  '@csstools/css-syntax-patches-for-csstree@1.0.23': {}
 
   '@csstools/css-tokenizer@3.0.4': {}
 
@@ -7062,7 +7062,7 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.53': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.58': {}
+  '@rolldown/pluginutils@1.0.0-beta.59': {}
 
   '@rollup/pluginutils@5.3.0(rollup@4.55.1)':
     dependencies:
@@ -7218,12 +7218,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/vite@4.1.18(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))':
+  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))':
     dependencies:
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
       tailwindcss: 4.1.18
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
 
   '@tootallnate/once@1.1.2': {}
 
@@ -7458,22 +7458,22 @@ snapshots:
     dependencies:
       valibot: 1.2.0(typescript@5.9.3)
 
-  '@vitejs/plugin-vue-jsx@5.1.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.3(vite@7.3.1(@types/node@20.19.27)(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.5
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
       '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
-      '@rolldown/pluginutils': 1.0.0-beta.58
+      '@rolldown/pluginutils': 1.0.0-beta.59
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.3(vite@7.3.1(@types/node@20.19.27)(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:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   '@volar/language-core@2.4.27':
@@ -7976,7 +7976,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.9.11: {}
+  baseline-browser-mapping@2.9.12: {}
 
   birpc@2.9.0: {}
 
@@ -8016,7 +8016,7 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.11
+      baseline-browser-mapping: 2.9.12
       caniuse-lite: 1.0.30001762
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
@@ -8443,7 +8443,7 @@ snapshots:
 
   dedent@0.7.0: {}
 
-  deep-chat@2.4.0:
+  deep-chat@2.4.1:
     dependencies:
       '@microsoft/fetch-event-source': 2.0.1
       remarkable: 2.0.1
@@ -8738,7 +8738,7 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-better-tailwindcss@4.0.0-rc.0(eslint@9.39.2(jiti@2.6.1))(tailwindcss@4.1.18)(typescript@5.9.3):
+  eslint-plugin-better-tailwindcss@4.0.0(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))
@@ -9700,7 +9700,7 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsbarcode@3.12.1: {}
+  jsbarcode@3.12.3: {}
 
   jsdom@16.7.0:
     dependencies:
@@ -10950,7 +10950,7 @@ snapshots:
   stylelint@16.26.1(typescript@5.9.3):
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-syntax-patches-for-csstree': 1.0.22
+      '@csstools/css-syntax-patches-for-csstree': 1.0.23
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
@@ -11262,30 +11262,30 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
-  vite-plugin-cdn-import@1.0.1(rollup@4.55.1)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
+  vite-plugin-cdn-import@1.0.1(rollup@4.55.1)(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
     dependencies:
       rollup-plugin-external-globals: 0.10.0(rollup@4.55.1)
-      vite-plugin-externals: 0.6.2(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
+      vite-plugin-externals: 0.6.2(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2))
     transitivePeerDependencies:
       - rollup
       - vite
 
-  vite-plugin-compression@0.5.1(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
+  vite-plugin-compression@0.5.1(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
     dependencies:
       chalk: 4.1.2
       debug: 4.4.3
       fs-extra: 10.1.0
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-externals@0.6.2(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
+  vite-plugin-externals@0.6.2(vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)):
     dependencies:
       acorn: 8.15.0
       es-module-lexer: 0.4.1
       fs-extra: 10.1.0
       magic-string: 0.25.9
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2)
 
   vite-plugin-fake-server@2.2.2:
     dependencies:
@@ -11304,7 +11304,7 @@ snapshots:
       svgo: 3.3.2
       vue: 3.5.26(typescript@5.9.3)
 
-  vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2):
+  vite@7.3.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.2)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)

src/components/ReAnimateSelector/src/index.vue

@@ -88,7 +88,7 @@ function onMouseleave() {
     @clear="onClear"
   >
     <template #empty>
-      <div class="w-[280px]">
+      <div class="w-70">
         <el-scrollbar
           noresize
           height="212px"

src/components/ReCropper/src/index.tsx

@@ -252,7 +252,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}

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"

src/components/ReDialog/index.vue

@@ -123,10 +123,7 @@ function handleClose(
       v-if="options?.fullscreenIcon || options?.headerRenderer"
       #header="{ close, titleId, titleClass }"
     >
-      <div
+      <div v-if="options?.fullscreenIcon" class="flex-bc">
-        v-if="options?.fullscreenIcon"
-        class="flex items-center justify-between"
-      >
         <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
         <i
           v-if="!options?.fullscreen"

src/components/ReIcon/src/Select.vue

@@ -135,9 +135,7 @@ watch(
           @after-leave="onAfterLeave"
         >
           <template #reference>
-            <div
+            <div class="w-10 h-8 cursor-pointer flex-c">
-              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
-            >
               <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)"
                   >

src/components/RePureTableBar/src/bar.tsx

@@ -244,7 +244,7 @@ export default defineComponent({
     const reference = {
       reference: () => (
         <SettingIcon
-          class={["w-[16px]", iconClass.value]}
+          class={["w-4", iconClass.value]}
           v-tippy={rendTippyProps("列设置")}
         />
       )
@@ -264,20 +264,20 @@ export default defineComponent({
               : "mt-2"
           ]}
         >
-          <div class="flex justify-between w-full h-[60px] p-4">
+          <div class="flex justify-between w-full mt-4 h-15 p-4">
             {slots?.title ? (
               slots.title()
             ) : (
               <p class="font-bold truncate">{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)"
                     }}
@@ -291,7 +291,7 @@ export default defineComponent({
               ) : null}
               <RefreshIcon
                 class={[
-                  "w-[16px]",
+                  "w-4",
                   iconClass.value,
                   loading.value ? "animate-spin" : ""
                 ]}
@@ -304,7 +304,7 @@ export default defineComponent({
                 trigger="click"
                 v-tippy={rendTippyProps("密度")}
               >
-                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+                <CollapseIcon class={["w-4", iconClass.value]} />
               </el-dropdown>
               <el-divider direction="vertical" />
 
@@ -328,7 +328,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)}`}
@@ -345,7 +345,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!"
@@ -364,7 +364,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>
@@ -380,7 +380,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 ? "退出全屏" : "全屏"}
                 onClick={() => onFullscreen()}

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

src/components/ReVxeTableBar/src/bar.tsx

@@ -237,7 +237,7 @@ export default defineComponent({
     const reference = {
       reference: () => (
         <SettingIcon
-          class={["w-[16px]", iconClass.value]}
+          class={["w-4", iconClass.value]}
           v-tippy={rendTippyProps("列设置")}
         />
       )
@@ -257,20 +257,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">{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)"
                     }}
@@ -284,7 +284,7 @@ export default defineComponent({
               ) : null}
               <RefreshIcon
                 class={[
-                  "w-[16px]",
+                  "w-4",
                   iconClass.value,
                   loading.value ? "animate-spin" : ""
                 ]}
@@ -297,7 +297,7 @@ export default defineComponent({
                 trigger="click"
                 v-tippy={rendTippyProps("密度")}
               >
-                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+                <CollapseIcon class={["w-4", iconClass.value]} />
               </el-dropdown>
               <el-divider direction="vertical" />
 
@@ -321,7 +321,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)}`}
@@ -338,7 +338,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!"
@@ -355,7 +355,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>
@@ -371,7 +371,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 ? "退出全屏" : "全屏"}
                 onClick={() => onFullscreen()}

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>

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

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="w-4.5 h-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="w-4.5 h-4.5 hover:text-[#d7d5d4] cursor-pointer"
     @click.stop="handleDelete(item)"
   />
 </template>

src/layout/components/lay-search/components/SearchModal.vue

@@ -297,10 +297,7 @@ onKeyStroke("ArrowDown", handleDown);
       @input="handleSearch"
     >
       <template #prefix>
-        <IconifyIconOffline
+        <IconifyIconOffline :icon="SearchIcon" class="text-primary size-6" />
-          :icon="SearchIcon"
-          class="text-primary w-[24px] h-[24px]"
-        />
       </template>
     </el-input>
     <div class="search-content">

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" />

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"

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">
+  <div v-if="extraIcon" class="flex-c">
-    <component
+    <component :is="useRenderIcon(toRaw(extraIcon))" class="w-7.5 h-7.5" />
-      :is="useRenderIcon(toRaw(extraIcon))"
-      class="w-[30px] h-[30px]"
-    />
   </div>
 </template>

src/layout/components/lay-sidebar/components/SidebarItem.vue

@@ -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>

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" />

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>
       文本复制指令（自定义触发事件，单击复制）

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"

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>

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>

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>

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>
 

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>

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="w-45 h-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>

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
+    <div ref="preventLocal" class="w-1/2 h-50 border border-indigo-500 mt-4" />
-      ref="preventLocal"
-      class="w-1/2 h-[200px] border border-indigo-500 mt-4"
-    />
   </el-card>
 </template>

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: '快退（可长按）',

src/views/account-settings/components/AccountManagement.vue

@@ -37,9 +37,7 @@ function onClick(item) {
 </script>
 
 <template>
-  <div
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
-    :class="['min-w-[180px]', 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">

src/views/account-settings/components/Preferences.vue

@@ -32,9 +32,7 @@ function onChange(val, item) {
 </script>
 
 <template>
-  <div
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
-    :class="['min-w-[180px]', 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">

src/views/account-settings/components/Profile.vue

@@ -104,9 +104,7 @@ getMine().then(res => {
 </script>
 
 <template>
-  <div
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
-    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
-  >
     <h3 class="my-8!">个人信息</h3>
     <el-form
       ref="userInfoFormRef"

src/views/account-settings/components/SecurityLog.vue

@@ -72,9 +72,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
+  <div :class="['min-w-45', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']">
-    :class="['min-w-[180px]', deviceDetection() ? 'max-w-full' : 'max-w-[70%]']"
-  >
     <h3 class="my-8!">安全日志</h3>
     <pure-table
       row-key="id"

src/views/account-settings/index.vue

@@ -75,7 +75,7 @@ getMine().then(res => {
     >
       <el-menu :default-active="witchPane" class="pure-account-settings-menu">
         <div
-          class="h-[50px]! 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)!"
+          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
@@ -85,9 +85,9 @@ getMine().then(res => {
             <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>
@@ -125,7 +125,7 @@ getMine().then(res => {
       />
       <component
         :is="panes.find(item => item.key === witchPane).component"
-        :class="[!deviceDetection() && 'ml-[120px]']"
+        :class="[!deviceDetection() && 'ml-30']"
       />
     </el-main>
   </el-container>

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>

src/views/components/cascader.vue

@@ -37,7 +37,7 @@ 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">
+        <div class="flex-c flex-col">
           <span class="text-(--el-color-primary)">
             1. 二级联动（不带“全部”选项）
             <el-cascader
@@ -66,7 +66,7 @@ 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">
+        <div class="flex-c flex-col mt-3">
           <span class="text-(--el-color-primary)">
             2. 二级联动（带有“全部”选项）
             <el-cascader
@@ -95,7 +95,7 @@ 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">
+        <div class="flex-c flex-col mt-3">
           <span class="text-(--el-color-primary)">
             3. 三级联动（不带“全部”选项）
             <el-cascader
@@ -126,7 +126,7 @@ 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">
+        <div class="flex-c flex-col mt-3">
           <span class="text-(--el-color-primary)">
             4. 三级联动（带"全部选项"）
             <el-cascader

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

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

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"

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"

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="上海" />

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>

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="上海" />

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>

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>

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" />

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>

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"

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"
       />

src/views/components/upload/index.vue

@@ -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"

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]" />
+      <vertical-list class="h-125 w-125" />
-      <horizontal-list class="h-[500px] w-[500px]" />
+      <horizontal-list class="h-125 w-125" />
     </div>
   </el-card>
 </template>

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..."
       />

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>

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

src/views/login/index.vue

@@ -135,7 +135,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! w-5 h-5 ml-1.5 cursor-pointer outline-hidden duration-300"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
@@ -236,7 +236,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
@@ -287,7 +287,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"

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-(--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

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-(--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

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-(--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

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>

src/views/permission/page/index.vue

@@ -60,7 +60,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"

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"

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"

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" />

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>

src/views/system/role/index.vue

@@ -96,14 +96,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 +111,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 +119,7 @@ onMounted(() => {
           v-model="form.status"
           placeholder="请选择状态"
           clearable
-          class="w-[180px]!"
+          class="w-45!"
         >
           <el-option label="已启用" value="1" />
           <el-option label="已停用" value="0" />

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-(--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"

src/views/system/user/tree.vue

@@ -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>

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="w-6 h-6 rounded-full align-middle"
         />
       ),
       width: 90

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="w-25 h-25"
       />
     </template>
   </pure-table>

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

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

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

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

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" />

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

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" />

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>

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" />

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

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 type="primary" class="mb-5!" @click="print"> 打印 </el-button>
-      打印
-    </el-button>
     <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->
     <pure-table
       ref="printRef"

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

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

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

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}

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="{