'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; export const FirewallBreach = () => { const [progress, setProgress] = useState(0); const [status, setStatus] = useState('SCANNING'); // SCANNING, INJECTING, BREACHED const [logs, setLogs] = useState([]); const [activeNodes, setActiveNodes] = useState([]); // Refs for animation loop values to avoid re-renders const frameRef = useRef(0); const progressRef = useRef(0); // Static data const targetNodes = useMemo(() => Array.from({ length: 12 }).map((_, i) => ({ id: i, x: Math.cos(i * 30 * (Math.PI / 180)) * 140, y: Math.sin(i * 30 * (Math.PI / 180)) * 140, })), []); const logMessages = useMemo(() => [ { text: "正在初始化 Neural-Brute 协议...", type: "info" }, { text: "扫描目标端口 443/8080...", type: "info" }, { text: "检测到防火墙: ICE-WALL v4.0", type: "warning" }, { text: "正在尝试 SQL 注入...", type: "action" }, { text: "握手失败，切换至量子解密模式...", type: "error" }, { text: "正在旁路安全网关...", type: "action" }, { text: "上传 Payload: TROJAN_HORSE.exe", type: "action" }, { text: "获得 Root 权限...", type: "success" }, { text: "解密用户数据库...", type: "action" }, { text: "防火墙完整性已降至 0%", type: "success" }, { text: "系统已攻破。欢迎回来，管理员。", type: "success" } ], []); // Main Logic Loop useEffect(() => { let lastLogTime = 0; let lastGlitchTime = 0; const animate = (time) => { // 1. Progress Logic (Simulate hacking struggle) if (progressRef.current < 100) { // Non-linear progress: sometimes fast, sometimes stuck const speed = progressRef.current > 80 ? 0.1 : (progressRef.current > 40 ? 0.2 : 0.4); const jitter = Math.random() > 0.8 ? 0 : 1; // 20% chance to stall progressRef.current = Math.min(progressRef.current + (speed * jitter), 100); // Sync to React State occasionally for UI updates (throttle to 30fps roughly for React) if (frameRef.current % 2 === 0) { setProgress(Math.floor(progressRef.current)); } // Update Status based on progress if (progressRef.current > 20 && progressRef.current < 99) { setStatus('INJECTING'); } else if (progressRef.current >= 100) { setStatus('BREACHED'); } // 2. Active Nodes Logic (Visual flair) if (frameRef.current % 10 === 0) { const activeCount = Math.floor((progressRef.current / 100) * 12); setActiveNodes(Array.from({length: activeCount}, (_, i) => i)); } } // 3. Logging Logic if (time - lastLogTime > 800 + Math.random() * 1000 && progressRef.current < 100) { const logIndex = Math.floor((progressRef.current / 100) * (logMessages.length - 1)); // Ensure we don't just spam the same message, add some random tech jargon const randomHex = `0x${Math.floor(Math.random()*16777215).toString(16).toUpperCase()}`; setLogs(prev => { const newLogs = [...prev, { ...logMessages[logIndex], id: Date.now() }]; if (Math.random() > 0.7) newLogs.push({ text: `MemAddr: ${randomHex} [OK]`, type: "dim", id: Date.now() + 1 }); return newLogs.slice(-6); // Keep last 6 }); lastLogTime = time; } frameRef.current++; frameRef.current = requestAnimationFrame(animate); }; frameRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(frameRef.current); }, [logMessages]); // Color helpers const getPrimaryColor = () => status === 'BREACHED' ? '#22c55e' : (status === 'INJECTING' ? '#ef4444' : '#3b82f6'); const getSecondaryColor = () => status === 'BREACHED' ? '#14532d' : (status === 'INJECTING' ? '#7f1d1d' : '#1e3a8a'); return (

{/* Background Grid & Effects */}

{/* Main Interface Container */}

{/* Left Panel: Stats & Info */}

{logs.map((log) => ( > {log.text} ))}

{/* Center Panel: Visualization */}

{/* Holographic Ring */}

{/* Outer Rotating Ring */} {/* Node Network */} {/* Central Lock Icon */} {status === 'BREACHED' ? ( ) : ( )} {/* Status Text Overlay */}

SYSTEM STATUS

{status === 'SCANNING' && '扫描中...'} {status === 'INJECTING' && '渗透攻击中 !!!'} {status === 'BREACHED' && '访问已授权'}

{/* Progress Bar */}

{status === 'BREACHED' ? 'UPLOAD COMPLETE' : 'INJECTING MALWARE...'} {progress}%

{/* Right Panel: Code Rain / Hex Dump */}

{Array.from({length: 64}).map((_, i) => ( ))}

30 ? 100 : progress * 3} color="#ef4444" /> 60 ? 100 : Math.max(0, (progress - 30) * 3)} color="#f97316" /> 80 ? 100 : Math.max(0, (progress - 60) * 3)} color="#eab308" />

); }; // Sub-components for cleaner render const Panel = ({ title, children, style = {} }) => (

{title}

{children}

); const Row = ({ label, value, color }) => (

{label} {value}

); const HexCell = ({ active, color }) => { // Random hex value that doesn't change on re-render const val = useMemo(() => Math.floor(Math.random() * 255).toString(16).toUpperCase().padStart(2, '0'), []); return ( {val} ); }; const VulnItem = ({ name, severity, progress, color }) => (

{name} {severity}

);