auto-save 2026-05-14 02:30 (+2, ~4)

docs/source-analysis.html

@@ -557,7 +557,7 @@
           <div class="step"><div class="num">4</div><h3>Vision 识别</h3><p>识别场景和候选元素，只是候选，不应锁死。</p></div>
           <div class="step"><div class="num">5</div><h3>元素提取</h3><p>编辑/新增/删除元素，对元素反复生成提取图。</p></div>
           <div class="step"><div class="num">6</div><h3>元素改造</h3><p>把参考主体、场景、动作和 SKG 产品放入分镜结构。</p></div>
-          <div class="step"><div class="num">7</div><h3>生成视频</h3><p>用分镜 4 图槽、改造目标和时长调用 Seedance / Kling / Veo 3 生视频 API，结果回写到 Video Gen 节点。</p></div>
+          <div class="step"><div class="num">7</div><h3>生成视频</h3><p>用分镜 4 图槽、改造目标和时长调用 Seedance / Kling / Veo 3 生视频 API，结果回写到画面工作台节点。</p></div>
           <div class="step"><div class="num">8</div><h3>合成成品</h3><p>片段、字幕、配音、转场合成最终 mp4。当前未实现。</p></div>
         </div>
       </section>
@@ -570,7 +570,7 @@
             <table>
               <tbody>
                 <tr><td><code>web/app/page.tsx</code></td><td>产品工作台主状态：jobs、activeJobId、selectedFrames、clipboard、ReactFlow 节点和边。</td></tr>
-                <tr><td><code>web/components/nodes/index.tsx</code></td><td>DAG 节点定义：Input、Keyframe、ASR、Translate、Rewrite、Storyboard、VideoGen、Compose。</td></tr>
+                <tr><td><code>web/components/nodes/index.tsx</code></td><td>DAG 节点定义：Input、VisualLab、Audio、Compose、KeyframePanel；旧 Keyframe/Storyboard/VideoGen 组件保留但不再挂主画布。</td></tr>
                 <tr><td><code>web/components/lightbox.tsx</code></td><td>镜头拆解和元素提取的主工作面板：清洗、识别、元素编辑、区域提取、抠图。</td></tr>
                 <tr><td><code>web/components/storyboard-bar.tsx</code></td><td>顶部分镜编排条：展示选入编排的关键帧，并作为唯一分镜导航。</td></tr>
                 <tr><td><code>web/components/storyboard-workbench.tsx</code></td><td>顶部分镜编排条下方的明细区：4 图槽、改造目标、时长、自动保存。</td></tr>
@@ -595,9 +595,9 @@
         <pre>前端主链路：
 web/app/page.tsx
   -> ReactFlow 节点：web/components/nodes/index.tsx
-  -> 画布内镜头拆解面板：KeyframeNode 内嵌 web/components/lightbox.tsx
-  -> 顶部分镜条：web/components/storyboard-bar.tsx
-  -> 分镜工作台：web/components/storyboard-workbench.tsx
+  -> 主画布：Input → VisualLab / Audio → Compose
+  -> 画布内镜头拆解面板：VisualLabNode 打开 keyframePanel，内嵌 web/components/lightbox.tsx
+  -> 分镜工作台：web/components/storyboard-workbench.tsx（底层保留）
   -> API 契约：web/lib/api.ts
 
 后端主链路：
@@ -616,25 +616,15 @@ api/main.py
             <div><strong>适合怎么描述</strong><span>“输入/下载/视频就绪这个节点应该如何提示用户下一步”。</span></div>
           </div>
           <div class="flow-row">
-            <div><strong>你看到的区域</strong><span>镜头拆解节点上方关键帧</span></div>
-            <div><strong>主要源码</strong><span><code>KeyframeNode</code> 内嵌 <code>FrameLightbox</code>；后端 <code>/frames</code>、<code>/describe</code>、<code>/cleanup</code>。</span></div>
-            <div><strong>适合怎么描述</strong><span>“关键帧详情面板在无限画布上怎么展示、缩放、跟随；缩略图 hover 原尺寸预览要贴缩略图上边缘，不是贴节点卡片上边缘”。</span></div>
+            <div><strong>你看到的区域</strong><span>画面工作台 · Visual Lab</span></div>
+            <div><strong>主要源码</strong><span><code>VisualLabNode</code> in <code>web/components/nodes/index.tsx</code>；它汇总关键帧、元素 cutout 和视频任务缩略图。</span></div>
+            <div><strong>适合怎么描述</strong><span>“画布上只保留一个视觉展示卡片；缩略图 hover 原尺寸预览贴缩略图上边缘，点击再进入镜头处理 / 分镜编排 / 视频任务操作”。</span></div>
           </div>
           <div class="flow-row">
             <div><strong>你看到的区域</strong><span>元素列表和提取图</span></div>
             <div><strong>主要源码</strong><span><code>FrameLightbox</code>；类型 <code>KeyElement</code>；接口 <code>addElement/updateElement/deleteElement/cutoutElement/deleteCutout</code>。</span></div>
             <div><strong>适合怎么描述</strong><span>“Vision 识别出来的是候选，用户要能修正、重复提取、删除错误元素”。</span></div>
           </div>
-          <div class="flow-row">
-            <div><strong>你看到的区域</strong><span>元素改造 · Storyboard 节点</span></div>
-            <div><strong>主要源码</strong><span><code>StoryboardNode</code>；上方元素缩略图来自所有已提取 cutouts。</span></div>
-            <div><strong>适合怎么描述</strong><span>“这里是素材入口，不是最终视频编辑器；缩略图 hover 预览仍在无限画布里，并贴当前缩略图的上边缘”。</span></div>
-          </div>
-          <div class="flow-row">
-            <div><strong>你看到的区域</strong><span>顶部分镜条</span></div>
-            <div><strong>主要源码</strong><span><code>StoryboardBar</code>；只展示 selectedFrames，不负责提取元素。</span></div>
-            <div><strong>适合怎么描述</strong><span>“选好的分镜如何按时间序组织，以及如何进入具体分镜编排”。</span></div>
-          </div>
           <div class="flow-row">
             <div><strong>你看到的区域</strong><span>顶部分镜头编排下拉面板</span></div>
             <div><strong>主要源码</strong><span><code>StoryboardWorkbench</code>；保存到 <code>frame.storyboard</code>；接口 <code>PUT /storyboard</code>。</span></div>
@@ -736,16 +726,10 @@ api/main.py
               <td><code>page.tsx</code>、<code>InputNode</code>、<code>api/main.py</code></td>
             </tr>
             <tr>
-              <td><span class="tag orange">镜头拆解 / 元素提取</span></td>
-              <td>关键帧选择、清洗、Vision 候选、元素编辑、区域提取、元素 cutout。</td>
-              <td>不要把 Vision 结果当最终结论；不要点击元素就跳走。</td>
-              <td><code>KeyframeNode</code>、<code>FrameLightbox</code>、元素接口</td>
-            </tr>
-            <tr>
-              <td><span class="tag violet">元素改造 Storyboard</span></td>
-              <td>展示可用元素素材，承接“参考元素 → SKG 画面”的入口。</td>
-              <td>不要等同于最终视频生成；不要暗示复刻原视频。</td>
-              <td><code>StoryboardNode</code>、<code>StoryboardBar</code></td>
+              <td><span class="tag violet">画面工作台 Visual Lab</span></td>
+              <td>在一个画布卡片里展示关键帧、元素 cutout 和视频任务；点击缩略图进入对应处理面板。</td>
+              <td>不要在主卡片里堆复杂表单；主卡片只做状态总览和入口。</td>
+              <td><code>VisualLabNode</code>、<code>FrameLightbox</code>、<code>StoryboardWorkbench</code>、视频任务接口</td>
             </tr>
             <tr>
               <td><span class="tag violet">分镜工作台</span></td>
@@ -760,10 +744,10 @@ api/main.py
               <td><code>ASRNode</code>、<code>TranslateNode</code>、<code>RewriteNode</code>、ASR 接口</td>
             </tr>
             <tr>
-              <td><span class="tag green">Video Gen / Compose</span></td>
-              <td>承载生视频任务状态和完成后的 MP4。</td>
-              <td>分镜工作台提交任务，Video Gen 节点只展示任务和结果。</td>
-              <td><code>VideoGenNode</code>、<code>/storyboard/video</code>、<code>generated_videos</code></td>
+              <td><span class="tag green">Video / Compose</span></td>
+              <td>视频任务状态展示在 Visual Lab；Compose 承载最终合成。</td>
+              <td>不要把 Compose 提前变成视频生成控制台。</td>
+              <td><code>VisualLabNode</code>、<code>/storyboard/video</code>、<code>generated_videos</code>、<code>ComposeNode</code></td>
             </tr>
           </tbody>
         </table>
@@ -831,6 +815,18 @@ api/main.py
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-14 · 三个视觉节点合并为画面工作台</h3>
+              <span class="tag violet">VisualLab</span>
+              <span class="tag blue">Canvas</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>镜头拆解、元素改造、生成视频三个卡片在主画布上占同等权重，但它们只是视觉素材状态展示和入口；真正处理都在点击后的工作台/面板中完成。</p>
+              <p><strong>改动：</strong>新增 <code>VisualLabNode</code>，把关键帧、元素 cutout、视频任务缩略图合并到一个“画面工作台 · Visual Lab”卡片里；DAG 从 <code>Input → Keyframe → Storyboard → VideoGen → Compose</code> 简化为 <code>Input → VisualLab → Compose</code>，音频线仍独立。</p>
+              <p><strong>影响：</strong><code>web/app/page.tsx</code>、<code>web/components/nodes/index.tsx</code>、<code>docs/source-analysis.html</code>。底层数据、接口和旧节点组件暂不删除。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-14 · 修复节点右下角缩放点击偏移</h3>