From 2267c8634a8f319a4d9c71d787f988cc3cf67d95 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 3 Sep 2025 16:06:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor(graph):=20=E9=87=8D=E6=9E=84=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=9B=BE=E8=B0=B1=E7=BB=84=E4=BB=B6=E4=B8=BAGraphCanv?=
 =?UTF-8?q?as=E5=B9=B6=E6=9B=BF=E6=8D=A2GraphContainer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将原有的GraphContainer组件重构为更灵活的GraphCanvas组件，支持插槽布局和更多配置选项
更新KnowledgeGraphResult和GraphView视图使用新组件
删除旧的GraphContainer组件并更新相关文档
---
 docs/changelog/update.md                      |   6 +-
 web/src/components/GraphCanvas.vue            | 380 ++++++++++++++++
 web/src/components/GraphContainer.vue         | 286 ------------
 .../KnowledgeGraphResult.vue                  |   4 +-
 web/src/views/GraphView.vue                   | 407 +++---------------
 5 files changed, 439 insertions(+), 644 deletions(-)
 create mode 100644 web/src/components/GraphCanvas.vue
 delete mode 100644 web/src/components/GraphContainer.vue

diff --git a/docs/changelog/update.md b/docs/changelog/update.md
index 8275628f..e2c213ed 100644
--- a/docs/changelog/update.md
+++ b/docs/changelog/update.md
@@ -6,8 +6,8 @@
 - [ ] 使用更好的知识图谱检索方法
 - [ ] 使用其他的聊天记录管理方法，解决两个问题，一个是上下文长度过长，一个是上下文的类型变得更加丰富，比如多模态等等。（现在是基于 LangGraph 的 Memory 实现的，v0.2.3 版本实现），暂定使用 [mem0](github.com/mem0ai/mem0) 来实现。但是目前了解下来，还不是我想要的那种方案。可能会基于这个实现一个 ThreadConvManager 这个类。
 - [ ] 添加对于上传文件的支持：这里的复杂的地方就在于如何和历史记录结合在一起（v0.2.3 版本实现，放在记忆管理后面）
-- [ ] 将现在的GraphContainer相关的代码分离到一个单独的组件中，然后 actions 和 footer 都是作为 slot top/bottom 提供的
-- [ ] 移除现有的 GraphContainer 然后应用到 AgentView 中。
+- [x] 将现在的 graphview.vue 文件中 GraphContainer相关的代码分离到一个单独的组件中，然后 actions 和 footer 都是作为 slot top/bottom 提供的
+- [x]  然后应用到 web/src/components/ToolCallingResult/KnowledgeGraphResult.vue 中，替换现有的 GraphContainer。
 - [ ] 知识图谱的上传和可视化，支持属性，标签的展示
 
 🐛**BUGs**
@@ -28,5 +28,5 @@
 - [ ] 添加 SQL 读取工具
 - [ ] 添加绘图工具（这里的绘图是指绘制固定格式的图和表等，暂时没想好如何支持自定义绘图）
 - [ ] 添加测试脚本，覆盖最常见的功能
-- [ ] 添加用户日志与用户反馈模块，可以在 AgentView 中查看信息
 - [ ] 优化对文档信息的检索展示（检索结果页、详情页）
+- [ ] 集成 LangFuse (观望)添加用户日志与用户反馈模块，可以在 AgentView 中查看信息
diff --git a/web/src/components/GraphCanvas.vue b/web/src/components/GraphCanvas.vue
new file mode 100644
index 00000000..5d8a49e8
--- /dev/null
+++ b/web/src/components/GraphCanvas.vue
@@ -0,0 +1,380 @@
+<template>
+  <div class="graph-canvas-container" ref="rootEl">
+    <div v-show="graphData.nodes.length > 0" class="graph-canvas" ref="container"></div>
+    <div class="slots">
+      <div v-if="$slots.top" class="overlay top">
+        <slot name="top" />
+      </div>
+      <div class="content">
+        <slot name="content" />
+      </div>
+      <div v-if="$slots.bottom" class="overlay bottom">
+        <slot name="bottom" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Graph } from '@antv/g6'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  graphData: {
+    type: Object,
+    required: true,
+    default: () => ({ nodes: [], edges: [] })
+  },
+  labelField: { type: String, default: 'name' },
+  autoFit: { type: Boolean, default: true },
+  autoResize: { type: Boolean, default: true },
+  layoutOptions: { type: Object, default: () => ({}) },
+  nodeStyleOptions: { type: Object, default: () => ({}) },
+  edgeStyleOptions: { type: Object, default: () => ({}) },
+  enableFocusNeighbor: { type: Boolean, default: true },
+  sizeByDegree: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['ready', 'node-click', 'edge-click', 'canvas-click', 'data-rendered'])
+
+const container = ref(null)
+const rootEl = ref(null)
+let graphInstance = null
+let resizeObserver = null
+let renderTimeout = null
+let retryCount = 0
+const MAX_RETRIES = 5
+
+const defaultLayout = {
+  type: 'd3-force',
+  preventOverlap: true,
+  // 性能友好参数（参考 GraphView.vue）
+  alphaDecay: 0.1,
+  alphaMin: 0.01,
+  velocityDecay: 0.7,
+  iterations: 100,
+  force: {
+    center: { x: 0.5, y: 0.5, strength: 0.1 },
+    charge: { strength: -400, distanceMax: 400 },
+    link: { distance: 100, strength: 0.8 },
+  },
+  collide: { radius: 40, strength: 0.8, iterations: 3 },
+}
+
+const paletteColors = [
+  '#60a5fa', '#34d399', '#f59e0b', '#f472b6', '#22d3ee',
+  '#a78bfa', '#f97316', '#4ade80', '#f43f5e', '#2dd4bf',
+]
+
+function formatData() {
+  const data = props.graphData || { nodes: [], edges: [] }
+  const degrees = new Map()
+
+  for (const n of data.nodes) {
+    degrees.set(String(n.id), 0)
+  }
+  for (const e of data.edges) {
+    const s = String(e.source_id)
+    const t = String(e.target_id)
+    degrees.set(s, (degrees.get(s) || 0) + 1)
+    degrees.set(t, (degrees.get(t) || 0) + 1)
+  }
+
+  const nodes = (data.nodes || []).map((n) => ({
+    id: String(n.id),
+    data: {
+      label: n[props.labelField] ?? n.name ?? String(n.id),
+      degree: degrees.get(String(n.id)) || 0,
+    },
+  }))
+
+  const edges = (data.edges || []).map((e, idx) => ({
+    id: e.id ? String(e.id) : `edge-${idx}`,
+    source: String(e.source_id),
+    target: String(e.target_id),
+    data: { label: e.type ?? '' },
+  }))
+
+  return { nodes, edges }
+}
+
+function initGraph() {
+  if (!container.value) return
+
+  const width = container.value.offsetWidth
+  const height = container.value.offsetHeight
+
+  if (width === 0 && height === 0) {
+    if (retryCount < MAX_RETRIES) {
+      retryCount++
+      clearTimeout(renderTimeout)
+      renderTimeout = setTimeout(initGraph, 200)
+    }
+    return
+  }
+
+  retryCount = 0
+  container.value.innerHTML = ''
+
+  if (graphInstance) {
+    try { graphInstance.destroy() } catch (e) {}
+    graphInstance = null
+  }
+
+  graphInstance = new Graph({
+    container: container.value,
+    width,
+    height,
+    autoFit: props.autoFit,
+    autoResize: props.autoResize,
+    layout: { ...defaultLayout, ...props.layoutOptions },
+    node: {
+      type: 'circle',
+      style: {
+        labelText: (d) => d.data.label,
+        size: (d) => {
+          if (!props.sizeByDegree) return 24
+          const deg = d.data.degree || 0
+          return Math.min(15 + deg * 5, 50)
+        },
+        fillOpacity: 0.8,
+        opacity: 0.8,
+        stroke: '#ffffff',
+        lineWidth: 1.5,
+        shadowColor: '#94a3b8',
+        shadowBlur: 4,
+        'label-text-fill': '#334155',
+        ...(props.nodeStyleOptions.style || {}),
+      },
+      palette: props.nodeStyleOptions.palette || {
+        field: 'label',
+        color: paletteColors,
+      },
+      state: props.nodeStyleOptions.state || {
+        hidden: { opacity: 0.15, 'label-text-opacity': 0 },
+        focus: { opacity: 1, stroke: '#2563eb', lineWidth: 2.5, shadowColor: '#60a5fa', shadowBlur: 16 },
+      },
+    },
+    edge: {
+      type: 'line',
+      style: {
+        labelText: (d) => d.data.label,
+        labelBackground: '#ffffff',
+        stroke: '#94a3b8',
+        opacity: 0.6,
+        lineWidth: 1.2,
+        endArrow: true,
+        'label-text-fill': '#334155',
+        ...(props.edgeStyleOptions.style || {}),
+      },
+      state: props.edgeStyleOptions.state || {
+        hidden: { opacity: 0.15, 'label-text-opacity': 0 },
+        focus: { opacity: 0.95, stroke: '#2563eb', lineWidth: 2, 'label-text-opacity': 1 },
+      },
+    },
+    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
+  })
+
+  bindEvents()
+  emit('ready', graphInstance)
+}
+
+function bindEvents() {
+  if (!graphInstance) return
+
+  const getIds = () => {
+    const { nodes, edges } = graphInstance.getData()
+    return { nodeIds: nodes.map(n => n.id), edgeIds: edges.map(e => e.id), edges }
+  }
+
+  const getClickedId = (e) => e?.id || e?.data?.id || e?.target?.id || null
+
+  let activeNodeId = null
+
+  const resetStyles = async () => {
+    const { nodeIds, edgeIds } = getIds()
+    const updates = {}
+    nodeIds.forEach(id => updates[id] = [])
+    edgeIds.forEach(id => updates[id] = [])
+    if (nodeIds.length + edgeIds.length > 0) {
+      await graphInstance.setElementState(updates)
+    }
+    activeNodeId = null
+    await graphInstance.draw()
+  }
+
+  if (props.enableFocusNeighbor) {
+    graphInstance.on('node:click', async (e) => {
+      emit('node-click', e)
+      const clickedNodeId = getClickedId(e)
+      if (!clickedNodeId) return
+
+      if (activeNodeId === clickedNodeId) {
+        await resetStyles()
+        return
+      }
+
+      activeNodeId = clickedNodeId
+      const { nodeIds, edgeIds, edges } = getIds()
+
+      const updates = {}
+      nodeIds.forEach(id => updates[id] = ['hidden'])
+      edgeIds.forEach(id => updates[id] = ['hidden'])
+
+      const neighborSet = new Set()
+      const relatedEdgeIds = []
+      edges.forEach((edge) => {
+        if (edge.source === clickedNodeId) { neighborSet.add(edge.target); relatedEdgeIds.push(edge.id) }
+        else if (edge.target === clickedNodeId) { neighborSet.add(edge.source); relatedEdgeIds.push(edge.id) }
+      })
+
+      updates[clickedNodeId] = ['focus']
+      Array.from(neighborSet).forEach(id => updates[id] = ['focus'])
+      relatedEdgeIds.forEach(id => updates[id] = ['focus'])
+
+      await graphInstance.setElementState(updates)
+      await graphInstance.draw()
+    })
+
+    graphInstance.on('canvas:click', async () => {
+      emit('canvas-click')
+      await resetStyles()
+    })
+  } else {
+    graphInstance.on('node:click', (e) => emit('node-click', e))
+    graphInstance.on('edge:click', (e) => emit('edge-click', e))
+    graphInstance.on('canvas:click', () => emit('canvas-click'))
+  }
+}
+
+function setGraphData() {
+  if (!graphInstance) initGraph()
+  if (!graphInstance) return
+  const data = formatData()
+  graphInstance.setData(data)
+  graphInstance.render()
+  setTimeout(() => {
+    emit('data-rendered')
+  }, 100)
+}
+
+function renderGraph() {
+  if (!graphInstance) initGraph()
+  setGraphData()
+}
+
+function refreshGraph() {
+  if (graphInstance) {
+    try { graphInstance.destroy() } catch (e) {}
+    graphInstance = null
+  }
+  if (container.value) container.value.innerHTML = ''
+  retryCount = 0
+  clearTimeout(renderTimeout)
+  renderTimeout = setTimeout(() => { renderGraph() }, 300)
+}
+
+function fitView() { if (graphInstance) try { graphInstance.fitView() } catch (_) {} }
+function fitCenter() { if (graphInstance) try { graphInstance.fitCenter() } catch (_) {} }
+function getInstance() { return graphInstance }
+
+async function focusNode(id) {
+  if (!graphInstance || !props.enableFocusNeighbor) return
+  const { nodes, edges } = graphInstance.getData()
+  const nodeIds = nodes.map(n => n.id)
+  const edgeIds = edges.map(e => e.id)
+  const updates = {}
+  nodeIds.forEach(nid => updates[nid] = ['hidden'])
+  edgeIds.forEach(eid => updates[eid] = ['hidden'])
+  const neighborSet = new Set()
+  const related = []
+  edges.forEach((e) => {
+    if (e.source === id) { neighborSet.add(e.target); related.push(e.id) }
+    else if (e.target === id) { neighborSet.add(e.source); related.push(e.id) }
+  })
+  updates[id] = ['focus']
+  Array.from(neighborSet).forEach(nid => updates[nid] = ['focus'])
+  related.forEach(eid => updates[eid] = ['focus'])
+  await graphInstance.setElementState(updates)
+  await graphInstance.draw()
+}
+
+async function clearFocus() {
+  if (!graphInstance) return
+  const { nodes, edges } = graphInstance.getData()
+  const nodeIds = nodes.map(n => n.id)
+  const edgeIds = edges.map(e => e.id)
+  const updates = {}
+  nodeIds.forEach(nid => updates[nid] = [])
+  edgeIds.forEach(eid => updates[eid] = [])
+  await graphInstance.setElementState(updates)
+  await graphInstance.draw()
+}
+
+watch(() => props.graphData, () => {
+  clearTimeout(renderTimeout)
+  renderTimeout = setTimeout(() => setGraphData(), 50)
+}, { deep: true })
+
+onMounted(() => {
+  // ResizeObserver 监听容器尺寸，自动重渲染
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      if (!container.value || !graphInstance) return
+      const width = container.value.offsetWidth
+      const height = container.value.offsetHeight
+      graphInstance.changeSize(width, height)
+    })
+    if (container.value) resizeObserver.observe(container.value)
+  }
+
+  clearTimeout(renderTimeout)
+  renderTimeout = setTimeout(() => { renderGraph() }, 300)
+
+  window.addEventListener('resize', refreshGraph)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', refreshGraph)
+  if (resizeObserver && container.value) resizeObserver.unobserve(container.value)
+  clearTimeout(renderTimeout)
+  try { graphInstance?.destroy() } catch (e) {}
+  graphInstance = null
+})
+
+// 暴露方法
+defineExpose({ refreshGraph, fitView, fitCenter, getInstance, focusNode, clearFocus, setData: setGraphData })
+</script>
+
+<style lang="less" scoped>
+.graph-canvas-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .slots {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 999;
+  }
+}
+.graph-canvas {
+  width: 100%;
+  height: 100%;
+}
+.overlay {
+  width: 100%;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.content {
+  flex: 1;
+}
+.top { top: 0; }
+.bottom { bottom: 0; }
+</style>
\ No newline at end of file
diff --git a/web/src/components/GraphContainer.vue b/web/src/components/GraphContainer.vue
deleted file mode 100644
index 521d477f..00000000
--- a/web/src/components/GraphContainer.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<template>
-  <div class="graph-container" ref="container"></div>
-</template>
-
-<script setup>
-import { Graph } from "@antv/g6";
-import { onMounted, watch, ref, onUnmounted } from 'vue';
-
-const props = defineProps({
-  graphData: {
-    type: Object,
-    required: true,
-    default: () => ({ nodes: [], edges: [] })
-  }
-});
-
-const container = ref(null);
-let graphInstance = null;
-let resizeObserver = null;
-let renderTimeout = null;
-let retryCount = 0;
-const MAX_RETRIES = 5;
-
-const initGraph = () => {
-  // 确保容器存在
-  if (!container.value) {
-    console.warn('GraphContainer: container is not available');
-    return;
-  }
-
-  // 确保容器大小已经稳定
-  const width = container.value.offsetWidth;
-  const height = container.value.offsetHeight;
-
-  // 如果容器尺寸为0，增加重试次数
-  if (width === 0 && height === 0) {
-    if (retryCount < MAX_RETRIES) {
-      retryCount++;
-      // console.log(`GraphContainer: Container size is 0, retrying (${retryCount}/${MAX_RETRIES})`);
-      setTimeout(initGraph, 200);
-      return;
-    } else {
-      console.warn('GraphContainer: Container size remains 0 after maximum retries');
-      return;
-    }
-  }
-
-  retryCount = 0; // 重置重试计数
-
-  // 确保容器干净，没有残留元素
-  container.value.innerHTML = '';
-
-  // 确保没有已存在的实例
-  if (graphInstance) {
-    graphInstance.destroy();
-    graphInstance = null;
-  }
-
-  graphInstance = new Graph({
-    container: container.value,
-    width: width,
-    height: height,
-    autoFit: true,
-    autoResize: true,
-    layout: {
-      type: 'd3-force',
-      preventOverlap: true,
-      kr: 30,
-      linkDistance: 200,
-      nodeStrength: -100,
-      collide: {
-        strength: 1.5,
-        radius: 60,
-      },
-      alpha: 0.8,
-      alphaDecay: 0.028,
-      center: [width / 2, height / 2],
-    },
-    node: {
-      type: 'circle',
-      style: {
-        labelText: (d) => d.data.label,
-        size: 70,
-      },
-      palette: {
-        field: 'label',
-        color: 'tableau',
-      },
-    },
-    edge: {
-      type: 'line',
-      style: {
-        labelText: (d) => d.data.label,
-        labelBackground: '#fff',
-        endArrow: true,
-      },
-    },
-    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
-  });
-
-  // console.log(`GraphContainer: Graph initialized with dimensions ${width}x${height}`);
-};
-
-const renderGraph = () => {
-  // 检查数据是否有效
-  if (!props.graphData || !props.graphData.nodes || !props.graphData.edges) {
-    console.warn('GraphContainer: Invalid graphData provided');
-    return;
-  }
-
-  // console.log('GraphContainer: Rendering graph with', props.graphData.nodes.length, 'nodes and', props.graphData.edges.length, 'edges');
-
-  // 如果已有实例且容器大小发生明显变化，则销毁重建
-  if (graphInstance && container.value) {
-    const currentWidth = container.value.offsetWidth;
-    const currentHeight = container.value.offsetHeight;
-    let graphWidth = 0;
-    let graphHeight = 0;
-
-    // 安全地获取图表宽高
-    try {
-      if (typeof graphInstance.getWidth === 'function') {
-        graphWidth = graphInstance.getWidth();
-      } else if (graphInstance.cfg && graphInstance.cfg.width) {
-        graphWidth = graphInstance.cfg.width;
-      }
-
-      if (typeof graphInstance.getHeight === 'function') {
-        graphHeight = graphInstance.getHeight();
-      } else if (graphInstance.cfg && graphInstance.cfg.height) {
-        graphHeight = graphInstance.cfg.height;
-      }
-    } catch (e) {
-      console.error('Error getting graph dimensions:', e);
-    }
-
-    // 如果宽度变化超过50px，重新初始化图表
-    if (Math.abs(currentWidth - graphWidth) > 50 || Math.abs(currentHeight - graphHeight) > 50) {
-      // console.log('GraphContainer: Container size changed significantly, reinitializing graph');
-      graphInstance.destroy();
-      graphInstance = null;
-
-      // 清理容器内容
-      if (container.value) {
-        container.value.innerHTML = '';
-      }
-    }
-  }
-
-  // 如果没有图表实例，尝试初始化
-  if (!graphInstance) {
-    initGraph();
-  }
-
-  // 如果仍然没有图表实例，直接返回
-  if (!graphInstance) {
-    // console.warn('GraphContainer: Failed to initialize graph instance');
-    return;
-  }
-
-  const formattedData = {
-    nodes: props.graphData.nodes.map(node => ({
-      id: node.id,
-      data: { label: node.name }
-    })),
-    edges: props.graphData.edges.map(edge => ({
-      source: edge.source_id,
-      target: edge.target_id,
-      data: { label: edge.type }
-    }))
-  };
-
-  // console.log('GraphContainer: Setting data and rendering graph');
-  graphInstance.setData(formattedData);
-
-  // 强制刷新视图
-  graphInstance.render();
-
-  // 确保图表正确居中和适应视图
-  setTimeout(() => {
-    if (graphInstance) {
-      graphInstance.fitCenter();
-      graphInstance.fitView();
-      // console.log('GraphContainer: Graph rendered and fitted');
-    }
-  }, 100);
-};
-
-// 添加供父组件调用的刷新方法
-const refreshGraph = () => {
-  // console.log('GraphContainer: refreshGraph called');
-
-  // 销毁现有图表实例
-  if (graphInstance) {
-    graphInstance.destroy();
-    graphInstance = null;
-  }
-
-  // 清理容器内容
-  if (container.value) {
-    container.value.innerHTML = '';
-  }
-
-  // 重置重试计数
-  retryCount = 0;
-
-  // 延迟重新渲染，确保容器大小已经稳定
-  // 增加延迟时间确保窗口完全打开
-  clearTimeout(renderTimeout);
-  renderTimeout = setTimeout(() => {
-    renderGraph();
-  }, 300);
-};
-
-// 向父组件暴露方法
-defineExpose({
-  refreshGraph
-});
-
-onMounted(() => {
-  // 使用ResizeObserver监听容器大小变化
-  if (window.ResizeObserver) {
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === container.value) {
-          // console.log('GraphContainer: Container resized to', entry.contentRect.width, 'x', entry.contentRect.height);
-          renderGraph();
-        }
-      }
-    });
-
-    if (container.value) {
-      resizeObserver.observe(container.value);
-    }
-  }
-
-  // 初始渲染，增加延迟确保容器完全展开
-  clearTimeout(renderTimeout);
-  renderTimeout = setTimeout(() => {
-    renderGraph();
-  }, 300);
-
-  window.addEventListener('resize', renderGraph);
-});
-
-// 添加组件卸载时的清理
-onUnmounted(() => {
-  window.removeEventListener('resize', renderGraph);
-
-  clearTimeout(renderTimeout);
-
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-    resizeObserver = null;
-  }
-
-  if (graphInstance) {
-    graphInstance.destroy();
-    graphInstance = null;
-  }
-
-  // 确保清理容器内容
-  if (container.value) {
-    container.value.innerHTML = '';
-  }
-});
-
-watch(() => props.graphData, (newData, oldData) => {
-  // 强制重新渲染图表
-  if (newData !== oldData) {
-    // console.log('GraphContainer: graphData changed, refreshing graph');
-    refreshGraph();
-  }
-}, { deep: true });
-</script>
-
-<style scoped>
-.graph-container {
-  background: #F7F7F7;
-  border-radius: 16px;
-  width: 100%;
-  min-height: 400px;
-  height: 100%;
-  overflow: hidden;
-}
-</style>
\ No newline at end of file
diff --git a/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue b/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
index 486b4c9f..396c1939 100644
--- a/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
+++ b/web/src/components/ToolCallingResult/KnowledgeGraphResult.vue
@@ -9,7 +9,7 @@
 
     <!-- 图谱可视化容器 -->
     <div class="graph-visualization" ref="graphContainerRef" v-if="totalNodes > 0 || totalRelations > 0">
-      <GraphContainer :graph-data="graphData" ref="graphContainer" />
+      <GraphCanvas :graph-data="graphData" ref="graphContainer" style="height: 360px;" />
     </div>
 
     <!-- 详细信息展示 -->
@@ -55,7 +55,7 @@
 <script setup>
 import { computed, ref, watch, nextTick, onMounted, onUpdated } from 'vue'
 import { DeploymentUnitOutlined } from '@ant-design/icons-vue'
-import GraphContainer from '../GraphContainer.vue'
+import GraphCanvas from '../GraphCanvas.vue'
 
 const props = defineProps({
   data: {
diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue
index b1834ba2..3aaea822 100644
--- a/web/src/views/GraphView.vue
+++ b/web/src/views/GraphView.vue
@@ -28,44 +28,54 @@
     </HeaderComponent>
 
     <div class="container-outter">
-      <div class="main" id="container" ref="container" v-show="graphData.nodes.length > 0">
-        <div class="actions">
-          <div class="actions-left">
-            <a-input
-              v-model:value="state.searchInput"
-              placeholder="输入要查询的实体"
-              style="width: 300px"
-              @keydown.enter="onSearch"
-            >
-              <template #suffix>
-                <component :is="state.searchLoading ? LoadingOutlined : SearchOutlined" @click="onSearch" />
-              </template>
-            </a-input>
+      <GraphCanvas
+        ref="graphRef"
+        :graph-data="graphData"
+      >
+        <template #top>
+          <div class="actions">
+            <div class="actions-left">
+              <a-input
+                v-model:value="state.searchInput"
+                placeholder="输入要查询的实体"
+                style="width: 300px"
+                @keydown.enter="onSearch"
+                allow-clear
+              >
+                <template #suffix>
+                  <component :is="state.searchLoading ? LoadingOutlined : SearchOutlined" @click="onSearch" />
+                </template>
+              </a-input>
+            </div>
+            <div class="actions-right">
+              <a-button type="default" @click="state.showInfoModal = true" :icon="h(InfoCircleOutlined)">
+                说明
+              </a-button>
+              <a-input
+                v-model:value="sampleNodeCount"
+                placeholder="查询三元组数量"
+                style="width: 100px"
+                @keydown.enter="loadSampleNodes"
+                :loading="state.fetching"
+              >
+                <template #suffix>
+                  <component :is="state.fetching ? LoadingOutlined : ReloadOutlined" @click="loadSampleNodes" />
+                </template>
+              </a-input>
+            </div>
           </div>
-          <div class="actions-right">
-            <a-button type="default" @click="state.showInfoModal = true" :icon="h(InfoCircleOutlined)">
-              说明
-            </a-button>
-            <a-input
-              v-model:value="sampleNodeCount"
-              placeholder="查询三元组数量"
-              style="width: 100px"
-              @keydown.enter="loadSampleNodes"
-              :loading="state.fetching"
-            >
-              <template #suffix>
-                <component :is="state.fetching ? LoadingOutlined : ReloadOutlined" @click="loadSampleNodes" />
-              </template>
-            </a-input>
+        </template>
+        <template #content>
+          <a-empty v-show="graphData.nodes.length === 0" style="padding: 4rem 0;"/>
+        </template>
+        <template #bottom>
+          <div class="footer">
+            <div class="tags">
+              <a-tag :bordered="false" v-for="tag in graphTags" :key="tag.key" :color="tag.type">{{ tag.text }}</a-tag>
+            </div>
           </div>
-        </div>
-        <div class="footer">
-          <div class="tags">
-            <a-tag :bordered="false" v-for="tag in graphTags" :key="tag.key" :color="tag.type">{{ tag.text }}</a-tag>
-          </div>
-        </div>
-      </div>
-      <a-empty v-show="graphData.nodes.length === 0" style="padding: 4rem 0;"/>
+        </template>
+      </GraphCanvas>
     </div>
 
     <a-modal
@@ -130,22 +140,21 @@ LIMIT $num</code></pre>
 </template>
 
 <script setup>
-import { Graph } from "@antv/g6";
 import { computed, onMounted, reactive, ref, h } from 'vue';
-import { message, Button as AButton } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { useConfigStore } from '@/stores/config';
 import { UploadOutlined, SyncOutlined, GlobalOutlined, InfoCircleOutlined, SearchOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons-vue';
 import HeaderComponent from '@/components/HeaderComponent.vue';
 import { neo4jApi } from '@/apis/graph_api';
 import { useUserStore } from '@/stores/user';
+import GraphCanvas from '@/components/GraphCanvas.vue';
 
 const configStore = useConfigStore();
 const cur_embed_model = computed(() => configStore.config?.embed_model);
 const modelMatched = computed(() => !graphInfo?.value?.embed_model_name || graphInfo.value.embed_model_name === cur_embed_model.value)
 
-let graphInstance
+const graphRef = ref(null)
 const graphInfo = ref(null)
-const container = ref(null);
 const fileList = ref([]);
 const sampleNodeCount = ref(100);
 const graphData = reactive({
@@ -160,7 +169,7 @@ const state = reactive({
   searchLoading: false,
   showModal: false,
   showInfoModal: false,
-  precessing: false,
+  processing: false,
   indexing: false,
   showPage: true,
 })
@@ -185,48 +194,6 @@ const loadGraphInfo = () => {
     })
 }
 
-const getGraphData = () => {
-  // 计算每个节点的度数（连接数）
-  const nodeDegrees = {};
-
-  // 初始化所有节点的度数为0
-  graphData.nodes.forEach(node => {
-    nodeDegrees[node.id] = 0;
-  });
-
-  // 计算每个节点的连接数
-  graphData.edges.forEach(edge => {
-    nodeDegrees[edge.source_id] = (nodeDegrees[edge.source_id] || 0) + 1;
-    nodeDegrees[edge.target_id] = (nodeDegrees[edge.target_id] || 0) + 1;
-  });
-
-  return {
-    nodes: graphData.nodes.map(node => {
-      // 计算节点大小，基础大小为15，每个连接增加5的大小，最小为15，最大为50
-      const degree = nodeDegrees[node.id] || 0;
-      const nodeSize = Math.min(15 + degree * 5, 50);
-
-      return {
-        id: String(node.id),
-        data: {
-          label: node.name,
-          degree: degree, // 存储度数信息
-        },
-      }
-    }),
-    edges: graphData.edges.map((edge, index) => {
-      return {
-        id: `edge-${index}`,
-        source: edge.source_id,
-        target: edge.target_id,
-        data: {
-          label: edge.type
-        }
-      }
-    }),
-  }
-}
-
 const addDocumentByFile = () => {
   state.processing = true
   const files = fileList.value.filter(file => file.status === 'done').map(file => file.response.file_path)
@@ -253,7 +220,8 @@ const loadSampleNodes = () => {
       graphData.nodes = data.result.nodes
       graphData.edges = data.result.edges
       console.log(graphData)
-      setTimeout(() => renderGraph(), 500)
+      // 初次加载后兜底刷新一次，避免容器初次可见尺寸未稳定
+      setTimeout(() => graphRef.value?.refreshGraph?.(), 500)
     })
     .catch((error) => {
       console.error(error)
@@ -269,14 +237,7 @@ const onSearch = () => {
   }
 
   if (graphInfo?.value?.embed_model_name !== cur_embed_model.value) {
-    // if (!graphInfo?.value?.embed_model_name) {
-    //   message.error('请先上传文件(jsonl)')
-    //   return
-    // }
-
-    // if (!confirm(`构建图数据库时向量模型为 ${graphInfo?.value?.embed_model_name}，当前向量模型为 ${cur_embed_model.value}，是否继续查询？`)) {
-    //   return
-    // }
+    // 可选：提示模型不一致
   }
 
   if (!state.searchInput) {
@@ -297,7 +258,7 @@ const onSearch = () => {
       }
       console.log(data)
       console.log(graphData)
-      renderGraph()
+      graphRef.value?.refreshGraph?.()
     })
     .catch((error) => {
       console.error('查询错误:', error);
@@ -306,216 +267,11 @@ const onSearch = () => {
     .finally(() => state.searchLoading = false)
 };
 
-const renderGraph = () => {
-
-  if (graphInstance) {
-    graphInstance.destroy();
-  }
-
-  initGraph();
-  graphInstance.setData(getGraphData());
-  graphInstance.render();
-}
-
-const initGraph = () => {
-  graphInstance = new Graph({
-    container: container.value,
-    width: container.value.offsetWidth,
-    height: container.value.offsetHeight,
-    autoFit: true,
-    autoResize: true,
-    layout: {
-      type: 'd3-force',
-      preventOverlap: true,
-      // 优化布局性能参数
-      alphaDecay: 0.1, // 增加衰减率，加快收敛速度
-      alphaMin: 0.01, // 提高最小alpha值，更早停止模拟
-      velocityDecay: 0.7, // 增加速度衰减，减少震荡
-      iterations: 100, // 限制最大迭代次数
-      // 力的配置
-      force: {
-        // 中心力 - 将节点拉向中心
-        center: {
-          x: 0.5,
-          y: 0.5,
-          strength: 0.1
-        },
-        // 排斥力 - 节点间相互排斥
-        charge: {
-          strength: -400, // 负值表示排斥力
-          distanceMax: 400 // 限制力的作用距离
-        },
-        // 链接力 - 连接的节点相互吸引
-        link: {
-          distance: 100, // 理想链接距离
-          strength: 0.8 // 链接强度
-        }
-      },
-      collide: {
-        radius: 40,
-        strength: 0.8, // 增加碰撞强度，减少重叠
-        iterations: 3 // 限制碰撞检测迭代次数
-      },
-    },
-    node: {
-      type: 'circle',
-      style: {
-        labelText: (d) => d.data.label,
-        // 使用节点度数来决定大小
-        size: (d) => {
-          const degree = d.data.degree || 0;
-          return Math.min(15 + degree * 5, 50);
-        },
-        // 现代化默认样式
-        fillOpacity: 0.8,
-        opacity: 0.8,
-        stroke: '#ffffff',
-        lineWidth: 1.5,
-        shadowColor: '#94a3b8',
-        shadowBlur: 4,
-        'label-text-fill': '#334155',
-      },
-      palette: {
-        field: 'label',
-        color: [
-          '#60a5fa', // sky-400
-          '#34d399', // emerald-400
-          '#f59e0b', // amber-500
-          '#f472b6', // pink-400
-          '#22d3ee', // cyan-400
-          '#a78bfa', // violet-400
-          '#f97316', // orange-500
-          '#4ade80', // green-400
-          '#f43f5e', // rose-500
-          '#2dd4bf', // teal-400
-        ],
-      },
-      state: {
-        hidden: {
-          opacity: 0.15,
-          'label-text-opacity': 0,
-        },
-        focus: {
-          opacity: 1,
-          stroke: '#2563eb', // blue-600
-          lineWidth: 2.5,
-          shadowColor: '#60a5fa',
-          shadowBlur: 16,
-        },
-      },
-    },
-    edge: {
-      type: 'line',
-      style: {
-        labelText: (d) => d.data.label,
-        labelBackground: '#ffffff',
-        stroke: '#94a3b8',
-        opacity: 0.6,
-        lineWidth: 1.2,
-        endArrow: true,
-        'label-text-fill': '#334155',
-      },
-      state: {
-        hidden: {
-          opacity: 0.15,
-          'label-text-opacity': 0,
-        },
-        focus: {
-          opacity: 0.95,
-          stroke: '#2563eb',
-          lineWidth: 2,
-          'label-text-opacity': 1,
-        },
-      },
-    },
-    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
-  });
-
-  let activeNodeId = null;
-
-  const getGraphItemIds = () => {
-    const { nodes, edges } = graphInstance.getData();
-    const nodeIds = nodes.map(node => node.id);
-    const edgeIds = edges.map(edge => edge.id);
-    return { nodeIds, edgeIds };
-  };
-
-  // 从事件对象中尽可能稳健地获取被点击元素的 id
-  const getClickedElementId = (e) => {
-    return e?.id || e?.data?.id || e?.target?.id || null;
-  };
-
-  const resetStyles = async () => {
-    const { nodeIds, edgeIds } = getGraphItemIds();
-    const allElementIds = [...nodeIds, ...edgeIds];
-    const updates = {};
-    allElementIds.forEach(id => {
-        updates[id] = [];
-    });
-
-    if (allElementIds.length > 0) {
-      await graphInstance.setElementState(updates);
-    }
-    activeNodeId = null;
-    await graphInstance.draw();
-  };
-
-  graphInstance.on('node:click', async (e) => {
-    const clickedNodeId = getClickedElementId(e);
-    if (!clickedNodeId) return;
-
-    if (activeNodeId === clickedNodeId) {
-      await resetStyles();
-      return;
-    }
-
-    activeNodeId = clickedNodeId;
-
-    const { nodeIds: allNodeIds, edgeIds: allEdgeIds } = getGraphItemIds();
-    const { edges: allEdges } = graphInstance.getData();
-
-    const updates = {};
-
-    // 1. All nodes and edges are hidden by default
-    allNodeIds.forEach(id => updates[id] = ['hidden']);
-    allEdgeIds.forEach(id => updates[id] = ['hidden']);
-
-    // 2. Find neighbors and related edges
-    const neighborSet = new Set();
-    const relatedEdgeIds = [];
-    allEdges.forEach((edge) => {
-      if (edge.source === clickedNodeId) {
-        neighborSet.add(edge.target);
-        relatedEdgeIds.push(edge.id);
-      } else if (edge.target === clickedNodeId) {
-        neighborSet.add(edge.source);
-        relatedEdgeIds.push(edge.id);
-      }
-    });
-    const neighborNodeIds = Array.from(neighborSet);
-
-    // 3. Set 'focus' state for the clicked node, its neighbors, and related edges.
-    // This will overwrite the 'hidden' state.
-    updates[clickedNodeId] = ['focus'];
-    neighborNodeIds.forEach(id => updates[id] = ['focus']);
-    relatedEdgeIds.forEach(id => updates[id] = ['focus']);
-
-    // 4. Apply all state changes at once
-    await graphInstance.setElementState(updates);
-    await graphInstance.draw();
-  });
-
-  // 专门监听画布空白处的点击事件来重置样式
-  graphInstance.on('canvas:click', resetStyles);
-  window.addEventListener('resize', renderGraph);
-}
-
 onMounted(() => {
   loadGraphInfo();
   loadSampleNodes();
 });
 
-
 const handleFileUpload = (event) => {
   console.log(event)
   console.log(fileList.value)
@@ -664,20 +420,13 @@ const openLink = (url) => {
   overflow: hidden;
   background: var(--gray-50);
 
-  #container {
-    width: 100%;
-    height: 100%;
-  }
-
   .actions,
   .footer {
-    position: absolute;
     display: flex;
     justify-content: space-between;
     margin: 20px 0;
     padding: 0 24px;
     width: 100%;
-    z-index: 999;
   }
 }
 
@@ -699,52 +448,4 @@ const openLink = (url) => {
     box-shadow: none;
   }
 }
-
-.footer {
-  position: relative;
-}
-
-.footer {
-  bottom: 0;
-  z-index: 2; // 显示在画布之上
-}
-
-.database-empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  color: var(--gray-900);
-}
-
-.info-content {
-  line-height: 1.6;
-
-  ul {
-    padding-left: 20px;
-    margin: 10px 0;
-  }
-
-  li {
-    margin: 8px 0;
-  }
-
-  code {
-    background-color: #f0f0f0;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: monospace;
-  }
-
-  pre {
-    background-color: #f8f8f8;
-    padding: 12px;
-    border-radius: 4px;
-    overflow-x: auto;
-    margin: 15px 0;
-    font-size: 13px;
-  }
-}
 </style>