# 实验页面模块结构

## 文件组织

```
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 && <Step1IntroPage onNext={() => setStep(2)} />;
}
{
  step === 2 && <Step2SelectPage />;
}
```

---

### 📄 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 <div>第三步内容</div>;
}

// 2. 在 index.tsx 中引入
import Step3TestPage from "./Step3TestPage";

// 3. 添加到渲染逻辑
{
  step === 3 && <Step3TestPage />;
}
```

### 修改工具数据

直接编辑 `constants.ts` 文件即可，组件会自动更新。

---

## 技术栈

- React 18
- TypeScript
- Tailwind CSS
- 自定义 Image 组件