记录 vibe 设计优化封版:README/CONTEXT 同步设计规范(Swiss Modernism 2.0 + Bento Box + Hero-Centric + Motion-Driven)、依赖漏洞处置结论与质量标准;新增 实施计划与用户旅程验收报告。
472 lines
32 KiB
Markdown
472 lines
32 KiB
Markdown
# Novalon Website
|
||
|
||
四川睿新致远科技有限公司官方网站 - 企业数字化转型服务商
|
||
|
||
## 项目概述
|
||
|
||
本项目是四川睿新致远科技有限公司的企业官网,采用 Next.js 16 + React 18 + TypeScript 技术栈构建,以静态生成(SSG)为主、混合渲染(SSR/ISR)为辅,提供现代化的企业展示、产品服务介绍、案例展示、新闻动态等功能。
|
||
|
||
### 核心功能
|
||
|
||
- **首页展示** - Hero 区域、核心业务、产品服务、成功案例、关于我们、新闻动态
|
||
- **服务详情** - 软件开发、云服务、数据分析、信息安全等服务详细介绍
|
||
- **产品展示** - 产品列表和详情页面
|
||
- **案例展示** - 成功案例列表和详情
|
||
- **新闻动态** - 公司新闻、产品发布、合作动态、行业资讯
|
||
- **响应式设计** - 完美适配桌面端、平板和移动设备
|
||
- **SEO 优化** - 结构化数据、元信息优化
|
||
|
||
## 项目规划
|
||
|
||
- 2026-07:完成 Bain 风格首页与详情页改版、四层级叙事组件重构
|
||
- 2026-07:完成安全加固(JWT、中间件、表单、CMS 接口)、可访问性修复
|
||
- 2026-07:完成全量测试基线建立(单元测试 705 条、E2E 618 条)与封版审查
|
||
- 2026-07:完成 CMS 数据模型扩展(locale、RBAC)、媒体管理、工作流引擎,并按页面类型全量迁移内容(基于 [docs/cms-evaluation.md](./docs/cms-evaluation.md))
|
||
- 2026-07:完成系统化测试套件实施(Phase 1-5 ✅)
|
||
- 2026-07: **封版发布 v1.0.0-phase1** — UI设计重构 ~85% / CMS化 ~75% / 全量测试 992 条通过
|
||
- 2026-08: **Phase 6 测试收尾** — ESLint 0 errors、覆盖率提升至 63.23% stmts / 78.02% branches、新增 18 个测试套件 225 条测试、全量 1217 条通过
|
||
- 2026-08: **文档同步完成** — test-strategy-plan.md 版本 1.5,已标记已实现项,保留真实缺口
|
||
- 2026-08: **迭代完成** — test-strategy-plan.md 版本 1.8,全面达标
|
||
- 120 测试套件 / 1509 条测试全部通过,ESLint 0 errors
|
||
- 覆盖率:global 73.59% stmts / 82.38% branches(全阈值达标)
|
||
- seo/ 组件覆盖率提升至 100%(新增 24 个测试,覆盖全部 7 个组件)
|
||
- analytics/ 7 组件全覆盖,新增至覆盖率监控
|
||
- 测试债务追踪板同步更新,seo 覆盖缺口已解决
|
||
- 2026-08: **封版验收完成** — test-strategy-plan.md 版本 1.9,所有待办任务完成
|
||
- 121 测试套件 / 1549 条测试全部通过,TypeScript 0 errors,ESLint 0 errors
|
||
- 覆盖率:global 73.62% stmts / 82.52% branches(全阈值达标)
|
||
- 变异测试 use-focus-trap.ts 42.62% → 85.25%(超 50% 目标)
|
||
- 调试文件清理(__debug.test.tsx 删除)
|
||
- 测试债务追踪板同步更新,变异测试缺口已解决
|
||
- 2026-08: **最终封版迭代** — test-strategy-plan.md 版本 2.0,达到封版上线标准
|
||
- 121 测试套件 / 1591 条测试全部通过,TypeScript 0 errors,ESLint 0 errors
|
||
- 变异测试 use-swipe-gesture.tsx 64.78% → 66.13%(超 65% 目标)
|
||
- 变异测试 use-reduced-motion.ts 稳定在 76.32%(超 50% 阈值)
|
||
- 修复 use-reduced-motion.ts ESLint 错误(set-state-in-effect)
|
||
- 新增 UJ-10 深度搜索者旅程(分类浏览 → 逐篇阅读 → 内容发现)
|
||
- 测试债务追踪板同步更新,UJ-10 已解决,UJ-03/06/07 标记为环境依赖
|
||
- 2026-08: **Admin 用户旅程修复完成** — test-strategy-plan.md 版本 2.1
|
||
- 修复 `loginAdminAndSetCookie` 函数,同步设置 cookie 和 localStorage 解决认证问题
|
||
- 更新 Playwright webServer 配置为 `npm run dev` 以支持 API 路由
|
||
- UJ-03/UJ-06/UJ-07 共 9 个 admin 测试在 chromium/firefox/webkit 全部通过
|
||
- 修复 UJ-10 CSS 选择器解析问题(`text=` 正则与 CSS 混用)
|
||
- 修复 cases-filter 测试 locator 不稳定问题(`getByRole('radio')` → `locator('button[role="radio"]')`)
|
||
- 200 个回归测试全部通过
|
||
- 2026-08: **封版验收完成** — 全量测试执行完毕,验收结论:**有条件通过**
|
||
- 静态质量门禁:build / type-check / lint / unit-coverage 全部通过
|
||
- E2E 功能回归:356 passed(Chromium 核心功能全部通过)
|
||
- 视觉回归:84/84 通过(5 浏览器/设备项目基线已更新)
|
||
- 移动端测试:173 passed,FCP 68ms / LCP 280ms
|
||
- Lighthouse:7 页面 4 类评分 ≥ 0.9 全部达标
|
||
- k6 负载测试:p95=7.26ms,错误率 0.28%
|
||
- k6 压力测试:p95=3.95ms,错误率 0%
|
||
- 可访问性:颜色对比度 7/7、标题层级 10/10、E2E a11y 66/66
|
||
- 安全扫描:2 moderate 依赖漏洞(已记录为已知风险)
|
||
- 已知缺陷:Firefox 兼容性(127 failed)、移动端兼容性(37 failed)
|
||
- 详细报告:`RELEASE_ACCEPTANCE_REPORT.md`
|
||
- 10 个核心用户旅程测试(UJ-01~UJ-10)全部通过
|
||
- 安全测试 18 个用例全部通过(响应头、CSP、XSS、信息泄露)
|
||
- 安全测试修复:`page.waitForRoute` 无效API、404堆栈跟踪误报
|
||
- 移动端测试修复:StaticLink 触摸事件兼容性、Next.js HMR 超时、waitUntil 策略优化
|
||
- 移动端测试 16/16 全部通过(chromium-mobile)
|
||
- 121 测试套件 / 1593 条测试全部通过
|
||
- 覆盖率:global 73.48% lines / 83.43% branches(全阈值达标)
|
||
- 功能模块覆盖率:100% (28/28)
|
||
- 测试报告:[docs/testing/test-report-2026-08-03.md](./docs/testing/test-report-2026-08-03.md)
|
||
- 2026-08: **Vibe Design 设计优化完成** — 依据 [docs/plans/2026-08-18-vibe-design-optimization-plan.md](./docs/plans/2026-08-18-vibe-design-optimization-plan.md)
|
||
- Phase 1(P0):首页 Hero 重做(产品视觉 Mockup + 单一 CTA)、产品矩阵 Bento Box(ERP 2×2 大卡 + BI 1×2 宽卡)、服务/方案非对称布局
|
||
- Phase 2(P1):首页信任层升级(数据条 + 可验证信任信号 + 首批客户共创标签)、solution 详情页补 L3 信任层(三档策略)、首页「问题→方法→结果」三幕叙事、About 页「为什么成立→怎么做事→走到哪里」故事线
|
||
- Phase 3(P2):通用 Bento 容器抽取(`bento-grid.tsx`)、列表页 hover 统一 300ms + 品牌色条反馈、无障碍收尾(focus-visible / contrast / headings)
|
||
- 质量门禁:type-check / lint(0 errors)/ unit 1616 passed / coverage 74.12% stmts / e2e fast 16 passed / visual desktop 21/21(快照已更新)/ contrast 7/7 / headings 10/10 / build 通过
|
||
- Lighthouse 待沙箱外运行(TRAE 沙箱拦截 Chrome Crashpad 目录,属环境限制)
|
||
- 2026-08: **impeccable critique 修复** — 依据 critique(31/40)修复首页 P1/P2 问题
|
||
- P1:叙事区 01/02/03 数字改 `text-text-hint`(原 `text-text-muted/20` 对 CSS 变量 hex 色不生效致 81px 近黑);Hero/信任数据去重(信任卡降级为紧凑信号卡,与 Hero 数据条分工)
|
||
- P2:空案例区「暂无案例数据」裸文本 →「共创进行时」前瞻内容块;首批共创横幅去 side-stripe(`border-l-2` → `bg-brand-bg` 全边框);叙事区脚手架精简(删冗余区块眉题);微标签统一至 12px
|
||
- P3:区块背景恢复白/灰交替;Hero 入场动效压缩(级联终点 ~1.05s,单元素 ≤0.7s)
|
||
- 验证:type-check ✅ / unit 1616 ✅ / lint 0 errors ✅ / visual desktop 21/21(快照已更新)✅
|
||
- 2026-08: **用户旅程测试封版验收** — [docs/testing/user-journey-acceptance-2026-08-18.md](./docs/testing/user-journey-acceptance-2026-08-18.md)
|
||
- UJ-01~11 共 11 组核心旅程,**61 条测试全部通过**(chromium/firefox/webkit + mobile 矩阵)
|
||
- 新增 UJ-11 首页转化旅程(设计优化专项):首屏说服→信任→叙事→转化(桌面+移动),14 条断言全部通过
|
||
- 固化复用:`npm run test:e2e:journey`(完整旅程)、`npm run test:e2e:journey:home`(UJ-11 专项)、`npm run test:e2e:fast`(快速回归)
|
||
- 作为封版验收依据
|
||
- 2026-08: **critique 二次修复** — 依据重评(26/40)修复 brand-register 视角暴露的微缺陷
|
||
- 服务区指标品牌红 → 墨色(消 8 处红点);网格 3 列 → 2×2(修复 CMS 4 卡孤岛)
|
||
- 信任区信号去重(TRUST_SIGNALS 改为 100%部署/成都本地化/全流程交付/共创,不再与 Hero 重复 2026/10+/6)
|
||
- `border-brand/15`(hex+opacity 静默失效)→ `border-[rgba(196,30,58,0.15)]`;`hover:bg-bg-white`(无效类)→ `hover:bg-bg-secondary`
|
||
- 验证:type-check ✅ / unit 1616 ✅ / lint 0 errors ✅ / visual 21/21 ✅ / UJ-11 14 passed ✅
|
||
- 2026-08: **critique 三轮封版** — 评分 31 → 26 → 34(Good),P3 代码缺陷收尾
|
||
- HeroProductVisual 加 `role="img"` + `aria-label`(读屏不再逐条朗读 14 条 KPI 噪声)
|
||
- 兜底服务补第 4 条(企业软件定制开发),`sm:grid-cols-2` 无孤儿格;修正兜底 href(/services/consulting|software|solutions)
|
||
- 全量验证:type-check ✅ / unit 1616 ✅ / lint 0 errors ✅ / visual 21/21 ✅ / UJ-11 14 passed ✅
|
||
- 2026-08: **CMS 内容层处理(封版收尾)**
|
||
- H1 由泛化的「让每一家企业都拥有数据驱动的决策能力」改为「从数据到决策,让转型可量化」(更具体、不过度承诺)
|
||
- 服务卡指标去重:consulting 10+/6 → 40%/6个月;software 6款 → A+/<4h;solutions 6行业/100% → 场景化/端到端(不再与 Hero 撞车)
|
||
- 已执行 `npm run db:seed` 生效;验证:浏览器实测 H1 与服务指标 ✅ / unit 1616 ✅ / visual 21/21 ✅ / UJ-11 14 ✅
|
||
- **封版完成**:设计优化 + 用户旅程测试 + 三轮 critique 闭环 + CMS 内容层处理全部完成
|
||
- 2026-08: **已知问题批量收尾(goal 验收)**
|
||
- P1 Hero 品牌红密度:3×63px 品牌红数字 → 仅首个品牌红,其余墨色(遵守「数据高亮 ≤2/页」)
|
||
- P2 叙事卡三层脚手架:删卡内品牌红眉题(保留 01/02/03 序列语义);修正 NARRATIVE href(strategy→consulting、solution→solutions)
|
||
- P2 Hero 入场动效:0.5-0.6s → 0.35-0.45s(级联 0.81s,符合「入场 200-300ms,禁 >700ms」单元素)
|
||
- Minor:Header CTA 补 aria-label「立即咨询」;Footer 栏目标题 h3 → div(消除标题层级跳跃)
|
||
- 验证:type-check ✅ / lint 0 errors ✅ / unit 1616 ✅ / headings 10/10 ✅ / contrast 7/7 ✅ / visual 21/21 ✅ / UJ-11 14 ✅
|
||
- Lighthouse:因 TRAE 沙箱拦截 Chrome Crashpad 目录,**环境受限**(非代码问题),需在沙箱外运行
|
||
- 2026-08: **goal 验收 · 已知问题补全**
|
||
- **依赖漏洞**:2 moderate(qs,GHSA-q8mj-m7cp-5q26)已通过 `overrides.qs=^6.15.2` 修复;**deepmerge-ts 3 high(GHSA-ggr8-5vv4-36mx,@prisma/config)已通过 `overrides.deepmerge-ts=^8.0.1` 修复**(已验证 `prisma validate/generate` 与 1616 单测全部通过,树无 invalid);剩余 6 high 均为 extract-zip(GHSA-jmr9-qjv8-65gv,经 @lhci/cli→lighthouse→puppeteer-core→@puppeteer/browsers)——该咨询覆盖全部 extract-zip 版本、无包内补丁,修复只能 breaking 降级 `@lhci/cli` 0.15→0.12 或跨大版本 `@puppeteer/browsers` 3.x(将致 `npm ci` 失效),且其触发路径(经 extract-zip 下载浏览器二进制)在本仓库因 Lighthouse 使用预装 `CHROME_PATH` 而不会执行;**`npm audit --omit=dev` 为 0 漏洞**,记录为已知 dev 风险,不影响生产运行时
|
||
- **Firefox 兼容性**:诊断确认 Chromium/WebKit 全部通过;Firefox 在 `newPage()` 运行时崩溃(`browser closed`,连 `about:blank` 也崩),属 Playwright 1.60 + macOS 环境兼容问题,**非产品代码**(历史 8-03 封版同有「Firefox 127 failed」记录)。已修 `e2e/playwright.config.ts` 为 firefox/webkit 用空 `storageState`(消除 newContext 阶段噪声)
|
||
- Lighthouse 经 HOME 重定向仍被沙箱拦截 Chrome Crashpad,确认环境硬限制
|
||
- 验证:type-check ✅ / lint 0 errors ✅ / unit 1616 ✅ / visual 21/21 ✅ / UJ-11 chromium 7 + webkit 7 ✅
|
||
- 2026-08: **官网产品模块定位决策(IHG/字节式品牌矩阵)**
|
||
- 方向:官网品牌宣传为主,产品矩阵页保留为聚合入口——每产品一句话定位 + 指标证据 + 外链独立站
|
||
- 成熟产品走 `externalUrl` 外链(NovaVis → novavis.p.novalon.cn 已实践);未成熟产品官网详情页占位,独立站上线后切换外链
|
||
- 参照案例(已核实):IHG 品牌组合页、字节跳动 bytedance.com/products、腾讯 tencent.com/business.html(模式 B:品牌+品牌矩阵聚合页);对照金蝶/用友(模式 C:产品为主,官网承载详情与转化)
|
||
- 已写入 CONTEXT.md 关键决策;Phase 1-4(机制统一 → 矩阵改造 → 全站对齐 → 信任补齐)待实施
|
||
|
||
## 项目进度
|
||
|
||
- [x] 首页/关于/产品/新闻等核心页面可访问性修复
|
||
- [x] JWT、中间件、表单、CMS 接口安全加固
|
||
|
||
- [x] WCAG 2.1 AA、标题层级、色彩对比度检查全部通过
|
||
- [x] 生成 [RELEASE_REVIEW_REPORT.md](./RELEASE_REVIEW_REPORT.md)
|
||
- [x] 修复 tsconfig 中 dist 类型文件包含规则导致的 `type-check` 失败
|
||
- [x] 校正 README 技术栈版本与 package.json 一致
|
||
- [x] 生产环境变量与 Nginx 安全头最终确认(上线前)
|
||
- [x] CMS 数据模型扩展:为 ContentItem 增加 locale 字段与唯一索引
|
||
- [x] CMS 数据模型扩展:RBAC 角色与权限中间件
|
||
- [x] CMS 内容状态机与工作流:draft/review/published/archived + AuditLog
|
||
- [x] CMS 媒体管理模块:上传、本地/S3 双写、缩略图/WebP/AVIF 派生格式
|
||
- [x] CMS 站内消息通知中心:提交/审核/归档时生成通知、未读计数、标记已读
|
||
- [x] Nginx 生产配置支持混合渲染(/api/*、/admin/* 代理 Next.js,ISR 回源)
|
||
- [x] CMS 法律页迁移:privacy/terms 从 CMS 读取内容并启用 ISR(3600s)
|
||
- [x] CMS 新闻页迁移:列表/详情从 CMS 读取并启用 ISR(3600s)
|
||
- [x] CMS 团队页迁移:/team 从 CMS 读取并启用 ISR(3600s)
|
||
- [x] CMS 案例页迁移:列表/详情从 CMS 读取并启用 ISR(3600s),保留行业过滤与指标/时间线结构
|
||
- [x] CMS 服务页迁移:列表/详情从 CMS 读取并启用 ISR(3600s),保留服务编号、色条编码、metrics 与四层叙事结构
|
||
- [x] CMS 方案页迁移:列表/详情从 CMS 读取并启用 ISR(3600s),保留行业、痛点、解决方案、价值主张、推荐产品组合与 HSI 交叉引用
|
||
- [x] CMS 产品页迁移:列表/详情/独立产品页从 CMS 读取并启用 ISR(3600s),保留四层叙事、技术规格与产品组合分类
|
||
- [x] CMS 独立产品页迁移:创建独立 `standalone-product` 内容模型,支持技术参数、合规认证等硬核字段;详情页从独立模型读取并启用 ISR(3600s)
|
||
- [x] CMS 首页运营位迁移:首页改为通过 `ContentZone` 读取 Hero、Stats、Services、Cases 等 Zone,支持后台调整 Zone 内容与排序;启用 ISR(3600s),相关模型更新时同步刷新首页
|
||
- [x] CMS 管理后台:构建角色权限管理界面(`/admin/roles`),支持角色列表、内容模型 × 操作权限矩阵配置、super_admin 锁定
|
||
- [x] CMS/RBAC/工作流测试覆盖:补充 zones/models/items/media/notifications/roles/workflow 路由与权限/状态机/数据访问单元测试;新增 `e2e/cms-workflow.spec.ts` 覆盖管理员单角色发布、非法状态拦截、多角色权限分离完整流程;新增 `e2e/storageState.json` 预置 Cookie 偏好,消除 Cookie 同意弹窗对 E2E 的遮挡;修复类型错误,单元测试 942 条、E2E 功能回归 520 条全部通过
|
||
- [x] 封版验收测试(2026-07-22):完成静态门禁、E2E 回归、视觉回归、Lighthouse、k6 负载/压力、安全扫描全量执行,修复压力测试脚本与 Next.js 16 / ESLint 9 迁移问题,`npm audit` 0 漏洞,结论更新为通过,生成 [`RELEASE_ACCEPTANCE_REPORT.md`](./RELEASE_ACCEPTANCE_REPORT.md)
|
||
- [x] 首页 UI 设计优化(2026-07-23):按 `impeccable` 默认流程完成 colorize/harden/layout/typeset/polish,落地 `home-content-v14.tsx`(克制白底 Hero、等宽三列服务卡片、紧凑案例快照、FALLBACK_SERVICES 兜底);更新 chromium desktop/tablet/mobile 视觉基线;修复 `e2e/p5-edge-cases.spec.ts` header 选择器严格模式问题;type-check / lint / unit 942 条 / 视觉 63 条 / 功能 E2E 174 条全部通过
|
||
- [x] 顶部导航栏对齐修复(2026-07-23):统一桌面端下拉项与普通链接的 wrapper 结构(`relative -mx-2 px-2 py-2`)与 `inline-flex items-center` 显示方式,修复顶部导航文字不在同一水平线的问题;同步更新 desktop/tablet/mobile/webkit/firefox 视觉基线;chromium/webkit 功能 E2E 与视觉回归全部通过
|
||
- [x] CMS / Admin 后台 dogfood 修复与回归(2026-07-25):修复登录后无限重定向、内容保存 400/500、编辑提交 status、原生 confirm 阻塞自动化、表单可访问性、标签输入、操作 Toast 反馈、后台 Cookie 横幅、媒体库空状态等 9 项问题;生成 [`dogfood-cms-regression/report.md`](./dogfood-cms-regression/report.md),19 步回归检查全部通过;type-check / lint(0 errors,172 既有 warnings)/ test:unit(71 suites / 943 tests)全部通过
|
||
- [x] 全站 dogfood 系统性深度测试(2026-07-25):覆盖营销页面与 CMS/Admin 后台,识别 12 项问题(High 3 / Medium 6 / Low 3),生成 [`dogfood-output/report.md`](./dogfood-output/report.md) 及截图/视频证据
|
||
- [x] 全站 dogfood 问题修复(2026-07-25):修复列表详情页导航、CMS 登录状态、服务详情页软 404 等 High 优先级问题;其中软 404 根因定位为 `(marketing)/loading.tsx` 形成的 Loading/Suspense 边界吞掉了动态路由 `notFound()` 抛出的 NEXT_NOT_FOUND 错误,导致未知 slug 返回 HTTP 200,已移除该 loading.tsx 并修复根 `not-found.tsx`;type-check / lint(0 errors,172 既有 warnings)/ test:unit(72 suites / 954 tests)/ 功能 E2E 140 条全部通过
|
||
- [x] dogfood 剩余问题验证与视觉基线更新(2026-07-26):浏览器实测确认主导航「产品/解决方案」下拉菜单 click/hover 均可正常展开,问题已随 `(marketing)/loading.tsx` 移除解决;同步修正 `e2e/nav-dropdown.spec.ts` 中断言文本(`睿新ERP管理系统` → `ERP 管理系统`、`行业方案` → `行业解决方案`);更新 desktop/tablet/mobile/webkit/firefox 全量视觉回归基线(105 张快照);type-check / lint(0 errors,172 既有 warnings)/ test:unit(72 suites / 954 tests)/ 下拉菜单 E2E 全部通过
|
||
- [x] 全量回归与 E2E 配置修复(2026-07-27):修复 `e2e/playwright.config.ts` 中 `storageState` 路径错误(由 `./e2e/storageState.json` 改为基于配置文件目录的绝对路径),该错误导致 firefox/webkit 全量 E2E 运行时无法读取 Cookie 偏好状态而全部失败;将 `e2e/p2-functional-e2e.spec.ts` 中「Footer 导航链接可点击」拆分为隐私政策、服务条款两个独立测试,并改用 `page.evaluate` 直接触发点击,避免 Firefox 中连续全页导航与 Playwright locator 评估的竞态超时;重新执行全量回归:type-check / lint(0 errors,172 既有 warnings)/ test:unit(72 suites / 954 tests)/ E2E 全量(631 passed / 8 skipped / 0 failed,含视觉回归、CMS 工作流)全部通过
|
||
- [x] 联系表单 conversion 去重与首页 Hero 品牌标识补齐(2026-07-27):移除 `contact-content-v3.tsx` 中冗余的 `trackConversion('contact_form_submission')` 调用,改为 `trackContactForm(..., true)`,避免一次成功提交在 GA4 中被计为两次转化;同步更新 `contact-content-v3.test.tsx` 中断言;在 `home-content-v14.tsx` 首页 Hero 主标题上方增加 Logo + 公司中文名 + NOVALON 英文品牌标识,补齐截图中缺失的品牌信息;更新首页相关 desktop/tablet/mobile 视觉回归基线;type-check / lint(0 errors,172 既有 warnings)/ 相关 unit 测试全部通过
|
||
- [x] 系统化测试套件实施(2026-07-31):Phase 1-5 全部完成 ✅
|
||
- [x] Phase 1:E2E 分层测试框架(@smoke/@critical/@regression/@journey/@mobile/@analytics 标签体系)、Stryker 变异测试(utils.ts 91.18%)、Allure 报告集成
|
||
- [x] Phase 2:单元测试覆盖率达标(Branches 75.61%, Lines 50.82%, 72 suites / 992 tests),API Routes 集成测试(11 个文件)
|
||
- [x] Phase 3:用户旅程测试(UJ-01/UJ-02)、移动端专项 E2E 测试(16 个用例)、GA4 事件追踪测试(4 个用例)、k6 压力测试脚本修复与验证(91285 次迭代,0 错误)、安全扫描脚本(7 项安全响应头检查)
|
||
- [x] Phase 4:Jenkinsfile 集成 E2E/视觉回归/安全扫描阶段、全量变异测试(整体 36.98%)、test:all 门禁脚本、安全头扫描脚本
|
||
- [x] Phase 5:k6 压力测试实际运行验证(14 分钟,300 并发峰值,91285 次迭代,0 错误率)、变异测试覆盖率提升(use-focus-trap 49.18%, use-swipe-gesture 33.06%, animations 16.59%)、全量测试通过(type-check ✅ / lint ✅ / 992 tests ✅)
|
||
- [x] **封版发布 v1.0.0-phase1 (2026-07-31)**:
|
||
- [x] UI设计重构 ~85%:设计系统完整、四层叙事模型已实施、咨询专业风骨架确立
|
||
- [x] CMS化 ~75%:所有页面已集成 CMS 数据层、种子脚本覆盖全部内容类型
|
||
- [x] 清理旧版文件:归档 12 个旧版组件至 _archive/(home-content-v11~v13, products-content-v1, product-detail-v1~v2, solutions-content-v1, news-content-v1, team-content-v1~v2, contact-content-v1~v2)
|
||
- [x] 质量门禁通过:type-check ✅ / lint ✅(0 errors) / 1217 tests ✅ / coverage 达标 ✅
|
||
- [x] 生产环境变量与 Nginx 安全头确认完成:CSP / Permissions-Policy / HSTS 已配置,.env.production 密钥已生成
|
||
- [x] Phase 6 测试收尾:ESLint 0 errors、新增 18 个测试套件 / 225 条测试、覆盖率 Stmts 63.23% / Branches 78.02%
|
||
- [x] **最终验收确认 (2026-08-02)**:type-check ✅ / lint 0 errors ✅ / 单元测试 90 suites / 1217 tests ✅ / 集成测试 11 suites / 96 tests ✅ / 覆盖率阈值达标 ✅
|
||
- [x] **文档同步 (2026-08-02)**:test-strategy-plan.md 版本 1.5,已标记已实现项,保留真实缺口
|
||
- [x] **官网产品模块定位决策(2026-08-19)**:确认 IHG/字节式品牌矩阵方向(品牌宣传为主 + 产品矩阵聚合页保留 + 成熟产品外链独立站),已写入 CONTEXT.md / README.md;Phase 0 文档化完成,Phase 1-4 实施待启动
|
||
|
||
## 技术栈
|
||
|
||
| 类别 | 技术 | 版本 |
|
||
|------|------|------|
|
||
| 框架 | Next.js | 16.2.11 |
|
||
| UI 库 | React | 18.3.1 |
|
||
| 语言 | TypeScript | 5.x |
|
||
| 样式 | Tailwind CSS | 3.4.17 |
|
||
| 代码检查 | ESLint | 9.25.1 |
|
||
| 组件库 | shadcn/ui (Radix UI) | - |
|
||
| 动画 | Framer Motion | 12.x |
|
||
| 图标 | Lucide React | 0.563.0 |
|
||
| 数据验证 | Zod | 4.3.6 |
|
||
| 图表 | @antv/g2 | 5.4.8 |
|
||
| 3D 效果 | Three.js | 0.183.1 |
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 18+
|
||
- npm / yarn / pnpm / bun
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:3000
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
输出目录: `dist/`
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
novalon-website/
|
||
├── src/ # 源代码
|
||
│ ├── app/ # Next.js App Router
|
||
│ │ ├── (marketing)/ # 营销页面路由组
|
||
│ │ │ ├── page.tsx # 首页
|
||
│ │ │ ├── about/ # 关于我们
|
||
│ │ │ ├── cases/ # 成功案例
|
||
│ │ │ ├── contact/ # 联系我们
|
||
│ │ │ ├── news/ # 新闻动态
|
||
│ │ │ ├── products/ # 产品服务
|
||
│ │ │ ├── services/ # 核心业务
|
||
│ │ │ └── solutions/ # 解决方案
|
||
│ │ ├── privacy/ # 隐私政策
|
||
│ │ ├── terms/ # 服务条款
|
||
│ │ ├── layout.tsx # 根布局
|
||
│ │ ├── error.tsx # 错误页面
|
||
│ │ └── not-found.tsx # 404 页面
|
||
│ ├── components/ # React 组件
|
||
│ │ ├── ui/ # 基础 UI 组件
|
||
│ │ ├── layout/ # 布局组件
|
||
│ │ ├── sections/ # 页面区块组件
|
||
│ │ ├── effects/ # 视觉效果组件
|
||
│ │ ├── seo/ # SEO 组件
|
||
│ │ └── analytics/ # 分析组件
|
||
│ ├── hooks/ # 自定义 Hooks
|
||
│ └── contexts/ # React Context
|
||
├── e2e/ # E2E 测试
|
||
├── tests/ # 测试文件
|
||
│ ├── performance/ # 性能测试
|
||
│ └── styles/ # 样式测试
|
||
├── docs/ # 项目文档
|
||
├── scripts/ # 脚本文件
|
||
├── config/ # 配置文件
|
||
├── public/ # 静态资源
|
||
└── dist/ # 构建输出
|
||
```
|
||
|
||
## 页面路由
|
||
|
||
| 路由 | 描述 |
|
||
|------|------|
|
||
| `/` | 首页 |
|
||
| `/about` | 关于我们 |
|
||
| `/services` | 核心业务列表 |
|
||
| `/services/[id]` | 业务详情 |
|
||
| `/products` | 产品服务列表 |
|
||
| `/products/[id]` | 产品详情 |
|
||
| `/cases` | 成功案例列表 |
|
||
| `/cases/[id]` | 案例详情 |
|
||
| `/news` | 新闻动态列表 |
|
||
| `/news/[slug]` | 新闻详情 |
|
||
| `/contact` | 联系我们 |
|
||
| `/privacy` | 隐私政策 |
|
||
| `/terms` | 服务条款 |
|
||
|
||
## NPM 脚本
|
||
|
||
| 命令 | 描述 |
|
||
|------|------|
|
||
| `npm run dev` | 启动开发服务器 |
|
||
| `npm run build` | 构建生产版本 |
|
||
| `npm start` | 启动生产服务器 |
|
||
| `npm run lint` | 运行 ESLint 检查 |
|
||
| `npm run type-check` | TypeScript 类型检查 |
|
||
| `npm run test` | 运行 E2E 测试 |
|
||
| `npm run test:unit` | 运行单元测试(Jest,120 suites / 1509 tests) |
|
||
| `npm run test:coverage` | 运行测试覆盖率(当前 Branches 82.38%, Lines 73.59%) |
|
||
| `npm run test:e2e:fast` | 运行 E2E 快速测试(@smoke + @critical 标签) |
|
||
| `npm run test:e2e:standard` | 运行 E2E 标准回归测试(@regression 标签) |
|
||
| `npm run test:smoke` | 运行 E2E 冒烟测试(@smoke 标签) |
|
||
| `npm run test:critical` | 运行 E2E 关键路径测试(@critical 标签) |
|
||
| `npm run test:e2e:journey` | 运行用户旅程测试(@journey 标签,UJ-01/UJ-02) |
|
||
| `npm run test:e2e:mobile` | 运行移动端 E2E 测试(@mobile 标签,53 个测试) |
|
||
| `npm run test:e2e:mobile:performance` | 运行移动端性能基线测试(FCP/LCP/加载时间) |
|
||
| `npm run test:e2e:mobile:accessibility` | 运行移动端可访问性测试(axe-core WCAG 2.1 AA) |
|
||
| `npm run test:mutation` | 运行变异测试(Stryker,评估测试质量,当前 36.98%) |
|
||
| `npm run test:mutation:quick` | 快速变异测试(仅 utils.ts,91.18%) |
|
||
| `npm run test:security` | 安全扫描(npm audit + 安全响应头检查) |
|
||
| `npm run test:security:headers` | 安全响应头检查(X-Content-Type-Options, CSP, HSTS 等) |
|
||
| `npm run test:all` | 全量门禁检查(type-check + lint + coverage + fast E2E + security headers) |
|
||
| `npm run lighthouse` | 运行 Lighthouse 性能测试 |
|
||
|
||
## 代码质量门禁
|
||
|
||
项目配置了自动化质量门禁,确保代码提交前通过所有质量检查:
|
||
|
||
- **ESLint**: 代码风格检查
|
||
- **commitlint**: 提交信息规范
|
||
- **Jest**: 代码覆盖率检查
|
||
|
||
### 提交规范
|
||
|
||
使用 Conventional Commits 规范:
|
||
|
||
```
|
||
<type>(<scope>): <subject>
|
||
```
|
||
|
||
**提交类型**:
|
||
- `feat`: 新功能
|
||
- `fix`: 修复bug
|
||
- `docs`: 文档更新
|
||
- `style`: 代码格式调整
|
||
- `refactor`: 重构
|
||
- `perf`: 性能优化
|
||
- `test`: 测试相关
|
||
- `chore`: 构建/工具相关
|
||
|
||
## 测试
|
||
|
||
项目采用多层测试策略,涵盖单元测试、集成测试、E2E 测试、用户旅程测试、视觉回归测试、变异测试等。
|
||
|
||
### 测试工具链
|
||
|
||
| 工具 | 用途 | 配置 |
|
||
|------|------|------|
|
||
| **Jest** | 单元测试(120 suites / 1509 tests) | `config/test/jest.config.js` |
|
||
| **Playwright** | E2E / 视觉回归 / 用户旅程测试 | `e2e/playwright.config.ts` |
|
||
| **Stryker** | 变异测试(评估测试质量) | `stryker.config.json` |
|
||
| **Allure** | 测试报告可视化 | Allure Playwright reporter |
|
||
| **k6** | 负载/压力/API 性能测试 | `tests/performance/` |
|
||
| **Lighthouse CI** | 性能/可访问性/SEO 审计 | `lighthouserc.js` |
|
||
|
||
### E2E 测试标签体系
|
||
|
||
| 标签 | 用途 | 执行命令 |
|
||
|------|------|----------|
|
||
| `@smoke` | 冒烟测试:核心功能 | `npm run test:smoke` |
|
||
| `@critical` | 关键路径:CMS 工作流等 | `npm run test:critical` |
|
||
| `@smoke` + `@critical` | 快速回归(<5min) | `npm run test:e2e:fast` |
|
||
| `@regression` | 全量回归(<15min) | `npm run test:e2e:standard` |
|
||
| `@journey` | 用户旅程(UJ-01/UJ-02) | `npm run test:e2e:journey` |
|
||
| `@mobile` | 移动端专项测试(53 个:16 基础 + 5 用户旅程 + 14 可访问性 + 18 性能) | `npm run test:e2e:mobile` |
|
||
| `@visual` | 视觉回归(105 snapshots × 5 browsers) | `npm run test:visual:all` |
|
||
|
||
### 运行测试
|
||
|
||
```bash
|
||
# 单元测试
|
||
npm run test:unit # 1509 tests
|
||
|
||
# 测试覆盖率
|
||
npm run test:coverage # Branches 82.38%, Lines 73.59%
|
||
|
||
# E2E 测试
|
||
npm run test # 全量 E2E(631 passed)
|
||
npm run test:e2e:fast # 快速回归(@smoke + @critical)
|
||
npm run test:e2e:standard # 标准回归(@regression)
|
||
npm run test:e2e:journey # 用户旅程(@journey)
|
||
|
||
# 移动端测试
|
||
npm run test:e2e:mobile # 全量移动端(53 个 @mobile 测试)
|
||
npm run test:e2e:mobile:performance # 移动端性能基线
|
||
npm run test:e2e:mobile:accessibility # 移动端可访问性
|
||
|
||
# 变异测试
|
||
npm run test:mutation # 全量变异测试
|
||
npm run test:mutation:quick # 快速变异(仅 utils.ts)
|
||
|
||
# 全量门禁检查
|
||
npm run test:all # type-check + lint + coverage + fast E2E
|
||
```
|
||
|
||
## 部署
|
||
|
||
### 统一发布脚本(推荐)
|
||
|
||
项目发布统一通过 `scripts/deploy.sh` 完成,包含构建、发布、回滚、状态查看:
|
||
|
||
```bash
|
||
# 构建静态产物
|
||
./scripts/deploy.sh build
|
||
|
||
# 构建并发布到生产服务器(默认命令,等价于 ./scripts/deploy.sh deploy)
|
||
./scripts/deploy.sh deploy
|
||
|
||
# 使用现有 dist/ 直接发布(跳过本地构建)
|
||
./scripts/deploy.sh deploy --skip-build
|
||
|
||
# 回滚到最近一次远程备份
|
||
./scripts/deploy.sh rollback
|
||
|
||
# 查看生产环境发布状态
|
||
./scripts/deploy.sh status
|
||
|
||
# 查看完整帮助
|
||
./scripts/deploy.sh help
|
||
```
|
||
|
||
常用选项:
|
||
|
||
```bash
|
||
./scripts/deploy.sh deploy --skip-build --auto-rollback
|
||
./scripts/deploy.sh deploy --server-ip 139.155.109.62 --project-name novalon-website
|
||
```
|
||
|
||
也可通过环境变量覆盖默认配置:`SERVER_IP`、`SERVER_USER`、`DEPLOY_ROOT`、`PROJECT_NAME`、`NGINX_CONTAINER`、`DOMAIN`、`BACKUP_RETENTION_COUNT`、`DIST_DIR`。
|
||
|
||
npm 快捷命令:`npm run deploy`、`npm run deploy:skip-build`、`npm run deploy:rollback`、`npm run deploy:status`。
|
||
|
||
### 混合渲染构建(当前)
|
||
|
||
项目当前使用 `output: 'standalone'`,构建产物位于 `dist/`:
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
生产部署采用混合渲染:
|
||
- Nginx 直接托管 `dist/` 中的公共静态资源(图片、字体、`_next/static` 等)
|
||
- `/api/*`、`/admin/*` 及 ISR/SSR 回源代理到 Next.js 容器 `novalon-website:3000`
|
||
- Next.js 容器通过 `Dockerfile.prod` + `docker-compose.server.yml` 启动,SQLite 数据库挂载在 `./data`
|
||
|
||
```bash
|
||
# 本地构建
|
||
npm run build
|
||
|
||
# 服务器构建并启动 Next.js 容器
|
||
cd /home/novalon/docker-app/novalon-website
|
||
docker-compose -f docker-compose.server.yml up -d --build
|
||
```
|
||
|
||
### CI/CD
|
||
|
||
Jenkins Pipeline(`Jenkinsfile`)在部署阶段调用 `./scripts/deploy.sh deploy --skip-build`,部署失败时自动调用 `./scripts/deploy.sh rollback` 回滚。
|
||
|
||
|
||
## 文档
|
||
|
||
详细文档位于 `docs/` 目录:
|
||
|
||
- [架构文档](docs/architecture.md) - 系统架构设计
|
||
- [组件文档](docs/components.md) - 组件使用指南
|
||
- [测试文档](docs/testing.md) - 测试策略和指南
|
||
- [部署文档](docs/deployment.md) - 部署流程说明
|
||
- [经验教训](docs/lessons-learned.md) - 跨任务经验教训汇总,避免重复踩坑
|
||
- [问题排查](docs/troubleshooting.md) - 常见问题快速索引与解决方案
|
||
|
||
## 许可证
|
||
|
||
Copyright © 2026 四川睿新致远科技有限公司
|