65 lines
5.7 KiB
Markdown
65 lines
5.7 KiB
Markdown
# 报告布局与跟手交互调整
|
||
|
||
> 综合评分布局已按后续要求调整为标题和分数整体在圈内居中；年龄标签与数字间距为 25px。最新实现与验证见《评分圈内居中与正脸语音修复-2026-10-12.md》。本文件其余跟手交互、JPG 优化与历史发布记录保留。
|
||
|
||
## 本次范围
|
||
|
||
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，不更改服务器环境配置或历史数据；上线后核对静态文件哈希、服务健康和匿名访问保护，并通过公网执行只读模拟账号浏览器测试。
|
||
|
||
## 线上验收（2026-10-12）
|
||
|
||
- 功能提交 `63c9e06`，从服务器基线 `69dc996` 快进发布，已重启服务。`active/running`，退出码 0、自动重启次数 0，本机及公网健康检查均通过。
|
||
- 公网首页、app/swipe-track/report-ui/profile-store/capture-quality 脚本、最新 CSS、三张 JPG、扫描底图与蒙版，共 12 份静态资源均为 200，SHA-256 与本地一致，保持 `Cache-Control: no-cache`；JPG 正确返回 `image/jpeg`。
|
||
- 公网匿名会话未登录且 `no-store`；报告列表、后台页面/统计返回 401，账号私有数据及服务端源码/测试入口返回 404。
|
||
- 公网 `report-touch-layout.mjs`、`scan-placeholder.mjs`、`profile-interaction.mjs` 全部通过；覆盖此次报告布局、三组真实触摸跟手/吸附/取消/边界/上下滚动/图片放大，以及白色人头扫描完整周期、失败/取消/迟到响应和基础信息记忆/隔离。没有页面 JS 异常，不创建线上账号/报告，不调用付费检测。
|
||
- 新报告专项脚本首次使用默认 `load` 导航与 30 秒预算，在公网冷加载字体/测试素材时超时。测试改为与现有公网用例一致的 60 秒预算及 `domcontentloaded` 导航，仍等待真实报告渲染与字体加载后执行原有断言，复验通过；不改运行时代码和界面行为。
|
||
- 已检查线上报告、滑动中状态和白色人头扫描截图。震动是否实际发生仍需支持该能力的手机真机确认。
|