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

frontend/index.html

@@ -77,6 +77,9 @@
           <button class="primary" type="submit">
             <span>运行分割</span>
           </button>
+          <button class="ghost compare-entry" id="controlCompareButton" type="button" disabled>
+            多方法对比
+          </button>
         </form>
 
         <section class="viewer">
@@ -104,9 +107,9 @@
               <div class="pane-head">
                 <div>
                   <p class="eyebrow">Live Workspace</p>
-                  <h2>预览与结果</h2>
+                  <h2>预览与结果视频</h2>
                 </div>
-                <span id="resultCount">0 个结果</span>
+                <button class="ghost media-button" id="openCompareButton" type="button" disabled>多方法对比</button>
               </div>
 
               <div class="progress-wrap" id="progressWrap" hidden>
@@ -114,6 +117,23 @@
                 <p id="progressText">准备任务</p>
               </div>
 
+              <div class="result-video-stage">
+                <div class="preview-empty" id="resultVideoEmpty">运行分割后，这里会显示叠加结果视频。</div>
+                <video id="resultVideoPreview" controls muted hidden></video>
+              </div>
+            </section>
+          </div>
+
+          <section class="workspace-pane frame-browser">
+            <div class="pane-head">
+              <div>
+                <p class="eyebrow">Frame Review</p>
+                <h2>预览与结果查看</h2>
+              </div>
+              <span id="resultCount">0 个结果</span>
+            </div>
+
+            <div class="frame-browser-body">
               <div class="summary-strip" id="summaryStrip" hidden>
                 <div><span>任务</span><strong id="summaryJob">-</strong></div>
                 <div><span>帧数</span><strong id="summaryFrames">-</strong></div>
@@ -123,8 +143,8 @@
 
               <div class="empty" id="emptyState">运行分割后，这里会显示原帧、叠加图、掩膜和指标。</div>
               <div class="result-grid" id="resultGrid"></div>
-            </section>
-          </div>
+            </div>
+          </section>
         </section>
       </section>
     </main>
@@ -168,6 +188,17 @@
       </div>
     </dialog>
 
+    <dialog class="detail-dialog compare-dialog" id="compareDialog">
+      <div class="dialog-head">
+        <div>
+          <p class="eyebrow">Method Compare</p>
+          <h2 id="compareTitle">当前帧多方法对比</h2>
+        </div>
+        <button class="icon-button" id="closeCompareDialog" type="button" aria-label="关闭多方法对比">×</button>
+      </div>
+      <div class="compare-grid" id="compareGrid"></div>
+    </dialog>
+
     <template id="resultCardTemplate">
       <article class="result-card" tabindex="0">
         <div class="card-top">