2026-05-18-19-37-10 调整原始视频与结果同级分栏

frontend/app.js

@@ -28,6 +28,7 @@ const jobMeta = document.querySelector("#jobMeta");
 const detailDialog = document.querySelector("#detailDialog");
 const closeDialog = document.querySelector("#closeDialog");
 const openSourceButton = document.querySelector("#openSourceButton");
+const sourcePaneTitle = document.querySelector("#sourcePaneTitle");
 const sourceDialog = document.querySelector("#sourceDialog");
 const closeSourceDialog = document.querySelector("#closeSourceDialog");
 const sourceTitle = document.querySelector("#sourceTitle");
@@ -78,12 +79,14 @@ function renderPreview(file) {
   if (file.type.startsWith("video/")) {
     videoPreview.src = currentObjectUrl;
     videoPreview.hidden = false;
-    openSourceButton.textContent = "查看原始视频";
+    openSourceButton.textContent = "放大查看";
+    sourcePaneTitle.textContent = "查看原始视频";
     sourceTitle.textContent = "原始视频";
   } else {
     imagePreview.src = currentObjectUrl;
     imagePreview.hidden = false;
-    openSourceButton.textContent = "查看原始图像";
+    openSourceButton.textContent = "放大查看";
+    sourcePaneTitle.textContent = "查看原始图像";
     sourceTitle.textContent = "原始图像";
   }
   jobMeta.textContent = `已选择 ${file.name}`;
@@ -229,6 +232,7 @@ function clearAll() {
   sourceVideo.removeAttribute("src");
   sourceImage.removeAttribute("src");
   openSourceButton.hidden = true;
+  sourcePaneTitle.textContent = "查看原始视频";
   if (sourceDialog.open) sourceDialog.close();
   previewEmpty.hidden = false;
   resultGrid.innerHTML = "";

frontend/index.html

@@ -80,44 +80,51 @@
         </form>
 
         <section class="viewer">
-          <div class="viewer-head">
-            <div>
-              <p class="eyebrow">Live Workspace</p>
-              <h2>预览与结果</h2>
-            </div>
-            <div class="viewer-actions">
-              <button class="ghost media-button" id="openSourceButton" type="button" hidden>查看原始视频</button>
-              <div class="job-meta" id="jobMeta">等待输入</div>
-            </div>
-          </div>
+          <div class="viewer-split">
+            <section class="workspace-pane source-pane">
+              <div class="pane-head">
+                <div>
+                  <p class="eyebrow">Source Media</p>
+                  <h2 id="sourcePaneTitle">查看原始视频</h2>
+                </div>
+                <div class="viewer-actions">
+                  <button class="ghost media-button" id="openSourceButton" type="button" hidden>放大查看</button>
+                  <div class="job-meta" id="jobMeta">等待输入</div>
+                </div>
+              </div>
 
-          <div class="preview-stage" id="previewStage">
-            <div class="preview-empty" id="previewEmpty">选择文件或加载样例后开始</div>
-            <video id="videoPreview" controls muted hidden></video>
-            <img id="imagePreview" alt="输入图像预览" hidden />
-          </div>
+              <div class="preview-stage" id="previewStage">
+                <div class="preview-empty" id="previewEmpty">选择文件或加载样例后开始</div>
+                <video id="videoPreview" controls muted hidden></video>
+                <img id="imagePreview" alt="输入图像预览" hidden />
+              </div>
+            </section>
 
-          <div class="progress-wrap" id="progressWrap" hidden>
-            <div class="progress-line"><span id="progressBar"></span></div>
-            <p id="progressText">准备任务</p>
-          </div>
+            <section class="workspace-pane result-pane">
+              <div class="pane-head">
+                <div>
+                  <p class="eyebrow">Live Workspace</p>
+                  <h2>预览与结果</h2>
+                </div>
+                <span id="resultCount">0 个结果</span>
+              </div>
 
-          <div class="summary-strip" id="summaryStrip" hidden>
-            <div><span>任务</span><strong id="summaryJob">-</strong></div>
-            <div><span>帧数</span><strong id="summaryFrames">-</strong></div>
-            <div><span>平均覆盖率</span><strong id="summaryCoverage">-</strong></div>
-            <div><span>平均骨架</span><strong id="summarySkeleton">-</strong></div>
-          </div>
+              <div class="progress-wrap" id="progressWrap" hidden>
+                <div class="progress-line"><span id="progressBar"></span></div>
+                <p id="progressText">准备任务</p>
+              </div>
 
-          <div class="results-toolbar">
-            <div>
-              <p class="eyebrow">Result Frames</p>
-              <h3>分割帧</h3>
-            </div>
-            <span id="resultCount">0 个结果</span>
+              <div class="summary-strip" id="summaryStrip" hidden>
+                <div><span>任务</span><strong id="summaryJob">-</strong></div>
+                <div><span>帧数</span><strong id="summaryFrames">-</strong></div>
+                <div><span>平均覆盖率</span><strong id="summaryCoverage">-</strong></div>
+                <div><span>平均骨架</span><strong id="summarySkeleton">-</strong></div>
+              </div>
+
+              <div class="empty" id="emptyState">运行分割后，这里会显示原帧、叠加图、掩膜和指标。</div>
+              <div class="result-grid" id="resultGrid"></div>
+            </section>
           </div>
-          <div class="empty" id="emptyState">运行分割后，这里会显示原帧、叠加图、掩膜和指标。</div>
-          <div class="result-grid" id="resultGrid"></div>
         </section>
       </section>
     </main>

frontend/styles.css

@@ -62,10 +62,10 @@ button {
 .top-actions,
 .section-title,
 .field-head,
-.viewer-head,
 .results-toolbar,
 .card-top,
-.dialog-head {
+.dialog-head,
+.pane-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -363,7 +363,23 @@ input[type="range"] {
   padding: 16px;
 }
 
-.viewer-head {
+.viewer-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.workspace-pane {
+  min-height: 690px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(16, 20, 17, 0.58);
+}
+
+.pane-head {
+  min-height: 48px;
   margin-bottom: 14px;
 }
 
@@ -392,7 +408,7 @@ input[type="range"] {
 .preview-stage {
   display: grid;
   place-items: center;
-  min-height: 320px;
+  min-height: 590px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background:
@@ -414,7 +430,7 @@ input[type="range"] {
 #imagePreview {
   display: block;
   width: 100%;
-  max-height: 520px;
+  max-height: 590px;
   object-fit: contain;
   background: #050605;
 }
@@ -459,7 +475,7 @@ input[type="range"] {
 
 .summary-strip {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 1px;
   margin-top: 14px;
   overflow: hidden;
@@ -486,12 +502,8 @@ input[type="range"] {
   font-size: 18px;
 }
 
-.results-toolbar {
-  margin: 18px 0 12px;
-}
-
 .empty {
-  min-height: 180px;
+  min-height: 590px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
@@ -501,8 +513,10 @@ input[type="range"] {
 
 .result-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 12px;
+  max-height: 590px;
+  overflow: auto;
 }
 
 .result-card {
@@ -668,4 +682,17 @@ dd {
   .detail-images {
     grid-template-columns: 1fr;
   }
+
+  .viewer-split {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-pane {
+    min-height: auto;
+  }
+
+  .preview-stage,
+  .empty {
+    min-height: 320px;
+  }
 }