# 网站功能补全设计方案 **日期**: 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)