```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ---------------------------------------------------------------------- // CONSTANTS & DATA // ---------------------------------------------------------------------- const STAGES = [ { id: 'intel', title: '情报收集', sub: 'Reconnaissance', icon: 'TARGET' }, { id: 'analysis', title: '攻击面分析', sub: 'Attack Surface', icon: 'SEARCH' }, { id: 'access', title: '初始突破', sub: 'Initial Access', icon: 'UNLOCK' }, { id: 'privilege', title: '权限提升', sub: 'Privilege Esc', icon: 'KEY' }, { id: 'lateral', title: '横向移动', sub: 'Lateral Move', icon: 'NETWORK' }, { id: 'persist', title: '持久化控制', sub: 'Persistence', icon: 'ANCHOR' }, { id: 'action', title: '目标达成', sub: 'Objectives', icon: 'TROPHY' }, { id: 'cleanup', title: '清理痕迹', sub: 'Cleanup', icon: 'WIPE' }, ]; const LOG_MESSAGES = { intel: ['[+] 启动被动侦察...', '[+] Whois 查询完成', '[+] 子域名爆破中...', '[+] 发现目标资产 IP 段'], analysis: ['[*] 端口扫描 192.168.x.x', '[!] 发现开放端口: 80, 443, 8080', '[*] 识别服务指纹...', '[!] 检测到 CVE-2023-XXXX 漏洞'], access: ['[>] 尝试 SQL 注入...', '[>] 发送钓鱼 Payload', '[+] 漏洞利用成功', '[#] Shell 建立连接'], privilege: ['[*] 当前用户: www-data', '[>] 运行 LinPEAS...', '[>] 滥用 SUID 二进制文件', '[#] 获得 Root 权限 (UID: 0)'], lateral: ['[*] 扫描内网邻居...', '[>] 提取内存凭证 (Mimikatz)', '[>] Pass-the-Hash 攻击', '[+] 连接域控制器'], persist: ['[+] 创建计划任务', '[+] 修改注册表启动项', '[+] 植入 WebShell 后门', '[*] 建立 C2 隐蔽通道'], action: ['[!] 访问核心数据库', '[<] 正在通过 DNS 隧道外传数据...', '[+] 敏感文件加密完成', '[+] 勒索信生成完毕'], cleanup: ['[*] 停止日志记录服务', '[*] 清除 /var/log/auth.log', '[*] 删除临时利用工具', '[+] 痕迹清理完毕，断开连接'] }; const COLORS = { bg: '#0f172a', nodeIdle: '#1e293b', nodeActive: '#f59e0b', // Amber nodeDone: '#ef4444', // Red (Red Team style) textMain: '#f8fafc', textSub: '#94a3b8', lineIdle: '#334155', lineActive: '#f59e0b', terminalBg: '#020617', terminalText: '#22c55e', }; // ---------------------------------------------------------------------- // HELPER COMPONENTS // ---------------------------------------------------------------------- const GridBackground = () => ( ); const Hexagon = ({ x, y, r, fill, stroke, strokeWidth, opacity = 1, className }) => { const points = useMemo(() => { let pts = []; for (let i = 0; i < 6; i++) { const angle = (Math.PI / 3) * i; pts.push(`${x + r * Math.cos(angle)},${y + r * Math.sin(angle)}`); } return pts.join(' '); }, [x, y, r]); return ; }; // ---------------------------------------------------------------------- // MAIN COMPONENT // ---------------------------------------------------------------------- export default function CyberKillChainAnimation() { const [activeStageIndex, setActiveStageIndex] = useState(0); const [logs, setLogs] = useState([]); const [tick, setTick] = useState(0); // For continuous animation (rotation, pulse) const [resetKey, setResetKey] = useState(0); // To force full restart // Timer for infinite visual loops useEffect(() => { let frameId; const animate = () => { setTick(t => t + 1); frameId = requestAnimationFrame(animate); }; frameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(frameId); }, []); // Main Logic Loop useEffect(() => { let currentStage = 0; let messageIndex = 0; const processLoop = async () => { // Reset setActiveStageIndex(0); setLogs(['[SYSTEM] 初始化红队攻击模拟...', '--------------------------------']); while (currentStage < STAGES.length) { setActiveStageIndex(currentStage); const stageKey = STAGES[currentStage].id; const stageLogs = LOG_MESSAGES[stageKey]; // Emulate processing time and log output for (let msg of stageLogs) { await new Promise(r => setTimeout(r, 600)); // Delay between logs setLogs(prev => [...prev.slice(-7), msg]); // Keep last 8 lines } await new Promise(r => setTimeout(r, 800)); // Pause after stage completion currentStage++; } // Final pause then restart await new Promise(r => setTimeout(r, 3000)); setResetKey(k => k + 1); // Trigger restart }; processLoop(); }, [resetKey]); // Calculations for layout const marginX = 80; const availableWidth = VIEW_WIDTH - (marginX * 2); const spacing = availableWidth / (STAGES.length - 1); const centerY = 300; return (

); } ```