novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2fdee7e2ae27d18396d4ef465472b440567ee823
novalon-website/README.md
T
zhangxiang 2fdee7e2ae chore: release v1.0.0-phase1 — UI design restructure & CMS-ification 
UI design restructure ~85%: design system complete, four-layer narrative
model implemented, Consulting Professional aesthetic established.
CMS-ification ~75%: all pages integrated with CMS data layer, seed script
covers all content types, ISR + dynamic rendering enabled.
Archive 12 legacy component versions to _archive/.
Quality gates: type-check, 992 tests, coverage all passing.
2026-07-31 21:36:43 +08:00

326 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 条通过
## 项目进度
- [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 一致
- [ ] 生产环境变量与 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 ✅（153 预存 errors） / 992 tests ✅ / coverage 达标 ✅
- [x] 待上线前确认：生产环境变量与 Nginx 安全头
## 技术栈
| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | 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，72 suites / 992 tests） |
| `npm run test:coverage` | 运行测试覆盖率（当前 Branches 75.61%, Lines 50.82%） |
| `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 标签） |
| `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** | 单元测试（72 suites / 992 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` | 移动端专项测试 | `npm run test:e2e:mobile` |
| `@visual` | 视觉回归（105 snapshots × 5 browsers） | `npm run test:visual:all` |
### 运行测试
```bash
# 单元测试
npm run test:unit # 954 tests
# 测试覆盖率
npm run test:coverage # Branches 74.77%, Lines 50.78%
# 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 # 移动端（@mobile）
# 变异测试
npm run test:mutation # 全量变异测试
npm run test:mutation:quick # 快速变异（仅 utils.ts）
# 全量门禁检查
npm run test:all # type-check + lint + coverage + fast E2E
```
## 部署
### 静态部署
项目构建后生成纯静态文件，可部署到任何静态托管服务：
```bash
npm run build
```
构建产物位于 `dist/` 目录，可直接部署到：
- Nginx
- CDN
- Vercel
- Netlify
- GitHub Pages
### Docker 部署
```bash
docker build -t novalon-website .
docker run -p 3000:3000 novalon-website
```
## 文档
详细文档位于 `docs/` 目录：
- [架构文档](docs/architecture.md) - 系统架构设计
- [组件文档](docs/components.md) - 组件使用指南
- [测试文档](docs/testing.md) - 测试策略和指南
- [部署文档](docs/deployment.md) - 部署流程说明
- [经验教训](docs/lessons-learned.md) - 跨任务经验教训汇总，避免重复踩坑
- [问题排查](docs/troubleshooting.md) - 常见问题快速索引与解决方案
## 许可证
Copyright © 2026 四川睿新致远科技有限公司
Reference in New Issue View Git Blame Copy Permalink