feat: engine improvements, new scenes, videos, subtitles, hotspot component and docs update

ROADMAP.md

@@ -179,61 +179,75 @@ interface SaveData {
 - [x] `vite.config.ts` — 多页面构建（main + editor）
 - [x] 验证：编辑器能产出合法 JSON，引擎能正确加载并运行
 
-### P4 图片热点 — 点击图片触发分支（待实现）
+### P4 视频/图片热点 — 点击画面区域触发分支 ✅ 已完成 2026-06-08
 
-目标：场景支持静态图片替代视频，图上定义可点击热区，点击不同位置触发不同分支
+目标：在视频或图片上定义可点击热区（Hotspot），玩家点击画面不同位置触发不同分支。
+热区既可覆盖在静态图片上（调查/解谜场景），也可覆盖在播放中的视频上（根据时间轴淡入淡出）。
+
+**视频热点 vs 图片热点（架构统一，差异仅两点）：**
+
+| | 图片热点 | 视频热点 |
+|------|----------|----------|
+| 底层内容 | `<img>` 元素 | `<video>` 元素（已经在播） |
+| 热点出现时机 | 始终可见 | 按时间轴出现/消失（`showAt`/`hideAt`） |
 
 **场景数据设计：**
 
 ```json
 {
-  "id": "crime_scene",
-  "type": "image",
-  "imageUrl": "/images/crime_scene.jpg",
-  "subtitleUrl": "/subtitles/crime_scene.vtt",
+  "id": "investigation",
+  "type": "video",
+  "videoUrl": "/videos/investigation.mp4",
+  "subtitleUrl": "/subtitles/investigation.vtt",
   "hotspots": [
     {
       "id": "hs_desk",
-      "x": 0.15, "y": 0.25, "width": 0.18, "height": 0.12,
       "label": "查看书桌",
       "targetScene": "desk_detail",
+      "x": 0.15, "y": 0.30, "width": 0.25, "height": 0.35,
+      "showAt": 2.0,
+      "hideAt": 8.0,
       "conditions": [{ "variable": "investigation", "op": ">=", "value": 1 }],
       "effects": [{ "type": "setFlag", "target": "checked_desk" }]
     },
     {
       "id": "hs_window",
-      "x": 0.72, "y": 0.08, "width": 0.15, "height": 0.28,
-      "label": "查看窗户",
-      "targetScene": "window_detail"
+      "label": "靠近窗户",
+      "targetScene": "window_look",
+      "x": 0.70, "y": 0.10, "width": 0.20, "height": 0.40,
+      "showAt": 5.0,
+      "hideAt": 10.0
     },
     {
-      "id": "hs_body",
-      "x": 0.40, "y": 0.40, "width": 0.10, "height": 0.22,
-      "label": "检查尸体",
-      "targetScene": "body_detail",
-      "timeLimit": 10
+      "id": "hs_door",
+      "label": "离开房间",
+      "targetScene": "leave_room",
+      "x": 0.30, "y": 0.60, "width": 0.40, "height": 0.30,
+      "timeLimit": 15
     }
   ],
   "choices": [
-    { "text": "离开现场", "targetScene": "leave_room" }
+    { "text": "放弃调查", "targetScene": "give_up" }
   ]
 }
 ```
 
 **字段约定：**
-- `type: "image"` — 声明为图片场景（默认/不存在则为视频场景）
 - `x/y/width/height` — 热区坐标，使用**相对比例**（0~1），自适应屏幕尺寸
-- 图片场景仍可同时附带底部 `choices`（如"离开"选项）
-- `hotspots` 支持 `conditions`（条件显隐）、`effects`（点击后效果）、`timeLimit`（限时）
+- `showAt`/`hideAt` — 视频热点的时间轴（秒），未设置时热区始终可见（兼容图片场景和始终可见的视频热点）
+- `hotspots` 支持 `conditions`（条件显隐）、`effects`（点击后效果）、`timeLimit`（限时热区）
+- 热点场景仍可同时附带底部 `choices`（如"放弃调查"按钮）
+- `type` 字段区分 `"video"`（默认）和 `"image"`（静态图，此时 `imageUrl` 替代 `videoUrl`）
 
 **实现清单：**
 
-- [ ] `engine/types.ts` — `SceneNode.type` 字段、`Hotspot` 接口
-- [ ] `engine/core/Engine.ts` — 支持 `type: "image"` 场景，挂载图片 + 热区
-- [ ] `src/components/ImageScene.vue` — 渲染图片 + 热区矩形 + hover 高亮 + label 浮动提示
-- [ ] `editor/components/NodeEditor.vue` — 场景类型切换（视频/图片）+ 热区可视化编辑（拖放矩形）
-- [ ] `public/scenes/demo.json` — 新增图片场景示例 + 示例图片
-- [ ] 验证：图片加载、热区点击触发分支、条件过滤、限时热区
+- [x] `engine/types.ts` — `SceneNode.type` 字段、`Hotspot` 接口（含 `showAt`/`hideAt`）
+- [x] `src/components/HotspotLayer.vue` — 通用热区覆盖层：叠加在视频或图片之上，render 热区矩形 + hover 高亮 + label 浮动提示
+- [x] `engine/core/Engine.ts` — 视频模式下监听 timeupdate，按时显隐热区；点击热区触发分支跳转
+- [ ] `editor/components/NodeEditor.vue` — 场景类型切换（视频/图片）+ 热区列表编辑 + 时间轴参数（showAt/hideAt）
+- [x] `public/images/` — 示例图片目录
+- [x] `public/scenes/demo.json` — 新增图片热点场景 `investigation_site` + 视频热点场景 `corridor`
+- [x] 验证：图片热区点击触发、视频热区按时出现/消失、条件过滤、hover 高亮
 
 ### P5 选择等待循环 — 视频结束循环播放（待实现）