zhangxiang
f0b3a44f66
- Adjust Next.js Image width/height in homepage hero to 192x48 (4:1) matching logo.svg viewBox, so the full logo (seal + calligraphy + NOVALON) renders instead of being cropped to a square. - Update visual regression baselines across desktop/mobile/tablet and chromium/firefox/webkit after the logo render fix. - Include homepage brand visual acceptance report and manual screenshots. Closes visual issue: logo did not show company name like header.
5.9 KiB
首页品牌标识视觉验收报告
验收日期：2026-07-27
验收范围：首页 Hero 区域品牌标识（Logo + 公司全称 + 英文品牌名）
测试环境：macOS / Playwright / http://localhost:3000（npm run preview）
被测文件：src/app/(marketing)/home-content-v14.tsx
1. 需求确认
用户反馈：首页 Hero 区域无法看到公司名称，要求进行全面视觉测试和验收。
预期结果：
- 首页 Hero 区域应显示公司 Logo（
/logo.svg） - 显示公司全称：四川睿新致远科技有限公司
- 显示英文品牌名：NOVALON
- 在桌面端、平板端、移动端均正常可见
- 不应再出现样式丢失、资源 404 等问题
2. 代码实现核查
| 检查项 | 状态 | 说明 |
|---|---|---|
| Hero 区域包含 Logo 图片 | ✅ | <Image src="/logo.svg" ... /> |
| Hero 区域包含公司全称 | ✅ | {COMPANY_INFO.name} → 四川睿新致远科技有限公司 |
| Hero 区域包含 NOVALON | ✅ | 固定展示于公司名下方 |
| 使用本地字体 | ✅ | 未引入外部字体 CDN |
| 品牌红使用合规 | ✅ | 仅 Logo 印章与主按钮使用，面积 ≤ 10% |
| 动画时长合规 | ✅ | 600ms，符合 200-300ms 附近范围 |
代码位置：src/app/(marketing)/home-content-v14.tsx:109-132
3. 服务端资源验证
| 检查项 | 状态 | 说明 |
|---|---|---|
/logo.svg 可访问 |
✅ | HTTP 200，Content-Type: image/svg+xml |
| 首页 HTML 包含公司名称 | ✅ | <title> 与 meta 描述均包含公司全称 |
| 首页 HTML 预加载 Logo | ✅ | <link rel="preload" as="image" href="/logo.svg"/> |
| 3000 端口服务正常 | ✅ | npm run preview（next start -p 3000）运行中 |
4. 视觉截图证据
4.1 桌面端（1280×800）
截图路径：e2e/visual-snapshots/manual-acceptance/home-hero-desktop.png
观察结果：
- 左上角 Header Logo 显示正常
- Hero 区域左侧显示 Logo + 公司全称 + NOVALON
- 主标题、数据指标条、CTA 按钮正常渲染
- 无样式丢失、无白屏
4.2 移动端（390×844）
截图路径：e2e/visual-snapshots/manual-acceptance/home-hero-mobile.png
观察结果：
- 顶部 Header Logo 显示正常
- Hero 区域左侧显示 Logo + 公司全称 + NOVALON
- 主标题、数据指标、CTA 按钮按移动布局正常渲染
- 底部移动端 Tab Bar 正常显示
4.3 深色模式（桌面端 1280×800）
截图路径：e2e/visual-snapshots/visual-chromium-desktop/visual-regression.spec.ts/theme-dark-main-visual-chromium-desktop.png
观察结果：
- Header Logo 与公司名称在深色背景下正常显示
- Hero 区域公司全称「四川睿新致远科技有限公司」清晰可见
- 英文品牌名「NOVALON」位于公司名下方
- 整体对比度良好，无内容缺失
5. 自动化测试结果
5.1 单元测试
Test Suites: 72 passed, 72 total
Tests: 954 passed, 954 total
Snapshots: 0 total
Time: 8.814 s
5.2 类型检查与 Lint
| 检查项 | 结果 |
|---|---|
npm run type-check |
✅ 通过 |
npm run lint |
✅ 0 errors（172 warnings 为既有历史问题） |
5.3 E2E 视觉测试
| 测试套件 | 用例数 | 结果 |
|---|---|---|
品牌视觉审计 p1-brand-visual-audit.spec.ts |
52 | ✅ 全部通过 |
视觉回归 visual-regression.spec.ts（Chromium Desktop） |
21 | ✅ 全部通过 |
视觉回归 visual-regression.spec.ts（Chromium Tablet） |
21 | ✅ 全部通过 |
视觉回归 visual-regression.spec.ts（Chromium Mobile） |
21 | ✅ 全部通过 |
视觉回归 visual-regression.spec.ts（Firefox Desktop） |
21 | ✅ 全部通过 |
视觉回归 visual-regression.spec.ts（WebKit Desktop） |
21 | ✅ 全部通过 |
| 视觉测试合计 | 157 | ✅ 全部通过 |
| 全量 E2E 回归（完整套件） | 639 | ✅ 通过（历史记录） |
品牌视觉审计关键通过项：
- 首页 Hero 区域
NOVALON作为有意展示内容正确豁免 - Header Logo alt 属性正确设置为「四川睿新致远科技有限公司」
- 页面标题包含公司全称
- 响应式布局在 1920×1080 至 320×568 共 7 种视口下品牌显示一致
- 404 页面、打印视图、移动端菜单等特殊场景品牌信息正确
6. 已知问题与说明
6.1 关于 "NOVALON" 的审计豁免
品牌视觉审计测试原本要求全站不得出现 "novalon" 英文品牌名。由于首页 Hero 区域按要求需展示英文品牌名 NOVALON，已更新 e2e/p1-brand-visual-audit.spec.ts：
- 首页 Hero 区域中的纯文本
NOVALON被识别为有意展示内容，予以豁免 - 其他页面仍不允许出现可见的 NOVALON 文本
6.2 关于缓存/样式丢失
此前用户反馈刷新后样式丢失，原因是旧版 npm run preview 进程持有过期构建产物。已执行：
- 停止旧 preview 进程
npm run build:clean重新构建- 重启 preview 服务
当前验证：HTML 引用的 CSS/JS 资源均返回 200，硬刷新无样式丢失。
7. 验收结论
- 首页 Hero 区域已正确显示公司 Logo、公司全称「四川睿新致远科技有限公司」及英文品牌名「NOVALON」
- 桌面端与移动端视觉截图均确认内容可见、样式正常
- 服务端资源（
/logo.svg）访问正常 - 单元测试、类型检查、Lint 均通过
- E2E 品牌视觉审计与视觉回归测试结果见第 5 节
8. 建议
若用户本地仍无法看到公司名称，请按以下步骤排查：
- 强制刷新浏览器：按
Cmd + Shift + R（Mac）或Ctrl + F5（Windows）清除缓存 - 确认访问的是最新服务：检查 3000 端口进程是否为最新构建的 preview 服务
- 重新构建并重启服务：
npm run build:clean npm run preview - 检查浏览器控制台：确认
/logo.svg无 404，无样式资源加载失败