wonder/knowledge-graph-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 能够获取并查看节点详情

Browse Source
This commit is contained in:
wonder
2026-04-06 14:43:22 +08:00
parent dca7f5f35c
commit 1f9c3f86ff
1 changed files with 76 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/KnowledgeGraph.tsx
+76 -5
View File
@@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import GraphView from '../components/GraphView/index';
import SearchBar from '../components/SearchBar/index';
import NodePanel from '../components/NodePanel/index';
@@ -28,6 +28,7 @@ export const KnowledgeGraph = () => {
} = useGraphData();
const { layout } = useGraphLayout();
const [isExpanded, setIsExpanded] = useState(false);
const legendData = useMemo(() => {
if (!graphData || graphData.nodes.length === 0) {
@@ -36,6 +37,11 @@ export const KnowledgeGraph = () => {
return generateLegendData(graphData);
}, [graphData]);
const propertiesList = useMemo(() => {
if (!hoveredNode?.properties) return [];
return Object.entries(hoveredNode.properties);
}, [hoveredNode]);
return (
<div className="w-full h-screen flex flex-col bg-gray-50">
{loading ? (
@@ -72,10 +78,75 @@ export const KnowledgeGraph = () => {
/>
{hoveredNode && (
<div className="absolute bottom-4 right-1/2 translate-x-1/2 bg-white/95 backdrop-blur-sm rounded-lg shadow-lg p-3 max-w-sm z-20">
<div className="font-medium text-gray-800">{hoveredNode.label}</div>
{hoveredNode.type && (
<div className="text-sm text-gray-500">{hoveredNode.type}</div>
<div className="absolute bottom-4 right-1/2 translate-x-1/2 bg-white/95 backdrop-blur-sm rounded-lg shadow-lg p-4 max-w-md w-80 z-20">
{!isExpanded ? (
<div className="space-y-2">
<div className="flex justify-between items-start">
<div className="font-semibold text-base text-gray-800">{hoveredNode.label}</div>
</div>
{hoveredNode.type && (
<div className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded inline-block">
{hoveredNode.type}
</div>
)}
{propertiesList.length > 0 && (
<div className="space-y-1 text-xs">
{propertiesList.slice(0, 2).map(([key, value]) => (
<div key={key} className="flex justify-between gap-2">
<span className="text-gray-500 shrink-0">{key}:</span>
<span className="text-gray-800 text-right truncate max-w-[70%]">
{typeof value === 'object' ? JSON.stringify(value) : String(value)}
</span>
</div>
))}
{propertiesList.length > 2 && (
<div className="text-gray-400 text-center pt-1">还有 {propertiesList.length - 2} 项属性...</div>
)}
</div>
)}
{propertiesList.length > 0 && (
<button
onClick={() => setIsExpanded(true)}
className="w-full mt-2 py-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded transition-colors"
>
展开查看全部 ▼
</button>
)}
</div>
) : (
<div className="space-y-3">
<div className="flex justify-between items-start">
<div className="font-semibold text-base text-gray-800">{hoveredNode.label}</div>
<button
onClick={() => setIsExpanded(false)}
className="text-xs text-gray-500 hover:text-gray-700 px-2 py-0.5 hover:bg-gray-100 rounded transition-colors"
>
收起 ▲
</button>
</div>
{hoveredNode.type && (
<div className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded inline-block">
{hoveredNode.type}
</div>
)}
{propertiesList.length > 0 && (
<div>
<div className="text-xs text-gray-500 uppercase tracking-wide mb-2">
属性 ({propertiesList.length})
</div>
<div className="space-y-1.5 text-xs max-h-40 overflow-y-auto">
{propertiesList.map(([key, value]) => (
<div key={key} className="flex justify-between gap-2 py-0.5">
<span className="text-gray-600 shrink-0">{key}:</span>
<span className="text-gray-800 text-right break-all max-w-[65%]">
{typeof value === 'object' ? JSON.stringify(value) : String(value)}
</span>
</div>
))}
</div>
</div>
)}
</div>
)}
</div>
)}