fix:解决拖拽问题

src/pages/experiment/README.md

@@ -0,0 +1,210 @@
+# 实验页面模块结构
+
+## 文件组织
+
+```
+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 组件