'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const COLORS = { bg: '#0f172a', grid: '#1e293b', text: '#cbd5e1', highlight: '#38bdf8', app: '#f472b6', // Pink tcp: '#818cf8', // Indigo ip: '#34d399', // Emerald eth: '#fbbf24', // Amber binary: '#00ffcc', }; const LAYERS = [ { id: 'app', name: 'Application', label: '应用层', y: 100, color: COLORS.app }, { id: 'transport', name: 'Transport', label: '传输层', y: 220, color: COLORS.tcp }, { id: 'network', name: 'Network', label: '网络层', y: 340, color: COLORS.ip }, { id: 'link', name: 'Link', label: '链路层', y: 460, color: COLORS.eth }, ]; export default function NetworkProtocolAnimation() { // Animation State const [phase, setPhase] = useState('idle'); // idle, encap, transmit, decap, complete const [packetPos, setPacketPos] = useState({ x: 200, y: 100 }); const [headers, setHeaders] = useState(['DATA']); const [log, setLog] = useState([]); const [binaryStream, setBinaryStream] = useState(''); // Refs for animation loop const stepRef = useRef(0); const timeoutRef = useRef(null); const addLog = (msg: string) => { setLog(prev => [msg, ...prev].slice(0, 6)); }; const reset = () => { stepRef.current = 0; setPhase('idle'); setPacketPos({ x: 200, y: 100 }); setHeaders(['DATA']); setBinaryStream(''); setLog([]); startAnimation(); }; const startAnimation = () => { const sequence = async () => { // --- PHASE 1: ENCAPSULATION (SENDER) --- setPhase('encap'); addLog('初始化数据发送请求...'); await wait(1000); // App Layer addLog('应用层: 准备数据载荷 (Payload)'); setPacketPos({ x: 200, y: 100 }); await wait(1000); // Transport Layer addLog('传输层: 封装 TCP 头部'); setPacketPos({ x: 200, y: 220 }); setHeaders(['TCP', 'DATA']); await wait(1000); // Network Layer addLog('网络层: 封装 IP 头部 (源IP -> 目的IP)'); setPacketPos({ x: 200, y: 340 }); setHeaders(['IP', 'TCP', 'DATA']); await wait(1000); // Link Layer addLog('链路层: 封装 Ethernet 帧头与帧尾'); setPacketPos({ x: 200, y: 460 }); setHeaders(['ETH', 'IP', 'TCP', 'DATA', 'FCS']); await wait(1000); // --- PHASE 2: TRANSMISSION --- setPhase('transmit'); addLog('物理层: 转换为比特流并在介质中传输...'); // Move across const steps = 100; const startX = 200; const endX = 1000; for (let i = 0; i <= steps; i++) { const progress = i / steps; // Generate random binary noise visual setBinaryStream(Array.from({length: 16}, () => Math.random() > 0.5 ? '1' : '0').join('')); setPacketPos({ x: startX + (endX - startX) * progress, y: 460 + Math.sin(progress * Math.PI * 4) * 10 // Slight wave motion }); await wait(20); } setBinaryStream(''); // --- PHASE 3: DECAPSULATION (RECEIVER) --- setPhase('decap'); addLog('接收端: 收到数据帧，开始解包...'); setPacketPos({ x: 1000, y: 460 }); await wait(800); // Link Layer Process addLog('链路层: 校验 FCS，移除 Ethernet 帧头'); setHeaders(['IP', 'TCP', 'DATA']); // Remove Eth await wait(1000); // Move Up to Network setPacketPos({ x: 1000, y: 340 }); addLog('网络层: 验证 IP 地址，移除 IP 头部'); await wait(1000); setHeaders(['TCP', 'DATA']); // Remove IP // Move Up to Transport setPacketPos({ x: 1000, y: 220 }); addLog('传输层: 端口映射，移除 TCP 头部'); await wait(1000); setHeaders(['DATA']); // Remove TCP // Move Up to App setPacketPos({ x: 1000, y: 100 }); addLog('应用层: 数据接收完成'); setPhase('complete'); await wait(3000); reset(); }; sequence(); }; const wait = (ms: number) => new Promise(resolve => { timeoutRef.current = setTimeout(resolve, ms); }); useEffect(() => { startAnimation(); return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []); return (

); }