From 0203a09e5768da703caeb34b4b848d1e420098e3 Mon Sep 17 00:00:00 2001 From: kang Date: Sun, 17 May 2026 11:27:46 +0800 Subject: [PATCH] refactor: switch ad workflow to horizontal kanban --- .memory/worklog.json | 14 +++--- .project.json | 2 +- RULES.md | 2 +- docs/source-analysis.html | 70 ++++++++++++++------------ web/app/page.tsx | 2 +- web/components/ad-recreation-board.tsx | 2 +- 6 files changed, 48 insertions(+), 44 deletions(-) diff --git a/.memory/worklog.json b/.memory/worklog.json index 0504d17..8b396af 100644 --- a/.memory/worklog.json +++ b/.memory/worklog.json @@ -1,12 +1,5 @@ { "entries": [ - { - "files_changed": 1, - "hash": "10ef888", - "message": "auto-save 2026-05-14 16:58 (~1)", - "ts": "2026-05-14T16:59:01+08:00", - "type": "commit" - }, { "files_changed": 1, "hash": "237531f", @@ -3269,6 +3262,13 @@ "type": "session-heartbeat", "message": "Codex 会话活跃 · 最近命令：codex · 分支 main · 1 项未提交变更 · 最近提交：refactor: replace flow nodes with ad recreation board", "files_changed": 1 + }, + { + "ts": "2026-05-17T11:23:22+08:00", + "type": "commit", + "message": "auto-save 2026-05-17 11:23 (~3)", + "hash": "201abc6", + "files_changed": 3 } ] } diff --git a/.project.json b/.project.json index 44d4880..f5a3204 100644 --- a/.project.json +++ b/.project.json @@ -27,7 +27,7 @@ "type": "web_login" } ], - "description": "SKG 信息流广告快速复刻工作台：TK/本地视频 → 视频抽帧 → 音频解析生成文案 → 剧情规划与 SKG 产品融入 → Seedance/Kling/Veo3 生成候选片段 → 选择组合成片；主界面为左侧单任务工作表，右侧无限画布暂时清空保留。", + "description": "SKG 信息流广告快速复刻横向生产看板：素材输入列（一个素材就是一次文件任务）→ 音频解析并根据产品内容生成新分镜文案 → 视频关键元素抽帧并直接生成元素/候选片段 → 视频合成列汇总音频和视频片段。", "kind": "app", "name": "SKG Marketing Studio / SKG 营销内容工作台", "ownership": "company", diff --git a/RULES.md b/RULES.md index 4582348..8c35211 100644 --- a/RULES.md +++ b/RULES.md @@ -11,7 +11,7 @@ - 详见 `CLAUDE.md` 立项决策段 + `.memory/plan.md` 七步管线拆解 - 风格：`04-Dark-Gallery-Ambient`（路径：`~/Projects/research/20260305-网页风格库/04-Dark-Gallery-Ambient.md`） - 第一冲刺：步骤 1-4（下载 / 拆轨 / 关键帧 / ASR+翻译） -- 当前产品方向（2026-05-17 确认）：优先做信息流广告快速复刻产出，不再把主界面做成可视化流程节点；主界面为左侧单任务工作表（素材输入、抽帧、音频文案、剧情规划/产品融入、候选片段），右侧保留但暂时清空无限画布。 +- 当前产品方向（2026-05-17 确认）：优先做信息流广告快速复刻产出，不再把主界面做成可视化流程节点；主界面为四列横向生产看板：素材输入列（一个素材就是一次文件任务）→ 音频解析 / 新分镜文案列 → 视频关键元素 / 抽帧生成列 → 视频合成列。 ## 部署事实 - 平台：VPS `76.13.31.179`（Ubuntu 24.04 / Docker Compose / Coolify Traefik） diff --git a/docs/source-analysis.html b/docs/source-analysis.html index b771ff4..f654081 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -485,7 +485,7 @@

这个页面是产品协作地图，不是应用功能页。

它把“你看到的界面、你想改的功能、实际要动的源码、可能影响的数据和接口”放在同一个地方。 - 后续描述需求时，可以直接说“改左侧看板里的某个工作段 / 右侧画布要承载什么 / 某个接口行为”，这样改动范围会更准，也更容易追踪每次变更带来的影响。 + 后续描述需求时，可以直接说“改横向看板的某一列 / 某个素材任务 / 某个接口行为”，这样改动范围会更准，也更容易追踪每次变更带来的影响。

项目路径/Users/kangwan/Projects/business/20260512-20260512-skg-tk-二创验证
@@ -500,7 +500,7 @@

1. 先说你在改哪个产品区

-

例如“左侧看板的视频抽帧区”、“剧情规划 / 产品融入行”、“候选片段选择区”、“右侧空白画布”。不要只说“这里乱”，要指向页面里的功能区。

+

例如“素材输入列”、“音频解析 / 新分镜文案列”、“视频关键元素 / 抽帧生成列”、“视频合成列”。不要只说“这里乱”，要指向页面里的功能区。

2. 再说这个区应该承担什么职责

@@ -569,14 +569,12 @@

业务管线

-

当前产品方向收敛为“信息流广告快速复刻工作台”：不再把主界面设计成可视化节点流程，而是把单个视频任务放进左侧工作表，按抽帧、音频文案、剧情规划、产品融入、候选片段选择推进。右侧保留无限画布能力，但当前版本先清空，等待后续定义要展示的内容。

+

当前产品方向收敛为“信息流广告快速复刻横向生产看板”：主界面从左到右排列四列，分别是素材输入、音频解析 / 新分镜文案、视频关键元素 / 抽帧生成、视频合成。它不再保留单独的右侧空白画布，素材、文案、关键帧、元素和候选片段都在同一张横向工作表内推进。

-
1

素材输入

TK / 信息流视频链接或本地上传，创建单个当前任务。

-
2

视频抽帧

按目标、精度和数量抽关键帧，形成可勾选的分镜池；手动加帧和深度素材处理能力仍在底层保留。

-
3

音频文案

从原视频提取音频并生成口播文案，作为后续剧情规划和产品植入的节奏依据。

-
4

剧情规划

对选中的关键帧逐行填写剧情、产品融入、镜头动作和时长。

-
5

生成片段

按每行分镜调用 Seedance / Kling / Veo 生成候选视频片段，并回写到当前任务。

-
6

选择组合

在候选片段区勾选适合组合成最终广告的片段；最终合成 mp4 当前仍未实现。

+
1

素材输入列

TK / 信息流视频链接或本地上传；每个素材就是一个文件任务，可在列内切换。

+
2

音频 / 分镜列

先解析音频，再结合产品内容生成或填写新的分镜文字；分镜从上到下按时间排列。

+
3

视频关键元素列

按目标、精度和数量抽关键帧，关键帧横向排列；每张帧卡可直接生成元素、选入分镜并提交候选片段。

+
4

视频合成列

把音频文案和已选候选视频片段作为合成输入；最终完整 mp4 合成接口当前仍是占位。

@@ -588,8 +586,8 @@ - - + + @@ -624,8 +622,8 @@ 
前端主链路：
 web/app/page.tsx
-  -> 左侧复刻看板：web/components/ad-recreation-board.tsx
-  -> 右侧 ReactFlow 无限画布：当前 nodes=[] / edges=[]，先保留空白画布能力
+  -> 横向复刻看板：web/components/ad-recreation-board.tsx
+  -> 四列：素材输入 → 音频解析 / 新分镜文案 → 视频关键元素 / 抽帧生成 → 视频合成
   -> 底部音频条：web/components/audio-strip.tsx（原音频播放 / 指针 / 英文 / 中文 / 波形 / 英文改写稿）
   -> 旧节点/深度素材面板：web/components/nodes/index.tsx、web/components/lightbox.tsx、web/components/storyboard-workbench.tsx（底层保留，当前不作为主入口）
   -> API 契约：web/lib/api.ts
@@ -641,14 +639,14 @@ api/main.py
         
界面区域到源码

         

           

-            
你看到的区域左侧信息流广告复刻看板

+            
你看到的区域四列横向信息流广告生产看板

             
主要源码AdRecreationBoard in web/components/ad-recreation-board.tsx；状态、轮询和接口回写仍在 web/app/page.tsx。

-            
适合怎么描述“左侧看板里的素材输入、抽帧、音频文案、分镜规划、候选片段选择要如何调整”。

+            
适合怎么描述“横向看板里素材输入列、音频/分镜列、关键元素列、合成列要如何调整”。

           

           

-            
你看到的区域右侧无限画布

-            
主要源码ReactFlow in web/app/page.tsx；当前传入空 nodes=[] / edges=[]，只保留缩放和平移画布能力。

-            
适合怎么描述“右侧空白画布后续应该展示哪些工作对象、是否需要拖拽、预览或对比”。

+            
你看到的区域视频关键元素横向帧列

+            
主要源码ElementFrameCard in web/components/ad-recreation-board.tsx；复用 addElement、cutoutElement、generateStoryboardVideo 等接口。

+            
适合怎么描述“关键帧卡片里的元素、生成图、生成片段按钮和横向排列应该怎么组织”。

           

           

             
你看到的区域旧深度素材面板（当前不作为主路径）

@@ -847,17 +845,11 @@ SubjectAsset {
- - - + + + - - - - - - @@ -866,13 +858,13 @@ SubjectAsset { - + - + @@ -917,12 +909,12 @@ SubjectAsset {

需求描述模板

-

改左侧看板

-

“我在左侧复刻看板的抽帧 / 音频文案 / 分镜规划 / 候选片段区，这里应该怎么展示、编辑、保存和触发下一步。”

+

改横向看板

+

“我在横向复刻看板的素材输入 / 音频分镜 / 关键元素 / 视频合成列，这里应该怎么展示、编辑、保存和触发下一步。”

-

改右侧画布

-

“右侧无限画布现在是空的，我希望它展示素材对比 / 片段组合 / 时间线 / 预览墙中的哪一种，以及这些对象是否需要拖拽和缩放。”

+

改关键元素列

+

“关键帧要横着列几张，每张帧卡里要展示哪些元素、生成图和候选片段入口，哪些按钮应直接生成。”

改分镜字段

@@ -943,6 +935,18 @@ SubjectAsset {

变更记录

这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。

+
+
+

2026-05-17 · 看板改为四列横向生产流

+ UI + Workflow +
+
+

问题：左侧抽屉式看板仍像单点操作面板，不符合用户要的“从左往右推进”的广告生产逻辑。

+

改动：AdRecreationBoard 改为全屏横向四列：素材输入列按文件任务管理素材；音频解析 / 新分镜文案列把分镜从上到下排列；视频关键元素 / 抽帧生成列把关键帧横向排列，并在每张帧卡上直接生成元素和候选片段；视频合成列汇总音频、候选片段和待接入合成接口。page.tsx 不再渲染右侧空白 ReactFlow 画布。

+

影响：web/components/ad-recreation-board.tsx、web/app/page.tsx、RULES.md、.project.json、docs/source-analysis.html。后续需求应按“四列横向生产流”描述。

+
+

2026-05-17 · 主界面改为左侧信息流广告复刻看板

diff --git a/web/app/page.tsx b/web/app/page.tsx index bdef743..8d417a9 100644 --- a/web/app/page.tsx +++ b/web/app/page.tsx @@ -1007,7 +1007,7 @@ export default function Home() {
-
+
{clientReady && setAudioStripJobId(null)} />} diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx index 5a79925..a450895 100644 --- a/web/components/ad-recreation-board.tsx +++ b/web/components/ad-recreation-board.tsx @@ -212,7 +212,7 @@ export function AdRecreationBoard({
-
+
} step="01"
web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。
web/app/page.tsx产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/音频条/生成任务状态；主渲染改为左侧广告复刻看板 + 右侧空白 ReactFlow 无限画布。
web/components/ad-recreation-board.tsx左侧信息流广告复刻工作表：素材输入、视频抽帧、音频文案、关键帧选择、剧情规划/产品融入、候选片段选择。
web/app/page.tsx产品工作台主状态：jobs、activeJobId、按 job 隔离的 selectedFrames/音频条/生成任务状态；主渲染为全屏横向生产看板。
web/components/ad-recreation-board.tsx信息流广告横向生产看板：素材输入列、音频解析 / 新分镜文案列、视频关键元素 / 抽帧生成列、视频合成列。
web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。
web/app/login/layout.tsx登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 /login 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。
web/components/login/oasis-canvas.tsx登录页全屏动态视觉层：用 iframe 直接承载下载包 web/public/oasis-source/index.html 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 postMessage 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。
左侧复刻看板承载当前单任务主路径：导入视频、抽帧、解析音频、选择关键帧、填写剧情/产品融入、提交单段视频生成、勾选候选片段。它是当前唯一主工作入口。不要再拆成多个画布节点；不要把右侧空白画布的职责提前塞回看板。横向复刻看板承载当前主路径：素材输入列按文件任务管理素材；音频 / 分镜列解析音频并从上到下编辑新分镜文字；关键元素列横向展示关键帧并直接生成元素和候选片段；合成列汇总音频和候选片段输入。不要再拆回多个画布节点；不要恢复右侧空白画布占位。 web/components/ad-recreation-board.tsx、web/app/page.tsx
右侧无限画布当前只保留 ReactFlow 的无限画布能力，主渲染传空节点和空边。后续如果需要展示素材对比、片段组合或时间线，再明确画布对象后实现。当前不要恢复 Input / Visual Lab / Audio / Compose 这类流程节点。web/app/page.tsx
旧节点 / 深度素材面板 InputNode、VisualLabNode、AudioNode、ComposeNode、FrameLightbox 等底层能力暂保留，避免本次大改同时破坏抽帧、音频、素材处理和历史 job 数据。
音频条左侧看板触发音频解析，底部 AudioStrip 仍负责原音频播放、字幕/口播文本、波形和配音预览。横向看板第二列触发音频解析，底部 AudioStrip 仍负责原音频播放、字幕/口播文本、波形和配音预览。 不要阻断视觉素材管线。 web/components/audio-strip.tsx、pipeline_transcribe、AudioScript
候选片段生成视频结果直接在左侧看板的候选片段区展示和勾选，后续再接组合成片。生成视频结果直接在视频合成列展示和勾选，后续再接组合成片。 不要把 Compose 提前变成最终剪辑台；最终合成仍是占位。 /storyboard/video、generated_videos、AdRecreationBoard