6d92024b63
- 修复API测试认证问题:创建全局认证设置,更新Playwright配置 - 优化回归测试稳定性:增加超时时间到15秒,修复定位器 - 创建Woodpecker CI工作流:CI、部署和质量门禁配置 - 添加Jest配置和测试脚本 - 移除登录页面的默认账号密码显示(安全问题修复)
333 lines
10 KiB
Markdown
333 lines
10 KiB
Markdown
# 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
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 环境变量配置
|
|
|
|
复制环境变量示例文件:
|
|
|
|
```bash
|
|
cp .env.example .env.local
|
|
```
|
|
|
|
配置必要的环境变量:
|
|
|
|
```env
|
|
# 邮件服务
|
|
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
|
|
```
|
|
|
|
### 开发模式
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
访问 http://localhost:3000
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
输出目录: `dist/`
|
|
|
|
### 启动生产服务器
|
|
|
|
```bash
|
|
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 一致性
|
|
|
|
### 运行测试
|
|
|
|
```bash
|
|
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/` 目录:
|
|
|
|
- [架构文档](docs/architecture.md) - 系统架构设计
|
|
- [组件文档](docs/components.md) - 组件使用指南
|
|
- [API 文档](docs/api.md) - API 接口说明
|
|
- [测试文档](docs/testing.md) - 测试策略和指南
|
|
- [部署文档](docs/deployment.md) - 部署流程说明
|
|
- [CMS文档](docs/cms.md) - CMS系统使用指南
|
|
|
|
## 许可证
|
|
|
|
Copyright © 2026 四川睿新致远科技有限公司
|