diff --git a/frontend/src/pages/KnowledgeGraph.tsx b/frontend/src/pages/KnowledgeGraph.tsx
index e4adebd..9df7c00 100644
--- a/frontend/src/pages/KnowledgeGraph.tsx
+++ b/frontend/src/pages/KnowledgeGraph.tsx
@@ -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 (
{loading ? (
@@ -72,10 +78,75 @@ export const KnowledgeGraph = () => {
/>
{hoveredNode && (
-
-
{hoveredNode.label}
- {hoveredNode.type && (
-
{hoveredNode.type}
+
+ {!isExpanded ? (
+
+
+ {hoveredNode.type && (
+
+ {hoveredNode.type}
+
+ )}
+ {propertiesList.length > 0 && (
+
+ {propertiesList.slice(0, 2).map(([key, value]) => (
+
+ {key}:
+
+ {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+
+
+ ))}
+ {propertiesList.length > 2 && (
+
还有 {propertiesList.length - 2} 项属性...
+ )}
+
+ )}
+ {propertiesList.length > 0 && (
+
+ )}
+
+ ) : (
+
+
+
{hoveredNode.label}
+
+
+ {hoveredNode.type && (
+
+ {hoveredNode.type}
+
+ )}
+ {propertiesList.length > 0 && (
+
+
+ 属性 ({propertiesList.length})
+
+
+ {propertiesList.map(([key, value]) => (
+
+ {key}:
+
+ {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+
+
+ ))}
+
+
+ )}
+
)}
)}