Ver Fonte

fix: 人设树hover联动改为展示上下游节点而非路径

人设树hover联动效果改为展示节点详情视角:
- 高亮hover节点本身
- 高亮其父节点(上游)
- 高亮其子节点(下游)
- 高亮连接它们的边

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
yangxiaohui há 16 horas atrás
pai
commit
728519e29f
1 ficheiros alterados com 23 adições e 10 exclusões
  1. 23 10
      script/visualization/src/components/TreeView.vue

+ 23 - 10
script/visualization/src/components/TreeView.vue

@@ -333,23 +333,36 @@ watch(() => store.selectedEdgeId, updateSelection)
 
 watch(() => store.highlightedNodeIds.size, updateSelection)
 
-// 监听 hover 状态变化(人设树联动)
-watch(() => store.hoverPathNodes.size, () => {
-  if (!svgRef.value) return
+// 监听 hover 状态变化(人设树联动 - 展示上下游节点
+watch(() => store.hoverNodeId, (hoverNodeId) => {
+  if (!svgRef.value || !currentRoot) return
   const svg = d3.select(svgRef.value)
 
   const allNodes = svg.selectAll('.tree-node')
   const allLinks = svg.selectAll('.tree-link')
 
-  if (store.hoverPathNodes.size > 0) {
-    // 应用路径高亮
-    applyHoverHighlight(allNodes, allLinks, null, store.hoverPathNodes)
+  if (hoverNodeId && nodeElements[hoverNodeId]) {
+    // 找到hover节点在树中的d3节点
+    const treeNode = currentRoot.descendants().find(d => d.data.id === hoverNodeId)
+    if (!treeNode) {
+      updateSelection()
+      return
+    }
 
-    // 如果 hover 的节点在人设树中,居中显示它(跟点击效果一样)
-    const hoverNodeId = store.hoverNodeId
-    if (hoverNodeId && nodeElements[hoverNodeId]) {
-      zoomToNode(hoverNodeId)
+    // 收集上下游节点:自身 + 父节点 + 子节点
+    const neighborNodes = new Set([hoverNodeId])
+    if (treeNode.parent) {
+      neighborNodes.add(treeNode.parent.data.id)
+    }
+    if (treeNode.children) {
+      treeNode.children.forEach(child => neighborNodes.add(child.data.id))
     }
+
+    // 应用高亮(只高亮上下游节点和连接它们的边)
+    applyHoverHighlight(allNodes, allLinks, null, neighborNodes)
+
+    // 居中显示hover节点
+    zoomToNode(hoverNodeId)
   } else {
     // 恢复原有高亮
     updateSelection()