```tsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 攻击类型定义 type AttackType = 'SQL' | 'XSS' | 'DDoS' | 'SSH' | 'SCAN'; interface Particle { id: number; type: AttackType; x: number; y: number; angle: number; speed: number; text?: string; color: string; distance: number; // 距离中心的距离 } interface Log { id: number; time: string; type: string; message: string; level: 'WARN' | 'CRIT' | 'INFO'; } export default function CyberAttackView() { const [particles, setParticles] = useState([]); const [logs, setLogs] = useState([]); const [serverStatus, setServerStatus] = useState<'NORMAL' | 'WARNING' | 'CRITICAL'>('NORMAL'); const [shake, setShake] = useState({ x: 0, y: 0 }); const [load, setLoad] = useState(20); // 服务器负载 0-100 const particleIdRef = useRef(0); const logIdRef = useRef(0); const frameRef = useRef(0); // 攻击字典 const sqlPayloads = ["' OR 1=1 --", "UNION SELECT", "DROP TABLE", "admin' --"]; const xssPayloads = ["