AI 工作流（8 阶段管线）
用途
AI 工作流页面把概念构思、视觉设计、角色设计、场景拆解、分镜生成、视频渲染、音频合成、后期合成这 8 个生产阶段集中到一个面板，方便运营和创作者追踪整条视频生产管线的进度，并按阶段调整参数或提交新任务。
使用前准备
AI 工作流是登录后的工作台页面，需要先打开 /[locale]/ai-workflow 路由。访问者通常是项目内具有创作或运营角色的用户；管理员账号可以查看全部项目的工作流状态，普通创作者只能看到自己作为成员的剧集。进入页面时，会同时拉取项目上下文（默认 wf_8x4a 与场景生成档案）和最近一次任务的运行态，顶部会显示处理中、候选进度与算力消耗。
配图占位
- 页面：AI 工作流面板
- 状态：8 个阶段卡片网格、中央 Prompt Editor、3 KPI mini 卡和右侧抽屉占位
- 重点区域：顶部状态条、3 KPI、8 stage card、Prompt Editor、ParamsPanel 抽屉
- 脱敏要求：隐藏项目名、剧集正文、人物画面、声音内容和任务标识
操作步骤
页面分区
| 区域 | 用途 |
|---|---|
| 顶部状态条 | 显示工作流 ID、运行档案、触发时间与两个全局按钮（查看配置、新建工作流） |
| Head 区 | 项目级标题与副标题，左侧展示简介，右侧放暂停和取消按钮 |
| Status Banner | 当前任务的脉冲图标、运行/剩余时间和百分比进度 |
| 3 KPI mini 卡 | 算力消耗、队列位置、已用 Worker |
| 8 Stage 网格 | 4×2 桌面 / 2×4 平板 / 1 列移动，点击展开右侧抽屉 |
| Prompt Editor | 中央 1100px 编辑器 + 4 chip + 56px 绯红渐变提交按钮 |
8 个阶段一览
| 编号 | 阶段 | 说明 |
|---|---|---|
| 01 | 概念构思 | 从创意简报出发，提炼故事内核与情绪基调 |
| 02 | 视觉设计 | 定义整体视觉风格、色彩体系与光影氛围 |
| 03 | 角色设计 | 塑造角色形象、服装与表演特征，保持跨镜一致 |
| 04 | 场景拆解 | 将剧本拆分为可执行场景，标注空间与运镜需求 |
| 05 | 分镜生成 | 按镜头语言自动生成连续分镜与关键帧描述 |
| 06 | 视频渲染 | 调用视频模型将分镜渲染为动态影像候选 |
| 07 | 音频合成 | 生成情绪匹配的背景音乐与音效氛围 |
| 08 | 后期合成 | 剪辑、调色、字幕与最终输出封装 |
每个阶段卡片在右上角挂一个 SkillBadge，标识该阶段当前使用的官方/团队技能，例如「剧情短片」「视觉圣经生成」「Seedance 视频」。后续子任务会在 Badge 上扩展已用/未用状态颜色。
推荐操作流程
- 打开
/[locale]/ai-workflow路由，先核对顶部状态条的 workflow ID 与档案是否对应当前剧集。 - 查看 Status Banner 的脉冲颜色（黄色 = 进行中、绿色 = 已完成、红色 = 失败）与百分比，确认最近一次任务的运行节奏。
- 如需调整某个阶段，点开对应 stage card，右侧 ParamsPanel 抽屉自动滑入；抽屉内可切换模型、画面比例、分辨率、生成数量、视频时长和参考资产。
- 修改完成后点抽屉底部的「运行该阶段」按钮，提交新一轮生成；前端会更新 Status Banner 与 KPI 数值。
- 顶部「重置选择」按钮可一次性清空所有 stage card 的激活态并收起抽屉。
Prompt Editor
中央 1100px 编辑器使用 Dramagon Studio 暗色玻璃拟态，聚焦时边框渲染绯红→虹膜橙渐变。底部 4 个 chip（综合创作 / 自动 / 技能 / 引用）目前用于切换后续主代理规划的创作模式；右侧 56px 圆形提交按钮用 --dramagon-submit-grad 渐变填充并带 glow 阴影。提交后会把内容追加到 Stage 06 视频渲染的 prompt 队列，由后续子代理串联到后端生成服务。
结果与状态
- 顶部状态条展示当前工作流的 workflow ID、运行档案、触发时间和两个全局按钮（查看配置 / 新建工作流）。
- Status Banner 用脉冲色标识当前任务状态：黄色 = 进行中，绿色 = 已完成，红色 = 失败；百分比按当前阶段进度刷新。
- 3 KPI mini 卡：算力消耗（已用积分）、队列位置、已用 Worker；提交新一轮生成时立即更新。
- 8 Stage 卡片网格在 4×2 桌面 / 2×4 平板 / 1 列移动三种布局下保持点击可展开右侧 ParamsPanel 抽屉；每个 stage card 右上的 SkillBadge 标识该阶段使用的官方/团队技能。
- Prompt Editor 提交后会把提示词追加到 Stage 06 视频渲染的 prompt 队列，由后续子代理串联到后端生成服务；提交按钮的绯红渐变和 glow 阴影是显式可见状态。
权限和限制
- 该页面骨架由 Phase 1 γ 子代理落地，仅覆盖：8 stage card 网格、Prompt Editor + Toolbar + Submit、顶部状态条与 3 KPI。ParamsPanel 抽屉的实际滑入交互、5 Picker（Model/Resolution/Aspect/Count/Duration）和参考资产网格交由后续子代理补全。
- 不要直接复制
src/styles/ui-tokens-glass.css中的颜色到组件 CSS：本页所有色值必须经过--dramagon-*令牌访问；如需新增局部 token，请在 page 私有 CSS Module 内通过:root局部声明。 - 如需把工作流页面登记到顶部 Navbar 或 Sidebar 导航，请只新增导航项，不要改动现有的
src/components/Navbar.tsx内部结构。 - 顶部「重置选择」按钮会一次性清空所有 stage card 的激活态并收起抽屉，操作不会回滚已经提交到 Stage 06 prompt 队列的内容。
- 抽屉内的 5 Picker 与参考资产网格仍受当前工作流阶段所选模型的可用能力限制；不支持的能力在抽屉内显示为不可用，不应被强行启用。
常见问题
Prompt Editor 提交按钮为什么没有反应？
检查是否已选择目标剧集、Prompt Editor 内容是否为空，以及对应 stage 是否处于禁用状态；切换 draft 状态或重启任务后再次点击。
8 Stage 卡片如何区分当前激活？
每张卡片右上挂 SkillBadge 与运行状态色（脉冲色同 Status Banner），点击展开右侧 ParamsPanel 后卡片显示选中边框。
Status Banner 显示「保存失败 / 冲突」怎么办？
先刷新页面读取服务端最新状态；只有确认本地必须覆盖时才使用强制保存，避免覆盖其他人的运行结果。