refactor: 升级tailwindcss至v4版本，带来更快的构建速度、更简化的安装和配置、提供专属vite插件 (#1203)

src/views/system/user/index.vue

@@ -66,14 +66,14 @@ const {
         ref="formRef"
         :inline="true"
         :model="form"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
             v-model="form.username"
             placeholder="请输入用户名称"
             clearable
-            class="!w-[180px]"
+            class="w-[180px]!"
           />
         </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-[180px]!"
           />
         </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-[180px]!"
           >
             <el-option label="已开启" value="1" />
             <el-option label="已关闭" value="0" />
@@ -143,7 +143,7 @@ const {
             </div>
             <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
               <template #reference>
-                <el-button type="danger" text class="mr-1">
+                <el-button type="danger" text class="mr-1!">
                   批量删除
                 </el-button>
               </template>
@@ -198,7 +198,7 @@ const {
               </el-popconfirm>
               <el-dropdown>
                 <el-button
-                  class="ml-3 mt-[2px]"
+                  class="ml-3! mt-[2px]!"
                   link
                   type="primary"
                   :size="size"

src/views/system/user/tree.vue

@@ -4,7 +4,7 @@ import { ref, computed, watch, getCurrentInstance } from "vue";
 
 import Dept from "~icons/ri/git-branch-line";
 // import Reset from "~icons/ri/restart-line";
-import More2Fill from "~icons/ri/more-2-fill";
+import More2Fill from "~icons/ri/more-2-fill?width=18&height=18";
 import OfficeBuilding from "~icons/ep/office-building";
 import LocationCompany from "~icons/ep/add-location";
 import ExpandIcon from "./svg/expand.svg?component";
@@ -35,12 +35,12 @@ const defaultProps = {
 };
 const buttonClass = computed(() => {
   return [
-    "!h-[20px]",
-    "!text-sm",
+    "h-[20px]!",
+    "text-sm!",
     "reset-margin",
-    "!text-[var(--el-text-color-regular)]",
-    "dark:!text-white",
-    "dark:hover:!text-primary"
+    "text-(--el-text-color-regular)!",
+    "dark:text-white!",
+    "dark:hover:text-primary!"
   ];
 });
 
@@ -117,11 +117,7 @@ defineExpose({ onTreeReset });
         </template>
       </el-input>
       <el-dropdown :hide-on-click="false">
-        <IconifyIconOffline
-          class="w-[28px] cursor-pointer"
-          width="18px"
-          :icon="More2Fill"
-        />
+        <More2Fill class="w-[28px] cursor-pointer outline-hidden" />
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item>
@@ -166,7 +162,7 @@ defineExpose({ onTreeReset });
         <template #default="{ node, data }">
           <div
             :class="[
-              'rounded',
+              'rounded-sm',
               'flex',
               'items-center',
               'select-none',
@@ -194,7 +190,7 @@ defineExpose({ onTreeReset });
                     : Dept
               "
             />
-            <span class="!w-[120px] !truncate" :title="node.label">
+            <span class="w-[120px]! truncate!" :title="node.label">
               {{ node.label }}
             </span>
           </div>

src/views/system/user/utils/hook.tsx

@@ -163,11 +163,11 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   ];
   const buttonClass = computed(() => {
     return [
-      "!h-[20px]",
+      "h-[20px]!",
       "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
+      "text-gray-500!",
+      "dark:text-white!",
+      "dark:hover:text-primary!"
     ];
   });
   // 重置的新密码