用插槽实现Tab栏图标动态切换，核心是将图标控制权交予使用者：通过具名插槽（如#icon）支持自定义图标，未传时回退预设；结合current索引、isActive状态及用户角色动态渲染；小程序需用cover-view包裹并适配图标加载方式；联动主题系统实现颜色与变体自动切换。
直接用插槽（slot）实现 Tab 栏图标动态切换，核心在于把图标控制权交给使用者，而不是写死在组件内部。这样既能适配不同角色、主题、状态，又不破坏组件结构，UI 扩展性自然就上来了。
插槽设计：区分默认图标与自定义图标
在自定义 Tab 组件中，为每个 tab 项预留具名插槽（如 icon），同时保留默认图标 fallback 逻辑：
- 当传入
<template #icon><my-icon name="home" /></template>时，优先渲染插槽内容 - 未传插槽时，按当前 tab 索引或 key 自动匹配预设图标（比如通过 iconMap 对象查 iconfont Unicode）
- 插槽内可自由使用 iconfont、SVG、动态组件甚至带条件判断的图标（如
v-if="current === 0"）
状态驱动：图标随选中/权限实时响应
图标切换不是靠手动替换，而是靠数据驱动视图更新：
- 将当前激活索引 current 作为响应式数据，绑定到插槽外层容器的 class 或 style 上
- 在插槽内部，可通过作用域插槽（
scope="{ index, isActive }"）获取当前 tab 状态，决定渲染哪套图标或颜色 - 结合用户角色（如
userRole === 'admin'），在插槽中动态 import 不同图标组件，或切换 iconfont 的content值
多端兼容：覆盖原生 TabBar 的视觉层需用 cover-view
在微信小程序等平台，自定义 TabBar 必须用 cover-view 包裹，否则会被原生组件遮挡：
- 插槽内容必须放在
<cover-view class="tab-item">内部，不能用普通 view - cover-view 不支持 background-image，所以图标推荐用 iconfont 字体或
<cover-image>，避免 PNG 失真 - 插槽中若使用 SVG，需转为 base64 内联或确保路径在小程序合法域名下
主题联动：一套插槽，多套图标方案
图标动态切换不止是“换图”，更是主题系统的一部分：
- 在插槽中读取全局主题 store（如
useThemeStore().mode === 'dark'），自动切换图标颜色或变体 - 配合 CSS 变量，插槽内图标只需设置
color: var(--tab-active-color)，主题色一改全改 - 支持运行时加载远程图标字体包（如从 CDN 加载新的 iconfont.css），插槽内容自动生效，无需重写组件
不复杂但容易忽略：插槽不是万能胶，它需要清晰的 props 约定和稳定的 slot scope 结构，否则业务方用起来反而更费劲。
