官网留言通知

# 网站功能补全实施计划 > **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. **Goal:** 实现网站联系表单邮件发送、服务详情、产品详情、新闻动态完整功能、隐私政策和服务条款页面 **Architecture:** 采用 Next.js App Router 架构，使用 Resend API 发送邮件，服务详情使用模态框展示，产品详情和新闻详情使用动态路由页面，隐私政策和服务条款使用静态页面。 **Tech Stack:** Next.js 16, React 19, TypeScript, Resend SDK, Radix UI Dialog, Framer Motion, Zod --- ## 实施阶段概览 ### 阶段 1: 联系表单邮件发送（高优先级） - 创建 API Route 处理表单提交 - 实现邮件模板生成 - 配置环境变量和安全措施 - 修改前端组件集成 API ### 阶段 2: 服务详情功能（中优先级） - 扩展服务数据结构 - 创建服务详情模态框组件 - 修改服务卡片添加交互 ### 阶段 3: 产品详情功能（中优先级） - 扩展产品数据结构 - 创建产品详情页面 - 创建产品列表页面（可选） - 修改产品卡片添加链接 ### 阶段 4: 新闻动态完整功能（中优先级） - 扩展新闻数据结构 - 创建新闻列表页面 - 完善新闻详情页面 - 修改新闻卡片添加链接 ### 阶段 5: 隐私政策和服务条款（低优先级） - 创建隐私政策页面 - 创建服务条款页面 - 修改 Footer 链接 --- ## 阶段 1: 联系表单邮件发送 ### Task 1.1: 创建邮件模板工具 **Files:** - Create: `src/lib/email-templates.ts` **Step 1: 创建邮件模板文件** ```typescript import { COMPANY_INFO } from './constants'; export interface ContactFormData { name: string; phone: string; email: string; message: string; } export function generateNotificationEmail(data: ContactFormData): string { const submitTime = new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }); return ` 官网留言通知

客户姓名

${data.name}

联系电话

${data.phone}

电子邮箱

${data.email}

提交时间

${submitTime}

💬 留言内容

${data.message}

📩 快速回复

`.trim(); } export function generateConfirmationEmail(data: ContactFormData): string { return ` 感谢您的留言

🎉

尊敬的 ${data.name}，您好！

我们已收到您的留言，感谢您对${COMPANY_INFO.name}的关注与支持！

📋 您的留言内容

${data.message}

⏰ 预计回复时间：2小时内

工作日 9:00 - 18:00

📞 联系我们

📧 ${COMPANY_INFO.email}

📱 ${COMPANY_INFO.phone}

📍 ${COMPANY_INFO.address}

`.trim(); } ``` **Step 2: 验证文件创建成功** Run: `ls -la src/lib/email-templates.ts` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/lib/email-templates.ts git commit -m "feat: add email templates for contact form" ``` --- ### Task 1.2: 创建 API Route **Files:** - Create: `src/app/api/contact/route.ts` **Step 1: 创建 API Route 文件** ```typescript import { NextRequest, NextResponse } from 'next/server'; import { Resend } from 'resend'; import { z } from 'zod'; import { generateNotificationEmail, generateConfirmationEmail } from '@/lib/email-templates'; import { COMPANY_INFO } from '@/lib/constants'; const contactFormSchema = z.object({ name: z.string().min(2, '姓名至少需要2个字符').max(50, '姓名不能超过50个字符'), phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'), email: z.string().email('请输入有效的邮箱地址'), message: z.string().min(10, '留言内容至少需要10个字符').max(1000, '留言内容不能超过1000字符'), csrfToken: z.string().min(1, 'CSRF Token 不能为空'), }); type ContactFormData = z.infer; const resend = new Resend(process.env.RESEND_API_KEY); export async function POST(request: NextRequest) { try { const body = await request.json(); const result = contactFormSchema.safeParse(body); if (!result.success) { const errors = result.error.flatten().fieldErrors; return NextResponse.json( { success: false, message: '表单验证失败', errors, }, { status: 400 } ); } const data: ContactFormData = result.data; const companyEmail = process.env.COMPANY_EMAIL || COMPANY_INFO.email; const [notificationResult, confirmationResult] = await Promise.all([ resend.emails.send({ from: `${COMPANY_INFO.name} `, to: [companyEmail], subject: `[官网留言] 来自 ${data.name} 的咨询`, html: generateNotificationEmail(data), }), resend.emails.send({ from: `${COMPANY_INFO.name} `, to: [data.email], subject: `感谢您的留言 - ${COMPANY_INFO.name}`, html: generateConfirmationEmail(data), }), ]); if (notificationResult.error) { console.error('Notification email failed:', notificationResult.error); return NextResponse.json( { success: false, message: '邮件发送失败，请稍后重试', }, { status: 500 } ); } if (confirmationResult.error) { console.error('Confirmation email failed:', confirmationResult.error); } return NextResponse.json({ success: true, message: '邮件发送成功', }); } catch (error) { console.error('Contact form error:', error); return NextResponse.json( { success: false, message: '服务器错误，请稍后重试', }, { status: 500 } ); } } ``` **Step 2: 验证文件创建成功** Run: `ls -la src/app/api/contact/route.ts` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/api/contact/route.ts git commit -m "feat: add contact form API route with Resend integration" ``` --- ### Task 1.3: 配置环境变量 **Files:** - Create: `.env.local` - Modify: `.gitignore` **Step 1: 创建环境变量文件** ```bash cat > .env.local << 'EOF' # Resend API 配置 RESEND_API_KEY=re_xxxxxxxxxxxxxx # 邮件接收配置 COMPANY_EMAIL=contact@novalon.cn # 环境标识 NODE_ENV=development EOF ``` **Step 2: 验证文件创建成功** Run: `cat .env.local` Expected: 环境变量文件已创建 **Step 3: 更新 .gitignore** Read: `.gitignore` Add at end of file: ``` # Environment variables .env.local .env.*.local ``` **Step 4: 验证 .gitignore 更新** Run: `tail -5 .gitignore` Expected: 包含 .env.local 相关规则 **Step 5: Commit** ```bash git add .env.local .gitignore git commit -m "chore: add environment variables and update gitignore" ``` --- ### Task 1.4: 修改联系表单组件集成 API **Files:** - Modify: `src/components/sections/contact-section.tsx` **Step 1: 修改 handleSubmit 函数** Replace: existing `handleSubmit` function with: ```typescript async function handleSubmit(e: React.FormEvent) { e.preventDefault(); const storedToken = getCSRFTokenFromStorage(); if (!storedToken) { setToastMessage('安全验证失败，请刷新页面重试。'); setToastType('error'); setShowToast(true); return; } const result = contactFormSchema.safeParse(formData); if (!result.success) { const fieldErrors: FormErrors = {}; result.error.issues.forEach((issue) => { const field = issue.path[0] as keyof ContactFormData; fieldErrors[field] = issue.message; }); setErrors(fieldErrors); return; } setIsSubmitting(true); try { const response = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ...formData, csrfToken: storedToken, }), }); const data = await response.json(); if (!response.ok) { throw new Error(data.message || '提交失败'); } const newCsrfToken = generateCSRFToken(); setCSRFTokenToStorage(newCsrfToken); setIsSubmitting(false); setIsSubmitted(true); setToastMessage(data.message || '表单提交成功！我们会尽快与您联系。'); setToastType('success'); setShowToast(true); } catch (error) { setIsSubmitting(false); const errorMessage = error instanceof Error ? error.message : '提交失败，请稍后重试。'; setToastMessage(errorMessage); setToastType('error'); setShowToast(true); } } ``` **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/components/sections/contact-section.tsx git commit -m "feat: integrate contact form with API route" ``` --- ## 阶段 2: 服务详情功能 ### Task 2.1: 扩展服务数据结构 **Files:** - Modify: `src/lib/constants.ts` **Step 1: 扩展 SERVICES 数据** Replace: existing `SERVICES` array with: ```typescript export const SERVICES = [ { id: 'software', title: '软件开发', description: '提供定制化软件开发服务，包括Web应用、移动应用、企业管理系统等', icon: 'Code', details: { overview: '我们拥有经验丰富的开发团队，能够根据客户需求定制开发各类软件系统。从需求分析、方案设计到开发实施、测试部署，我们提供全流程的软件开发服务，确保交付高质量的软件产品。', features: [ '需求分析与方案设计', 'UI/UX 设计', '前端开发（React/Vue）', '后端开发（Node.js/Python）', '数据库设计与优化', '测试与部署', ], benefits: [ '量身定制的解决方案', '高质量代码交付', '完善的售后服务', '灵活的开发周期', ], process: [ { title: '需求调研', description: '深入了解客户业务需求，明确项目目标和范围' }, { title: '方案设计', description: '制定技术方案和实施计划，进行原型设计' }, { title: '开发实施', description: '按照敏捷开发模式，分阶段交付功能' }, { title: '测试验收', description: '全面测试确保质量，客户验收确认' }, { title: '上线运维', description: '部署上线，提供持续的技术支持' }, ], }, }, { id: 'cloud', title: '云服务', description: '提供云计算解决方案，包括云架构设计、云迁移、云运维等服务', icon: 'Cloud', details: { overview: '帮助企业实现云原生转型，提供从云架构设计、云迁移实施到云运维管理的全栈云服务。我们熟悉主流云平台（阿里云、腾讯云、AWS等），能够根据企业需求选择最适合的云解决方案。', features: [ '云架构设计与咨询', '云迁移实施', '容器化与微服务', 'DevOps 自动化', '云安全与合规', '云成本优化', ], benefits: [ '提升系统可扩展性', '降低IT基础设施成本', '提高业务敏捷性', '增强数据安全性', ], process: [ { title: '云评估', description: '评估现有系统，制定云迁移策略' }, { title: '架构设计', description: '设计云原生架构，选择合适的服务' }, { title: '迁移实施', description: '平滑迁移应用和数据，最小化业务中断' }, { title: '优化调优', description: '优化资源配置，提升性能和成本效益' }, { title: '运维监控', description: '7×24小时监控，确保系统稳定运行' }, ], }, }, { id: 'data', title: '数据分析', description: '提供大数据分析服务，帮助企业挖掘数据价值，支持决策制定', icon: 'BarChart3', details: { overview: '通过数据采集、清洗、分析和可视化，帮助企业从海量数据中挖掘有价值的信息。我们提供从数据平台搭建、数据分析模型构建到数据可视化的全流程数据服务。', features: [ '数据采集与集成', '数据仓库建设', '数据分析与建模', '数据可视化', '实时数据监控', '预测分析', ], benefits: [ '数据驱动决策', '发现业务洞察', '提升运营效率', '优化客户体验', ], process: [ { title: '数据评估', description: '评估数据现状，明确分析需求' }, { title: '平台搭建', description: '搭建数据仓库和分析平台' }, { title: '模型构建', description: '构建数据分析模型和算法' }, { title: '可视化开发', description: '开发数据可视化仪表盘' }, { title: '持续优化', description: '持续优化模型，提升分析准确性' }, ], }, }, { id: 'security', title: '信息安全', description: '提供信息安全咨询和解决方案，保护企业数据资产安全', icon: 'Shield', details: { overview: '为企业提供全方位的信息安全解决方案，包括安全评估、安全加固、安全监控等。我们帮助企业建立完善的安全防护体系，保护企业数据资产和业务系统安全。', features: [ '安全评估与审计', '安全加固与防护', '安全监控与响应', '数据加密与脱敏', '身份认证与授权', '安全培训与咨询', ], benefits: [ '降低安全风险', '满足合规要求', '保护数据资产', '提升安全意识', ], process: [ { title: '安全评估', description: '全面评估系统安全现状，识别安全风险' }, { title: '方案设计', description: '制定安全加固方案和应急响应计划' }, { title: '安全实施', description: '部署安全防护措施，加固系统安全' }, { title: '监控响应', description: '7×24小时安全监控，及时响应安全事件' }, { title: '持续改进', description: '定期安全审计，持续优化安全策略' }, ], }, }, ] as const; ``` **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/lib/constants.ts git commit -m "feat: extend services data with detailed information" ``` --- ### Task 2.2: 创建服务详情模态框组件 **Files:** - Create: `src/components/services/service-detail-modal.tsx` - Create: `src/lib/types.ts` **Step 1: 创建类型定义文件** ```typescript export interface Service { id: string; title: string; description: string; icon: string; details?: { overview: string; features: string[]; benefits: string[]; process: Array<{ title: string; description: string; }>; }; } export interface Product { id: string; title: string; description: string; image: string; category: string; features: string[]; benefits: string[]; details?: { overview: string; screenshots: string[]; detailedFeatures: Array<{ name: string; description: string; icon: string; }>; scenarios: string[]; techStack: string[]; pricing: { type: string; startingFrom: string; includes: string; }; }; } export interface News { id: string; slug: string; title: string; excerpt: string; date: string; category: string; image: string; content: string; author?: string; views?: number; tags?: string[]; featured?: boolean; } ``` **Step 2: 创建模态框组件** ```typescript 'use client'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Check, ArrowRight } from 'lucide-react'; import { SERVICES } from '@/lib/constants'; interface ServiceDetailModalProps { serviceId: string | null; open: boolean; onOpenChange: (open: boolean) => void; } export function ServiceDetailModal({ serviceId, open, onOpenChange }: ServiceDetailModalProps) { if (!serviceId) return null; const service = SERVICES.find((s) => s.id === serviceId); if (!service || !service.details) return null; const { details } = service; return ( ); } ``` **Step 3: 验证文件创建** Run: `ls -la src/components/services/service-detail-modal.tsx src/lib/types.ts` Expected: 文件已创建 **Step 4: Commit** ```bash git add src/components/services/service-detail-modal.tsx src/lib/types.ts git commit -m "feat: add service detail modal component" ``` --- ### Task 2.3: 修改服务卡片添加交互 **Files:** - Modify: `src/components/sections/services-section.tsx` **Step 1: 添加状态和交互逻辑** Add after imports: ```typescript import { useState } from 'react'; import { ServiceDetailModal } from '@/components/services/service-detail-modal'; ``` Add inside component before return statement: ```typescript const [selectedService, setSelectedService] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const handleServiceClick = (serviceId: string) => { setSelectedService(serviceId); setIsModalOpen(true); }; const handleViewAllServices = () => { setSelectedService('all'); setIsModalOpen(true); }; ``` Replace: Card component with: ```typescript handleServiceClick(service.id)} > ``` Replace: "查看全部服务" Button with: ```typescript ``` Add before closing `` tag: ```typescript ``` **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/components/sections/services-section.tsx git commit -m "feat: add service detail modal interaction" ``` --- ## 阶段 3: 产品详情功能 ### Task 3.1: 扩展产品数据结构 **Files:** - Modify: `src/lib/constants.ts` **Step 1: 扩展 PRODUCTS 数据** Replace: existing `PRODUCTS` array with detailed product data including overview, screenshots, detailedFeatures, scenarios, techStack, and pricing for each product. **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/lib/constants.ts git commit -m "feat: extend products data with detailed information" ``` --- ### Task 3.2: 创建产品详情页面 **Files:** - Create: `src/app/(marketing)/products/[id]/page.tsx` **Step 1: 创建产品详情页面** Create product detail page with sections for overview, features, scenarios, tech stack, pricing, and CTA. **Step 2: 验证文件创建** Run: `ls -la src/app/$marketing$/products/\[id\]/page.tsx` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/$marketing$/products/\[id\]/page.tsx git commit -m "feat: add product detail page" ``` --- ### Task 3.3: 创建产品列表页面 **Files:** - Create: `src/app/(marketing)/products/page.tsx` **Step 1: 创建产品列表页面** Create products list page with grid layout and links to detail pages. **Step 2: 验证文件创建** Run: `ls -la src/app/$marketing$/products/page.tsx` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/$marketing$/products/page.tsx git commit -m "feat: add products list page" ``` --- ### Task 3.4: 修改产品卡片添加链接 **Files:** - Modify: `src/components/sections/products-section.tsx` **Step 1: 添加 Link 组件导入** Add to imports: ```typescript import Link from 'next/link'; ``` **Step 2: 修改 Card 组件** Replace: Card component with Link wrapper. **Step 3: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 4: Commit** ```bash git add src/components/sections/products-section.tsx git commit -m "feat: add product detail links" ``` --- ## 阶段 4: 新闻动态完整功能 ### Task 4.1: 扩展新闻数据结构 **Files:** - Modify: `src/lib/constants.ts` **Step 1: 扩展 NEWS 数据** Replace: existing `NEWS` array with detailed news data including slug, author, views, tags, and featured fields. **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/lib/constants.ts git commit -m "feat: extend news data with detailed information" ``` --- ### Task 4.2: 创建新闻列表页面 **Files:** - Create: `src/app/(marketing)/news/page.tsx` **Step 1: 创建新闻列表页面** Create news list page with category filtering, search, and grid layout. **Step 2: 验证文件创建** Run: `ls -la src/app/$marketing$/news/page.tsx` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/$marketing$/news/page.tsx git commit -m "feat: add news list page with filtering and search" ``` --- ### Task 4.3: 完善新闻详情页面 **Files:** - Modify: `src/app/(marketing)/news/[slug]/page.tsx` **Step 1: 完善新闻详情页面** Update news detail page with full content display, related news, and sharing functionality. **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/app/$marketing$/news/\[slug\]/page.tsx git commit -m "feat: enhance news detail page" ``` --- ### Task 4.4: 修改新闻卡片添加链接 **Files:** - Modify: `src/components/sections/news-section.tsx` **Step 1: 修改新闻卡片链接** Update news cards to link to detail pages using slug. **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/components/sections/news-section.tsx git commit -m "feat: add news detail links" ``` --- ## 阶段 5: 隐私政策和服务条款 ### Task 5.1: 创建隐私政策页面 **Files:** - Create: `src/app/(marketing)/privacy/page.tsx` **Step 1: 创建隐私政策页面** Create privacy policy page with sections for data collection, usage, sharing, security, cookies, user rights, and contact information. **Step 2: 验证文件创建** Run: `ls -la src/app/$marketing$/privacy/page.tsx` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/$marketing$/privacy/page.tsx git commit -m "feat: add privacy policy page" ``` --- ### Task 5.2: 创建服务条款页面 **Files:** - Create: `src/app/(marketing)/terms/page.tsx` **Step 1: 创建服务条款页面** Create terms of service page with sections for service description, user responsibilities, intellectual property, disclaimer, service changes, dispute resolution, applicable law, and updates. **Step 2: 验证文件创建** Run: `ls -la src/app/$marketing$/terms/page.tsx` Expected: 文件已创建 **Step 3: Commit** ```bash git add src/app/$marketing$/terms/page.tsx git commit -m "feat: add terms of service page" ``` --- ### Task 5.3: 修改 Footer 链接 **Files:** - Modify: `src/components/layout/footer.tsx` **Step 1: 更新 Footer 链接** Update privacy policy and terms of service links to point to the new pages. **Step 2: 验证修改** Run: `npm run lint` Expected: 无 lint 错误 **Step 3: Commit** ```bash git add src/components/layout/footer.tsx git commit -m "feat: update footer links to privacy and terms pages" ``` --- ## 测试计划 ### 阶段 1 测试：联系表单邮件发送 1. 本地测试 - 启动开发服务器 - 填写表单并提交 - 检查邮件是否收到 2. 验证测试 - 测试必填字段 - 测试无效邮箱格式 - 测试无效手机号 - 测试留言长度限制 3. 安全测试 - 测试 CSRF Token 验证 - 测试 XSS 攻击防护 ### 阶段 2 测试：服务详情功能 1. 点击服务卡片打开详情模态框 2. 验证所有服务都能正常显示 3. 测试模态框打开和关闭 ### 阶段 3 测试：产品详情功能 1. 点击产品卡片跳转到详情页 2. 验证产品详情页面显示完整 3. 测试返回列表功能 ### 阶段 4 测试：新闻动态功能 1. 点击新闻卡片跳转到详情页 2. 测试新闻列表分类筛选 3. 测试新闻搜索功能 ### 阶段 5 测试：隐私政策和服务条款 1. 点击 Footer 链接跳转到对应页面 2. 验证页面内容完整 3. 测试返回首页功能 --- ## 完成标准 - [ ] 所有功能实现完成 - [ ] 所有测试通过 - [ ] 代码通过 lint 检查 - [ ] 类型检查通过 - [ ] 构建成功 - [ ] 所有 commit 已完成 - [ ] 文档已更新（如需要）

📧 官网留言通知

✅ 感谢您的留言

服务概述

核心功能

服务优势

服务流程

{step.title}