# 12 · 前端原型复盘与流程验证

> 最近一次复盘日期: 2026-04-16

## 1. 端到端用户流程

```
Dashboard (/)
  │ 点击"新建项目"
  ▼
NewProject (/new-project)
  │ 上传剧本(.txt/.doc/.docx/.pdf/.md) + 选纵横比/分辨率/风格
  │ 点击"创建项目"
  ▼
StyleSelection (/project/:id/style)
  │ 选择6种艺术风格之一
  │ 点击"继续"
  ▼
OutlineGeneration (/project/:id/outline)
  │ AI生成大纲(三幕结构+篇章) → 可编辑
  │ 点击"继续"
  ▼
EpisodeGeneration (/project/:id/episodes)
  │ AI生成分集列表(80集网格)
  │ 点击"继续生成角色设定"
  ▼
CharacterGeneration (/project/:id/characters)
  │ 角色卡 + 四视图 + 服装变体(独立角色形态)
  │ 可切Tab到场景/道具
  │ 点击"继续生成场景设定"
  ▼
SceneGeneration (/project/:id/scenes)
  │ 场景卡 + AI生成场景图
  │ 点击"继续生成道具设定"
  ▼
PropsGeneration (/project/:id/props)
  │ 道具卡 + AI生成道具图
  │ 点击"生成分镜"
  ▼
StoryboardWorkspace (/project/:id/storyboard/:episodeId)
  │ 左侧: 分集选择器
  │ 中间: 分镜列表(分镜信息区 + 视频生成区)
  │   分镜信息区: 描述、出镜角色(增删+音色)、场景(更换)、道具(增删)
  │   视频生成区: 单一提示词编辑框 + 智能体选择器 + 积分预估
  │ 右侧: 视频预览
  │ 通过顶部导航Tab切换到视频页
  ▼
VideoGeneration (/project/:id/video)
  │ 视频播放器 + 分镜时间线 + 状态网格
  │ 可返回分镜编辑
  ▼
ProjectDetail (/project/:id)
  │ 总览: 大纲/角色/分集/分镜/视频各Tab
```

## 2. 页面清单(17个)

| # | 页面 | 路由 | UI完整 | 流程衔接 | 备注 |
|---|---|---|---|---|---|
| 1 | Dashboard | `/` | ✅ | ✅→NewProject/ProjectDetail | 项目网格+统计+搜索 |
| 2 | NewProject | `/new-project` | ✅ | ✅→Style | 上传剧本+三选项 |
| 3 | StyleSelection | `/project/:id/style` | ✅ | ✅→Outline | 6种预设风格 |
| 4 | OutlineGeneration | `/project/:id/outline` | ✅ | ✅→Episodes | AI生成+可编辑 |
| 5 | EpisodeGeneration | `/project/:id/episodes` | ✅ | ✅→Characters | 分集网格 |
| 6 | CharacterGeneration | `/project/:id/characters` | ✅ | ✅→Scenes | 角色+服装变体 |
| 7 | SceneGeneration | `/project/:id/scenes` | ✅ | ✅→Props | 场景卡+AI生成 |
| 8 | PropsGeneration | `/project/:id/props` | ✅ | ✅→Storyboard | 道具卡+AI生成 |
| 9 | StoryboardWorkspace | `/project/:id/storyboard/:eid` | ✅ | ✅ TopNav | 分镜编辑+视频生成 |
| 10 | VideoGeneration | `/project/:id/video` | ✅ | ✅ 可返回 | 播放器+时间线 |
| 11 | ProjectDetail | `/project/:id` | ✅ | ✅ 多Tab | 项目总览 |
| 12 | ProjectSettings | `/project/:id/settings` | ✅ | ✅ | 团队成员+权限 |
| 13 | TeamManagement | `/team` | ✅ | ✅ | 企业团队管理 |
| 14 | UsageManagement | `/usage` | ✅ | ✅ | 用量统计+图表 |
| 15 | AssetsManagement | `/assets/*` | ✅ | ✅ | 个人/团队资产库 |
| 16 | ModelSettings | `/models` | ✅ | ✅ | 语言/图片/视频模型配置 |
| 17 | AIWatermarkSettings | `/settings` | ✅ | ✅ | 水印设置+预览 |

## 3. 设计文档对齐度

| 设计文档要求 | 原型实现 | 状态 |
|---|---|---|
| 单一提示词编辑框 | StoryboardWorkspace detailedDescription textarea | ✅ |
| 智能体选择器(通义万相/Seedance/Kling) | 底部工具栏 select | ✅ |
| 积分预估(按智能体+时长) | 生成按钮显示消耗积分 | ✅ |
| 出镜角色增删+音色选择 | 分镜信息区 characters + voice select | ✅ |
| 场景可更换 | 场景卡片 + "更换"按钮 | ✅ |
| 道具可增删 | 道具网格 + "添加"按钮 | ✅ |
| 服装变体机制 | CharacterGeneration 变体列表+创建弹窗 | ✅ |
| 角色变体格式("林若曦·白色晚礼服") | Storyboard 角色下拉已联动 | ✅ |
| 模型配置页(三类独立) | ModelSettings 语言/图片/视频 | ✅ |
| 文件上传支持 .md | NewProject accept 已添加 | ✅ |
| 模型名使用真实名称 | 全部替换为通义万相/Seedance/Kling | ✅ |
| 登录/注册页 | 缺失(M1阶段做) | ⏳ |
| 充值/订阅页 | 缺失(M7阶段做) | ⏳ |

## 4. 已修复问题

| 问题 | 修复内容 |
|---|---|
| PropsGeneration "生成分镜"按钮无导航 | 添加 navigate 跳转 storyboard/1 |
| NewProject 不支持 .md 格式 | accept 添加 .md |
| 多页面模型名使用假数据 | SceneGeneration/PropsGeneration/ProjectDetail 替换为真实模型名 |
| 角色页无服装变体机制 | 新增 CharacterVariant 数据结构+创建变体UI+管理交互 |
| 分镜页角色选择无变体联动 | 角色下拉改为"角色·变体"格式 |
| 缺少模型配置页 | 新增 ModelSettings 页(参考 AIComicBuilder) |

## 5. 技术债务(原型阶段可接受)

- 所有数据为 mock，无真实 API 调用(M0 接入)
- 拖拽排序仅引入 react-dnd 依赖，未实现拖拽逻辑
- 无表单验证提示(仅部分按钮 disabled)
- 无错误边界/Loading skeleton
- 状态管理为纯 useState，生产需迁移 Zustand + TanStack Query
- 无登录/注册页(M1)、无充值/订阅页(M7)
