fix icon

2026-03-14 05:33:42 +08:00 · 2025-06-14 13:23:55 +08:00
parent bb9cd2e529
commit 219b4f40a6
7 changed files with 29 additions and 28 deletions
--- a/frontend/src/components/TableFilterForm.vue
+++ b/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>
--- a/frontend/src/components/icons/PlusIcon.vue
+++ b/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>
--- a/frontend/src/views/DepartmentView.vue
+++ b/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"
-              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>
+            <PlusIcon class="w-4 h-4 me-2" />
          </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";
--- a/frontend/src/views/PermissionView.vue
+++ b/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"
-              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>
+            <PlusIcon class="w-4 h-4 me-2" />
          </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";
--- a/frontend/src/views/PositionView.vue
+++ b/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"
-              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>
+            <PlusIcon class="w-4 h-4 me-2" />
          </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";
--- a/frontend/src/views/RoleView.vue
+++ b/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"
-              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>
+            <PlusIcon class="w-4 h-4 me-2" />
          </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";
--- a/frontend/src/views/UserView.vue
+++ b/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"
-              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>
+            <PlusIcon class="w-4 h-4 me-2" />
          </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";