chore: fixed tree search

apps/web-antd/src/views/system/user/dept-tree.vue

@@ -45,13 +45,11 @@ onMounted(reload);
 
 <template>
   <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
-    <div
-      class="bg-background flex h-full flex-col overflow-y-auto rounded-lg p-[8px]"
-    >
-      <div>
+    <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
+      <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+      <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
         <InputSearch
           v-model:value="searchValue"
-          class="mb-[8px]"
           placeholder="Search"
           size="small"
         >
@@ -62,32 +60,37 @@ onMounted(reload);
           </template>
         </InputSearch>
       </div>
-      <Tree
-        v-bind="$attrs"
-        v-if="deptTreeArray.length > 0"
-        v-model:selected-keys="selectDeptId"
-        :class="$attrs.class"
-        :field-names="{ title: 'label', key: 'id' }"
-        :show-line="{ showLeafIcon: false }"
-        :tree-data="deptTreeArray"
-        :virtual="false"
-        default-expand-all
-        @select="$emit('select')"
-      >
-        <template #title="{ label }">
-          <span v-if="label.indexOf(searchValue) > -1">
-            {{ label.substring(0, label.indexOf(searchValue)) }}
-            <span style="color: #f50">{{ searchValue }}</span>
-            {{
-              label.substring(label.indexOf(searchValue) + searchValue.length)
-            }}
-          </span>
-          <span v-else>{{ label }}</span>
-        </template>
-      </Tree>
-      <!-- 仅本人数据权限 可以考虑直接不显示 -->
-      <div v-else class="mt-5">
-        <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
+      <div class="px-[8px]">
+        <Tree
+          v-bind="$attrs"
+          v-if="deptTreeArray.length > 0"
+          v-model:selected-keys="selectDeptId"
+          :class="$attrs.class"
+          :field-names="{ title: 'label', key: 'id' }"
+          :show-line="{ showLeafIcon: false }"
+          :tree-data="deptTreeArray"
+          :virtual="false"
+          default-expand-all
+          @select="$emit('select')"
+        >
+          <template #title="{ label }">
+            <span v-if="label.indexOf(searchValue) > -1">
+              {{ label.substring(0, label.indexOf(searchValue)) }}
+              <span style="color: #f50">{{ searchValue }}</span>
+              {{
+                label.substring(label.indexOf(searchValue) + searchValue.length)
+              }}
+            </span>
+            <span v-else>{{ label }}</span>
+          </template>
+        </Tree>
+        <!-- 仅本人数据权限 可以考虑直接不显示 -->
+        <div v-else class="mt-5">
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="无部门数据"
+          />
+        </div>
       </div>
     </div>
   </Skeleton>