From 1d0fbde066075722753aba881a2be37f8c219084 Mon Sep 17 00:00:00 2001
From: hhs <386998068.com>
Date: Sun, 5 Apr 2026 15:14:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=9B=BE=E8=B0=B1=E6=B5=8B=E8=AF=95api=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/GraphView/index.tsx | 84 +++++++++++++--------
 1 file changed, 54 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/GraphView/index.tsx b/frontend/src/components/GraphView/index.tsx
index f2d422c..df36750 100644
--- a/frontend/src/components/GraphView/index.tsx
+++ b/frontend/src/components/GraphView/index.tsx
@@ -23,7 +23,7 @@ export const GraphView = ({
   const graphRef = useRef<Graph | null>(null);
 
   useEffect(() => {
-    if (!containerRef.current || graphRef.current) return;
+    if (!containerRef.current) return;
 
     try {
       const graphData = {
@@ -39,11 +39,54 @@ export const GraphView = ({
         })),
       };
 
+      if (graphRef.current) {
+        graphRef.current.destroy();
+        graphRef.current = null;
+      }
+
+      const processedGraphData = {
+        nodes: graphData.nodes.map((node: any) => {
+          const typeColors: Record<string, Record<string, string>> = {
+            '概念': { fill: '#4ECDC4', stroke: '#45B7B0', text: '#2C3E50' },
+            '工具': { fill: '#FFA07A', stroke: '#FF7F50', text: '#2C3E50' },
+            '应用': { fill: '#2ECC71', stroke: '#27AE60', text: '#2C3E50' },
+          };
+          
+          const colors = typeColors[node.type] || { fill: '#C6E5FF', stroke: '#5B8FF9', text: '#2C3E50' };
+          
+          return {
+            ...node,
+            type: 'circle',
+            style: {
+              size: 40,
+              fill: colors.fill,
+              stroke: colors.stroke,
+              lineWidth: 2,
+              cursor: 'pointer',
+            },
+            data: {
+              ...node,
+              originalType: node.type,
+              colors,
+            },
+          };
+        }),
+        edges: graphData.edges.map((edge: any) => ({
+          ...edge,
+          type: 'cubic-vertical',
+          style: {
+            stroke: '#95A5A6',
+            lineWidth: 2,
+            cursor: 'pointer',
+          },
+        })),
+      };
+
       const graph = new Graph({
         container: containerRef.current,
         width: containerRef.current.clientWidth,
         height: height,
-        data: graphData as any,
+        data: processedGraphData as any,
         autoFit: 'view',
         layout: {
           type: layout.type,
@@ -52,51 +95,33 @@ export const GraphView = ({
           linkDistance: layout.linkDistance || 100,
         },
         behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'hover-activate'],
-        node: {
-          style: {
-            size: 40,
-            fill: '#C6E5FF',
-            stroke: '#5B8FF9',
-            lineWidth: 2,
-          },
-        },
-        edge: {
-          type: 'cubic',
-          style: {
-            stroke: '#e2e2e2',
-            lineWidth: 2,
-          },
-        },
       });
 
       graphRef.current = graph;
       graph.render();
 
       graph.on('node:click', (evt) => {
-        const eventData = evt as { itemId?: string };
-        if (eventData.itemId) {
-          const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
-          if (nodeData && onNodeClick) {
+        if (evt.itemId && onNodeClick) {
+          const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
+          if (nodeData) {
             onNodeClick(nodeData);
           }
         }
       });
 
       graph.on('edge:click', (evt) => {
-        const eventData = evt as { itemId?: string };
-        if (eventData.itemId) {
-          const edgeData = data.edges.find((e: Edge) => e.id === eventData.itemId);
-          if (edgeData && onEdgeClick) {
+        if (evt.itemId && onEdgeClick) {
+          const edgeData = data.edges.find((e: Edge) => e.id === evt.itemId);
+          if (edgeData) {
             onEdgeClick(edgeData);
           }
         }
       });
 
       graph.on('node:mouseenter', (evt) => {
-        const eventData = evt as { itemId?: string };
-        if (eventData.itemId) {
-          const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
-          if (nodeData && onNodeHover) {
+        if (evt.itemId && onNodeHover) {
+          const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
+          if (nodeData) {
             onNodeHover(nodeData);
           }
         }
@@ -129,7 +154,6 @@ export const GraphView = ({
     onNodeClick,
     onEdgeClick,
     onNodeHover,
-    data,
   ]);
 
   useEffect(() => {