refactor(routes): split knowledge-graph.tsx into modular knowledge-graph/ directory (T19d)
This commit is contained in:
DrSmoothl
@@ -1,722 +0,0 @@
|
||||
import { useState, useCallback, useEffect, memo } from 'react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import ReactFlow, {
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
Panel,
|
||||
Handle,
|
||||
Position,
|
||||
type Node,
|
||||
type Edge,
|
||||
type NodeTypes,
|
||||
} from 'reactflow'
|
||||
import 'reactflow/dist/style.css'
|
||||
import dagre from 'dagre'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
Search,
|
||||
RefreshCw,
|
||||
Info,
|
||||
Database,
|
||||
Network,
|
||||
FileText,
|
||||
} from 'lucide-react'
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import { getKnowledgeGraph, getKnowledgeStats, searchKnowledgeNode, type KnowledgeNode, type KnowledgeEdge, type KnowledgeStats } from '@/lib/knowledge-api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// 自定义节点组件 - 实体节点
|
||||
const EntityNode = memo(({ data }: { data: { label: string; content: string } }) => {
|
||||
return (
|
||||
<div className="px-4 py-2 shadow-md rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700 min-w-[120px]">
|
||||
<Handle type="target" position={Position.Top} />
|
||||
<div className="font-semibold text-white text-sm truncate max-w-[200px]" title={data.content}>
|
||||
{data.label}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Bottom} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
EntityNode.displayName = 'EntityNode'
|
||||
|
||||
// 自定义节点组件 - 段落节点
|
||||
const ParagraphNode = memo(({ data }: { data: { label: string; content: string } }) => {
|
||||
return (
|
||||
<div className="px-3 py-2 shadow-md rounded-md bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700 min-w-[100px]">
|
||||
<Handle type="target" position={Position.Top} />
|
||||
<div className="font-medium text-white text-xs truncate max-w-[150px]" title={data.content}>
|
||||
{data.label}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Bottom} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
ParagraphNode.displayName = 'ParagraphNode'
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
entity: EntityNode,
|
||||
paragraph: ParagraphNode,
|
||||
}
|
||||
|
||||
// 使用 dagre 进行自动布局
|
||||
function calculateLayout(nodes: KnowledgeNode[], edges: KnowledgeEdge[]): { nodes: Node[]; edges: Edge[] } {
|
||||
const dagreGraph = new dagre.graphlib.Graph()
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}))
|
||||
dagreGraph.setGraph({ rankdir: 'TB', ranksep: 100, nodesep: 80 })
|
||||
|
||||
const flowNodes: Node[] = []
|
||||
const flowEdges: Edge[] = []
|
||||
|
||||
// 设置节点到 dagre 图
|
||||
nodes.forEach((node) => {
|
||||
dagreGraph.setNode(node.id, { width: 150, height: 50 })
|
||||
})
|
||||
|
||||
// 设置边到 dagre 图
|
||||
edges.forEach((edge) => {
|
||||
dagreGraph.setEdge(edge.source, edge.target)
|
||||
})
|
||||
|
||||
// 执行布局计算
|
||||
dagre.layout(dagreGraph)
|
||||
|
||||
// 获取布局后的节点位置
|
||||
nodes.forEach((node) => {
|
||||
const nodeWithPosition = dagreGraph.node(node.id)
|
||||
flowNodes.push({
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
position: {
|
||||
x: nodeWithPosition.x - 75,
|
||||
y: nodeWithPosition.y - 25,
|
||||
},
|
||||
data: {
|
||||
label: node.content.slice(0, 20) + (node.content.length > 20 ? '...' : ''),
|
||||
content: node.content,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
// 创建边
|
||||
edges.forEach((edge, index) => {
|
||||
const flowEdge: Edge = {
|
||||
id: `edge-${index}`,
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
// 节点数超过200时禁用动画提升性能
|
||||
animated: nodes.length <= 200 && edge.weight > 5,
|
||||
style: {
|
||||
strokeWidth: Math.min(edge.weight / 2, 5),
|
||||
opacity: 0.6,
|
||||
},
|
||||
}
|
||||
// 只在节点数少于100时显示边的标签
|
||||
if (edge.weight > 10 && nodes.length < 100) {
|
||||
flowEdge.label = `${edge.weight.toFixed(0)}`
|
||||
}
|
||||
flowEdges.push(flowEdge)
|
||||
})
|
||||
|
||||
return { nodes: flowNodes, edges: flowEdges }
|
||||
}
|
||||
|
||||
export function KnowledgeGraphPage() {
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [stats, setStats] = useState<KnowledgeStats | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [nodeType, setNodeType] = useState<'all' | 'entity' | 'paragraph'>('all')
|
||||
const [nodeLimit, setNodeLimit] = useState(50)
|
||||
const [customLimit, setCustomLimit] = useState('50')
|
||||
const [showCustomInput, setShowCustomInput] = useState(false)
|
||||
const [showInitialConfirm, setShowInitialConfirm] = useState(true)
|
||||
const [userConfirmedLoad, setUserConfirmedLoad] = useState(false) // 用户是否确认加载
|
||||
const [showHighNodeWarning, setShowHighNodeWarning] = useState(false)
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([])
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([])
|
||||
const [nodeCount, setNodeCount] = useState(0)
|
||||
const [selectedNodeData, setSelectedNodeData] = useState<KnowledgeNode | null>(null)
|
||||
const [selectedEdgeData, setSelectedEdgeData] = useState<{ source: KnowledgeNode; target: KnowledgeNode; edge: KnowledgeEdge } | null>(null)
|
||||
const { toast } = useToast()
|
||||
|
||||
// 缓存 MiniMap 的 nodeColor 函数
|
||||
const miniMapNodeColor = useCallback((node: Node) => {
|
||||
if (node.type === 'entity') return '#6366f1'
|
||||
if (node.type === 'paragraph') return '#10b981'
|
||||
return '#6b7280'
|
||||
}, [])
|
||||
|
||||
// 加载知识图谱数据
|
||||
const loadGraph = useCallback(async (skipWarning = false) => {
|
||||
try {
|
||||
// 检查是否需要警告用户
|
||||
if (!skipWarning && nodeLimit > 200) {
|
||||
setShowHighNodeWarning(true)
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
const [graphData, statsData] = await Promise.all([
|
||||
getKnowledgeGraph(nodeLimit, nodeType),
|
||||
getKnowledgeStats(),
|
||||
])
|
||||
|
||||
setStats(statsData)
|
||||
|
||||
if (graphData.nodes.length === 0) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '知识库为空，请先导入知识数据',
|
||||
})
|
||||
setNodes([])
|
||||
setEdges([])
|
||||
return
|
||||
}
|
||||
|
||||
const { nodes: flowNodes, edges: flowEdges } = calculateLayout(graphData.nodes, graphData.edges)
|
||||
setNodes(flowNodes)
|
||||
setEdges(flowEdges)
|
||||
setNodeCount(flowNodes.length)
|
||||
|
||||
if (statsData && statsData.total_nodes > nodeLimit) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: `知识图谱包含 ${statsData.total_nodes} 个节点，当前显示 ${flowNodes.length} 个`,
|
||||
})
|
||||
}
|
||||
|
||||
toast({
|
||||
title: '加载成功',
|
||||
description: `已加载 ${flowNodes.length} 个节点，${flowEdges.length} 条边`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('加载知识图谱失败:', error)
|
||||
toast({
|
||||
title: '加载失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [nodeLimit, nodeType, toast]) // setNodes 和 setEdges 是稳定的,不需要包含
|
||||
|
||||
// 搜索节点
|
||||
const handleSearch = useCallback(async () => {
|
||||
if (!searchQuery.trim()) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '请输入搜索关键词',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await searchKnowledgeNode(searchQuery)
|
||||
if (results.length === 0) {
|
||||
toast({
|
||||
title: '未找到',
|
||||
description: '没有找到匹配的节点',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 高亮搜索结果
|
||||
const resultIds = new Set(results.map(r => r.id))
|
||||
setNodes(nds =>
|
||||
nds.map(node => ({
|
||||
...node,
|
||||
style: {
|
||||
...node.style,
|
||||
opacity: resultIds.has(node.id) ? 1 : 0.3,
|
||||
filter: resultIds.has(node.id) ? 'brightness(1.2)' : 'brightness(0.8)',
|
||||
},
|
||||
}))
|
||||
)
|
||||
|
||||
toast({
|
||||
title: '搜索完成',
|
||||
description: `找到 ${results.length} 个匹配节点`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
toast({
|
||||
title: '搜索失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchQuery, toast]) // setNodes 是稳定的
|
||||
|
||||
// 重置高亮
|
||||
const handleResetHighlight = useCallback(() => {
|
||||
setNodes(nds =>
|
||||
nds.map(node => ({
|
||||
...node,
|
||||
style: {
|
||||
...node.style,
|
||||
opacity: 1,
|
||||
filter: 'brightness(1)',
|
||||
},
|
||||
}))
|
||||
)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []) // setNodes 是稳定的
|
||||
|
||||
// 初始确认后加载
|
||||
const handleInitialConfirm = useCallback(() => {
|
||||
setShowInitialConfirm(false)
|
||||
setUserConfirmedLoad(true) // 设置用户确认标记
|
||||
loadGraph()
|
||||
}, [loadGraph])
|
||||
|
||||
// 高节点数确认后加载
|
||||
const handleHighNodeConfirm = useCallback(() => {
|
||||
setShowHighNodeWarning(false) // 立即关闭高节点数警告对话框
|
||||
// 使用 setTimeout 确保对话框关闭后再开始加载
|
||||
setTimeout(() => {
|
||||
loadGraph(true)
|
||||
}, 0)
|
||||
}, [loadGraph])
|
||||
|
||||
// 节点点击事件
|
||||
const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
|
||||
setSelectedNodeData({
|
||||
id: node.id,
|
||||
type: node.type as 'entity' | 'paragraph',
|
||||
content: node.data.content,
|
||||
})
|
||||
}, [])
|
||||
|
||||
// 当节点数量或类型改变时自动刷新
|
||||
useEffect(() => {
|
||||
// 跳过初始确认对话框时的加载
|
||||
if (showInitialConfirm) return
|
||||
// 只有用户确认后才能自动刷新
|
||||
if (!userConfirmedLoad) return
|
||||
|
||||
// 参数变化时加载,会根据节点数自动判断是否需要警告
|
||||
loadGraph()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [nodeLimit, nodeType, showInitialConfirm, userConfirmedLoad]) // 不依赖 loadGraph
|
||||
|
||||
// 边点击事件
|
||||
const onEdgeClick = useCallback((_: React.MouseEvent, edge: Edge) => {
|
||||
const sourceNode = nodes.find(n => n.id === edge.source)
|
||||
const targetNode = nodes.find(n => n.id === edge.target)
|
||||
const edgeData = edges.find(e => e.id === edge.id)
|
||||
|
||||
if (sourceNode && targetNode && edgeData) {
|
||||
setSelectedEdgeData({
|
||||
source: {
|
||||
id: sourceNode.id,
|
||||
type: sourceNode.type as 'entity' | 'paragraph',
|
||||
content: sourceNode.data.content,
|
||||
},
|
||||
target: {
|
||||
id: targetNode.id,
|
||||
type: targetNode.type as 'entity' | 'paragraph',
|
||||
content: targetNode.data.content,
|
||||
},
|
||||
edge: {
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
weight: parseFloat(edge.label as string || '0'),
|
||||
},
|
||||
})
|
||||
}
|
||||
}, [nodes, edges])
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 顶部工具栏 */}
|
||||
<div className="flex-shrink-0 p-4 border-b bg-background">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">麦麦知识库图谱</h1>
|
||||
<p className="text-muted-foreground mt-1">可视化知识实体与关系网络</p>
|
||||
</div>
|
||||
|
||||
{stats && (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Database className="h-3 w-3" />
|
||||
节点: {stats.total_nodes}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Network className="h-3 w-3" />
|
||||
边: {stats.total_edges}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Info className="h-3 w-3" />
|
||||
实体: {stats.entity_nodes}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<FileText className="h-3 w-3" />
|
||||
段落: {stats.paragraph_nodes}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 搜索和控制栏 */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||
<div className="flex-1 flex gap-2">
|
||||
<Input
|
||||
placeholder="搜索节点内容..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button onClick={handleSearch} size="sm">
|
||||
<Search className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={handleResetHighlight} variant="outline" size="sm">
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Select value={nodeType} onValueChange={(v) => setNodeType(v as 'all' | 'entity' | 'paragraph')}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部节点</SelectItem>
|
||||
<SelectItem value="entity">仅实体</SelectItem>
|
||||
<SelectItem value="paragraph">仅段落</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={
|
||||
nodeLimit === 10000 ? 'all' :
|
||||
showCustomInput ? 'custom' :
|
||||
nodeLimit.toString()
|
||||
}
|
||||
onValueChange={(v) => {
|
||||
if (v === 'custom') {
|
||||
setShowCustomInput(true)
|
||||
setCustomLimit(nodeLimit.toString())
|
||||
} else if (v === 'all') {
|
||||
setShowCustomInput(false)
|
||||
setNodeLimit(10000)
|
||||
} else {
|
||||
setShowCustomInput(false)
|
||||
setNodeLimit(Number(v))
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="50">50 节点</SelectItem>
|
||||
<SelectItem value="100">100 节点</SelectItem>
|
||||
<SelectItem value="200">200 节点</SelectItem>
|
||||
<SelectItem value="500">500 节点</SelectItem>
|
||||
<SelectItem value="1000">1000 节点</SelectItem>
|
||||
<SelectItem value="all">全部 (最多10000)</SelectItem>
|
||||
<SelectItem value="custom">自定义...</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{showCustomInput && (
|
||||
<Input
|
||||
type="number"
|
||||
min="50"
|
||||
value={customLimit}
|
||||
onChange={(e) => setCustomLimit(e.target.value)}
|
||||
onBlur={() => {
|
||||
const num = parseInt(customLimit)
|
||||
if (!isNaN(num) && num >= 50) {
|
||||
setNodeLimit(num)
|
||||
} else {
|
||||
setCustomLimit('50')
|
||||
setNodeLimit(50)
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const num = parseInt(customLimit)
|
||||
if (!isNaN(num) && num >= 50) {
|
||||
setNodeLimit(num)
|
||||
} else {
|
||||
setCustomLimit('50')
|
||||
setNodeLimit(50)
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="最少50个"
|
||||
className="w-[120px]"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button onClick={() => loadGraph()} variant="outline" size="sm" disabled={loading}>
|
||||
<RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="flex-1 relative">
|
||||
{loading ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">加载知识图谱中...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : nodes.length === 0 ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Database className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold mb-2">知识库为空</h3>
|
||||
<p className="text-muted-foreground">请先导入知识数据</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={onNodeClick}
|
||||
onEdgeClick={onEdgeClick}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
minZoom={0.05}
|
||||
maxZoom={1.5}
|
||||
defaultViewport={{ x: 0, y: 0, zoom: 0.5 }}
|
||||
elevateNodesOnSelect={nodeCount <= 500}
|
||||
nodesDraggable={nodeCount <= 1000}
|
||||
attributionPosition="bottom-left"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={12} size={1} />
|
||||
<Controls />
|
||||
{/* 节点数超过500时禁用MiniMap提升性能 */}
|
||||
{nodeCount <= 500 && (
|
||||
<MiniMap
|
||||
nodeColor={miniMapNodeColor}
|
||||
nodeBorderRadius={8}
|
||||
pannable
|
||||
zoomable
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 图例 */}
|
||||
<Panel position="top-right" className="bg-background/95 backdrop-blur-sm rounded-lg border p-3 shadow-lg">
|
||||
<div className="text-sm font-semibold mb-2">图例</div>
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700" />
|
||||
<span>实体节点</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700" />
|
||||
<span>段落节点</span>
|
||||
</div>
|
||||
{nodeCount > 200 && (
|
||||
<div className="mt-2 pt-2 border-t text-yellow-600 dark:text-yellow-500">
|
||||
<div className="font-semibold">性能模式</div>
|
||||
<div>已禁用动画</div>
|
||||
{nodeCount > 500 && <div>已禁用缩略图</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 节点详情对话框 */}
|
||||
<Dialog open={!!selectedNodeData} onOpenChange={(open) => !open && setSelectedNodeData(null)}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] grid grid-rows-[auto_1fr_auto] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>节点详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedNodeData && (
|
||||
<ScrollArea className="h-full pr-4">
|
||||
<div className="space-y-4 pb-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">类型</label>
|
||||
<div className="mt-1">
|
||||
<Badge variant={selectedNodeData.type === 'entity' ? 'default' : 'secondary'}>
|
||||
{selectedNodeData.type === 'entity' ? '🏷️ 实体' : '📄 段落'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">ID</label>
|
||||
<code className="mt-1 block p-2 bg-muted rounded text-xs break-all">
|
||||
{selectedNodeData.id}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">内容</label>
|
||||
<div className="mt-1 p-3 bg-muted rounded border">
|
||||
<p className="text-sm whitespace-pre-wrap break-words">{selectedNodeData.content}</p>
|
||||
</div>
|
||||
{selectedNodeData.type === 'paragraph' && selectedNodeData.content && selectedNodeData.content.length < 20 && (
|
||||
<div className="mt-2 p-3 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded">
|
||||
<p className="text-xs text-yellow-800 dark:text-yellow-200">
|
||||
💡 <strong>提示：</strong>段落内容显示不完整？
|
||||
<br />
|
||||
您可以在 <strong>配置 → WebUI 服务配置</strong> 中启用 "在知识图谱中加载段落完整内容" 选项，以显示段落的完整文本。
|
||||
<br />
|
||||
注意：此功能会额外再次加载 embedding store，占用约数百MB内存。不建议在生产环境中长期开启。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 边详情对话框 */}
|
||||
<Dialog open={!!selectedEdgeData} onOpenChange={(open) => !open && setSelectedEdgeData(null)}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>边详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedEdgeData && (
|
||||
<ScrollArea className="flex-1 pr-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 min-w-0 p-3 bg-blue-50 dark:bg-blue-950 rounded border-2 border-blue-200 dark:border-blue-800">
|
||||
<div className="text-xs text-muted-foreground mb-1">源节点</div>
|
||||
<div className="font-medium text-sm mb-2 truncate">{selectedEdgeData.source.content}</div>
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{selectedEdgeData.source.id.slice(0, 40)}...
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div className="text-2xl text-muted-foreground flex-shrink-0">→</div>
|
||||
|
||||
<div className="flex-1 min-w-0 p-3 bg-green-50 dark:bg-green-950 rounded border-2 border-green-200 dark:border-green-800">
|
||||
<div className="text-xs text-muted-foreground mb-1">目标节点</div>
|
||||
<div className="font-medium text-sm mb-2 truncate">{selectedEdgeData.target.content}</div>
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{selectedEdgeData.target.id.slice(0, 40)}...
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">权重</label>
|
||||
<div className="mt-1">
|
||||
<Badge variant="outline" className="text-base font-mono">
|
||||
{selectedEdgeData.edge.weight.toFixed(4)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 初始加载确认对话框 */}
|
||||
<AlertDialog open={showInitialConfirm} onOpenChange={setShowInitialConfirm}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>加载知识图谱</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
知识图谱的动态展示会消耗较多系统资源。
|
||||
<br />
|
||||
确定要加载知识图谱吗?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => navigate({ to: '/' })}>
|
||||
取消 (返回首页)
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleInitialConfirm}>
|
||||
确认加载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 高节点数警告对话框 */}
|
||||
<AlertDialog open={showHighNodeWarning} onOpenChange={setShowHighNodeWarning}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>⚠️ 节点数量较多</AlertDialogTitle>
|
||||
<AlertDialogDescription asChild>
|
||||
<div>
|
||||
<p>
|
||||
您正在尝试加载 <strong className="text-orange-600">{nodeLimit >= 10000 ? '全部 (最多10000个)' : nodeLimit}</strong> 个节点。
|
||||
</p>
|
||||
<p className="mt-4">节点数量过多可能导致:</p>
|
||||
<ul className="list-disc list-inside mt-2 space-y-1">
|
||||
<li>页面加载时间较长</li>
|
||||
<li>浏览器卡顿或崩溃</li>
|
||||
<li>系统资源占用过高</li>
|
||||
</ul>
|
||||
<p className="mt-4">建议先选择较少的节点数量 (50-200 个)。</p>
|
||||
</div>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => {
|
||||
setShowHighNodeWarning(false)
|
||||
// 将节点数重置为安全值
|
||||
if (nodeLimit > 200) {
|
||||
setNodeLimit(50)
|
||||
setShowCustomInput(false)
|
||||
}
|
||||
}}>
|
||||
取消
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleHighNodeConfirm} className="bg-orange-600 hover:bg-orange-700">
|
||||
我了解风险，继续加载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
122
dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx
Normal file
122
dashboard/src/routes/resource/knowledge-graph/GraphDialogs.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
|
||||
import type { GraphNode, SelectedEdgeData } from './types'
|
||||
|
||||
interface NodeDetailDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
selectedNodeData: GraphNode | null
|
||||
}
|
||||
|
||||
export function NodeDetailDialog({ open, onOpenChange, selectedNodeData }: NodeDetailDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] grid grid-rows-[auto_1fr_auto] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle>节点详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedNodeData && (
|
||||
<ScrollArea className="h-full pr-4">
|
||||
<div className="space-y-4 pb-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">类型</label>
|
||||
<div className="mt-1">
|
||||
<Badge variant={selectedNodeData.type === 'entity' ? 'default' : 'secondary'}>
|
||||
{selectedNodeData.type === 'entity' ? '🏷️ 实体' : '📄 段落'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">ID</label>
|
||||
<code className="mt-1 block p-2 bg-muted rounded text-xs break-all">
|
||||
{selectedNodeData.id}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">内容</label>
|
||||
<div className="mt-1 p-3 bg-muted rounded border">
|
||||
<p className="text-sm whitespace-pre-wrap break-words">{selectedNodeData.content}</p>
|
||||
</div>
|
||||
{selectedNodeData.type === 'paragraph' && selectedNodeData.content && selectedNodeData.content.length < 20 && (
|
||||
<div className="mt-2 p-3 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded">
|
||||
<p className="text-xs text-yellow-800 dark:text-yellow-200">
|
||||
💡 <strong>提示：</strong>段落内容显示不完整？
|
||||
<br />
|
||||
您可以在 <strong>配置 → WebUI 服务配置</strong> 中启用 "在知识图谱中加载段落完整内容" 选项，以显示段落的完整文本。
|
||||
<br />
|
||||
注意：此功能会额外再次加载 embedding store，占用约数百MB内存。不建议在生产环境中长期开启。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
interface EdgeDetailDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
selectedEdgeData: SelectedEdgeData | null
|
||||
}
|
||||
|
||||
export function EdgeDetailDialog({ open, onOpenChange, selectedEdgeData }: EdgeDetailDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>边详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedEdgeData && (
|
||||
<ScrollArea className="flex-1 pr-4">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 min-w-0 p-3 bg-blue-50 dark:bg-blue-950 rounded border-2 border-blue-200 dark:border-blue-800">
|
||||
<div className="text-xs text-muted-foreground mb-1">源节点</div>
|
||||
<div className="font-medium text-sm mb-2 truncate">{selectedEdgeData.source.content}</div>
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{selectedEdgeData.source.id.slice(0, 40)}...
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div className="text-2xl text-muted-foreground flex-shrink-0">→</div>
|
||||
|
||||
<div className="flex-1 min-w-0 p-3 bg-green-50 dark:bg-green-950 rounded border-2 border-green-200 dark:border-green-800">
|
||||
<div className="text-xs text-muted-foreground mb-1">目标节点</div>
|
||||
<div className="font-medium text-sm mb-2 truncate">{selectedEdgeData.target.content}</div>
|
||||
<code className="text-xs text-muted-foreground truncate block">
|
||||
{selectedEdgeData.target.id.slice(0, 40)}...
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-muted-foreground">权重</label>
|
||||
<div className="mt-1">
|
||||
<Badge variant="outline" className="text-base font-mono">
|
||||
{selectedEdgeData.edge.weight.toFixed(4)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { memo, useCallback } from 'react'
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
Controls,
|
||||
Handle,
|
||||
MiniMap,
|
||||
Panel,
|
||||
Position,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
type Edge,
|
||||
type Node,
|
||||
type NodeTypes,
|
||||
} from 'reactflow'
|
||||
|
||||
import 'reactflow/dist/style.css'
|
||||
import dagre from 'dagre'
|
||||
|
||||
import type { FlowEdge, FlowNode, GraphEdge, GraphNode } from './types'
|
||||
|
||||
const EntityNode = memo(({ data }: { data: { label: string; content: string } }) => {
|
||||
return (
|
||||
<div className="px-4 py-2 shadow-md rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700 min-w-[120px]">
|
||||
<Handle type="target" position={Position.Top} />
|
||||
<div className="font-semibold text-white text-sm truncate max-w-[200px]" title={data.content}>
|
||||
{data.label}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Bottom} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
EntityNode.displayName = 'EntityNode'
|
||||
|
||||
const ParagraphNode = memo(({ data }: { data: { label: string; content: string } }) => {
|
||||
return (
|
||||
<div className="px-3 py-2 shadow-md rounded-md bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700 min-w-[100px]">
|
||||
<Handle type="target" position={Position.Top} />
|
||||
<div className="font-medium text-white text-xs truncate max-w-[150px]" title={data.content}>
|
||||
{data.label}
|
||||
</div>
|
||||
<Handle type="source" position={Position.Bottom} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
ParagraphNode.displayName = 'ParagraphNode'
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
entity: EntityNode,
|
||||
paragraph: ParagraphNode,
|
||||
}
|
||||
|
||||
function calculateLayout(nodes: GraphNode[], edges: GraphEdge[]): { nodes: FlowNode[]; edges: FlowEdge[] } {
|
||||
const dagreGraph = new dagre.graphlib.Graph()
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}))
|
||||
dagreGraph.setGraph({ rankdir: 'TB', ranksep: 100, nodesep: 80 })
|
||||
|
||||
const flowNodes: FlowNode[] = []
|
||||
const flowEdges: FlowEdge[] = []
|
||||
|
||||
nodes.forEach((node) => {
|
||||
dagreGraph.setNode(node.id, { width: 150, height: 50 })
|
||||
})
|
||||
|
||||
edges.forEach((edge) => {
|
||||
dagreGraph.setEdge(edge.source, edge.target)
|
||||
})
|
||||
|
||||
dagre.layout(dagreGraph)
|
||||
|
||||
nodes.forEach((node) => {
|
||||
const nodeWithPosition = dagreGraph.node(node.id)
|
||||
flowNodes.push({
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
position: {
|
||||
x: nodeWithPosition.x - 75,
|
||||
y: nodeWithPosition.y - 25,
|
||||
},
|
||||
data: {
|
||||
label: node.content.slice(0, 20) + (node.content.length > 20 ? '...' : ''),
|
||||
content: node.content,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
edges.forEach((edge, index) => {
|
||||
const flowEdge: FlowEdge = {
|
||||
id: `edge-${index}`,
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
animated: nodes.length <= 200 && edge.weight > 5,
|
||||
style: {
|
||||
strokeWidth: Math.min(edge.weight / 2, 5),
|
||||
opacity: 0.6,
|
||||
},
|
||||
}
|
||||
if (edge.weight > 10 && nodes.length < 100) {
|
||||
flowEdge.label = `${edge.weight.toFixed(0)}`
|
||||
}
|
||||
flowEdges.push(flowEdge)
|
||||
})
|
||||
|
||||
return { nodes: flowNodes, edges: flowEdges }
|
||||
}
|
||||
|
||||
interface GraphVisualizationProps {
|
||||
graphData: { nodes: GraphNode[]; edges: GraphEdge[] }
|
||||
onNodeClick: (event: React.MouseEvent, node: Node) => void
|
||||
onEdgeClick: (event: React.MouseEvent, edge: Edge) => void
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export function GraphVisualization({ graphData, onNodeClick, onEdgeClick, loading = false }: GraphVisualizationProps) {
|
||||
const { nodes: flowNodes, edges: flowEdges } = calculateLayout(graphData.nodes, graphData.edges)
|
||||
const [nodes, , onNodesChange] = useNodesState(flowNodes)
|
||||
const [edges, , onEdgesChange] = useEdgesState(flowEdges)
|
||||
const nodeCount = nodes.length
|
||||
|
||||
const miniMapNodeColor = useCallback((node: Node) => {
|
||||
if (node.type === 'entity') return '#6366f1'
|
||||
if (node.type === 'paragraph') return '#10b981'
|
||||
return '#6b7280'
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={onNodeClick}
|
||||
onEdgeClick={onEdgeClick}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
minZoom={0.05}
|
||||
maxZoom={1.5}
|
||||
defaultViewport={{ x: 0, y: 0, zoom: 0.5 }}
|
||||
elevateNodesOnSelect={nodeCount <= 500}
|
||||
nodesDraggable={nodeCount <= 1000}
|
||||
attributionPosition="bottom-left"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={12} size={1} />
|
||||
<Controls />
|
||||
{nodeCount <= 500 && (
|
||||
<MiniMap
|
||||
nodeColor={miniMapNodeColor}
|
||||
nodeBorderRadius={8}
|
||||
pannable
|
||||
zoomable
|
||||
/>
|
||||
)}
|
||||
|
||||
<Panel position="top-right" className="bg-background/95 backdrop-blur-sm rounded-lg border p-3 shadow-lg">
|
||||
<div className="text-sm font-semibold mb-2">图例</div>
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded bg-gradient-to-br from-blue-500 to-blue-600 border-2 border-blue-700" />
|
||||
<span>实体节点</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded bg-gradient-to-br from-green-500 to-green-600 border-2 border-green-700" />
|
||||
<span>段落节点</span>
|
||||
</div>
|
||||
{nodeCount > 200 && (
|
||||
<div className="mt-2 pt-2 border-t text-yellow-600 dark:text-yellow-500">
|
||||
<div className="font-semibold">性能模式</div>
|
||||
<div>已禁用动画</div>
|
||||
{nodeCount > 500 && <div>已禁用缩略图</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
)
|
||||
}
|
||||
1
dashboard/src/routes/resource/knowledge-graph/index.ts
Normal file
1
dashboard/src/routes/resource/knowledge-graph/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { KnowledgeGraphPage } from './index.tsx'
|
||||
427
dashboard/src/routes/resource/knowledge-graph/index.tsx
Normal file
427
dashboard/src/routes/resource/knowledge-graph/index.tsx
Normal file
@@ -0,0 +1,427 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import type { Edge, Node } from 'reactflow'
|
||||
|
||||
import { Database, FileText, Info, Network, RefreshCw, Search } from 'lucide-react'
|
||||
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import {
|
||||
getKnowledgeGraph,
|
||||
getKnowledgeStats,
|
||||
searchKnowledgeNode,
|
||||
type KnowledgeStats,
|
||||
} from '@/lib/knowledge-api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { EdgeDetailDialog, NodeDetailDialog } from './GraphDialogs'
|
||||
import { GraphVisualization } from './GraphVisualization'
|
||||
import type { GraphData, GraphNode, SelectedEdgeData } from './types'
|
||||
|
||||
export function KnowledgeGraphPage() {
|
||||
const navigate = useNavigate()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [stats, setStats] = useState<KnowledgeStats | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [nodeType, setNodeType] = useState<'all' | 'entity' | 'paragraph'>('all')
|
||||
const [nodeLimit, setNodeLimit] = useState(50)
|
||||
const [customLimit, setCustomLimit] = useState('50')
|
||||
const [showCustomInput, setShowCustomInput] = useState(false)
|
||||
const [showInitialConfirm, setShowInitialConfirm] = useState(true)
|
||||
const [userConfirmedLoad, setUserConfirmedLoad] = useState(false)
|
||||
const [showHighNodeWarning, setShowHighNodeWarning] = useState(false)
|
||||
const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] })
|
||||
const [selectedNodeData, setSelectedNodeData] = useState<GraphNode | null>(null)
|
||||
const [selectedEdgeData, setSelectedEdgeData] = useState<SelectedEdgeData | null>(null)
|
||||
const { toast } = useToast()
|
||||
|
||||
const loadGraph = useCallback(async (skipWarning = false) => {
|
||||
try {
|
||||
if (!skipWarning && nodeLimit > 200) {
|
||||
setShowHighNodeWarning(true)
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
const [graphResult, statsData] = await Promise.all([
|
||||
getKnowledgeGraph(nodeLimit, nodeType),
|
||||
getKnowledgeStats(),
|
||||
])
|
||||
|
||||
setStats(statsData)
|
||||
|
||||
if (graphResult.nodes.length === 0) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '知识库为空，请先导入知识数据',
|
||||
})
|
||||
setGraphData({ nodes: [], edges: [] })
|
||||
return
|
||||
}
|
||||
|
||||
setGraphData({ nodes: graphResult.nodes, edges: graphResult.edges })
|
||||
|
||||
if (statsData && statsData.total_nodes > nodeLimit) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: `知识图谱包含 ${statsData.total_nodes} 个节点，当前显示 ${graphResult.nodes.length} 个`,
|
||||
})
|
||||
}
|
||||
|
||||
toast({
|
||||
title: '加载成功',
|
||||
description: `已加载 ${graphResult.nodes.length} 个节点，${graphResult.edges.length} 条边`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('加载知识图谱失败:', error)
|
||||
toast({
|
||||
title: '加载失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [nodeLimit, nodeType, toast])
|
||||
|
||||
const handleSearch = useCallback(async () => {
|
||||
if (!searchQuery.trim()) {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '请输入搜索关键词',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const results = await searchKnowledgeNode(searchQuery)
|
||||
if (results.length === 0) {
|
||||
toast({
|
||||
title: '未找到',
|
||||
description: '没有找到匹配的节点',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
toast({
|
||||
title: '搜索完成',
|
||||
description: `找到 ${results.length} 个匹配节点`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error)
|
||||
toast({
|
||||
title: '搜索失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}, [searchQuery, toast])
|
||||
|
||||
const handleResetHighlight = useCallback(() => {
|
||||
toast({
|
||||
title: '提示',
|
||||
description: '已重置高亮',
|
||||
})
|
||||
}, [toast])
|
||||
|
||||
const handleInitialConfirm = useCallback(() => {
|
||||
setShowInitialConfirm(false)
|
||||
setUserConfirmedLoad(true)
|
||||
loadGraph()
|
||||
}, [loadGraph])
|
||||
|
||||
const handleHighNodeConfirm = useCallback(() => {
|
||||
setShowHighNodeWarning(false)
|
||||
setTimeout(() => {
|
||||
loadGraph(true)
|
||||
}, 0)
|
||||
}, [loadGraph])
|
||||
|
||||
const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
|
||||
setSelectedNodeData({
|
||||
id: node.id,
|
||||
type: node.type as 'entity' | 'paragraph',
|
||||
content: node.data.content,
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (showInitialConfirm) return
|
||||
if (!userConfirmedLoad) return
|
||||
|
||||
loadGraph()
|
||||
}, [nodeLimit, nodeType, showInitialConfirm, userConfirmedLoad])
|
||||
|
||||
const onEdgeClick = useCallback((_: React.MouseEvent, edge: Edge) => {
|
||||
const sourceNode = graphData.nodes.find(n => n.id === edge.source)
|
||||
const targetNode = graphData.nodes.find(n => n.id === edge.target)
|
||||
const edgeData = graphData.edges.find(e => e.source === edge.source && e.target === edge.target)
|
||||
|
||||
if (sourceNode && targetNode && edgeData) {
|
||||
setSelectedEdgeData({
|
||||
source: {
|
||||
id: sourceNode.id,
|
||||
type: sourceNode.type as 'entity' | 'paragraph',
|
||||
content: sourceNode.content,
|
||||
},
|
||||
target: {
|
||||
id: targetNode.id,
|
||||
type: targetNode.type as 'entity' | 'paragraph',
|
||||
content: targetNode.content,
|
||||
},
|
||||
edge: {
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
weight: parseFloat(edge.label as string || '0'),
|
||||
},
|
||||
})
|
||||
}
|
||||
}, [graphData])
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex-shrink-0 p-4 border-b bg-background">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">麦麦知识库图谱</h1>
|
||||
<p className="text-muted-foreground mt-1">可视化知识实体与关系网络</p>
|
||||
</div>
|
||||
|
||||
{stats && (
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Database className="h-3 w-3" />
|
||||
节点: {stats.total_nodes}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Network className="h-3 w-3" />
|
||||
边: {stats.total_edges}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Info className="h-3 w-3" />
|
||||
实体: {stats.entity_nodes}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<FileText className="h-3 w-3" />
|
||||
段落: {stats.paragraph_nodes}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||
<div className="flex-1 flex gap-2">
|
||||
<Input
|
||||
placeholder="搜索节点内容..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button onClick={handleSearch} size="sm">
|
||||
<Search className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={handleResetHighlight} variant="outline" size="sm">
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Select value={nodeType} onValueChange={(v) => setNodeType(v as 'all' | 'entity' | 'paragraph')}>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部节点</SelectItem>
|
||||
<SelectItem value="entity">仅实体</SelectItem>
|
||||
<SelectItem value="paragraph">仅段落</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={
|
||||
nodeLimit === 10000 ? 'all' :
|
||||
showCustomInput ? 'custom' :
|
||||
nodeLimit.toString()
|
||||
}
|
||||
onValueChange={(v) => {
|
||||
if (v === 'custom') {
|
||||
setShowCustomInput(true)
|
||||
setCustomLimit(nodeLimit.toString())
|
||||
} else if (v === 'all') {
|
||||
setShowCustomInput(false)
|
||||
setNodeLimit(10000)
|
||||
} else {
|
||||
setShowCustomInput(false)
|
||||
setNodeLimit(Number(v))
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[120px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="50">50 节点</SelectItem>
|
||||
<SelectItem value="100">100 节点</SelectItem>
|
||||
<SelectItem value="200">200 节点</SelectItem>
|
||||
<SelectItem value="500">500 节点</SelectItem>
|
||||
<SelectItem value="1000">1000 节点</SelectItem>
|
||||
<SelectItem value="all">全部 (最多10000)</SelectItem>
|
||||
<SelectItem value="custom">自定义...</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{showCustomInput && (
|
||||
<Input
|
||||
type="number"
|
||||
min="50"
|
||||
value={customLimit}
|
||||
onChange={(e) => setCustomLimit(e.target.value)}
|
||||
onBlur={() => {
|
||||
const num = parseInt(customLimit)
|
||||
if (!isNaN(num) && num >= 50) {
|
||||
setNodeLimit(num)
|
||||
} else {
|
||||
setCustomLimit('50')
|
||||
setNodeLimit(50)
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const num = parseInt(customLimit)
|
||||
if (!isNaN(num) && num >= 50) {
|
||||
setNodeLimit(num)
|
||||
} else {
|
||||
setCustomLimit('50')
|
||||
setNodeLimit(50)
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder="最少50个"
|
||||
className="w-[120px]"
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button onClick={() => loadGraph()} variant="outline" size="sm" disabled={loading}>
|
||||
<RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 relative">
|
||||
{loading ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2 text-muted-foreground" />
|
||||
<p className="text-muted-foreground">加载知识图谱中...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : graphData.nodes.length === 0 ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Database className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||||
<h3 className="text-lg font-semibold mb-2">知识库为空</h3>
|
||||
<p className="text-muted-foreground">请先导入知识数据</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<GraphVisualization
|
||||
graphData={graphData}
|
||||
onNodeClick={onNodeClick}
|
||||
onEdgeClick={onEdgeClick}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<NodeDetailDialog
|
||||
open={!!selectedNodeData}
|
||||
onOpenChange={(open) => !open && setSelectedNodeData(null)}
|
||||
selectedNodeData={selectedNodeData}
|
||||
/>
|
||||
|
||||
<EdgeDetailDialog
|
||||
open={!!selectedEdgeData}
|
||||
onOpenChange={(open) => !open && setSelectedEdgeData(null)}
|
||||
selectedEdgeData={selectedEdgeData}
|
||||
/>
|
||||
|
||||
<AlertDialog open={showInitialConfirm} onOpenChange={setShowInitialConfirm}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>加载知识图谱</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
知识图谱的动态展示会消耗较多系统资源。
|
||||
<br />
|
||||
确定要加载知识图谱吗?
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => navigate({ to: '/' })}>
|
||||
取消 (返回首页)
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleInitialConfirm}>
|
||||
确认加载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog open={showHighNodeWarning} onOpenChange={setShowHighNodeWarning}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>⚠️ 节点数量较多</AlertDialogTitle>
|
||||
<AlertDialogDescription asChild>
|
||||
<div>
|
||||
<p>
|
||||
您正在尝试加载 <strong className="text-orange-600">{nodeLimit >= 10000 ? '全部 (最多10000个)' : nodeLimit}</strong> 个节点。
|
||||
</p>
|
||||
<p className="mt-4">节点数量过多可能导致:</p>
|
||||
<ul className="list-disc list-inside mt-2 space-y-1">
|
||||
<li>页面加载时间较长</li>
|
||||
<li>浏览器卡顿或崩溃</li>
|
||||
<li>系统资源占用过高</li>
|
||||
</ul>
|
||||
<p className="mt-4">建议先选择较少的节点数量 (50-200 个)。</p>
|
||||
</div>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => {
|
||||
setShowHighNodeWarning(false)
|
||||
if (nodeLimit > 200) {
|
||||
setNodeLimit(50)
|
||||
setShowCustomInput(false)
|
||||
}
|
||||
}}>
|
||||
取消
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleHighNodeConfirm} className="bg-orange-600 hover:bg-orange-700">
|
||||
我了解风险，继续加载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
dashboard/src/routes/resource/knowledge-graph/types.ts
Normal file
39
dashboard/src/routes/resource/knowledge-graph/types.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { Node, Edge } from 'reactflow'
|
||||
|
||||
export interface GraphNode {
|
||||
id: string
|
||||
type: 'entity' | 'paragraph'
|
||||
content: string
|
||||
}
|
||||
|
||||
export interface GraphEdge {
|
||||
source: string
|
||||
target: string
|
||||
weight: number
|
||||
}
|
||||
|
||||
export interface GraphData {
|
||||
nodes: GraphNode[]
|
||||
edges: GraphEdge[]
|
||||
}
|
||||
|
||||
export interface GraphStats {
|
||||
total_nodes: number
|
||||
total_edges: number
|
||||
entity_nodes: number
|
||||
paragraph_nodes: number
|
||||
}
|
||||
|
||||
export interface FlowNodeData {
|
||||
label: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export type FlowNode = Node<FlowNodeData>
|
||||
export type FlowEdge = Edge
|
||||
|
||||
export interface SelectedEdgeData {
|
||||
source: GraphNode
|
||||
target: GraphNode
|
||||
edge: GraphEdge
|
||||
}
|
||||
Reference in New Issue
Block a user