```javascript import React, { useState, useEffect, useRef } from 'react'; const TokenTheftAnimation = () => { // 状态定义 // 0: 初始化 / 等待 // 1: 正常登录 (发送账号密码) // 2: 获取凭证 (Server -> User: Token) // 3: 场景切换 (浏览直播/网页) // 4: 触发陷阱 (点击恶意链接) // 5: 脚本扫描 (后台静默扫描) // 6: 窃取凭证 (Token 被复制并发往黑客) // 7: 异地顶号 (黑客使用 Token 登录) // 8: 攻击完成 (用户掉线/被劫持) const [phase, setPhase] = useState(0); // 动画元素位置与状态 const [userPacket, setUserPacket] = useState({ x: 150, y: 400, opacity: 0, label: '' }); const [serverPacket, setServerPacket] = useState({ x: 500, y: 100, opacity: 0, label: '' }); const [hackerPacket, setHackerPacket] = useState({ x: 850, y: 400, opacity: 0, label: '' }); // 扫描线位置 const [scanY, setScanY] = useState(0); // 装饰性状态 const [glitchActive, setGlitchActive] = useState(false); const [serverStatus, setServerStatus] = useState('idle'); // idle, processing, success, warning // 动画主循环 useEffect(() => { let mounted = true; const runSequence = async () => { while (mounted) { // --- Phase 0: Reset --- setPhase(0); setServerStatus('idle'); setGlitchActive(false); setUserPacket({ x: 150, y: 400, opacity: 0, label: '' }); setServerPacket({ x: 500, y: 100, opacity: 0, label: '' }); setHackerPacket({ x: 850, y: 400, opacity: 0, label: '' }); await wait(1000); // --- Phase 1: User Login --- setPhase(1); // Packet: User -> Server setUserPacket({ x: 150, y: 400, opacity: 1, label: '账号密码' }); await wait(100); setUserPacket({ x: 500, y: 100, opacity: 1, label: '账号密码' }); await wait(1000); setServerStatus('processing'); setUserPacket(prev => ({ ...prev, opacity: 0 })); await wait(800); // --- Phase 2: Issue Token --- setPhase(2); setServerStatus('success'); // Packet: Server -> User (The Token) setServerPacket({ x: 500, y: 100, opacity: 1, label: 'TOKEN' }); await wait(100); setServerPacket({ x: 150, y: 400, opacity: 1, label: 'TOKEN' }); await wait(1000); // Token stored in User Device setServerPacket(prev => ({ ...prev, opacity: 0 })); await wait(1000); // --- Phase 3: Browsing Context --- setPhase(3); setServerStatus('idle'); await wait(2000); // --- Phase 4: Trap Triggered --- setPhase(4); // User clicks link await wait(1500); // --- Phase 5: Silent Scanning --- setPhase(5); setGlitchActive(true); // Scan animation handled by separate effect await wait(2500); // --- Phase 6: Stealing Token --- setPhase(6); setGlitchActive(false); // Packet: User -> Hacker (Stolen Token) // Note: User still has their token, this is a copy setHackerPacket({ x: 150, y: 400, opacity: 1, label: 'TOKEN (复制)' }); await wait(100); setHackerPacket({ x: 850, y: 400, opacity: 1, label: 'TOKEN (复制)' }); await wait(1500); // --- Phase 7: Hijacking --- setPhase(7); // Hacker uses token -> Server setHackerPacket({ x: 500, y: 100, opacity: 1, label: 'TOKEN (复制)' }); await wait(1000); setHackerPacket(prev => ({ ...prev, opacity: 0 })); // --- Phase 8: Success/Fallout --- setPhase(8); setServerStatus('success'); // Server thinks it's valid await wait(4000); } }; runSequence(); return () => { mounted = false; }; }, []); // 扫描线动画逻辑 useEffect(() => { let frameId; if (phase === 5) { const animateScan = () => { setScanY(prev => (prev + 3) % 140); frameId = requestAnimationFrame(animateScan); }; frameId = requestAnimationFrame(animateScan); } else { setScanY(0); } return () => cancelAnimationFrame(frameId); }, [phase]); const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // 颜色定义 const colors = { bg: "#0f172a", user: "#38bdf8", // Cyan server: "#8b5cf6", // Violet hacker: "#ef4444", // Red token: "#fbbf24", // Amber text: "#e2e8f0", grid: "#1e293b" }; return (

); }; export default TokenTheftAnimation; ```