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中验证域名)

依赖安装

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数据结构扩展

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数据结构扩展

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文档
• Resend文档
• Zod文档
• 个人信息保护法
• 网络安全法