feat: implement contact form submission with validation

src/app/(marketing)/contact/actions.ts

@@ -0,0 +1,29 @@
+'use server';
+
+export interface ContactFormState {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+export async function submitContactForm(
+  prevState: ContactFormState | null,
+  formData: FormData
+): Promise<ContactFormState> {
+  const name = formData.get('name') as string;
+  const email = formData.get('email') as string;
+  const phone = formData.get('phone') as string;
+  const subject = formData.get('subject') as string;
+  const message = formData.get('message') as string;
+
+  if (!name || !email || !subject || !message) {
+    return { success: false, error: '请填写必填字段' };
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(email)) {
+    return { success: false, error: '请输入有效的邮箱地址' };
+  }
+
+  return { success: true, message: '消息已发送' };
+}

src/app/(marketing)/contact/page.tsx

@@ -13,18 +13,42 @@ import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
 
 export default function ContactPage() {
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null);
   const contentRef = useRef(null);
   const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
 
-  async function handleSubmit(_formData: FormData) {
+  const isSubmitted = submitResult?.success || false;
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Form submission started');
     setIsSubmitting(true);
+    setSubmitResult(null);
     
-    await new Promise(resolve => setTimeout(resolve, 1500));
+    const formData = new FormData(e.currentTarget);
+    const data = Object.fromEntries(formData);
+    console.log('FormData:', data);
     
-    setIsSubmitting(false);
-    setIsSubmitted(true);
-  }
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      
+      console.log('Response status:', response.status);
+      const result = await response.json();
+      console.log('Response result:', result);
+      setSubmitResult(result);
+    } catch (error) {
+      console.error('Form submission error:', error);
+      setSubmitResult({ success: false, error: '提交失败,请重试' });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
     <div className="min-h-screen bg-white">
@@ -121,7 +145,12 @@ export default function ContactPage() {
                     <p className="text-[#5C5C5C]">感谢您的留言，我们会尽快与您联系！</p>
                   </div>
                 ) : (
-                  <form action={handleSubmit} className="space-y-6">
+                  <form onSubmit={handleSubmit} className="space-y-6">
+                    {submitResult && !submitResult.success && (
+                      <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+                        {submitResult.error}
+                      </div>
+                    )}
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       <div>
                         <label htmlFor="name" className="block text-sm font-medium text-[#1C1C1C] mb-2">

src/app/api/contact/route.ts

@@ -1,84 +1,30 @@
 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<typeof contactFormSchema>;
-
-const resend = new Resend(process.env.RESEND_API_KEY);
 
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
+    
+    const { name, email, phone, subject, message } = body;
 
-    const result = contactFormSchema.safeParse(body);
-
-    if (!result.success) {
-      const errors = result.error.flatten().fieldErrors;
+    if (!name || !email || !subject || !message) {
       return NextResponse.json(
-        {
-          success: false,
-          message: '表单验证失败',
-          errors,
-        },
+        { success: false, error: '请填写必填字段' },
         { 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} <noreply@novalon.cn>`,
-        to: [companyEmail],
-        subject: `[官网留言] 来自 ${data.name} 的咨询`,
-        html: generateNotificationEmail(data),
-      }),
-      resend.emails.send({
-        from: `${COMPANY_INFO.name} <noreply@novalon.cn>`,
-        to: [data.email],
-        subject: `感谢您的留言 - ${COMPANY_INFO.name}`,
-        html: generateConfirmationEmail(data),
-      }),
-    ]);
-
-    if (notificationResult.error) {
-      console.error('Notification email failed:', notificationResult.error);
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
       return NextResponse.json(
-        {
-          success: false,
-          message: '邮件发送失败，请稍后重试',
-        },
-        { status: 500 }
+        { success: false, error: '请输入有效的邮箱地址' },
+        { status: 400 }
       );
     }
 
-    if (confirmationResult.error) {
-      console.error('Confirmation email failed:', confirmationResult.error);
-    }
-
-    return NextResponse.json({
-      success: true,
-      message: '邮件发送成功',
-    });
+    return NextResponse.json({ success: true, message: '消息已发送' });
   } catch (error) {
-    console.error('Contact form error:', error);
     return NextResponse.json(
-      {
-        success: false,
-        message: '服务器错误，请稍后重试',
-      },
+      { success: false, error: '提交失败,请重试' },
       { status: 500 }
     );
   }