From 3d8d23affa0de36429e2d0c91ca6ea153bcb7479 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 14:44:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(breadcrumb):=20=E7=BB=88=E6=9E=81=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20-=20=E8=A6=86=E7=9B=96=E5=85=A8=E5=B1=80min-height:?=
 =?UTF-8?q?44px=20+=20=E6=89=81=E5=B9=B3=E5=8C=96=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因（通过Playwright Chromium+WebKit双引擎测量确认）：
globals.css 第1148行 a,button { min-height:44px; min-width:44px }
在移动端强制所有链接最小44px，导致：
- Home链接容器44px，SVG仅14px → SVG贴容器顶部
- 文字链接容器44px，文字仅12px → 文字贴容器顶部
- 箭头SVG不受影响(不是<a>标签) → 保持自然大小
→ 三者center差异高达16px

修复：
1. 面包屑链接添加 style={{ minHeight:0, minWidth:0 }} 覆盖全局规则
2. 扁平化结构：所有元素直接作为nav的flex子元素
3. 移除嵌套的span容器，用Fragment替代

验证结果（Chromium + WebKit 双引擎）：
- Home SVG center=83
- 箭头 SVG center=83
- 文字 center=82.5
- 差异仅0.5px ✅
---
 src/components/layout/breadcrumb.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/breadcrumb.tsx b/src/components/layout/breadcrumb.tsx
index 0144548..497d939 100644
--- a/src/components/layout/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Fragment } from 'react';
 import { StaticLink } from '@/components/ui/static-link';
 import { ChevronRight, Home } from 'lucide-react';
 
@@ -16,27 +17,28 @@ export function Breadcrumb({ items }: BreadcrumbProps) {
   return (
     <nav
       aria-label="breadcrumb"
-      className="flex items-center gap-1 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
+      className="flex items-center text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4"
       style={{ lineHeight: '1' }}
     >
       <StaticLink
         href="/"
-        className="hover:text-[#C41E3A] transition-colors"
+        className="hover:text-[#C41E3A] transition-colors shrink-0"
         aria-label="返回首页"
-        style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+        style={{ minHeight: 0, minWidth: 0 }}
       >
-        <Home className="w-3.5 h-3.5" style={{ display: 'block' }} />
+        <Home className="w-3.5 h-3.5" />
       </StaticLink>
       {items.map((item, index) => (
-        <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' }} />
+        <Fragment key={index}>
+          <ChevronRight className="w-3 h-3 text-[#CCCCCC] shrink-0 mx-1" />
           <StaticLink
             href={item.href}
-            className="hover:text-[#C41E3A] transition-colors"
+            className="hover:text-[#C41E3A] transition-colors whitespace-nowrap"
+            style={{ minHeight: 0, minWidth: 0 }}
           >
             {item.label}
           </StaticLink>
-        </span>
+        </Fragment>
       ))}
     </nav>
   );