import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Shield, AlertTriangle, Activity, Server, Zap, Target } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const CENTER_X = WIDTH / 2; const CENTER_Y = HEIGHT / 2 + 50; // 颜色定义 const THEMES = [ { color: '#ef4444', name: '红区 (Alpha)', label: '核心数据库' }, // Red { color: '#3b82f6', name: '蓝区 (Beta)', label: '云端服务' }, // Blue { color: '#22c55e', name: '绿区 (Gamma)', label: '监控中心' }, // Green { color: '#eab308', name: '黄区 (Delta)', label: '支付网关' }, // Yellow { color: '#a855f7', name: '紫区 (Epsilon)', label: '身份验证' }, // Purple { color: '#06b6d4', name: '青区 (Zeta)', label: '边缘节点' }, // Cyan ]; // 简单的 3D 投影计算 (伪 3D) const project = (x, y, z) => { const scale = 1; const x2d = x * scale + CENTER_X; const y2d = y * scale * 0.5 + CENTER_Y - z * scale; // Y轴压缩以模拟透视 return { x: x2d, y: y2d, zIndex: y }; // zIndex 用于 Painter's Algorithm }; // 随机数辅助 const rand = (min, max) => Math.random() * (max - min) + min; export default function CyberDefenseDemo() { const [frameCount, setFrameCount] = useState(0); // 游戏状态 Ref (不触发重渲染) const gameState = useRef({ bases: [], missiles: [], // { id, from, to, t, color, pathHeight } particles: [], // { id, x, y, vx, vy, life, maxLife, color, size } logs: [], // { id, text, type, time } lastAttackTime: 0, time: 0, }); // 初始化阵地 useMemo(() => { const radiusX = 450; const radiusY = 250; const bases = []; THEMES.forEach((theme, i) => { const angle = (i / 6) * Math.PI * 2; const x = Math.cos(angle) * radiusX; const y = Math.sin(angle) * radiusY; // 每个阵地生成几个"大楼" const buildings = []; for(let b=0; b<3; b++) { buildings.push({ bx: rand(-30, 30), by: rand(-30, 30), h: rand(40, 80), w: rand(15, 25) }); } bases.push({ id: i, ...theme, x, y, z: 0, hp: 100, shield: 100, alertLevel: 0, // 0-1 buildings }); }); gameState.current.bases = bases; }, []); // 动画主循环 useEffect(() => { let rafId; const loop = (timestamp) => { const state = gameState.current; state.time = timestamp; // 1. 攻击逻辑 (产生导弹) if (timestamp - state.lastAttackTime > 1200) { // 每1.2秒尝试一次攻击 const attackerIdx = Math.floor(rand(0, 6)); let targetIdx = Math.floor(rand(0, 6)); while (targetIdx === attackerIdx) targetIdx = Math.floor(rand(0, 6)); const attacker = state.bases[attackerIdx]; const target = state.bases[targetIdx]; state.missiles.push({ id: Math.random().toString(36), fromIdx: attackerIdx, toIdx: targetIdx, start: { x: attacker.x, y: attacker.y }, end: { x: target.x, y: target.y }, t: 0, speed: rand(0.005, 0.01), color: attacker.color, height: rand(100, 200) // 弹道高度 }); state.logs.unshift({ id: Date.now(), text: `警告: ${attacker.name} 向 ${target.name} 发起 DDoS 攻击`, type: 'attack', color: attacker.color }); if (state.logs.length > 6) state.logs.pop(); state.lastAttackTime = timestamp; } // 2. 更新导弹 for (let i = state.missiles.length - 1; i >= 0; i--) { const m = state.missiles[i]; m.t += m.speed; if (m.t >= 1) { // 击中逻辑 const targetBase = state.bases[m.toIdx]; targetBase.alertLevel = 1.0; targetBase.shield = Math.max(0, targetBase.shield - 10); // 产生爆炸粒子 const impactPos = project(targetBase.x, targetBase.y, 20); for (let p=0; p<12; p++) { state.particles.push({ id: Math.random(), x: impactPos.x, y: impactPos.y, vx: rand(-3, 3), vy: rand(-3, 3), life: 1.0, color: m.color, size: rand(2, 6) }); } state.missiles.splice(i, 1); } } // 3. 更新粒子 for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.x += p.vx; p.y += p.vy; p.life -= 0.02; p.size *= 0.95; if (p.life <= 0) state.particles.splice(i, 1); } // 4. 更新基地状态 (恢复护盾，降低警报) state.bases.forEach(base => { if (base.alertLevel > 0) base.alertLevel -= 0.01; if (base.shield < 100 && Math.random() < 0.05) base.shield += 0.1; }); setFrameCount(prev => prev + 1); rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, []); // 渲染辅助函数：生成 3D 楼宇 const renderBuilding = (bx, by, bz, w, h, color, baseOpacity) => { // 简单的立方体投影 const p1 = project(bx - w/2, by - w/2, bz); const p2 = project(bx + w/2, by - w/2, bz); const p3 = project(bx + w/2, by + w/2, bz); const p4 = project(bx - w/2, by + w/2, bz); const topH = bz + h; const t1 = project(bx - w/2, by - w/2, topH); const t2 = project(bx + w/2, by - w/2, topH); const t3 = project(bx + w/2, by + w/2, topH); const t4 = project(bx - w/2, by + w/2, topH); return ( {/* Side Faces - Darker */} {/* Top Face - Lighter */} {/* Tech Detail Lines */} ); }; // 渲染导弹路径 (贝塞尔曲线) const getMissilePos = (m) => { // Quadratic Bezier: P = (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2 const p0 = project(m.start.x, m.start.y, 20); // Start slightly above ground const p2 = project(m.end.x, m.end.y, 20); // End slightly above ground // Control point (midpoint but high up) const midX = (m.start.x + m.end.x) / 2; const midY = (m.start.y + m.end.y) / 2; const p1 = project(midX, midY, m.height); const t = m.t; const x = (1-t)*(1-t)*p0.x + 2*(1-t)*t*p1.x + t*t*p2.x; const y = (1-t)*(1-t)*p0.y + 2*(1-t)*t*p1.y + t*t*p2.y; return { x, y }; }; // 预计算网格背景 const GridFloor = useMemo(() => { const lines = []; const size = 1000; const step = 100; for(let i = -size; i <= size; i += step) { const h1 = project(i, -size, 0); const h2 = project(i, size, 0); const v1 = project(-size, i, 0); const v2 = project(size, i, 0); lines.push(); lines.push(); } return {lines}; }, []); // 排序渲染对象 (Painter's Algorithm) // 我们需要把Base和Missiles混合排序，但为了简化，我们先画所有的Base，再画Missile // 因为Missile通常在空中，Z值较高 // Base内部的排序：根据Y坐标排序 const sortedBases = [...gameState.current.bases].sort((a, b) => { const pA = project(a.x, a.y, 0); const pB = project(b.x, b.y, 0); return pA.y - pB.y; }); return (

{/* UI Overlay */}

网络态势感知系统

Cyber Situational Awareness System V2.0

网络流量: 正常

节点在线: 6/6

{/* 实时日志面板 */}

安全事件日志

{gameState.current.logs.map((log) => (

{log.type === 'attack' ? : } {new Date(log.id).toLocaleTimeString().split(' ')[0]} {log.text}

))} {gameState.current.logs.length === 0 && (

系统扫描中...

)}

{/* 右上角图例 */}

资产监控列表

{THEMES.map(t => { const base = gameState.current.bases[t.id]; const hp = base ? Math.floor(base.shield) : 100; return (

{t.label}

); })}

); }