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

frontend/styles.css

@@ -264,7 +264,14 @@ h3 {
   color: var(--text);
 }
 
-.ghost:hover,
+.ghost:disabled {
+  cursor: not-allowed;
+  color: var(--faint);
+  border-color: var(--line-soft);
+  opacity: 0.62;
+}
+
+.ghost:not(:disabled):hover,
 .method-option:hover,
 .result-card:hover {
   border-color: rgba(255, 209, 102, 0.62);
@@ -284,6 +291,18 @@ h3 {
   filter: grayscale(0.45);
 }
 
+.compare-entry {
+  min-height: 46px;
+  border-color: rgba(56, 216, 184, 0.5);
+  color: var(--accent-2);
+  font-weight: 900;
+}
+
+.compare-entry:disabled {
+  border-color: var(--line);
+  color: var(--faint);
+}
+
 .method-grid {
   display: grid;
   gap: 8px;
@@ -419,6 +438,20 @@ input[type="range"] {
   overflow: hidden;
 }
 
+.result-video-stage {
+  display: grid;
+  place-items: center;
+  min-height: 590px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(90deg, rgba(56, 216, 184, 0.035) 1px, transparent 1px),
+    linear-gradient(rgba(56, 216, 184, 0.035) 1px, transparent 1px),
+    #080a09;
+  background-size: 28px 28px;
+  overflow: hidden;
+}
+
 .preview-empty,
 .empty {
   color: var(--muted);
@@ -427,7 +460,8 @@ input[type="range"] {
 }
 
 #videoPreview,
-#imagePreview {
+#imagePreview,
+#resultVideoPreview {
   display: block;
   width: 100%;
   max-height: 590px;
@@ -452,11 +486,11 @@ input[type="range"] {
 
 .progress-line span {
   display: block;
-  width: 12%;
+  width: 0%;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--accent-2), var(--accent));
-  animation: pulse-progress 1.4s ease-in-out infinite alternate;
+  transition: width 320ms ease;
 }
 
 .progress-wrap p {
@@ -464,15 +498,6 @@ input[type="range"] {
   color: var(--muted);
 }
 
-@keyframes pulse-progress {
-  from {
-    width: 18%;
-  }
-  to {
-    width: 92%;
-  }
-}
-
 .summary-strip {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -515,7 +540,7 @@ input[type="range"] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 12px;
-  max-height: 590px;
+  max-height: 520px;
   overflow: auto;
 }
 
@@ -532,6 +557,11 @@ input[type="range"] {
   transform: translateY(-1px);
 }
 
+.result-card.is-selected {
+  border-color: rgba(56, 216, 184, 0.88);
+  box-shadow: inset 0 0 0 1px rgba(56, 216, 184, 0.4);
+}
+
 .card-top {
   padding: 10px 12px;
   border-bottom: 1px solid var(--line);
@@ -635,6 +665,62 @@ dd {
   width: min(1180px, calc(100vw - 36px));
 }
 
+.frame-browser {
+  min-height: auto;
+  margin-top: 14px;
+}
+
+.frame-browser-body {
+  display: grid;
+  gap: 12px;
+}
+
+.frame-browser .summary-strip {
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 0;
+}
+
+.frame-browser .empty {
+  min-height: 170px;
+}
+
+.compare-dialog {
+  width: min(1320px, calc(100vw - 36px));
+}
+
+.compare-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 12px;
+  max-height: min(72vh, 760px);
+  overflow: auto;
+  padding: 16px;
+}
+
+.compare-card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #111512;
+  overflow: hidden;
+}
+
+.compare-card img {
+  aspect-ratio: 4 / 3;
+}
+
+.compare-loading {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  grid-column: 1 / -1;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(16, 20, 17, 0.72);
+  text-align: center;
+  padding: 24px;
+}
+
 .source-stage {
   display: grid;
   place-items: center;
@@ -683,6 +769,10 @@ dd {
     grid-template-columns: 1fr;
   }
 
+  .frame-browser .summary-strip {
+    grid-template-columns: 1fr;
+  }
+
   .viewer-split {
     grid-template-columns: 1fr;
   }
@@ -692,6 +782,7 @@ dd {
   }
 
   .preview-stage,
+  .result-video-stage,
   .empty {
     min-height: 320px;
   }