Renew 移动端截图对照与验收
证据位置与方法
- 全量过程截图和 JSON 审计：
../suconnect_www-evidence/mobile-renew/（仓库外）。 - 最终精选截图：
docs/mobile-renew/evidence/final/。 - 自动化脚本：
scripts/mobile-visual-check.py，直接通过 Chrome CDP 设置设备尺寸、截图并采集 DOM 尺寸和交互状态，无 Playwright/Puppeteer 依赖。 - 动态数据环境：
pnpm preview:proxy，代理/api/su-code-service和/api/su-code-workflow。 - 原型图：仓库内未找到；如后续提供，应按原型 → PC 内容/入口 → 已确认移动端决策的优先级复核。
快速对照记录
| 路由范围 | 视口 | 提交 | 实际图 | 结论 | 状态 |
|---|---|---|---|---|---|
| 9 个核心路由 | 390×844 | 7e065fb 及后续验收提交 | routes-390x844.png | 汉堡导航、单列/双列降级、底部操作栏和动态数据正常 | ACCEPTED |
| 9 个核心路由 | 1024×1366 | 7e065fb 及后续验收提交 | routes-1024x1366.png | 平板布局、双列卡片、完整内容和底部操作栏正常 | ACCEPTED |
| 9 个核心路由 | 1440×900 | 7e065fb 及后续验收提交 | routes-1440x900.png | 桌面导航、MegaMenu、轮播和 PC 浮动入口正常 | ACCEPTED |
最终验收矩阵
| 类别 | 覆盖 | 状态 | 结论/证据 |
|---|---|---|---|
| 视口 | 320×568、375×812、390×844、480×900、768×1024、1024×1366、1440×900 | ACCEPTED | 63 张页面图的 scrollWidth === clientWidth，无页面级横向溢出 |
| 路由 | /、/product/、/framework/frontend.html、/framework/backend.html、/help/、/market/、/case/、/price/、/about/ | ACCEPTED | 全路由无失效图片；市场、案例和帮助中心动态内容正常加载 |
| 导航 | 1199/1200px 边界、抽屉、二级菜单、遮罩、滚动锁定 | ACCEPTED | 1199px 显示汉堡、1200px 显示桌面菜单；390px 抽屉为 390×752，二级菜单 6 个链接可见 |
| 轮播 | 分页点、切换、移动裁切、媒体实例 | ACCEPTED | 4 个分页点从索引 0 切换到 1，标题同步变化；移动端仅保留一个视频/GIF 文档流实例 |
| 卡片/复杂内容 | 列数、图片比例、内容完整性、可横向查看区域 | ACCEPTED | 手机单列、平板按模块两列；固定高度已清理，图片保持比例，动画轨道不撑宽页面 |
| 市场详情 | 动态详情、轮播、价格、联系入口 | ACCEPTED | 390px 下 ¥699 可见，底部信息块宽 390px、无溢出，联系入口保留 |
| 表单/弹窗 | 输入、关闭、Esc、遮罩、内部滚动、底部安全区 | ACCEPTED | 咨询和预约均锁定 body；Esc 与遮罩都可关闭；320px 表单和 Footer 不撑宽 |
| 咨询 | 站内无自动弹出、移动底部栏、PC 联系入口 | ACCEPTED | 移动端只保留站内操作栏；PC 自动留言板被兜底隐藏，CustomAd 单实例 |
| 关于页联系 | 手机/PC 两套语义 | ACCEPTED | 手机点击打开微信层并可 Esc 关闭；PC 点击打开预约弹窗并可 Esc 关闭 |
| PC 回归 | 1440×900 内容、入口、导航 MegaMenu | ACCEPTED | MegaMenu 面板为 1440×304，含 2 个架构链接；遮罩关闭通过 |
| 构建 | VitePress 生产构建 | ACCEPTED | pnpm build 成功，仅有既有的 chunk 体积警告 |
缺陷闭环
| ID | 描述 | 级别 | 最终状态 | 复测证据 |
|---|---|---|---|---|
| MR-D001 | PC 咨询浮窗曾重复渲染 | P1 | CLOSED | 1440px 每个路由仅 1 个 .CustomAdComponent |
| MR-D002 | 市场详情在 <=1024px 隐藏唯一价格信息 | P0 | CLOSED | 390px 详情页价格 ¥699 和联系区均为可见状态 |
| MR-D003 | 首页移动端媒体层可能重复占位 | P1 | CLOSED | slide 内占位隐藏，外置视频层单实例进入文档流 |
| MR-D004 | 移动抽屉关闭后可能错误解除弹窗滚动锁 | P1 | CLOSED | 抽屉、咨询、预约分别锁定并独立释放 body；Esc/遮罩闭环通过 |
| MR-D005 | 关于页 PC/移动端联系语义需回归 | P2 | CLOSED | 手机微信层、PC 预约弹窗分别验证通过 |
| MR-D006 | 缺少真实浏览器验收 | P1 | CLOSED | Chrome CDP 全视口、全路由和交互证据已生成 |
| MR-D007 | backdrop-filter 使固定导航抽屉高度为 0 | P0 | CLOSED | 毛玻璃下沉到 .VPNavBar .wrapper，抽屉恢复 390×752 |
| MR-D008 | 爱番番自动留言板遮挡移动/PC 内容 | P1 | CLOSED_WITH_BACKEND_ACTION | 前端兜底已隐藏自动留言板；后台仍需关闭两个自动邀请配置 |
最终结论
移动端适配在 320–1024px、导航边界 1199/1200px 和 PC 1440px 下均达到发布门禁。当前无未关闭的代码侧 P0/P1；爱番番后台配置属于发布后的运营配置核对项，不阻塞本次源码合并。
