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
@@ -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>
+  );
+}