From 1f6de0ec29f56795dae3328bca773365c858acc8 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 28 Jan 2026 15:11:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=83=A8=E9=97=A8=E6=A0=91=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E4=B8=8E=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将搜索输入与刷新按钮组合为紧凑布局，提升操作便捷性
- 实现部门树实时搜索过滤，高亮显示匹配的节点文本
- 调整选中节点的背景色为更柔和的悬停色
- 修复树节点标题渲染插槽名称错误
---
 .../src/views/system/user/dept-tree.vue       | 58 +++++++++++++------
 1 file changed, 41 insertions(+), 17 deletions(-)

diff --git a/apps/web-antd/src/views/system/user/dept-tree.vue b/apps/web-antd/src/views/system/user/dept-tree.vue
index 130c3fcd..67adb3be 100644
--- a/apps/web-antd/src/views/system/user/dept-tree.vue
+++ b/apps/web-antd/src/views/system/user/dept-tree.vue
@@ -3,10 +3,12 @@ import type { PropType } from 'vue';
 
 import type { DeptTree } from '#/api/system/user/model';
 
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+
+import { listToTree, treeToList } from '@vben/utils';
 
 import { SyncOutlined } from '@antdv-next/icons';
-import { Empty, InputSearch, Skeleton, Tree } from 'antdv-next';
+import { Empty, Input, Skeleton, SpaceCompact, Tree } from 'antdv-next';
 
 import { getDeptTree } from '#/api/system/user';
 
@@ -66,6 +68,23 @@ async function loadTree() {
   showTreeSkeleton.value = false;
 }
 
+const deptTreeComputed = computed(() => {
+  if (!searchValue.value) {
+    return deptTreeArray.value;
+  }
+  const toTree = treeToList(deptTreeArray.value, {
+    id: 'id',
+    pid: 'parentId',
+  });
+  const filteredTree = toTree.filter((item: DeptTree) =>
+    item.label.toUpperCase().includes(searchValue.value.toUpperCase()),
+  );
+  return listToTree(filteredTree, {
+    id: 'id',
+    pid: 'parentId',
+  });
+});
+
 async function handleReload() {
   await loadTree();
   emit('reload');
@@ -90,33 +109,38 @@ onMounted(loadTree);
           v-if="showSearch"
           class="sticky left-0 top-0 z-100 bg-background p-[8px]"
         >
-          <InputSearch
-            v-model:value="searchValue"
-            :placeholder="$t('pages.common.search')"
-            size="small"
-            allow-clear
-          >
-            <template #enterButton>
-              <a-button @click="handleReload">
-                <SyncOutlined class="text-primary" />
-              </a-button>
-            </template>
-          </InputSearch>
+          <SpaceCompact class="w-full">
+            <Input
+              v-model:value="searchValue"
+              :placeholder="$t('pages.common.search')"
+              size="small"
+              allow-clear
+            />
+            <a-button size="small" @click="handleReload">
+              <SyncOutlined class="text-primary" />
+            </a-button>
+          </SpaceCompact>
         </div>
         <div class="h-full overflow-x-hidden px-[8px]">
           <Tree
             v-bind="$attrs"
-            v-if="deptTreeArray.length > 0"
+            v-if="deptTreeComputed.length > 0"
             v-model:selected-keys="selectDeptId"
             :class="$attrs.class"
             :field-names="{ title: 'label', key: 'id' }"
             :show-line="{ showLeafIcon: false }"
-            :tree-data="deptTreeArray"
+            :tree-data="deptTreeComputed"
             :virtual="false"
             default-expand-all
             @select="$emit('select')"
+            :styles="{
+              item: {
+                '--ant-tree-node-selected-bg':
+                  'var(--ant-color-primary-bg-hover)',
+              },
+            }"
           >
-            <template #title="{ label }">
+            <template #titleRender="{ label }">
               <span v-if="label.includes(searchValue)">
                 {{ label.substring(0, label.indexOf(searchValue)) }}
                 <span class="text-primary">{{ searchValue }}</span>