```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const SERVER_X = 250; const DEVICE_X = 950; const GROUND_Y = 400; // 颜色定义 const COLORS = { bg: '#0f172a', grid: '#1e293b', serverBase: '#1e40af', serverHighlight: '#3b82f6', serverGlow: 'rgba(59, 130, 246, 0.5)', deviceBase: '#334155', deviceHighlight: '#94a3b8', snmp: '#f97316', // Orange snmpTrap: '#ef4444', // Red netconf: '#06b6d4', // Cyan netconfFlow: '#22d3ee', netconfLock: '#10b981', // Emerald text: '#e2e8f0', textDim: '#64748b' }; export default function NetworkProtocolAnimation() { const [time, setTime] = useState(0); const reqRef = useRef(0); const startTimeRef = useRef(0); // 动画循环 useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; setTime(elapsed); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); // 周期定义 (16秒为一个完整大循环) // 0-8s: SNMP // 8-16s: NETCONF const CYCLE_DURATION = 16000; const normalizedTime = time % CYCLE_DURATION; const isSnmpPhase = normalizedTime < 8000; const phaseProgress = isSnmpPhase ? normalizedTime : normalizedTime - 8000; // --- 2.5D 几何体绘制组件 --- const IsometricServer = ({ x, y }) => { // 简单的等轴侧服务器堆叠 const w = 60; // 半宽 const h = 30; // 每一层的高度 const offset = 15; // 顶面倾斜高度 return ( {/* 底部光晕 */} {/* 服务器机架主体 */} {[0, 1, 2].map(i => { const dy = i * -35; return ( {/* 左侧面 */} {/* 右侧面 */} {/* 顶面 */} {/* 灯光装饰 */} ); })} {/* 标签 */} NMS 控制器 Manager ); }; const IsometricDevice = ({ x, y }) => { const w = 80; const h = 40; const offset = 20; return ( {/* 底部光晕 */} {/* 设备主体 - 类似交换机/路由器 */} {/* 左侧面 */} {/* 右侧面 */} {/* 顶面 */} {/* 端口纹理 (在右侧面上) */} {[0, 1, 2, 3].map(i => ( ))} 网络设备 Agent / Server ); }; // --- 动画逻辑组件 --- // SNMP 阶段动画 const SnmpAnimation = ({ progress }) => { // 0-2500ms: Get-Request (Left -> Right) // 2500-4000ms: MIB Processing // 4000-6000ms: Response (Right -> Left) // 6000-8000ms: Trap (Right -> Left Fast) const start = { x: SERVER_X + 60, y: GROUND_Y - 40 }; const end = { x: DEVICE_X - 60, y: GROUND_Y - 40 }; // 计算Get-Request位置 let packetPos = { x: start.x, y: start.y, opacity: 0 }; let packetText = ""; if (progress < 2500) { const p = Math.min(progress / 2000, 1); // Easing out const ease = 1 - Math.pow(1 - p, 3); packetPos.x = start.x + (end.x - start.x) * ease; packetPos.opacity = 1; packetText = "Get-Request"; } // MIB Tree 显示 const showMib = progress > 2000 && progress < 4500; const mibOpacity = showMib ? (progress < 2500 ? (progress - 2000)/500 : (progress > 4000 ? (4500-progress)/500 : 1)) : 0; // Response 位置 let responsePos = { x: end.x, y: end.y, opacity: 0 }; if (progress > 3500 && progress < 5500) { const p = Math.min((progress - 3500) / 1500, 1); const ease = 1 - Math.pow(1 - p, 3); responsePos.x = end.x + (start.x - end.x) * ease; // Backwards responsePos.opacity = 1; } // Trap 位置 (偶尔发生) let trapPos = { x: end.x, y: end.y + 30, opacity: 0 }; if (progress > 6000 && progress < 7500) { const p = Math.min((progress - 6000) / 1000, 1); trapPos.x = end.x + (start.x - end.x) * p; trapPos.opacity = 1 - p; // Fade out as it travels } return ( {/* 虚线路径 */} {/* Get Request Packet */} {packetText} {/* MIB Tree Projection */} MIB OID Query {/* Response Packet */} Response {/* Trap Packet */} TRAP! ); }; // NETCONF 阶段动画 const NetconfAnimation = ({ progress }) => { const start = { x: SERVER_X + 60, y: GROUND_Y - 40 }; const end = { x: DEVICE_X - 60, y: GROUND_Y - 40 }; const distance = end.x - start.x; // 管道 const pipeOpacity = progress < 1000 ? progress / 1000 : 1; // 数据流 (多个代码块) // 使用 progress 生成位移 const flowOffset = (progress * 0.3) % 200; // 速度 // Commit 锁动画 (每4秒触发一次) const commitCycle = progress % 4000; const isLocking = commitCycle > 2500 && commitCycle < 3500; const lockState = isLocking ? 'closed' : 'open'; return ( {/* SSH 管道 */} {/* XML/RPC 数据流 */} {Array.from({ length: 6 }).map((_, i) => { const xPos = start.x + ((flowOffset + i * 150) % distance); return ( <rpc> ); })} {/* Transaction / Commit Animation */} {/* Candidate Datastore */} Candidate {/* Running Datastore */} Running {/* Arrow */} {/* Lock Icon */} {isLocking ? "Commit (Atomic)" : "Edit Config"} ); }; return (

); } ```