feat: implement KnowledgeGraphView component and integrate knowledge graph fetching in detail view

Author: Dallas98

frontend/src/pages/KnowledgeBase/Detail/KnowledgeBaseDetail.tsx

@@ -5,22 +5,26 @@ import {
   DeleteOutlined,
   EditOutlined,
   ReloadOutlined,
+  CloseOutlined,
 } from "@ant-design/icons";
 import { useNavigate, useParams } from "react-router";
 import DetailHeader from "@/components/DetailHeader";
 import { SearchControls } from "@/components/SearchControls";
-import { KBFile, KnowledgeBaseItem } from "../knowledge-base.model";
+import { KBFile, KnowledgeBaseItem, KnowledgeGraphNode, KnowledgeGraphEdge, KBType } from "../knowledge-base.model";
 import { mapFileData, mapKnowledgeBase } from "../knowledge-base.const";
 import {
   deleteKnowledgeBaseByIdUsingDelete,
   deleteKnowledgeBaseFileByIdUsingDelete,
   queryKnowledgeBaseByIdUsingGet,
   queryKnowledgeBaseFilesUsingGet,
   retrieveKnowledgeBaseContent,
+  fetchKnowledgeGraph,
 } from "../knowledge-base.api";
 import useFetchData from "@/hooks/useFetchData";
 import AddDataDialog from "../components/AddDataDialog";
 import CreateKnowledgeBase from "../components/CreateKnowledgeBase";
+import KnowledgeGraphView, { GraphEntitySelection } from "../components/KnowledgeGraphView";
+import { Network } from "lucide-react";
 
 interface StatisticItem {
   icon?: React.ReactNode;
@@ -49,6 +53,10 @@ const KnowledgeBaseDetailPage: React.FC = () => {
   const [recallLoading, setRecallLoading] = useState(false);
   const [recallResults, setRecallResults] = useState<RecallResult[]>([]);
   const [recallQuery, setRecallQuery] = useState("");
+  const [graphVisible, setGraphVisible] = useState(false);
+  const [graphLoading, setGraphLoading] = useState(false);
+  const [graphData, setGraphData] = useState<{ nodes: KnowledgeGraphNode[]; edges: KnowledgeGraphEdge[] }>({ nodes: [], edges: [] });
+  const [graphSelection, setGraphSelection] = useState<GraphEntitySelection | null>(null);
 
   const fetchKnowledgeBaseDetails = async (id: string) => {
     const { data } = await queryKnowledgeBaseByIdUsingGet(id);
@@ -61,6 +69,17 @@ const KnowledgeBaseDetailPage: React.FC = () => {
     }
   }, [id]);
 
+  useEffect(() => {
+    if (!graphVisible) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [graphVisible]);
+
   const {
     loading,
     tableData: files,
@@ -119,7 +138,47 @@ const KnowledgeBaseDetailPage: React.FC = () => {
     setRecallLoading(false);
   };
 
-  const operations = [
+  const handleGraphFetch = async () => {
+    if (!knowledgeBase?.id) return;
+    setGraphLoading(true);
+    setGraphSelection(null);
+    try {
+      const { data } = await fetchKnowledgeGraph({ knowledge_base_id: knowledgeBase.id, query: "*" });
+      setGraphData({ nodes: data?.nodes ?? [], edges: data?.edges ?? [] });
+    } catch {
+      setGraphData({ nodes: [], edges: [] });
+    }
+    setGraphLoading(false);
+  };
+
+  const handleOpenGraph = () => {
+    setGraphSelection(null);
+    setGraphVisible(true);
+    if (!graphData.nodes.length) {
+      handleGraphFetch();
+    }
+  };
+
+  const handleCloseGraph = () => {
+    setGraphVisible(false);
+    setGraphSelection(null);
+  };
+
+  const handleGraphRefresh = () => {
+    handleGraphFetch();
+  };
+
+  type DetailOperation = NonNullable<React.ComponentProps<typeof DetailHeader>["operations"][number]>;
+  const graphOperation: DetailOperation | null = knowledgeBase?.type === KBType.GRAPH
+    ? {
+        key: "graph",
+        label: "知识图谱",
+        icon: <Network />,
+        onClick: handleOpenGraph,
+      }
+    : null;
+
+  const baseOperations: DetailOperation[] = [
     {
       key: "edit",
       label: "编辑知识库",
@@ -152,6 +211,8 @@ const KnowledgeBaseDetailPage: React.FC = () => {
     },
   ];
 
+  const operations: DetailOperation[] = [graphOperation, ...baseOperations].filter(Boolean) as DetailOperation[];
+
   const fileOps = [
     {
       key: "delete",
@@ -256,6 +317,99 @@ const KnowledgeBaseDetailPage: React.FC = () => {
         onUpdate={handleRefreshPage}
         onClose={() => setShowEdit(false)}
       />
+      {graphVisible && (
+        <div className="fixed inset-0 z-[2000] cosmic-modal-bg">
+          <div className="absolute inset-0 flex flex-col cosmic-modal-panel">
+            <div className="flex items-center justify-between px-6 py-4 border-b border-white/10 backdrop-blur">
+              <div>
+                <div className="text-lg font-semibold text-white/90">知识图谱</div>
+                <div className="text-xs text-white/50">{knowledgeBase?.name}</div>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  ghost
+                  type="primary"
+                  icon={<ReloadOutlined />}
+                  onClick={handleGraphRefresh}
+                  loading={graphLoading}
+                  className="cosmic-btn"
+                >
+                  刷新
+                </Button>
+                <Button
+                  type="primary"
+                  icon={<CloseOutlined />}
+                  onClick={handleCloseGraph}
+                  className="cosmic-btn danger"
+                >
+                  关闭
+                </Button>
+              </div>
+            </div>
+            <div className="flex-1 relative">
+              {graphLoading ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Spin size="large" />
+                </div>
+              ) : (
+                <KnowledgeGraphView
+                  nodes={graphData.nodes}
+                  edges={graphData.edges}
+                  height="100%"
+                  onSelectEntity={setGraphSelection}
+                />
+              )}
+              {graphSelection && (
+                <div className="absolute bottom-4 right-4 w-80 max-h-[65vh] overflow-auto rounded-lg bg-slate-900/85 text-slate-100 shadow-[0_10px_50px_rgba(15,23,42,0.7)] border border-white/10 p-4">
+                  <div className="text-sm font-semibold mb-1 text-white/85">
+                    {graphSelection.type === "node" ? "节点详情" : "边详情"}
+                  </div>
+                  <div className="text-xs text-white/50 mb-3">ID: {graphSelection.data.id}</div>
+                  {graphSelection.type === "edge" && (
+                    <div className="space-y-1 text-xs mb-3">
+                      <div className="flex justify-between gap-2">
+                        <span className="text-gray-500">类型</span>
+                        <span className="text-right break-all">{graphSelection.data.type}</span>
+                      </div>
+                      <div className="flex justify-between gap-2">
+                        <span className="text-gray-500">源节点</span>
+                        <span className="text-right break-all">{graphSelection.data.source}</span>
+                      </div>
+                      <div className="flex justify-between gap-2">
+                        <span className="text-gray-500">目标节点</span>
+                        <span className="text-right break-all">{graphSelection.data.target}</span>
+                      </div>
+                      <div className="border-t border-gray-200 my-2" />
+                    </div>
+                  )}
+                  {graphSelection.type === "node" && (
+                    <div className="space-y-1 text-xs mb-3">
+                      <div className="flex justify-between gap-2">
+                        <span className="text-gray-500">标签</span>
+                        <span className="text-right break-all">{graphSelection.data.labels?.join(", ") || "-"}</span>
+                      </div>
+                      <div className="border-t border-gray-200 my-2" />
+                    </div>
+                  )}
+                  <div className="space-y-1 text-xs">
+                    {Object.entries(graphSelection.data.properties ?? {}).map(([key, value]) => (
+                      <div key={key} className="flex justify-between gap-2">
+                        <span className="text-gray-500">{key}</span>
+                        <span className="text-right break-all text-gray-900">
+                          {typeof value === "object" ? JSON.stringify(value) : String(value ?? "-")}
+                        </span>
+                      </div>
+                    ))}
+                    {!Object.keys(graphSelection.data.properties ?? {}).length && (
+                      <div className="text-gray-500">暂无属性</div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
       <div className="flex-1 border-card p-6 mt-4">
         <div className="flex items-center justify-between mb-4 gap-3">
           <div className="flex items-center gap-2">