张翔
4897c6e11c
阶段三：建立监控告警体系 - 集成Sentry错误监控：安装依赖，创建配置文件，初始化Sentry - 配置性能监控：创建监控工具类，实现健康检查API - 更新环境变量模板，添加Sentry和数据库配置 阶段四：配置生产环境 - 创建生产环境变量模板 - 创建Dockerfile和docker-compose.prod.yml - 创建备份和恢复脚本 - 设置脚本执行权限
Novalon Website
四川睿新致远科技有限公司官方网站 - 企业数字化转型服务商
项目概述
本项目是四川睿新致远科技有限公司的企业官网，采用 Next.js 16 + React 19 + TypeScript 技术栈构建，提供现代化的企业展示、产品服务介绍、案例展示、新闻动态和在线咨询等功能。
核心功能
- 首页展示 - Hero 区域、核心业务、产品服务、成功案例、关于我们、新闻动态
- 服务详情 - 软件开发、云服务、数据分析、信息安全等服务详细介绍
- 产品展示 - 产品列表和详情页面
- 案例展示 - 成功案例列表和详情
- 新闻动态 - 公司新闻、产品发布、合作动态、行业资讯
- 在线咨询 - 联系表单、公司信息展示
- 响应式设计 - 完美适配桌面端、平板和移动设备
- SEO 优化 - 结构化数据、元信息优化
- CMS管理后台 - 内容管理、用户管理、配置中心、审计日志
技术栈
| 类别 | 技术 | 版本 |
|---|---|---|
| 框架 | 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 |
| 邮件服务 | Resend | 6.9.2 |
| 数据验证 | Zod | 4.3.6 |
| 图表 | @antv/g2 | 5.4.8 |
| 3D 效果 | Three.js | 0.183.1 |
| 数据库 | SQLite | - |
| ORM | Drizzle ORM | - |
| 认证 | NextAuth.js | 5.x beta |
| 富文本编辑 | Tiptap | - |
快速开始
环境要求
- Node.js 18+
- npm / yarn / pnpm / bun
安装依赖
npm install
环境变量配置
复制环境变量示例文件：
cp .env.example .env.local
配置必要的环境变量：
# 邮件服务
RESEND_API_KEY=your_resend_api_key
COMPANY_EMAIL=contact@novalon.cn
# 数据库
DATABASE_URL=./data/novalon.db
# NextAuth.js
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
# 文件上传
UPLOAD_DIR=./uploads
MAX_FILE_SIZE=10485760
# 管理员账号（首次运行时创建）
ADMIN_EMAIL=admin@novalon.cn
ADMIN_PASSWORD=your_secure_password
开发模式
npm run dev
构建生产版本
npm run build
输出目录: dist/
启动生产服务器
npm start
项目结构
novalon-website/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (marketing)/ # 营销页面路由组
│ │ │ ├── page.tsx # 首页
│ │ │ ├── about/ # 关于我们
│ │ │ ├── cases/ # 成功案例
│ │ │ ├── contact/ # 联系我们
│ │ │ ├── news/ # 新闻动态
│ │ │ ├── products/ # 产品服务
│ │ │ ├── services/ # 核心业务
│ │ │ └── solutions/ # 解决方案
│ │ ├── admin/ # 管理后台
│ │ │ ├── page.tsx # 仪表盘
│ │ │ ├── login/ # 登录页面
│ │ │ ├── content/ # 内容管理
│ │ │ ├── users/ # 用户管理
│ │ │ ├── settings/ # 配置中心
│ │ │ └── logs/ # 审计日志
│ │ ├── api/ # API 路由
│ │ │ ├── auth/ # 认证 API
│ │ │ ├── contact/ # 联系表单 API
│ │ │ └── admin/ # 管理 API
│ │ │ ├── content/ # 内容管理
│ │ │ ├── users/ # 用户管理
│ │ │ ├── config/ # 配置管理
│ │ │ ├── upload/ # 文件上传
│ │ │ └── logs/ # 审计日志
│ │ ├── layout.tsx # 根布局
│ │ ├── error.tsx # 错误页面
│ │ └── not-found.tsx # 404 页面
│ ├── components/ # React 组件
│ │ ├── ui/ # 基础 UI 组件
│ │ ├── layout/ # 布局组件
│ │ ├── sections/ # 页面区块组件
│ │ ├── effects/ # 视觉效果组件
│ │ ├── seo/ # SEO 组件
│ │ ├── analytics/ # 分析组件
│ │ └── admin/ # 管理后台组件
│ ├── lib/ # 工具函数
│ │ ├── auth/ # 认证相关
│ │ ├── db.ts # 数据库连接
│ │ ├── audit.ts # 审计日志
│ │ └── upload.ts # 文件上传
│ ├── db/ # 数据库相关
│ │ ├── schema.ts # 数据库 Schema
│ │ ├── seed.ts # 种子数据
│ │ └── migrations/ # 迁移文件
│ ├── hooks/ # 自定义 Hooks
│ └── contexts/ # React Context
├── e2e/ # E2E 测试
│ ├── src/
│ │ ├── tests/ # 测试用例
│ │ │ ├── smoke/ # 冒烟测试
│ │ │ ├── regression/ # 回归测试
│ │ │ ├── api/ # API 测试
│ │ │ ├── accessibility/ # 可访问性测试
│ │ │ ├── performance/ # 性能测试
│ │ │ ├── security/ # 安全测试
│ │ │ └── visual/ # 视觉回归测试
│ │ ├── pages/ # Page Object
│ │ ├── fixtures/ # 测试 Fixtures
│ │ └── config/ # 测试配置
│ └── playwright.config.ts
├── public/ # 静态资源
├── uploads/ # 上传文件存储
├── data/ # SQLite 数据库文件
├── docs/ # 项目文档
└── dist/ # 构建输出
页面路由
| 路由 | 描述 |
|---|---|
/ |
首页 |
/about |
关于我们 |
/services |
核心业务列表 |
/services/[id] |
业务详情 |
/products |
产品服务列表 |
/products/[id] |
产品详情 |
/cases |
成功案例列表 |
/cases/[id] |
案例详情 |
/news |
新闻动态列表 |
/news/[slug] |
新闻详情 |
/contact |
联系我们 |
/privacy |
隐私政策 |
/terms |
服务条款 |
/admin |
管理后台仪表盘 |
/admin/login |
管理员登录 |
/admin/content |
内容管理 |
/admin/content/[id] |
内容编辑 |
/admin/users |
用户管理 |
/admin/settings |
配置中心 |
/admin/logs |
审计日志 |
NPM 脚本
| 命令 | 描述 |
|---|---|
npm run dev |
启动开发服务器 |
npm run build |
构建生产版本 |
npm start |
启动生产服务器 |
npm run lint |
运行 ESLint 检查 |
npm run test |
运行 E2E 测试 |
npm run test:smoke |
运行冒烟测试 |
npm run check:contrast |
检查颜色对比度 |
npm run check:headings |
检查标题层级 |
npm run db:generate |
生成数据库迁移文件 |
npm run db:migrate |
执行数据库迁移 |
npm run db:seed |
填充数据库种子数据 |
npm run db:studio |
启动 Drizzle Studio |
测试
项目使用 Playwright 进行 E2E 测试，测试框架位于 e2e/ 目录。
测试类型
- 冒烟测试 - 基础功能验证
- 回归测试 - 功能完整性验证
- API测试 - 后端API接口测试
- 性能测试 - Core Web Vitals
- 响应式测试 - 多设备适配
- 可访问性测试 - WCAG 合规
- 安全测试 - XSS、CSRF 防护
- 视觉回归测试 - UI 一致性
运行测试
cd e2e
npm install
npm run test
管理后台
功能模块
内容管理
- 支持新闻、产品、服务、案例四种内容类型
- 富文本编辑器（支持图片上传）
- 内容版本管理
- 草稿/发布/归档状态管理
用户管理
- 用户创建、编辑、删除
- 角色权限控制（管理员、编辑、查看者）
- 密码加密存储
配置中心
- 网站基本信息配置
- SEO配置
- 联系信息配置
- 分类管理
审计日志
- 操作记录追踪
- 按操作类型、资源类型筛选
- 分页查询
权限说明
| 角色 | 内容管理 | 用户管理 | 配置管理 | 审计日志 |
|---|---|---|---|---|
| admin | 全部权限 | 全部权限 | 全部权限 | 查看权限 |
| editor | 创建、编辑、发布 | 无权限 | 查看权限 | 查看权限 |
| viewer | 查看权限 | 无权限 | 查看权限 | 查看权限 |
API 接口
认证接口
POST /api/auth/signin- 登录POST /api/auth/signout- 登出GET /api/auth/session- 获取会话信息
内容管理接口
GET /api/admin/content- 获取内容列表POST /api/admin/content- 创建内容GET /api/admin/content/[id]- 获取内容详情PUT /api/admin/content/[id]- 更新内容DELETE /api/admin/content/[id]- 删除内容
用户管理接口
GET /api/admin/users- 获取用户列表POST /api/admin/users- 创建用户GET /api/admin/users/[id]- 获取用户详情PUT /api/admin/users/[id]- 更新用户DELETE /api/admin/users/[id]- 删除用户
配置管理接口
GET /api/admin/config- 获取配置列表POST /api/admin/config- 更新配置
文件上传接口
POST /api/admin/upload- 上传文件DELETE /api/admin/upload- 删除文件
审计日志接口
GET /api/admin/logs- 获取审计日志列表
CI/CD
项目使用 Woodpecker CI 进行持续集成，配置文件为 .woodpecker.yml。
CI 流水线包括：
- E2E 测试（全量、冒烟、回归、性能、响应式、视觉）
文档
详细文档位于 docs/ 目录：
许可证
Copyright © 2026 四川睿新致远科技有限公司