Tabbar 底部导航

用于应用最底部的全局路由导航控件，支持基础贴底 (normal)、磨砂悬浮灵动浮岛 (island) 以及中间凸起缺口发布按钮 (raised) 3 种极奢视觉形态，全端自适应底栏安全区。

---

代码示例

1. 基础贴底导航 (Normal Mode)

标准 4 项贴底导航栏，包含图标与徽章角标。

<template>
  <mu-tabbar v-model:current="active" :items="tabbarItems" @change="onChange" />
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)
const tabbarItems = ref([
  { text: '首页', icon: 'home' },
  { text: '分类', icon: 'grid' },
  { text: '消息', icon: 'bell', badge: '99+' },
  { text: '我的', icon: 'user' }
])

const onChange = (index) => {
  console.log('切换底部导航:', index)
}
</script>

---

2. 悬浮灵动浮岛胶囊 (Island Mode)

设置 mode="island"，呈现带有圆角散焦阴影与毛玻璃的悬浮胶囊底栏。

<template>
  <mu-tabbar
    v-model:current="active"
    :items="tabbarItems"
    mode="island"
    @change="onChange"
  />
</template>

---

3. 凸起中间缺口发布导航 (Raised Notch Mode)

设置 mode="raised"，并在 items 的中间数据项配置 raised: true，自动生成弧形缺口与加号悬浮凸起按钮。

<template>
  <mu-tabbar
    v-model:current="active"
    :items="raisedItems"
    mode="raised"
    raised-color="#6366F1"
    @change="onChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)
const raisedItems = ref([
  { text: '首页', icon: 'home' },
  { text: '社区', icon: 'message-circle' },
  { text: '发布', icon: 'plus', raised: true }, // raised: true 设置为中间凸起按钮
  { text: '消息', icon: 'bell', badge: '3' },
  { text: '我的', icon: 'user' }
])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:current / current	当前激活选中的导航项索引	Number	-	0
items	导航项配置数组	Array	-	[]
mode	导航展现形态	String	normal | island | raised	'normal'
fixed	是否固定悬浮在页面底端	Boolean	true | false	true
background	导航栏背景色	String	-	''
activeColor	激活态文字与图标高亮颜色	String	-	''
raisedColor	凸起缺口模式下中间大圆形按钮渐变色	String	-	''

---

TabbarItem 配置属性 (Item Object)

参数名	说明	类型	默认值
text	导航项标签文字	String	''
icon	矢量图标名称或图片 URL	String	''
selectedIcon	激活选中时的专属矢量图标或图片 URL	String	''
badge	红点徽章数字或文本	Number | String	-
dot	是否显示为小红点	Boolean	false
raised	是否设置为中间凸起缺口大按钮 (mode="raised" 时生效)	Boolean	false

---

事件说明 (Events)

事件名	说明	回调参数
change	切换底部导航项时触发	(index: Number)