fix(breadcrumb): 基于浏览器实测数据修复对齐问题

根因(通过浏览器精确测量确认):
- 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 更紧凑
This commit is contained in:
张翔
2026-04-23 13:05:58 +08:00
parent 3804f227f4
commit 89ca8ae392
+6 -6
View File
@@ -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>
);