shanghai-residences/src/pages/experiment

实验页面模块结构

文件组织

src/pages/experiment/
├── index.tsx              # 主入口文件，管理步骤状态和路由
├── Step1IntroPage.tsx     # 第一步：实验工具介绍页面
├── Step2SelectPage.tsx    # 第二步：实验工具选择页面
├── ExperimentTitle.tsx    # 可复用的标题组件
├── constants.ts           # 常量数据（工具列表）
└── README.md             # 本文档

各文件职责

📄 index.tsx

职责: 主入口文件，管理页面状态和步骤切换

• 管理 step 状态（当前在哪一步）
• 根据 step 渲染对应的页面组件
• 提供背景图片容器

关键代码:

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:

interface ExperimentTitleProps {
  title: string; // 主标题文字
  description: string; // 副标题文字
}

样式特点:

• 主标题：白色背景、蓝色边框、斜体字
• 副标题：灰色文字
• 装饰线：左侧短线 + 斜线 + 右侧长线

---

📄 constants.ts

职责: 存储静态数据常量

导出内容:

1. sensorImages - 8 个实验工具的完整信息

   {
     src: string; // 图片路径
     name: string; // 工具名称
     description: string; // 工具描述
   }
   [];
   

2. selectableTools - 6 个可选择的工具（用于第二步）

   {
     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）管理复杂状态

---

使用示例

添加新步骤

// 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 组件