novalon-website/docs/plans/2026-02-26-website-feature-completion-design.md

# 网站功能补全设计方案

**日期**: 2026-02-26
**状态**: 已确认
**优先级**: 高

## 概述

本文档描述了Novalon网站功能补全的完整设计方案,包括产品详情页面、服务详情页面、联系表单邮件服务集成、隐私政策和服务条款页面。

## 1. 产品详情页面

### 路由
- 路径: `/products/[id]`
- 动态路由参数: `id` (产品ID,如 `erp`, `crm`, `cms`, `bi`)

### 页面结构

#### 顶部区域
- 产品标题
- 分类标签
- 简短描述
- 产品图片或图标

#### 功能特性模块
- 按模块分组展示功能点
- 每个功能点配有图标和详细说明
- 对于复杂产品,分组展示(如"财务模块"、"采购模块"等)

#### 技术架构模块
- 技术架构图
- 技术栈说明
- 前端技术、后端技术、数据库、部署方式

#### 应用场景模块
- 典型应用场景
- 行业案例
- 解决方案说明

#### 客户案例模块
- 成功客户案例
- 客户名称、行业
- 实施效果(数据化展示)

#### 底部CTA
- "联系我们"按钮
- "申请演示"按钮

### 数据来源
- 从 `@/lib/constants` 中的 `PRODUCTS` 数组获取产品数据
- 需要扩展 `PRODUCTS` 数据结构,添加详细内容

## 2. 服务详情页面

### 路由
- 路径: `/services/[id]`
- 动态路由参数: `id` (服务ID,如 `software`, `cloud`, `data`, `security`)

### 页面结构

#### 顶部区域
- 服务标题
- 服务图标
- 服务概述
- 价值主张

#### 服务内容模块
- 服务范围详细说明
- 服务流程
- 交付标准
- 对于软件开发服务,说明需求分析、设计、开发、测试、部署等各阶段

#### 服务优势模块
- 核心优势
- 技术实力
- 行业经验
- 团队规模
- 成功案例
- 数据化展示(如"10年+行业经验"、"100+成功案例")

#### 服务流程模块
- 时间轴形式展示
- 从接触到交付的完整过程

#### 相关服务模块
- 展示其他相关服务
- 引导客户了解更多

#### 底部CTA
- "立即咨询"按钮
- 跳转到联系页面并预填服务类型

### 数据来源
- 从 `@/lib/constants` 中的 `SERVICES` 数组获取服务数据
- 需要扩展 `SERVICES` 数据结构,添加详细内容

## 3. 联系表单邮件服务集成

### 技术选型
- **主选方案**: Resend
  - 每月3000封免费邮件
  - 简洁的API接口
  - 良好的开发者体验
  - 支持国内访问

- **替代方案**:
  - EmailJS: 前端直接发送,每月200封免费
  - SendGrid: 每天100封免费
  - SMTP2GO: 每月1000封免费

### 实现方式

#### API路由
- 路径: `/api/contact`
- 方法: POST
- 接收表单数据: name, phone, email, subject, message

#### 邮件发送流程
1. 接收表单数据
2. 验证数据(Zod schema)
3. 调用Resend SDK发送邮件到公司邮箱
4. (可选)发送确认邮件给用户
5. 返回成功或失败响应

### 安全措施
- 使用环境变量存储API密钥 (`RESEND_API_KEY`)
- 实现CSRF防护
- 添加表单验证(Zod schema验证)
- 实现频率限制(每IP每小时最多5次)
- 使用简单验证码防止机器人提交

### 用户体验
- 提交时显示加载状态
- 提交成功后显示成功提示
- 提交失败时显示错误信息并允许重试
- 保留表单数据,失败时无需重新填写

### 配置管理
- 在 `.env.local` 中配置:
  - `RESEND_API_KEY`: Resend API密钥
  - `CONTACT_EMAIL`: 收件人邮箱
  - `FROM_EMAIL`: 发件人邮箱(需要在Resend中验证域名)

### 依赖安装
```bash
npm install resend
npm install zod
```

## 4. 隐私政策和服务条款页面

### 隐私政策页面 (`/privacy`)

#### 页面结构
1. **引言部分**: 适用范围和生效日期
2. **信息收集**: 收集的用户信息类型及收集目的
3. **信息使用**: 如何使用收集的信息
4. **信息共享**: 在何种情况下会共享用户信息
5. **信息存储**: 信息的存储方式和存储期限
6. **用户权利**: 用户对个人信息享有的权利
7. **Cookie使用**: Cookie的目的和管理方式
8. **未成年人保护**: 对未成年人的特殊保护措施
9. **政策更新**: 隐私政策的更新机制和通知方式
10. **联系方式**: 数据保护负责人的联系方式

#### 法律依据
- 《中华人民共和国网络安全法》
- 《中华人民共和国个人信息保护法》
- 《中华人民共和国数据安全法》

### 服务条款页面 (`/terms`)

#### 页面结构
1. **引言部分**: 适用范围和生效日期
2. **服务内容**: 网站提供的服务内容和范围
3. **用户义务**: 用户使用服务时应遵守的规则和限制
4. **知识产权**: 网站内容的知识产权归属和使用限制
5. **免责条款**: 网站在何种情况下不承担责任
6. **服务变更**: 网站变更或终止服务的权利和通知方式
7. **争议解决**: 争议解决的方式和适用法律
8. **条款更新**: 服务条款的更新机制和通知方式
9. **联系方式**: 法律事务联系人的联系方式

#### 法律依据
- 《中华人民共和国民法典》
- 《中华人民共和国电子商务法》
- 《中华人民共和国网络安全法》

### 设计特点
- 清晰的层级结构,便于阅读
- 使用锚点导航,方便用户快速跳转到相关章节
- 保持专业、严谨的法律文档风格
- 响应式设计,适配各种设备

## 技术实现要点

### 通用要求
- 所有页面使用Next.js App Router
- 组件复用现有的UI组件库(shadcn/ui)
- 保持与现有页面一致的视觉风格
- 响应式设计,适配各种设备
- SEO优化,包含metadata和结构化数据

### 文件结构
```
src/
├── app/
│   ├── (marketing)/
│   │   ├── products/
│   │   │   └── [id]/
│   │   │       └── page.tsx          # 产品详情页面
│   │   ├── services/
│   │   │   └── [id]/
│   │   │       └── page.tsx          # 服务详情页面
│   │   ├── privacy/
│   │   │   └── page.tsx              # 隐私政策页面
│   │   └── terms/
│   │       └── page.tsx              # 服务条款页面
│   └── api/
│       └── contact/
│           └── route.ts              # 联系表单API路由
└── lib/
    └── constants.ts                  # 扩展PRODUCTS和SERVICES数据
```

### 数据扩展

#### PRODUCTS数据结构扩展
```typescript
export const PRODUCTS = [
  {
    id: 'erp',
    title: '睿新ERP管理系统',
    description: '...',
    category: '企业软件',
    features: ['财务管理', '采购管理', ...],
    benefits: ['提升运营效率30%', ...],
    // 新增字段
    technicalArchitecture: {
      frontend: ['React', 'TypeScript'],
      backend: ['Node.js', 'Express'],
      database: ['PostgreSQL', 'Redis'],
      deployment: ['Docker', 'Kubernetes']
    },
    scenarios: [
      {
        title: '制造业',
        description: '实现生产计划、物料需求、库存管理的全流程数字化'
      },
      // ...
    ],
    cases: [
      {
        client: '某制造企业',
        industry: '制造业',
        results: [
          { label: '生产效率', value: '提升40%' },
          // ...
        ]
      },
      // ...
    ]
  },
  // ...
]
```

#### SERVICES数据结构扩展
```typescript
export const SERVICES = [
  {
    id: 'software',
    title: '软件开发',
    description: '...',
    icon: 'Code',
    // 新增字段
    content: {
      scope: '提供定制化软件开发服务,包括Web应用、移动应用、企业管理系统等',
      process: [
        { phase: '需求分析', description: '深入了解业务需求,制定详细需求文档' },
        { phase: '系统设计', description: '设计系统架构、数据库结构、接口规范' },
        { phase: '开发实施', description: '采用敏捷开发方法,快速迭代交付' },
        { phase: '测试验收', description: '全面测试,确保系统质量和稳定性' },
        { phase: '部署上线', description: '协助部署,提供运维支持' }
      ],
      deliverables: ['源代码', '技术文档', '用户手册', '培训服务']
    },
    advantages: [
      { label: '技术实力', value: '10年+行业经验' },
      { label: '团队规模', value: '50+专业开发人员' },
      { label: '成功案例', value: '100+项目交付' },
      { label: '客户满意度', value: '98%' }
    ]
  },
  // ...
]
```

## 实施计划

### 阶段一:数据准备
- [ ] 扩展 `PRODUCTS` 数据结构,添加详细内容
- [ ] 扩展 `SERVICES` 数据结构,添加详细内容
- [ ] 创建产品详情页面的静态数据

### 阶段二:页面开发
- [ ] 创建产品详情页面 `/products/[id]`
- [ ] 创建服务详情页面 `/services/[id]`
- [ ] 创建隐私政策页面 `/privacy`
- [ ] 创建服务条款页面 `/terms`

### 阶段三:功能集成
- [ ] 安装Resend SDK和Zod
- [ ] 创建联系表单API路由 `/api/contact`
- [ ] 实现邮件发送功能
- [ ] 添加表单验证和安全措施
- [ ] 更新联系表单提交逻辑

### 阶段四:测试和优化
- [ ] 测试所有新页面的功能
- [ ] 测试邮件发送功能
- [ ] 测试表单验证和安全措施
- [ ] 优化页面性能和用户体验
- [ ] 检查响应式设计

### 阶段五:部署和上线
- [ ] 配置生产环境的环境变量
- [ ] 构建生产版本
- [ ] 部署到生产环境
- [ ] 验证所有功能正常运行

## 验收标准

### 功能验收
- [ ] 产品详情页面正常显示所有内容模块
- [ ] 服务详情页面正常显示所有内容模块
- [ ] 隐私政策和服务条款页面内容完整
- [ ] 联系表单能够成功发送邮件
- [ ] 表单验证和安全措施正常工作

### 质量验收
- [ ] 所有页面通过ESLint检查
- [ ] 所有页面通过TypeScript类型检查
- [ ] 响应式设计在各种设备上正常显示
- [ ] 页面加载性能符合要求
- [ ] SEO优化符合最佳实践

## 风险和注意事项

### 技术风险
- **邮件服务限制**: Resend免费额度为每月3000封,如超出需要升级或更换服务
- **API密钥安全**: 需要妥善保管API密钥,不要提交到代码仓库
- **表单滥用**: 需要实施频率限制和验证码,防止恶意提交

### 法律风险
- **隐私政策合规**: 需要确保隐私政策符合最新的法律法规要求
- **数据保护**: 需要妥善处理用户提交的个人信息,符合个人信息保护法要求
- **条款更新**: 需要定期更新隐私政策和服务条款,确保内容准确

### 运维风险
- **邮件服务稳定性**: 需要监控邮件服务的可用性和发送成功率
- **表单数据备份**: 建议保存表单提交记录,便于后续分析和追溯
- **用户反馈**: 需要及时处理用户反馈,优化用户体验

## 后续优化方向

1. **产品详情页面**
   - 添加产品视频演示
   - 添加在线试用功能
   - 添加产品定价信息
   - 添加常见问题(FAQ)模块

2. **服务详情页面**
   - 添加服务案例展示
   - 添加服务定价信息
   - 添加在线预约功能
   - 添加服务评价和推荐

3. **联系表单**
   - 添加文件上传功能
   - 添加智能客服集成
   - 添加在线聊天功能
   - 添加表单数据分析

4. **法律页面**
   - 添加Cookie同意管理
   - 添加数据导出功能
   - 添加账户删除功能
   - 添加隐私设置页面

## 参考资料

- [Next.js App Router文档](https://nextjs.org/docs/app)
- [Resend文档](https://resend.com/docs)
- [Zod文档](https://zod.dev)
- [个人信息保护法](http://www.npc.gov.cn/npc/c30834/202108/a8c4e3672c74491a80b53a172bb753fe.shtml)
- [网络安全法](http://www.npc.gov.cn/npc/c30834/201611/6c5a468d8c3f4e8f9d5d5e5e5e5e5e5e.shtml)