fix: 优化知识图谱测试api问题

This commit is contained in:
hhs
2026-04-05 15:14:50 +08:00
parent c500d75b12
commit 1d0fbde066
+54 -30
View File
@@ -23,7 +23,7 @@ export const GraphView = ({
const graphRef = useRef<Graph | null>(null); const graphRef = useRef<Graph | null>(null);
useEffect(() => { useEffect(() => {
if (!containerRef.current || graphRef.current) return; if (!containerRef.current) return;
try { try {
const graphData = { 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({ const graph = new Graph({
container: containerRef.current, container: containerRef.current,
width: containerRef.current.clientWidth, width: containerRef.current.clientWidth,
height: height, height: height,
data: graphData as any, data: processedGraphData as any,
autoFit: 'view', autoFit: 'view',
layout: { layout: {
type: layout.type, type: layout.type,
@@ -52,51 +95,33 @@ export const GraphView = ({
linkDistance: layout.linkDistance || 100, linkDistance: layout.linkDistance || 100,
}, },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'hover-activate'], 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; graphRef.current = graph;
graph.render(); graph.render();
graph.on('node:click', (evt) => { graph.on('node:click', (evt) => {
const eventData = evt as { itemId?: string }; if (evt.itemId && onNodeClick) {
if (eventData.itemId) { const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId); if (nodeData) {
if (nodeData && onNodeClick) {
onNodeClick(nodeData); onNodeClick(nodeData);
} }
} }
}); });
graph.on('edge:click', (evt) => { graph.on('edge:click', (evt) => {
const eventData = evt as { itemId?: string }; if (evt.itemId && onEdgeClick) {
if (eventData.itemId) { const edgeData = data.edges.find((e: Edge) => e.id === evt.itemId);
const edgeData = data.edges.find((e: Edge) => e.id === eventData.itemId); if (edgeData) {
if (edgeData && onEdgeClick) {
onEdgeClick(edgeData); onEdgeClick(edgeData);
} }
} }
}); });
graph.on('node:mouseenter', (evt) => { graph.on('node:mouseenter', (evt) => {
const eventData = evt as { itemId?: string }; if (evt.itemId && onNodeHover) {
if (eventData.itemId) { const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId); if (nodeData) {
if (nodeData && onNodeHover) {
onNodeHover(nodeData); onNodeHover(nodeData);
} }
} }
@@ -129,7 +154,6 @@ export const GraphView = ({
onNodeClick, onNodeClick,
onEdgeClick, onEdgeClick,
onNodeHover, onNodeHover,
data,
]); ]);
useEffect(() => { useEffect(() => {