From 89ca8ae3927530f03cd965e9f95b6cd1db91dc31 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 13:05:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(breadcrumb):=20=E5=9F=BA=E4=BA=8E=E6=B5=8F?=
 =?UTF-8?q?=E8=A7=88=E5=99=A8=E5=AE=9E=E6=B5=8B=E6=95=B0=E6=8D=AE=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=AF=B9=E9=BD=90=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因（通过浏览器精确测量确认）：
- w-5 h-5 使 Home 容器高度为 23px，而文字容器仅 16px
- 高度差 7px 导致 items-center 无法正确对齐

修复（基于实测数据）：
- 移除 Home 的 w-5 h-5 固定尺寸容器
- Home 图标缩小为 w-[14px] h-[14px] 匹配文字尺寸
- 箭头缩小为 w-3 h-3
- div 改为 span 减少块级布局影响
- gap 调整为 gap-1.5/gap-0.5 更紧凑
---
 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 e6adb44..f62ad71 100644
--- a/src/components/layout/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb.tsx
@@ -14,24 +14,24 @@ interface BreadcrumbProps {
 
 export function Breadcrumb({ items }: BreadcrumbProps) {
   return (
-    <nav aria-label="breadcrumb" className="flex items-center gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 leading-none">
+    <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="inline-flex items-center justify-center hover:text-[#C41E3A] transition-colors w-5 h-5"
+        className="inline-flex hover:text-[#C41E3A] transition-colors"
         aria-label="返回首页"
       >
-        <Home className="w-4 h-4" />
+        <Home className="w-[14px] h-[14px]" />
       </StaticLink>
       {items.map((item, index) => (
-        <div key={index} className="flex items-center">
-          <ChevronRight className="w-3.5 h-3.5 text-[#CCCCCC] mx-1 shrink-0" />
+        <span key={index} className="inline-flex items-center gap-0.5">
+          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0" />
           <StaticLink
             href={item.href}
             className="hover:text-[#C41E3A] transition-colors"
           >
             {item.label}
           </StaticLink>
-        </div>
+        </span>
       ))}
     </nav>
   );