TabBar 底部导航栏

应用主导航

---

功能描述

底部固定的主导航栏，用于在应用的主要区域间切换。

---

属性规范

属性	类型	必需	默认值	说明
items	TabItem[]	Y	-	标签项列表
activeIndex	number	Y	-	当前激活索引
onChange	(index) => void	Y	-	切换回调

TabItem 结构

TabItem {
  key: string
  icon: Icon           // 未激活图标
  activeIcon?: Icon    // 激活图标（可选）
  label: string
  badge?: Badge
}

Badge = number | boolean
// number: 显示数字（超过99显示99+）
// true: 显示红点

---

布局规范

┌─────────────────────────────────────────────────┐
│                                                 │
│   [图标]      [图标]      [图标]      [图标]   │
│    首页        资产        历史        设置     │
│                                                 │
│   [─────────── 安全区域 ───────────]           │
└─────────────────────────────────────────────────┘

标签项布局

┌─────────┐
│         │
│  [图标] │  ← 24px
│   标签  │  ← 10px
│         │
└─────────┘

---

行为规范

必须 (MUST)

1. 激活项有明确视觉区分
2. 支持点击切换
3. 底部适配安全区域
4. 最少 2 个，最多 5 个标签

建议 (SHOULD)

1. 激活时使用填充图标
2. 切换时有轻微动画
3. 点击时有触觉反馈
4. badge 数字超过 99 显示 99+

可选 (MAY)

1. 支持长按显示完整标签名
2. 支持滑动切换（配合 ViewPager）

---

设计标注

尺寸规格

部分	规格
总高度	50px + 安全区域
图标尺寸	24px
标签字号	10px
图标与标签间距	2px
项间距	均分

颜色规格

状态	图标色	文字色
默认	--color-muted-foreground	--color-muted-foreground
激活	--color-primary	--color-primary

Badge 规格

类型	尺寸	位置
红点	8px 圆	图标右上角
数字	min-width 16px, height 16px	图标右上角

---

可访问性

要求	说明
role	tablist
单个标签 role	tab
aria-selected	激活项为 true
键盘导航	左右箭头切换

---

标签数量建议

数量	适用场景
2	简单应用
3-4	推荐，大多数应用
5	功能复杂的应用
>5	不推荐，考虑使用抽屉导航

---

BFM Pay 标签配置

[
  { key: 'home', label: '首页', icon: Home },
  { key: 'assets', label: '资产', icon: Wallet },
  { key: 'history', label: '历史', icon: History },
  { key: 'settings', label: '设置', icon: Settings }
]