From 1f9c3f86ff9dd67d70a6d93c55f17f5294a8144c Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Mon, 6 Apr 2026 14:43:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=83=BD=E5=A4=9F=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=B9=B6=E6=9F=A5=E7=9C=8B=E8=8A=82=E7=82=B9=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/KnowledgeGraph.tsx | 81 +++++++++++++++++++++++++--
 1 file changed, 76 insertions(+), 5 deletions(-)

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 (
     <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>
               )}