import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; // 配色方案：科技蓝/青色为主，警告黄，错误红 const THEME = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 primary: '#0ea5e9', // Sky 500 accent: '#10b981', // Emerald 500 warn: '#f59e0b', // Amber 500 danger: '#ef4444', // Red 500 textMain: '#f1f5f9', // Slate 100 textSub: '#94a3b8', // Slate 400 glowBlue: 'rgba(14, 165, 233, 0.6)', glowGreen: 'rgba(16, 185, 129, 0.6)', glowWarn: 'rgba(245, 158, 11, 0.6)', }; // 缓动函数 const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; export default function DhcpRenewalAdvanced() { // ---------------- Refs & State ---------------- const stateRef = useRef({ phase: 'IDLE', // IDLE, SEND_REQ, PROCESSING, SEND_ACK, SUCCESS leaseVal: 0, // 0.0 -> 0.5 (T1) packetPos: 0, // 0.0 -> 1.0 timer: 0, // 通用帧计数器 serverActivity: 0, // 服务器负载动画值 particles: [], // 背景粒子 dataBits: [], // 传输线路上的数据流粒子 }); // 用于触发重绘的 tick const [, setTick] = useState(0); // ---------------- Initialization ---------------- // 初始化背景粒子 useMemo(() => { const parts = []; for (let i = 0; i < 40; i++) { parts.push({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, speed: Math.random() * 0.5 + 0.1, size: Math.random() * 1.5 + 0.5, alpha: Math.random() * 0.5 + 0.1, }); } stateRef.current.particles = parts; // 初始化线路数据流粒子 const bits = []; for (let i = 0; i < 10; i++) { bits.push({ pos: Math.random(), // 0-1 speed: Math.random() * 0.005 + 0.002, }); } stateRef.current.dataBits = bits; }, []); // ---------------- Animation Loop ---------------- useEffect(() => { let rafId; const loop = () => { const state = stateRef.current; // 1. 更新背景粒子 state.particles.forEach(p => { p.y -= p.speed; if (p.y < 0) p.y = VIEW_HEIGHT; }); // 2. 更新线路装饰数据流 (始终流动，增加活跃感) state.dataBits.forEach(b => { b.pos += b.speed; if (b.pos > 1) b.pos = 0; }); // 3. 状态机逻辑 switch (state.phase) { case 'IDLE': // 模拟时间流逝，逼近 T1 (50%) state.leaseVal += 0.0015; state.serverActivity *= 0.9; // 服务器休息 if (state.leaseVal >= 0.5) { state.leaseVal = 0.5; // 锁定在 T1 state.phase = 'SEND_REQ'; state.packetPos = 0; state.timer = 0; } break; case 'SEND_REQ': // 发送 Unicast Request state.packetPos += 0.015; state.serverActivity = 0.2; // 服务器预热 if (state.packetPos >= 1) { state.packetPos = 1; state.phase = 'PROCESSING'; state.timer = 0; } break; case 'PROCESSING': // 服务器处理中 state.timer++; // 模拟服务器负载波动 state.serverActivity = 0.5 + Math.sin(state.timer * 0.2) * 0.4; if (state.timer > 80) { // 停留约 1.3 秒 state.phase = 'SEND_ACK'; state.packetPos = 0; } break; case 'SEND_ACK': // 发送 ACK state.packetPos += 0.015; state.serverActivity = 0.8; if (state.packetPos >= 1) { state.packetPos = 1; state.phase = 'SUCCESS'; state.timer = 0; } break; case 'SUCCESS': // 成功展示 & 重置 state.timer++; state.serverActivity *= 0.95; // 租约条回弹效果 (视觉上重置) if (state.leaseVal > 0) { state.leaseVal -= 0.01; if (state.leaseVal < 0) state.leaseVal = 0; } if (state.timer > 120) { // 展示 2 秒成功状态 state.phase = 'IDLE'; state.leaseVal = 0; state.packetPos = 0; } break; default: break; } // 触发 React 渲染 setTick(prev => prev + 1); rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, []); // ---------------- Render Helpers ---------------- const { phase, leaseVal, packetPos, serverActivity, particles, dataBits, timer } = stateRef.current; // 坐标定义 const clientPos = { x: 160, y: 260 }; const serverPos = { x: 640, y: 260 }; // 贝塞尔曲线控制点 (让连线稍微向下弯曲) const controlY = 320; const pathD = `M ${clientPos.x + 40} ${clientPos.y} Q ${(clientPos.x + serverPos.x)/2} ${controlY} ${serverPos.x - 40} ${serverPos.y}`; // 计算数据包位置 let packetX = 0; let packetY = 0; let showPacket = false; let packetType = ''; // 'REQ' or 'ACK' if (phase === 'SEND_REQ' || (phase === 'PROCESSING' && packetPos === 1)) { showPacket = true; packetType = 'REQ'; const t = phase === 'PROCESSING' ? 1 : easeInOutQuad(packetPos); // 二次贝塞尔曲线公式 const p0 = { x: clientPos.x + 40, y: clientPos.y }; const p1 = { x: (clientPos.x + serverPos.x)/2, y: controlY }; const p2 = { x: serverPos.x - 40, y: serverPos.y }; packetX = (1-t)*(1-t)*p0.x + 2*(1-t)*t*p1.x + t*t*p2.x; packetY = (1-t)*(1-t)*p0.y + 2*(1-t)*t*p1.y + t*t*p2.y; } else if (phase === 'SEND_ACK' || phase === 'SUCCESS') { if (phase === 'SUCCESS' && timer > 20) showPacket = false; // 成功后不久隐藏包 else { showPacket = true; packetType = 'ACK'; const t = phase === 'SUCCESS' ? 1 : easeInOutQuad(packetPos); // 反向路径 const p0 = { x: serverPos.x - 40, y: serverPos.y }; const p1 = { x: (clientPos.x + serverPos.x)/2, y: controlY }; const p2 = { x: clientPos.x + 40, y: clientPos.y }; packetX = (1-t)*(1-t)*p0.x + 2*(1-t)*t*p1.x + t*t*p2.x; packetY = (1-t)*(1-t)*p0.y + 2*(1-t)*t*p1.y + t*t*p2.y; } } // 状态文案 let mainStatus = "租约正常 (Active)"; let subStatus = "等待 T1 定时器触发..."; let statusColor = THEME.primary; if (phase === 'SEND_REQ') { mainStatus = "发送续约请求 (Sending Request)"; subStatus = "单播 (Unicast) -> DHCP Server"; statusColor = THEME.warn; } else if (phase === 'PROCESSING') { mainStatus = "服务器处理中 (Processing)"; subStatus = "验证 Client MAC & IP 对应关系"; statusColor = THEME.primary; } else if (phase === 'SEND_ACK') { mainStatus = "发送确认 (Sending ACK)"; subStatus = "单播 (Unicast) -> Client"; statusColor = THEME.accent; } else if (phase === 'SUCCESS') { mainStatus = "续约成功 (Renewed)"; subStatus = "租约时间重置，T1/T2 计时器重启"; statusColor = THEME.accent; } // ---------------- JSX ---------------- return ( ); }