feat(fitting): 试衣间布局 v2.1——紧凑预览 300vp+三列纯图卡+全屏查看器（设计师 Agent 出稿）
- 预览区 3:4 大图(437vp/占屏57%) → 固定 300vp + Contain 不裁切（用户要求预览变小且不裁切） - 新增 ImageViewer 全屏查看器：点预览/生成完成自动弹出；原图|效果图页签与预览角标共用 showOriginal；保存走三态口径 - 衣橱网格双列带文字行 → 三列纯图卡（104×139，品类图内左下角标），首屏可见 6 卡 vs 原 3 卡 - 试穿胶囊 52×120→44×96、品类 chips 高 32→28、角标 12→11 - 设计稿：docs/美搭配与美学诊断-UI规范.md §10（含 7 条冲突修订表与 8 条验收）
This commit is contained in:
@@ -209,3 +209,100 @@ CTA 点击 → router 跳 DiagnosisFormPage。hero 为该页专属装饰，报
|
||||
3. 发型页 v2：双图+对比、分段控件、8 色圆点+名称、强度滑杆、吸底「应用发色」；旧三态与授权弹层行为不回归。
|
||||
4. 落地页：紫渐变 hero、5 条困扰卡、4 步步骤条、吸底「马上体验」跳填写页。
|
||||
5. 填写页：分组白卡表单、三个滚轮范围正确（100-250 / 25-300 / 年份）、必填校验+汇总条+滚动定位、隐私说明可见。
|
||||
|
||||
## 10. 试衣间布局 v2.1（FittingRoomPage 紧凑预览改版）
|
||||
|
||||
> 用户诉求：①预览区（现 3:4 大图 437vp、占屏约 57%）弄小；②我的/精选衣橱区弄大；③少滚动即可浏览选衣。
|
||||
> 本节与 §3 预览区规格、§9 验收 2 冲突处**以本节为准**，其余全部沿用。逻辑屏按 360×788vp 计算。
|
||||
|
||||
### 10.1 五项裁决
|
||||
|
||||
1. **预览 vs 不裁切 = 方案 a+c+d 组合**：预览固定高 **300vp** + `ImageFit.Contain` + 底 COLOR_IMAGE_BG（人像 3:4 渲染约 225×300 居中，两侧灰边各≈51vp）。理由：试穿必须看全全身，Cover 裁切直接劣化选衣判断且用户已投诉过「被裁切」，故预览态放弃 Cover（成为 §2 全 Cover 规则的唯一例外）；小图看不全→**点图开全屏查看器**（§10.3）；**生成完成后自动弹出查看器一次**（genSeq 守卫：取消/离开/迟到失效不弹，用户关闭后不重复弹）。空态（未传本人照）预览仍 300vp，占位内容居中沿用。
|
||||
2. **网格三列、纯图卡**：列/行距 8；卡宽≈104、图 104×139（3:4 Cover）。**去掉名称与品类两行文字**（104vp 窄卡放不下、品类已可由 chips 过滤），品类改为图内左下小角标；槽位角标与删除 × 保留右上。首屏可见 ≥2 整行=6 卡（原双列带文字约 3 卡）。
|
||||
3. **生成中/结果态**：生成中覆盖层压在 300vp 预览内（黑 60%）：Loading 36 + 状态文案 12（最多 2 行）+ 秒数 16 + 「取消生成」高 28；结果操作行「保存到相册/再来一次」保留在预览下方原位不动；查看器内另设「保存到相册」主按钮。
|
||||
4. **胶囊/角标缩小**：「试穿」黑胶囊 **44×96**（原 52×120）、圆角 22、白字 14，右缘距预览右边 12、垂直居中，置灰条件沿用；「模特/效果图」角标字号 12→**11**、内边距 10×6、距边 10（对齐 §2 角标 11）。
|
||||
5. **全屏查看器**：全屏覆盖层、底 COLOR_BLACK_CAPSULE（#1A1A1A，复用不新增色值）；与页面**共用 `showOriginal` 状态**——页签、预览左上角标、图源三处同步。
|
||||
|
||||
### 10.2 整页线框（紧凑预览版）
|
||||
|
||||
```
|
||||
┌──────────────────────────────────┐ 360vp
|
||||
│ ‹ 返回 试衣间 │ 顶栏48 沿用
|
||||
├──────────────────────────────────┤
|
||||
│ ┌──────────────────────────────┐ │ 预览卡：margin16/8 高300 固定
|
||||
│ │[模特]11 ┌────┐ │ │ 底#EDEFF3 圆角16 clip
|
||||
│ │ ┌───────────┐ │试 │ │ │ 图 Contain 225×300 居中
|
||||
│ │ │ 全身完整 │ │穿 │ │ │ 两侧灰边各≈51 不裁切
|
||||
│ │ │ 不裁切 │ └────┘ │ │ 点图→全屏查看器(§10.3)
|
||||
│ │ └───────────┘ 44×96 │ │ 生成中：黑60%覆盖层
|
||||
│ └──────────────────────────────┘ │
|
||||
│ 请先选择一件上衣… / 状态/合规提示 │ 12 条件行 ≤20vp（沿用）
|
||||
├──────────────────────────────────┤
|
||||
│ 我的衣橱 精选衣橱 │ Tab32 沿用（主色3vp下划线）
|
||||
│ (全部)(上衣)(下装)(连衣裙)(外套)(套装)→│ chips高28 横滚 选中黑底白字
|
||||
├──────────────────────────────────┤
|
||||
│ ┌──────┐ ┌──────┐ ┌──────┐ │ 三列：列距8 行距8
|
||||
│ │ 图3:4 │ │ 图3:4 │[×] 图3:4 │ │ 卡宽104 图104×139 Cover
|
||||
│ │[上衣] │ │[下装] │ │ │ │ 左下品类角标(黑60%字10)
|
||||
│ └──────┘ └──────┘ └──────┘ │ 选中2vp主色描边+右上槽位角标
|
||||
│ ┌──────┐ ┌──────┐ ┌──────┐ │ 第2行 首屏完整可见
|
||||
│ │ 图 │ │ ＋ │ │ 图 │ │ 末位添加卡：＋24/添加12
|
||||
│ └──────┘ └──────┘ └──────┘ │ 底部「拍照」11 主色
|
||||
├────── ↓ 以下滚动 ↓ ───────────────┤
|
||||
│ 保存到相册 再来一次 │ 结果操作行（条件，沿用）
|
||||
│ 连衣裙、外套、套装按上衣流程… │ 脚注11＋高级提示词＋上次结果卡
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
|
||||
垂直预算（788vp）：顶栏 48 + 预览块 316（图 300+上下边距 16，占屏 40%，原 453/57%）+ 提示行 ≤20 + 滚动区 ≥404（Tab 32 + chips 36 + 网格首屏 ≥2 整行 286）。
|
||||
|
||||
### 10.3 全屏查看器线框
|
||||
|
||||
```
|
||||
┌──────────────────────────────────┐ 全屏覆盖层 底#1A1A1A
|
||||
│ × 原图 效果图 │ 顶56：×白24 距左16；页签白13
|
||||
│ ───── │ 当前=白+3vp白下划线；未选白60%
|
||||
│ │ 仅 resultUrl 非空显页签；
|
||||
│ ┌────────────┐ │ 模特态仅「×」无页签
|
||||
│ │ 原图/效果图 │ │ 图 Contain 宽100%-32 居中
|
||||
│ │ 3:4 居中 │ │ 高=顶部56与底区之外全部
|
||||
│ └────────────┘ │ 点图=切原图/效果（共用
|
||||
│ │ showOriginal，关闭后预览同步）
|
||||
│ [ 保存到相册 ] │ 主按钮 高48 圆角24 主色白字16
|
||||
│ 再来一次 │ 白13 文字链（仅结果态显示）
|
||||
└──────────────────────────────────┘
|
||||
关闭：点 × / 系统返回；保存成功回填状态文案「已保存到相册」（沿用三态口径）。
|
||||
```
|
||||
|
||||
### 10.4 尺寸与 §2/§3 冲突修订清单
|
||||
|
||||
| # | 原规则 | v2.1 修订 |
|
||||
|---|---|---|
|
||||
| 1 | §2 图片一律 ImageFit.Cover | 试衣间预览/查看器改 **Contain**（唯一例外） |
|
||||
| 2 | §2 列表/网格间距 12 | 试衣间网格列/行距 **8** |
|
||||
| 3 | §3 预览区高=屏 45% | 固定 **300vp**（含边距占屏 40%） |
|
||||
| 4 | §3 双列 3:4 卡+名称13+品类11 | **三列纯图卡**（104×139，无文字行） |
|
||||
| 5 | §3 角标白字 12、内边距 8×12、距边 12 | 字 **11**、内边距 10×6、距边 10 |
|
||||
| 6 | §3「试穿」胶囊 52×120 | **44×96** 圆角 22 |
|
||||
| 7 | §3 品类条 chips 高 32 | **28**（字 12、内边距 10×6、圆角 14） |
|
||||
|
||||
新增组件：**ImageViewer**（components/f2/ImageViewer.ets，@Component 导出；参数：imageSrc、hasResult、showOriginal 双向、onSave、onRetry、onClose）。
|
||||
|
||||
### 10.5 新增文案（逐字，其余沿用 §8）
|
||||
|
||||
| 位置 | 文案 |
|
||||
|---|---|
|
||||
| 试衣间·查看器页签 | 原图 / 效果图 |
|
||||
| 试衣间·查看器关闭 | ×（图标，无朗读文案需求，无文字） |
|
||||
| 试衣间·卡片品类角标 | 沿用品类词：上衣 / 下装 / 连衣裙 / 外套 / 套装 |
|
||||
|
||||
### 10.6 验收清单（可自动化判定）
|
||||
|
||||
1. 360×788vp 下预览块高（含上下边距）=316vp 固定；图 ImageFit.Contain、底 #EDEFF3、无裁切。
|
||||
2. 无状态提示行时，衣橱网格首屏完整可见 2 行 × 3 列（≥6 卡），Tab/chips 无需滚动。
|
||||
3. 网格 3 列、列/行距 8；服装卡无名称/品类文字行、左下品类角标；选中态 2vp #C2185B 描边+右上槽位角标；我的衣橱卡保留 20×20 删除。
|
||||
4. 点预览图弹出全屏查看器；有结果时查看器页签与预览左上角标文案一致（同一 showOriginal 状态驱动）。
|
||||
5. 生成完成自动打开查看器恰一次（取消/离开/迟到失效不弹）；查看器「保存到相册」走系统保存对话框三态口径。
|
||||
6. 「试穿」胶囊 44×96 右缘悬浮、未选上衣/生成中置灰不可点（沿用）；生成中覆盖层四要素（Loading/文案≤2行/秒数/取消）在 300vp 内完整显示。
|
||||
7. 「＋添加」卡在网格末位，含相册（点卡）与拍照（底部链接）两入口（沿用）。
|
||||
8. 除查看器底与胶囊复用 #1A1A1A 外无新增色值；§3/§9.2 与本节冲突处按本表 §10.4 执行。
|
||||
|
||||
Reference in New Issue
Block a user