From 751d37af6efb0c7d9dfb2b52b3cf9db3584bb73d 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:43:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(breadcrumb):=20=E7=AC=AC10=E6=AC=A1?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20-=20=E7=BB=9F=E4=B8=80alignItems=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因（通过Playwright精确测量确认）：
- Home SVG top=76, 箭头 SVG top=92, 差异16px
- Home链接没有 alignItems:'center'
- 箭头容器有 alignItems:'center' → 导致SVG被居中

修复：
- 给Home链接添加 alignItems:'center', justifyContent:'center'
- 移除无效的 verticalAlign:'middle'
- 所有SVG统一使用 display:'block'

验证结果：
- Home SVG top=91, 箭头 SVG top=92, 差异1px ✅
---
 src/components/layout/breadcrumb.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/breadcrumb.tsx b/src/components/layout/breadcrumb.tsx
index 229d0ce..0144548 100644
--- a/src/components/layout/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb.tsx
@@ -21,19 +21,18 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
     >
       <StaticLink
         href="/"
-        className="hover:text-[#C41E3A] transition-colors align-middle"
+        className="hover:text-[#C41E3A] transition-colors"
         aria-label="返回首页"
-        style={{ display: 'inline-flex', verticalAlign: 'middle' }}
+        style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
       >
-        <Home className="w-3.5 h-3.5" style={{ display: 'block', verticalAlign: 'middle' }} />
+        <Home className="w-3.5 h-3.5" style={{ display: 'block' }} />
       </StaticLink>
       {items.map((item, index) => (
-        <span key={index} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
-          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" />
+        <span key={index} style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-0.5" style={{ display: 'block' }} />
           <StaticLink
             href={item.href}
             className="hover:text-[#C41E3A] transition-colors"
-            style={{ verticalAlign: 'middle' }}
           >
             {item.label}
           </StaticLink>