产品中心详情页截图对照与验收
验收方法
- 原型真值:
product-pages-html/四份只读 HTML。 - 正式页面:使用生产构建和本地预览,通过 Chrome CDP 采集真实 CSS 视口、整页截图、DOM 尺寸、失效图片和溢出元素。
- 视口:1440×900、1024×768、768×1024、430×932、390×844。
- 重绘页面不做机械像素差比;以模块完整、内容顺序一致、官网层级统一、无截断和页面级横向溢出为验收标准。
- 复杂方案图允许独立容器横向滚动,但根节点
scrollWidth必须等于视口clientWidth。 - 旧仓库外证据:
/tmp/ecosystem-products-accepted.OimE8T/对应通用卡片版式,已被 EP-V004 判定失效,不再作为当前版本视觉验收依据。 - 当前静态证据:四页解决方案、核心能力、功能特色和应用文案逐项与原型回读一致;15 张图片与原型 Base64 SHA-256 一致。
截图矩阵
| 路由 | 1440×900 | 1024×768 | 768×1024 | 430×932 | 390×844 | 结论 |
|---|---|---|---|---|---|---|
/product/ | RECHECK | RECHECK | RECHECK | RECHECK | RECHECK | 已恢复原型单页方案和能力中枢,待新截图 |
/product/ai-metrics.html | RECHECK | RECHECK | RECHECK | RECHECK | RECHECK | 已恢复方案双页轮播和指标能力中枢,待新截图 |
/product/ai-data.html | RECHECK | RECHECK | RECHECK | RECHECK | RECHECK | 已恢复方案双页轮播和数据能力中枢,待新截图 |
/product/ai-gateway.html | RECHECK | RECHECK | RECHECK | RECHECK | RECHECK | 已恢复方案双页轮播和网关能力中枢,待新截图 |
交互与可访问性
| 项目 | 预期 | 状态 | 证据 |
|---|---|---|---|
| 页内导航 | 6 个锚点可键盘聚焦,吸顶不被公告/主导航遮挡 | ACCEPTED | 组件平滑定位,懒加载前预留图片比例,落点距吸顶栏 10px |
| 方案轮播 | 多图支持分页、键盘、自动、悬停暂停;单图隐藏控件 | ACCEPTED | 箭头按最新要求移除;自动 0→1,悬停 1→1,分页点手动回 0 |
| 渐进与开门 | 标题/卡片逐项出现,复杂图由中间向两侧展开 | ACCEPTED | 卡片延迟 0、70、140…350ms;完整滚动后未 reveal 元素 0 |
| 减少动画 | prefers-reduced-motion: reduce 下不自动切换且不隐藏内容 | ACCEPTED | 轮播 0→0,motionReady=false,内容保持可见 |
| FAQ | 原生 details/summary,键盘可展开,状态可读 | ACCEPTED | 第二项从 closed 切换为 open |
| 立即咨询 | 调用官网现有预约弹窗 | ACCEPTED | 点击打开,Esc 关闭 |
| 移动底栏 | 在 <=1024px 显示,不遮挡页脚与弹层 | ACCEPTED | 390/430/768/1024 均显示,VPContent 预留 64px |
| 菜单 | 桌面 MegaMenu 和移动二级菜单均有 4 个详情页和灿途外链 | ACCEPTED | 两端均 5 个入口,外链安全属性正确 |
缺陷闭环
| ID | 描述 | 级别 | 状态 | 复测证据 |
|---|---|---|---|---|
| EP-V001 | 窄屏出现空的文档目录栏和额外顶部空白 | P1 | CLOSED | pageClass 精确隐藏产品页 VPLocalNav,390px hero 顶部为 91.875px |
| EP-V002 | 隐藏图片未预留尺寸,跨段平滑定位可因懒加载漂移 | P1 | CLOSED | 15 张图写入原始宽高,加载前后布局稳定,落点复测通过 |
| EP-V003 | 开门初始裁切为 0 宽时,可视观察与懒加载不触发 | P1 | CLOSED | 保留 2% 中缝并使用 1% 观察阈值,完整长页未 reveal 元素 0 |
| EP-V004 | 解决方案、核心能力、功能特色和应用被统一卡片化,与原型结构相反 | P1 | CODE_CLOSED_VISUAL_RECHECK | 已恢复“五步+方案图”、“四节点+中枢截图”、六层递进条和四色场景卡;生产构建通过 |
最终结论
当前版本的原型文案、图片哈希、DOM 数量与生产构建已通过;旧 5 视口截图已失效,不能代替新结构的浏览器验收。新一轮 5 视口 × 4 路由复测完成前,不将视觉状态标记为 ACCEPTED;产品能力确认项仍阻塞正式上线。

