# 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 |
| 邮件服务 | Resend | 6.9.2 |
| 数据验证 | 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
cp .env.example .env.local
```

配置必要的环境变量：

```env
RESEND_API_KEY=your_resend_api_key
COMPANY_EMAIL=contact@novalon.cn
```

### 开发模式

```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/       # 解决方案
│   │   ├── api/                 # API 路由
│   │   │   └── contact/         # 联系表单 API
│   │   ├── layout.tsx           # 根布局
│   │   ├── error.tsx            # 错误页面
│   │   └── not-found.tsx        # 404 页面
│   ├── components/              # React 组件
│   │   ├── ui/                  # 基础 UI 组件
│   │   ├── layout/              # 布局组件
│   │   ├── sections/            # 页面区块组件
│   │   ├── effects/             # 视觉效果组件
│   │   ├── seo/                 # SEO 组件
│   │   └── analytics/           # 分析组件
│   ├── lib/                     # 工具函数
│   ├── hooks/                   # 自定义 Hooks
│   └── contexts/                # React Context
├── e2e/                         # E2E 测试
│   ├── src/
│   │   ├── tests/               # 测试用例
│   │   ├── pages/               # Page Object
│   │   ├── fixtures/            # 测试 Fixtures
│   │   └── config/              # 测试配置
│   └── playwright.config.ts
├── public/                      # 静态资源
├── docs/                        # 项目文档
└── 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 test` | 运行 E2E 测试 |
| `npm run test:smoke` | 运行冒烟测试 |
| `npm run check:contrast` | 检查颜色对比度 |
| `npm run check:headings` | 检查标题层级 |

## 测试

项目使用 Playwright 进行 E2E 测试，测试框架位于 `e2e/` 目录。

### 测试类型

- **冒烟测试** - 基础功能验证
- **回归测试** - 功能完整性验证
- **性能测试** - Core Web Vitals
- **响应式测试** - 多设备适配
- **可访问性测试** - WCAG 合规
- **安全测试** - XSS、CSRF 防护
- **视觉回归测试** - UI 一致性

### 运行测试

```bash
cd e2e
npm install
npm run test
```

## 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) - 部署流程说明

## 许可证

Copyright © 2026 四川睿新致远科技有限公司