张翔
355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect, useRef } from 'react';
|
||
import { z } from 'zod';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Toast } from '@/components/ui/toast';
|
||
import { sanitizeInput } from '@/lib/sanitize';
|
||
import { generateCSRFToken, setCSRFTokenToStorage, getCSRFTokenFromStorage } from '@/lib/csrf';
|
||
import { Mail, Phone, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
|
||
import { COMPANY_INFO } from '@/lib/constants';
|
||
|
||
const contactFormSchema = z.object({
|
||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||
email: z.string().email('请输入有效的邮箱地址'),
|
||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||
});
|
||
|
||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||
|
||
interface FormErrors {
|
||
name?: string;
|
||
phone?: string;
|
||
email?: string;
|
||
message?: string;
|
||
}
|
||
|
||
export function ContactSection() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||
const [showToast, setShowToast] = useState(false);
|
||
const [toastMessage, setToastMessage] = useState('');
|
||
const [toastType, setToastType] = useState<'success' | 'error'>('success');
|
||
const [formData, setFormData] = useState<ContactFormData>({
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
message: '',
|
||
});
|
||
const [errors, setErrors] = useState<FormErrors>({});
|
||
const sectionRef = useRef<HTMLElement>(null);
|
||
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
setIsVisible(true);
|
||
}
|
||
},
|
||
{ threshold: 0.1 }
|
||
);
|
||
|
||
if (sectionRef.current) {
|
||
observer.observe(sectionRef.current);
|
||
}
|
||
|
||
const csrfToken = generateCSRFToken();
|
||
setCSRFTokenToStorage(csrfToken);
|
||
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const validateField = (field: keyof ContactFormData, value: string) => {
|
||
try {
|
||
contactFormSchema.shape[field].parse(value);
|
||
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
||
} catch (error) {
|
||
if (error instanceof z.ZodError) {
|
||
const fieldError = error.issues[0];
|
||
if (fieldError) {
|
||
setErrors((prev) => ({ ...prev, [field]: fieldError.message }));
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleChange = (field: keyof ContactFormData, value: string) => {
|
||
const sanitizedValue = sanitizeInput(value);
|
||
setFormData((prev) => ({ ...prev, [field]: sanitizedValue }));
|
||
if (errors[field]) {
|
||
validateField(field, sanitizedValue);
|
||
}
|
||
};
|
||
|
||
const handleBlur = (field: keyof ContactFormData, value: string) => {
|
||
validateField(field, value);
|
||
};
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
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('表单提交成功！我们会尽快与您联系。');
|
||
setToastType('success');
|
||
setShowToast(true);
|
||
} catch (error) {
|
||
setIsSubmitting(false);
|
||
setToastMessage(error instanceof Error ? error.message : '提交失败，请稍后重试。');
|
||
setToastType('error');
|
||
setShowToast(true);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||
{showToast && (
|
||
<Toast
|
||
message={toastMessage}
|
||
type={toastType}
|
||
onClose={() => setShowToast(false)}
|
||
/>
|
||
)}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,0.03)] via-transparent to-transparent" />
|
||
</div>
|
||
|
||
<div className="container-wide relative z-10">
|
||
<div
|
||
className={`
|
||
mb-16 opacity-0 translate-y-4
|
||
${isVisible ? 'animate-fade-in-up' : ''}
|
||
`}
|
||
>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
||
</div>
|
||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||
开启 <span className="text-[#C41E3A]">合作</span>
|
||
</h2>
|
||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||
<div
|
||
className={`
|
||
lg:col-span-2 space-y-8 flex flex-col
|
||
opacity-0 translate-y-4
|
||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||
`}
|
||
>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start gap-4 group">
|
||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||
<Mail className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
||
{COMPANY_INFO.email}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-4 group">
|
||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||
<Phone className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-[#5C5C5C] mb-1">电话</p>
|
||
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
||
{COMPANY_INFO.phone}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-4 group">
|
||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||
<MapPin className="w-5 h-5 text-white" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h4>
|
||
</div>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start gap-2">
|
||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
|
||
<p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
|
||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
|
||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`
|
||
lg:col-span-3 flex flex-col
|
||
opacity-0 translate-y-4
|
||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||
`}
|
||
>
|
||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
||
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h3>
|
||
|
||
{isSubmitted ? (
|
||
<div className="text-center py-12 flex-1 flex items-center justify-center">
|
||
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
|
||
<CheckCircle2 className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
|
||
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<Input
|
||
label="姓名"
|
||
id="name"
|
||
placeholder="请输入您的姓名"
|
||
required
|
||
value={formData.name}
|
||
onChange={(e) => handleChange('name', e.target.value)}
|
||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||
error={errors.name}
|
||
/>
|
||
<Input
|
||
label="电话"
|
||
id="phone"
|
||
type="tel"
|
||
placeholder="请输入您的电话"
|
||
required
|
||
value={formData.phone}
|
||
onChange={(e) => handleChange('phone', e.target.value)}
|
||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||
error={errors.phone}
|
||
/>
|
||
</div>
|
||
<Input
|
||
label="邮箱"
|
||
id="email"
|
||
type="email"
|
||
placeholder="请输入您的邮箱"
|
||
required
|
||
value={formData.email}
|
||
onChange={(e) => handleChange('email', e.target.value)}
|
||
onBlur={(e) => handleBlur('email', e.target.value)}
|
||
error={errors.email}
|
||
/>
|
||
<Textarea
|
||
label="留言内容"
|
||
id="message"
|
||
placeholder="请输入您想咨询的内容"
|
||
rows={5}
|
||
required
|
||
value={formData.message}
|
||
onChange={(e) => handleChange('message', e.target.value)}
|
||
onBlur={(e) => handleBlur('message', e.target.value)}
|
||
error={errors.message}
|
||
/>
|
||
<Button
|
||
type="submit"
|
||
size="lg"
|
||
className="w-full group mt-auto"
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
发送中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
|
||
发送消息
|
||
</>
|
||
)}
|
||
</Button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|