'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // Coordinate Definitions const POSITIONS = { CLIENT: { x: 100, y: 500, label: '用户 (Client)' }, RESOLVER: { x: 400, y: 350, label: '递归解析器 (Local DNS)' }, ROOT: { x: 500, y: 100, label: '根域名服务器 (Root .)' }, TLD: { x: 750, y: 180, label: '顶级域名服务器 (TLD .com)' }, AUTH: { x: 850, y: 400, label: '权威域名服务器 (Auth example.com)' }, }; const COLORS = { bg: '#0f172a', lineIdle: '#334155', lineActive: '#38bdf8', packetQuery: '#fbbf24', // Amber packetResponse: '#22d3ee', // Cyan text: '#e2e8f0', accent: '#818cf8', success: '#4ade80', }; // Helper for generating random tech background particles const BackgroundParticles = () => { const particles = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2 + 1, opacity: Math.random() * 0.3 + 0.1, duration: Math.random() * 3 + 2, })); }, []); return ( {particles.map((p, i) => ( ))} ); }; // Reusable Server Node Component const ServerNode = ({ x, y, label, isActive, iconType, isSuccess }) => { return ( {/* Glow Effect */} {/* Icon Base */} {/* Tech Icon Graphics */} {iconType === 'client' && ( )} {iconType === 'server' && ( )} {/* Label */} {label} ); }; // Connection Line Component const Connection = ({ start, end, active }) => { return ( ); }; export const DNSResolutionAnimation = () => { const [step, setStep] = useState(0); const [logs, setLogs] = useState([]); const [packet, setPacket] = useState({ x: POSITIONS.CLIENT.x, y: POSITIONS.CLIENT.y, visible: false, type: 'query' }); // Animation Sequence Logic useEffect(() => { let timeoutId: NodeJS.Timeout; const addLog = (text: string) => { setLogs(prev => [...prev.slice(-4), text]); // Keep last 5 logs }; const runSequence = async () => { const wait = (ms: number) => new Promise(r => { timeoutId = setTimeout(r, ms); }); // Step 0: Initial State setStep(0); setLogs([]); setPacket({ x: POSITIONS.CLIENT.x, y: POSITIONS.CLIENT.y, visible: false, type: 'query' }); await wait(1000); // Step 1: User types URL setStep(1); addLog("> 输入网址: www.example.com"); await wait(1500); // Step 2: Client -> Resolver setStep(2); addLog("> 查询本地 DNS 缓存... 未命中"); addLog("> 向递归解析器发送查询请求"); setPacket({ x: POSITIONS.CLIENT.x, y: POSITIONS.CLIENT.y, visible: true, type: 'query' }); await wait(100); setPacket({ x: POSITIONS.RESOLVER.x, y: POSITIONS.RESOLVER.y, visible: true, type: 'query' }); await wait(1000); // Step 3: Resolver -> Root setStep(3); addLog("> 解析器向根服务器 (.) 询问"); setPacket({ x: POSITIONS.ROOT.x, y: POSITIONS.ROOT.y, visible: true, type: 'query' }); await wait(1000); // Step 4: Root -> Resolver setStep(4); addLog("> 根服务器: 我不知道IP，但去问 .com TLD"); setPacket({ x: POSITIONS.RESOLVER.x, y: POSITIONS.RESOLVER.y, visible: true, type: 'response' }); await wait(1000); // Step 5: Resolver -> TLD setStep(5); addLog("> 解析器向 TLD服务器 (.com) 询问"); setPacket({ x: POSITIONS.TLD.x, y: POSITIONS.TLD.y, visible: true, type: 'query' }); await wait(1000); // Step 6: TLD -> Resolver setStep(6); addLog("> TLD: 去问 example.com 的权威服务器"); setPacket({ x: POSITIONS.RESOLVER.x, y: POSITIONS.RESOLVER.y, visible: true, type: 'response' }); await wait(1000); // Step 7: Resolver -> Auth setStep(7); addLog("> 解析器向权威服务器询问 www.example.com"); setPacket({ x: POSITIONS.AUTH.x, y: POSITIONS.AUTH.y, visible: true, type: 'query' }); await wait(1000); // Step 8: Auth -> Resolver setStep(8); addLog("> 权威服务器: IP 是 93.184.216.34"); setPacket({ x: POSITIONS.RESOLVER.x, y: POSITIONS.RESOLVER.y, visible: true, type: 'response' }); await wait(1000); // Step 9: Resolver -> Client setStep(9); addLog("> 解析器缓存结果并返回给用户"); setPacket({ x: POSITIONS.CLIENT.x, y: POSITIONS.CLIENT.y, visible: true, type: 'response' }); await wait(1000); // Step 10: Success setStep(10); addLog("> 解析完成! 开始建立 TCP 连接..."); setPacket({ ...packet, visible: false }); await wait(3000); // Restart runSequence(); }; runSequence(); return () => clearTimeout(timeoutId); }, []); return ( ); };