103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|