导航栏 NavBar

严格遵循 44px 标准高度（自动适配 iOS 顶部安全区）、16px 左右内边距与 17px 居中标题规范。左侧默认采用 arrow-back-outline 返回图标，支持切换双选项卡模式、取消 + 胶囊完成按钮、底边框及右侧引导箭头。

1. 基础标准标题（默认 `arrow-back-outline` 返回）

vue

<NavBar @click-left="handleBack" title="商品详情"/>

传入 tabs 数组即可在导航栏正中渲染双选项卡，点击自动切换安井品牌绿高亮态与底部指示条（也可通过 #center 插槽嵌入自定义组件）。

vue

<NavBar :tabs="[
    { label: '常购清单', value: 'often' },
    { label: '推荐收藏', value: 'favorite' }
  ]" border v-model:active-tab="currentTab"/>

设置 left-text 与 right-btn-text，适合收货地址编辑、改价确认、筛选弹窗顶部栏。

vue

<NavBar @click-left="handleCancel" @click-right="handleSave" border left-text="取消" right-btn-text="完成" title="编辑收货地址"/>

vue

<NavBar :left-arrow="false" border right-arrow right-text="管理" title="购物车"/>

参数名	说明	类型	默认值
`title`	居中标题文本（`17px`）	`string`	`''`
`leftArrow`	是否显示左侧返回箭头	`boolean`	`true`
`leftIcon`	左侧返回图标名称（对应 `SvgIcon` 的 `name`）	`string`	`'arrow-back-outline'`
`leftText`	左侧文本（传入后自动替代返回箭头，如 `'取消'`）	`string`	`''`
`tabs`	顶部选项卡数据（`{ label, value }[]`），传入后自动替代 `title`	`Array`	`[]`
`activeTab`	当前激活的选项卡值（支持 `v-model:active-tab`）	`string \| number`	`''`
`rightBtnText`	右侧绿色胶囊按钮文案（如 `'完成'`）	`string`	`''`
`rightBtnType`	右侧胶囊按钮语义色：`primary` / `danger` / `warning`	`string`	`'primary'`
`rightBtnDisabled`	右侧胶囊按钮是否禁用	`boolean`	`false`
`rightText`	右侧纯文本操作文案（如 `'管理'`）	`string`	`''`
`rightArrow`	是否显示右侧 `>` 引导箭头	`boolean`	`false`
`border`	是否显示底部 `0.5px` 分割线	`boolean`	`false`
`fixed`	是否固定在页面顶部吸顶	`boolean`	`false`
`placeholder`	吸顶时是否在原位生成等高占位元素防止遮挡内容	`boolean`	`true`
`transparent`	是否设为透明背景（适合详情页海报叠加）	`boolean`	`false`