# 10.09 新版 H5 实施与验收

更新：2026-10-12。

## 按确认项实现

- 保持 H5，无额外网页导航栏，不仿造系统/微信顶部栏。
- 登录在首页之前；复用现有协议弹层。微信网页授权链路已实现，当前内网使用本机浏览器身份，公网限制与部署见《微信登录接入与公网部署说明》。
- 首页更新口号、背景和品牌图，增加「我的报告」。修正重复入口、出镜错字。
- 我的报告独立页面，数量、日期、查看详情、空/失败状态；读取当前账号最近 5 份后端报告。
- 档案页换用新版背景和五类肤质插画，保留原选择器和校验。
- 相机轮廓与眼鼻定位虚线从 PSD 素材提取，前→右→左流程、自动抓拍、降级、语音和前后摄像头逻辑保持。
- 汇总卡合并，名称为「生物可视年龄」「紧塑力」「透亮感」「稳韧力」，不照抄设计样例中的数值。
- 七项视图分成三个独立 Tab 组：轮廓/皱纹；肤色/平滑度/水分；泛红/痘痘。使用真实检测图层或用户照片，不把设计里的模特检测图当成检测结果。
- 根据 `reference/AI测肤报告页话术修改.md` 生成新结论和护理建议。无效字段不冒充 0，无图层明确说明。
- 只显示原算法选中的一款主场精华 I / II / III，不可点击，移除「了解更多」占位入口。
- MiSans 官方原始 Web 字体本地提供，未改造字体文件；「我的报告」底部注明字体使用。

## 文档未定义部分的实施口径

话术文档没有新增计分公式或阈值，因此原六分类/三维度评分、肌龄计算不变。2026-10-12 经用户确认，精华推荐另按[肤龄基准与边界调整](产品推荐规则-肤龄版.md)实施，替代原三重判据；原始肌龄和展示肌龄在后台同时展示，历史快照不重算。旧分档「预警/改善/良好」按低/中/高顺序映射为新文案的「改善/良好/优秀」，后台同步此口径。肤色和水分拆分展示，但继续共享原 `tone` 分类的分档，**不是新增独立评分算法**。

痘痘话术按真实脓包/结节计数决定是否输出中重度皮损说明；没有计数不宣称「未检出」。当真实计数与高分模板冲突时，展示层选择可反映计数的文案，不改变原分数。

护理建议按原六分类得分选取最需要关注的两项，拼接文档对应的「护理 + 生活方式」；若命中肤色水润，分别展示肤色与水分建议，可能为三段。设计里的示例两段不作为截断真实文本的硬限制。

历史详情读取保存时的 `vm`、`presentation`、照片、图层，不用当前评分/话术重新生成历史数据。图像合成有渲染版本防护，切换报告时不会串用上一份图片。

## 验证命令

```bash
node h5/js/skin-score.js
node h5/test/regression.js
node h5/test/recommendation.js
node h5/test/accounts.js
node h5/test/report-persistence.mjs
node h5/test/wechat-browser.mjs
node h5/test/ui-20261009.mjs
node h5/test/e2e-browser.mjs
```

浏览器测试需要全局 Playwright 与 Chromium，沿用项目既有环境。`ui-20261009.mjs` 默认访问本地 8080，可用 `H5_BASE_URL` 覆盖；`report-persistence.mjs` 单独启用 18089 临时服务和临时数据目录，不写入日常报告，不调用收费 Face++。

本轮结果：评分模块自测 83 条、真值回归 86 条通过；账号隔离、恢复登录、重启持久化、最近 5 条、OAuth state 防重放/子路径检查通过；模拟上游的完整 HTTP 链路验证七张图片及文案刷新回看完全一致；三连拍与语音端到端检查通过；320/390/480px 宽度无横向溢出，浏览器无脚本异常。

截图位于 `design/ui-20261009/verification/`。这些是本地 Chromium/样本数据检查，不等于真实手机摄像头或微信公网账号验收。本轮没有触发真实 Face++ 收费请求。

## 素材再生成

```bash
python tools/export_psd_assets.py /你的路径/UI外发版10.09.psd
python tools/prepare_h5_assets.py
python tools/build_report_copy.py
```

PSD 导出依赖 psd-tools/Pillow/aggdraw；H5 裁剪与相机轮廓提取还使用 numpy/opencv-python。原始导出保留，`*-h5.jpg` 是去除原生顶栏后的衍生背景；相机几何写入 `h5/js/camera-geometry.js`。