'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 模拟数据：行星参数 // speed: 轨道角速度 (相对值) // distance: 距离中心的半径 // size: 行星大小 // color: 基础色 // name: 中文名 const PLANETS = [ { id: 'mercury', name: '水星', distance: 90, size: 6, speed: 2.5, color: '#A5A5A5', offset: 0 }, { id: 'venus', name: '金星', distance: 130, size: 10, speed: 1.8, color: '#E3BB76', offset: 2 }, { id: 'earth', name: '地球', distance: 180, size: 11, speed: 1.2, color: '#4F4CB0', offset: 4, hasMoon: true }, { id: 'mars', name: '火星', distance: 230, size: 8, speed: 0.9, color: '#E27B58', offset: 1 }, { id: 'jupiter', name: '木星', distance: 320, size: 28, speed: 0.5, color: '#C88B3A', offset: 5, striped: true }, { id: 'saturn', name: '土星', distance: 420, size: 24, speed: 0.35, color: '#C5AB6E', offset: 3, hasRings: true }, { id: 'uranus', name: '天王星', distance: 510, size: 16, speed: 0.2, color: '#4FD0E7', offset: 6 }, { id: 'neptune', name: '海王星', distance: 580, size: 15, speed: 0.15, color: '#2E57BA', offset: 0.5 }, ]; // 星空背景组件 (Memoized to avoid re-render) const StarField = React.memo(() => { const stars = useMemo(() => { return Array.from({ length: 300 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.7 + 0.3, twinkle: Math.random() > 0.8 // 20% stars twinkle })); }, []); return ( {stars.map((star, i) => ( {star.twinkle && ( )} ))} ); }); // 科技感公司Logo组件 const CompanyLogo = () => { return ( {/* 外部发光晕 */} {/* 旋转的外环 */} {/* 核心Logo形状 (六边形结构) */} {/* 文字标识 */} CORE SYSTEMS ); }; export default function SolarSystemSimulation() { const [time, setTime] = useState(0); const requestRef = useRef(); useEffect(() => { const animate = (t: number) => { // 减缓时间流速，使动画更优雅 setTime(t * 0.0005); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); return ( ); }