feat: 优化 AI 修图模板与全屏预览

2026-08-13 13:48:11 +08:00
parent 60502784db
commit f2a005e008
22 changed files with 410 additions and 116 deletions
@@ -0,0 +1,76 @@
+# AI 修图完整链路设计稿 V2
+
+## 本轮调整
+
+- 第 1、2 张沿用 V1 的浅色“轻盈极光蓝”风格。
+- 第 3–6 张改为统一的黑色专业影像工作区，突出照片本身。
+- 暗色页面不做简单反色：背景、浮层、边框、文字和按钮均使用独立暗色语义层级。
+- V1 完整保留在 `../ai-retouch-v1/`，便于对比和回退。
+
+## 交付内容
+
+| 文件 | 页面 / 状态 | 风格 |
+|---|---|---|
+| `00-flow-overview-v2.png` | 六张关键屏稿总览 | 混合流程 |
+| `01-album-multi-selection.png` | 相册管理 · 已选择 4 张 | 浅色 |
+| `02-template-selection.png` | AI 修图模板选择 Sheet | 浅色 |
+| `03-template-preview-dark.png` | 模板全屏预览 | 暗色 |
+| `04-result-success-dark.png` | 精修结果 · 成功 | 暗色 |
+| `05-result-processing-dark.png` | 精修结果 · 生成中 | 暗色 |
+| `06-result-failed-dark.png` | 精修结果 · 生成失败 | 暗色 |
+
+## 暗色设计 Token
+
+- 页面背景：`#05070D`，允许向深海军蓝 `#07111F` 做非常轻微的层次过渡。
+- 抬升表面：`#111827`；边框：`#263244`。
+- 主文字：`#F8FAFC`；次文字：`#9CA3AF`；未选中标签：`#C7CED9`。
+- 品牌主色：`#1677FF`；蓝色高光：`#5CA8FF`。
+- 失败色：`#EF4444`，仅用于失败徽标、恢复入口和局部边框。
+- 图片保持明亮自然，不叠加全屏蒙层；信息区和操作区不出现白色表面。
+
+## 可复用 ImageGen 暗色编辑提示词
+
+以下提示词使用内置 ImageGen，以对应 V1 页面作为 edit target；第 3 张暗色稿确定后，也作为第 4–6 张的风格参考。
+
+### 通用暗色编辑约束
+
+```text
+Use case: precise-object-edit
+Restyle the target into a cohesive dark professional photography workspace.
+Preserve the exact iPhone portrait dimensions, photo content and crop, person identity and pose, all Chinese copy, hierarchy, controls and safe-area spacing.
+Use background #05070D, elevated surface #111827, border #263244, primary #1677FF, text #F8FAFC and secondary #9CA3AF.
+Keep the bright photo unchanged as the focal point. Use white text and SF Symbols-style white icons. Use brand blue only for selected state and primary actions.
+No white page areas, no comparison slider, no device frame, no annotations, no watermark and no additional copy.
+```
+
+### 模板预览
+
+```text
+Keep “自然通透”, “双指缩放查看细节”, the Santorini photo and “模板效果预览”. Change the lower information panel to charcoal with white heading, muted description and blue “当前已选择”. Change the complete bottom safe area to black and retain the blue “使用此模板” action.
+```
+
+### 修图结果
+
+```text
+Keep “照片预览”, “1 / 9” and the three tabs “原图 / 精修后 / 氛围感”. Use a charcoal segmented control with “精修后” selected in blue. Keep “AI已修”, the filename metadata, the photo and the result information. Change the result card and secondary actions “删除 / 刷新” to dark surfaces; keep “AI修图” blue.
+```
+
+### 处理中状态
+
+```text
+Based on the approved dark result screen, change only the badge to spinner + “修图中”. Keep the previous photo visible. Change the card to “正在生成新版本” and “当前仍展示上一版结果，完成后自动更新”, with an indeterminate shimmer line and no percentage. Disable only “AI修图”.
+```
+
+### 失败状态
+
+```text
+Based on the approved dark result screen, change only the badge to “生成失败”. Keep the previous photo visible. Use a charcoal recovery card with restrained red border, “新版本生成失败”, “上一版结果已保留，可重新修图” and “重新修图”. Keep the main “AI修图” button blue. Do not use a white or pale-red card.
+```
+
+## QA 记录
+
+- 第 1、2 张与 V1 像素级复用，没有重新生成。
+- 第 3–6 张均为 853 × 1844，暗色背景、表面、文字和操作层级一致。
+- 成功、处理中、失败三态保留同一结果标签、照片和底部操作布局。
+- 处理中无虚构百分比；失败状态有明确恢复动作；旧结果始终可见。
+- 本目录只新增设计稿与说明，未修改 UIKit、业务逻辑或 Asset Catalog。