feat: 接入分镜导演设计与即时视觉状态工作台

增加单集和批量生成、修复诊断、正式镜头检查、参考图、生成规格与视频提示词。
补齐接口契约、竞态保护和确认交互测试，保持现有两条工作流。

src/styles.css

@@ -492,11 +492,13 @@
     }
     .workflow-nav {
         display: flex;
+        overflow-x: auto;
         gap: 28px;
         border-bottom: 1px solid #dfe2d8;
     }
     .workflow-nav a {
         display: flex;
+        flex-shrink: 0;
         align-items: center;
         gap: 9px;
         padding: 0 2px 16px;
@@ -612,6 +614,86 @@
         background: #8a9b6f;
         box-shadow: 0 0 0 3px #e9edde;
     }
+    .storyboard-controls {
+        display: grid;
+        grid-template-columns: minmax(180px, 1fr) 100px 145px auto;
+        gap: 18px;
+        align-items: end;
+    }
+    .generation-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20px;
+        padding-top: 20px;
+        margin-top: 20px;
+        border-top: 1px solid var(--color-line);
+    }
+    .generation-row > div:last-child {
+        flex-shrink: 0;
+    }
+    .storyboard-workspace {
+        display: grid;
+        grid-template-columns: 220px minmax(0, 1fr);
+        overflow: hidden;
+    }
+    .shot-list {
+        max-height: 1000px;
+        overflow-y: auto;
+        border-right: 1px solid var(--color-line);
+        background: #fdfefa;
+        padding: 0 8px 20px;
+    }
+    .shot-link {
+        display: flex;
+        width: 100%;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 12px 10px;
+        border-radius: 4px;
+        text-align: left;
+    }
+    .shot-link:hover {
+        background: #f2f4ec;
+    }
+    .shot-link.selected {
+        background: #eeeee0;
+        color: #454f37;
+    }
+    .reference-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 14px;
+    }
+    .reference-card {
+        border: 1px solid var(--color-line);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+    .reference-card img {
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+        background: #f4f5ef;
+    }
+    .reference-placeholder {
+        display: grid;
+        place-items: center;
+        aspect-ratio: 4 / 3;
+        font-size: 11px;
+        color: var(--color-muted);
+        background: #f4f5ef;
+    }
+    .storyboard-json {
+        overflow: auto;
+        max-height: 440px;
+        padding: 16px;
+        border-radius: 4px;
+        background: #f6f7f1;
+        font:
+            11px/1.9 ui-monospace,
+            monospace;
+    }
     .script-workspace {
         display: grid;
         grid-template-columns: 166px minmax(0, 1fr);
@@ -833,6 +915,14 @@
 
 /* 中等宽度保留正文空间，执行记录下移，移动端导航收为图标。 */
 @media (max-width: 1200px) {
+    .generation-row {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+    }
+    .storyboard-controls {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
     .page-container {
         padding-inline: 26px;
     }
@@ -861,6 +951,18 @@
     }
 }
 @media (max-width: 760px) {
+    .storyboard-controls {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 12px;
+    }
+    .storyboard-workspace {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .shot-list {
+        max-height: 240px;
+        border-right: 0;
+        border-bottom: 1px solid var(--color-line);
+    }
     .app-shell {
         grid-template-columns: 62px minmax(0, 1fr);
     }