From 05452b7dcf8704efe72d4ed2e3871ba3f9a01906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Thu, 23 Apr 2026 11:30:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(breadcrumb):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=9D=A2=E5=8C=85=E5=B1=91=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 响应式间距：移动端 gap-1，桌面端 gap-2
- 响应式文字：移动端 text-xs，桌面端 text-sm
- 响应式图标：移动端 w-3.5 h-3.5，桌面端 w-4 h-4
- 增加点击区域：添加 p-1 扩大可点击范围
- 防止布局错位：使用 shrink-0 防止元素被压缩
- 支持横向滚动：overflow-x-auto 处理内容溢出
---
 src/components/layout/breadcrumb.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/breadcrumb.tsx b/src/components/layout/breadcrumb.tsx
index 8e4522f..9ba07ee 100644
--- a/src/components/layout/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb.tsx
@@ -14,16 +14,20 @@ interface BreadcrumbProps {
 
 export function Breadcrumb({ items }: BreadcrumbProps) {
   return (
-    <nav aria-label="breadcrumb" className="flex items-center space-x-2 text-sm text-[#5C5C5C] py-4">
-      <StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
-        <Home className="w-4 h-4" />
+    <nav aria-label="breadcrumb" className="flex items-center gap-1 md:gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 overflow-x-auto">
+      <StaticLink 
+        href="/" 
+        className="flex items-center hover:text-[#C41E3A] transition-colors shrink-0 p-1 -ml-1 md:ml-0" 
+        aria-label="返回首页"
+      >
+        <Home className="w-3.5 h-3.5 md:w-4 md:h-4" />
       </StaticLink>
       {items.map((item, index) => (
-        <div key={index} className="flex items-center">
-          <ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
+        <div key={index} className="flex items-center shrink-0">
+          <ChevronRight className="w-3 h-3 md:w-4 md:h-4 text-[#E5E5E5]" />
           <StaticLink
             href={item.href}
-            className="ml-2 hover:text-[#C41E3A] transition-colors"
+            className="ml-1 md:ml-2 hover:text-[#C41E3A] transition-colors p-1 -mr-1 md:mr-0"
           >
             {item.label}
           </StaticLink>