feat: 添加面包屑导航组件并优化页面布局

refactor: 重构页面结构和导航逻辑 fix: 修复移动端菜单导航和滚动行为 perf: 优化图片加载性能和资源请求 test: 添加端到端测试和性能测试用例 docs: 更新.gitignore文件 chore: 更新依赖和配置 style: 优化代码格式和类型安全 ci: 调整Playwright测试超时时间 build: 更新Next.js配置和构建选项
2026-02-28 09:09:04 +08:00
parent 9d01e0982f
commit 9451814ca4
60 changed files with 4078 additions and 148 deletions
@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import { COMPANY_INFO, STATS } from '@/lib/constants';
 import { Card, CardContent } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';

 export function AboutClient() {
@@ -70,6 +71,7 @@ export function AboutClient() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '关于我们', href: '/about' }]} />
      <PageHeader
        title="关于我们"
        description="了解睿新致远的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。"
@@ -2,8 +2,10 @@

 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowLeft, CheckCircle2, TrendingUp, Users, Target, Quote, Clock, MessageCircle, Award } from 'lucide-react';
 import { CASES } from '@/lib/constants';
 import type { StaticImageData } from 'next/image';
@@ -66,12 +68,14 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {

  return (
    <main className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '成功案例', href: '/cases' }, { label: caseItem.title, href: `/cases/${caseItem.id}` }]} />
      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
        <div className="container-wide relative z-10 pt-32 pb-20">
          <Button 
            variant="ghost" 
            className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
            onClick={() => router.back()}
+            type="button"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回
@@ -273,11 +277,14 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
                <p className="text-sm text-white/80 mb-4">
                  联系我们的专家团队，获取定制化解决方案
                </p>
-                <Link href="/#contact">
-                  <Button className="w-full bg-white text-[#C41E3A] hover:bg-white/90">
+                <Button 
+                  className="w-full bg-white text-[#C41E3A] hover:bg-white/90"
+                  asChild
+                >
+                  <Link href="/#contact">
                    联系我们
-                  </Button>
-                </Link>
+                  </Link>
+                </Button>
              </div>
            </div>
          </div>
@@ -33,5 +33,5 @@ export default async function CaseDetailPage({ params }: { params: Promise<{ id:
    notFound();
  }

-  return <CaseDetailClient caseItem={caseItem} />;
+  return <CaseDetailClient caseItem={caseItem as any} />;
 }
@@ -7,7 +7,8 @@ import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { PageHeader } from '@/components/ui/page-header';
-import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
+import { ArrowLeft, ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
 import { CASES } from '@/lib/constants';

 export default function CasesPage() {
@@ -16,6 +17,7 @@ export default function CasesPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '成功案例', href: '/cases' }]} />
      <PageHeader
        title="与谁同行，决定能走多远"
        description="我们与优秀的企业同行，共同成长，共创未来"
@@ -101,31 +103,23 @@ export default function CasesPage() {
            让我们与您同行，共创美好未来
          </p>
          <div className="flex justify-center gap-4">
-            <Button 
-              size="lg" 
-              variant="outline"
-              onClick={() => {
-                const element = document.getElementById('contact');
-                if (element) {
-                  element.scrollIntoView({ behavior: 'smooth' });
-                }
-              }}
-            >
-              联系我们
-            </Button>
-            <Button 
-              size="lg" 
-              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
-              onClick={() => {
-                const element = document.getElementById('contact');
-                if (element) {
-                  element.scrollIntoView({ behavior: 'smooth' });
-                }
-              }}
-            >
-              立即咨询
-              <ArrowRight className="ml-2 w-4 h-4" />
-            </Button>
+            <Link href="/#contact">
+              <Button 
+                size="lg" 
+                variant="outline"
+              >
+                联系我们
+              </Button>
+            </Link>
+            <Link href="/#contact">
+              <Button 
+                size="lg" 
+                className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+              >
+                立即咨询
+                <ArrowRight className="ml-2 w-4 h-4" />
+              </Button>
+            </Link>
          </div>
        </div>
      </motion.div>
@@ -7,12 +7,11 @@ export interface ContactFormState {
 }

 export async function submitContactForm(
-  prevState: ContactFormState | null,
+  _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;

@@ -1,6 +1,6 @@
 'use client';

-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useInView } from 'framer-motion';
 import { motion } from 'framer-motion';
 import { COMPANY_INFO } from '@/lib/constants';
@@ -9,25 +9,73 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';

 export default function ContactPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitResult, setSubmitResult] = useState<{ success: boolean; message?: string; error?: string } | null>(null);
+  const [mathAnswer, setMathAnswer] = useState('');
+  const [mathProblem, setMathProblem] = useState({ num1: 0, num2: 0, hash: '', timestamp: 0 });
  const contentRef = useRef(null);
  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });

  const isSubmitted = submitResult?.success || false;

+  useEffect(() => {
+    const num1 = Math.floor(Math.random() * 10) + 1;
+    const num2 = Math.floor(Math.random() * 10) + 1;
+    const answer = num1 + num2;
+    const timestamp = Date.now();
+    const hash = btoa(`${answer}-${timestamp}`);
+    setMathProblem({ num1, num2, hash, timestamp });
+  }, []);
+
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Form submission started');
-    setIsSubmitting(true);
-    setSubmitResult(null);
    
    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData);
-    console.log('FormData:', data);
+    
+    const honeypot = formData.get('website') as string;
+    if (honeypot) {
+      console.log('Honeypot triggered');
+      return;
+    }
+    
+    const userAnswer = parseInt(formData.get('mathAnswer') as string);
+    if (isNaN(userAnswer)) {
+      setSubmitResult({ success: false, error: '请输入验证码' });
+      return;
+    }
+    
+    const expectedHash = btoa(`${userAnswer}-${mathProblem.timestamp}`);
+    if (expectedHash !== mathProblem.hash) {
+      setSubmitResult({ success: false, error: '验证码错误，请重新计算' });
+      return;
+    }
+    
+    const submitTime = formData.get('submitTime') as string;
+    const timeDiff = Date.now() - parseInt(submitTime);
+    if (timeDiff < 2000) {
+      console.log('Too fast submission');
+      setSubmitResult({ success: false, error: '提交过快，请稍后再试' });
+      return;
+    }
+    
+    setIsSubmitting(true);
+    setSubmitResult(null);
+    
+    const submitData = {
+      ...data,
+      mathHash: mathProblem.hash,
+      mathTimestamp: mathProblem.timestamp,
+      mathAnswer: userAnswer,
+      submitTime: submitTime
+    };
+    
+    console.log('FormData:', submitData);
    
    try {
      const response = await fetch('/api/contact', {
@@ -35,12 +83,13 @@ export default function ContactPage() {
        headers: {
          'Content-Type': 'application/json',
        },
-        body: JSON.stringify(data),
+        body: JSON.stringify(submitData),
      });
      
      console.log('Response status:', response.status);
      const result = await response.json();
      console.log('Response result:', result);
+      console.log('Setting submitResult:', result);
      setSubmitResult(result);
    } catch (error) {
      console.error('Form submission error:', error);
@@ -52,6 +101,7 @@ export default function ContactPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '联系我们', href: '/contact' }]} />
      <PageHeader
        badge="联系我们"
        title="与我们取得联系"
@@ -210,6 +260,39 @@ export default function ContactPage() {
                        required
                      />
                    </div>
+                    
+                    <div className="space-y-3">
+                      <label htmlFor="mathAnswer" className="block text-sm font-medium text-[#1C1C1C] mb-2">
+                        验证码 *
+                      </label>
+                      <div className="flex items-center gap-4">
+                        <div className="bg-[#f9f9f9] px-4 py-2 rounded-lg text-[#1C1C1C] font-medium min-w-[120px] text-center">
+                          {mathProblem.num1} + {mathProblem.num2} = ?
+                        </div>
+                        <Input
+                          id="mathAnswer"
+                          name="mathAnswer"
+                          type="number"
+                          placeholder="请输入答案"
+                          value={mathAnswer}
+                          onChange={(e) => setMathAnswer(e.target.value)}
+                          required
+                          className="flex-1"
+                        />
+                      </div>
+                    </div>
+                    
+                    <input
+                      type="hidden"
+                      name="website"
+                      value=""
+                    />
+                    <input
+                      type="hidden"
+                      name="submitTime"
+                      value={Date.now()}
+                    />
+                    
                    <Button 
                      type="submit" 
                      className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white" 
@@ -1,4 +1,6 @@
 import { ErrorBoundary } from '@/components/ui/error-boundary';
+import { Header } from '@/components/layout/header';
+import { Footer } from '@/components/layout/footer';

 export default function MarketingLayout({
  children,
@@ -7,9 +9,11 @@ export default function MarketingLayout({
 }) {
  return (
    <div className="min-h-screen flex flex-col">
+      <Header />
      <ErrorBoundary>
        <main className="flex-1">{children}</main>
      </ErrorBoundary>
+      <Footer />
    </div>
  );
 }
@@ -1,21 +1,18 @@
 'use client';

+import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
+import { ArrowLeft, Calendar } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { NEWS } from '@/lib/constants';

-interface NewsItem {
-  id: string;
-  title: string;
-  category: string;
-  date: string;
-  excerpt: string;
-  content: string;
+interface NewsDetailClientProps {
+  news: typeof NEWS[0];
 }

 export function NewsDetailClient({ news }: NewsDetailClientProps) {
@@ -29,12 +26,14 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '新闻动态', href: '/news' }, { label: news.title, href: `/news/${news.id}` }]} />
      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
        <div className="container-wide relative z-10 pt-32 pb-20">
          <Button 
            variant="ghost" 
            className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
            onClick={() => router.back()}
+            type="button"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回
@@ -51,10 +50,6 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
                <Calendar className="w-5 h-5" />
                {news.date}
              </div>
-              <button className="flex items-center gap-2 hover:text-[#C41E3A] transition-colors">
-                <Share2 className="w-5 h-5" />
-                分享
-              </button>
            </div>
          </div>
        </div>
@@ -110,16 +105,16 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
          )}

          <div className="mt-16 flex justify-center gap-4">
-            <Button variant="outline" size="lg" asChild>
-              <Link href="/news">
+            <Link href="/news">
+              <Button variant="outline" size="lg">
                返回新闻列表
-              </Link>
-            </Button>
-            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
-              <Link href="/#contact">
+              </Button>
+            </Link>
+            <Link href="/#contact">
+              <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
                联系我们
-              </Link>
-            </Button>
+              </Button>
+            </Link>
          </div>
        </motion.div>
      </div>
@@ -32,5 +32,6 @@ export default async function NewsDetailPage({ params }: { params: Promise<{ slu
    notFound();
  }

-  return <NewsDetailClient news={news} />;
+  const serializedNews = JSON.parse(JSON.stringify(news));
+  return <NewsDetailClient news={serializedNews} />;
 }
@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { Search, Calendar, ArrowRight, ArrowLeft, Filter } from 'lucide-react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
@@ -32,6 +33,7 @@ export default function NewsListPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '新闻动态', href: '/news' }]} />
      <PageHeader
        title="新闻动态"
        description="了解睿新致远最新动态，把握行业发展脉搏"
@@ -1,8 +1,6 @@
 "use client";

 import dynamic from 'next/dynamic';
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
 import { HeroSection } from "@/components/sections/hero-section";
 import { SectionSkeleton } from "@/components/ui/loading-skeleton";

@@ -57,7 +55,6 @@ const ContactSection = dynamic(
 export default function HomePage() {
  return (
    <main className="min-h-screen bg-white dark:bg-[var(--color-bg-primary)]">
-      <Header />
      <HeroSection />
      <ServicesSection />
      <ProductsSection />
@@ -65,7 +62,6 @@ export default function HomePage() {
      <AboutSection />
      <NewsSection />
      <ContactSection />
-      <Footer />
    </main>
  );
 }
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { PRODUCTS } from '@/lib/constants';
 import { Button } from '@/components/ui/button';
 import { BackButton } from '@/components/ui/back-button';
-import { ArrowLeft, CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
+import { CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';

 export async function generateStaticParams() {
  return PRODUCTS.map((product) => ({
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, ArrowLeft, Check, TrendingUp } from 'lucide-react';
 import { PRODUCTS } from '@/lib/constants';

@@ -17,6 +18,7 @@ export default function ProductsPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '产品服务', href: '/products' }]} />
      <PageHeader
        title="产品服务"
        description="自主研发的企业级产品，助力企业高效运营，实现数字化转型"
@@ -2,8 +2,10 @@

 import { useRef } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { 
  ArrowLeft, 
  CheckCircle2, 
@@ -105,12 +107,14 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {

  return (
    <main className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '核心业务', href: '/services' }, { label: service.title, href: `/services/${service.id}` }]} />
      <div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
        <div className="container-wide relative z-10 pt-32 pb-20">
          <Button 
            variant="ghost" 
            className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10"
            onClick={() => router.back()}
+            type="button"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回
@@ -266,17 +270,17 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
          </section>

          <div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
-            <Button variant="outline" size="lg" asChild>
-              <Link href="/services">
+            <Link href="/services">
+              <Button variant="outline" size="lg">
                查看其他服务
-              </Link>
-            </Button>
-            <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
-              <Link href="/contact">
+              </Button>
+            </Link>
+            <Link href="/contact">
+              <Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
                开始您的转型之旅
                <ArrowRight className="ml-2 w-4 h-4" />
-              </Link>
-            </Button>
+              </Button>
+            </Link>
          </div>
        </div>
      </div>
@@ -33,5 +33,5 @@ export default async function ServiceDetailPage({ params }: { params: Promise<{
    notFound();
  }

-  return <ServiceDetailClient service={service} />;
+  return <ServiceDetailClient service={JSON.parse(JSON.stringify(service))} />;
 }
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { PageHeader } from '@/components/ui/page-header';
 import { ServiceCardSkeleton } from '@/components/ui/loading-skeleton';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, ArrowLeft, Code, Cloud, BarChart3, Shield } from 'lucide-react';
 import { SERVICES } from '@/lib/constants';

@@ -30,6 +31,7 @@ export default function ServicesPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '核心业务', href: '/services' }]} />
      <PageHeader
        title="核心业务"
        description="专业技术团队，为您提供全方位的数字化解决方案"
@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { PageHeader } from '@/components/ui/page-header';
+import { Breadcrumb } from '@/components/layout/breadcrumb';
 import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';

 export default function SolutionsPage() {
@@ -13,6 +14,7 @@ export default function SolutionsPage() {

  return (
    <div className="min-h-screen bg-white">
+      <Breadcrumb items={[{ label: '解决方案', href: '/solutions' }]} />
      <PageHeader
        title="三种角色，一种身份——您的成长伙伴"
        description="我们以伙伴的身份，陪您走过数字化转型的每一步"
@@ -1,10 +1,14 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+const companyEmail = process.env.COMPANY_EMAIL || 'contact@novalon.cn';

 export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
-    
-    const { name, email, phone, subject, message } = body;
+
+    const { name, email, phone, subject, message, website, submitTime, mathHash, mathTimestamp, mathAnswer } = body;

    if (!name || !email || !subject || !message) {
      return NextResponse.json(
@@ -21,8 +25,222 @@ export async function POST(request: NextRequest) {
      );
    }

+    if (website) {
+      console.log('Honeypot field filled, rejecting request');
+      return NextResponse.json(
+        { success: true, message: '消息已发送' },
+        { status: 200 }
+      );
+    }
+
+    if (submitTime) {
+      const timeDiff = Date.now() - parseInt(submitTime);
+      if (timeDiff < 2000) {
+        console.log('Submission too fast:', timeDiff);
+        return NextResponse.json(
+          { success: false, error: '提交过快，请稍后再试' },
+          { status: 400 }
+        );
+      }
+    }
+
+    if (mathHash && mathTimestamp && mathAnswer !== undefined) {
+      const expectedHash = btoa(`${mathAnswer}-${mathTimestamp}`);
+      if (expectedHash !== mathHash) {
+        console.log('Invalid math captcha');
+        return NextResponse.json(
+          { success: false, error: '验证码错误，请重新计算' },
+          { status: 400 }
+        );
+      }
+    }
+
+    const emailContent = `
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <style>
+            body { 
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; 
+              line-height: 1.6; 
+              color: #1C1C1C; 
+              margin: 0; 
+              padding: 0; 
+              background-color: #f5f5f5;
+            }
+            .container { 
+              max-width: 600px; 
+              margin: 0 auto; 
+              padding: 20px; 
+              background-color: #ffffff;
+            }
+            .header { 
+              background: #C41E3A; 
+              color: white; 
+              padding: 40px 30px; 
+              text-align: center;
+              border-radius: 8px 8px 0 0;
+            }
+            .header h1 { 
+              margin: 0; 
+              font-size: 28px; 
+              font-weight: 600;
+            }
+            .header p { 
+              margin: 10px 0 0 0; 
+              font-size: 14px; 
+              opacity: 0.9;
+            }
+            .content { 
+              padding: 40px 30px; 
+              background: #ffffff;
+            }
+            .info-card {
+              background: #f9f9f9;
+              border-radius: 8px;
+              padding: 20px;
+              margin-bottom: 25px;
+              border: 1px solid #e5e5e5;
+            }
+            .info-row {
+              display: flex;
+              margin-bottom: 12px;
+              align-items: flex-start;
+            }
+            .info-row:last-child {
+              margin-bottom: 0;
+            }
+            .info-label { 
+              font-weight: 600; 
+              color: #1C1C1C; 
+              min-width: 70px;
+              font-size: 14px;
+            }
+            .info-value { 
+              color: #5C5C5C; 
+              font-size: 14px;
+              flex: 1;
+            }
+            .message-box { 
+              background: #fff; 
+              padding: 20px; 
+              border-left: 4px solid #C41E3A; 
+              margin-top: 20px;
+              border-radius: 0 8px 8px 0;
+              box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            }
+            .message-label {
+              font-weight: 600;
+              color: #C41E3A;
+              font-size: 14px;
+              margin-bottom: 10px;
+            }
+            .message-content {
+              color: #1C1C1C;
+              font-size: 14px;
+              line-height: 1.8;
+              white-space: pre-wrap;
+            }
+            .footer { 
+              text-align: center; 
+              padding: 30px; 
+              color: #8C8C8C; 
+              font-size: 12px;
+              border-top: 1px solid #e5e5e5;
+            }
+            .footer a {
+              color: #C41E3A;
+              text-decoration: none;
+            }
+            .divider {
+              height: 1px;
+              background: #e5e5e5;
+              margin: 25px 0;
+            }
+            .badge {
+              display: inline-block;
+              background: #C41E3A;
+              color: white;
+              padding: 4px 12px;
+              border-radius: 12px;
+              font-size: 12px;
+              margin-bottom: 10px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <div class="header">
+              <h1>📬 新的客户咨询</h1>
+              <p>来自 睿新致远官方网站</p>
+            </div>
+            <div class="content">
+              <span class="badge">新消息</span>
+              
+              <div class="info-card">
+                <div class="info-row">
+                  <div class="info-label">姓名</div>
+                  <div class="info-value">${name}</div>
+                </div>
+                <div class="info-row">
+                  <div class="info-label">邮箱</div>
+                  <div class="info-value"><a href="mailto:${email}" style="color: #C41E3A; text-decoration: none;">${email}</a></div>
+                </div>
+                ${phone ? `
+                <div class="info-row">
+                  <div class="info-label">电话</div>
+                  <div class="info-value">${phone}</div>
+                </div>
+                ` : ''}
+                <div class="info-row">
+                  <div class="info-label">主题</div>
+                  <div class="info-value">${subject}</div>
+                </div>
+              </div>
+
+              <div class="message-box">
+                <div class="message-label">咨询内容</div>
+                <div class="message-content">${message}</div>
+              </div>
+
+              <div class="divider"></div>
+
+              <div style="text-align: center; color: #8C8C8C; font-size: 13px;">
+                <p>💡 提示：点击邮箱地址可直接回复客户</p>
+              </div>
+            </div>
+            <div class="footer">
+              <p style="margin-bottom: 10px;">本邮件由 睿新致远 官网联系表单自动发送，请勿直接回复此邮件</p>
+              <p style="margin-bottom: 10px;">如需回复客户，请点击上方邮箱地址或直接回复客户的原始邮件</p>
+              <p style="margin-bottom: 15px;">提交时间：${new Date().toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</p>
+              <p style="margin-top: 15px; border-top: 1px solid #e5e5e5; padding-top: 15px;">© ${new Date().getFullYear()} 四川睿新致远科技有限公司. All rights reserved.</p>
+            </div>
+          </div>
+        </body>
+      </html>
+    `;
+
+    const { data, error } = await resend.emails.send({
+      from: '睿新致远官网 <onboarding@resend.dev>',
+      to: [companyEmail],
+      subject: `📧 ${subject} - ${name}`,
+      html: emailContent,
+      replyTo: email,
+    });
+
+    if (error) {
+      console.error('Resend API error:', error);
+      return NextResponse.json(
+        { success: false, error: '邮件发送失败，请稍后重试' },
+        { status: 500 }
+      );
+    }
+
+    console.log('Email sent successfully:', data);
    return NextResponse.json({ success: true, message: '消息已发送' });
  } catch (error) {
+    console.error('Contact form submission error:', error);
    return NextResponse.json(
      { success: false, error: '提交失败,请重试' },
      { status: 500 }
@@ -0,0 +1,118 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Home, RefreshCw, AlertTriangle } from 'lucide-react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Application error:', error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="container-wide px-4 py-20">
+        <div className="max-w-2xl mx-auto text-center">
+          <div className="mb-8">
+            <div className="w-24 h-24 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-6">
+              <AlertTriangle className="w-12 h-12 text-[#C41E3A]" />
+            </div>
+            <div className="w-32 h-1 bg-[#C41E3A] mx-auto"></div>
+          </div>
+
+          <h1 className="text-3xl font-bold text-[#1C1C1C] mb-4">
+            出现了一些问题
+          </h1>
+
+          <p className="text-lg text-[#5C5C5C] mb-6 leading-relaxed">
+            很抱歉，我们遇到了一个意外错误。
+            请尝试刷新页面，或返回首页继续浏览。
+          </p>
+
+          {error.message && (
+            <div className="bg-[#FAFAFA] border border-[#E5E5E5] rounded-lg p-4 mb-8 text-left">
+              <p className="text-sm text-[#5C5C5C] font-mono">
+                错误信息: {error.message}
+              </p>
+              {error.digest && (
+                <p className="text-xs text-[#5C5C5C] mt-2 font-mono">
+                  错误ID: {error.digest}
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+            <Button
+              size="lg"
+              onClick={reset}
+              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+            >
+              <RefreshCw className="w-5 h-5 mr-2" />
+              重试
+            </Button>
+
+            <Button
+              size="lg"
+              variant="outline"
+              asChild
+            >
+              <Link href="/">
+                <Home className="w-5 h-5 mr-2" />
+                返回首页
+              </Link>
+            </Button>
+          </div>
+
+          <div className="bg-[#FAFAFA] rounded-lg p-8">
+            <h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
+              需要帮助？
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <Link
+                href="/contact"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <AlertTriangle className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">联系我们</div>
+                  <div className="text-sm text-[#5C5C5C]">获取技术支持</div>
+                </div>
+              </Link>
+
+              <Link
+                href="/services"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <RefreshCw className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">核心业务</div>
+                  <div className="text-sm text-[#5C5C5C]">了解我们的服务</div>
+                </div>
+              </Link>
+            </div>
+          </div>
+
+          <div className="mt-8 text-sm text-[#5C5C5C]">
+            如果问题持续存在，请{' '}
+            <Link href="/contact" className="text-[#C41E3A] hover:underline">
+              联系我们的技术团队
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/contexts/theme-context";
 import { WebVitals } from "@/components/analytics/web-vitals";
 import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
+import { ErrorBoundary } from "@/components/ui/error-boundary";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -144,7 +145,9 @@ export default function RootLayout({
      >
        <WebVitals />
        <ThemeProvider>
-          {children}
+          <ErrorBoundary>
+            {children}
+          </ErrorBoundary>
        </ThemeProvider>
        <MobileTabBar />
      </body>
@@ -0,0 +1,120 @@
+'use client';
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Home, ArrowLeft, Search } from 'lucide-react';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="container-wide px-4 py-20">
+        <div className="max-w-2xl mx-auto text-center">
+          <div className="mb-8">
+            <h1 className="text-[120px] font-bold text-[#C41E3A] leading-none mb-4">
+              404
+            </h1>
+            <div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6"></div>
+          </div>
+
+          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
+            页面未找到
+          </h2>
+
+          <p className="text-lg text-[#5C5C5C] mb-8 leading-relaxed">
+            很抱歉，您访问的页面不存在或已被移动。
+            请检查网址是否正确，或使用以下导航继续浏览。
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+            <Button
+              size="lg"
+              asChild
+              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
+            >
+              <Link href="/">
+                <Home className="w-5 h-5 mr-2" />
+                返回首页
+              </Link>
+            </Button>
+
+            <Button
+              size="lg"
+              variant="outline"
+              onClick={() => window.history.back()}
+            >
+              <ArrowLeft className="w-5 h-5 mr-2" />
+              返回上一页
+            </Button>
+          </div>
+
+          <div className="bg-[#FAFAFA] rounded-lg p-8">
+            <h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
+              您可能在寻找
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <Link
+                href="/about"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <Search className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">关于我们</div>
+                  <div className="text-sm text-[#5C5C5C]">了解睿新致远</div>
+                </div>
+              </Link>
+
+              <Link
+                href="/services"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <Search className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">核心业务</div>
+                  <div className="text-sm text-[#5C5C5C]">我们的服务</div>
+                </div>
+              </Link>
+
+              <Link
+                href="/products"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <Search className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">产品服务</div>
+                  <div className="text-sm text-[#5C5C5C]">企业级产品</div>
+                </div>
+              </Link>
+
+              <Link
+                href="/cases"
+                className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
+              >
+                <div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
+                  <Search className="w-5 h-5 text-[#C41E3A]" />
+                </div>
+                <div className="text-left">
+                  <div className="font-semibold text-[#1C1C1C]">成功案例</div>
+                  <div className="text-sm text-[#5C5C5C]">客户故事</div>
+                </div>
+              </Link>
+            </div>
+          </div>
+
+          <div className="mt-8 text-sm text-[#5C5C5C]">
+            如果您认为这是一个错误，请{' '}
+            <Link href="/contact" className="text-[#C41E3A] hover:underline">
+              联系我们
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}