From ed780e57622cc72bb8aaf020d2d943c9252ddaac 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:51:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(breadcrumb):=20=E4=BF=AE=E5=A4=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=9D=A2=E5=8C=85=E5=B1=91=E5=81=8F=E7=A7=BB?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根本原因：负边距(-ml-1/-mr-1)和不对称样式导致视觉偏移

修复内容：
- 移除所有负边距
- 统一图标大小为 w-4 h-4 (16px)
- 使用一致的间距系统 gap-1.5
- 对称的点击区域 p-1.5 rounded
---
 src/components/layout/breadcrumb.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

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