fix:解决拖拽问题

2025-10-20 17:50:42 +08:00
1 parent ce06ad0214
commit 6367014e1f
@@ -0,0 +1,102 @@
+import { Image } from "@/components";
+import { getStaticImage } from "@/utils";
+import ExperimentTitle from "./ExperimentTitle";
+
+interface Step3ConfigPageProps {
+  onNext?: () => void;
+}
+
+export default function Step3ConfigPage({ onNext }: Step3ConfigPageProps) {
+  return (
+    <>
+      <ExperimentTitle
+        title="03实验环境配置"
+        description="配置实验所需的软件和硬件环境，确保实验能够顺利进行。"
+      />
+
+      {/* 主要内容区域 */}
+      <div className="mt-10">
+        <div className="bg-white/80 backdrop-blur-sm rounded-lg p-8 shadow-lg">
+          <h3 className="text-2xl font-bold text-gray-800 mb-6">
+            环境配置步骤
+          </h3>
+
+          <div className="space-y-6">
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
+                1
+              </div>
+              <div className="flex-1">
+                <h4 className="text-xl font-semibold text-gray-800 mb-2">
+                  安装 Keil 软件
+                </h4>
+                <p className="text-gray-600">
+                  下载并安装 Keil μVision IDE，用于编写和编译 STM32 程序。
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
+                2
+              </div>
+              <div className="flex-1">
+                <h4 className="text-xl font-semibold text-gray-800 mb-2">
+                  连接 STM32 主控板
+                </h4>
+                <p className="text-gray-600">
+                  使用烧录线将 STM32 主控板连接到电脑，确保驱动正常安装。
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
+                3
+              </div>
+              <div className="flex-1">
+                <h4 className="text-xl font-semibold text-gray-800 mb-2">
+                  配置传感器连接
+                </h4>
+                <p className="text-gray-600">
+                  将力敏传感器正确连接到 STM32 主控板的指定引脚。
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
+                4
+              </div>
+              <div className="flex-1">
+                <h4 className="text-xl font-semibold text-gray-800 mb-2">
+                  烧录程序
+                </h4>
+                <p className="text-gray-600">
+                  在 Keil 中编译程序，并通过烧录线将程序下载到 STM32 主控板。
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 底部提示和下一步按钮 */}
+      <div className="text-center mt-10">
+        <p className="text-blue-400 text-2xl font-semibold mb-6">
+          完成以上步骤后，即可进入下一阶段的实验操作。
+        </p>
+      </div>
+
+      {onNext && (
+        <div onClick={onNext}>
+          <Image
+            className="absolute bottom-4 right-6 cursor-pointer"
+            src={getStaticImage("components/按钮-下一步.png")}
+            button={true}
+          />
+        </div>
+      )}
+    </>
+  );
+}