admin 分镜布局优化 PRD

一、背景与目标

1.1 业务背景

• 分镜工具当前已支持：从文本/模板生成分镜、为分镜补齐配音与视频、合成成片等能力。
• 但现有流程对新用户不够线性，入口分散，核心问题：
  • 不清楚 「第一步应该做什么」；
  • 分镜生成后，项目级状态分散在多处；
  • B/C 辅助路径过重，干扰主流程。

1.2 产品目标

• 建立以中央创作面板 + 创作步骤引导为核心的分镜创作闭环：
  • 使用「1 根据账号方向生成主题 → 2 生成分镜 → 3 完整素材 → 4 合成 / 导出」的线性步骤，引导用户完成视频创作；
  • 在同一页面内完成「分镜生成 → 素材完善 → 合成/导出」，发布行为可在后续页面完成；
  • 用信息区域和历史时间线帮助用户对项目状态一目了然。
• 兼顾：新手的极简路径和进阶用户的高级参数/模板能力。

---

二、用户与使用场景

2.1 目标用户

• 短视频创作者、运营同学：
  • 有明确内容方向，但缺乏脚本/分镜能力；
  • 或有大量素材，希望快速拆解成分镜。
• 内容团队内部：
  • 需要反复迭代分镜版本、对比不同创意方案。

2.2 核心场景（用户故事）

• 场景 A：根据账号方向生成主题

  • 作为账号运营，我希望先基于账号方向（如「职场干货号」「情绪治愈号」）快速生成适配该账号的内容主题，并在确认后保存为项目基础信息，再进入分镜创作。

• 场景 B：从一句话描述生成完整分镜

  • 作为创作者，我只想输入几句话说明视频想讲什么，点击一次按钮，就得到一整条分镜脚本。

• 场景 C：从内容方向快速生成多个选题

  • 当我没有明确选题，只知道「想做职场科普/情绪治愈」时，希望通过一个“选题助手”快速得到 3–5 个候选视频选题，从中挑一个继续创作。

• 场景 D：从参考视频拆解分镜

  • 当我已经有一条参考视频，希望直接拖进去，让系统帮我截帧、理解画面并生成可编辑的分镜草案。

• 场景 E：项目级状态掌控与发布准备

  • 当分镜生成/编辑完成后，我希望看到：
    • 这条视频的主题、成片标题；
    • 每个分镜是否已有描述/配音/视频/参考图；
    • 项目是否已合成成片；
    • 以及一键复制可以用于发布的标题与描述。

• 场景 F：在多个分镜项目间切换与迭代

  • 我在一个“工作台”上同时维护多条不同视频项目，需要快速切换历史项目继续编辑或查看成片状态。

---

三、总体信息架构与布局

3.1 页面主布局

• 左/中：创作主区（按步骤承载）

  1. 步骤 1：主题生成区
     • 根据账号方向生成主题，展示并保存项目基础信息。
  2. 步骤 2：A 区中央创作面板（文本输入 + 选题助手 + 媒资拖拽）
  3. 步骤 3：分镜信息区 & 分镜列表区
     • 话题与标题、素材准备度、合成状态、发布文案；
     • 分镜卡片 + 分镜级操作。
  4. 步骤 4：操作按钮区（合成 / 导出）
     • 批量素材、合成、导出、智能代理等。
       （实现上：步骤 1/2/3 分别落为前端组件 StoryBoardStep1Theme、StoryBoardStep2Generate、StoryBoardStep3Storyboard，步骤 4 为合成 / 导出操作卡片。）

• 右侧：当前项目进度 + 轻量跟踪面板

  • 展示当前分镜项目的状态：素材准备度统计、合成状态、下一步建议等信息；
  • 在其下方展示「近期待完成分镜」小列表，支持一键加载最近的其他分镜项目继续编辑；
  • 完整的历史分镜项目列表迁移到上方 Tab「分镜项目中心」中管理与筛选。

3.2 上下视线流

1. 打开页面 → 视线首先落在步骤 1：主题生成区，根据账号方向生成主题，并保存为项目基础信息。
2. 主题生成成功后 → 视线自然下移到 步骤 2：A 区大输入框与主按钮，通过文本/选题/拖拽生成分镜。
3. 生成分镜后 → 下移到 步骤 3：分镜信息区 + 分镜列表，补齐素材，看项目状态与“下一步建议”。
4. 素材基本完整后 → 视线继续下移到 步骤 4：合成 / 导出操作区，执行成片合成与导出。
5. 右侧当前项目进度面板作为独立视线通道，用于掌握当前项目状态，并在必要时通过「分镜项目中心」Tab 切换项目和回看旧版本。

---

四、详细功能需求

4.1 创作步骤（Step 引导）

• 页面顶部展示线性步骤条，文案为：
  • 1 生成主题（账号方向） → 2 生成分镜 → 3 完整素材 → 4 合成 / 导出
• 状态规则：
  • 初次进入，若没有当前项目：
    • 高亮步骤 1；
  • 当主题已生成并保存（有项目基础信息 & currentStoryboardId，但无分镜）：
    • 步骤 1 显示已完成，步骤 2 高亮；
  • 有分镜但仍有分镜缺视频/配音等素材：
    • 步骤 2 显示已完成，步骤 3 高亮；
  • 素材基本完整但未合成成片：
    • 步骤 3 显示已完成，步骤 4 高亮；
  • 已有合成记录：
    • 四步均显示完成，仅保留步骤条作为进度回顾。
• 与信息区联动：
  • storyboardStats、composeStatus 驱动当前 step 与信息区“下一步建议”，保持文案与步骤一致（例如：当前在步骤 3 时提示“优先为缺视频的分镜补齐素材，再进行合成效果确认”）。

---

4.2 步骤 1：根据账号方向生成主题

4.2.1 入口与布局

• 位置
  • 位于页面顶部步骤条正下方，A 区中央创作面板之上，占据主视区上半部分。
• 结构
  • 使用卡片式布局，包含三块：
    1. 账号方向选择区（输入条件）
    2. 主题生成区（调用 LLM 生成主题草案）
    3. 主题确认与保存区（确认主题并落盘为项目基础信息）

4.2.2 表单结构与字段定义

• 账号方向选择区

  • 字段：账号方向（必填）

    • 类型：下拉选择 + 可搜索 + 可自定义输入。
    • 默认值：
      • 若当前账号有预设方向（如「职场干货号」「情绪治愈号」），默认选中主方向；
      • 否则为空，需用户选择或输入。
    • 选项来源：
      • 系统内置通用方向：
        • 「知识科普」「实用技巧」「情绪治愈」「生活记录」「职场经验」「热点跟拍」等；
      • 与具体账号绑定的「账号标签/账号定位」，由服务端返回。

  • 字段：补充说明（可选）

    • 类型：单行输入框；
    • 用于补充该账号近期要重点经营的内容，如「最近做年度盘点」「想做职场晋升专题」。

• 主题生成区

  • 字段：推荐主题列表（只读）
    • 类型：列表（1–5 条），每条包含：
      • 主题标题（主标题，必有）；
      • 主题简介（1–2 句补充说明，选填）；
      • 标签（如「系列」「栏目名」，可选）。
    • 状态：
      • 初次为空，点击「生成主题」后展示；
      • 再次生成时覆盖旧列表（或采用“刷新”策略，具体在交互稿中确定）。

• 主题确认与编辑区

  • 字段：选中主题（必选）

    • 类型：单选；
    • 用户从推荐列表中选中一条作为当前项目主题。

  • 字段：项目标题（可编辑）

    • 默认值：选中主题的标题；
    • 用户可直接在输入框内改写。

  • 字段：项目简介 / 创作意图（可编辑）

    • 默认值：选中主题的简介（若有）；
    • 用于后续在信息区展示项目的说明。

4.2.3 交互流程（含状态）

1. 初始化状态

   • 若当前没有 currentStoryboardId：
     • 步骤条高亮「1 生成主题」，下方卡片展示空态：提示「先根据账号方向生成一个创作主题」；
   • 若已有项目但缺少主题信息：
     • 预填账号方向，但推荐主题列表为空，引导用户重新生成；
   • 若已有项目且已有主题：
     • 卡片展示已保存的主题与简介，并允许编辑/重生成；
     • 步骤 1 视作「已完成」，步骤条高亮步骤 2。

2. 生成主题

   • 用户选择/确认账号方向（必需）、补充说明（可选）后，点击按钮：
     • 按钮文案：「根据账号方向生成主题」；
   • 前端构造请求 payload（示例）：
     • accountDirection：当前选中的方向名称/ID；
     • accountProfile：账号简介、过往视频数据等（由服务端补全或透传）；
     • extraHint：补充说明文本（若有）；
   • 调用后端 LLM 服务，返回若干条主题候选；
   • Loading 状态：
     • 按钮进入 loading 态；
     • 卡片下方展示「正在根据账号方向生成创作主题…」的轻提示。

3. 展示推荐主题列表

   • 请求成功：
     • 推荐列表以卡片形式展示，每条包含：标题 + 简介 + 标签；
     • 默认自动选中第一条，并同步到右侧「项目标题」「项目简介」可编辑输入框；
   • 请求失败：
     • 提示「生成主题失败，请稍后重试」；
     • 保留用户当前填写的账号方向与补充说明。

4. 用户选择 & 微调主题

   • 用户可在推荐列表中切换选中项：
     • 切换时「项目标题」「项目简介」自动更新为对应内容；
   • 用户可直接修改「项目标题」「项目简介」：
     • 修改后与列表保持“软关联”（列表仍展示原始内容，编辑区保存用户最终版本）。

5. 保存为项目基础信息

   • 按钮文案：「保存为分镜项目」（或「保存主题并进入下一步」）。
   • 点击后逻辑：
     • 若当前无项目 ID：
       • 调用「创建分镜项目」接口，写入字段：
         • title：项目标题；
         • topic_direction：账号方向；
         • brief：项目简介/创作意图；
         • 其他必要元信息（如账号 ID、空间 ID 等）；
     • 若已有项目 ID：
       • 调用「更新分镜项目」接口，仅更新上述主题相关字段。
   • 保存成功：
     • 步骤条中「1 生成主题」标记为完成（✅），高亮「2 生成分镜」；
     • 页面自动滚动/聚焦到 A 区中央创作面板；
     • 分镜信息区同步更新「话题与成片标题」初始值。
   • 保存失败：
     • 弹出错误提示（如「保存失败，请稍后重试」），并保持当前编辑内容不丢失。

4.2.4 与后续步骤的联动

• 与 步骤 2 生成分镜

  • 主题确认后，A 区文本输入的 placeholder 文案可改为基于主题的引导语，例如：
    • 「围绕主题『XXXX』，用几句话描述你想创作的视频内容」；
  • B 选题助手默认选中与主题匹配的内容方向，减少重复输入。

• 与 分镜信息区（步骤 3）

  • 主题标题同步到信息区的「话题/成片标题」字段，用户在后续步骤中仍可修改；
  • 项目简介可在信息区中作为默认的发布描述或补充说明来源。

• 与 右侧历史时间线

  • 主题生成并保存后，历史时间线中对应项目项显示该主题标题，便于后续快速识别和切换。

---

4.3 步骤 2：生成分镜（A 区——中央创作面板）

4.3.1 文本主路径（必备）

• 输入组件：
  • 大号多行输入框（行数 ≥ 7，min-height 增加），占据视觉中心；
  • 支持拖拽视频/图片文件到该区域（见 4.4 C 路径）。
• 行为：
  • 用户输入一句/几句描述视频内容，或在 B 选题助手中生成并回填文本；
  • 点击「用 AI 生成分镜」→ 调用后端 LLM → 返回分镜 JSON → 结果确认弹窗 → 勾选/编辑/应用到分镜列表。
• 校验：
  • 文本为空时，生成按钮置灰或提示填写内容。

4.3.2 B 选题助手入口（内容方向 → 选题）

• UI：
  • CTA 文案：“没灵感？💡 从内容方向推荐选题”；
  • 使用带灯泡 icon 的主色描边按钮，轻微动效突出存在感，但优先级低于主生成按钮。
• 行为：
  • 点击打开 B 弹窗（详见 4.5）；
  • 原 B 折叠从主界面移除，只在弹窗内以“高级模板模式”形式存在。

4.3.3 交互增强（与规范对齐）

• 页面加载后 A 区输入框自动聚焦（光标闪烁）；
• 提示文案支持后续扩展为从左向右渐变浮现的动态效果（当前可先实现静态版本）；
• 拖拽素材悬停时，输入框边框变为主色 #409EFF、阴影增强，并显示「松手即可上传素材」提示；
• 上传中在输入区下方显示嵌入式进度条，完成后弹出「素材解析中，稍等～」轻提示。

---

4.4 步骤 2 辅助路径：C 媒资拆解（高级参数）

4.4.1 主行为（拖拽）

• 在 A 区输入卡片上监听拖拽事件，仅处理文件：
  • 有视频文件 → 设为 videoParse.videoFile → 自动上传 → 准备截帧与解析；
  • 图片暂时提示“目前仅支持视频解析”。

4.4.2 高级参数折叠

• 折叠标题：「C 媒资拆解高级参数（可选）」，默认收起（遵循“辅助功能默认折叠策略”）。
• 功能（保持现有能力）：
  • 手动上传参考视频文件；
  • 配置截帧起止时间、间隔、尺寸；
  • 触发截帧并上传；
  • 查看帧预览；
  • 选择服务商与模型，提交帧到大模型分析；
  • 查看解析结果，支持“使用解析结果生成分镜”（填入模板基础文本并切换到 B 模式）。

---

4.5 B 选题助手弹窗（辅助生成分镜输入）

4.5.1 快速选题模式（默认视线焦点）

• 字段：
  • 内容方向：
    • 若干常用方向（知识科普 / 实用技巧 / 生活记录 / 职场经验 / 热点跟拍 / 情绪治愈）；
    • 支持自定义方向输入；
    • 默认根据步骤 1 中已选账号方向预填。
  • 目标受众（可选）：自由输入，如「职场人」「大学生」。
• 行为：
  • 点击「生成选题并进入模板流程」：
    • 将「内容方向 + 目标受众」拼成自然语言写入 promptGenForm.inputText；
    • 若当前未选模板：提示「已填入基础文本，请在下方高级模板模式中选择模板再生成」；
    • 若已有模板：调用原有 onConfirmTemplate，走模板生成 → LLM → 分镜流程。

4.5.2 高级模板模式（可选）

• UI：
  • 使用 el-collapse，标题「模板与变量（高级）」；
  • 默认展开一次，以后可根据埋点调整策略。
• 内容：
  • 模板选择（包括名称 + 账号方向）；
  • 模板内容预览（带变量高亮）；
  • 预设值列表；
  • 变量用法说明；
  • 模板变量输入 + 候选值选择；
  • 基础文本输入；
  • 「生成分镜」按钮。
• 行为：
  • 完全沿用现有模板生成逻辑与接口。

---

4.6 步骤 3：完整素材（分镜信息区 & 分镜列表）

4.6.1 分镜信息区（Storyboard Info）

• 话题与成片标题

  • 话题选择器：
    • 使用 TopicSelector，支持热门/分类/级联选择；默认基于步骤 1 生成的主题。
  • 成片标题：
    • 行内输入框 + 「复制标题」按钮；
    • 与项目元信息 storyboardMeta.title 绑定。
  • 项目 ID：
    • 使用 el-tag 显示，便于运维排查。

• 素材准备度统计

  • 统计纬度：
    • 描述：是否存在描述/台词/提示词；
    • 配音：是否存在 audioUrl / uploadResultUrl / audioPath；
    • 视频：是否存在 videoUrl / videoKey；
    • 参考图：是否存在首帧/尾帧/缩略图/首尾图 key。
  • 展示形式：
    • 四个 pill 状态，如「已写描述 10/12」「有配音 8/12」等；
    • 全部完成时 pill 变“成功”色，未完成保持灰色背景。

• 视频合成状态

  • 判定依据：
    • 项目是否已创建（有 currentStoryboardId）；
    • 是否有任一分镜视频；
    • 是否存在 compose/enhanced/ICE 成片记录。
  • 状态枚举：
    • 未创建项目 / 未合成视频 / 待合成 / 已合成；
  • 展示：
    • el-tag + 一句提示文案，例如：待合成 → 「已有分镜视频，可在下方「合成 / 导出」区域发起成片合成。」

• 发布标题与描述（可复制）

  • 字段：
    • 发布标题：复用标题输入框；
    • 发布描述：storyboardMeta.publishDesc 文本域。
  • 行为：
    • 项目保存时优先使用 publishDesc 填充项目 description；
    • 提供「复制标题」「复制描述」按钮：
      • 优先使用 navigator.clipboard.writeText；
      • 回退到 document.execCommand('copy')。

4.6.2 分镜列表（StoryBoardItem）

• 展示：
  • 2 列网格卡片，包含每个分镜的描述、台词、提示词、素材等。
• 行为：
  • 编辑、单条保存、删除、展开更多设置、应用全局主题等。
• 与步骤 3 的关系：
  • 当某一维素材不完整时，通过列表中的分镜级操作补齐；
  • 完成度提升后，信息区统计与步骤条状态随之更新。

---

4.7 步骤 4：合成 / 导出

4.7.1 操作按钮分组（与步骤对应）

• 分镜编辑（对应步骤 2）

  • 新增空分镜、排序等。

• 素材完善（对应步骤 3）

  • 批量匹配素材、批量生成首帧图、批量配音、批量应用数字人。

• 合成 / 导出（对应步骤 4）

  • 合成项目成片（含 ICE / FFmpeg 等方式）；
  • 下载分镜 JSON；
  • 导出音频、生成 SRT/字幕；
  • 所有与“成片”和“对外输出”相关的操作都归入该组。

• 智能代理/一键流程（可选）

  • 如“智能从想法到视频”的一键流程按钮，可聚合步骤 2–4 的操作。

4.7.2 成功/失败反馈

• 遵循「流程状态颜色语义化」规范：
  • 成功为绿色、失败为红色、警告为橙色；
• 合成/导出过程中提供进度与结果反馈：
  • 进行中：显示进度/状态（如「ICE 合成中…」）；
  • 完成：在信息区和历史时间线中更新项目状态为“已合成”。

---

4.8 分镜项目中心 & 历史时间线

4.8.1 基础功能

• 在「分镜项目中心」Tab 中展示当前账号下的分镜项目列表；
• 信息：标题/名称、项目状态（草稿/已合成）、最后修改时间等；
• 支持按项目状态、主题等条件筛选和部分批量操作（删除、CapCut 相关操作等）。

4.8.2 与分镜创作页的联动行为

• 在「分镜项目中心」中点击某个项目的「加载到分镜」：
  • 顶部 Tab 自动切换到「分镜」；
  • 分镜页的步骤 1–4 内容全部切换到该项目：主题生成区、中央创作面板、分镜信息区与分镜列表、合成 / 导出操作区均加载该项目数据；
• 在「分镜项目中心」中点击「发布」：
  • 同样切换到「分镜」Tab，并唤起当前项目的发布弹窗（带上最新的标题 / 描述 / 标签信息）；
• 分镜页右侧的「当前项目进度」与「近期待完成分镜」仅展示少量当前上下文信息，完整历史仍以「分镜项目中心」为权威视图。

---

五、非功能性需求

• 性能

  • A 区生成/解析流程应有明确 Loading 与错误提示；
  • 主界面首屏渲染性能优先，历史与高级参数可以懒加载。

• 可用性

  • 所有与步骤 1–2 相关的主按钮与关键信息区域需在 1366×768 分辨率下可见，无需滚动即可完成主路径（生成主题 + 生成分镜）。

• 扩展性

  • B 快速选题模式当前仅填充基础文本并复用模板生成逻辑，后续可引入专门的“选题生成接口”；
  • C 高级参数目前保留折叠形态，如实际使用率较低，可迁至独立弹窗或设置页。

---

六、后续迭代方向（Roadmap 草案）

• 短期

  • 根据埋点优化步骤 1 主题生成的默认选项与提示文案；
  • 在信息区持续优化「下一步建议」文案，使其与步骤条状态强关联。

• 中期

  • 为右侧历史时间线增加项目状态筛选、搜索；
  • 增加“项目收藏/置顶”能力。

• 长期

  • 扩展分镜级多媒体与镜头控制：配音轨道、运镜参数、画面效果等；
  • 增加整条视频的背景音乐配置与多轨时间线展示。