how/script/visualization/src/components/GraphView.vue

<template>
  <div class="flex flex-col h-full">
    <!-- 头部 -->
    <div class="flex items-center gap-3 px-4 py-2 bg-base-300 text-xs text-base-content/60 shrink-0">
      <span>相关图</span>
      <span v-if="store.selectedNodeId" class="text-primary font-medium">{{ currentNodeName }}</span>
      <div class="flex-1"></div>
      <button v-if="store.selectedNodeId" @click="showConfig = !showConfig" class="btn btn-ghost btn-xs">
        {{ showConfig ? '隐藏筛选' : '筛选' }}
      </button>
      <template v-if="showExpand && store.selectedNodeId">
        <button
          v-if="store.expandedPanel !== 'graph'"
          @click="store.expandPanel('graph')"
          class="btn btn-ghost btn-xs"
          title="放大"
        >⤢</button>
        <button
          v-if="store.expandedPanel !== 'default'"
          @click="store.resetLayout()"
          class="btn btn-ghost btn-xs"
          title="恢复"
        >⊡</button>
      </template>
    </div>

    <!-- 人设节点筛选配置 -->
    <div v-show="showConfig && isPersonaWalk" class="px-4 py-2 bg-base-200 border-b border-base-300 text-xs space-y-3 max-h-64 overflow-y-auto relative z-50">
      <!-- 步数设置 -->
      <div class="flex items-center gap-2">
        <span class="text-base-content/60 w-16">筛选步数:</span>
        <input type="number" :min="1" :max="5" v-model.number="store.walkSteps" class="input input-xs input-bordered w-16 text-center" />
      </div>

      <!-- 分步设置 -->
      <div class="space-y-2">
        <div v-for="step in store.walkSteps" :key="step" class="pl-4 space-y-1 border-l-2 border-secondary/30">
          <div class="flex items-center gap-2">
            <span class="font-medium text-secondary">第 {{ step }} 步</span>
            <button @click="selectAllEdgeTypes(step-1)" class="btn btn-ghost btn-xs text-base-content/50">全选</button>
            <button @click="clearEdgeTypes(step-1)" class="btn btn-ghost btn-xs text-base-content/50">清空</button>
            <button @click="resetEdgeTypes(step-1)" class="btn btn-ghost btn-xs text-base-content/50">默认</button>
          </div>
          <div class="flex items-center gap-2 flex-wrap">
            <span class="text-base-content/60 w-14">边类型:</span>
            <label v-for="et in store.allEdgeTypes" :key="et" class="flex items-center gap-1 cursor-pointer">
              <input type="checkbox" v-model="store.stepConfigs[step-1].edgeTypes" :value="et" class="checkbox checkbox-xs" />
              <span :style="{ color: edgeTypeColors[et] }">{{ et }}</span>
            </label>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-base-content/60 w-14">最小分:</span>
            <input type="number" :min="0" :max="1" :step="0.1" v-model.number="store.stepConfigs[step-1].minScore" class="input input-xs input-bordered w-16 text-center" />
          </div>
        </div>
      </div>
    </div>

    <!-- 帖子标签节点筛选配置 -->
    <div v-show="showConfig && isPostWalk" class="px-4 py-2 bg-base-200 border-b border-base-300 text-xs space-y-2">
      <div class="flex items-center gap-2">
        <span class="text-base-content/60 w-20">最大步数:</span>
        <input type="number" :min="2" :max="10" v-model.number="store.postWalkConfig.maxSteps" class="input input-xs input-bordered w-16 text-center" />
      </div>
      <div class="flex items-center gap-2">
        <span class="text-base-content/60 w-20">最后步分数:</span>
        <input type="number" :min="0" :max="1" :step="0.1" v-model.number="store.postWalkConfig.lastStepMinScore" class="input input-xs input-bordered w-16 text-center" />
      </div>
      <div class="flex items-center gap-2">
        <span class="text-base-content/60 w-20">中间边类型:</span>
        <button @click="selectAllMiddleEdgeTypes" class="btn btn-ghost btn-xs text-base-content/50">全选</button>
        <button @click="clearMiddleEdgeTypes" class="btn btn-ghost btn-xs text-base-content/50">清空</button>
        <button @click="resetMiddleEdgeTypes" class="btn btn-ghost btn-xs text-base-content/50">默认</button>
      </div>
      <div class="flex items-center gap-2 flex-wrap pl-20">
        <label v-for="t in middleEdgeTypeOptions" :key="t" class="flex items-center gap-1 cursor-pointer">
          <input type="checkbox" :value="t" v-model="store.postWalkConfig.middleEdgeTypes" class="checkbox checkbox-xs checkbox-primary" />
          <span>{{ t }}</span>
        </label>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-base-content/60 w-20">中间步分数:</span>
        <input type="number" :min="0" :max="1" :step="0.1" v-model.number="store.postWalkConfig.middleMinScore" class="input input-xs input-bordered w-16 text-center" />
      </div>
      <div class="flex items-center gap-2 text-base-content/50">
        <span>路径: 帖子标签</span>
        <span class="text-primary">--{{ store.postWalkConfig.firstEdgeType }}--></span>
        <span>人设图谱</span>
        <span class="text-primary">--{{ store.postWalkConfig.lastEdgeType }}--></span>
        <span>其他标签</span>
      </div>
      <div v-if="store.postWalkedPaths.length > 0" class="text-success">
        找到 {{ store.postWalkedPaths.length }} 条路径
      </div>
    </div>

    <!-- SVG 容器 -->
    <div ref="containerRef" class="flex-1 relative overflow-hidden">
      <svg ref="svgRef" class="w-full h-full transition-opacity duration-200" @click="handleSvgClick"></svg>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import * as d3 from 'd3'
import { useGraphStore } from '../stores/graph'
import { getNodeStyle, applyNodeShape } from '../config/nodeStyle'
import { edgeTypeColors, getEdgeStyle } from '../config/edgeStyle'
import { applyHighlight, applyHoverHighlight, clearHoverHighlight } from '../utils/highlight'

const props = defineProps({
  collapsed: { type: Boolean, default: false },
  showExpand: { type: Boolean, default: false }
})

const store = useGraphStore()
const containerRef = ref(null)
const svgRef = ref(null)
const showConfig = ref(false)


// 中间步骤可选的边类型（排除匹配边）
const middleEdgeTypeOptions = computed(() => {
  return store.allEdgeTypes.filter(t => t !== '匹配')
})

// 中间边类型操作
function selectAllMiddleEdgeTypes() {
  store.postWalkConfig.middleEdgeTypes = [...middleEdgeTypeOptions.value]
}

function clearMiddleEdgeTypes() {
  store.postWalkConfig.middleEdgeTypes = []
}

function resetMiddleEdgeTypes() {
  store.postWalkConfig.middleEdgeTypes = ['属于', '包含', '分类共现']
  store.postWalkConfig.middleMinScore = 0.3
}

let simulation = null

// 用于 hover 联动的选择集和数据
let graphNodeSelection = null
let graphLinkSelection = null
let graphLinkLabelSelection = null
let graphLinksData = []
let graphZoom = null
let graphG = null

// 游走配置操作（直接操作 store）
function selectAllEdgeTypes(stepIndex) {
  store.stepConfigs[stepIndex].edgeTypes = [...store.allEdgeTypes]
}

function clearEdgeTypes(stepIndex) {
  store.stepConfigs[stepIndex].edgeTypes = []
}

function resetEdgeTypes(stepIndex) {
  store.stepConfigs[stepIndex].edgeTypes = stepIndex === 0 ? [...store.allEdgeTypes] : ['属于']
  store.stepConfigs[stepIndex].minScore = 0
}

const currentNodeName = computed(() => {
  if (!store.selectedNodeId) return '点击左侧节点查看'
  const node = store.getNode(store.selectedNodeId)
  return node ? node.name : store.selectedNodeId
})

// 判断当前是哪种游走类型
const isPersonaWalk = computed(() => store.selectedNodeId && store.shouldWalk(store.selectedNodeId))
const isPostWalk = computed(() => store.selectedNodeId && store.shouldPostWalk(store.selectedNodeId))


// 渲染相关图
function renderGraph() {
  // 停止旧的 simulation
  if (simulation) {
    simulation.stop()
    simulation = null
  }

  const svg = d3.select(svgRef.value)
  svg.selectAll('*').remove()

  // 有选中节点或选中边时才渲染
  if (!store.selectedNodeId && !store.selectedEdgeId) return

  // 选中节点时，只有配置的节点类型才显示相关图
  if (store.selectedNodeId && !store.shouldWalk(store.selectedNodeId) && !store.shouldPostWalk(store.selectedNodeId)) return

  const container = containerRef.value
  if (!container) return

  const width = container.clientWidth
  const height = container.clientHeight
  if (width <= 0 || height <= 0) return

  svg.attr('viewBox', `0 0 ${width} ${height}`)

  // 中心节点（选中节点，或边的第一个端点）
  const centerNodeId = store.selectedNodeId || Array.from(store.highlightedNodeIds)[0]

  // 准备节点和边数据
  const nodes = []
  const links = []
  const nodeSet = new Set()

  // 显示所有高亮节点
  for (const nodeId of store.highlightedNodeIds) {
    const nodeData = store.getNode(nodeId)
    if (nodeData) {
      nodes.push({
        id: nodeId,
        ...nodeData,
        isCenter: nodeId === centerNodeId,
        isHighlighted: store.highlightedNodeIds.size > 1
      })
      nodeSet.add(nodeId)
    }
  }

  // 如果没有节点，不渲染
  if (nodes.length === 0) return

  // 使用游走时记录的边（只显示两端节点都存在的边）
  // 优先使用 postWalkedEdges（帖子游走），否则用 walkedEdges（人设游走）
  const edges = store.postWalkedEdges.length > 0 ? store.postWalkedEdges : store.walkedEdges
  for (const edge of edges) {
    if (nodeSet.has(edge.source) && nodeSet.has(edge.target)) {
      links.push({ ...edge })
    }
  }

  const g = svg.append('g')
  graphG = g

  // 缩放
  const zoom = d3.zoom()
    .scaleExtent([0.3, 3])
    .on('zoom', (e) => g.attr('transform', e.transform))
  svg.call(zoom)
  graphZoom = zoom

  // 找到中心节点并固定在容器中心
  const centerNodeData = nodes.find(n => n.isCenter)
  if (centerNodeData) {
    centerNodeData.fx = width / 2
    centerNodeData.fy = height / 2
  }

  // 力导向模拟（中心节点已固定，其他节点围绕它布局）
  simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).id(d => d.id).distance(80))
    .force('charge', d3.forceManyBody().strength(-150))
    .force('collision', d3.forceCollide().radius(30))

  // 边
  const link = g.append('g')
    .selectAll('line')
    .data(links)
    .join('line')
    .attr('class', 'graph-link')
    .attr('stroke', d => getEdgeStyle(d).color)
    .attr('stroke-width', 1.5)
    .style('cursor', 'pointer')
    .on('click', (e, d) => {
      e.stopPropagation()
      // 传入完整边数据
      store.selectEdge({
        source: d.source.id || d.source,
        target: d.target.id || d.target,
        type: d.type,
        score: d.score
      })
    })

  // 边的分数标签
  const linkLabelData = links.filter(d => getEdgeStyle(d).scoreText)
  const linkLabel = g.append('g')
    .selectAll('g')
    .data(linkLabelData)
    .join('g')
    .attr('class', 'graph-link-label')

  linkLabel.append('rect')
    .attr('x', -14)
    .attr('y', -6)
    .attr('width', 28)
    .attr('height', 12)
    .attr('rx', 2)
    .attr('fill', '#1d232a')
    .attr('opacity', 0.9)

  linkLabel.append('text')
    .attr('text-anchor', 'middle')
    .attr('dy', '0.35em')
    .attr('fill', d => getEdgeStyle(d).color)
    .attr('font-size', '8px')
    .text(d => getEdgeStyle(d).scoreText)

  // 节点组
  const node = g.append('g')
    .selectAll('g')
    .data(nodes)
    .join('g')
    .attr('class', 'graph-node')
    .call(d3.drag()
      .on('start', (e, d) => {
        if (!e.active) simulation.alphaTarget(0.3).restart()
        d.fx = d.x
        d.fy = d.y
      })
      .on('drag', (e, d) => {
        d.fx = e.x
        d.fy = e.y
      })
      .on('end', (e, d) => {
        if (!e.active) simulation.alphaTarget(0)
        d.fx = null
        d.fy = null
      }))
    .on('mouseenter', function(e, d) {
      if (d.isCenter) return  // 中心节点不处理
      // 路径计算由 store 统一处理，标记来源为 graph
      store.computeHoverPath(centerNodeId, d.id, 'graph')
      // 显示锁定按钮（在当前节点上）
      if (store.hoverPathNodes.size > 0) {
        showLockButton(this)
      }
    })
    .on('mouseleave', () => {
      // 调用 clearHover 恢复状态（如果已锁定会恢复到锁定路径）
      store.clearHover()

      if (store.lockedHoverNodeId) {
        // 已锁定：恢复锁定路径高亮，并在锁定节点上显示按钮
        // 恢复到纯锁定路径高亮（不传 lockedPath，因为这就是唯一的路径）
        applyHoverHighlight(graphNodeSelection, graphLinkSelection, graphLinkLabelSelection, store.hoverPathNodes, null)
        // 在锁定节点上显示解锁按钮
        graphNodeSelection.each(function(d) {
          if (d.id === store.lockedHoverNodeId) {
            showLockButton(this, true)
          }
        })
      } else {
        hideLockButton()
      }
    })
    .on('click', (e, d) => {
      e.stopPropagation()
      // 锁定状态下点击节点无效果，但提醒用户
      if (store.lockedHoverNodeId) {
        shakeLockButton()
        return
      }
      store.selectNode(d.id)
    })

  // 节点形状（使用统一配置）
  node.each(function(d) {
    const el = d3.select(this)
    const style = getNodeStyle(d, { isCenter: d.isCenter })
    applyNodeShape(el, style)
  })

  // 节点标签
  node.append('text')
    .attr('dy', d => getNodeStyle(d, { isCenter: d.isCenter }).size / 2 + 12)
    .attr('text-anchor', 'middle')
    .text(d => d.name.length > 8 ? d.name.slice(0, 8) + '...' : d.name)

  // 保存选择集和数据（用于 hover 联动）
  graphNodeSelection = node
  graphLinkSelection = link
  graphLinkLabelSelection = linkLabel
  graphLinksData = links

  // 更新位置
  simulation.on('tick', () => {
    link
      .attr('x1', d => d.source.x)
      .attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x)
      .attr('y2', d => d.target.y)

    // 分数标签位置（边的中点）
    linkLabel.attr('transform', d => {
      const midX = (d.source.x + d.target.x) / 2
      const midY = (d.source.y + d.target.y) / 2
      return `translate(${midX},${midY})`
    })

    node.attr('transform', d => `translate(${d.x},${d.y})`)
  })

  // 应用初始高亮状态
  nextTick(updateHighlight)
}

// 在节点文字后面添加锁定按钮（作为独立的 tspan）
function showLockButton(nodeEl, immediate = false) {
  if (!nodeEl) return

  const node = d3.select(nodeEl)
  const textEl = node.select('text')
  if (textEl.empty()) return

  // 获取当前节点 ID
  const nodeData = node.datum()
  const currentNodeId = nodeData?.data?.id || nodeData?.id

  // 判断当前节点是否是已锁定的节点
  const isThisNodeLocked = store.lockedHoverNodeId && store.lockedHoverNodeId === currentNodeId

  // 如果已有按钮，只更新状态
  let btn = textEl.select('.lock-btn')
  if (!btn.empty()) {
    btn.text(isThisNodeLocked ? ' 🔓解锁' : ' 🔒锁定')
       .attr('fill', isThisNodeLocked ? '#f6ad55' : '#63b3ed')
    if (!isThisNodeLocked) startBreathingAnimation(btn)
    return
  }

  // 创建按钮的函数
  const createBtn = () => {
    // 先清除当前 SVG 内其他节点的按钮（不影响另一边）
    if (svgRef.value) {
      d3.select(svgRef.value).selectAll('.lock-btn').remove()
    }

    // 添加按钮 tspan（紧跟在文字后面）
    const btn = textEl.append('tspan')
      .attr('class', 'lock-btn')
      .attr('fill', isThisNodeLocked ? '#f6ad55' : '#63b3ed')
      .attr('font-weight', 'bold')
      .style('cursor', 'pointer')
      .text(isThisNodeLocked ? ' 🔓解锁' : ' 🔒锁定')
      .on('click', (e) => {
        e.stopPropagation()
        handleLockClick()
      })

    // 呼吸灯动画（未锁定时）
    if (!isThisNodeLocked) {
      startBreathingAnimation(btn)
    }
  }

  createBtn()
}

// 呼吸灯动画（只有按钮部分，蓝色呼吸）
function startBreathingAnimation(btn) {
  function breathe() {
    if (btn.empty() || !btn.node()) return
    if (store.lockedHoverNodeId) return
    btn
      .transition()
      .duration(800)
      .attr('fill', '#90cdf4')
      .transition()
      .duration(800)
      .attr('fill', '#63b3ed')
      .on('end', breathe)
  }
  breathe()
}

// 隐藏锁定按钮
function hideLockButton() {
  if (svgRef.value) {
    d3.select(svgRef.value).selectAll('.lock-btn').interrupt().remove()
  }
}

// 抖动锁定按钮（提醒用户需要先解锁）
function shakeLockButton() {
  d3.selectAll('.lock-btn')
    .interrupt()
    .attr('fill', '#fc8181')  // 红色警告
    .transition().duration(50).attr('dx', 3)
    .transition().duration(50).attr('dx', -3)
    .transition().duration(50).attr('dx', 3)
    .transition().duration(50).attr('dx', -3)
    .transition().duration(50).attr('dx', 0)
    .transition().duration(200).attr('fill', '#f6ad55')  // 恢复橙色
}

// 处理锁定按钮点击
function handleLockClick() {
  const startNodeId = store.selectedNodeId
  const currentHoverNodeId = store.hoverNodeId

  // 判断是解锁还是新锁定
  if (store.lockedHoverNodeId && store.lockedHoverNodeId === currentHoverNodeId) {
    // 点击的是当前锁定节点的按钮 → 解锁（弹出栈）
    store.clearLockedHover()
    // 如果还有上一层锁定，更新按钮状态
    if (store.lockedHoverNodeId) {
      d3.selectAll('.lock-btn')
        .interrupt()
        .text(' 🔓解锁')
        .attr('fill', '#f6ad55')
    } else {
      // 完全解锁，清除按钮
      d3.selectAll('.lock-btn').interrupt().remove()
    }
  } else if (currentHoverNodeId) {
    // 点击的是新 hover 节点的按钮 → 锁定新路径（压入栈）
    store.lockCurrentHover(startNodeId)
    // 更新按钮状态
    d3.selectAll('.lock-btn')
      .interrupt()
      .text(' 🔓解锁')
      .attr('fill', '#f6ad55')
  }
}

// 点击空白取消（锁定状态下无效果）
function handleSvgClick(event) {
  // 锁定状态下，点击空白无效果
  if (store.lockedHoverNodeId) return

  if (event.target.tagName === 'svg') {
    store.clearSelection()
    hideLockButton()
  }
}

// 统一高亮更新
function updateHighlight() {
  const edgeSet = store.walkedEdgeSet.size > 0 ? store.walkedEdgeSet : store.postWalkedEdgeSet
  applyHighlight(svgRef.value, store.highlightedNodeIds, edgeSet, store.selectedNodeId)
}

// 恢复锁定的 hover 状态（重新渲染后调用）
function restoreLockedHover() {
  if (!store.lockedHoverNodeId || !graphNodeSelection) return

  // 恢复高亮效果（传入锁定路径）
  if (store.hoverPathNodes.size > 0) {
    const lockedPath = store.lockedHoverPathNodes.size > 0 ? store.lockedHoverPathNodes : null
    applyHoverHighlight(graphNodeSelection, graphLinkSelection, graphLinkLabelSelection, store.hoverPathNodes, lockedPath)
  }

  // 恢复锁定按钮：找到锁定节点的 DOM 元素
  graphNodeSelection.each(function(d) {
    if (d.id === store.lockedHoverNodeId) {
      showLockButton(this, true)
    }
  })
}

// 监听高亮变化（walkedEdges 或 postWalkedEdges 变化时重新渲染）
watch([() => store.walkedEdges.length, () => store.postWalkedEdges.length], () => {
  nextTick(renderGraph)
})

// 监听边选中变化
watch(() => store.selectedEdgeId, () => {
  nextTick(renderGraph)
  nextTick(updateHighlight)
})

// 监听高亮节点集合变化
watch(() => store.highlightedNodeIds.size, updateHighlight)

// 监听 hover 状态变化（用于左右联动）
watch([() => store.hoverPathNodes.size, () => store.hoverNodeId], () => {
  if (!graphNodeSelection || !graphLinkSelection) return

  if (store.hoverPathNodes.size > 0) {
    // 应用 hover 高亮（支持嵌套：传入锁定路径）
    const lockedPath = store.lockedHoverPathNodes.size > 0 ? store.lockedHoverPathNodes : null
    applyHoverHighlight(graphNodeSelection, graphLinkSelection, graphLinkLabelSelection, store.hoverPathNodes, lockedPath)

    // 如果是从 PostTreeView 触发的，缩放到显示完整路径，并显示锁定按钮
    if (store.hoverSource === 'post-tree') {
      zoomToPathNodes(store.hoverPathNodes)
    }

    // 在对应节点上显示锁定按钮（无论来源）
    if (store.hoverNodeId) {
      graphNodeSelection.each(function(d) {
        if (d.id === store.hoverNodeId) {
          showLockButton(this)
        }
      })
    }
  } else {
    // 清除 hover，恢复原有高亮
    clearHoverHighlight(graphNodeSelection, graphLinkSelection, graphLinkLabelSelection)
    // 如果没有锁定，隐藏按钮
    if (!store.lockedHoverNodeId) {
      hideLockButton()
    }
  }
})

// 缩放到显示路径上的所有节点
function zoomToPathNodes(pathNodes) {
  if (!graphNodeSelection || !graphZoom || !containerRef.value || !svgRef.value) return

  // 收集路径节点的位置
  const positions = []
  graphNodeSelection.each(function(d) {
    if (pathNodes.has(d.id)) {
      positions.push({ x: d.x, y: d.y })
    }
  })

  if (positions.length === 0) return

  // 计算边界框
  const minX = Math.min(...positions.map(p => p.x))
  const maxX = Math.max(...positions.map(p => p.x))
  const minY = Math.min(...positions.map(p => p.y))
  const maxY = Math.max(...positions.map(p => p.y))

  const width = containerRef.value.clientWidth
  const height = containerRef.value.clientHeight
  const padding = 60

  // 计算需要的缩放和平移
  const boxWidth = maxX - minX + padding * 2
  const boxHeight = maxY - minY + padding * 2
  const scale = Math.min(width / boxWidth, height / boxHeight, 1.5)
  const centerX = (minX + maxX) / 2
  const centerY = (minY + maxY) / 2
  const translateX = width / 2 - centerX * scale
  const translateY = height / 2 - centerY * scale

  const svg = d3.select(svgRef.value)
  svg.transition().duration(200).call(
    graphZoom.transform,
    d3.zoomIdentity.translate(translateX, translateY).scale(scale)
  )
}

// 监听配置变化，重新选中触发游走
watch([() => store.walkSteps, () => store.stepConfigs], () => {
  if (store.selectedNodeId && isPersonaWalk.value) {
    store.selectNode(store.selectedNodeId)
  }
}, { deep: true })

// 监听帖子游走配置变化
watch(() => store.postWalkConfig, () => {
  if (store.selectedNodeId && isPostWalk.value) {
    store.selectNode(store.selectedNodeId)
  }
}, { deep: true })

// 监听 CSS 过渡结束后重新渲染
function handleTransitionEnd(e) {
  if (['width', 'height', 'flex', 'flex-grow', 'flex-shrink'].includes(e.propertyName)) {
    if ((store.selectedNodeId || store.selectedEdgeId) && svgRef.value) {
      renderGraph()
      svgRef.value.style.opacity = '1'
      nextTick(() => {
        updateHighlight()
        restoreLockedHover()  // 恢复锁定的 hover 状态
      })
    }
  }
}

// 布局变化时先淡出
watch(() => store.expandedPanel, () => {
  if (svgRef.value) {
    svgRef.value.style.opacity = '0'
  }
})

onMounted(() => {
  nextTick(() => {
    renderGraph()

    // 监听父容器的过渡结束事件
    if (containerRef.value) {
      // 向上找到有 transition 的父容器
      let parent = containerRef.value.parentElement
      while (parent && !parent.classList.contains('transition-all')) {
        parent = parent.parentElement
      }
      if (parent) {
        parent.addEventListener('transitionend', handleTransitionEnd)
      }
    }
  })
})

// 组件卸载时清理
onUnmounted(() => {
  if (containerRef.value) {
    let parent = containerRef.value.parentElement
    while (parent && !parent.classList.contains('transition-all')) {
      parent = parent.parentElement
    }
    if (parent) {
      parent.removeEventListener('transitionend', handleTransitionEnd)
    }
  }
})
</script>