张翔
7f36211342
- Replace decorative numbering and side-stripe borders with structured copy - Add scenario positioning, capability metrics and verifiable dimensions - Refine service timelines, deliverables and case-study narratives - Update content constants to support CMS seeding
577 lines
23 KiB
TypeScript
577 lines
23 KiB
TypeScript
'use client';
|
||
|
||
import { useState, Suspense } from 'react';
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { z } from 'zod';
|
||
import { motion } from 'framer-motion';
|
||
import { Button } from '@/components/ui/button';
|
||
import { LabeledInput as Input } from '@/components/ui/labeled-input';
|
||
import { LabeledTextarea as Textarea } from '@/components/ui/labeled-textarea';
|
||
import { Toast } from '@/components/ui/toast';
|
||
import {
|
||
Mail,
|
||
MapPin,
|
||
Send,
|
||
Loader2,
|
||
Clock,
|
||
HeadphonesIcon,
|
||
CheckCircle2,
|
||
HelpCircle,
|
||
ArrowRight,
|
||
} from 'lucide-react';
|
||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||
import { LegacyTooltip as Tooltip } from '@/components/ui/tooltip';
|
||
|
||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||
|
||
const contactFormSchema = z.object({
|
||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||
email: z.string().email('请输入有效的邮箱地址'),
|
||
subject: z.string().min(2, '主题至少需要2个字符'),
|
||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||
});
|
||
|
||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||
|
||
interface FormErrors {
|
||
name?: string;
|
||
phone?: string;
|
||
email?: string;
|
||
subject?: string;
|
||
message?: string;
|
||
}
|
||
|
||
interface ContactData {
|
||
heroSubtitle?: string;
|
||
heroTitle?: string;
|
||
heroDescription?: string;
|
||
contactTitle?: string;
|
||
emailLabel?: string;
|
||
addressLabel?: string;
|
||
email?: string;
|
||
address?: string;
|
||
workHoursTitle?: string;
|
||
dayLabel?: string;
|
||
hours?: string;
|
||
commitmentTitle?: string;
|
||
commitmentItems?: string[];
|
||
formTitle?: string;
|
||
successTitle?: string;
|
||
successMessage?: string;
|
||
submitLabel?: string;
|
||
submittingLabel?: string;
|
||
ctaSubtitle?: string;
|
||
ctaTitle?: string;
|
||
ctaDescription?: string;
|
||
ctaPrimaryLabel?: string;
|
||
ctaPrimaryHref?: string;
|
||
ctaSecondaryLabel?: string;
|
||
ctaSecondaryHref?: string;
|
||
}
|
||
|
||
function ContactFormContent({ data }: { data: ContactData }) {
|
||
const searchParams = useSearchParams();
|
||
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
||
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
||
const [toastMessage, setToastMessage] = useState(
|
||
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
||
);
|
||
const [toastType, setToastType] = useState<'success' | 'error'>(
|
||
isSuccessFromRedirect ? 'success' : 'success'
|
||
);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect);
|
||
const [formData, setFormData] = useState<ContactFormData>({
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
subject: '',
|
||
message: '',
|
||
});
|
||
const [errors, setErrors] = useState<FormErrors>({});
|
||
|
||
const emailAddress = data.email ?? '';
|
||
const addressText = data.address ?? '';
|
||
|
||
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) => {
|
||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||
if (errors[field]) {
|
||
validateField(field, value);
|
||
}
|
||
};
|
||
|
||
const handleBlur = (field: keyof ContactFormData, value: string) => {
|
||
validateField(field, value);
|
||
};
|
||
|
||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
|
||
const result = contactFormSchema.safeParse(formData);
|
||
|
||
if (!result.success) {
|
||
const fieldErrors: FormErrors = {};
|
||
result.error.issues.forEach((issue) => {
|
||
const field = issue.path[0] as keyof ContactFormData;
|
||
if (!fieldErrors[field]) {
|
||
fieldErrors[field] = issue.message;
|
||
}
|
||
});
|
||
setErrors(fieldErrors);
|
||
setToastMessage(`请检查表单：${Object.keys(fieldErrors).length} 项内容需要修正`);
|
||
setToastType('error');
|
||
setShowToast(true);
|
||
|
||
// 滚动到表单区域，让用户看到错误提示
|
||
setTimeout(() => {
|
||
const formSection = document.getElementById('contact-form-section');
|
||
if (formSection) {
|
||
formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}, 100);
|
||
return;
|
||
}
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
const formBody = new URLSearchParams();
|
||
formBody.append('name', formData.name);
|
||
formBody.append('phone', formData.phone);
|
||
formBody.append('email', formData.email);
|
||
formBody.append('subject', formData.subject);
|
||
formBody.append('message', formData.message);
|
||
|
||
const response = await fetch('/api/contact', {
|
||
method: 'POST',
|
||
body: formBody,
|
||
});
|
||
|
||
const resultData = await response.json();
|
||
|
||
if (response.ok && (resultData.success === 'true' || resultData.success === true)) {
|
||
trackContactForm({
|
||
name: formData.name,
|
||
email: formData.email,
|
||
company: formData.subject,
|
||
});
|
||
trackConversion('contact_form_submission');
|
||
setToastMessage(data.successMessage || '');
|
||
setToastType('success');
|
||
setShowToast(true);
|
||
setIsSubmitted(true);
|
||
setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
|
||
setErrors({});
|
||
} else {
|
||
const errorMsg = resultData.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
|
||
if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
|
||
setToastMessage(`表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ${emailAddress}`);
|
||
} else {
|
||
setToastMessage(errorMsg);
|
||
}
|
||
setToastType('error');
|
||
setShowToast(true);
|
||
}
|
||
} catch {
|
||
setToastMessage('网络错误，请稍后重试。');
|
||
setToastType('error');
|
||
setShowToast(true);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
}
|
||
|
||
const heroTitleLines = (data.heroTitle || '').split('\n');
|
||
const commitmentItems = data.commitmentItems ?? [];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white text-ink overflow-x-hidden">
|
||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
|
||
{showToast && (
|
||
<Toast
|
||
message={toastMessage}
|
||
type={toastType}
|
||
duration={toastType === 'error' ? 0 : undefined}
|
||
onClose={() => setShowToast(false)}
|
||
/>
|
||
)}
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-white">
|
||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||
<div className="max-w-4xl">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||
className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
|
||
>
|
||
{data.heroSubtitle || ''}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 40 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
|
||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
|
||
>
|
||
{heroTitleLines.map((line, i) => (
|
||
<div key={i} className={`block ${i > 0 ? 'mt-4 sm:mt-6' : ''}`}>
|
||
{i === 1 ? (
|
||
<span className="relative inline-block">
|
||
<span className="relative text-brand font-black">
|
||
{line}
|
||
<motion.span
|
||
className="absolute -bottom-2 left-0 w-full h-[3px] bg-brand"
|
||
style={{ transformOrigin: 'left' }}
|
||
initial={{ scaleX: 0 }}
|
||
animate={{ scaleX: 1 }}
|
||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||
/>
|
||
</span>
|
||
</span>
|
||
) : (
|
||
line
|
||
)}
|
||
</div>
|
||
))}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
|
||
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
|
||
>
|
||
{data.heroDescription || ''}
|
||
</motion.p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Form + Info Section */}
|
||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||
<div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
|
||
{/* Left: Contact Info */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-60px' }}
|
||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||
className="lg:col-span-2 space-y-8"
|
||
>
|
||
<div>
|
||
<h2 className="text-xl font-bold text-ink mb-8">{data.contactTitle || ''}</h2>
|
||
<div className="space-y-6" data-testid="contact-info">
|
||
<div className="flex items-start gap-4" data-testid="email-info">
|
||
<div className="w-12 h-12 border border-border-primary bg-white flex items-center justify-center shrink-0">
|
||
<Mail className="w-5 h-5 text-text-secondary" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-text-muted mb-1">{data.emailLabel || ''}</p>
|
||
<a
|
||
href={`mailto:${emailAddress}`}
|
||
className="text-ink hover:text-brand transition-colors duration-300"
|
||
data-testid="email-link"
|
||
>
|
||
{emailAddress}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4" data-testid="address-info">
|
||
<div className="w-12 h-12 border border-border-primary bg-white flex items-center justify-center shrink-0">
|
||
<MapPin className="w-5 h-5 text-text-secondary" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-text-muted mb-1">{data.addressLabel || ''}</p>
|
||
<p className="text-ink" data-testid="address-text">
|
||
{addressText}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative border border-border-primary bg-white p-8 overflow-hidden">
|
||
<div className="absolute top-0 left-0 bottom-0 w-0.5 bg-brand/60" />
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<Clock className="w-5 h-5 text-brand" />
|
||
<h2 className="text-base font-bold text-ink">{data.workHoursTitle || ''}</h2>
|
||
</div>
|
||
<div className="flex justify-between" data-testid="work-hours-row">
|
||
<span className="text-text-secondary">{data.dayLabel || ''}</span>
|
||
<span className="text-brand font-medium">{data.hours || ''}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative border border-border-primary bg-white p-8 overflow-hidden">
|
||
<div className="absolute top-0 left-0 bottom-0 w-0.5 bg-brand/60" />
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<HeadphonesIcon className="w-5 h-5 text-text-secondary" />
|
||
<h2 className="text-base font-bold text-ink">{data.commitmentTitle || ''}</h2>
|
||
</div>
|
||
<div className="space-y-4">
|
||
{commitmentItems.map((item, idx) => (
|
||
<div key={idx} className="flex items-start gap-3">
|
||
<div className="w-1 h-1 bg-text-muted rounded-full mt-2.5 shrink-0" />
|
||
<p className="text-text-secondary">{item}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Right: Form */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-60px' }}
|
||
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
|
||
className="lg:col-span-3"
|
||
>
|
||
<div className="relative border border-border-primary bg-white p-6 sm:p-8 lg:p-10 h-full overflow-hidden" id="contact-form-section">
|
||
<div className="absolute top-0 left-0 right-0 h-0.5 bg-brand" />
|
||
|
||
<h2 className="text-xl font-bold text-ink mb-8">{data.formTitle || ''}</h2>
|
||
|
||
{Object.keys(errors).length > 0 && (
|
||
<div className="mb-6 p-4 border border-brand/30 bg-brand/5" role="alert">
|
||
<p className="text-sm font-bold text-brand mb-2">
|
||
请修正以下 {Object.keys(errors).length} 项内容：
|
||
</p>
|
||
<ul className="space-y-1">
|
||
{Object.entries(errors).map(([field, message]) => (
|
||
<li key={field} className="text-sm text-text-secondary flex items-start gap-2">
|
||
<span className="text-brand shrink-0 mt-0.5">•</span>
|
||
<span>{message}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{isSubmitted ? (
|
||
<div className="text-center py-16">
|
||
<div className="w-20 h-20 bg-brand rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<CheckCircle2 className="w-10 h-10 text-white" />
|
||
</div>
|
||
<h4 className="text-2xl font-bold text-ink mb-3">{data.successTitle || ''}</h4>
|
||
<p className="text-text-secondary">{data.successMessage || ''}</p>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-6" noValidate>
|
||
<input
|
||
type="text"
|
||
name="website"
|
||
style={{ display: 'none' }}
|
||
tabIndex={-1}
|
||
autoComplete="off"
|
||
aria-hidden="true"
|
||
aria-label="honeypot"
|
||
/>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<div className="relative">
|
||
<Input
|
||
name="name"
|
||
data-testid="name-input"
|
||
label={
|
||
<span className="flex items-center gap-1.5">
|
||
姓名
|
||
<Tooltip content="用于正式沟通和方案报价">
|
||
<HelpCircle className="w-3.5 h-3.5 text-text-muted hover:text-brand cursor-help" />
|
||
</Tooltip>
|
||
</span>
|
||
}
|
||
id="name"
|
||
placeholder="请输入您的姓名"
|
||
required
|
||
value={formData.name}
|
||
onChange={(e) => handleChange('name', e.target.value)}
|
||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||
error={errors.name}
|
||
className="bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||
/>
|
||
</div>
|
||
<div className="relative">
|
||
<Input
|
||
name="phone"
|
||
data-testid="phone-input"
|
||
label={
|
||
<span className="flex items-center gap-1.5">
|
||
电话
|
||
<Tooltip content="接收项目进度通知和验证码，仅用于业务联系">
|
||
<HelpCircle className="w-3.5 h-3.5 text-text-muted hover:text-brand cursor-help" />
|
||
</Tooltip>
|
||
</span>
|
||
}
|
||
id="phone"
|
||
type="tel"
|
||
placeholder="请输入11位手机号"
|
||
required
|
||
value={formData.phone}
|
||
onChange={(e) => handleChange('phone', e.target.value)}
|
||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||
error={errors.phone}
|
||
className="bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Input
|
||
name="email"
|
||
data-testid="email-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}
|
||
className="bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||
/>
|
||
<Input
|
||
name="subject"
|
||
data-testid="subject-input"
|
||
label="主题"
|
||
id="subject"
|
||
placeholder="请输入消息主题"
|
||
required
|
||
value={formData.subject}
|
||
onChange={(e) => handleChange('subject', e.target.value)}
|
||
onBlur={(e) => handleBlur('subject', e.target.value)}
|
||
error={errors.subject}
|
||
className="bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||
/>
|
||
<Textarea
|
||
name="message"
|
||
data-testid="message-input"
|
||
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}
|
||
className="bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||
/>
|
||
<Button
|
||
type="submit"
|
||
data-testid="submit-button"
|
||
size="xl"
|
||
className="w-full h-14 disabled:opacity-70"
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? (
|
||
<span className="flex items-center justify-center gap-2">
|
||
<Loader2 className="h-5 w-5 animate-spin" />
|
||
<span>{data.submittingLabel || '...'}</span>
|
||
</span>
|
||
) : (
|
||
<>
|
||
<span>{data.submitLabel || '发送'}</span>
|
||
<Send className="h-4 w-4" />
|
||
</>
|
||
)}
|
||
</Button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-60px' }}
|
||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||
className="max-w-3xl mx-auto text-center"
|
||
>
|
||
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8">
|
||
{data.ctaSubtitle || ''}
|
||
</div>
|
||
|
||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-ink tracking-tight leading-tight mb-8">
|
||
{data.ctaTitle || ''}
|
||
</h2>
|
||
|
||
<p className="text-lg md:text-xl text-text-secondary leading-relaxed mb-12">
|
||
{data.ctaDescription || ''}
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
|
||
<a
|
||
href={data.ctaPrimaryHref || '#'}
|
||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||
>
|
||
{data.ctaPrimaryLabel || ''}
|
||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
|
||
</a>
|
||
<a
|
||
href={data.ctaSecondaryHref || '#'}
|
||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-bold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
|
||
>
|
||
{data.ctaSecondaryLabel || ''}
|
||
</a>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EmptyState() {
|
||
return (
|
||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||
<div className="text-text-muted text-lg">内容暂未发布</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function ContactContentV3({ data }: { data: Record<string, unknown> }) {
|
||
const contactData = data as ContactData;
|
||
|
||
// Empty state when no CMS data is available
|
||
if (!data || Object.keys(data).length === 0) {
|
||
return <EmptyState />;
|
||
}
|
||
|
||
return (
|
||
<Suspense
|
||
fallback={
|
||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||
<div className="animate-pulse text-text-muted">加载中...</div>
|
||
</div>
|
||
}
|
||
>
|
||
<ContactFormContent data={contactData} />
|
||
</Suspense>
|
||
);
|
||
}
|