fix(breadcrumb): 优化移动端面包屑样式

- 响应式间距:移动端 gap-1,桌面端 gap-2
- 响应式文字:移动端 text-xs,桌面端 text-sm
- 响应式图标:移动端 w-3.5 h-3.5,桌面端 w-4 h-4
- 增加点击区域:添加 p-1 扩大可点击范围
- 防止布局错位:使用 shrink-0 防止元素被压缩
- 支持横向滚动:overflow-x-auto 处理内容溢出
This commit is contained in:
张翔
2026-04-23 11:30:34 +08:00
parent 7484512252
commit 05452b7dcf
+10 -6
View File
@@ -14,16 +14,20 @@ interface BreadcrumbProps {
export function Breadcrumb({ items }: BreadcrumbProps) {
return (
<nav aria-label="breadcrumb" className="flex items-center space-x-2 text-sm text-[#5C5C5C] py-4">
<StaticLink href="/" className="flex items-center hover:text-[#C41E3A] transition-colors" aria-label="返回首页">
<Home className="w-4 h-4" />
<nav aria-label="breadcrumb" className="flex items-center gap-1 md:gap-2 text-xs md:text-sm text-[#5C5C5C] py-3 md:py-4 overflow-x-auto">
<StaticLink
href="/"
className="flex items-center hover:text-[#C41E3A] transition-colors shrink-0 p-1 -ml-1 md:ml-0"
aria-label="返回首页"
>
<Home className="w-3.5 h-3.5 md:w-4 md:h-4" />
</StaticLink>
{items.map((item, index) => (
<div key={index} className="flex items-center">
<ChevronRight className="w-4 h-4 text-[#E5E5E5]" />
<div key={index} className="flex items-center shrink-0">
<ChevronRight className="w-3 h-3 md:w-4 md:h-4 text-[#E5E5E5]" />
<StaticLink
href={item.href}
className="ml-2 hover:text-[#C41E3A] transition-colors"
className="ml-1 md:ml-2 hover:text-[#C41E3A] transition-colors p-1 -mr-1 md:mr-0"
>
{item.label}
</StaticLink>