```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // 常量与配置 // ========================================== const WIDTH = 1200; const HEIGHT = 700; const COLOR_BG = '#0f172a'; // 深蓝底色 const COLOR_GRID = '#1e293b'; // 网格线 const COLOR_PRIMARY = '#06b6d4'; // 青色 (雷达主色) const COLOR_ACCENT = '#3b82f6'; // 蓝色 (数据/装饰) const COLOR_WARN = '#ef4444'; // 红色 (干扰/敌情) const COLOR_SUCCESS = '#10b981'; // 绿色 (锁定/安全) const COLOR_TEXT = '#f8fafc'; //亮白文字 const COLOR_TEXT_MUTED = '#94a3b8'; // 灰字 const SCENE_DURATION = 6000; // 每个场景持续时间 const SCENES = [ { id: 'scan', title: '广域搜索与捕获', subtitle: 'WIDE AREA SURVEILLANCE', desc: '单光子阵列雷达进行全向扫描，利用高灵敏度光子计数探测远距离微弱回波，在复杂背景噪声中发现目标。' }, { id: 'jamming', title: '强电磁干扰环境', subtitle: 'HEAVY JAMMING DETECTED', desc: '遭遇敌方压制性干扰，常规雷达信噪比急剧下降，目标信号被噪声淹没，无法维持航迹跟踪。' }, { id: 'spoofing', title: '欺骗式干扰攻击', subtitle: 'SPOOFING ATTACK', desc: '敌方发射与回波信号高度相似的欺骗信号（DRFM），产生虚假航迹（鬼影），诱导雷达误判目标位置。' }, { id: 'counter', title: '量子关联抗干扰锁定', subtitle: 'SPAD ANTI-JAMMING LOCK', desc: '启动单光子时间相关计数（TCSPC）与多维统计滤波算法。基于光子飞行时间统计特性，剔除离散噪声与非相干欺骗信号，精准锁定真机。' } ]; // ========================================== // 几何组件 // ========================================== // 战斗机图标 const IconJet = ({ x, y, angle, scale = 1, color = COLOR_PRIMARY, opacity = 1 }) => ( {/* 机身阴影/辉光 */} {/* 机身线条 */} {/* 引擎喷口 */} ); // 干扰源图标 const IconJammer = ({ x, y }) => ( JAMMER ); // 统计直方图 (核心视觉元素) const Histogram = ({ data, highlightIndex, color, label }) => { const barWidth = 6; const maxHeight = 60; return ( {label} {data.map((val, i) => { const isHighlight = i === highlightIndex; const h = Math.min(val, 1) * maxHeight; return ( ); })} ); }; // ========================================== // 主组件 // ========================================== export default function SinglePhotonRadar() { const [time, setTime] = useState(0); const [activeScene, setActiveScene] = useState(0); const reqRef = useRef(); const startTimeRef = useRef(Date.now()); // 静态资源：背景星空/网格点 const bgParticles = useMemo(() => Array.from({ length: 80 }).map(() => ({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.5 + 0.1 })), []); // 动画循环 useEffect(() => { const animate = () => { const now = Date.now(); const elapsed = now - startTimeRef.current; setTime(elapsed); // 计算当前场景 const totalCycle = SCENE_DURATION * SCENES.length; const cycleTime = elapsed % totalCycle; const sceneIdx = Math.floor(cycleTime / SCENE_DURATION); setActiveScene(sceneIdx); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); // 当前场景内的时间进度 (0 ~ 1) const sceneProgress = (time % SCENE_DURATION) / SCENE_DURATION; // ---------------------------------------------------------------- // 场景逻辑计算 // ---------------------------------------------------------------- // 飞机轨迹计算 (圆形盘旋) const planeRadius = 250; const planeAngle = (time * 0.0005) % (Math.PI * 2); const planeX = WIDTH / 2 + Math.cos(planeAngle) * planeRadius; const planeY = HEIGHT / 2 + Math.sin(planeAngle) * planeRadius; const planeRotation = (planeAngle * 180 / Math.PI) + 90; // 切线方向 // ---------------------------------------------------------------- // 渲染子函数 // ---------------------------------------------------------------- // 1. 广域搜索 const renderScanScene = () => { const scanAngle = (time * 0.1) % 360; return ( {/* 扫描扇区 */} {/* 飞机 */} {/* 探测连线 */} {Math.abs(scanAngle - ((planeAngle * 180 / Math.PI)%360 + 360)%360) < 40 && ( TARGET ACQUIRED DIST: {(350 + Math.sin(time*0.01)*10).toFixed(2)} km )} ); }; // 2. 压制干扰 const renderJammingScene = () => { // 生成随机噪声线 const noiseLines = Array.from({length: 20}).map((_, i) => ( )); return ( {noiseLines} {/* 飞机 (显得不稳定) */} {/* 干扰源指示 */} {/* 红色警报层 */} WARNING: SIGNAL JAMMING SNR CRITICAL (-15dB) ); }; // 3. 欺骗干扰 (鬼影) const renderSpoofingScene = () => { // 虚假目标位置 const ghost1X = planeX + 80; const ghost1Y = planeY - 50; const ghost2X = planeX - 60; const ghost2Y = planeY + 70; return ( {/* 真飞机 */} TARGET? {/* 假飞机 (鬼影) */} TARGET? TARGET? {/* 欺骗信号波形 */} DECEPTION JAMMING (DRFM) MULTIPLE COHERENT TARGETS DETECTED ); }; // 4. 抗干扰锁定 (SPAD 算法演示) const renderCounterScene = () => { // 模拟直方图数据：中间是真目标峰值，周围是噪声底噪和欺骗小峰值 const histData = useMemo(() => { const arr = new Array(40).fill(0).map(() => Math.random() * 0.2); // 底噪 // 真目标峰值 arr[20] = 1.0; arr[19] = 0.6; arr[21] = 0.6; // 欺骗信号 (较弱或时间分布不同) arr[10] = 0.5; arr[11] = 0.3; // 假目标1 arr[30] = 0.4; arr[29] = 0.3; // 假目标2 return arr; }, []); // 仅生成一次，保持稳定 // 扫描线扫过直方图 const scanX = (sceneProgress * 100) % 100; // 0-100% return ( {/* 真飞机 - 高亮 */} {/* 锁定连线 */} {/* 幽灵目标被剔除 (半透明 + 叉号) */} {/* 算法可视化面板 - 悬浮在空中 */} {/* 标题 */} SPAD TCSPC ANALYSIS {/* 直方图容器 */} {/* 阈值线 */} THRESHOLD {/* 选通门 (Gate) */} GATE {/* 处理状态文字 */} NOISE REJECTED SPOOFING FILTERED LOCKED ); }; return (

{/* 顶部文字说明 Overlay (HTML) */}

SPAD RADAR SYSTEM

{SCENES[activeScene].title}

{SCENES[activeScene].subtitle}

{SCENES[activeScene].desc}

{/* 角标装饰 */}

SYS_STATUS: {activeScene === 1 || activeScene === 2 ? 'THREAT DETECTED' : 'NORMAL'}
REFRESH: 60Hz
PHOTON_COUNT: {(Math.random() * 100000).toFixed(0)} cps

{/* 边框 */}

); } ```