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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user