fix: 修改树组件控件排序及选中自动跳转

src/renderer/src/views/designer/sidebar/Hierarchy.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import { useElementSize } from '@vueuse/core'
 
@@ -82,6 +82,29 @@ const { height } = useElementSize(treeBoxRef, {
 })
 const treeHeight = computed(() => Math.max(height.value || 0, 100))
 
+const scrollToHierarchyNode = async (nodeId?: string) => {
+  if (!nodeId) return
+
+  const tree = hierarchyTreeRef.value
+  if (!tree) return
+
+  const node = tree.getNode(nodeId)
+  if (!node) return
+
+  node.expand(async () => {
+    await nextTick()
+
+    const treeElement = (tree as unknown as { $el?: HTMLElement }).$el
+    const targetElement = Array.from(
+      treeElement?.querySelectorAll<HTMLElement>('.el-tree-node[data-key]') || []
+    ).find((item) => item.dataset.key === nodeId)
+
+    targetElement?.scrollIntoView({
+      block: 'center'
+    })
+  }, true)
+}
+
 const getHierarchyNode = (data: TreeNodeData): HierarchyNodeData => data as HierarchyNodeData
 const getScreenOrPageRawNode = (data: TreeNodeData): Screen | Page =>
   getHierarchyNode(data).raw as Screen | Page
@@ -97,15 +120,22 @@ const buildWidgetNodes = (
   screenId: string,
   pageId: string
 ): HierarchyNodeData[] => {
-  return widgets.map((widget) => ({
-    id: widget.id,
-    name: widget.name,
-    nodeType: 'widget',
-    raw: widget,
-    screenId,
-    pageId,
-    children: buildWidgetNodes(widget.children || [], screenId, pageId)
-  }))
+  const nodes: HierarchyNodeData[] = []
+
+  for (let index = widgets.length - 1; index >= 0; index--) {
+    const widget = widgets[index]
+    nodes.push({
+      id: widget.id,
+      name: widget.name,
+      nodeType: 'widget',
+      raw: widget,
+      screenId,
+      pageId,
+      children: buildWidgetNodes(widget.children || [], screenId, pageId)
+    })
+  }
+
+  return nodes
 }
 
 const hierarchyTreeData = computed<HierarchyNodeData[]>(() => {
@@ -246,6 +276,13 @@ watch(search, (value) => {
   hierarchyTreeRef.value?.filter(value.trim())
 })
 
+watch(
+  () => projectStore.activeWidget?.id,
+  (nodeId) => {
+    void scrollToHierarchyNode(nodeId)
+  }
+)
+
 const isDescendantNode = (node: HierarchyNodeData, childId: string) => {
   return node.children.some((item) => item.id === childId || isDescendantNode(item, childId))
 }
@@ -405,7 +442,7 @@ const handleNodeDrop = (dragNode: TreeDragNode, dropNode: TreeDragNode, dropType
     const index = targetList.findIndex((item) => item.id === targetData.id)
     if (index === -1) return
 
-    targetList.splice(dropType === 'before' ? index : index + 1, 0, widget)
+    targetList.splice(dropType === 'before' ? index + 1 : index, 0, widget)
   }
 
   projectStore.setSelectWidgets([widget])