# 07_uniapp用户端页面交互文档

## 1. 文档目标

本文档定义 uni-app 用户端的页面结构、跳转流程、页面字段、按钮动作和异常处理。

## 2. 页面路由建议

```text
/pages/index/index                         首页
/pages/case/list                           案例列表
/pages/case/detail                         案例详情
/pages/auth/login                          登录注册
/pages/project/create                      创建项目
/pages/project/theme                       选择主题
/pages/project/package                     选择套餐
/pages/project/style                       选择风格
/pages/project/world                       选择世界观
/pages/project/scene                       选择场景
/pages/project/upload                      上传照片
/pages/project/authorization               授权确认
/pages/project/photo-check                 照片质检
/pages/project/custom-info                 定制信息
/pages/project/plan                        创作方案
/pages/project/payment                     支付确认
/pages/project/preview                     预览确认
/pages/project/progress                    生成进度
/pages/project/result                      成品确认
/pages/project/revision                    修改申请
/pages/my/projects                         我的项目
/pages/my/orders                           我的订单
/pages/my/profile                          用户中心
```

## 3. 全局交互原则

1. 未登录点击制作类按钮，跳转登录页。
2. 用户返回上一步时，不删除已选数据。
3. 所有选择流程都保存到项目草稿。
4. 高成本生成动作必须二次确认。
5. 生成中页面不允许重复触发同一任务。
6. 页面异常时提供“重试”和“联系客服”。

## 4. 首页

### 数据来源

```text
GET /api/home
```

### 页面模块

- 顶部 Banner
- 热门案例横滑
- 热门主题宫格
- 热门世界观
- 套餐展示
- 制作流程
- FAQ

### 主要交互

| 操作 | 行为 |
|---|---|
| 点击开始制作 | 未登录跳登录；已登录跳创建项目 |
| 点击案例 | 跳案例详情 |
| 点击主题 | 跳主题选择，自动带入主题 |
| 点击用同款 | 登录后创建项目并带入案例模板 |

## 5. 登录页

### 支持

- 手机号验证码
- 微信授权

### 登录成功后

如果有 redirect 参数，回到之前页面；否则进入首页。

## 6. 创建项目页

### 字段

- 项目名称
- 作品用途
- 输出类型

### 按钮

- 下一步：调用 `POST /api/projects`，成功后进入主题选择页。

### 校验

- 项目名称可为空，系统自动生成。
- 输出类型必须选择。

## 7. 主题选择页

### 数据来源

```text
GET /api/life-themes
```

### 交互

- 选择主题后保存到项目。
- 下一步进入套餐选择。

### 异常

如果主题涉及未成年人，后续上传页和授权页必须增加未成年人提示。

## 8. 套餐选择页

### 数据来源

```text
GET /api/packages?theme_id=xxx
```

### 交互

- 用户选择套餐后调用保存套餐接口。
- 套餐决定后续世界数、场景数、图片数、视频时长限制。

### 显示重点

- 价格
- 图片数量
- 视频时长
- 修改次数
- 是否人工审核

## 9. 风格选择页

### 数据来源

```text
GET /api/styles?theme_id=xxx
```

### 交互

- 点击风格卡片选中。
- 点击预览案例跳案例列表并带 style_id。
- 下一步保存风格并进入世界观选择。

## 10. 世界观选择页

### 数据来源

```text
GET /api/worlds?theme_id=xxx&style_id=xxx
```

### 交互

- 用户可多选世界观。
- 选中数量受套餐限制。
- 支持拖拽排序。
- 点击世界可查看世界详情和场景预览。

### 校验

- 少于套餐最小数量，不允许下一步。
- 超过套餐最大数量，弹窗提示升级套餐。

## 11. 场景选择页

### 数据来源

```text
GET /api/worlds/:world_id/scenes
```

### 交互

- 每个世界至少选择 1 个场景。
- 可查看场景案例。
- 高级场景如果套餐不支持，提示升级。

## 12. 照片上传页

### 页面逻辑

根据 life_theme 的 person_schema 渲染上传区域。

双人主题：

- 人物 A 上传区
- 人物 B 上传区
- 双人合照上传区

单人主题：

- 本人照片上传区

家庭主题：

- 可添加家庭成员
- 每个成员独立上传

### 上传接口

```text
POST /api/projects/:id/photos
```

### 前端预检

- 文件大小
- 文件格式
- 图片数量

### 交互提示

必须用示例图告诉用户什么照片合格、什么照片不合格。

## 13. 授权确认页

### 交互

所有必选授权项勾选后，才允许下一步。

### 记录

调用：

```text
POST /api/projects/:id/authorizations
```

## 14. 照片质检页

### 触发

```text
POST /api/projects/:id/photo-check
```

### 显示

每张照片显示：

- 缩略图
- 检测状态
- 分数
- 问题原因

### 操作

- 替换照片
- 忽略 warning 继续
- 重新检测

fail 照片必须替换。

## 15. 定制信息页

### 字段

- 人物姓名
- 纪念日期
- 文案风格
- 一句话誓言
- 特别要求
- 是否显示名字
- 是否显示日期
- 是否允许公开展示

### 提交

调用：

```text
POST /api/projects/:id/custom-info
```

## 16. 创作方案页

### 触发生成

```text
POST /api/projects/:id/generate-plan
```

### 加载方式

轮询或 WebSocket 获取任务进度。

### 展示

- 标题
- 镜头列表
- 旁白
- 字幕
- 世界顺序
- 场景顺序

### 操作

- 确认方案
- 重新生成方案
- 返回修改世界/场景/文案

## 17. 支付确认页

### 显示

- 套餐价格
- 优惠金额
- 应付金额
- 生成内容说明
- 修改次数

### 交互

- 立即支付
- 使用余额
- 返回修改套餐

## 18. 预览确认页

### 展示

- 关键场景预览图
- 水印
- 人物与风格反馈按钮

### 操作

- 满意，确认预览
- 不满意，重新生成
- 返回修改模板

注意：预览重新生成要限制次数。

## 19. 生成进度页

### 数据来源

```text
GET /api/projects/:id/progress
```

或 WebSocket。

### 交互

- 显示进度条
- 显示当前步骤
- 显示已完成任务
- 失败时显示原因和联系客服入口

## 20. 成品确认页

### 展示

- 成品视频播放器
- 图集
- 下载按钮
- 修改按钮
- 公开案例授权按钮

### 操作

- 确认完成：项目 completed
- 申请修改：进入修改申请页
- 下载视频：获取签名链接
- 授权公开：创建 public_case 授权记录

## 21. 修改申请页

### 校验

- 检查剩余修改次数
- 检查修改类型是否属于套餐范围
- 大改提示重新计费

### 提交

```text
POST /api/projects/:id/revisions
```

## 22. 我的项目页

### 列表字段

- 缩略图
- 标题
- 状态
- 创建时间
- 是否可下载

### 操作

- 查看项目
- 继续制作
- 下载作品
- 申请修改
- 删除项目

## 23. 异常状态处理

| 场景 | 处理 |
|---|---|
| 网络失败 | 弹出重试按钮 |
| 登录过期 | 跳登录并保留 redirect |
| 项目状态冲突 | 刷新项目状态 |
| 支付失败 | 返回支付页 |
| 任务失败 | 显示失败原因和联系客服 |
| 无权限 | 跳首页或提示无权限 |

## 24. V3 真人动态视频页面增量

### 24.1 输出模式选择

创建项目时新增输出模式：

```text
高清写真图集
图片纪念视频
动态写真视频
AI 真人动态视频
```

选择 AI 真人动态视频时必须提示：

- 生成时间更长。
- 成本更高。
- 可能需要人工审核。
- 可能需要重试。
- 动作自然度无法 100% 保证。

### 24.2 身份锚点确认

页面展示：

- 原始参考照。
- 身份锚点图。
- 本人相似度评分。
- “像本人 / 不像本人 / 重生”按钮。

未确认锚点，不允许进入真实视频片段生成。

### 24.3 视频片段制作页

展示：

- 镜头列表。
- 动作模板。
- 输入关键帧。
- 输出视频片段。
- 预计成本。
- Provider 名称。
- 生成状态。
- 质检结果。

操作：

- 成本估算。
- 勾选真实视频确认。
- 生成片段。
- 预览片段。
- 重试片段。
- 进入合成。

### 24.4 口型任务，可选

仅高端或用户选择口型时展示：

- 选择片段。
- 选择音频。
- 生成口型。
- 失败回退旁白字幕版。