446 lines
16 KiB
TypeScript
446 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useRef, useEffect, useCallback } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog"
|
||
import { Label } from "@/components/ui/label"
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
import {
|
||
GitBranch,
|
||
Database,
|
||
ArrowRight,
|
||
Zap,
|
||
RefreshCw,
|
||
Plus,
|
||
Eye,
|
||
MousePointer2,
|
||
Move,
|
||
Link2,
|
||
Unlink,
|
||
CheckCircle2,
|
||
Settings,
|
||
ZoomIn,
|
||
ZoomOut,
|
||
Maximize2,
|
||
} from "lucide-react"
|
||
|
||
// 节点类型
|
||
interface LineageNode {
|
||
id: string
|
||
type: 'source' | 'transform' | 'target'
|
||
name: string
|
||
database?: string
|
||
collection?: string
|
||
fields: string[]
|
||
x: number
|
||
y: number
|
||
color: string
|
||
}
|
||
|
||
// 连接类型
|
||
interface LineageConnection {
|
||
id: string
|
||
sourceNode: string
|
||
sourceField: string
|
||
targetNode: string
|
||
targetField: string
|
||
}
|
||
|
||
// 节点和连接从API动态加载
|
||
|
||
export default function LineagePage() {
|
||
const [nodes, setNodes] = useState<LineageNode[]>([])
|
||
const [connections, setConnections] = useState<LineageConnection[]>([])
|
||
const [selectedNode, setSelectedNode] = useState<LineageNode | null>(null)
|
||
const [draggingNode, setDraggingNode] = useState<string | null>(null)
|
||
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
|
||
const [connectingFrom, setConnectingFrom] = useState<{ nodeId: string; field: string } | null>(null)
|
||
const [showNodeDetail, setShowNodeDetail] = useState(false)
|
||
const [zoom, setZoom] = useState(0.8)
|
||
const [loading, setLoading] = useState(true)
|
||
const canvasRef = useRef<HTMLDivElement>(null)
|
||
|
||
// 加载真实数据库结构
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
fetch('/api/database-structure?action=lineage')
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
setNodes(data.nodes || [])
|
||
setConnections(data.connections || [])
|
||
}
|
||
})
|
||
.catch(console.error)
|
||
.finally(() => setLoading(false))
|
||
}, [])
|
||
|
||
// 节点拖动开始
|
||
const handleNodeMouseDown = (e: React.MouseEvent, nodeId: string) => {
|
||
e.stopPropagation()
|
||
const node = nodes.find(n => n.id === nodeId)
|
||
if (!node) return
|
||
|
||
setDraggingNode(nodeId)
|
||
setDragOffset({
|
||
x: e.clientX - node.x * zoom,
|
||
y: e.clientY - node.y * zoom,
|
||
})
|
||
}
|
||
|
||
// 节点拖动
|
||
const handleMouseMove = useCallback((e: MouseEvent) => {
|
||
if (!draggingNode || !canvasRef.current) return
|
||
|
||
const rect = canvasRef.current.getBoundingClientRect()
|
||
const newX = (e.clientX - rect.left - dragOffset.x + rect.left) / zoom
|
||
const newY = (e.clientY - rect.top - dragOffset.y + rect.top) / zoom
|
||
|
||
setNodes(prev => prev.map(node =>
|
||
node.id === draggingNode
|
||
? { ...node, x: Math.max(0, newX), y: Math.max(0, newY) }
|
||
: node
|
||
))
|
||
}, [draggingNode, dragOffset, zoom])
|
||
|
||
// 节点拖动结束
|
||
const handleMouseUp = useCallback(() => {
|
||
setDraggingNode(null)
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (draggingNode) {
|
||
window.addEventListener('mousemove', handleMouseMove)
|
||
window.addEventListener('mouseup', handleMouseUp)
|
||
return () => {
|
||
window.removeEventListener('mousemove', handleMouseMove)
|
||
window.removeEventListener('mouseup', handleMouseUp)
|
||
}
|
||
}
|
||
}, [draggingNode, handleMouseMove, handleMouseUp])
|
||
|
||
// 开始连接字段
|
||
const startConnecting = (nodeId: string, field: string) => {
|
||
setConnectingFrom({ nodeId, field })
|
||
}
|
||
|
||
// 完成连接
|
||
const finishConnecting = (nodeId: string, field: string) => {
|
||
if (!connectingFrom || connectingFrom.nodeId === nodeId) {
|
||
setConnectingFrom(null)
|
||
return
|
||
}
|
||
|
||
// 创建新连接
|
||
const newConnection: LineageConnection = {
|
||
id: `conn_${Date.now()}`,
|
||
sourceNode: connectingFrom.nodeId,
|
||
sourceField: connectingFrom.field,
|
||
targetNode: nodeId,
|
||
targetField: field,
|
||
}
|
||
|
||
setConnections(prev => [...prev, newConnection])
|
||
setConnectingFrom(null)
|
||
}
|
||
|
||
// 删除连接
|
||
const deleteConnection = (connId: string) => {
|
||
setConnections(prev => prev.filter(c => c.id !== connId))
|
||
}
|
||
|
||
// 获取节点位置
|
||
const getNodeFieldPosition = (nodeId: string, field: string, isSource: boolean) => {
|
||
const node = nodes.find(n => n.id === nodeId)
|
||
if (!node) return { x: 0, y: 0 }
|
||
|
||
const fieldIndex = node.fields.indexOf(field)
|
||
const nodeWidth = 200
|
||
const headerHeight = 40
|
||
const fieldHeight = 28
|
||
|
||
return {
|
||
x: isSource ? node.x + nodeWidth : node.x,
|
||
y: node.y + headerHeight + fieldIndex * fieldHeight + fieldHeight / 2,
|
||
}
|
||
}
|
||
|
||
// 渲染连接线
|
||
const renderConnections = () => {
|
||
return connections.map(conn => {
|
||
const source = getNodeFieldPosition(conn.sourceNode, conn.sourceField, true)
|
||
const target = getNodeFieldPosition(conn.targetNode, conn.targetField, false)
|
||
|
||
// 贝塞尔曲线
|
||
const midX = (source.x + target.x) / 2
|
||
const path = `M ${source.x} ${source.y} C ${midX} ${source.y}, ${midX} ${target.y}, ${target.x} ${target.y}`
|
||
|
||
return (
|
||
<g key={conn.id} className="group cursor-pointer" onClick={() => deleteConnection(conn.id)}>
|
||
<path
|
||
d={path}
|
||
fill="none"
|
||
stroke="#a78bfa"
|
||
strokeWidth="2"
|
||
className="group-hover:stroke-red-500 transition-colors"
|
||
/>
|
||
<circle cx={source.x} cy={source.y} r="4" fill="#a78bfa" className="group-hover:fill-red-500" />
|
||
<circle cx={target.x} cy={target.y} r="4" fill="#a78bfa" className="group-hover:fill-red-500" />
|
||
</g>
|
||
)
|
||
})
|
||
}
|
||
|
||
// 渲染节点
|
||
const renderNode = (node: LineageNode) => {
|
||
const isConnecting = connectingFrom !== null
|
||
const isSource = connectingFrom?.nodeId === node.id
|
||
|
||
return (
|
||
<div
|
||
key={node.id}
|
||
className={`absolute bg-white rounded-xl shadow-lg border-2 w-[200px] transition-shadow ${
|
||
draggingNode === node.id ? 'shadow-2xl ring-2 ring-purple-500 cursor-grabbing' : 'cursor-grab'
|
||
} ${selectedNode?.id === node.id ? 'ring-2 ring-blue-500' : ''}`}
|
||
style={{
|
||
left: node.x,
|
||
top: node.y,
|
||
borderColor: isSource ? '#ef4444' : '#e5e7eb',
|
||
}}
|
||
onMouseDown={(e) => handleNodeMouseDown(e, node.id)}
|
||
onClick={() => {
|
||
setSelectedNode(node)
|
||
setShowNodeDetail(true)
|
||
}}
|
||
>
|
||
{/* 节点头部 */}
|
||
<div className={`px-3 py-2 rounded-t-lg bg-gradient-to-r ${node.color} flex items-center justify-between`}>
|
||
<div className="flex items-center gap-2">
|
||
{node.type === 'source' && <Database className="h-4 w-4 text-white" />}
|
||
{node.type === 'transform' && <Zap className="h-4 w-4 text-white" />}
|
||
{node.type === 'target' && <GitBranch className="h-4 w-4 text-white" />}
|
||
<span className="text-white text-sm font-medium truncate">{node.name}</span>
|
||
</div>
|
||
<Move className="h-3 w-3 text-white/70" />
|
||
</div>
|
||
|
||
{/* 字段列表 */}
|
||
<div className="p-1">
|
||
{node.fields.map((field, i) => (
|
||
<div
|
||
key={field}
|
||
className={`px-2 py-1 text-xs rounded flex items-center justify-between hover:bg-gray-100 ${
|
||
isConnecting && !isSource ? 'cursor-crosshair hover:bg-purple-100' : ''
|
||
} ${connectingFrom?.field === field && isSource ? 'bg-red-100' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
if (isConnecting && !isSource) {
|
||
finishConnecting(node.id, field)
|
||
} else if (!isConnecting) {
|
||
startConnecting(node.id, field)
|
||
}
|
||
}}
|
||
>
|
||
<span className="font-mono text-gray-700">{field}</span>
|
||
<div className={`w-3 h-3 rounded-full border-2 ${
|
||
connectingFrom?.field === field && isSource
|
||
? 'bg-red-500 border-red-600'
|
||
: 'border-gray-300 hover:border-purple-500 hover:bg-purple-100'
|
||
}`} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 数据库信息 */}
|
||
{node.database && (
|
||
<div className="px-2 py-1 text-xs text-gray-400 border-t">
|
||
{node.database}.{node.collection}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
|
||
<div className="p-6 space-y-4">
|
||
{/* 顶部标题 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">数据血缘</h1>
|
||
<p className="text-sm text-gray-500 mt-1">可视化数据流向，拖拽节点，点击字段创建关联</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{loading && (
|
||
<Badge className="bg-yellow-100 text-yellow-700 animate-pulse">
|
||
<RefreshCw className="h-3 w-3 mr-1 animate-spin" />
|
||
加载真实数据库...
|
||
</Badge>
|
||
)}
|
||
<div className="flex items-center gap-1 bg-white rounded-lg shadow-sm p-1">
|
||
<Button variant="ghost" size="sm" onClick={() => setZoom(z => Math.max(0.5, z - 0.1))}>
|
||
<ZoomOut className="h-4 w-4" />
|
||
</Button>
|
||
<span className="text-sm px-2">{Math.round(zoom * 100)}%</span>
|
||
<Button variant="ghost" size="sm" onClick={() => setZoom(z => Math.min(1.5, z + 0.1))}>
|
||
<ZoomIn className="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="ghost" size="sm" onClick={() => setZoom(0.8)}>
|
||
<Maximize2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<Button variant="outline" onClick={() => window.location.reload()}>
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作提示 */}
|
||
<Card className="border-0 shadow-sm bg-gradient-to-r from-purple-50 to-blue-50">
|
||
<CardContent className="p-3">
|
||
<div className="flex items-center gap-6 text-sm">
|
||
<div className="flex items-center gap-2">
|
||
<MousePointer2 className="h-4 w-4 text-purple-500" />
|
||
<span>拖拽节点移动位置</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Link2 className="h-4 w-4 text-blue-500" />
|
||
<span>点击字段圆点创建连接</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Unlink className="h-4 w-4 text-red-500" />
|
||
<span>点击连线删除关联</span>
|
||
</div>
|
||
{connectingFrom && (
|
||
<Badge className="bg-red-100 text-red-700 animate-pulse">
|
||
正在连接: {connectingFrom.field} → 点击目标字段完成
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 图例 */}
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-gradient-to-r from-blue-400 to-blue-600" />
|
||
<span className="text-sm text-gray-600">数据源</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-gradient-to-r from-purple-400 to-purple-600" />
|
||
<span className="text-sm text-gray-600">转换层</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-4 h-4 rounded bg-gradient-to-r from-emerald-400 to-emerald-600" />
|
||
<span className="text-sm text-gray-600">目标表</span>
|
||
</div>
|
||
<div className="ml-auto text-sm text-gray-500">
|
||
节点: {nodes.length} | 连接: {connections.length}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 画布 */}
|
||
<Card className="border-0 shadow-lg bg-white/80 overflow-hidden">
|
||
<CardContent className="p-0">
|
||
<div
|
||
ref={canvasRef}
|
||
className="relative bg-[linear-gradient(#e5e7eb_1px,transparent_1px),linear-gradient(90deg,#e5e7eb_1px,transparent_1px)] bg-[size:20px_20px]"
|
||
style={{
|
||
height: '650px',
|
||
transform: `scale(${zoom})`,
|
||
transformOrigin: 'top left',
|
||
width: `${100/zoom}%`,
|
||
}}
|
||
>
|
||
{/* SVG连接线层 */}
|
||
<svg
|
||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||
style={{ zIndex: 1 }}
|
||
>
|
||
<g className="pointer-events-auto">
|
||
{renderConnections()}
|
||
</g>
|
||
</svg>
|
||
|
||
{/* 节点层 */}
|
||
<div className="absolute inset-0" style={{ zIndex: 2 }}>
|
||
{nodes.map(renderNode)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 节点详情弹窗 */}
|
||
<Dialog open={showNodeDetail} onOpenChange={setShowNodeDetail}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>{selectedNode?.name}</DialogTitle>
|
||
<DialogDescription>
|
||
{selectedNode?.type === 'source' && '数据源节点'}
|
||
{selectedNode?.type === 'transform' && '转换处理节点'}
|
||
{selectedNode?.type === 'target' && '目标输出节点'}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
{selectedNode && (
|
||
<div className="space-y-4 py-4">
|
||
{selectedNode.database && (
|
||
<div className="space-y-2">
|
||
<Label>数据库</Label>
|
||
<div className="p-2 rounded bg-gray-100 font-mono text-sm">
|
||
{selectedNode.database}.{selectedNode.collection}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
<Label>字段列表 ({selectedNode.fields.length})</Label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{selectedNode.fields.map(field => (
|
||
<Badge key={field} variant="outline" className="font-mono">{field}</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>关联连接</Label>
|
||
<div className="space-y-1">
|
||
{connections.filter(c => c.sourceNode === selectedNode.id || c.targetNode === selectedNode.id).map(conn => {
|
||
const isSource = conn.sourceNode === selectedNode.id
|
||
const otherNode = nodes.find(n => n.id === (isSource ? conn.targetNode : conn.sourceNode))
|
||
return (
|
||
<div key={conn.id} className="flex items-center gap-2 text-sm p-2 rounded bg-gray-50">
|
||
<Badge variant="outline" className="font-mono">{isSource ? conn.sourceField : conn.targetField}</Badge>
|
||
<ArrowRight className="h-3 w-3" />
|
||
<span className="text-gray-500">{otherNode?.name}</span>
|
||
<Badge variant="outline" className="font-mono">{isSource ? conn.targetField : conn.sourceField}</Badge>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setShowNodeDetail(false)}>关闭</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|