张翔
f6f5766bb9
修复首页/案例/产品/联系页 dogfood 测试发现的 7 个问题： - 案例页行业筛选按钮失效 - 产品矩阵页计数器显示 "0+" - ERP 产品详情页核心功能区空白占位 - 联系表单无提交反馈 - 服务卡片图标被屏幕阅读器读取 - 产品卡片链接文本重复类别标签 - 联系页装饰图标缺少 aria-hidden 添加 dogfood-regression-output 报告与截图。
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" aria-hidden="true">
|
|
<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" aria-hidden="true">
|
|
<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" aria-hidden="true" />
|
|
<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" aria-hidden="true" />
|
|
<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>
|
|
);
|
|
}
|