diff --git a/index.html b/index.html index 2bb1305..13cae72 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - 传感器及检测技术 - 实验课件系统 + 南湖名师/技能大师工作室
diff --git a/package.json b/package.json index 845aeec..5149d76 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "sensor-lab", + "name": "master-teacher-studio", "private": true, "version": "0.0.0", "type": "module", diff --git a/src/assets/images/components/按钮-下一步.png b/src/assets/images/components/按钮-下一步.png deleted file mode 100644 index e6573d4..0000000 Binary files a/src/assets/images/components/按钮-下一步.png and /dev/null differ diff --git a/src/assets/images/components/按钮-提交.png b/src/assets/images/components/按钮-提交.png deleted file mode 100644 index bf43f9b..0000000 Binary files a/src/assets/images/components/按钮-提交.png and /dev/null differ diff --git a/src/assets/images/components/按钮-清空.png b/src/assets/images/components/按钮-清空.png deleted file mode 100644 index ecdcc58..0000000 Binary files a/src/assets/images/components/按钮-清空.png and /dev/null differ diff --git a/src/assets/images/components/按钮-返回.png b/src/assets/images/components/按钮-返回.png new file mode 100644 index 0000000..e538e97 Binary files /dev/null and b/src/assets/images/components/按钮-返回.png differ diff --git a/src/assets/images/components/按钮-进入.png b/src/assets/images/components/按钮-进入.png new file mode 100644 index 0000000..a70ecaf Binary files /dev/null and b/src/assets/images/components/按钮-进入.png differ diff --git a/src/assets/images/experiment/01实验工具介绍.png b/src/assets/images/experiment/01实验工具介绍.png deleted file mode 100644 index a51d4bf..0000000 Binary files a/src/assets/images/experiment/01实验工具介绍.png and /dev/null differ diff --git a/src/assets/images/experiment/02实验工具选择.png b/src/assets/images/experiment/02实验工具选择.png deleted file mode 100644 index 76d4f9e..0000000 Binary files a/src/assets/images/experiment/02实验工具选择.png and /dev/null differ diff --git a/src/assets/images/experiment/03实验环境配置底图.png b/src/assets/images/experiment/03实验环境配置底图.png deleted file mode 100644 index a387a93..0000000 Binary files a/src/assets/images/experiment/03实验环境配置底图.png and /dev/null differ diff --git a/src/assets/images/experiment/1.png b/src/assets/images/experiment/1.png deleted file mode 100644 index 7d8578d..0000000 Binary files a/src/assets/images/experiment/1.png and /dev/null differ diff --git a/src/assets/images/experiment/arduino.png b/src/assets/images/experiment/arduino.png deleted file mode 100644 index 6b08ceb..0000000 Binary files a/src/assets/images/experiment/arduino.png and /dev/null differ diff --git a/src/assets/images/experiment/flash-cable.png b/src/assets/images/experiment/flash-cable.png deleted file mode 100644 index e27d14f..0000000 Binary files a/src/assets/images/experiment/flash-cable.png and /dev/null differ diff --git a/src/assets/images/experiment/keil.png b/src/assets/images/experiment/keil.png deleted file mode 100644 index 2439f28..0000000 Binary files a/src/assets/images/experiment/keil.png and /dev/null differ diff --git a/src/assets/images/experiment/sensor.png b/src/assets/images/experiment/sensor.png deleted file mode 100644 index f9150ae..0000000 Binary files a/src/assets/images/experiment/sensor.png and /dev/null differ diff --git a/src/assets/images/experiment/serial-assista.png b/src/assets/images/experiment/serial-assista.png deleted file mode 100644 index 8c19b6e..0000000 Binary files a/src/assets/images/experiment/serial-assista.png and /dev/null differ diff --git a/src/assets/images/experiment/stm32.png b/src/assets/images/experiment/stm32.png deleted file mode 100644 index 1046d79..0000000 Binary files a/src/assets/images/experiment/stm32.png and /dev/null differ diff --git a/src/assets/images/experiment/type-c.png b/src/assets/images/experiment/type-c.png deleted file mode 100644 index c356313..0000000 Binary files a/src/assets/images/experiment/type-c.png and /dev/null differ diff --git a/src/assets/images/experiment/windows.png b/src/assets/images/experiment/windows.png deleted file mode 100644 index 7e2a0ca..0000000 Binary files a/src/assets/images/experiment/windows.png and /dev/null differ diff --git a/src/assets/images/experiment/wireless.png b/src/assets/images/experiment/wireless.png deleted file mode 100644 index c7c2f74..0000000 Binary files a/src/assets/images/experiment/wireless.png and /dev/null differ diff --git a/src/assets/images/experiment/串口线.png b/src/assets/images/experiment/串口线.png deleted file mode 100644 index 5eedda4..0000000 Binary files a/src/assets/images/experiment/串口线.png and /dev/null differ diff --git a/src/assets/images/experiment/人体红外.png b/src/assets/images/experiment/人体红外.png deleted file mode 100644 index 94e7e96..0000000 Binary files a/src/assets/images/experiment/人体红外.png and /dev/null differ diff --git a/src/assets/images/experiment/光敏传感器.png b/src/assets/images/experiment/光敏传感器.png deleted file mode 100644 index 0492a90..0000000 Binary files a/src/assets/images/experiment/光敏传感器.png and /dev/null differ diff --git a/src/assets/images/experiment/内容背景页.png b/src/assets/images/experiment/内容背景页.png deleted file mode 100644 index 606a50e..0000000 Binary files a/src/assets/images/experiment/内容背景页.png and /dev/null differ diff --git a/src/assets/images/experiment/气体传感器.png b/src/assets/images/experiment/气体传感器.png deleted file mode 100644 index ddf0988..0000000 Binary files a/src/assets/images/experiment/气体传感器.png and /dev/null differ diff --git a/src/assets/images/experiment/温湿度传感器.png b/src/assets/images/experiment/温湿度传感器.png deleted file mode 100644 index 4ef5580..0000000 Binary files a/src/assets/images/experiment/温湿度传感器.png and /dev/null differ diff --git a/src/assets/images/experiment/磁敏传感器.png b/src/assets/images/experiment/磁敏传感器.png deleted file mode 100644 index 97c9f88..0000000 Binary files a/src/assets/images/experiment/磁敏传感器.png and /dev/null differ diff --git a/src/assets/images/home/按钮-开启实验.png b/src/assets/images/home/按钮-开启实验.png deleted file mode 100644 index 499ac44..0000000 Binary files a/src/assets/images/home/按钮-开启实验.png and /dev/null differ diff --git a/src/assets/images/home/进入页.png b/src/assets/images/home/进入页.png new file mode 100644 index 0000000..3a56706 Binary files /dev/null and b/src/assets/images/home/进入页.png differ diff --git a/src/assets/images/menu/转盘合.png b/src/assets/images/menu/转盘合.png new file mode 100644 index 0000000..fac782a Binary files /dev/null and b/src/assets/images/menu/转盘合.png differ diff --git a/src/assets/images/menu/首页背景.png b/src/assets/images/menu/首页背景.png new file mode 100644 index 0000000..da82d96 Binary files /dev/null and b/src/assets/images/menu/首页背景.png differ diff --git a/src/assets/images/初始页.png b/src/assets/images/初始页.png deleted file mode 100644 index 319d60d..0000000 Binary files a/src/assets/images/初始页.png and /dev/null differ diff --git a/src/assets/images/结束页.png b/src/assets/images/结束页.png deleted file mode 100644 index 63cdb7f..0000000 Binary files a/src/assets/images/结束页.png and /dev/null differ diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 986be39..2fd468b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,5 +1,4 @@ import { useNavigate } from "react-router-dom"; -import initialPageImage from "@/assets/images/初始页.png"; import { BackgroundImage, Image } from "@/components"; import { getStaticImage } from "@/utils"; @@ -8,22 +7,19 @@ export default function Home() { const handleStartExperiment = () => { console.log("点击开启实验"); - navigate("/experiment"); + navigate("/menu"); }; return ( console.log("背景图片加载完成")} - onError={() => console.log("背景图片加载失败")} > 开始实验按钮 -
-
- -
- -

- 传感器及检测技术 -

-
- -

实验课件交互式平台

-
- -
- -
- -
-

使用现代化技术构建 • React + Vite + Tailwind CSS

-
-
- - ); -} diff --git a/src/pages/Menu.tsx b/src/pages/Menu.tsx new file mode 100644 index 0000000..78d43b4 --- /dev/null +++ b/src/pages/Menu.tsx @@ -0,0 +1,36 @@ +import { useNavigate } from "react-router-dom"; +import { BackgroundImage, Image } from "@/components"; +import { getStaticImage } from "@/utils"; + +export default function Home() { + const navigate = useNavigate(); + + const handleStartExperiment = () => { + console.log("点击开启实验"); + // navigate("/experiment"); + }; + + return ( + + 返回 + + + + ); +} diff --git a/src/pages/experiment/ExperimentTitle.tsx b/src/pages/experiment/ExperimentTitle.tsx deleted file mode 100644 index 61a34eb..0000000 --- a/src/pages/experiment/ExperimentTitle.tsx +++ /dev/null @@ -1,71 +0,0 @@ -interface ExperimentTitleProps { - title: string; - description: string; -} - -export default function ExperimentTitle({ - title, - description, -}: ExperimentTitleProps) { - return ( - <> - {/* 标题 */} -
- {/* 主标题容器 */} -
- {/* 主标题 */} -
-

- {title} -

-
- - {/* 副标题 */} -
-

- {description} -

-
-
- - {/* 使用 SVG 绘制更精确的装饰线 */} - - {/* 左侧水平线 */} - - {/* 斜线（从左到右，向下倾斜）*/} - - {/* 右侧水平线（与左侧在同一高度）*/} - - -
- - ); -} diff --git a/src/pages/experiment/README.md b/src/pages/experiment/README.md deleted file mode 100644 index de00aac..0000000 --- a/src/pages/experiment/README.md +++ /dev/null @@ -1,210 +0,0 @@ -# 实验页面模块结构 - -## 文件组织 - -``` -src/pages/experiment/ -├── index.tsx # 主入口文件，管理步骤状态和路由 -├── Step1IntroPage.tsx # 第一步：实验工具介绍页面 -├── Step2SelectPage.tsx # 第二步：实验工具选择页面 -├── ExperimentTitle.tsx # 可复用的标题组件 -├── constants.ts # 常量数据（工具列表） -└── README.md # 本文档 -``` - -## 各文件职责 - -### 📄 index.tsx - -**职责**: 主入口文件，管理页面状态和步骤切换 - -- 管理 `step` 状态（当前在哪一步） -- 根据 step 渲染对应的页面组件 -- 提供背景图片容器 - -**关键代码**: - -```tsx -const [step, setStep] = useState(1); -{ - step === 1 && setStep(2)} />; -} -{ - step === 2 && ; -} -``` - ---- - -### 📄 Step1IntroPage.tsx - -**职责**: 第一步 - 实验工具介绍页面 - -- 显示所有 8 个实验工具 -- 展示每个工具的图片、名称和描述 -- 提供"下一步"按钮，点击后触发 `onNext` 回调 - -**Props**: - -- `onNext: () => void` - 点击下一步时的回调函数 - -**特点**: - -- 4 列网格布局 -- 每个工具包含图片和文字说明 -- 使用 `ExperimentTitle` 组件显示标题 - ---- - -### 📄 Step2SelectPage.tsx - -**职责**: 第二步 - 实验工具选择页面 - -- 显示左侧"可拖拽选项"区域（6 个工具） -- 显示右侧"实验工具区域"（拖放目标区） -- 提供"清空"和"提交"按钮 -- 显示底部提示文字 - -**布局结构**: - -- 左右分栏布局（flex 1:1） -- 左侧：3 列 2 行网格展示可选工具 -- 右侧：空白拖放区域 -- 底部：操作按钮和提示文字 - -**待实现功能**: - -- [ ] 拖拽功能（从左侧拖到右侧） -- [ ] 清空按钮功能 -- [ ] 提交按钮功能及验证逻辑 - ---- - -### 📄 ExperimentTitle.tsx - -**职责**: 可复用的标题组件 - -- 显示主标题（带蓝色边框的圆角矩形） -- 显示副标题文字 -- 显示装饰性的 SVG 线条 - -**Props**: - -```tsx -interface ExperimentTitleProps { - title: string; // 主标题文字 - description: string; // 副标题文字 -} -``` - -**样式特点**: - -- 主标题：白色背景、蓝色边框、斜体字 -- 副标题：灰色文字 -- 装饰线：左侧短线 + 斜线 + 右侧长线 - ---- - -### 📄 constants.ts - -**职责**: 存储静态数据常量 - -**导出内容**: - -1. **sensorImages** - 8 个实验工具的完整信息 - - ```tsx - { - src: string; // 图片路径 - name: string; // 工具名称 - description: string; // 工具描述 - } - []; - ``` - -2. **selectableTools** - 6 个可选择的工具（用于第二步） - ```tsx - { - src: string; // 图片路径 - name: string; // 工具名称 - } - []; - ``` - ---- - -## 设计原则 - -### 单一职责原则 (SRP) - -- 每个文件只负责一个功能模块 -- 组件职责清晰，易于维护 - -### 可复用性 - -- `ExperimentTitle` 可在多个步骤中使用 -- 数据与视图分离，便于扩展 - -### 数据驱动 - -- 使用 `constants.ts` 统一管理数据 -- 通过 map 渲染列表，避免重复代码 - -### 可扩展性 - -- 易于添加新的步骤（Step3、Step4...） -- 状态管理集中在 `index.tsx` - ---- - -## 后续开发建议 - -### 短期任务 - -1. 实现拖拽功能（使用 HTML5 Drag and Drop API 或库） -2. 添加状态管理（已选中的工具） -3. 实现"清空"和"提交"按钮功能 -4. 添加正确答案验证逻辑 - -### 长期优化 - -1. 添加动画效果（页面切换、拖拽反馈） -2. 添加错误提示和成功提示 -3. 支持键盘操作（无障碍访问） -4. 添加进度指示器 -5. 考虑使用状态管理库（如 Zustand）管理复杂状态 - ---- - -## 使用示例 - -### 添加新步骤 - -```tsx -// 1. 创建新组件 -// Step3TestPage.tsx -export default function Step3TestPage() { - return
第三步内容
; -} - -// 2. 在 index.tsx 中引入 -import Step3TestPage from "./Step3TestPage"; - -// 3. 添加到渲染逻辑 -{ - step === 3 && ; -} -``` - -### 修改工具数据 - -直接编辑 `constants.ts` 文件即可，组件会自动更新。 - ---- - -## 技术栈 - -- React 18 -- TypeScript -- Tailwind CSS -- 自定义 Image 组件 diff --git a/src/pages/experiment/Step1IntroPage.tsx b/src/pages/experiment/Step1IntroPage.tsx deleted file mode 100644 index f3900b8..0000000 --- a/src/pages/experiment/Step1IntroPage.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { BackgroundImage, Image } from "@/components"; -import { getStaticImage } from "@/utils"; -import ExperimentTitle from "./ExperimentTitle"; -import { sensorImages } from "./constants"; - -interface Step1IntroPageProps { - onNext: () => void; -} - -export default function Step1IntroPage({ onNext }: Step1IntroPageProps) { - return ( - <> - console.log("背景图片加载完成")} - onError={() => console.log("背景图片加载失败")} - > - - - - ); -} diff --git a/src/pages/experiment/Step2SelectPage.tsx b/src/pages/experiment/Step2SelectPage.tsx deleted file mode 100644 index 132d511..0000000 --- a/src/pages/experiment/Step2SelectPage.tsx +++ /dev/null @@ -1,446 +0,0 @@ -import { useState, useEffect, useRef, useMemo, useCallback } from "react"; -import { createPortal } from "react-dom"; -import { BackgroundImage, Image } from "@/components"; -import { selectableTools, correctAnswers } from "./constants"; -import { useDragAndDrop, useDropZone } from "@/hooks/useDragAndDrop"; -import { getStaticImage } from "@/utils"; - -interface Tool { - src: string; - name: string; -} - -interface SelectedTool extends Tool { - id: string; -} - -interface Step2SelectPageProps { - onNext?: () => void; -} - -// ==================== 常量定义 ==================== -const MAX_TOOLS = 4; // 最大选择工具数量 -const TOOL_GRID_COLS = 3; // 左侧工具网格列数 -const SELECTED_GRID_COLS = 2; // 右侧已选工具网格列数 - -export default function Step2SelectPage({ - onNext: _onNext, -}: Step2SelectPageProps) { - // ==================== 状态管理 ==================== - const [selectedTools, setSelectedTools] = useState([]); // 已选择的工具列表 - const [isSubmitted, setIsSubmitted] = useState(false); // 是否已提交 - const [isCorrect, setIsCorrect] = useState(false); // 答案是否正确 - - // ==================== 引用和Hook ==================== - const mousePositionRef = useRef({ x: 0, y: 0 }); // 鼠标位置缓存 - // 拖拽功能Hook - const { - isDragging, // 是否正在拖拽 - dragData, // 拖拽的数据 - mousePosition, // 鼠标位置 - startDrag, // 开始拖拽 - endDrag, // 结束拖拽 - isPointInElement, // 检查点是否在元素内 - } = useDragAndDrop(); - - // 放置区域Hook - const { dropZoneRef, isOver, checkIsOver } = useDropZone(); - const checkIsOverRef = useRef(checkIsOver); // 缓存checkIsOver函数引用 - - // ==================== 计算属性 ==================== - // 获取可用的工具列表（过滤掉已选择的） - const availableTools = useMemo( - () => - selectableTools.filter( - (tool) => !selectedTools.some((selected) => selected.name === tool.name) - ), - [selectedTools] - ); - - // ==================== 事件处理函数 ==================== - /** - * 开始拖拽工具 - * @param tool 要拖拽的工具 - * @param e 鼠标事件 - */ - const handleMouseDown = useCallback( - (tool: Tool, e: React.MouseEvent) => { - try { - // 检查是否允许拖拽 - if (isSubmitted && isCorrect) { - return; // 已提交且正确，不允许拖拽 - } - if (selectedTools.length >= MAX_TOOLS) { - return; // 已达到最大数量限制 - } - - // 验证工具数据有效性 - if (!tool || !tool.src || !tool.name) { - console.warn("Invalid tool data:", tool); - return; - } - - startDrag(tool, e); - } catch (error) { - console.error("Error in handleMouseDown:", error); - } - }, - [isSubmitted, isCorrect, selectedTools.length, startDrag] - ); - - // ==================== 副作用处理 ==================== - // 更新checkIsOver函数引用 - useEffect(() => { - checkIsOverRef.current = checkIsOver; - }, [checkIsOver]); - - // 监听鼠标位置，检查是否在放置区域上 - useEffect(() => { - if (isDragging) { - mousePositionRef.current = { x: mousePosition.x, y: mousePosition.y }; - checkIsOverRef.current(mousePosition.x, mousePosition.y); - } - }, [isDragging, mousePosition.x, mousePosition.y]); - - // 监听鼠标释放，处理拖拽结束 - useEffect(() => { - if (!isDragging) return; - - const handleMouseUp = () => { - // 检查是否在放置区域内 - if ( - dragData && - isPointInElement( - mousePositionRef.current.x, - mousePositionRef.current.y, - dropZoneRef.current - ) - ) { - // 添加工具到选择列表 - setSelectedTools((prev) => { - const isAlreadyAdded = prev.some( - (tool) => tool.name === dragData.name - ); - - // 检查数量限制 - if (prev.length >= MAX_TOOLS) { - return prev; // 已达到最大数量，不添加新工具 - } - - // 添加新工具 - if (!isAlreadyAdded) { - const newTool: SelectedTool = { - ...dragData, - id: `selected-${Date.now()}`, - }; - return [...prev, newTool]; - } - return prev; - }); - } - endDrag(); - }; - - window.addEventListener("mouseup", handleMouseUp); - return () => window.removeEventListener("mouseup", handleMouseUp); - }, [ - isDragging, - dragData, - mousePosition, - endDrag, - isPointInElement, - dropZoneRef, - ]); - - /** - * 清空所有选择 - */ - const handleClear = useCallback(() => { - setSelectedTools([]); - setIsSubmitted(false); - setIsCorrect(false); - }, []); - - /** - * 提交选择并验证答案 - */ - const handleSubmit = useCallback(() => { - try { - if (selectedTools.length === 0) { - return; // 没有选择任何工具 - } - - // 获取选择的工具名称 - const selectedNames = selectedTools.map((tool) => tool.name); - - // 检查数量是否一致 - if (selectedNames.length !== correctAnswers.length) { - setIsSubmitted(true); - setIsCorrect(false); - return; - } - - // 检查每个选择的工具是否都在正确答案中 - const allCorrect = selectedNames.every((name) => - correctAnswers.includes(name) - ); - - setIsSubmitted(true); - setIsCorrect(allCorrect); - } catch (error) { - console.error("Error in handleSubmit:", error); - setIsSubmitted(true); - setIsCorrect(false); - } - }, [selectedTools]); - - /** - * 删除已选择的工具 - * @param id 工具ID - */ - const handleRemoveTool = useCallback( - (id: string) => { - try { - // 检查是否允许删除 - if (isSubmitted && isCorrect) { - return; // 已提交且正确，不允许删除 - } - - // 验证ID有效性 - if (!id || typeof id !== "string") { - console.warn("Invalid tool ID:", id); - return; - } - - setSelectedTools((prev) => prev.filter((tool) => tool.id !== id)); - } catch (error) { - console.error("Error in handleRemoveTool:", error); - } - }, - [isSubmitted, isCorrect] - ); - - return ( - <> - - {/* ==================== 主要内容区域 ==================== */} -
- {/* ==================== 左侧：可拖拽工具列表 ==================== */} -
-
- {availableTools.length === 0 ? ( - // 空状态：所有工具已选择完毕 -
-
🎯
-
- 所有工具已选择完毕 -
-
请检查右侧选择区域
-
- ) : ( -
- {availableTools.map((tool, index) => { - const isBeingDragged = - isDragging && dragData?.name === tool.name; - const isDragDisabled = - (isSubmitted && isCorrect) || - selectedTools.length >= MAX_TOOLS; - - return ( -
handleMouseDown(tool, e)} - className={`flex flex-col items-center transition-all duration-200 select-none p-4 rounded-lg ${ - isDragDisabled - ? "cursor-not-allowed opacity-50 grayscale" - : "cursor-move hover:scale-105 hover:shadow-lg hover:bg-white/10" - } ${isBeingDragged ? "opacity-30 scale-95" : ""}`} - > - -

- {tool.name} -

-
- ); - })} -
- )} -
-
- - {/* ==================== 右侧：实验工具放置区域 ==================== */} -
-
- {/* ==================== 状态显示区域 ==================== */} - {isSubmitted ? ( - // 提交后的结果显示 -
- {isCorrect ? ( - // 答案正确 - <> -

- 选择正确，继续实验吧 -

- - ) : ( - // 答案错误 - <> -

- 选择错误，请重新选择 -

-
-

- 答案提示 -

-

- {correctAnswers.join("、")} -

-
- - )} -
- ) : selectedTools.length === 0 ? ( - // 空状态：未选择任何工具 -
-
📦
-
拖拽工具到这里
-
- 从左侧选择最多{MAX_TOOLS}个工具 -
-
- ) : selectedTools.length >= MAX_TOOLS ? ( - // 达到最大数量限制 -
-
- {selectedTools.map((tool) => ( -
- -

- {tool.name} -

- {/* 删除按钮 - 答案正确后隐藏 */} - {!(isSubmitted && isCorrect) && ( - - )} -
- ))} -
-

- 已选择{MAX_TOOLS}个工具，达到最大数量限制 -

-
- ) : ( - // 正常状态：显示已选择的工具 -
- {selectedTools.map((tool) => ( -
- -

- {tool.name} -

- {/* 删除按钮 - 答案正确后隐藏 */} - {!(isSubmitted && isCorrect) && ( - - )} -
- ))} -
- )} -
- - {/* ==================== 底部操作按钮 ==================== */} - {!isSubmitted || !isCorrect ? ( -
- - -
- ) : null} -
-
- - {/* ==================== 下一步按钮 ==================== */} - {isSubmitted && isCorrect && ( - - )} - - {/* ==================== 拖拽预览 ==================== */} - {/* 使用 Portal 渲染到 body，避免受 scale 影响 */} - {isDragging && - dragData && - createPortal( -
-
- -
- {dragData.name} -
-
-
, - document.body - )} - - {/* */} - - ); -} diff --git a/src/pages/experiment/Step3ConfigPage.tsx b/src/pages/experiment/Step3ConfigPage.tsx deleted file mode 100644 index b582207..0000000 --- a/src/pages/experiment/Step3ConfigPage.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { BackgroundImage, Image } from "@/components"; -import { getStaticImage } from "@/utils"; - -interface Step3ConfigPageProps { - onNext?: () => void; -} - -export default function Step3ConfigPage({ onNext }: Step3ConfigPageProps) { - return ( - <> - - -
- - {/* 文字提示 */} -
-

- 打开力敏传感器 - 文件夹 - USER - 子文件夹，找到并打开 - - 工程文件LED.uvprojx - - 。 -

-

- 这一步骤是启动实验项目的基础，确保工程文件能够正确加载。 -

-
- - - ); -} diff --git a/src/pages/experiment/constants.ts b/src/pages/experiment/constants.ts deleted file mode 100644 index 0cc18f9..0000000 --- a/src/pages/experiment/constants.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { getStaticImage } from "@/utils"; - -// 传感器图片数据 -export const sensorImages = [ - { - src: getStaticImage("experiment/windows.png"), - description: "作为传感器信号的接收端", - name: "Windows电脑", - }, - { - src: getStaticImage("experiment/stm32.png"), - description: "连接传感器与电脑之间的桥梁", - name: "STM32主控板", - }, - { - src: getStaticImage("experiment/serial-cable.png"), - description: "连接STM32主控板与电脑", - name: "串口线", - }, - { - src: getStaticImage("experiment/serial-assistant.png"), - description: "显示传感器传送到接收端的数据", - name: "串口助手", - }, - { - src: getStaticImage("experiment/sensor.png"), - description: "", - name: "力敏传感器", - }, - { - src: getStaticImage("experiment/flash-cable.png"), - description: "将代码烧录至STM32主控板中", - name: "烧录线", - }, - { - src: getStaticImage("experiment/wireless.png"), - description: "无线的方式连接STM32与电脑", - name: "无线通信模组", - }, - { - src: getStaticImage("experiment/keil.png"), - description: "电脑中配置传感器、上传代码", - name: "keil软件", - }, -]; - -// 可选择的工具列表（用于第二步） -export const selectableTools = [ - { - src: getStaticImage("experiment/keil.png"), - name: "keil软件", - }, - { - src: getStaticImage("experiment/stm32.png"), - name: "STM32主控板", - }, - { - src: getStaticImage("experiment/type-c.png"), - name: "TYPE-C", - }, - { - src: getStaticImage("experiment/sensor.png"), - name: "力敏传感器", - }, - { - src: getStaticImage("experiment/flash-cable.png"), - name: "烧录线", - }, - { - src: getStaticImage("experiment/arduino.png"), - name: "Arduino开发板", - }, -]; - -// 正确答案列表 -export const correctAnswers = [ - "keil软件", - "STM32主控板", - "力敏传感器", - "烧录线", -]; diff --git a/src/pages/experiment/index.tsx b/src/pages/experiment/index.tsx deleted file mode 100644 index d055ade..0000000 --- a/src/pages/experiment/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -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 ( -
-
- {validStep === 1 && handleNext(2)} />} - {validStep === 2 && handleNext(3)} />} - {validStep === 3 && handleNext(4)} />} -
-
- ); -} diff --git a/src/router/index.tsx b/src/router/index.tsx index b913756..ba34f7a 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -1,28 +1,13 @@ import { createBrowserRouter, Navigate } from "react-router-dom"; import Home from "@/pages/Home"; -import Experiment from "../pages/experiment"; -import NotFound from "../pages/NotFound"; +import Menu from "@/pages/Menu"; +import NotFound from "@/pages/NotFound"; /** * 应用路由配置 * 使用 React Router v7 的 createBrowserRouter */ const router = createBrowserRouter([ - // { - // path: '/', - // element: , - // errorElement: , - // children: [ - // { - // index: true, - // element: , - // }, - // { - // path: 'experiment/:id', - // element: , - // }, - // ], - // }, { path: "/", element: , @@ -33,12 +18,8 @@ const router = createBrowserRouter([ element: , }, { - path: "/experiment", - element: , - }, - { - path: "/experiment/:step", - element: , + path: "/menu", + element: , }, { path: "*",