fix(breadcrumb): 第10次修复 - 统一alignItems对齐策略

根因(通过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 
This commit is contained in:
张翔
2026-04-23 13:43:00 +08:00
parent 60d61cd5c6
commit 751d37af6e
+5 -6
View File
@@ -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>