2026-05-18-19-56-47 重构双视频同步与单帧对比

工程分析/实现方案-2026-05-18-19-56-47.md

@@ -0,0 +1,48 @@
+# 实现方案
+
+开始时间：2026-05-18-19-56-47
+
+## 后端改造
+
+1. 视频分割返回时间映射
+   - 在 `_process_video` 中读取源视频 `fps`、总帧数、时长。
+   - 每个返回帧增加：
+     - `source_time`：源视频中的时间。
+     - `result_time`：结果视频中的时间。
+     - `result_index`：结果视频内部帧序号。
+   - 返回 `source_fps`、`result_fps`、`duration`、`result_duration`。
+
+2. 新增单帧多方法对比接口
+   - `POST /api/compare-frame`
+   - 参数：文件、`frame_index`、`sensitivity`。
+   - 后端定位到对应帧和上一帧，对该帧运行 `compare_frame`，返回多方法图片结果。
+
+## 前端改造
+
+1. 双视频区域
+   - 左侧：原始视频。
+   - 右侧：结果视频。
+   - 右侧标题改为“预览与结果视频”。
+
+2. 视频同步
+   - 维护 `currentFrame` 和后端返回的时间映射。
+   - 点击下方帧列表时同时 seek 原始视频与结果视频。
+   - 用户 seek/play/pause 任一视频时同步另一个视频，使用锁避免递归触发。
+
+3. 下方帧列表
+   - 新增“预览与结果查看”区域。
+   - 复用现有结果图片卡片；点击后设置当前帧并同步两个视频。
+
+4. 多方法对比
+   - 控制面板中移除方法卡片里的“多方法对比”，改为运行按钮下方的独立按钮。
+   - 默认禁用。
+   - 分割完成且当前帧存在时启用。
+   - 点击后调用 `/api/compare-frame`，在弹窗中显示当前帧多方法对比。
+
+5. 进度条
+   - 移除 CSS 无限动画。
+   - 使用 JS 设置固定阶段进度：准备、上传处理、生成结果、完成。
+
+## 注意
+
+结果视频目前由抽样帧组成，因此同步采用返回的 `source_time` 与 `result_time` 映射，并在用户拖动时选择最近的分割帧。