From f17868233a42a171ec9b2581785cef4b9e37f4c6 Mon Sep 17 00:00:00 2001 From: xiangsilian Date: Wed, 2 Sep 2026 23:40:16 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E7=BE=8E=E6=90=AD=E9=85=8D=20v2=20+=20?= =?UTF-8?q?=E7=BE=8E=E5=AD=A6=E8=AF=8A=E6=96=AD=E9=9C=80=E6=B1=82=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=B8=8E=20UI=20=E8=A7=84=E8=8C=83=EF=BC=88=E5=8F=82?= =?UTF-8?q?=E8=80=83=E7=AB=99=E5=AF=B9=E9=BD=90=20+=20Phase=20A=20?= =?UTF-8?q?=E9=99=8D=E7=BA=A7=E8=A3=81=E5=86=B3=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/美搭配与美学诊断-UI规范.md | 211 ++++++++++++++++++++++++++++++++ docs/美搭配与美学诊断-需求v2.md | 181 +++++++++++++++++++++++++++ 2 files changed, 392 insertions(+) create mode 100644 docs/美搭配与美学诊断-UI规范.md create mode 100644 docs/美搭配与美学诊断-需求v2.md diff --git a/docs/美搭配与美学诊断-UI规范.md b/docs/美搭配与美学诊断-UI规范.md new file mode 100644 index 0000000..fe5a57c --- /dev/null +++ b/docs/美搭配与美学诊断-UI规范.md @@ -0,0 +1,211 @@ +# 美搭 —— 试衣间 v2 / 发型页 v2 / 美学诊断 UI 设计规范 + +> 版本 v1.0（2026-09-02）。范围：试衣间改版、发型页改版、美学诊断落地页与填写页（均为新增/重设计）。 +> 开发照本文执行，不再另行口头约定；与现有页面冲突处以本文为准。 +> 基线代码：core/Theme.ets、pages/HomePage.ets、pages/HairDesignPage.ets、pages/TryonPage.ets。 + +## 0. 现状勘误与落点 + +- `pages/FittingRoomPage.ets` **不存在**。试衣间现状是 `pages/TryonPage.ets`：三槽上传表单（全身照/上衣/裤子）+ 提示词 + 生成等待，非 v2 目标形态。 +- 试衣间 v2 建议新建 `pages/FittingRoomPage.ets` 承载衣橱网格形态；旧 TryonPage 在 v2 验收通过前保留，首页入口卡切换指向。 +- 发型页 v2 就地改造 `pages/HairDesignPage.ets`，保留：点按对比、人脸授权弹层（components/f2/FacePhotoConsent）、结果落盘（filesDir/results）。 +- 美学诊断两页新建：`pages/DiagnosisLandingPage.ets`、`pages/DiagnosisFormPage.ets`。 +- 滚轮选择器先例：`pages/ReportCreatePage.ets` 的 `getUIContext().showTextPickerDialog({ range, selected, canLoop:false })`，身高/体重直接复用此交互。 + +## 1. 色板 Token + +一级来源 `core/Theme.ets`，页面内禁止再散落硬编码主色；下表「新增」色仅落地页 hero 与中性灰，收口于 Theme.ets 补常量。 + +| Token | 值 | 用途 | 使用页面 | +|---|---|---|---| +| COLOR_PRIMARY（现有） | #C2185B | 主按钮、选中态、强调文字、下划线 Tab、删除外的红字错误提示沿用 | 全部 | +| COLOR_PRIMARY_SOFT（现有） | #F7E3EA | 次级按钮底、选中浅底 | 全部 | +| COLOR_TEXT_PRIMARY（现有） | #222222 | 标题/正文 | 全部 | +| COLOR_TEXT_SECONDARY（现有） | #8A9099 | 辅助说明、次级文字 | 全部 | +| COLOR_TEXT_DISABLED（新增收口） | #C2C7CE | 禁用文字、占位箭头（现散落 HomePage，收进 Theme） | 全部 | +| COLOR_PAGE_BG（新增收口） | #F5F6F8 | 页面底色（现各页各自定义，收进 Theme） | 全部 | +| COLOR_DIVIDER（新增收口） | #E5E7EB | 分隔线、chip 描边 | 全部 | +| COLOR_IMAGE_BG（新增收口） | #EDEFF3 | 图片占位底 / 未选中段底 | 试衣间、发型 | +| COLOR_BLACK_CAPSULE（新增） | #1A1A1A | 「试穿」胶囊按钮、品类 chip 选中态（黑底白字） | 试衣间 | +| COLOR_BADGE_BG（新增） | 0x99000000（黑 60% 透明） | 图上角标（模特/删除/原图|效果图）底 | 试衣间、发型 | +| COLOR_DIAG_HERO_TOP（新增） | #7C4DFF | 美学诊断落地页 hero 渐变起点 | 仅落地页 | +| COLOR_DIAG_HERO_BOTTOM（新增） | #5E35B1 | 落地页 hero 渐变终点 | 仅落地页 | +| COLOR_ERROR（新增收口） | #C0392B | 错误文案（HairDesignPage 已硬编码，收进 Theme） | 全部 | + +**裁决说明**：参考站紫调（#7C4DFF→#5E35B1）与 App 主色玫红 #C2185B 不同系。仅落地页 hero 使用独立紫渐变（与 AI 顾问紫 #6C5CE7 同为点缀系、不冲突）；落地页其余元素、CTA 按钮、其余三页一律走玫红主色，不跟紫。 + +## 2. 基础尺度（四页统一） + +- 页面左右边距 16；卡片内边距 14~16；列表/网格间距 12；同类元素组内间距 8。 +- 圆角：大卡片 16、图片卡/小卡 12、胶囊（按钮/chip）=高度一半、角标圆形。 +- 字号字重：页大标题 26 Bold；区块标题 16 Medium；正文/行标签 14 Regular；辅助/品类小字 12；角标/步骤标签 11。 +- 主按钮统一：宽 100%-32（或吸底减边距）、高 48、圆角 24、底 COLOR_PRIMARY、白字 16 Medium；禁用态底 #E5E7EB、字 #C2C7CE。 +- 图片一律 `ImageFit.Cover`；加载中占位底 COLOR_IMAGE_BG + LoadingProgress（色 COLOR_PRIMARY，36vp）。 + +## 3. 页面一：试衣间 v2（FittingRoomPage） + +``` +┌──────────────────────────────┐ +│ ‹ 返回 试衣间 │ 顶栏：白底，高48，标题17 Medium +├──────────────────────────────┤ +│ ┌──────────────────────────┐ │ 预览区：高=屏45%（≥320vp） +│ │[模特] ╲ │ │ 图片 Cover，圆角16，边距16 +│ │ ┌────┐ │ │ 左上角标「模特」：黑60%胶囊， +│ │ │试穿 │ │ │ 白字12，内边距8×12，距边12 +│ │ └────┘ │ │ 「试穿」：黑胶囊#1A1A1A 白字14， +│ │ ╱ │ │ 右缘悬浮垂直居中，距右16 +│ └──────────────────────────┘ │ 点图=生成后原图/效果切换（沿用） +├──────────────────────────────┤ +│ 我的衣橱 │ Tab 行：仅1个Tab；选中16 Medium +│ ───── │ 主色+3vp下划线(圆角2)；占位留扩展 +├──────────────────────────────┤ +│ (全部)(上衣)(下装)(连衣裙)(外套)(套装)→ │ 品类条：横向Scroll，高32 +├──────────────────────────────┤ +│ ┌────────┐ ┌────────┐ │ 双列网格：列距12 行距12 +│ │图 Cover│ │图 Cover│ [×] │ 服装卡：白底圆角12 +│ │ │ │ │ │ 图 aspectRatio 3:4 Cover +│ │名称 │ │名称 │ │ 名称13 Medium 主色文，单行截断 +│ │品类小字│ │品类小字│ │ 品类11 Secondary +│ └────────┘ └────────┘ │ 删除角标：右上20×20圆 黑60% +├──────────────────────────────┤ +│ 空态： (空衣橱插图区) │ 空态居中：图标44 Disabled色 +│ 衣橱还是空的 │ 标题14 Primary + 副文案12 Secondary +│ [ 从相册选一件衣服 ] │ 大按钮：主色 高48 圆角24 +└──────────────────────────────┘ +``` + +状态：生成中→预览区 Loading+状态文案（沿用 TryonPage 计时/挽留口径）；服装卡点击=选中试穿（描边 2vp COLOR_PRIMARY）；删除角标点击需二次确认弹窗（「移除这件衣服？」取消/移除）。 + +## 4. 页面二：发型页 v2（HairDesignPage 改造） + +``` +┌──────────────────────────────┐ +│ ‹ 返回 发型设计 │ 顶栏同上 +├──────────────────────────────┤ +│ ┌────────────┐ ┌────────────┐│ 双图区：两图等宽，高=屏40% +│ │ 原图 │ │ 效果图 ││ (≥240vp)，间距12，圆角12 +│ │[原图|效果图]│ │ ││ 左下小角标标注当前显示态： +│ └────────────┘ └────────────┘│ 黑60%胶囊白字11；点右图切换对比 +│ 相册 拍照 │ 入口文字链 12 Primary（沿用） +├──────────────────────────────┤ +│ ╭──────╮──────╮ │ 性别分段控件：容器COLOR_IMAGE_BG +│ │ 女生 │ 男生 │ │ 圆角18 内边距2；选中段主色底 +│ ╰──────╯──────╯ │ 白字圆角16，未选透明底深字13 +├──────────────────────────────┤ +│ 选择发型（点选即试戴） │ 三列网格沿用现状（不动） +│ ▣ ▣ ▣ / ▣ ▣ ▣ / ▣ ▣ ▣ │ 选中描边2vp主色（沿用） +├──────────────────────────────┤ +│ 发色 ● ● ● ● ● ● ● ● │ 8色圆点：32vp圆，名称11在点下 +│ 自然黑 深棕 栗色 蜜茶… │ 选中：外环2vp COLOR_PRIMARY +├──────────────────────────────┤ +│ 强度 ────●──────── 0.9 │ 行：标签12 Secondary+Slider+值 +├──────────────────────────────┤ +│ [ 应用发色 ] │ 吸底主按钮（白底条+顶分隔线） +└──────────────────────────────┘ +``` + +变化点：①发色由文字 chip 改为「圆点+名称」竖排小项（色值沿用 PRESET_COLORS 8 组 RGB）；②「应用发色」由滚动区内改为吸底；③无结果时发色/强度区整体隐藏（沿用），按钮禁用态见 §2。上次结果卡、三态（加载/空/失败）、人脸授权弹层全部沿用不动。 + +## 5. 页面三：美学诊断落地页（DiagnosisLandingPage） + +``` +┌──────────────────────────────┐ +│ ██████ 紫渐变 hero █████████ │ hero：#7C4DFF→#5E35B1 线性渐变 +│ │ 高=屏38%，圆角16（四周留边16） +│ 个人形象风格分析报告 │ 大标题 白 26 Bold，左上角内边距24 +│ 5 分钟，看清你的穿衣风格 │ 副标 白85% 13 +├──────────────────────────────┤ +│ 你的穿衣困扰 │ 区块标题16 Medium +│ ┌──────────────────────────┐ │ 清单卡：白底圆角12 内边距16 +│ │ ● 不知道自己适合什么风格 │ │ 5 行，行高≥40，行间8 +│ │ ● 衣柜很多衣服却不会搭 │ │ 每行：主色圆点8vp+文字14 +│ │ ● 穿显胖/显黑，不敢尝试 │ │ +│ │ ● 想改变却没有方向 │ │ +│ │ ● 每次出门搭配浪费时间 │ │ +│ └──────────────────────────┘ │ +│ 如何生成你的报告 │ 区块标题16 Medium +│ ①┄②┄③┄④ │ 横向步骤条：4步等宽 +│ 测一测 分析 生成 报告 │ 圆点28vp(当前主色底白字/未选 +│ │ IMAGE_BG底Secondary字)，连线 +│ │ 2vp #E5E7EB，标签11居中 +├──────────────────────────────┤ +│ [ 马上体验 ] │ 吸底 CTA：主色玫红（非紫）高48 +└──────────────────────────────┘ +``` + +CTA 点击 → router 跳 DiagnosisFormPage。hero 为该页专属装饰，报告页/表单页不出现紫渐变。 + +## 6. 页面四：美学诊断填写页（DiagnosisFormPage） + +``` +┌──────────────────────────────┐ +│ ‹ 返回 形象信息 │ 顶栏同上 +├──────────────────────────────┤ +│ 基本信息 │ 区块标题16 Medium，上边距16 +│ ┌──────────────────────────┐ │ 分组卡：白底圆角12 内边距16 +│ │ 性别 [男 | 女] │ │ 行高52，行间分隔线0.5vp +│ │ 出生日期 1995-06-01 ›│ 分段控件复用§4；未选占位 +│ │ 身高 165 cm ›│ 「请选择」Secondary色 +│ │ 体重 55 kg ›│ 行：标签14左，值14右+›Disabled +│ │ 职业 请输入 ›│ 文本框右对齐无边框，占位同上 +│ └──────────────────────────┘ │ +│ 信息仅用于生成你的个人报告， │ 隐私说明：11 Secondary，左对齐 +│ 不会对外展示或共享。 │ 卡下边距8 +│ │ 中部留白（后续扩展题目区） +├──────────────────────────────┤ +│ [ 下一步 ] │ 吸底主按钮：主色 高48 +└──────────────────────────────┘ +``` + +- 滚轮口径（全部复用 showTextPickerDialog，canLoop:false）：出生日期 range 为「1950~2010 年」年份单列或 YYYY-MM 串（开发定，先例一致即可）；身高 100~250 整数 cm，默认 165；体重 25~300 整数 kg，默认 55；已有值从当前值滚起（沿用 ReportCreatePage 的 clamp 写法）。 +- 校验：性别/出生日期/身高/体重必填，职业可空；缺失字段红字 12 COLOR_ERROR 行下提示 + 汇总条「请完成：…」并滚动到首个缺失项（沿用 ReportCreatePage 口径）；「下一步」全部合法后才可跳转结果流程。 + +## 7. 组件清单（新建，一律独立文件、@Component 导出） + +| 组件 | 建议文件 | 复用方 | +|---|---|---| +| CategoryChip 品类 chip | components/f2/CategoryChip.ets | 试衣间 v2 | +| ClothCard 服装卡（图+名称+品类+删除角标） | components/f2/ClothCard.ets | 试衣间 v2 | +| CapsuleButton 黑胶囊（试穿） | components/f2/CapsuleButton.ets | 试衣间 v2 | +| Segment 分段控件（两枚胶囊，参数 items/selected） | components/f2/Segment.ets | 发型页、诊断表单 | +| ColorDot 发色圆点+名称 | components/f2/ColorDot.ets | 发型页 | +| StepBar 横向步骤条 | components/f3/StepBar.ets | 诊断落地页 | +| FormRow 表单行（标签+值/控件+箭头+错误行） | components/f3/FormRow.ets | 诊断表单（ReportCreatePage 后续可迁） | + +放置依据：f2=试衣间/发型域（FacePhotoConsent 已在此），f3=报告域（诊断归报告旅程）。通用基础件（Segment、FormRow）先放域内，出现第二域复用时再上收 core/。 + +## 8. 文案表（原文照抄，开发不得改写） + +| 位置 | 文案 | +|---|---| +| 试衣间·页标题 | 试衣间 | +| 试衣间·图上角标 | 模特 | +| 试衣间·悬浮按钮 | 试穿 | +| 试衣间·Tab | 我的衣橱 | +| 试衣间·品类 chips | 全部 / 上衣 / 下装 / 连衣裙 / 外套 / 套装 | +| 试衣间·空态标题/副文/按钮 | 衣橱还是空的 / 从相册挑一件，马上试穿效果 / 从相册选一件衣服 | +| 试衣间·删除确认 | 移除这件衣服？ / 取消 / 移除 | +| 发型页·双图角标 | 原图 / 效果图 | +| 发型页·分段控件 | 女生 / 男生 | +| 发型页·区块标题 | 选择发型（点选即试戴） / 换个发色 / 强度 | +| 发型页·主按钮 | 应用发色（生成中→生成中…） | +| 发型页·图下提示 | 请使用本人照片，上传即确认不侵犯他人肖像权 | +| 落地页·大标题/副标 | 个人形象风格分析报告 / 5 分钟，看清你的穿衣风格 | +| 落地页·区块标题 | 你的穿衣困扰 / 如何生成你的报告 | +| 落地页·困扰 5 条 | 不知道自己适合什么风格 / 衣柜很多衣服却不会搭 / 穿显胖显黑，不敢尝试 / 想改变却没有方向 / 每次出门搭配浪费时间 | +| 落地页·步骤条 | 测一测 / 分析 / 生成 / 报告 | +| 落地页·CTA | 马上体验 | +| 表单页·页标题/区块 | 形象信息 / 基本信息 | +| 表单页·行标签 | 性别 / 出生日期 / 身高 / 体重 / 职业 | +| 表单页·分段 | 男 / 女；占位：请选择 / 请输入 | +| 表单页·隐私说明 | 信息仅用于生成你的个人报告，不会对外展示或共享。 | +| 表单页·主按钮 | 下一步 | +| 表单页·缺失汇总 | 请完成：性别、出生日期…（动态拼接） | + +## 9. 验收清单（逐条可勾） + +1. 四页主色唯一来源 Theme.ets；落地页外无紫色，除 #1A1A1A 胶囊外无新增散落色值。 +2. 试衣间 v2：预览区约占屏 45%、双列网格、空态引导按钮、品类条横向可滚且选中黑底白字。 +3. 发型页 v2：双图+对比、分段控件、8 色圆点+名称、强度滑杆、吸底「应用发色」；旧三态与授权弹层行为不回归。 +4. 落地页：紫渐变 hero、5 条困扰卡、4 步步骤条、吸底「马上体验」跳填写页。 +5. 填写页：分组白卡表单、三个滚轮范围正确（100-250 / 25-300 / 年份）、必填校验+汇总条+滚动定位、隐私说明可见。 diff --git a/docs/美搭配与美学诊断-需求v2.md b/docs/美搭配与美学诊断-需求v2.md new file mode 100644 index 0000000..3b2394b --- /dev/null +++ b/docs/美搭配与美学诊断-需求v2.md @@ -0,0 +1,181 @@ +# 美搭配与美学诊断 · 需求文档 v2 + +> 2026-09-02 ｜ 状态：待评审 ｜ 关联：《试衣间与发型设计-产品方案》《鸿蒙美搭-智能穿搭美学助手-产品方案》§2.1、《美学报告-需求文档》v1.2 +> 目标形态：参考站 fitting-room.huimeimeta.com H5（试衣间页 / 发型品类形态 / 美学诊断落地页 + 信息填写页）。 + +## 1. 背景与范围 + +现有 Phase A 已交付：试衣间（本人照+上衣±裤子→换装，直连 meida.xiangsilian.com/change_cloth_base64）、发型设计（面部特写→60 款试戴+8 色换色）、美学报告（六字段问卷→32 维报告）。 + +本 v2 三件事： +1. **试衣间改版**（对外名「美搭配」）：视觉与交互对齐参考站（顶部预览+试穿按钮+衣橱 Tab+品类条+双列网格）； +2. **发型设计改版**：保留现有交互，视觉对齐参考站形态； +3. **新增美学诊断**：营销落地页 + 信息填写页，复用现有报告创建链路。 + +Phase A 约束：无后端改造、无账号体系升级，全部改动在客户端。 + +## 2. 现状 vs 目标差距表 + +### 2.1 试衣间（美搭配） + +| 维度 | 现状（TryonPage v1） | 目标（v2，对齐参考站） | +|---|---|---| +| 布局 | 三张照片槽（全身照/上衣/裤子）纵排表单 | 顶部大图模特预览 + 右侧悬浮黑色「试穿」按钮 + 下方衣橱区 | +| 素材来源 | 逐张上传/拍摄 | 「我的衣橱」双列网格点选；模特位=本人照上传（拍/选） | +| 品类 | 无品类概念（固定两槽） | 品类条：全部/上衣/下装/连衣裙/外套/套装（发型不在本页） | +| Tab | 无 | 「我的衣橱｜赴宴试衣间」双 Tab | +| 模特切换 | 无 | 参考站支持左右滑切换模特；Phase A 仅本人照，**无模特库、无滑动切换**（见 §3.2） | +| 生成链路 | 不变 | 不变（接口、超时 320s、秒数等待、常亮、挽留、本机留存均沿用） | + +### 2.2 发型设计 + +| 维度 | 现状（HairDesignPage v1） | 目标（v2） | +|---|---|---| +| 布局 | 照片槽 + 男女分栏网格 + 换发色面板 | 同参考站形态：顶部预览大图 + 品类条（全部/男发/女发）+ 双列网格；换发色面板改为网格下方可展开卡片 | +| 交互 | 点选即试戴、8 色发色、强度滑杆、男女分栏（女 34/男 26） | **全部保留**，仅视觉重排 | +| 数据 | 在线拉 60 款 | 不变 | + +### 2.3 美学诊断（新增） + +| 维度 | 现状 | 目标（v2） | +|---|---|---| +| 入口 | 首页入口卡「生成我的形象报告」直达问卷页 | 入口卡改跳「美学诊断落地页」（营销态） | +| 落地页 | 无 | 紫色调静态页：主张+PROBLEM+REASON+4 步流程+3 价值卡+CTA「马上体验」 | +| 信息填写 | 无（问卷页直接六字段） | 白底「AI 美学检测」表单：性别/出生日期/身高/体重/职业 →「下一步」预填进现有问卷页 | + +## 3. Phase A 技术约束下的产品裁决 + +### 3.1 品类 → 接口工作流的降级映射（重要） + +换装接口仅支持「上衣（cloth_img，必传）+ 裤子（kuzi_img，可选且必须伴随上衣）」。参考站的 6 品类按下表**两档映射**，UI 不暴露工作流差异： + +| 品类标签 | 工作流档位 | 说明 | +|---|---|---| +| 上衣 | cloth_img | 标准档 | +| 下装 | kuzi_img | 仅可与上衣同时选中；未选上衣时点选提示「请先选择一件上衣，再搭配下装」 | +| 连衣裙 / 外套 / 套装 | **归入 cloth_img（上衣档）** | 降级声明：按单件上衣工作流处理，效果可能不完整（如下摆/成套感缺失），品类条上对这三类加「试穿效果以实际生成为准」的页面脚注 | + +选中模型：**双槽位**。上衣槽（含连衣裙/外套/套装）与下装槽各单选、可替换、可取消；「试穿」按钮可用条件=上衣槽非空。生成时按槽位组装 cloth_img/kuzi_img。 + +### 3.2 模特位：仅本人照片 + +- 「模特」=用户本人大图预览，**不做模特库、无左右滑动切换**（参考站该交互依赖内置模特素材与授权，Phase A 均无）。 +- 预览空态：占位图+「上传/拍摄你的正面全身照」按钮；点击走现有 FacePhotoConsent 流程。 +- 预览有图时：右侧悬浮「试穿」按钮（黑底白字、圆角、高约 120vp 竖条，对齐参考站）；未选上衣时按钮置灰。 + +### 3.3 我的衣橱 / 赴宴试衣间 + +- **我的衣橱**（默认 Tab）=用户本机上传的服装：元数据（品类标签、添加时间）写 preferences，图片文件落 filesDir/wardrobe/，App 卸载即清，不上传服务端。 +- **上传交互**：衣橱网格末位常驻「+ 添加」卡；点击选/拍一张 → 必选品类标签弹层（上衣/下装/连衣裙/外套/套装，五选一，默认无选中，未选不能确认）→ 存入。 +- **赴宴试衣间**=精选示例服装（内置素材）。**Phase A 无内置素材，该 Tab 直接隐藏**（不显示灰色占位）；素材管线（≥300 件 tryon_ready）就绪后再启用，启用时该 Tab 展示双列精选网格，点击行为与我的衣橱一致（点选→试穿）。 + +### 3.4 服装库 + +Phase A 无内置素材，网格唯一数据源=我的衣橱。空态：居中插画+「衣橱还是空的，拍一件你的衣服试试」+「添加第一件」按钮（点击=上传流程）。 + +### 3.5 发型页裁决 + +男女分栏（26 男/34 女）、8 色发色（自然黑/深棕/栗色/蜜茶/亚麻/酒红/奶奶灰/蓝黑）、强度滑杆（0~1，默认 0.9）、点选即试戴、换发色作用于当前结果图——交互全部保留；本次只做视觉重排对齐参考站（顶部预览+品类条+网格）。品类条「全部/男发/女发」映射现有 genderTab（全部=unknown 款两栏都显示，沿用）。 + +### 3.6 美学诊断：复用报告链路，不重复造接口 + +现有 `POST /api/v1/reports` 问卷体六字段：`gender`（女/男/不便告知）、`height_cm`（100~250）、`weight_kg`（25~300）、`birthday`（YYYY-MM-DD）、`core_goals`（六项多选，至少 1）、`psych_style`（九型单选）；提交前有配额确认框（report_basic 终身 1 次），随后 3s 轮询任务→结果页。 + +**字段映射与预填策略**： + +| 新表单字段 | 映射 | 说明 | +|---|---|---| +| 性别（男/女 二选切换） | `questionnaire.gender` | 直接映射「男/女」；「不便告知」不在新表单出现，仅原问卷页保留 | +| 出生日期 | `questionnaire.birthday` | DatePicker（1930~当天）；表单上按年月日展示并派生只读「年龄」 | +| 身高 cm | `questionnaire.height_cm` | 沿用滚轮选择器 100~250，不开放键盘 | +| 体重 KG | `questionnaire.weight_kg` | 滚轮 25~300 | +| 职业 | **Phase A 仅本地留存，不进提交体** | 后端问卷 schema 无 occupation 字段（维度字典 #4 属全面报告），无后端改造前提下不提交；存 AppStorage 供 Phase B 随 schema 扩展提交 | + +**流程**：填写页「下一步」→ `router.pushUrl('pages/ReportCreatePage')` 携带预填参数 `{gender, birthday, height_cm, weight_kg, occupation(本地)}`；ReportCreatePage 新增 aboutToAppear 读参预填对应 @State，用户在原页补齐核心诉求+心理风格后走原提交/配额确认/轮询链路。原问卷页字段与校验不删不改；从首页直达原问卷页的路径取消（入口卡改指落地页）。 + +### 3.7 合规红线（沿用，不放松） + +- 仅限本人照片：试衣间模特位、发型页照片均限本人，页面明示「仅限本人照片」； +- 人脸单独同意：上传含人脸照片前必须弹 FacePhotoConsent（服装图不涉及）； +- Phase A 不接入试衣/发型配额：无配额提示、无扣减文案，个人页配额卡保持只读； +- 结果图不落服务端库、无分享出口；本机留存沿用 filesDir/results（仅最近一次）。 + +## 4. 页面结构定义 + +### 4.1 P1 试衣间（美搭配）v2 + +| 区块（上→下） | 内容与交互 | 状态 | +|---|---|---| +| ① 顶部预览区 | 高约 45% 屏；本人全身照大图（cover 裁切）；右侧悬浮「试穿」竖按钮（黑底白字，选中 0 件上衣置灰） | 空态：浅灰底+人形占位+「上传/拍摄你的正面全身照」按钮（点击→人脸同意→拍/选）；加载中不涉及（本地图即时显示） | +| ② Tab 行 | 「我的衣橱｜赴宴试衣间」；Phase A 仅渲染我的衣橱（见 §3.3） | — | +| ③ 品类条 | 「衣服库」标题+横向滚动 chips：全部/上衣/下装/连衣裙/外套/套装；单选过滤，默认「全部」 | — | +| ④ 双列网格 | 衣橱卡片：服装图（1:1 裁切）+ 品类角标；点选=设入对应槽位（选中态描边+右上角「上衣/下装」槽位角标）；再点取消；末位「+ 添加」卡 | 空态见 §3.4；图片加载失败显示「已失效，点按删除」占位（本机文件被清时） | +| ⑤ 结果区 | 生成中：预览区覆盖层显示已等待秒数+阶段文案+「取消生成」；完成后原图/结果点按切换+「保存到相册」「再来一次」；「上次结果」卡沿用 | 失败：400 提示重拍/换图；502/503/504「服务繁忙稍后重试」；>320s 主动中止提示；均保留已选不覆盖 | +| ⑥ 高级项 | 提示词输入，默认折叠（沿用） | — | + +### 4.2 P2 发型设计 v2 + +| 区块（上→下） | 内容与交互 | 状态 | +|---|---|---| +| ① 顶部预览区 | 面部特写大图+右侧悬浮「试戴」按钮（形态同 P1）；预览下小字「仅限本人照片」 | 空态：占位+「上传/拍摄面部特写」按钮（→人脸同意）；生成中覆盖层：进度文案+秒数，失败保留当前图 | +| ② 品类条 | chips：全部/男发/女发（映射现有男女分栏） | — | +| ③ 发型网格 | 双列：缩略图+名称；点选即试戴（选中描边）；结果回填预览区，点按切换原图/结果 | 列表三态沿用：加载中骨架/空态「暂无发型」/失败+「重新加载」 | +| ④ 换发色卡片 | 网格下方可展开卡片「换发色」：8 色圆点+强度滑杆+「应用」；作用于当前结果图 | 未试戴成功前卡片置灰+引导文案「先试戴一款发型」 | + +### 4.3 P3 美学诊断落地页（新页面，纯静态） + +| 区块（上→下） | 内容 | +|---|---| +| ① 主视觉 | 紫色渐变底；主标「个人形象风格分析报告」；副标「AI 解读你的身材、色彩与风格基因」；顶部返回+标题「美学诊断」 | +| ② 穿衣困扰 PROBLEM | 标题「这些困扰你也有吗？」+ 清单卡 6 条（不知道自己适合什么风格 / 衣柜满满却没衣服穿 / 买回的衣服总穿不出效果 / 打扮了还是显老气或不够精致 / 换季搭配毫无头绪 / 不会配色显黑显胖） | +| ③ REASON | 一段式说明「问题不在长相，在于没找到属于你的形象公式」 | +| ④ 4 步流程 | 步骤条：① 身材形象分析 ② 运动形象分析 ③ 职业形象分析 ④ 专属报告编写（每步一句副文案） | +| ⑤ 三张价值卡 | 专属形象基因 / 专属风格系统 / 专属魅力衣橱（各一句说明） | +| ⑥ 底部 CTA | 通栏紫色按钮「马上体验」→ P4；CTA 上方小字「我们会保障您的个人信息安全」 | + +无任何网络请求；弱网/失败态不适用。 + +### 4.4 P4 美学诊断信息填写页（新页面） + +| 区块（上→下） | 内容与交互 | 状态 | +|---|---|---| +| ① 标题区 | 白底；「AI 美学检测」大标+「我们会保障您的个人信息安全」副标 | — | +| ② 性别 | 「男/女」两粒切换胶囊（单选必填，默认不选） | 未选提交→红字「请选择性别」 | +| ③ 出生日期 | 点击弹 DatePicker（1930~今天）；行内展示「1998-06-15（26 岁）」 | 未选提交→红字「请选择出生日期」 | +| ④ 身高 cm | 滚轮选择器 100~250 | 未选提交→红字「请选择身高」 | +| ⑤ 体重 KG | 滚轮选择器 25~300 | 未选提交→红字「请选择体重」 | +| ⑥ 职业 | 常用职业 chips 单选（学生/上班族/教师/医护/公务员/自由职业/其他）+选填 | 可不选 | +| ⑦ 底部「下一步」 | 通栏按钮；校验失败时汇总条点名缺项并滚至首个缺失字段（沿用原问卷页交互）；通过→预填跳 ReportCreatePage | 跳转失败：页内红字兜底提示 | + +说明：进入 P4 即视为同意生成报告；配额确认仍发生在 ReportCreatePage 提交前（禁止静默扣减纪律不变）。已生成过报告的用户走完流程会在提交时命中「本期报告已生成」对话框（沿用 40920 处理），落地页不做二次拦截。 + +## 5. 验收标准（可自动化判定） + +**P1 试衣间** +1. 首次进入且未上传本人照：预览区显示占位文案与上传按钮，且「试穿」按钮不可点击； +2. 衣橱上传一张图并选「连衣裙」标签：网格出现该卡，品类条切「连衣裙」可见、切「上衣」不可见； +3. 仅选下装未选上衣：「试穿」不可用且出现「请先选择一件上衣，再搭配下装」提示； +4. 选 1 件上衣+1 件下装点「试穿」：请求体 cloth_img 与 kuzi_img 均非空；仅选上衣时 kuzi_img 为空； +5. 衣橱为空（清 preferences）时显示空态文案与「添加第一件」按钮。 + +**P2 发型** +1. 列表加载完成：品类条「女发」项数=34、「男发」项数=26（±unknown 款两栏均含）； +2. 未试戴成功时「换发色」卡片置灰不可展开； +3. 试戴成功后预览区可点按切换原图/结果； +4. 照片上传前未通过人脸同意时不弹出相册/拍照选择器。 + +**P3/P4 美学诊断** +1. 落地页渲染 6 条 PROBLEM、4 步流程、3 张价值卡，CTA 点击跳转 P4； +2. P4 五项必填校验：任一未填点「下一步」，出现对应红字与汇总条且不发生路由跳转； +3. 填写「女/1998-06-15/165/52」后「下一步」：ReportCreatePage 的性别=女、生日=1998-06-15、身高=165、体重=52 已预填，核心诉求与心理风格为空待用户填写； +4. 职业任意选择不改变提交报文中 questionnaire 字段集合（无 occupation 键）。 + +## 6. 非目标（Phase B 及以后） + +1. 模特库与左右滑动切换模特； +2. 「赴宴试衣间」精选素材与该 Tab 启用； +3. 电商链接/购买入口； +4. AI 试衣配额接入与扣减、任务中心、AI 水印与内容编号、COS 转存（切 `/api/v1/tryon/*` 代理时一并做）； +5. 衣橱云端同步、多套搭配批量试穿、报告推荐搭配自动填充衣橱。 + +**文档版本**：v2.0 ｜ 2026-09-02 ｜ 作者：产品 Agent