perf: tree filter

Author: wangdan-fit2cloud

ui/src/components/folder-virtualized-tree/VirtualizedTree.vue

@@ -4,6 +4,7 @@
     virtualization
     :defaultOpen="false"
     v-bind="$attrs"
+    :model-value="filteredTreeData"
     class="maxkb-virtualized-tree"
     @click:node="handleNodeClick"
     @after-drop="onAfterDrop"
@@ -33,14 +34,24 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { Draggable, dragContext } from '@he-tree/vue'
 import '@he-tree/vue/style/default.css'
 const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
   currentNodeKey: {
     type: String,
     default: 'default',
   },
+  filterNodeMethod: {
+    type: Function,
+    default: (node: any, filterText: string) => {
+      return node.name?.toLowerCase().includes(filterText.toLowerCase())
+    },
+  },
 })
 
 type DraggableInstance = InstanceType<typeof Draggable>
@@ -105,25 +116,83 @@ function onAfterDrop() {
 }
 const statHandler = (stat: any) => {
   stat.open = stat.level === 1
+  if (filterText.value) {
+    stat.open = true
+  }
   return stat
 }
+
+// 过滤文本
+const filterText = ref('')
+/**
+ * 递归过滤树
+ * @param nodes 节点数组
+ * @param text 过滤文本
+ * @returns 过滤后的新树（新对象，但节点内的基本属性保持原引用）
+ */
+const filterTree = (nodes: any[], text: string): any[] => {
+  if (!text || !props.filterNodeMethod) {
+    return nodes
+  }
+
+  const result: any[] = []
+  for (const node of nodes) {
+    const isMatch = props.filterNodeMethod(node, text)
+    let filteredChildren: any[] = []
+    if (node.children && node.children.length) {
+      filteredChildren = filterTree(node.children, text)
+    }
+    if (isMatch || filteredChildren.length) {
+      // 创建新节点对象，保留原有属性，替换 children
+      result.push({
+        ...node,
+        children: filteredChildren,
+      })
+    }
+  }
+  return result
+}
+
+// 计算过滤后的树数据
+const filteredTreeData = computed(() => {
+  return filterTree(props.modelValue, filterText.value)
+})
+
+// 暴露过滤方法给父组件
+const filter = (text: string) => {
+  filterText.value = text
+}
+
+defineExpose({
+  filter,
+})
 </script>
 
 <style lang="scss">
 .maxkb-virtualized-tree {
-  overflow: overlay !important;
+  overflow: auto !important;
   scrollbar-gutter: stable;
-
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.2);
+  // 滚动条
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
     border-radius: 5px;
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
     transition: all 0.2s ease-in-out;
-
-    &:hover {
-      cursor: pointer;
-      background-color: rgba(0, 0, 0, 0.3);
-    }
+    background-color: transparent;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
   }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
   .tree-arrow-icon {
     color: var(--app-text-color-secondary);
     padding: 6px;
@@ -153,4 +222,10 @@ const statHandler = (stat: any) => {
     }
   }
 }
+.he-tree-drag-placeholder {
+  background-color: var(--el-color-primary-light-9);
+  border: 2px dashed var(--el-color-primary);
+  border-radius: 4px;
+  width: 98%;
+}
 </style>

ui/src/components/folder-virtualized-tree/index.vue

@@ -51,6 +51,7 @@
       </div>
     </div>
     <VirtualizedTree
+      ref="treeRef"
       class="folder-tree__main"
       v-model="sortedData"
       :class="
@@ -59,12 +60,10 @@
       @node-drop="handleDrop"
       @handleNodeClick="handleNodeClick"
       :current-node-key="currentNodeKey"
+      :filter-node-method="filterNode"
     >
       <template #default="{ node, stat }">
-        <div
-          @mouseenter.stop="handleMouseEnter(node)"
-          class="flex align-center w-full custom-tree-node"
-        >
+        <div @mouseenter.stop="handleMouseEnter(node)" class="flex align-center custom-tree-node">
           <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
           <span class="tree-label ml-8 lighter" :title="node.name">{{ i18n_name(node.name) }}</span>
           <div
@@ -232,6 +231,24 @@ const MoreFilledPermission = (node: any) => {
 
 const emit = defineEmits(['handleNodeClick', 'refreshTree'])
 
+const treeRef = ref()
+const filterText = ref('')
+const hoverNodeId = ref<string | undefined>('')
+const title = ref('')
+const loading = ref(false)
+
+watch(filterText, (val) => {
+  let v = val
+  if (val) {
+    v = val.trim()
+  }
+  treeRef.value!.filter(v)
+})
+const filterNode = (data: any, value: string) => {
+  if (!value) return true
+  return data.name.toLowerCase().includes(value.toLowerCase())
+}
+
 const handleDrop = (draggingNode: any, dropNode: any, dropType: string) => {
   const dragData = draggingNode.data
   const dropData = dropNode.data
@@ -375,11 +392,6 @@ function getSortContext(positions: Record<string, number>, nodeId: string) {
 
   return { dropPos, sortedNodes, dropIndex }
 }
-const treeRef = ref()
-const filterText = ref('')
-const hoverNodeId = ref<string | undefined>('')
-const title = ref('')
-const loading = ref(false)
 
 const isDropdownOpen = ref(false)
 let time: any
@@ -687,26 +699,11 @@ onUnmounted(() => {})
     height: calc(100vh - 180px);
   }
   :deep(.folder-tree__main) {
-    padding: 4px 0 0 8px;
+    padding: 4px 2px 0 8px;
     .custom-tree-node {
       box-sizing: content-box;
       position: relative;
     }
   }
-
-  // :deep(.folder-tree__main) {
-  //   .el-tree-node.is-dragging {
-  //     opacity: 0.5;
-  //   }
-  //   .el-tree-node.is-drop-inner > .el-tree-node__content {
-  //     background-color: var(--el-color-primary-light-9);
-  //     border: 2px dashed var(--el-color-primary);
-  //     border-radius: 4px;
-  //   }
-
-  //   .el-tree-node__children {
-  //     overflow: inherit !important;
-  //   }
-  // }
 }
 </style>