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

refactor: 重构页面结构和导航逻辑

fix: 修复移动端菜单导航和滚动行为

perf: 优化图片加载性能和资源请求

test: 添加端到端测试和性能测试用例

docs: 更新.gitignore文件

chore: 更新依赖和配置

style: 优化代码格式和类型安全

ci: 调整Playwright测试超时时间

build: 更新Next.js配置和构建选项

src/components/layout/breadcrumb.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight, Home } from 'lucide-react';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav aria-label="breadcrumb" className="flex items-center space-x-2 text-sm text-[#5C5C5C] py-4">
+      <Link href="/" className="flex items-center hover:text-[#C41E3A] transition-colors">
+        <Home className="w-4 h-4" />
+      </Link>
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center">
+          <ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
+          <Link
+            href={item.href}
+            className="ml-2 hover:text-[#C41E3A] transition-colors"
+          >
+            {item.label}
+          </Link>
+        </div>
+      ))}
+    </nav>
+  );
+}