发布者
诺爸
发布时间
2026/4/5 14:03:06
关联任务
未关联任务
任务等级
-
作品预览
模板 · Vite + React源码(只读)
import React from 'react';
import SpaceCanvas from './SpaceCanvas';
import ControlPanel from './ControlPanel';
import MilestonePanel from './MilestonePanel';
import PhysicsCards from './PhysicsCards';
import MissionSummary from './MissionSummary';
import { PHASE } from './constants';
import { getPhaseLabel } from './app/phaseLabels';
import { appStyles as styles } from './app/appStyles';
import { useRocketAppState } from './hooks/useRocketAppState';
export default function App() {
const {
params, setParams,
simState,
running,
showHint, setShowHint,
timeScale, setTimeScale,
zoomLevel, setZoomLevel,
showGuidance, setShowGuidance,
canvasContainerRef,
handleLaunch, handleTLI, handleRestart,
handleMicroThrustStart, handleMicroThrustEnd,
handleRotateThrustStart, handleRotateThrustEnd,
displayData, guidanceData, predictedPath,
phase, isEnded,
prelaunchState,
canvasW, canvasH,
} = useRocketAppState();
return (
<div style={styles.root}>
<div style={styles.canvasArea} ref={canvasContainerRef}>
<SpaceCanvas
simState={simState || prelaunchState}
width={Math.max(canvasW, 400)}
height={canvasH}
zoomLevel={zoomLevel}
guidanceData={guidanceData}
predictedPath={predictedPath}
/>
<div style={styles.topBar}>
<div style={styles.missionTitle}>
<span style={styles.missionIcon}>🚀</span>
Artemis II 月球飞越任务模拟器
</div>
{running && (
<div style={styles.timeControls}>
<span style={styles.timeLabel}>时间:</span>
{[200, 400, 800, 1600, 3200].map(s => (
<button
key={s}
onClick={() => setTimeScale(s)}
style={{
...styles.timeBtn,
...(timeScale === s ? styles.timeBtnActive : {}),
}}
>
{s}x
</button>
))}
<span style={{ ...styles.timeLabel, marginLeft: 12 }}>缩放:</span>
<button
onClick={() => setZoomLevel(z => Math.min(z * 2, 64))}
style={styles.timeBtn}
>+</button>
<span style={styles.zoomValue}>{zoomLevel}x</span>
<button
onClick={() => setZoomLevel(z => Math.max(z / 2, 1))}
style={styles.timeBtn}
>−</button>
{zoomLevel > 1 && (
<button
onClick={() => setZoomLevel(1)}
style={{ ...styles.timeBtn, fontSize: 10 }}
>重置</button>
)}
</div>
)}
{simState && (
<div style={styles.phaseIndicator}>
<span style={styles.phaseDot} />
{getPhaseLabel(phase)}
</div>
)}
</div>
{simState && !isEnded && (
<div style={styles.bottomBar}>
<MilestonePanel
phase={phase}
showHint={showHint}
setShowHint={setShowHint}
/>
<PhysicsCards phase={phase} />
</div>
)}
{!simState && (
<div style={styles.welcome}>
<h1 style={styles.welcomeTitle}>Artemis II</h1>
<h2 style={styles.welcomeSub}>月球飞越任务模拟器</h2>
<p style={styles.welcomeDesc}>
模拟 NASA 阿耳忒弥斯2号任务:乘坐 Orion 飞船,
搭载 SLS 火箭升空,环绕月球并安全返回地球。
</p>
<div style={styles.welcomeStats}>
<div style={styles.welcomeStat}>
<div style={styles.welcomeStatVal}>384,400 km</div>
<div style={styles.welcomeStatLabel}>地月距离</div>
</div>
<div style={styles.welcomeStat}>
<div style={styles.welcomeStatVal}>~10 天</div>
<div style={styles.welcomeStatLabel}>任务时长</div>
</div>
<div style={styles.welcomeStat}>
<div style={styles.welcomeStatVal}>11.1 km/s</div>
<div style={styles.welcomeStatLabel}>再入速度</div>
</div>
</div>
<p style={styles.welcomeHint}>← 在左侧控制面板设置参数并发射</p>
</div>
)}
</div>
<div style={styles.sidebar}>
<ControlPanel
params={params}
setParams={setParams}
simState={simState || { phase: PHASE.PRELAUNCH }}
onLaunch={handleLaunch}
onTLI={handleTLI}
onMicroThrustStart={handleMicroThrustStart}
onMicroThrustEnd={handleMicroThrustEnd}
onRotateThrustStart={handleRotateThrustStart}
onRotateThrustEnd={handleRotateThrustEnd}
onRestart={handleRestart}
displayData={displayData}
showGuidance={showGuidance}
setShowGuidance={setShowGuidance}
guidanceData={guidanceData}
/>
</div>
{isEnded && (
<MissionSummary
simState={simState}
displayData={displayData}
onRestart={handleRestart}
/>
)}
</div>
);
}
Read-only