```tsx import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Zap, Activity, Battery, Waves, Cpu, Search, AlertTriangle, CheckCircle2, Radio, Server, Anchor } from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Configuration & Constants // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const FPS = 60; const COLORS = { bg: '#0f172a', // Slate 900 bgDark: '#020617', // Slate 950 primary: '#06b6d4', // Cyan 500 primaryGlow: '#22d3ee', secondary: '#8b5cf6',// Violet 500 accent: '#f59e0b', // Amber 500 danger: '#ef4444', // Red 500 success: '#10b981', // Green 500 grid: '#1e293b', // Slate 800 text: '#f8fafc', // Slate 50 textDim: '#94a3b8', // Slate 400 glass: 'rgba(30, 41, 59, 0.7)' }; const SCENARIOS = [ { id: 'battery', title: '新能源车电池阵列监测', subtitle: 'EV BATTERY ARRAY MONITORING', icon: Battery, color: COLORS.accent, features: ['电芯热失控前兆捕获', '微伏级电压不平衡', '非接触式电流成像'] }, { id: 'grid', title: '特高压输电线路巡检', subtitle: 'UHV TRANSMISSION LINE INSPECTION', icon: Zap, color: COLORS.primary, features: ['集电线路漏磁检测', '变压器铁芯剩磁', '故障点毫秒级定位'] }, { id: 'cable', title: '深海/地埋电缆诊断', subtitle: 'SUBMARINE & UNDERGROUND CABLE', icon: Anchor, color: COLORS.secondary, features: ['绝缘层微局放监测', '海底电缆精准定位', '运行状态健康评估'] } ]; // ----------------------------------------------------------------------------- // Helper Components // ----------------------------------------------------------------------------- // Reusable Gradients and Filters const Definitions = () => ( {/* Glow Filter */} {/* Gradients */} {/* Mask for scanning effects */} ); // ----------------------------------------------------------------------------- // Sub-Components // ----------------------------------------------------------------------------- // 1. Quantum Core (The "Eye") const QuantumCore = ({ time }: { time: number }) => { // Use memo to avoid re-calculating static orbit paths, // but here we animate transforms so we calculate in render (optimized) return ( {/* Background Energy Field */} {/* Gyroscopic Rings */} {[0, 60, 120].map((offset, i) => ( ))} {/* Inner fast rings */} {/* The Singularity (Center) */} {/* Quantum Jitter */} {/* Floating Particles around core */} {Array.from({ length: 8 }).map((_, i) => { const angle = (time * 0.2 + i * 45) * (Math.PI / 180); const r = 90 + Math.sin(time * 0.1 + i) * 10; return ( ); })} {/* Label */} QUANTUM SENSOR STATUS: ONLINE ); }; // 2. Data Beam (Connection between Core and Scene) const DataBeam = ({ time }: { time: number }) => { // D3 line generator for a smooth wave const lineGenerator = d3.line().curve(d3.curveBasis); const points: [number, number][] = []; const startX = 250 + 80; // Core edge const endX = 700; // Scene start const steps = 20; for (let i = 0; i <= steps; i++) { const x = startX + (endX - startX) * (i / steps); // Wave amplitude decreases as it gets closer to target const amplitude = 15 * Math.sin(time * 0.05) * (1 - i/steps); const y = (HEIGHT / 2) + Math.sin((x + time * 5) * 0.03) * amplitude; points.push([x, y]); } const pathData = lineGenerator(points) || ""; return ( {/* Data Packets */} {Array.from({length: 3}).map((_, i) => { const t = (time * 0.01 + i * 0.33) % 1; // Simple interpolation for packet position along X const px = startX + (endX - startX) * t; const py = (HEIGHT / 2) + Math.sin((px + time * 5) * 0.03) * (15 * Math.sin(time * 0.05) * (1 - t)); return ( ) })} ); }; // 3. Scenario: Battery const BatteryScene = ({ time, active }: { time: number, active: boolean }) => { // Generate heat map cells const cells = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ id: i, x: (i % 10) * 35, y: Math.floor(i / 10) * 50 })); }, []); // Simulate thermal runaway on one cell const badCellIndex = 24; return ( {/* Container */} BATTERY PACK THERMAL SCAN {cells.map((cell) => { const isBad = cell.id === badCellIndex; // Pulsing heat color for bad cell const heat = isBad ? 0.5 + 0.5 * Math.sin(time * 0.2) : 0; const baseColor = isBad ? `rgb(${255}, ${255 * (1-heat)}, 0)` : COLORS.success; return ( {isBad && ( )} ) })} {/* Scanning Overlay */} ); }; // 4. Scenario: Grid const GridScene = ({ time, active }: { time: number, active: boolean }) => { // Generate wire curves using D3 const wires = useMemo(() => { const line = d3.line().curve(d3.curveCatmullRom); const w1 = line([[0, 0], [150, 60], [300, 0]]); const w2 = line([[0, 20], [150, 80], [300, 20]]); return { w1, w2 }; }, []); return ( {/* Pylon Abstract */} {/* Wires */} {/* Magnetic Fields (Quantum Detection) */} {[0, 100, 200, 300].map((x, i) => { const y = i === 1 || i === 2 ? 60 : 0; return ( ) })} {/* Fault Arc */} 0.7 ? 1 : 0} /> LEAKAGE DETECTED ); }; // 5. Scenario: Cable const CableScene = ({ time, active }: { time: number, active: boolean }) => { // Simulate a map view for submarine cable const mapPath = "M 0 100 Q 150 150 300 80 T 500 120"; const faultPos = 0.6; // 60% along the path return ( SUBMARINE CABLE TOPOLOGY {/* Seabed Terrain */} {/* Cable Line */} {/* Fault Point */} {/* Approximate coord from path */} INSULATION BREAK LOC: 124.5km {/* Signal Pulse */} ); }; // 6. Data Analysis Panel (Right Side) const DataPanel = ({ scenario, time }: { scenario: any, time: number }) => { // Generate fake wave data const dataPath = useMemo(() => { const line = d3.line().curve(d3.curveBasis); const pts: [number, number][] = []; for(let i=0; i<30; i++) { pts.push([i * 10, 40 + Math.sin(i * 0.5 + time * 0.1) * 20 + (Math.random() - 0.5) * 10]); } return line(pts) || ""; }, [time]); // Update every frame is okay for this size return ( {/* Panel Frame */} {/* Header */} {scenario.title} {scenario.subtitle} {/* Live Graph */} SIGNAL AMPLITUDE {/* Features List */} {scenario.features.map((feat: string, i: number) => ( {feat} ))} {/* Metrics */} PRECISION 99.99% LATENCY <1ms ); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- const QuantumSensingAnimation = () => { const [tick, setTick] = useState(0); const frameRef = useRef(0); const rafRef = useRef(null); // Main Loop useEffect(() => { const loop = () => { frameRef.current += 1; setTick(frameRef.current); // Trigger render rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, []); // Scenario Logic const SCENARIO_DURATION = 400; // Frames per scenario const scenarioIndex = Math.floor((tick / SCENARIO_DURATION) % SCENARIOS.length); const currentScenario = SCENARIOS[scenarioIndex]; // Interaction Logic (Pointer) const svgRef = useRef(null); const [pointer, setPointer] = useState({ x: 0, y: 0 }); const handlePointerMove = useCallback((e: React.PointerEvent) => { if (svgRef.current) { const CTM = svgRef.current.getScreenCTM(); if (CTM) { setPointer({ x: (e.clientX - CTM.e) / CTM.a, y: (e.clientY - CTM.f) / CTM.d }); } } }, []); return (

); }; export default QuantumSensingAnimation; ```