Initial AI manga platform

2026-06-15 17:45:28 +08:00
commit 7a8191650f
267 changed files with 105987 additions and 0 deletions
@@ -0,0 +1,479 @@
+# 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 口型任务，可选
+
+仅高端或用户选择口型时展示：
+
+- 选择片段。
+- 选择音频。
+- 生成口型。
+- 失败回退旁白字幕版。