import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Database, Server, Cpu, FileText, Send, ArrowRight, HardDrive, Layout, User } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#0f172a', spark: '#e25a1c', minio: '#c72e49', dremio: '#33b5e5', parquet: '#fbbf24', text: '#f8fafc', line: '#334155', accent: '#22d3ee' }; const DataPipelineAnimation = () => { const [frame, setFrame] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画阶段控制 (0-100 循环) // 0-20: Spark 生成 Parquet // 20-40: 上传到 MinIO // 40-55: 客户端发送 COPY INTO // 55-85: Dremio 从 MinIO 读取并写入表 // 85-100: 完成状态展示 const [stage, setStage] = useState(0); useEffect(() => { const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 100; // 缩放时间 const currentFrame = Math.floor(elapsed % 150); // 总周期 15秒 setFrame(currentFrame); // 映射 frame 到 stage (0-100) const stageVal = (currentFrame / 150) * 100; setStage(stageVal); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 节点坐标定义 const nodes = { spark: { x: 200, y: 200, label: 'Spark 集群' }, minio: { x: 600, y: 200, label: 'MinIO 对象存储' }, client: { x: 1000, y: 450, label: '客户端' }, dremio: { x: 600, y: 500, label: 'Dremio 引擎' }, }; // 生成粒子数据 const particles = useMemo(() => { return Array.from({ length: 8 }).map((_, i) => ({ id: i, delay: i * 5, offsetY: (i - 3.5) * 15 })); }, []); // 计算 Parquet 文件在 Spark 生成时的位置 const getSparkToMinioPos = (pStage: number, delay: number) => { const progress = Math.max(0, Math.min(1, (pStage - 10 - delay) / 20)); return { x: nodes.spark.x + (nodes.minio.x - nodes.spark.x) * progress, y: nodes.spark.y + (nodes.minio.y - nodes.spark.y) * progress, opacity: progress > 0 && progress < 1 ? 1 : 0 }; }; // 计算 Dremio 从 MinIO 抽取的 Parquet 粒子位置 const getMinioToDremioPos = (pStage: number, delay: number) => { const progress = Math.max(0, Math.min(1, (pStage - 58 - delay) / 20)); return { x: nodes.minio.x + (nodes.dremio.x - nodes.minio.x) * progress, y: nodes.minio.y + (nodes.dremio.y - nodes.minio.y) * progress, opacity: progress > 0 && progress < 1 ? 1 : 0 }; }; return (