feat: 同步镜头首帧与视频生产工作区

src/styles.css

@@ -429,7 +429,10 @@
         color: #557b50;
     }
     .status-badge[data-status='generating'],
-    .status-badge[data-status='running'] {
+    .status-badge[data-status='running'],
+    .status-badge[data-status='queued'],
+    .status-badge[data-status='pending'],
+    .status-badge[data-status='in_progress'] {
         color: #aa8137;
     }
     .status-badge[data-status='failed'] {
@@ -438,6 +441,176 @@
     .status-badge[data-status='need_review'] {
         color: #977536;
     }
+    .status-badge[data-status='ready'],
+    .status-badge[data-status='skipped'] {
+        color: #557b50;
+    }
+    .status-badge[data-status='blocked'],
+    .status-badge[data-status='cancelled'] {
+        color: #8b6f64;
+    }
+
+    .production-controls {
+        display: grid;
+        grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.5fr) minmax(230px, 1fr) auto;
+        align-items: end;
+        gap: 18px;
+    }
+    .production-pipeline {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 14px;
+    }
+    .production-pipeline-card {
+        padding: 20px;
+    }
+    .production-step {
+        display: grid;
+        place-items: center;
+        width: 36px;
+        height: 36px;
+        flex-shrink: 0;
+        border: 1px solid #dfe2d8;
+        border-radius: 5px;
+        background: #f6f7f2;
+        color: #69755d;
+    }
+    .production-stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+    }
+    .production-stats div,
+    .production-status-grid div {
+        padding: 10px;
+        border-radius: 4px;
+        background: #f7f8f4;
+    }
+    .production-stats dt,
+    .production-status-grid dt {
+        color: var(--color-muted);
+        font-size: 10px;
+    }
+    .production-stats dd,
+    .production-status-grid dd {
+        margin-top: 5px;
+        font-size: 13px;
+        font-family: ui-monospace, monospace;
+    }
+    .production-status-grid {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        gap: 10px;
+    }
+    .production-workspace {
+        display: grid;
+        grid-template-columns: 220px minmax(0, 1fr);
+        align-items: start;
+        overflow: hidden;
+    }
+    .production-shot-list {
+        max-height: 760px;
+        overflow-y: auto;
+        border-right: 1px solid var(--color-line);
+        background: #fafbf7;
+        padding-block: 8px;
+    }
+    .production-shot-link {
+        display: block;
+        width: 100%;
+        padding: 13px 15px;
+        border-left: 2px solid transparent;
+        text-align: left;
+    }
+    .production-shot-link:hover {
+        background: #f2f4ed;
+    }
+    .production-shot-link.selected {
+        border-left-color: #687b58;
+        background: #eef1e7;
+    }
+    .production-stage {
+        padding: 20px 0;
+        border-top: 1px solid var(--color-line);
+    }
+    .production-stage:first-of-type {
+        border-top: none;
+    }
+    .production-stage-heading {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+    }
+    .keyframe-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 12px;
+    }
+    .keyframe-card {
+        overflow: hidden;
+        border: 1px solid var(--color-line);
+        border-radius: 5px;
+        background: #fafbf7;
+    }
+    .keyframe-card .asset-image {
+        aspect-ratio: 16 / 9;
+        border-radius: 0;
+    }
+    .video-record {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--color-line);
+        border-radius: 5px;
+        background: #fafbf7;
+    }
+    .production-video {
+        width: min(44%, 390px);
+        min-height: 170px;
+        background: #1e211e;
+        object-fit: contain;
+    }
+
+    @media (max-width: 1100px) {
+        .production-pipeline {
+            grid-template-columns: 1fr;
+        }
+        .production-controls {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+    @media (max-width: 760px) {
+        .production-controls,
+        .production-workspace {
+            grid-template-columns: minmax(0, 1fr);
+        }
+        .production-shot-list {
+            display: flex;
+            max-height: none;
+            overflow-x: auto;
+            border-right: none;
+            border-bottom: 1px solid var(--color-line);
+        }
+        .production-shot-link {
+            width: 155px;
+            min-width: 155px;
+            border-left: none;
+            border-bottom: 2px solid transparent;
+        }
+        .production-shot-link.selected {
+            border-bottom-color: #687b58;
+        }
+        .production-status-grid,
+        .keyframe-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        .video-record {
+            display: block;
+        }
+        .production-video {
+            width: 100%;
+        }
+    }
     .empty-state {
         display: flex;
         flex-direction: column;