重整 PPT 視覺 QA 產線首屏

web/static/css/page-ppt-audit-history.css

@@ -11,10 +11,21 @@
   padding: var(--momo-space-5, 24px);
   background:
     radial-gradient(circle, rgba(45, 40, 32, 0.12) 1px, transparent 1.2px),
-    linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(255, 255, 255, 0.78));
+    linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(250, 247, 240, 0.78));
   background-size: 12px 12px, auto;
 }
 
+.ppt-hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
+  gap: var(--momo-space-5, 24px);
+  align-items: stretch;
+}
+
+.ppt-hero-copy {
+  min-width: 0;
+}
+
 .ppt-kicker {
   color: var(--obs-accent);
   font-size: var(--momo-text-caption, 12px);
@@ -36,6 +47,83 @@
   line-height: 1.7;
 }
 
+.ppt-hero-note {
+  margin: var(--momo-space-2, 8px) 0 0;
+  color: var(--obs-amber);
+  font-size: var(--momo-text-body, 14px);
+  font-weight: var(--momo-font-weight-bold, 700);
+}
+
+.ppt-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--momo-space-2, 8px);
+  flex-wrap: wrap;
+  margin-top: var(--momo-space-4, 16px);
+}
+
+.ppt-hero-actions .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--momo-space-1, 4px);
+}
+
+.ppt-hero-deck {
+  display: grid;
+  align-content: space-between;
+  gap: var(--momo-space-3, 12px);
+  min-height: 180px;
+  padding: var(--momo-space-4, 16px);
+  border: 1px solid var(--obs-line);
+  border-left: 5px solid var(--obs-blue);
+  border-radius: var(--momo-radius-lg, 8px);
+  background:
+    radial-gradient(circle, rgba(45, 40, 32, 0.08) 1px, transparent 1.2px),
+    rgba(250, 247, 240, 0.68);
+  background-size: 10px 10px, auto;
+}
+
+.ppt-hero-deck.is-ready {
+  border-left-color: var(--obs-green);
+}
+
+.ppt-hero-deck.is-partial,
+.ppt-hero-deck.is-planned {
+  border-left-color: var(--obs-amber);
+}
+
+.ppt-hero-deck.is-error {
+  border-left-color: var(--obs-red);
+}
+
+.ppt-hero-deck strong {
+  display: block;
+  color: var(--obs-ink);
+  font-family: var(--momo-font-mono, "IBM Plex Mono", monospace);
+  font-size: var(--momo-text-title, 18px);
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.ppt-hero-deck small,
+.ppt-hero-deck-run {
+  color: var(--obs-muted);
+  font-size: var(--momo-text-caption, 12px);
+  line-height: 1.5;
+}
+
+.ppt-hero-deck-run {
+  display: grid;
+  gap: var(--momo-space-1, 4px);
+  padding-top: var(--momo-space-3, 12px);
+  border-top: 1px solid var(--obs-line);
+}
+
+.ppt-hero-deck-run span {
+  color: var(--obs-ink);
+  font-weight: var(--momo-font-weight-bold, 700);
+}
+
 .ppt-diagnostic-strip {
   display: grid;
   grid-template-columns: minmax(220px, 0.65fr) minmax(320px, 1fr) minmax(260px, 0.8fr);
@@ -289,13 +377,31 @@
   margin-top: var(--momo-space-4, 16px);
 }
 
+.ppt-command--compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .ppt-signal {
   padding: var(--momo-space-3, 12px);
   border: 1px solid var(--obs-line);
+  border-left: 4px solid var(--obs-blue);
   border-radius: var(--momo-radius-lg, 8px);
   background: rgba(255, 255, 255, 0.62);
 }
 
+.ppt-signal.is-ready {
+  border-left-color: var(--obs-green);
+}
+
+.ppt-signal.is-partial,
+.ppt-signal.is-planned {
+  border-left-color: var(--obs-amber);
+}
+
+.ppt-signal.is-error {
+  border-left-color: var(--obs-red);
+}
+
 .ppt-label {
   color: var(--obs-muted);
   font-size: var(--momo-text-caption, 12px);
@@ -313,16 +419,21 @@
 
 .ppt-toolbar {
   margin-top: var(--momo-space-4, 16px);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
   gap: var(--momo-space-3, 12px);
-  flex-wrap: wrap;
 }
 
 .ppt-type-tabs {
   display: flex;
-  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: var(--momo-space-1, 4px);
+  scrollbar-width: thin;
+  flex-wrap: nowrap;
   gap: var(--momo-space-2, 8px);
 }
 
@@ -330,6 +441,8 @@
   display: inline-flex;
   align-items: center;
   gap: var(--momo-space-1, 4px);
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
 .ppt-deck-workbench {
@@ -344,6 +457,10 @@
   box-shadow: var(--momo-shadow-md, 0 16px 38px rgba(70, 46, 28, 0.08));
 }
 
+.ppt-deck-empty {
+  padding: var(--momo-space-4, 16px);
+}
+
 .ppt-workbench-head {
   display: flex;
   align-items: flex-start;
@@ -660,6 +777,14 @@ body.ppt-preview-open {
   box-shadow: var(--momo-shadow-md, 0 16px 38px rgba(70, 46, 28, 0.08));
 }
 
+#ppt-deck-workbench,
+#ppt-action-queue,
+#ppt-issue-board,
+#ppt-production-center,
+#ppt-runtime-diagnostic {
+  scroll-margin-top: 88px;
+}
+
 .ppt-issue-board {
   margin-top: var(--momo-space-4, 16px);
   padding: var(--momo-space-4, 16px);
@@ -1222,6 +1347,10 @@ body.ppt-preview-open {
 }
 
 @media (max-width: 1180px) {
+  .ppt-hero-grid {
+    grid-template-columns: 1fr;
+  }
+
   .ppt-command {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1273,6 +1402,10 @@ body.ppt-preview-open {
 }
 
 @media (max-width: 760px) {
+  .ppt-hero {
+    padding: var(--momo-space-4, 16px);
+  }
+
   .ppt-command,
   .ppt-auto-grid,
   .ppt-mini-grid,
@@ -1285,6 +1418,15 @@ body.ppt-preview-open {
     grid-template-columns: 1fr;
   }
 
+  .ppt-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .ppt-type-tabs {
+    margin-inline: calc(var(--momo-space-2, 8px) * -1);
+    padding-inline: var(--momo-space-2, 8px);
+  }
+
   .ppt-panel-head,
   .ppt-panel-actions,
   .ppt-table-title,