zhangxiang
2fdee7e2ae
UI design restructure ~85%: design system complete, four-layer narrative model implemented, Consulting Professional aesthetic established. CMS-ification ~75%: all pages integrated with CMS data layer, seed script covers all content types, ISR + dynamic rendering enabled. Archive 12 legacy component versions to _archive/. Quality gates: type-check, 992 tests, coverage all passing.
558 lines
23 KiB
TypeScript
558 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import { useState, Suspense } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { z } from 'zod';
|
|
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
|
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,
|
|
MessageSquare,
|
|
ArrowRight,
|
|
} from 'lucide-react';
|
|
import { COMPANY_INFO } from '@/lib/constants';
|
|
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
|
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
|
import { LegacyTooltip as Tooltip } from '@/components/ui/tooltip';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
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;
|
|
}
|
|
|
|
const FAQ_ITEMS = [
|
|
{
|
|
q: '你们的服务流程是怎样的？',
|
|
a: '通常分四步：需求沟通 → 方案评估 → 签约启动 → 敏捷交付。首次咨询免费，我们会在 2 个工作日内给出初步方案建议。',
|
|
},
|
|
{
|
|
q: '收费模式是怎样的？',
|
|
a: '根据项目规模和合作模式灵活定价。项目制按里程碑付款，订阅制按月结算，长期陪跑模式可协商年度合作方案。',
|
|
},
|
|
{
|
|
q: '数据安全如何保障？',
|
|
a: '我们严格遵守数据保护规范，签署保密协议，采用加密传输和权限隔离。项目结束后，客户数据按要求彻底清除。',
|
|
},
|
|
{
|
|
q: '项目周期一般多长？',
|
|
a: '小型项目 2-4 周，中型项目 1-3 个月，大型项目按阶段推进。我们会在方案评估阶段给出明确的时间线。',
|
|
},
|
|
];
|
|
|
|
function GrainOverlay() {
|
|
return (
|
|
<div
|
|
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
|
style={{
|
|
backgroundImage:
|
|
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
|
return (
|
|
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
|
<div className="w-14 h-px bg-brand" />
|
|
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
|
{children}
|
|
</span>
|
|
<div className="w-14 h-px bg-brand" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ContactFormContent() {
|
|
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 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;
|
|
fieldErrors[field] = issue.message;
|
|
});
|
|
setErrors(fieldErrors);
|
|
setToastMessage(`请检查表单：${Object.keys(fieldErrors).length} 项内容需要修正`);
|
|
setToastType('error');
|
|
setShowToast(true);
|
|
const firstErrorField = document.querySelector('[data-testid*="-input"][aria-invalid="true"]') as HTMLElement;
|
|
firstErrorField?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
firstErrorField?.focus();
|
|
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 data = await response.json();
|
|
|
|
if (response.ok && (data.success === 'true' || data.success === true)) {
|
|
trackContactForm({
|
|
name: formData.name,
|
|
email: formData.email,
|
|
company: formData.subject,
|
|
});
|
|
trackConversion('contact_form_submission');
|
|
setToastMessage('表单提交成功！我们会尽快与您联系。');
|
|
setToastType('success');
|
|
setShowToast(true);
|
|
setIsSubmitted(true);
|
|
setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
|
|
setErrors({});
|
|
} else {
|
|
const errorMsg = data.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
|
|
if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
|
|
setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email);
|
|
} else {
|
|
setToastMessage(errorMsg);
|
|
}
|
|
setToastType('error');
|
|
setShowToast(true);
|
|
}
|
|
} catch {
|
|
setToastMessage('网络错误，请稍后重试。');
|
|
setToastType('error');
|
|
setShowToast(true);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-ink text-white 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 pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
|
|
<GrainOverlay />
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
|
|
|
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
|
<ScrollReveal>
|
|
<SectionLabel>Contact Us</SectionLabel>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.1}>
|
|
<p className="text-lg text-white/60 mb-4">
|
|
工作日 2 小时内快速响应，首次咨询免费
|
|
</p>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.2}>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
|
|
随时欢迎
|
|
<span className="block mt-2 text-brand">聊一聊</span>
|
|
</h1>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={0.3}>
|
|
<p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
|
无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
|
|
</p>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Form + Info Section */}
|
|
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
|
<GrainOverlay />
|
|
|
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
|
|
|
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
|
<div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
|
|
{/* Left: Contact Info */}
|
|
<ScrollReveal className="lg:col-span-2 space-y-8">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-white mb-8">联系方式</h2>
|
|
<div className="space-y-6" data-testid="contact-info">
|
|
<div className="flex items-start gap-4 group" data-testid="email-info">
|
|
<div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
|
<Mail className="w-5 h-5 text-brand" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-white/50 mb-1">邮箱</p>
|
|
<a
|
|
href={`mailto:${COMPANY_INFO.email}`}
|
|
className="text-white hover:text-brand transition-colors duration-300"
|
|
data-testid="email-link"
|
|
>
|
|
{COMPANY_INFO.email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4 group" data-testid="address-info">
|
|
<div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
|
<MapPin className="w-5 h-5 text-brand" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-white/50 mb-1">地址</p>
|
|
<p className="text-white" data-testid="address-text">
|
|
{COMPANY_INFO.address}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border border-white/10 bg-ink p-8" data-testid="work-hours-card">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Clock className="w-5 h-5 text-brand" />
|
|
<h2 className="text-base font-semibold text-white">工作时间</h2>
|
|
</div>
|
|
<div className="flex justify-between" data-testid="work-hours-row">
|
|
<span className="text-white/60">周一至周五</span>
|
|
<span className="text-brand font-medium">9:00 - 18:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border border-white/10 bg-ink p-8">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<HeadphonesIcon className="w-5 h-5 text-brand" />
|
|
<h2 className="text-base font-semibold text-white">我们的承诺</h2>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
|
<p className="text-white/60">工作日 2 小时内快速响应您的咨询</p>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
|
<p className="text-white/60">提供免费的业务咨询和方案评估服务</p>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
|
<p className="text-white/60">根据您的需求量身定制最优解决方案</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Right: Form */}
|
|
<ScrollReveal delay={0.1} className="lg:col-span-3">
|
|
<div className="border border-white/10 bg-ink p-8 lg:p-10 h-full relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 right-0 h-1 bg-brand" />
|
|
|
|
<h2 className="text-xl font-semibold text-white mb-8">发送消息</h2>
|
|
|
|
{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-semibold text-white mb-3">消息已发送</h4>
|
|
<p className="text-white/60">感谢您的留言，我们会尽快与您联系！</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"
|
|
/>
|
|
<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-white/40 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-ink-light border-white/10 text-white placeholder:text-white/30 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-white/40 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-ink-light border-white/10 text-white placeholder:text-white/30 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-ink-light border-white/10 text-white placeholder:text-white/30 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-ink-light border-white/10 text-white placeholder:text-white/30 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-ink-light border-white/10 text-white placeholder:text-white/30 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>发送中...</span>
|
|
</span>
|
|
) : (
|
|
<>
|
|
<Send className="mr-2 h-5 w-5" />
|
|
发送消息
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink">
|
|
<GrainOverlay />
|
|
|
|
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
|
<ScrollReveal className="mb-16">
|
|
<SectionLabel>FAQ</SectionLabel>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
|
您可能想
|
|
<span className="text-brand">了解的</span>
|
|
</h2>
|
|
</ScrollReveal>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
|
|
{FAQ_ITEMS.map((faq, idx) => (
|
|
<ScrollReveal key={faq.q} delay={idx * 0.08}>
|
|
<div className="border border-white/10 bg-ink-light p-8 h-full hover:border-brand/30 transition-colors duration-300">
|
|
<div className="flex items-start gap-4">
|
|
<MessageSquare className="w-6 h-6 text-brand shrink-0 mt-0.5" strokeWidth={1.8} />
|
|
<div>
|
|
<h3 className="text-base font-semibold text-white mb-3">{faq.q}</h3>
|
|
<p className="text-sm text-white/60 leading-relaxed">{faq.a}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
|
<GrainOverlay />
|
|
|
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
|
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
|
</div>
|
|
|
|
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
|
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
|
<SectionLabel className="justify-center">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-px bg-brand" />
|
|
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
|
Get in Touch
|
|
</span>
|
|
<div className="w-14 h-px bg-brand" />
|
|
</div>
|
|
</SectionLabel>
|
|
|
|
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
|
还是想直接聊？
|
|
</h2>
|
|
|
|
<p className="text-lg md:text-xl text-white/60 leading-relaxed mb-12">
|
|
表单填起来太麻烦？直接发邮件到 {COMPANY_INFO.email}，我们同样会快速回复。
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-6 justify-center">
|
|
<Button size="xl" asChild>
|
|
<a href={`mailto:${COMPANY_INFO.email}`}>
|
|
发送邮件
|
|
<ArrowRight className="w-5 h-5 ml-2" />
|
|
</a>
|
|
</Button>
|
|
<Button size="xl" variant="outline" asChild>
|
|
<a href="/">回到首页</a>
|
|
</Button>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ContactContentV1() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="min-h-screen bg-ink flex items-center justify-center">
|
|
<div className="animate-pulse text-white/50">加载中...</div>
|
|
</div>
|
|
}
|
|
>
|
|
<ContactFormContent />
|
|
</Suspense>
|
|
);
|
|
}
|