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">