www
8.2 KiB
Executable File
8.2 KiB
Executable File
07_uniapp用户端页面交互文档
1. 文档目标
本文档定义 uni-app 用户端的页面结构、跳转流程、页面字段、按钮动作和异常处理。
2. 页面路由建议
/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. 全局交互原则
- 未登录点击制作类按钮，跳转登录页。
- 用户返回上一步时，不删除已选数据。
- 所有选择流程都保存到项目草稿。
- 高成本生成动作必须二次确认。
- 生成中页面不允许重复触发同一任务。
- 页面异常时提供“重试”和“联系客服”。
4. 首页
数据来源
GET /api/home
页面模块
- 顶部 Banner
- 热门案例横滑
- 热门主题宫格
- 热门世界观
- 套餐展示
- 制作流程
- FAQ
主要交互
| 操作 | 行为 |
|---|---|
| 点击开始制作 | 未登录跳登录；已登录跳创建项目 |
| 点击案例 | 跳案例详情 |
| 点击主题 | 跳主题选择，自动带入主题 |
| 点击用同款 | 登录后创建项目并带入案例模板 |
5. 登录页
支持
- 手机号验证码
- 微信授权
登录成功后
如果有 redirect 参数，回到之前页面；否则进入首页。
6. 创建项目页
字段
- 项目名称
- 作品用途
- 输出类型
按钮
- 下一步：调用
POST /api/projects，成功后进入主题选择页。
校验
- 项目名称可为空，系统自动生成。
- 输出类型必须选择。
7. 主题选择页
数据来源
GET /api/life-themes
交互
- 选择主题后保存到项目。
- 下一步进入套餐选择。
异常
如果主题涉及未成年人，后续上传页和授权页必须增加未成年人提示。
8. 套餐选择页
数据来源
GET /api/packages?theme_id=xxx
交互
- 用户选择套餐后调用保存套餐接口。
- 套餐决定后续世界数、场景数、图片数、视频时长限制。
显示重点
- 价格
- 图片数量
- 视频时长
- 修改次数
- 是否人工审核
9. 风格选择页
数据来源
GET /api/styles?theme_id=xxx
交互
- 点击风格卡片选中。
- 点击预览案例跳案例列表并带 style_id。
- 下一步保存风格并进入世界观选择。
10. 世界观选择页
数据来源
GET /api/worlds?theme_id=xxx&style_id=xxx
交互
- 用户可多选世界观。
- 选中数量受套餐限制。
- 支持拖拽排序。
- 点击世界可查看世界详情和场景预览。
校验
- 少于套餐最小数量，不允许下一步。
- 超过套餐最大数量，弹窗提示升级套餐。
11. 场景选择页
数据来源
GET /api/worlds/:world_id/scenes
交互
- 每个世界至少选择 1 个场景。
- 可查看场景案例。
- 高级场景如果套餐不支持，提示升级。
12. 照片上传页
页面逻辑
根据 life_theme 的 person_schema 渲染上传区域。
双人主题：
- 人物 A 上传区
- 人物 B 上传区
- 双人合照上传区
单人主题：
- 本人照片上传区
家庭主题：
- 可添加家庭成员
- 每个成员独立上传
上传接口
POST /api/projects/:id/photos
前端预检
- 文件大小
- 文件格式
- 图片数量
交互提示
必须用示例图告诉用户什么照片合格、什么照片不合格。
13. 授权确认页
交互
所有必选授权项勾选后，才允许下一步。
记录
调用：
POST /api/projects/:id/authorizations
14. 照片质检页
触发
POST /api/projects/:id/photo-check
显示
每张照片显示：
- 缩略图
- 检测状态
- 分数
- 问题原因
操作
- 替换照片
- 忽略 warning 继续
- 重新检测
fail 照片必须替换。
15. 定制信息页
字段
- 人物姓名
- 纪念日期
- 文案风格
- 一句话誓言
- 特别要求
- 是否显示名字
- 是否显示日期
- 是否允许公开展示
提交
调用：
POST /api/projects/:id/custom-info
16. 创作方案页
触发生成
POST /api/projects/:id/generate-plan
加载方式
轮询或 WebSocket 获取任务进度。
展示
- 标题
- 镜头列表
- 旁白
- 字幕
- 世界顺序
- 场景顺序
操作
- 确认方案
- 重新生成方案
- 返回修改世界/场景/文案
17. 支付确认页
显示
- 套餐价格
- 优惠金额
- 应付金额
- 生成内容说明
- 修改次数
交互
- 立即支付
- 使用余额
- 返回修改套餐
18. 预览确认页
展示
- 关键场景预览图
- 水印
- 人物与风格反馈按钮
操作
- 满意，确认预览
- 不满意，重新生成
- 返回修改模板
注意：预览重新生成要限制次数。
19. 生成进度页
数据来源
GET /api/projects/:id/progress
或 WebSocket。
交互
- 显示进度条
- 显示当前步骤
- 显示已完成任务
- 失败时显示原因和联系客服入口
20. 成品确认页
展示
- 成品视频播放器
- 图集
- 下载按钮
- 修改按钮
- 公开案例授权按钮
操作
- 确认完成：项目 completed
- 申请修改：进入修改申请页
- 下载视频：获取签名链接
- 授权公开：创建 public_case 授权记录
21. 修改申请页
校验
- 检查剩余修改次数
- 检查修改类型是否属于套餐范围
- 大改提示重新计费
提交
POST /api/projects/:id/revisions
22. 我的项目页
列表字段
- 缩略图
- 标题
- 状态
- 创建时间
- 是否可下载
操作
- 查看项目
- 继续制作
- 下载作品
- 申请修改
- 删除项目
23. 异常状态处理
| 场景 | 处理 |
|---|---|
| 网络失败 | 弹出重试按钮 |
| 登录过期 | 跳登录并保留 redirect |
| 项目状态冲突 | 刷新项目状态 |
| 支付失败 | 返回支付页 |
| 任务失败 | 显示失败原因和联系客服 |
| 无权限 | 跳首页或提示无权限 |
24. V3 真人动态视频页面增量
24.1 输出模式选择
创建项目时新增输出模式：
高清写真图集
图片纪念视频
动态写真视频
AI 真人动态视频
选择 AI 真人动态视频时必须提示：
- 生成时间更长。
- 成本更高。
- 可能需要人工审核。
- 可能需要重试。
- 动作自然度无法 100% 保证。
24.2 身份锚点确认
页面展示：
- 原始参考照。
- 身份锚点图。
- 本人相似度评分。
- “像本人 / 不像本人 / 重生”按钮。
未确认锚点，不允许进入真实视频片段生成。
24.3 视频片段制作页
展示：
- 镜头列表。
- 动作模板。
- 输入关键帧。
- 输出视频片段。
- 预计成本。
- Provider 名称。
- 生成状态。
- 质检结果。
操作：
- 成本估算。
- 勾选真实视频确认。
- 生成片段。
- 预览片段。
- 重试片段。
- 进入合成。
24.4 口型任务，可选
仅高端或用户选择口型时展示：
- 选择片段。
- 选择音频。
- 生成口型。
- 失败回退旁白字幕版。