张翔
fb888a673f
- 修复城市 (not set): 移除 allow_google_signals: false，启用 Google 信号补充地理数据
- 修复 Consent Mode v2: 补充 ad_user_data / ad_personalization 参数
- 修复 wait_for_update 与横幅延迟不匹配: 500ms → 3000ms
- 修复 static export 兼容性: GA 初始化脚本从 client component 移至 layout.tsx head 原生 script 标签
- 修复 pageview 追踪: GA3 风格 gtag('config') → GA4 风格 gtag('event', 'page_view')
- 修复 CookieConsent: 横幅延迟 2000ms → 500ms，同意后补发 pageview
- 修复 PerformanceTracker: FID → INP (Core Web Vitals 2024 更新)
- 修复环境变量命名: NEXT_PUBLIC_GA_ID → NEXT_PUBLIC_GA_MEASUREMENT_ID
- 清理 deploy-dist.sh 冗余 server/app 分支逻辑
- 新增部署产物 GA 脚本嵌入验证
Novalon Website
四川睿新致远科技有限公司官方网站 - 企业数字化转型服务商
项目概述
本项目是四川睿新致远科技有限公司的企业官网，采用 Next.js 16 + React 19 + TypeScript 技术栈构建的纯静态网站，提供现代化的企业展示、产品服务介绍、案例展示、新闻动态等功能。
核心功能
- 首页展示 - Hero 区域、核心业务、产品服务、成功案例、关于我们、新闻动态
- 服务详情 - 软件开发、云服务、数据分析、信息安全等服务详细介绍
- 产品展示 - 产品列表和详情页面
- 案例展示 - 成功案例列表和详情
- 新闻动态 - 公司新闻、产品发布、合作动态、行业资讯
- 响应式设计 - 完美适配桌面端、平板和移动设备
- SEO 优化 - 结构化数据、元信息优化
技术栈
| 类别 | 技术 | 版本 |
|---|---|---|
| 框架 | Next.js | 16.1.6 |
| UI 库 | React | 19.2.3 |
| 语言 | TypeScript | 5.x |
| 样式 | Tailwind CSS | 4.x |
| 组件库 | 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
安装依赖
npm install
开发模式
npm run dev
构建生产版本
npm run build
输出目录: dist/
预览生产版本
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 |
运行单元测试 |
npm run test:coverage |
运行测试覆盖率 |
npm run lighthouse |
运行 Lighthouse 性能测试 |
代码质量门禁
项目配置了自动化质量门禁，确保代码提交前通过所有质量检查：
- ESLint: 代码风格检查
- commitlint: 提交信息规范
- Jest: 代码覆盖率检查
提交规范
使用 Conventional Commits 规范：
<type>(<scope>): <subject>
提交类型:
feat: 新功能fix: 修复bugdocs: 文档更新style: 代码格式调整refactor: 重构perf: 性能优化test: 测试相关chore: 构建/工具相关
测试
项目使用 Playwright 进行 E2E 测试，Jest 进行单元测试。
运行测试
# E2E 测试
npm run test
# 单元测试
npm run test:unit
# 测试覆盖率
npm run test:coverage
部署
静态部署
项目构建后生成纯静态文件，可部署到任何静态托管服务：
npm run build
构建产物位于 dist/ 目录，可直接部署到：
- Nginx
- CDN
- Vercel
- Netlify
- GitHub Pages
Docker 部署
docker build -t novalon-website .
docker run -p 3000:3000 novalon-website
文档
详细文档位于 docs/ 目录：
许可证
Copyright © 2026 四川睿新致远科技有限公司