'use client'; import React, { useState, useEffect } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const HIERARCHY_LAYERS = [ { id: 'link', name: '链路层 (Link Layer)', color: '#8899a6', bg: '#151a21', y: 450, protocols: ['Ethernet', '802.11 Wi-Fi', 'ARP'] }, { id: 'network', name: '网络层 (Network Layer)', color: '#00ccff', bg: '#0b1e2b', y: 330, protocols: ['IPv4', 'IPv6', 'ICMP', 'IPsec', 'OSPF', 'IGMP'] }, { id: 'transport', name: '传输层 (Transport Layer)', color: '#ffaa00', bg: '#2b1d0b', y: 210, protocols: ['TCP', 'UDP', 'SCTP', 'QUIC'] }, { id: 'app', name: '应用层 (Application Layer)', color: '#00ff66', bg: '#0b2b15', y: 90, protocols: ['HTTP', 'DNS', 'SSH', 'TLS/SSL', 'SMTP', 'FTP', 'DHCP', 'MQTT'] } ]; export const NetworkHierarchyView = () => { const [visibleItems, setVisibleItems] = useState>(new Set()); useEffect(() => { let timerMs = 500; const timers: ReturnType[] = []; // Layer by Layer Reveal Logic HIERARCHY_LAYERS.forEach(layer => { // 1. Reveal Layer Container timers.push(setTimeout(() => { setVisibleItems(prev => new Set([...prev, layer.id])); }, timerMs)); timerMs += 400; // Wait for container to appear // 2. Reveal ALL Protocols for this layer SIMULTANEOUSLY timers.push(setTimeout(() => { const protoKeys = layer.protocols.map(p => `${layer.id}-${p}`); setVisibleItems(prev => new Set([...prev, ...protoKeys])); }, timerMs)); timerMs += 1200; // Gap before starting next layer }); return () => { timers.forEach(t => clearTimeout(t)); }; }, []); return ( ); };