import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Zap, Activity, Battery, Waves, Cpu, Search, AlertTriangle, CheckCircle2 } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // ----------------------------------------------------------------------------- // Utils & Constants // ----------------------------------------------------------------------------- const COLORS = { bg: '#0f172a', primary: '#06b6d4', // Cyan secondary: '#8b5cf6', // Violet accent: '#f59e0b', // Amber danger: '#ef4444', // Red success: '#10b981', // Green grid: '#1e293b', text: '#e2e8f0', textDim: '#94a3b8' }; const SCENARIOS = [ { id: 'battery', title: '新能源车电池监测', subtitle: '电芯热失控前兆 / 不平衡检测', icon: Battery, color: COLORS.accent, desc: '检测到微弱磁场异常，预警电芯过热' }, { id: 'grid', title: '特高压输电线路', subtitle: '非接触式电流测量 / 故障定位', icon: Zap, color: COLORS.primary, desc: '量子效应锁定电流波动，精度 < 0.1%' }, { id: 'cable', title: '海底/地埋电缆', subtitle: '局放监测 / 绝缘状态评估', icon: Waves, color: COLORS.secondary, desc: '精确定位绝缘层微小破损点' } ]; // ----------------------------------------------------------------------------- // Sub-Components // ----------------------------------------------------------------------------- // 1. Quantum Core (The Sensor) const QuantumCore = ({ time }: { time: number }) => { const orbits = [0, 1, 2]; return ( {/* Outer Glow */} {/* Rotating Rings */} {orbits.map((i) => ( ))} {/* Core Nucleus */} {/* Floating Particles */} {Array.from({ length: 6 }).map((_, i) => { const angle = (time * 0.5 + i * (360 / 6)) * (Math.PI / 180); const dist = 50 + Math.sin(time * 0.1 + i) * 10; return ( ); })} {/* Label */} QUANTUM SENSOR 量子态磁场传感 ); }; // 2. Data Beam (Connection) const DataBeam = ({ active, time }: { active: boolean, time: number }) => { if (!active) return null; // Create a sine wave path const points = []; for (let x = 0; x <= 400; x += 10) { const y = Math.sin((x + time * 5) * 0.05) * 10 * Math.sin(time * 0.02); // Amplitude modulation points.push(`${200 + x},${HEIGHT / 2 + y}`); } return ( {/* Moving packets */} {Array.from({ length: 3 }).map((_, i) => { const offset = (time * 2 + i * 133) % 400; const y = Math.sin((offset + time * 5) * 0.05) * 10 * Math.sin(time * 0.02); return ( ); })} ); }; // 3. Scenario: Battery const BatteryScenario = ({ time, isVisible }: { time: number, isVisible: boolean }) => { const opacity = isVisible ? 1 : 0; const scale = isVisible ? 1 : 0.8; // Simulate a bad cell pulsing const badCellPulse = (Math.sin(time * 0.2) + 1) / 2; return ( {/* Car Chassis Outline */} {/* Battery Pack */} {/* Cells */} {Array.from({ length: 8 }).map((_, i) => { const isBad = i === 5; const color = isBad ? `rgb(${255}, ${100 * (1 - badCellPulse)}, ${100 * (1 - badCellPulse)})` : COLORS.success; return ( {isBad && ( )} ); })} {/* Scanning Line */} ); }; // 4. Scenario: Grid const GridScenario = ({ time, isVisible }: { time: number, isVisible: boolean }) => { const opacity = isVisible ? 1 : 0; const scale = isVisible ? 1 : 0.8; return ( {/* Pylon */} {/* High Voltage Lines */} {/* Magnetic Field Visualization (Quantum Sensing) */} B-Field: 45μT ); }; // 5. Scenario: Cable const CableScenario = ({ time, isVisible }: { time: number, isVisible: boolean }) => { const opacity = isVisible ? 1 : 0; const scale = isVisible ? 1 : 0.8; const pulseX = (time * 3) % 400 - 200; return ( {/* Ground/Seabed */} {/* Cable */} {/* Fault Point */} 0 ? 0.6 : 0.1} /> {/* Signal Pulse traveling */} {Math.abs(pulseX - 50) < 10 && ( )} {/* Text Indicator */} {Math.abs(pulseX - 50) < 20 && ( FAULT DETECTED )} ); }; // 6. HUD / Analysis Panel const AnalysisPanel = ({ scenario, time }: { scenario: typeof SCENARIOS[0], time: number }) => { // Generate fake data based on time const graphPoints = Array.from({ length: 20 }).map((_, i) => { const x = i * 15; const noise = Math.random() * 5; const y = 50 + Math.sin((i + time) * 0.5) * 20 + noise; return `${x},${y}`; }).join(' L '); return ( {/* Panel Background */} {/* Header */} {scenario.title} LIVE {/* Dynamic Graph */} {/* Grid lines */} {/* Metrics */} 灵敏度 (Sensitivity) 10-15 T 系统状态 (Status) ACTIVE SCAN ); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const QuantumSensingAnimation = () => { const [frame, setFrame] = useState(0); const startTimeRef = useRef(Date.now()); const animationRef = useRef(); useEffect(() => { const loop = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 50; // Speed factor setFrame(elapsed); animationRef.current = requestAnimationFrame(loop); }; loop(); return () => { if (animationRef.current) cancelAnimationFrame(animationRef.current); }; }, []); // Cycle through scenarios every 300 frames (approx 5-6 seconds) const cycleDuration = 300; const currentScenarioIndex = Math.floor((frame / cycleDuration) % SCENARIOS.length); const currentScenario = SCENARIOS[currentScenarioIndex]; // Calculate progress within current scenario (0 to 1) for transitions // We don't strictly need this for React logic, but useful for effects if needed. return (

); }; export default QuantumSensingAnimation;