import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Wind, CloudRain, Factory, AlertTriangle, Activity, Thermometer, Droplets, Zap, Gauge, Radio } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const CENTER_X = WIDTH / 2; const CENTER_Y = HEIGHT / 2; // 配色方案 const COLORS = { bg: '#0f172a', grid: '#1e293b', primary: '#38bdf8', // 量子蓝 water: '#06b6d4', // 水汽 carbon: '#10b981', // 碳 methane: '#f59e0b', // 甲烷 haze: '#8b5cf6', // 灰霾/风场 text: '#e2e8f0', textDim: '#94a3b8' }; // 雷达配置 const RADAR_CONFIG = [ { id: 'water', title: '水汽监测雷达', sub: 'Water Vapor Radar', desc: '秒级捕捉水汽突变，助力极端天气预警', color: COLORS.water, icon: CloudRain, angle: 225, // 左下 range: '10km' }, { id: 'carbon', title: '碳监测雷达', sub: 'Carbon Monitor', desc: '聚焦“双碳”，精准监测二氧化碳浓度', color: COLORS.carbon, icon: Factory, angle: 315, // 左上 range: '10km' }, { id: 'methane', title: '甲烷监测雷达', sub: 'Methane Monitor', desc: '对甲烷泄漏实现秒级响应与远距探测', color: COLORS.methane, icon: AlertTriangle, angle: 45, // 右上 range: '10km' }, { id: 'haze', title: '灰霾风场雷达', sub: 'Haze & Wind Lidar', desc: '灰霾/风场同步监测，监测距离达15公里', color: COLORS.haze, icon: Wind, angle: 135, // 右下 range: '15km' } ]; // 辅助函数：生成随机数 const random = (min, max) => Math.random() * (max - min) + min; // 粒子类定义 class Particle { constructor(type) { this.reset(type); } reset(type) { this.type = type; const angle = Math.random() * Math.PI * 2; const dist = random(50, 300); this.x = CENTER_X + Math.cos(angle) * dist; this.y = CENTER_Y + Math.sin(angle) * dist; this.vx = (Math.random() - 0.5) * 0.5; this.vy = (Math.random() - 0.5) * 0.5; this.life = random(0.5, 1); this.maxLife = this.life; this.size = random(1, 3); // 根据类型赋予特性 if (type === 'wind') { this.vx = random(1, 3); this.vy = random(-0.5, 0.5); } else if (type === 'gas') { this.vy = random(-1, -0.2); // 上升 } } update() { this.x += this.vx; this.y += this.vy; this.life -= 0.005; // 边界检查 if (this.life <= 0 || this.x < 0 || this.x > WIDTH || this.y < 0 || this.y > HEIGHT) { this.reset(this.type); } } } export default function QuantumWeatherStation() { // 状态管理 const [activeIndex, setActiveIndex] = useState(0); const [dataMetrics, setDataMetrics] = useState({ temp: 24.5, humidity: 45, pressure: 1013, windSpeed: 3.2 }); // Refs for animation loop const requestRef = useRef(); const frameRef = useRef(0); const particlesRef = useRef([]); const timeRef = useRef(0); // 初始化粒子 useMemo(() => { const p = []; for (let i = 0; i < 60; i++) { p.push(new Particle(i < 20 ? 'wind' : i < 40 ? 'gas' : 'normal')); } particlesRef.current = p; }, []); // 模拟数据波动 const updateMetrics = () => { setDataMetrics(prev => ({ temp: +(prev.temp + (Math.random() - 0.5) * 0.1).toFixed(1), humidity: Math.min(100, Math.max(0, +(prev.humidity + (Math.random() - 0.5) * 0.5).toFixed(1))), pressure: +(prev.pressure + (Math.random() - 0.5) * 0.1).toFixed(1), windSpeed: Math.max(0, +(prev.windSpeed + (Math.random() - 0.5) * 0.2).toFixed(1)) })); }; // 动画主循环 const animate = useCallback(() => { frameRef.current++; timeRef.current += 0.01; // 更新粒子位置 particlesRef.current.forEach(p => p.update()); // 每60帧更新一次UI数据 if (frameRef.current % 60 === 0) { updateMetrics(); } // 触发重绘（利用 React state 触发重绘虽然不是最高效，但对于 SVG 组件结构更新是必要的） // 为了性能，我们这里只用 requestAnimationFrame 驱动一个强制刷新组件的 trigger // 但由于本组件主要依赖 CSS transform 和 SVG 属性动画， // 我们使用一个 ref 来存储时间，并在 render 中计算位置， // 这里为了简化 React 的重绘机制，我们使用 forceUpdate 的变体。 // *注意：在生产级高性能动画中，通常会直接操作 DOM 或使用 react-spring/framer-motion 的 useSpring* // *鉴于本题要求纯 React + RAF，我们使用一个 dummy state 来驱动重绘，但限制频率* // 这里为了流畅度，我们还是需要每帧 setState 导致重绘 SVG 元素的位置 // 只要组件树不过于复杂，React 能够处理 60fps。 setFrame(frameRef.current); requestRef.current = requestAnimationFrame(animate); }, []); const [frame, setFrame] = useState(0); // 启动动画和定时切换 useEffect(() => { requestRef.current = requestAnimationFrame(animate); const interval = setInterval(() => { setActiveIndex(prev => (prev + 1) % 4); }, 4000); // 每4秒切换一次焦点 return () => { cancelAnimationFrame(requestRef.current); clearInterval(interval); }; }, [animate]); // 计算当前激活的雷达配置 const activeRadar = RADAR_CONFIG[activeIndex]; const rotation = frame * 0.5; // 全局旋转 // 背景网格生成 const GridRings = useMemo(() => { return [100, 200, 300, 400].map(r => ( )); }, []); return (

); }