feat(knowledge): add knowledge graph visualization component

- Add @xyflow/react dependency for graph visualization
- Create KnowledgeGraphView component with custom nodes and edges
- Extend knowledge detail hook to fetch and display graph data
- Add tabs in knowledge detail page to switch between documents and graph views

src/hooks/knowledge-hooks.ts

@@ -1,6 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import knowledgeService from '@/services/knowledge_service';
-import type { IKnowledge, IKnowledgeResult, IParserConfig } from '@/interfaces/database/knowledge';
+import type { IKnowledge, IKnowledgeGraph, IKnowledgeResult } from '@/interfaces/database/knowledge';
 import type { IFetchKnowledgeListRequestParams } from '@/interfaces/request/knowledge';
 
 /**
@@ -200,6 +200,12 @@ export const useKnowledgeDetail = (kbId: string) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const [knowledgeGraph, setKnowledgeGraph] = useState<IKnowledgeGraph | null>(null);
+
+  const showKnowledgeGraph = useMemo(() => {
+    return knowledgeGraph !== null && Object.keys(knowledgeGraph?.graph || {}).length > 0;
+  }, [knowledgeGraph]);
+
   const fetchKnowledgeDetail = useCallback(async () => {
     if (!kbId) return;
 
@@ -223,15 +229,41 @@ export const useKnowledgeDetail = (kbId: string) => {
     }
   }, [kbId]);
 
+  const fetchKnowledgeGraph = useCallback(async () => {
+    if (!kbId) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await knowledgeService.getKnowledgeGraph(kbId);
+
+      if (response.data.code === 0) {
+        setKnowledgeGraph(response.data.data);
+      } else {
+        throw new Error(response.data.message || '获取知识库图失败');
+      }
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.message || err.message || '获取知识库图失败';
+      setError(errorMessage);
+      console.error('Failed to fetch knowledge graph:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [kbId]);
+
   useEffect(() => {
     fetchKnowledgeDetail();
-  }, [fetchKnowledgeDetail]);
+    fetchKnowledgeGraph();
+  }, [fetchKnowledgeDetail, fetchKnowledgeGraph]);
 
   return {
     knowledge,
+    knowledgeGraph,
     loading,
     error,
     refresh: fetchKnowledgeDetail,
+    showKnowledgeGraph,
   };
 };