feat(h5): refine report layout, add finger-following tabs and optimize images

2026-10-12 22:36:44 +08:00
parent bcf198ca6f
commit 63c9e065a9
22 changed files with 2027 additions and 1535 deletions
@@ -0,0 +1,53 @@
+# 报告布局与跟手交互调整
+
+## 本次范围
+
+1. 综合评分：标题移到黄色圆环外正上方，与「生物可视年龄」同高；分数数字本身水平、垂直居中，「分」独立放在数字右侧，不把分数挤偏。
+2. 护理建议：标题左对齐，其他文案不变。
+3. 检测等待：回退实拍背景，使用原 PSD 白色人头及黄色扫描动画，不出现用户照片。保留约 1 秒一轮、成功至少播放一轮、取消/失败立即退出，以及素材失败时的文字状态和取消入口。
+4. 拍摄震动：复核现有功能。前端判断距离、居中、角度、光线等通过、进入「保持不动」时请求 `[70,40,70]` 毫秒短振；同一步抖动重试最多每两秒提醒一次，自动快门不重复震动。不支持、返回 false 或抛异常都静默跳过，不阻碍拍摄。是否实际震动仍取决于手机和浏览器，自动化不代替物理真机验证。
+5. 报告三组页签：与「日常肤质」共用轻量滑动控制器。拖动时内容随手指平移，松手按距离/速度吸附；支持短拖回弹、轻扫、首尾阻力、系统取消和旋转屏幕。保持点按/键盘切换、上下滚动、图片点按放大；拖动不误触放大。各卡片独立，容器高度跟随当前内容，非当前页签从辅助阅读/焦点导航中排除。
+6. JPG 优化：只转换在实际展示背景上可明显减小体积的三张产品图，原始 WebP、PSD 和原导出清单完整保留。背景和扫描底图仍用更小的 WebP；透明 logo、图标和蒙版保留 PNG。送检照片原本就是 JPEG，本次不二次压缩、不改变检测输入。
+
+## 资源体积
+
+| 产品 | 原始 WebP | 网页使用 JPG | JPG 质量 |
+| --- | ---: | ---: | ---: |
+| 25+ | 276,778 B | 63,959 B | 90 |
+| 35+ | 267,094 B | 66,077 B | 90 |
+| 50+ | 331,924 B | 153,787 B | 96 |
+| 合计 | 875,796 B | 283,823 B | 减少 67.6% |
+
+三张图保持 504×503，白色产品卡底色合成，渐进式 JPEG、4:4:4 色度采样，PSNR 均不低于 40dB。页面只加载实际推荐的一款。构建脚本 `tools/optimize_delivery_images.py` 可重复生成；原图/新图的 SHA-256、体积、尺寸与参数记录于 `design/ui-20261012/delivery-optimization-20261012.json`。
+
+## 验证
+
+本地 8080 服务运行后执行：
+
+```bash
+node h5/test/report-touch-layout.mjs
+node h5/test/scan-placeholder.mjs
+node h5/test/profile-interaction.mjs
+node h5/test/customer-feedback.mjs
+node h5/test/customer-feedback-second.js
+node h5/test/customer-feedback-second.mjs
+node h5/test/customer-feedback-third.mjs
+node h5/test/customer-feedback-fourth.js
+node h5/test/customer-feedback-fourth.mjs
+node h5/test/capture-quality-browser.mjs
+node h5/test/report-persistence.mjs
+node h5/test/login-performance.mjs
+node h5/test/recommendation.js
+node h5/test/regression.js
+node h5/test/customer-feedback.js
+node h5/test/profile-store.js
+node h5/test/analyze-timeout.js
+```
+
+以上均通过。覆盖五种报告宽度/六种扫描视口、真实移动端触摸拖动中位移、三组吸附与高度、纵向滚动、放大/键盘、原稿素材哈希、白色人头、扫描完整循环和失败降级、实际本地人脸模型自动三连拍、账号隔离/历史报告/前后台一致性，以及评分和推荐规则回归。
+
+慢网性能模拟：150ms 延迟、约 2Mbps 下载、4 倍 CPU 降速，测试冷启动登录约 1.68 秒，首屏资源 271,106 B；字体、人脸识别、产品和扫描图仍不竞争登录首屏。这是本地模拟测量，不等同于所有真机的公网耗时。
+
+本次未修改拍摄合格阈值、评分算法、推荐规则、报告文案、登录或保存逻辑。未追踪的 `new_feedback/` 保持原样，不纳入本次提交。
+
+发布目标为 `ubuntu@1me.xajuzi.com:/home/ubuntu/juzi`，服务 `juzi-h5.service`。沿用 Git bundle 快进同步，不代用户推送 origin，不更改服务器环境配置或历史数据；上线后核对静态文件哈希、服务健康和匿名访问保护，并通过公网执行只读模拟账号浏览器测试。
@@ -1,6 +1,8 @@
 # 报告等待页实拍背景

-原扫描页直接展示 PSD 的白色人脸占位。改为在原 PSD 人脸蒙版内叠加本次正脸照片，扫描线置于照片上方；原素材不重绘，框、检测中文字、装饰图标与取消入口不变。
+> 此文档记录上一版实现，已按后续用户要求回退：等待页不再展示用户照片，仅保留 PSD 白色人头和扫描动画。当前验证脚本为 `h5/test/scan-placeholder.mjs`。
+
+原扫描页直接展示 PSD 的白色人脸占位。上一版改为在原 PSD 人脸蒙版内叠加本次正脸照片，扫描线置于照片上方；原素材不重绘，框、检测中文字、装饰图标与取消入口不变。

 - 首张合格正脸就预解码，三张拍完使用同一张正脸，不使用最后一张侧脸或其他报告照片。
 - 与拍摄预览一样居中、等比 `cover` 铺满，不拉伸照片。前置实时拍摄保留当时的预览镜像；后置/相册/系统相机文件不额外镜像。镜像只作用于 CSS，不改变送检 JPEG。
@@ -9,13 +11,13 @@
 - 素材或蒙版加载失败时降级为实拍背景、检测中文字和取消入口；照片解码失败使用深色背景，不露出白色占位。
 - 不修改拍摄约束、评分、肌龄、推荐规则或报告保存逻辑。

-验证命令（本地服务需运行于 8080）：
+当前回退版验证命令（本地服务需运行于 8080）：

 ```bash
-node h5/test/scan-photo.mjs
+node h5/test/scan-placeholder.mjs
 node h5/test/capture-quality-browser.mjs
 node h5/test/customer-feedback-third.mjs
 node h5/test/customer-feedback-fourth.mjs
 ```

-测试只使用模拟账号、拦截分析响应，不创建线上记录、不调用付费检测。覆盖本次正脸照片、前置镜像与文件不镜像、六种视口、扫描完整循环、成功/失败/取消清理、迟到响应及素材失败降级。
+测试只使用模拟账号、拦截分析响应，不创建线上记录、不调用付费检测。当前脚本验证白色人头、不展示用户照片、六种视口、扫描完整循环、成功/失败/取消清理、迟到响应及素材失败降级。