fix(breadcrumb): 终极修复 - 覆盖全局min-height:44px + 扁平化结构

根因(通过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 
This commit is contained in:
张翔
2026-04-23 14:44:37 +08:00
parent 751d37af6e
commit 3d8d23affa
+10 -8
View File
@@ -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>
);