43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { BackgroundImage } from "@/components";
|
|
import { getStaticImage } from "@/utils";
|
|
import { useState, useEffect } from "react";
|
|
import { useParams, useNavigate } from "react-router-dom";
|
|
import Step1IntroPage from "./Step1IntroPage";
|
|
import Step2SelectPage from "./Step2SelectPage";
|
|
import Step3ConfigPage from "./Step3ConfigPage";
|
|
|
|
export default function Experiment() {
|
|
const { step: stepParam } = useParams<{ step?: string }>();
|
|
const navigate = useNavigate();
|
|
|
|
// 从路由参数获取step，默认为1
|
|
const currentStep = stepParam ? parseInt(stepParam, 10) : 1;
|
|
|
|
// 验证step参数的有效性
|
|
const validStep = currentStep >= 1 && currentStep <= 3 ? currentStep : 1;
|
|
|
|
// 如果step参数无效，重定向到默认step
|
|
useEffect(() => {
|
|
if (stepParam && (currentStep < 1 || currentStep > 3)) {
|
|
navigate("/experiment/1", { replace: true });
|
|
}
|
|
}, [stepParam, currentStep, navigate]);
|
|
|
|
// 处理步骤切换
|
|
const handleNext = (nextStep: number) => {
|
|
if (nextStep <= 3) {
|
|
navigate(`/experiment/${nextStep}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="h-full">
|
|
{validStep === 1 && <Step1IntroPage onNext={() => handleNext(2)} />}
|
|
{validStep === 2 && <Step2SelectPage onNext={() => handleNext(3)} />}
|
|
{validStep === 3 && <Step3ConfigPage onNext={() => handleNext(4)} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|