AI 营销视频 前端实施契约
状态:review-passed(CR-20260823-001 规格、原型与真实浏览器验收已同步)
前端实施契约版本:3.0
产品 PRD 版本:3.0
来源变更:CR-20260823-001
确认依据:Freddy 已授权 02/03/05/06/07 完成增量设计并由 00 总控同步共享交付包;本次原型尚待重新验收
设计主入口:references/ui-review/erp-ui-design-system.md
页面基线:references/ui-review/ant-design-pro-baseline.md
来源与范围
| 来源 | 本契约采用内容 | 边界 |
|---|---|---|
| Freddy 2026-08-12 五项原型反馈 | AI 给默认方案和质量下限;用户可接管素材/首尾参考/视频参数/模板与自定义/逐镜脚本提示词/成片二次生成 | 这是产品与交互授权,不等于确认真实模型锁帧、接口字段或权限码 |
| Freddy 2026-08-12 LinkFox 重构反馈 | 按 LinkFox 图转视频的工作台结构重做:左侧稳定输入和参数,右侧持续承载结果、再次编辑与逐镜编辑 | 一比一复用任务结构与视觉层级,不复制品牌资产、会员算力和供应商模型市场 |
| Freddy 2026-08-12 五项浏览器批注 | 只上传按电商用途分类的商品图片;扩展模板并修正卡片样式;模型改为手选;区分新手/专业;生产固定为分镜脚本确认、逐镜生成/重做、最终合并 | 本轮产品/交互授权不证明候选模型真实接入、成本或原生编辑能力 |
| Freddy 2026-08-12 事实性与合成批注 | 脚本阶段不得用无来源场景图冒充 AI 输出;说明逐镜片段的确定性合并、配音、字幕生成与准确性门禁 | 原型只能标注素材锚点、待生成画面和演示回执;FFmpeg/TTS/ASR/供应商接口仍待 POC |
| Freddy 2026-08-13 右侧信息简化反馈 | “优秀案例”与左侧模板重复,生产区信息过量;按第一性原理、奥卡姆剃刀和可用性启发式减少无行动信息 | 保留功能自由度和版本能力,不以删减业务控制换取表面简洁;本轮仍待最终原型验收 |
| Freddy 2026-08-13 分镜版本批注 | 在当前分镜的未生成视频区域支持首帧图、尾帧图上传 | 首尾帧随 ShotAttempt 版本化;本轮不确认真实模型双帧能力、精确锁帧或供应商字段 |
| Freddy 2026-08-13 模式与菜单批注 | 现有完整创作台作为专业模式保持;新手只输入商品信息、SKU、图片和可选参考视频,一键获得完整视频;视频工具菜单只保留一个“AI 视频”入口 | 新手前台隐藏模板、模型、参数、逐镜控制和内部编排;后台仍用 ShotPlan/ShotAttempt、确定性合成与质量门禁,不把“一键”解释为单模型稳定整片直出 |
| Freddy 2026-08-14 七项浏览器批注 | 两种模式统一使用最多 9 张通用商品图片批量上传;参考视频只收 MP4/MOV 且不超过 15 秒;SKU 自动查询历史视频;新手结果移除冗余说明与转专业按钮,使用对话修改;历史入口可操作 | 原型可演示本地查重与媒体元数据校验,但真实 SKU 历史服务、权限过滤、模型调用和费用仍待联调/POC |
| Freddy 2026-08-14 模板与字幕批注 | 新手增加可选择的视频内容模板;本轮新手与专业模式均不生成字幕 | 新手只增加一次内容方向选择,不暴露模型或 Prompt;全链路移除字幕字段、轨道、预览叠字和交付文件,旁白/声音仍保留 |
| Freddy 2026-08-14 蓝图与布局调整 | 快速生成先确认视频蓝图和默认配置;模板补齐决策信息;模式改名并保留状态;生成后进入独立工作台;修改先确认影响计划;统一视频创作依据 | 只重构现有创建与作品流程,不新增菜单、真实模型调用、字幕或发布能力;保持现有视觉体系与专业逐镜能力 |
| Freddy 2026-08-14 脚本确认收敛反馈 | 移除创作依据、模式说明和教学文案;生成配置只放左侧;右侧复杂蓝图改为一份 AI 撰写且可编辑的视频脚本,确认后再生成 | 只简化可见交互,不删除后台事实、合规、素材权利和可执行性校验;分镜创作、后台进度、局部失败恢复、版本和修改影响确认保持不变 |
| Freddy 2026-08-14 模板分镜生成纠正 | 模板只决定传给大模型的分镜 Prompt,不得写死镜头数或镜头时间;模型按本次上下文生成脚本与分镜 | 本次不改已验收界面,只修正服务端合同、时间轴状态与前端展示数据来源;Prompt 0.6 仍待真实回放 |
| Freddy 2026-08-17 Agent、字幕与重生成纠正 | 由 AI 视频导演 Agent 生成结构化计划,再分别编译无字画面 Prompt、旁白和确定性字幕;用户自己控制是否整片或指定镜头重生成 | 快速生成只展示可编辑中文脚本与字幕开关;分镜创作开放逐镜旁白/字幕/视觉提示词;质检不自动创建付费任务;真实媒体能力仍待 POC |
| Freddy 2026-08-21 专业画布确认与图片能力纠偏 | 快速生成保持不变;分镜创作增加可选画布和工作空间统一元素库;支持画布内图片创作 | 图片采用独立自由生图,不接图片工坊 Prompt、Listing 角色、套图或复杂编辑;不增加自动质量建议/重试;真实图片模型与首尾帧能力待 POC |
| Freddy 2026-08-21 专业画布交互纠偏 | 专业模式按竞品同类自由画布工作语法重构,不使用固定三栏关系视图 | 复用节点、连接、上下文动作、画布任务卡和结果分支机制;不复制竞品品牌、素材、专有文案或视觉资产;快速生成不变 |
| Freddy 2026-08-23 专业画布易用性复验 | 专业模式默认回到分镜列表,画布改为可选视图;首屏聚焦当前链路,减少重复和无响应入口 | 快速生成、共享状态、元素库、自由生图、版本与能力门禁保持;本轮只调整专业模式信息架构和画布交互 |
| 2026-08-14 跨项目纠偏同步 | Seedance 2.0 Mini 本地适配属于营销视频项目候选技术 POC | 仅登记独立分支 feat/seedance-2-local-adapter 和提交 31d089d、9337f63 的只读证据;不合并、不启动、不写成已支持,真实测试前先轮换曾暴露的火山引擎密钥 |
| Flova、MiniMax、Seedance 参考 | 作品优先、媒体上下文、参数设置、逐镜提示词和片段重生成 | 不照抄系统 Prompt-first、Skill/模型市场或通用剪辑器 |
| 产品 PRD v2.0 | SKU 查重、通用批量图片、参考视频校验、新手对话修改、专业逐镜生成、版本、六层质量、交付与归因 | 业务规则不可降级 |
| Ant Design / ProComponents | 真实组件、Token、可访问性、状态和业务工作台 | 不用暗色皮肤冒充高级感,不覆盖 .ant-* 内部结构 |
页面清单
产品范式:AI 协作型作品工作台,在 ERP 壳层内采用 OperationsWorkbenchPage,但一级对象是商品与视频作品,不是任务表格。
| 页面 ID | 路由 | 页面目标 | 主操作 | 一级对象 |
|---|---|---|---|---|
| P-001 | #/create | 在同一作品上下文完成 SKU 查重、最多 9 张商品图片批量上传与双流程创作;快速生成先在左侧确认配置、在右侧编辑并确认 AI 视频脚本后后台成片,分镜创作围绕稳定分镜对象完成逐镜生成与合并 | 快速生成:生成 AI 视频脚本 / 确认脚本并开始生成;分镜创作:生成分镜脚本 / 生成分镜 / 合并成片 | 商品、历史视频、商品图片、模板、生成配置、可编辑脚本、模型、分镜、生成尝试、成片与版本 |
| P-002 | #/workspace | 延续相同壳层查看成片和镜头,修改逐镜脚本、提示词与参考并重生成,再完成质检、版本与交付 | 用修改后的提示词重新生成当前镜头 / 确认交付 | 原视频、镜头缩略轨、编辑指令、参考、质量与版本 |
以下不再作为独立页面:制作与质检、版本与交付。它们进入 P-002 的状态带、右侧面板或抽屉。#/production 与 #/delivery 仅兼容重定向至 #/workspace。
产品功能覆盖矩阵
| 功能 ID | 页面/表面 | PRD 来源 | 已确认产品功能 | 实现目标 | 覆盖状态 | 排除编号 |
|---|---|---|---|---|---|---|
| F-001 | P-001 SKU 启动器、素材/参数准备与事实抽屉 | G-001、G-003、G-009、5.1 | SKU 解析、素材/权利快照、OutputProfile | 覆盖 idle/loading/setup/歧义/阻断/error/403 | 实现 | — |
| F-002 | P-001 模板画廊、自定义方向与详情抽屉 | G-002、G-007、5.2 | AI 推荐模板、自定义方向、脚本、分镜与来源 | 业务模板、关键帧、自定义补全与来源 | 实现 | — |
| F-003 | P-001 逐镜编辑、决策栏与确认弹窗 | R-003、G-009、5.2 | 旁白、字幕、视觉提示词、参考与确认 | 覆盖冲突校验、保存、adjusting/confirming;视觉 Prompt 禁止文字,字幕独立合成 | 实现 | — |
| F-004 | P-002 作品画布、镜头轨与制作记录 | G-004、5.3 | 镜头生成、进度、成本与恢复 | 覆盖 generating/partial/completed 和实际成本摘要 | 实现 | — |
| F-005 | P-002 当前异常与质量抽屉 | G-006、5.4 | 六层质量与问题定位 | 区分交付硬门禁与效果预测层 | 实现 | — |
| F-006 | P-002 修改影响、字幕/片段编辑、重生成确认与版本抽屉 | R-006、G-009、5.4 | 用户选择整片或指定镜头重生成;字幕独立修改与重合成 | 先展示影响范围和保留内容;付费生成需确认;字幕编辑只创建轨道与合成子版本 | 实现 | — |
| F-007 | P-002 版本与受控变体抽屉 | G-005、5.5 | 基准、修复版与受控变体 | 一次只改变一个创意 DNA 变量 | 实现 | — |
| F-008 | P-002 交付与投放回指抽屉 | G-008、5.6 | 交付包、投放映射与归因边界 | 可下载清单、本地映射、不自动发布 | 实现 | — |
| F-009 | P-001 专业创作画布与统一元素库 | G-015~G-016、5.2.0D | 同一 ShotPlan 的列表/画布双视图;工作空间元素复用 | 选择节点、查看引用、元素版本与视图切换状态保留 | 实现 | — |
| F-010 | P-001 自由生图、图片版本与用途绑定 | G-017~G-018、5.2.0D | 从元素/分镜/首尾帧发起独立图片任务 | 覆盖 draft/generating/succeeded/failed/capability-blocked、子版本与显式绑定 | 实现 | — |
页面设计决策
| 决策点 | 用户必须理解 | AI 默认承担 | 前端禁止 |
|---|---|---|---|
| 1. 选择模式和商品 | 新手只做关键决策;专业用户可接管更多变量 | 读取商品事实、平台与权利 | 把新手和专业控制混在同一密度 |
| 2. 上传商品图片 | 图片确实属于当前商品 | 后台识别用途并校验格式与权利 | 要求用户先分类,或自动混入外部骑行/水下等素材 |
| 3. 选择模板与模型 | 推荐模板为什么适合;本次使用哪个模型 | 策略结构补全、模型能力说明和来源/假设 | 暴露 Skill、系统 Prompt、seed、采样器或密钥 |
| 4. 确认脚本 | 完整中文脚本或每镜头的旁白、字幕、视觉提示词和时段 | Agent 提供结构化初稿,编译器分离画面/旁白/字幕并执行冲突校验 | 未确认脚本就调用视频模型;把字幕写入视觉 Prompt |
| 5. 审阅生成结果 | 快速生成可审阅完整成片,分镜创作可审阅独立片段 | 保存模型/参数/轨道/合成版本;质检只定位和建议 | 系统未经用户确认自动创建付费重生成任务 |
| 6. 合并与交付 | 当前作品、质量结果、交付文件与真实效果边界 | 合成、质检、版本与打包 | 片段未齐就允许合并或宣称真实转化 |
| 7. 专业画布与图片 | 当前选中的镜头、元素、图片版本及用途;切换画布不新建工程 | 维护引用、版本、能力门禁和可追溯执行快照 | 把自由生图结果自动写进镜头、调用图片工坊或绕过视频模型能力 |
异常不是第四个常规步骤。只有存在硬阻断时,用户才确认必要修复;系统必须把问题、位置、影响、成本和修复动作一起说明。
P-001
- 产品范式:LinkFox 型双栏图转视频工作台,叠加 ERP 商品事实与交付质量能力
- 页面母版:全局产品导航 + 视频工具侧栏 + 固定创作参数列 + 可滚动结果区
- 页面目标:不理解内部工具也能从 SKU 开始,同时让有经验的用户接管关键创作变量
- 主用户任务:输入 SKU 并优先复用历史结果,批量上传 1–9 张商品图片;新手一键成片并用自然语言修改,专业用户继续接管模板、模型、分镜和版本
- 信息优先级:一级为 SKU、商品图片、分镜总览与当前分镜;二级为模板/模型、参数、提示词和当前生成版本;三级为来源、执行快照与成本
- 主操作:准备态“生成分镜脚本”;脚本态“确认分镜并生成片段”;片段态“合并为完整视频”
- 密度策略:standard
- 视觉强调:decision-first
- 视觉强调对象:商品、方案关键帧和当前选择
- 动效策略:minimal
- 动效说明:只在 SKU 解析、方案调整与确认时显示必要进度
P-001 结构锚点(CR-20260813-003)
- 顶部是稳定产品导航,不在主任务中滚动;左侧视频工具导航固定,当前项为“图转视频”。
- 创作参数列固定宽度并可独立滚动;从上到下为新手/专业模式、SKU、通用商品图片、商品信息;专业模式再展开六类模板/自定义、视频模型、分辨率、生成设置和首尾帧。
- 商品图片使用同一个 Upload 批量入口,接受 JPG/PNG/WebP,最少 1 张、最多 9 张,不要求用户选择图片类型;不显示 AI 预选骑行、水下等外部参考素材。
- 主操作固定在创作列底部,第一步为“生成分镜脚本”;确认前不调用视频模型。
- 右侧只保留“1 分镜制作 / 2 合并成片”两步进度;“优秀案例”不进入生产导航,灵感与策略模板统一由左侧业务模板承接。
- 生产区每一时刻只回答当前步骤、当前分镜和下一动作。商品规格与系统状态只显示一次;方案解释、事实来源、版本冻结说明按需出现,不在首屏重复。
- AI 一次返回完整 ShotPlan 列表。顶部总览同时展开全部分镜的编号、时段、画面意图、状态和视频槽;生成前视频槽必须为空并显示“尚未生成视频”。
- 点击任一分镜只更新下方当前分镜编辑器,不切路由。编辑器显示旁白、镜头提示词、用户手选模型、输出规格和不可删除的事实/合规约束。
- 新手主操作为“生成全部未生成分镜”;专业用户仍可在当前分镜内选择模型、编辑提示词并“仅生成当前分镜”。同一阶段不得同时出现两个同权重主按钮。
- 首次生成成功后,视频回执与回执首帧原位回填到该分镜;原型资产必须标注“演示”,失败则保留输入并允许就地重试。
- “重新生成”不是覆盖按钮:系统在同一分镜下追加 ShotAttempt v2/v3 子层级,显示直接父版本,旧版本只读保留;新草稿可编辑提示词和模型后单独生成或取消。
- 每个 ShotAttempt 的视频槽下方显示“首帧图 / 尾帧图”两个可选上传位;草稿可上传或更换,成功尝试随结果冻结。基于旧版新建子版本时继承首尾帧,用户可在子版本替换,不回写父版本。
- 只有每个分镜的当前采用版本均成功,才解锁“合并成片”。从合并页返回时,分镜选择、编辑值、视频回执和尝试版本不得丢失。
- 分镜脚本的媒体区只显示真实上传的输入素材并标注“输入素材”,同时以文字说明“待生成画面”;禁止用未上传、未生成的场景图作为分镜预览。分镜视频只有在真实供应商回执和媒体探测成功后,才展示视频播放器及从回执提取的缩略图;本地原型资产必须标为“演示”。
- 合并成片页展示确定性媒体链路:片段标准化、时间轴拼接、TTS、字幕打轴/SRT/VTT、字形与安全区检查、混音与渲染复检。视觉模型不得生成文字;字幕通过独立轨烧录。真实媒体服务仍标为待 POC。
- 推荐组件:PageContainer、ProForm、Image、Radio.Group、Card、Drawer、Modal
- 必须避免:大片空白、图标占位、文本表格型方案卡、醒目预测分数、把新手模式做成阉割版成片黑箱
P-001 模式分层、内容模板与确定性字幕(CR-20260817-001 覆盖 CR-20260814-002)
- 视频工具侧栏只显示一个“AI 视频”入口;进入同一创作页后用 Segmented 切换新手/专业,不暴露尚未独立交付的灵感、口播、复刻、编辑、剪辑和历史菜单。
- 分镜创作保持完整双栏创作台,不改变模板、自定义方向、模型选择、输出参数、全量分镜、逐镜首尾帧、旁白、视觉提示词、生成尝试和合并逻辑;新增逐镜字幕文案及其独立轨道版本,不要求视频模型绘制文字。
- 新手与专业模式均使用 Input.Search 输入 SKU;停止输入 600ms 后自动查询历史 AI 视频。命中时 Modal 展示缩略图、作品 ID、生成时间与规格,并提供“使用该视频 / 仍要新建”;未命中时显示非阻断提示。
- 两种模式均使用同一通用图片 Upload:支持 JPG/PNG/WebP、多选批量上传、1–9 张计数、缩略图删除,不出现主图/细节/场景等分类槽。
- 新手模式左列从上到下显示:模式切换、SKU、通用商品图片、商品信息、视频内容模板、可选参考视频、唯一主操作“生成 AI 商品视频”。模板区复用六类业务模板,默认选中 AI 推荐项;新手不出现自定义方向、模型、输出参数、逐镜脚本/提示词和首尾帧。
- 快速生成右侧在提交前显示脚本确认;提交后只展示“商品与素材校验 → 导演计划与 Prompt 编译 → 画面/旁白/字幕生成 → 合并与质量检查”的总进度;成功后展示完整视频与“告诉 AI 你想怎么改”对话框,不展示重复完成项说明或“进入分镜创作编辑”按钮。
- 参考视频使用 Upload,只接受 MP4/MOV;客户端读取媒体 metadata,超过 15 秒或无法读取时阻断并保留原输入,服务端必须再次校验。原型不上传外部服务。
- 文本对话提交后保留用户消息并进入重新生成总进度;成功后追加 AI 回执“已生成新版本”,旧版本进入历史记录。顶部“历史”使用 Drawer,列表中的“查看”必须真实回填成片状态。
- 新手模式的简化是减少前台决策,不删除内部对象、失败恢复、来源、版本或质量控制。遇到可恢复失败时保留已完成镜头;遇到事实/权利/合规硬阻断时停止并给出一个明确处理动作。
- 两种模式默认
subtitleEnabled=true,生成前可关闭。开启时完整中文脚本必须明确字幕文案;视觉 Prompt 强制无字,合并阶段创建 SubtitleTrackVersion 与 CompositionVersion。字幕编辑只重合成,不触发视频模型;SRT/VTT 是否开放下载待 POC。
P-001 快速生成蓝图与独立作品工作台(CR-20260814-003)
- 顶部 Segmented 文案改为“快速生成 / 分镜创作”。选中项下方固定显示四项简要说明:工作流程、可控制内容、生成前确认、切换保留内容。
- 快速生成输入态使用
studio-grid--intake:左侧稳定输入商品与模板,右侧只承载三步进度、本次生成配置和视频蓝图。点击“生成视频蓝图”前不得进入视频生成进度。 - 视频蓝图以
VideoBlueprintPanel展示卖点来源、结构/镜头数、逐镜表达、素材、OutputProfile 和证据缺口。确认按钮是本阶段唯一主操作;蓝图未生成或存在硬阻断时禁用。 - “本次生成配置”由快速生成和分镜创作共用同一 React 组件、同一份 state 与同一选项集,包含已登记视频模型、时长、分辨率、比例、市场、语言、声音和字幕。不渲染供应商 Prompt、seed、采样器、密钥或隐藏路由。
- 模板卡保持六张真实图片卡,首层显示营销目标、结构和风险;“查看决策信息”打开 Drawer,完整显示所需素材、人物/场景生成、代表效果和风险。推荐卡在卡片区下方显示具体推荐理由。
- “视频创作依据”以五类来源行合并系统事实、用户补充、商品/参考素材、平台/地区/品牌约束和 AI 推测;每行同时显示来源与可信状态。
- 用户确认蓝图后切换为
studio-grid--focused单栏作品工作台,不再渲染完整创建表单。工作台保留模式切换、历史、进度、失败恢复、成片、版本和修改入口。 - 快速生成失败态显示受影响内容和已保留结果,并提供“保留当前结果 / 整片生成新版本”选择;如需指定镜头重生成,由用户进入分镜创作后操作。系统不得自动重试付费生成。
- 成片修改按钮文案为“分析修改影响”。点击后 Modal 先显示
RevisionImpactPlan;用户选择整片、字幕/音频重合成或取消并确认后才执行。历史 Drawer 同时保留父版本和当前版本。 studio-grid--intake在常用宽度使用双列;内容宽度不足时改为单列纵向滚动。studio-grid--focused始终单列,页面级不得横向滚动。
P-001 快速生成脚本确认收敛(CR-20260814-004)
ModeSwitch仅渲染“快速生成 / 分镜创作” Segmented,不渲染流程、可控制项、生成前确认项或切换保留说明。切换后的message继续反馈当前内容已保留。- 快速生成左栏顺序固定为:模式、SKU、商品图片、商品信息、视频内容模板、参考视频、本次生成配置(含模型)。分镜创作展示同款配置组件,仅额外展示首尾帧与逐镜控制。移除
NoviceIntro与CreationBasis;两种模式都不再渲染CreationBasis表面。 QuickProfileConfig只在快速生成左栏渲染一次。右侧不得重复渲染配置控件或创作依据,但OutputProfile仍随作品状态保留并传入执行任务。NoviceBlueprintPanel重命名语义为脚本确认表面:空态提示“AI 视频脚本会显示在这里”;生成态显示一个受控Input.TextArea,承载完整 AI 视频脚本,允许用户直接编辑。确认按钮文案为“确认脚本并开始生成”。- 生成脚本时前端保存
editableScript;切换模式、返回脚本、生成失败、任务完成或版本更新不得清空。用户确认前只创建脚本候选,不创建视频生成任务。 - 结构化事实来源、证据缺口、素材权利、品牌/平台约束和 AI 假设继续作为内部
VideoBlueprint与执行门禁字段保存,但不在主界面逐项展开。提交编辑脚本时服务端需重新校验;原型通过既有 guardrail 模拟该边界。
P-001 模板分镜 Prompt 动态化(CR-20260814-006)
- 六张模板卡仍只承载业务选择,不新增 Prompt 编辑器。选中模板后,前端只提交
templateId和当前配置;服务端解析对应storyboardPromptModuleId/version并与事实、素材、规则及能力上下文编译。 ShotPlan[]的数量、顺序、startSec/endSec均来自本次大模型结构化结果,不允许前端按模板常量生成或覆盖。前端只负责校验并展示:首镜从 0 开始、相邻镜头连续、不重叠、末镜结束时间等于OutputProfile.durationSec。- 用户修改模板、总时长、关键素材或商品事实后,旧脚本与 ShotPlan 保留为历史修订;当前表面回到脚本生成态,等待服务端重新编译。已确认/执行中的 ShotPlan 不做原地拉伸或删改。
- 若服务端返回
TIMELINE_INVALID、DURATION_INSUFFICIENT、MATERIAL_INSUFFICIENT或CAPABILITY_UNSUPPORTED,右侧只显示一个最高优先级问题和修正动作,不创建 ShotAttempt。该规则不新增主界面教学文案或重复配置。
P-001 分镜主流程与可选创作画布(CR-20260823-001)
- 快速生成组件树、状态与主操作不变。
creatorMode=pro且分镜脚本就绪时,ResultsPanel默认显示分镜列表;顶部使用受控Segmented显式切换“分镜列表 / 创作画布”。切换只改变视图,不清空共享工程状态。 StoryboardReview与CreativeCanvas读取同一ShotProduction[]、CreativeElement[]、GenerationTask[]、ImageVersion[]和VideoResult[]。共享状态提升到专业结果容器;画布只额外保存selectedNodeId / contextMenuNodeId / viewport / zoom。- 画布容器为深色点阵无限工作区的有限原型实现,支持内部平移/滚动、缩放、适应屏幕、节点选择和可见连接线。进入画布时默认聚焦当前分镜及其直接引用,创建任务或结果后自动定位目标节点;不得让当前任务首次出现在可视区之外。
- 首屏只展开当前分镜、商品素材和当前任务链;工作空间其他元素留在元素库 Drawer,用户主动加入后才成为画布节点。页面不得以固定“元素 → 图片 → 分镜”三栏表达流程。
- 节点统一使用
CanvasNode:ASSET / IMAGE_TASK / VIDEO_TASK / IMAGE_RESULT / VIDEO_RESULT / SHOT / NOTE。节点左右端口表达输入/输出;点击右侧+打开锚定于当前节点的上下文菜单。菜单按源类型提供“上传素材 / 从元素库加载 / 自由生图 / 图生视频 / 继续创建版本”等可执行动作。 - “自由生图”和“图生视频”都在画布内创建任务卡,不打开 Modal。任务卡必须显示引用缩略图、可编辑 Prompt(支持
@节点名)、模型、比例/分辨率或时长、生成数量和唯一主操作;生成中、成功、失败都在同一任务节点呈现。 - 任务成功后,结果以新节点出现在任务右侧并保留连线和父版本。图片结果直接显示“用于当前分镜”主操作,详情 Drawer 再提供元素、参考、首帧、尾帧和再创作;任何动作都不覆盖父结果。
- 专业视图栏提供唯一“元素库”入口,打开工作空间级 Drawer,按商品、人物、场景、道具、风格参考筛选。首期不显示个人/团队/公共市场切换。
- 自由生图不提供“进入图片工坊”,不展示图片工坊 Prompt、图片角色、套图布局、图层/蒙版或复杂编辑。画布不自动弹出质量建议,不自动创建重试;是否继续生成和采用哪个结果由用户决定。
- 在 1280×800 及以上,画布占满专业结果区可用高度;窄桌面仍保持页面级无横向溢出,超出内容只在画布内部滚动。无实际响应的历史、复制、下载或更多按钮不得作为假控件保留。
P-002
- 产品范式:AI 协作型作品工作台的生成与交付表面
- 页面母版:单一 OperationsWorkbenchPage,由作品画布、镜头缩略轨和 AI 状态侧栏构成
- 页面目标:让用户始终围绕当前作品判断是否需要处理异常、是否可以交付
- 主用户任务:观看当前作品,只处理必须修复的问题,最后确认交付
- 信息优先级:一级为画布、总状态、唯一阻断与主操作;二级为镜头轨、版本、成本和质量摘要;三级为完整报告、任务事件、版本谱系与投放映射
- 主操作:有硬阻断时“用修改后的提示词重新生成片段”;无硬阻断时“确认交付”
- 密度策略:compact
- 视觉强调:decision-first
- 视觉强调对象:当前作品、当前异常与下一动作
- 动效策略:minimal
- 动效说明:镜头生成、替换、质检和打包使用真实进度,其余不做装饰动效
- 推荐组件:PageContainer、Image、Progress、Steps、Badge、Button、Drawer、Modal
- 必须避免:假视频框、镜头表格主导、六张质量卡常驻、独立版本/交付页面、多主操作
页面-区域-组件映射
| 页面 | 区域 | 目标 | 真实组件 | 数据对象 | 核心状态 |
|---|---|---|---|---|---|
| P-001 | 顶部创作栏 | 选择快速生成 / 分镜创作并理解差异 | Segmented + Typography | creatorMode、preservedState | selected/preserved |
| P-001 | 商品上下文带 | 确认 AI 读到的商品 | Image + Typography + Tag + Button | ProductFactSnapshot | ready/blocked |
| P-001 | 商品图片与交付设置 | 批量上传本商品图片并按模式接管 | Upload + Select + Segmented + Switch | ProductImageAsset[]、FrameAssignment、OutputProfile | setup/selected/unsupported |
| P-001 | 模板画廊与自定义 | 视觉化比较或输入自己的方向 | Radio.Group + Card cover + Modal + Input.TextArea | PlanCandidate[]、customIntent | ready/selected/custom |
| P-001 | 共享生成配置与快速脚本确认 | 两种模式在左侧共用模型与 OutputProfile;快速生成在右侧直接编辑并确认 AI 视频脚本 | Select + Segmented + Switch + Input.TextArea + Button | VideoModelSelection、OutputProfile、EditableVideoScript、VideoBlueprint(内部) | idle/generating/ready/confirmed/blocked |
| P-001 | 快速生成作品工作台 | 后台生成、失败恢复、成片修改和版本留存 | Progress + Steps + Alert + Modal + Drawer | ExecutionJob、RevisionImpactPlan、VideoVersion[] | working/partial/error/ready/versioned |
| P-001 | 分镜总览与当前编辑器 | 一次看全量脚本,再逐镜编辑和生成 | Button card + Empty state + Input.TextArea + Select + Progress | ShotPlan[]、ShotAttempt[]、ShotOverride | draft/generating/success/failed/conflict |
| P-001 | 分镜版本与合并 | 原位审阅回执、上传尝试级首尾帧、追加重生成版本并合并 | Card + Image + Upload + Progress + Button | ShotAttempt[]、FrameReference[]、VideoVersion | draft/generated/failed/merged |
| P-001 | 分镜主流程与可选创作画布 | 默认在线性分镜中完成视频;主动切换后在画布组织素材、生成任务、结果与后续分支 | Segmented + Canvas node + connection + contextual + + Drawer | ShotProduction[]、CreativeElement[]、GenerationTask[]、ImageVersion[]、VideoResult[]、CanvasViewState | storyboard/canvas/selected/preserved |
| P-001 | 画布内自由生图与图生视频 | 从任一兼容节点创建任务卡,编辑引用、Prompt、模型和参数;结果回填为可继续分支的新节点 | Canvas task card + Input.TextArea + Select + Segmented + Progress + Button | ImageGenerationTask、VideoGenerationTask、ImageVersion、VideoResult、ImageUsageBinding、ProviderCapabilitySnapshot | draft/generating/succeeded/failed/blocked/bound |
| P-002 | 项目头 | 保持商品、版本和状态 | Breadcrumb + Tag + Badge + Button | VideoProject、VideoVersion | generating/blocked/ready |
| P-002 | 作品画布 | 播放当前成片/片段并定位问题 | 原生 Image + Button + Progress + 字幕预览层 | VideoVersion、Shot、SubtitleTrackVersion、CompositionVersion | generating/preview/playing/block |
| P-002 | 镜头缩略轨 | 浏览和选择镜头 | button + Image + Badge + timeRange | Shot[] | success/running/failed/replacing |
| P-002 | 创作与质量侧栏 | 修改片段创作指令并执行下一动作 | Steps + Tabs + Input.TextArea + Checkbox + Alert + Button | ExecutionJob、QualityIssue、ShotOverride | working/blocked/conflict/ready |
| P-002 | 详情工具条 | 渐进披露专业信息 | Button + Drawer | fact/report/log/version/delivery | open/closed |
普通控件契约
- 所有主操作使用真实
Button,可点方案使用Radio.Group + Card,镜头使用原生button与aria-pressed。 - SKU、补充想法和外部创意 ID 分别使用
ProFormText、Input.TextArea和Input,均保留标签、校验与恢复值。 - 状态使用
Badge、Tag、Progress和中文文字共同表达,不只依赖颜色。 - 弹窗和抽屉使用 Ant Design
Modal/Drawer,保持焦点陷阱、Escape 关闭和触发点焦点返回。
复杂控件契约
7.1 SKU 创作栏
- 新手启动必填为 SKU、商品信息、至少 1 张商品图片和一个视频内容模板;系统默认选中 AI 推荐模板,视频模型仍由系统承担。
- 输入 SKU 后自动查询同租户/店铺下的历史 AI 视频;选择复用则直接回填结果,继续新建才锁定本次事实快照并进入生成。
- 正常解析后同屏展示真实商品图、6 张素材、12 条事实和 2 条假设摘要。
- 歧义只问一次商品;缺事实/权利则不渲染方案;失败保留输入;越权不泄露商品信息。
7.2 素材、视频参数、模板与分镜编辑
- 图片使用一个通用批量入口上传 JPG/PNG/WebP,最少 1 张、最多 9 张,不要求用户分类;不自动选择外部场景素材。商品身份由 SKU 事实与已上传图片共同校验。
- 左侧专业设置的首尾帧是成片级默认参考;当前分镜内的首帧/尾帧是 ShotAttempt 级覆盖。能力注册不支持时,必须明确降级为外观/构图参考,不显示“精准锁帧”。
- 视频参数包含比例、时长、清晰度、格式、声音与输出数量;模型名称由用户手选,但不暴露 seed、采样器、密钥或供应商内部版本参数。
- 模板至少覆盖产品展示、UGC 种草、痛点解决、开箱测评、场景证明和功能对比;AI 标记推荐模板,并支持一句话自定义方向。模板前端配置不得携带固定镜头数、固定时间片或完整预写脚本,只保存业务元数据与 Prompt 模块引用。
- “预测分数”不作为醒目数字。推荐理由使用“证据更完整 / 素材最可执行”等业务解释;真实效果仍待投放验证。
- AI 生成脚本后一次展开本次动态产生的全部分镜;镜头数和时段随目标总时长、素材和能力上下文变化。分镜的视频槽在真实任务成功前为空,不复用场景图伪装成视频缩略图。
- 点击镜头后同屏展示旁白、镜头提示词、商品参考、用户手选模型和输出规格。提示词标为可修改能力;提交前校验商品身份、事实、权利、平台和合规冲突。
- 每镜头对应独立 ShotAttempt。模型、提示词、首帧图、尾帧图与结果一起版本化;成功尝试冻结,重生成子版本继承后可替换,旧结果不覆盖。全部分镜的最新采用版本成功后才解锁合并成片。
- 专业结果区默认进入分镜列表,创作画布为顶部可选视图。两者使用相同 ShotAttempt、首尾帧绑定、元素、生成任务和结果版本;视图切换保持任务输入、结果与当前采用状态。自由生图只产生候选 ImageVersion,用户明确采用后才写入当前草稿。
- 元素库首期只有当前工作空间作用域,不显示个人库、团队库或市场。商品元素受 SKU 锁定;其他元素须显示来源和权利状态。
- 自由生图只收图片描述、引用、候选模型和基础输出参数;不接图片工坊 Prompt/套图流程。图片任务失败不自动重试,图片结果不自动应用,视频模型不支持尾帧时尾帧动作禁用。
7.3 作品画布与镜头缩略轨
- 当前镜头以真实图像呈现;生成中显示图像上的受控遮罩和 Progress,不替换成 Skeleton 白块。
- 片段播放按钮必须可操作并显示播放进度;原型可模拟播放状态,但不得用不可点击图标冒充播放器。
- 镜头按钮显示缩略图、编号、时段、业务意图和状态。当前镜头有边框与
aria-pressed;异常镜头同时有文字标签。 - 点击镜头更新画布、旁白摘要和右侧状态;不会切换页面。
- 任务尝试、供应商、详细成本和事件只在“任务记录”抽屉查看。
7.4 当前异常、片段修改与重生成
- 默认只展示优先级最高的可执行阻断:问题、证据、镜头/时段、为什么阻断以及一个主操作。
- 当前片段侧栏提供“提示词 / 参考 / 质量”三个视图;用户可修改镜头提示词和旁白、选择是否保留首尾参考,再执行重生成。
- 主操作统一为“用修改后的提示词重新生成片段”;确认弹窗明确整镜头重做、替换、重合成和复检,其他通过镜头不受影响。
- 配音、字幕、音乐使用轨道修改与重合成;字幕编辑创建新的 SubtitleTrackVersion/CompositionVersion,不触发视频模型;禁止“精准局部修复”“无损编辑”。
- 修复中同时更新当前镜头、进度、状态文字;成功后生成新版本、保留旧版本并自动再次质检。
7.5 质量、版本、变体与交付渐进面板
- 六层质量在工作台只显示“5 层通过 / 1 层阻断”摘要;完整层、证据、分数和历史进入 Drawer。
- 版本主界面只显示当前版本和父版本摘要;完整谱系、成本与变体入口进入 Drawer。
- 受控变体一次只能改变一个 Creative DNA 变量,并显示保持不变项。
- 硬阻断清零后,右侧主操作变为“确认交付”;生成包在同一页面展示进度和文件结果,不导航。
- 交付只生成本地清单,不发布、不创建广告、不修改预算。投放映射与归因边界留在交付详情抽屉。
表格与数据展示契约
- 普通用户主流程不使用表格;商品事实和版本历史仅在抽屉中使用
ProTable。 - 表格关闭搜索、密度切换和列设置,避免把渐进披露面板变成管理台。
- 版本行必须显示版本、类型、直接父版本、变更原因、质量与增量成本;历史不可覆盖。
- 商品事实行必须显示事实、当前值、来源与核验状态;限制宣称不得显示为已核验。
状态与权限矩阵
| 状态/角色 | 主要呈现 | 可操作 | 禁止/恢复 |
|---|---|---|---|
| idle | SKU 创作栏 + 示例入口 | 读取商品素材 | 无 SKU 时表单提示 |
| loading | 三阶段进度 + 商品图区域 Skeleton | 可取消当前读取 | 不显示假方案 |
| ambiguous | 一个商品选择问题 | 确认并继续 | 不询问策略 |
| blocked facts/rights | 单一硬阻断 Alert | 申请补充事实 | 不生成方案 |
| setup | SKU 素材、首尾参考与视频参数 | 采用默认或调整后继续 | 无合格素材/不支持参数明确阻断或降级 |
| plan edited/conflict | 模板、自定义和逐镜编辑器 | 保存镜头/采用方向 | 与受保护事实冲突时禁用保存 |
| shot draft | 全量分镜脚本 + 空视频槽 + 当前分镜编辑器 | 修改旁白/提示词/模型,上传首帧/尾帧,生成单镜或全部待生成镜头 | 不展示未生成场景图,不允许合并 |
| generating | 作品画布、镜头逐个完成、总进度 | 查看已完成镜头 | 成功结果保留 |
| shot success | 当前分镜原位显示视频回执,输入冻结 | 以当前版本为基础重生成 / 切换其他分镜 | 重生成不得覆盖当前版本 |
| child draft/failed | 当前分镜下追加 v2/v3 子层级 | 修改并生成 / 取消草稿 / 失败重试 | 父版本继续可见且可回退 |
| quality blocked | 当前异常 + 定位镜头 + 修复主操作 | 有权限者修复 | 交付禁用 |
| ready | 全片预览 + 六层通过摘要 | 确认交付、按需创建变体 | 不宣称转化已验证 |
| packing/ready | 同页进度/文件清单 | 下载清单、绑定本地映射 | 无真实发布按钮 |
| 只读 | 所有对象可见 | 打开详情 | 全部命令禁用并解释 |
| 403 | Result 403 | 返回 | 不显示商品/项目数据 |
交互与反馈
- SKU 提交、方案调整、开始制作、整镜头重做、交付打包和受控变体都有可见处理中状态。
- 生成分镜脚本只创建 ShotPlan,不调用视频模型;用户确认单镜或批量生成后才进入异步生成态。
- 从合并成片返回“分镜脚本与视频”时必须保持分镜与 ShotAttempt 状态,不得因标签卸载而重新初始化。
- 质量阻断必须联动画布和对应镜头;确认修复后只替换受影响镜头,并生成父子版本。
- 下载交付清单生成本地 JSON 文件;绑定投放映射只保存本地原型状态,不连接外部平台。
- 失败保留 SKU 与补充想法,提供当前步骤重试;越权时不泄露商品信息。
文案
| 场景 | 文案 |
|---|---|
| P-001 标题 | 让 AI 为这个商品做好一支视频 |
| P-001 说明 | 选择 SKU,上传商品图片,AI 会按模板生成可修改的分镜脚本;确认后逐镜生成片段并合并成片。 |
| 准备态主按钮 | 生成分镜脚本 |
| 商品事实摘要 | 12 条商品事实可用于脚本;上传图片只作为本商品的创作素材。 |
| 方案区标题 | 选择一个电商视频模板 |
| 推荐理由 | 商品事实足够先完成分镜;场景片段由所选模型逐镜生成。 |
| 脚本主按钮 | 确认分镜,生成片段 |
| 片段主按钮 | 合并为完整视频 |
| P-002 状态 | AI 正在完成这支视频 |
| 质量阻断 | 镜头 03 的商品保护壳颜色发生变化,需要重做这个镜头。 |
| 修复主按钮 | 用修改后的提示词重新生成片段 |
| 修复说明 | 按当前镜头提示词和参考重做整个片段,并重新合成与质检;其他已通过镜头不会重做。 |
| 全绿主按钮 | 确认交付 |
| 效果边界 | 当前作品已达到可交付质量;真实转化效果仍需投放验证。 |
| 禁止文案 | 潜力预测 84、精准锁帧、精准局部修复、无损修复、保证转化、选择 Skill、编辑系统 Prompt、选择 seed/采样器/供应商密钥 |
视觉契约
- 保持一个根
ConfigProvider,使用官方 Token 和真实 Ant Design / ProComponents。 - ERP 壳层只保留产品归属与账户;移除本模块的三项流程侧栏,让页面宽度服务作品。
- 表面使用浅灰布局底色和白色业务面;作品图像可使用深色媒体底板,但不能把全站换成装饰型暗黑皮肤。
- 图片使用项目内真实 raster 资产,
object-fit: cover/contain按槽位选择;不允许 CSS 图形、emoji、假视频框或图标占位替代作品。 - 模板为两列六张等高真实图片卡;自定义方向作为独立模式。当前模板和镜头使用官方 primary 选中态,阻断使用 error,待复核使用 warning。
- 1440×900 必须首屏看见 SKU/商品/当前阶段中的核心判断;素材准备与模板/逐镜编辑允许纵向推进;P-002 首屏必须看见画布、镜头轨、当前异常和创作主操作。
- 1280×800 不得发生页面级横向滚动;窄桌面时方案卡改为横向滚动或 1 列,作品工作台改为上下结构。
- 所有可点卡片与镜头必须是 Button/Radio 或有键盘语义;图片必须提供有意义
alt;颜色不是唯一状态编码。 - 动态状态使用可见中文和 Progress;Modal/Drawer 保持焦点陷阱和关闭后焦点返回。
来源追踪
| 前端表面 | 产品来源 | 领域输入 | 原型证据 |
|---|---|---|---|
| SKU 与商品上下文 | PRD G-001/G-003、5.1 | 专题 02、04 | data-requirement-id="F-001" |
| 可视方案与分镜预演 | PRD G-002/G-007、5.2 | 专题 02、03、07 | data-requirement-id="F-002 F-003" |
| 作品画布与镜头轨 | PRD G-004/G-008、5.3 | 专题 05、06 | data-requirement-id="F-004" |
| 当前异常与质量详情 | PRD G-006、5.4 | 专题 04、06 | data-requirement-id="F-005 F-006" |
| 版本、变体与交付 | PRD G-005/G-008、5.5~5.6 | 专题 07、08 | data-requirement-id="F-007 F-008" |
前端验收清单
- [x] 重构目标、结果和桌面 Web 产品形态明确;Flova 与首版原型截图已作为视觉/结构参考。
- [x] 页面从三张后台页收敛为 P-001 创作决策 + P-002 单一作品工作台。
- [ ] SKU 正常、歧义、事实阻断、异常和无权限可演示。
- [ ] 两种模式的 1–9 张通用商品图片批量上传、删除与上限校验可操作;专业模式的模型手选、首尾参考和视频参数保持可用。
- [ ] SKU 停止输入后自动查重;命中弹窗可复用历史视频,未命中不阻断创建;查询始终受租户/店铺/SKU 范围约束。
- [ ] 参考视频只接受有效 MP4/MOV 且不超过 15 秒;格式、读取失败和超时长均有明确反馈。
- [ ] 新手模式可在六类视频内容模板中选择并看到当前选中/AI 推荐;成片不显示冗余制作说明和转专业按钮;自然语言修改可生成新版本;历史 Drawer 可打开并复用结果。
- [ ] 推荐模板都有真实关键帧与业务解释;自定义方向可补全并选中。
- [ ] 快速生成可编辑完整中文脚本并切换字幕;分镜创作可查看、修改并保存逐镜旁白、字幕、视觉提示词和参考;字幕修改只创建轨道与合成子版本。
- [ ] 作品画布、镜头缩略轨、当前异常与主操作在 1440×900 首屏可见。
- [ ] 镜头修复、轨道修复、新版本、六层复检、交付包和受控变体可真实操作。
- [ ] 用户可编辑镜头提示词并手选已登记视频模型;页面无系统 Prompt、Skill 市场、seed、采样器或供应商密钥。
- [ ] 分镜脚本、分镜视频、字幕/配音与合并成片按顺序解锁;质检不自动重生成,用户确认后才执行整片或指定镜头重生成。
- [ ] 任务日志、六层明细、版本谱系和投放映射只在渐进面板中出现。
- [ ] 画面问题只承诺整镜头重做;交付不产生外部发布。
- [ ] 同视口视觉 QA、真实浏览器交互、控制台、TypeScript、antd lint、build、guard、change:sync 通过。
- [x] Freddy 已于 2026-08-14 完成重构后最终原型验收。
CR-20260823-001 专业画布易用性纠偏验收
- [x] 快速生成保持原组件树、输入状态和主操作,不因专业画布增量改变。
- [x] 分镜创作默认显示分镜列表;创作画布为显式可选视图,切换后共用同一任务、结果和版本状态。
- [x] 画布首屏聚焦当前分镜链路;新任务和结果自动进入可视区,关键操作不被裁切。
- [x] 元素库只有一个全局入口;图片结果直接显示采用动作;无响应的历史、复制、下载和更多按钮不再出现。
- [x] 商品节点右侧
+可创建自由生图或图生视频任务;图片结果可继续创建视频分支,任务卡直接编辑引用、Prompt、模型和基础输出参数。 - [x] 自由生图结果与图生视频结果均创建新节点并保留父节点、连接和输入,不覆盖原节点;工作空间统一元素库可打开。
- [x] 列表/画布、快速/专业切换保留任务、结果与连接;1440、1280、1002 宽度无页面级横向溢出或关键内容裁切。
- [x] 最新浏览器会话无新增业务运行错误,
prototype:pro:check与prototype:pro:build通过。 - [x] Freddy 已认可 CR-20260823-001 当前交互方向,并授权收口 PRD、Prompt、流程图和开发交付文档。
- [x] CR-20260823-001 的真实浏览器完整链路与同视口视觉复验已于 2026-08-24 完成;首轮发现的菜单层级问题修复后第二轮通过。
待决策
- 内部商品/素材字段、真实权限码、供应商 SLA/成本、MiniMax H3 与 Seedance 2.0 mini 原生编辑能力、真实投放 API 仍须独立 POC。
- Seedance 2.0 Mini 的本地服务端适配与预览页只存在于独立分支
feat/seedance-2-local-adapter(31d089d、9337f63),当前原型不调用该服务;测试前必须先轮换曾暴露的火山引擎密钥,再独立验证真实调用、计费、错误码和安全边界。 - 当前生成图片仅为原型的演示素材,不作为商品事实、真实供应商结果或可交付商业素材。
- 2026-08-14 的历史结构性重构已由 Freddy 最终验收;CR-20260821-001 的画布能力保留,默认视图与易用性由 CR-20260823-001 覆盖。当前增量已于 2026-08-24 通过三视口真实浏览器主链与两轮 Design QA,并获 Freddy 正式发布授权。
- CR-20260813-003 已完成同视口浏览器验收:首尾帧上传、成功版本冻结、子版本继承与独立替换均通过,并恢复
prototype-aligned;真实模型双帧能力、FFmpeg/TTS/ASR、供应商任务字段、字幕时间戳精度或 SLA 仍不得写成已确认生产事实。 - CR-20260818-001 当前规则:快速生成和分镜创作共用同一视频模型选择与全部 OutputProfile 控件,切换不重置;快速生成仍只确认一份可编辑中文视频脚本,分镜创作额外保留逐镜旁白/字幕/画面提示词、首尾帧、片段和版本。可见模型只是候选配置,生产能力、字幕媒体服务、字体、计费和 SLA 仍需服务端 POC。