'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 粒子生成辅助函数 const generateParticles = (count, type) => { return Array.from({ length: count }, (_, i) => ({ id: i, delay: Math.random() * 5, speed: 2 + Math.random() * 2, offset: Math.random() * 40 - 20, // 路径偏移 scale: 0.5 + Math.random() * 0.5 })); }; export const PhotosynthesisView = () => { // 静态生成粒子数据，避免重渲染抖动 const photons = useMemo(() => generateParticles(12, 'photon'), []); const waterMolecules = useMemo(() => generateParticles(8, 'water'), []); const co2Molecules = useMemo(() => generateParticles(8, 'co2'), []); const o2Molecules = useMemo(() => generateParticles(8, 'o2'), []); const glucoseMolecules = useMemo(() => generateParticles(5, 'glucose'), []); // 能量流动状态（用于简单的脉冲同步） const [pulse, setPulse] = useState(0); useEffect(() => { const interval = setInterval(() => { setPulse(p => (p + 1) % 2); }, 2000); return () => clearInterval(interval); }, []); return ( ); };