feat:提交实验室环境配置

src/pages/experiment/index.tsx

@@ -1,24 +1,42 @@
 import { BackgroundImage } from "@/components";
 import { getStaticImage } from "@/utils";
-import { useState } from "react";
+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, setStep] = useState(1); // 1: 工具介绍, 2: 工具选择, 3: 实验环境配置
+  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 (
-    <BackgroundImage
-      src={getStaticImage("experiment/内容背景页.png")}
-      alt="传感器实验首页"
-      className="h-full w-full "
-    >
-      <div className="h-full relative py-20 px-10">
-        {step === 1 && <Step1IntroPage onNext={() => setStep(2)} />}
-        {step === 2 && <Step2SelectPage onNext={() => setStep(3)} />}
-        {step === 3 && <Step3ConfigPage onNext={() => setStep(4)} />}
+    <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>
-    </BackgroundImage>
+    </div>
   );
 }