# 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=contact@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/ # 工具函数 │ │ ├── api/ # API 服务 │ │ ├── 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 │ └── MIGRATION.md # 测试框架迁移说明 ├── docs/ # 项目文档 │ ├── architecture/ # 架构文档 │ ├── development/ # 开发文档 │ ├── deployment/ # 部署文档 │ ├── testing/ # 测试文档 │ ├── api/ # API 文档 │ ├── guides/ # 使用指南 │ ├── STRUCTURE_PLAN.md # 目录结构规划 │ └── OPTIMIZATION_REPORT.md # 优化报告 ├── scripts/ # 脚本文件 │ ├── deployment/ # 部署脚本 │ ├── monitoring/ # 监控脚本 │ ├── testing/ # 测试脚本 │ ├── maintenance/ # 维护脚本 │ └── utils/ # 工具脚本 ├── config/ # 配置文件 │ ├── ci/ # CI/CD 配置 │ ├── lint/ # 代码检查配置 │ └── test/ # 测试配置 ├── reports/ # 测试报告 │ ├── e2e/ # E2E 测试报告 │ ├── performance/ # 性能测试报告 │ └── coverage/ # 代码覆盖率报告 ├── public/ # 静态资源 ├── uploads/ # 上传文件存储 ├── data/ # SQLite 数据库文件 └── dist/ # 构建输出 ``` ### 项目优化说明 本项目已于 2026-03-24 完成全面的工程化与规范化优化，包括： 1. **测试体系整合** - 统一为 Playwright TypeScript 测试框架 2. **目录结构规范化** - 建立清晰的目录结构，符合 Next.js 最佳实践 3. **配置文件优化** - 合并重复配置，统一配置管理 4. **文档体系完善** - 建立完整的文档体系和导航 5. **代码质量提升** - 修复所有类型错误，确保构建成功 详细信息请查看 [优化报告](docs/OPTIMIZATION_REPORT.md) ## 页面路由 | 路由 | 描述 | |------|------| | `/` | 首页 | | `/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 | ## 代码质量门禁 项目配置了自动化质量门禁，确保代码提交前通过所有质量检查： - **ESLint**: 代码风格检查 - **commitlint**: 提交信息规范 - **Jest**: 代码覆盖率检查 详细信息请查看 [质量门禁文档](docs/development/quality-gates.md)。 ### 提交规范 使用Conventional Commits规范： ``` ():