From 2fc9eb3f66734d6504b563995e8bca1248846b8d Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 18 Jun 2025 15:18:14 +0800
Subject: [PATCH 1/2] fix: page tree search results do not automatically
 expanded

---
 packages/plugins/page/src/Tree.vue | 86 +++++++++++++++++++++---------
 1 file changed, 62 insertions(+), 24 deletions(-)

diff --git a/packages/plugins/page/src/Tree.vue b/packages/plugins/page/src/Tree.vue
index ded1959141..4247b85be7 100644
--- a/packages/plugins/page/src/Tree.vue
+++ b/packages/plugins/page/src/Tree.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, ref } from 'vue'
+import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import LayerLines from './LayerLines.vue'
 
 const props = defineProps({
@@ -81,27 +81,36 @@ const emit = defineEmits(['clickRow', 'moveNode'])
 const useCollapseMap = () => {
   const collapseMap = ref<Record<string, boolean>>({})
 
-  const setCollapse = (id: string, value: boolean) => {
+  const setCollapse = (id: string | number, value: boolean) => {
     collapseMap.value[id] = value
   }
 
-  const switchCollapse = (id: string) => {
+  const switchCollapse = (id: string | number) => {
     collapseMap.value[id] = !collapseMap.value[id]
   }
 
   return { collapseMap, setCollapse, switchCollapse }
 }
 
-const { collapseMap, switchCollapse } = useCollapseMap()
+const { collapseMap, setCollapse, switchCollapse } = useCollapseMap()
 
-const handleSwitchCollapse = (node) => {
+interface TreeNode {
+  id: string | number
+  label: string
+  parentId?: string | number
+  level: number
+  collapsed?: boolean
+  rawData?: any
+}
+
+const handleSwitchCollapse = (node: TreeNode) => {
   const children = node.rawData[props.childrenKey]
   if (Array.isArray(children) && children.length > 0) {
     switchCollapse(node.id)
   }
 }
 
-const flattenTreeData = (node, parentId, level = 0, collapsed = false) => {
+const flattenTreeData = (node: any, parentId?: string | number, level = 0, collapsed = false): TreeNode[] => {
   const { idKey, labelKey, childrenKey } = props
 
   const currentNode = {
@@ -112,7 +121,7 @@ const flattenTreeData = (node, parentId, level = 0, collapsed = false) => {
     collapsed,
     rawData: node
   }
-  const result = [currentNode]
+  const result: TreeNode[] = [currentNode]
 
   const children = node[childrenKey]
 
@@ -129,18 +138,14 @@ const nodes = computed(() => {
   return flattenTreeData({ [props.idKey]: props.rootId, [props.childrenKey]: props.data }).slice(1)
 })
 
-const nodesMap = computed(() => {
+const nodesMap = computed<Record<string | number, TreeNode>>(() => {
   return nodes.value.reduce((result, node) => {
     result[node.id] = node
     return result
-  }, {})
-})
-
-const filteredNodes = computed(() => {
-  return nodes.value.filter((node) => node.label.toLowerCase().includes(props.filterValue.toLowerCase()))
+  }, {} as Record<string | number, TreeNode>)
 })
 
-const getAncestorIds = (nodeId) => {
+const getAncestorIds = (nodeId: string | number): (string | number)[] => {
   const currentNode = nodesMap.value[nodeId]
 
   if (!currentNode || !currentNode.parentId) {
@@ -154,6 +159,39 @@ const getAncestorIds = (nodeId) => {
   return ancestors
 }
 
+const filteredNodes = ref<TreeNode[]>([])
+
+watch(nodes, (nodes) => {
+  filteredNodes.value = nodes.filter((node) => node.label.toLowerCase().includes(props.filterValue.toLowerCase()))
+})
+
+watch(
+  () => props.filterValue,
+  (filterValue) => {
+    const filtered = nodes.value.filter((node) => node.label.toLowerCase().includes(filterValue.toLowerCase()))
+
+    let collapseMapChanged = false
+
+    filtered.forEach((node) => {
+      // 每个节点的祖先节点中，如果存在折叠的节点，则展开
+      for (const id of getAncestorIds(node.id)) {
+        if (collapseMap.value[id]) {
+          setCollapse(id, false)
+          collapseMapChanged = true
+        }
+      }
+    })
+
+    // - 如果 collapseMap 有变化，会自动重新计算 nodes，更新路径：
+    //   props.filterValue -> collapseMap -> nodes -> filteredNodes -> filteredNodesWithAncestors
+    // - 如果 collapseMap 没有变化，则重新设置 filteredNodes，更新路径：
+    //   props.filterValue -> filteredNodes -> filteredNodesWithAncestors
+    if (!collapseMapChanged) {
+      filteredNodes.value = filtered
+    }
+  }
+)
+
 const filteredNodesWithAncestors = computed(() => {
   const idSet = new Set()
 
@@ -174,7 +212,7 @@ const lines = {
 }
 
 const layerLine = computed(() => {
-  const result = {}
+  const result: Record<number, Record<number, number>> = {}
 
   const nodes = filteredNodesWithAncestors.value
 
@@ -193,14 +231,14 @@ const layerLine = computed(() => {
   return result
 })
 
-const handleClickRow = (node) => {
+const handleClickRow = (node: TreeNode) => {
   emit('clickRow', node)
 }
 
-const draggedNode = ref(null)
-const hoveringNodeId = ref(null)
+const draggedNode = ref<TreeNode | null>(null)
+const hoveringNodeId = ref<string | number | null>(null)
 
-const handleDragStart = (event, node) => {
+const handleDragStart = (_event: DragEvent, node: TreeNode) => {
   if (!props.draggable) {
     return
   }
@@ -209,12 +247,12 @@ const handleDragStart = (event, node) => {
 }
 
 // dragover和dragenter事件回调函数都为handleDragOver。跨行拖动时，禁止拖拽图标可能会闪一下，所以将dragenter事件也加上回调函数
-const handleDragOver = (event, node) => {
+const handleDragOver = (event: DragEvent, node: TreeNode) => {
   if (!props.draggable) {
     return
   }
 
-  const isDescendant = getAncestorIds(node.id).includes(draggedNode.value.id)
+  const isDescendant = getAncestorIds(node.id).includes(draggedNode.value!.id)
 
   if (!isDescendant) {
     // 阻止默认行为以允许放置
@@ -225,7 +263,7 @@ const handleDragOver = (event, node) => {
   }
 }
 
-const handleDrop = (event, node) => {
+const handleDrop = (event: DragEvent, node: Pick<TreeNode, 'id'>) => {
   event.preventDefault()
 
   const dragged = draggedNode.value
@@ -246,7 +284,7 @@ const handleDragEnd = () => {
   hoveringNodeId.value = null
 }
 
-const handleContainerDragOver = (event) => {
+const handleContainerDragOver = (event: DragEvent) => {
   if (!props.draggable) {
     return
   }
@@ -259,7 +297,7 @@ const handleContainerDragOver = (event) => {
   hoveringNodeId.value = props.rootId
 }
 
-const handleContainerDragLeave = (event) => {
+const handleContainerDragLeave = (event: DragEvent) => {
   if (!props.draggable) {
     return
   }

From 93ece36b775d1bfc89985c9ff88462467ad053b2 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 18 Jun 2025 17:42:11 +0800
Subject: [PATCH 2/2] add comment

---
 packages/plugins/page/src/Tree.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/plugins/page/src/Tree.vue b/packages/plugins/page/src/Tree.vue
index 4247b85be7..d8ead4a02f 100644
--- a/packages/plugins/page/src/Tree.vue
+++ b/packages/plugins/page/src/Tree.vue
@@ -161,10 +161,14 @@ const getAncestorIds = (nodeId: string | number): (string | number)[] => {
 
 const filteredNodes = ref<TreeNode[]>([])
 
+// 下面两个 watch 对应的两个重新计算 filteredNodes 的场景。场景2比场景1多了展开匹配到的节点的操作
+
+// 场景1. 页面树的结构发生变化，或者有节点收起或者展开，重新计算 filteredNodes
 watch(nodes, (nodes) => {
   filteredNodes.value = nodes.filter((node) => node.label.toLowerCase().includes(props.filterValue.toLowerCase()))
 })
 
+// 场景2. 过滤条件发生变化，重新计算 filteredNodes，并且展开匹配到的节点
 watch(
   () => props.filterValue,
   (filterValue) => {