fix icon

frontend/src/components/TableFilterForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
-    <form class="w-full sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
+    <form class="w-full min-w-[200px] sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
       <template v-for="(filter, index) in filters" :key="index">
         <!-- 输入框类型 -->
         <div v-if="filter.type === 'input'" class="flex-grow">
@@ -8,14 +8,9 @@
             }}</label>
           <div class="relative">
             <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-              <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 20 20">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
-              </svg>
             </div>
             <input type="search" :id="`filter-input-${index}`" v-model="filterValues[filter.name]"
-              class="block w-full p-2.5 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full p-2.5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
               :placeholder="filter.placeholder || ''" />
           </div>
         </div>
@@ -39,8 +34,12 @@
       </template>
 
       <button type="submit"
-        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 min-w-[70px] flex items-center justify-center"
         @click.prevent="handleSearch">
+        <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+        </svg>
         搜索
       </button>
     </form>

frontend/src/components/icons/PlusIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg :class="props.class" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+    stroke-width="3" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	class?: string;
+}>();
+</script>

frontend/src/views/DepartmentView.vue

@@ -11,10 +11,7 @@
         <Button :handleClick="() => handleUpsertDepartmentClick()" :isLoading="false" :abortable="false"
           submitContent="新增部门" class="w-full sm:w-auto">
           <template #icon>
-            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            <PlusIcon class="w-4 h-4 me-2" />
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
           </template>
         </Button>
       </template>
@@ -121,6 +118,7 @@ import TableFilterForm from "@/components/TableFilterForm.vue";
 import type { FilterItem } from "@/components/TableFilterForm.vue";
 import TableFormLayout from "@/components/TableFormLayout.vue";
 import TablePagination from "@/components/TablePagination.vue";
+import PlusIcon from "@/components/icons/PlusIcon.vue";
 import { useActionExcStore } from "@/composables/store/useActionExcStore";
 import type { DepartmentUpsertModel } from "@/types/department";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";

frontend/src/views/PermissionView.vue

@@ -11,10 +11,7 @@
         <Button :handleClick="() => handleUpsertPermissionClick(undefined)" :isLoading="false" :abortable="false"
           submitContent="新增权限" class="w-full sm:w-auto">
           <template #icon>
-            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            <PlusIcon class="w-4 h-4 me-2" />
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
           </template>
         </Button>
       </template>
@@ -121,6 +118,7 @@ import TableFilterForm from "@/components/TableFilterForm.vue";
 import type { FilterItem } from "@/components/TableFilterForm.vue";
 import TableFormLayout from "@/components/TableFormLayout.vue";
 import TablePagination from "@/components/TablePagination.vue";
+import PlusIcon from "@/components/icons/PlusIcon.vue";
 import usePermissionDelete from "@/composables/permission/usePermissionDelete";
 import { useActionExcStore } from "@/composables/store/useActionExcStore";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";

frontend/src/views/PositionView.vue

@@ -11,10 +11,7 @@
         <Button :handleClick="() => handleUpsertPositionClick()" :isLoading="false" :abortable="false"
           submitContent="新增岗位" class="w-full sm:w-auto">
           <template #icon>
-            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            <PlusIcon class="w-4 h-4 me-2" />
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
           </template>
         </Button>
       </template>
@@ -110,6 +107,7 @@ import TableFilterForm from "@/components/TableFilterForm.vue";
 import type { FilterItem } from "@/components/TableFilterForm.vue";
 import TableFormLayout from "@/components/TableFormLayout.vue";
 import TablePagination from "@/components/TablePagination.vue";
+import PlusIcon from "@/components/icons/PlusIcon.vue";
 import usePositionDelete from "@/composables/position/usePositionDelete";
 import { usePositionQuery } from "@/composables/position/usePositionQuery";
 import { usePositionUpsert } from "@/composables/position/usePositionUpsert";

frontend/src/views/RoleView.vue

@@ -11,10 +11,7 @@
         <Button :handleClick="() => handleUpsertRoleClick(undefined)" :isLoading="false" :abortable="false"
           submitContent="新增角色" class="w-full sm:w-auto">
           <template #icon>
-            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            <PlusIcon class="w-4 h-4 me-2" />
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
           </template>
         </Button>
       </template>
@@ -134,6 +131,7 @@ import TableFilterForm from "@/components/TableFilterForm.vue";
 import type { FilterItem } from "@/components/TableFilterForm.vue";
 import TableFormLayout from "@/components/TableFormLayout.vue";
 import TablePagination from "@/components/TablePagination.vue";
+import PlusIcon from "@/components/icons/PlusIcon.vue";
 import useRoleDelete from "@/composables/role/useRoleDelete";
 import { useRolesQuery } from "@/composables/role/useRolesQuery";
 import { useActionExcStore } from "@/composables/store/useActionExcStore";

frontend/src/views/UserView.vue

@@ -11,10 +11,7 @@
         <Button :handleClick="() => handleUpsertUserClick(undefined)" :isLoading="false" :abortable="false"
           submitContent="新增用户" class="w-full sm:w-auto">
           <template #icon>
-            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            <PlusIcon class="w-4 h-4 me-2" />
-              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
           </template>
         </Button>
       </template>
@@ -165,6 +162,7 @@ import TableFilterForm, {
 import TableFormLayout from "@/components/TableFormLayout.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import UserUpsertModal from "@/components/UserUpsertModal.vue";
+import PlusIcon from "@/components/icons/PlusIcon.vue";
 import { useSort } from "@/composables/sort";
 import { useActionExcStore } from "@/composables/store/useActionExcStore";
 import useUserDelete from "@/composables/user/useUserDelete";