fix(tabbar): 修复图片模式下高亮图标属性名错误并更新文档

将 activeIcon 属性名统一改为 iconActive 以保持一致性
更新 README 文档，补充不同图标类型的配置说明

src/tabbar/README.md

@@ -31,3 +31,48 @@
 - `store.ts` ，专门给 `自定义 tabbar` 提供状态管理，代码几乎不需要修改。
 - `index.vue` ，专门给 `自定义 tabbar` 提供渲染逻辑，代码可以稍微修改，以符合自己的需求。
 
+## 自定义tabbar的不同类型的配置
+
+- uniUi 图标
+
+ ```js
+  {
+    // ... 其他配置
+    "iconType": "uniUi",
+    "icon": "home",
+  }
+  ```
+- unocss 图标
+
+ ```js
+  {
+    // ... 其他配置
+    // 注意 unocss 图标需要如下处理：（二选一）
+    // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
+    // 2）配置到 unocss.config.ts 的 safelist 中
+    iconType: 'unocss',
+    icon: 'i-carbon-code',
+  }
+  ```
+- iconfont 图标
+
+ ```js
+  {
+    // ... 其他配置
+    // 注意 iconfont 图标需要额外加上 'iconfont'，如下
+    iconType: 'iconfont',
+    icon: 'iconfont icon-my',
+  }
+  ```
+- image 本地图片
+
+ ```js
+  {
+    // ... 其他配置
+    // 使用 ‘image’时，需要配置 icon + iconActive 2张图片（不推荐）
+    // 既然已经用了自定义tabbar了，就不建议用图片了，所以不推荐
+    iconType: 'image',
+    icon: '/static/tabbar/home.png',
+    iconActive: '/static/tabbar/homeHL.png',
+  }
+  ```

src/tabbar/config.ts

@@ -20,7 +20,7 @@ export const TABBAR_STRATEGY_MAP = {
 // 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
 // 如果是使用 NATIVE_TABBAR(1)，只需要配置 nativeTabbarList，customTabbarList 不生效
 // 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
-export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.NATIVE_TABBAR
+export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
 
 type NativeTabBarItem = TabBar['list'][number]
 
@@ -51,11 +51,12 @@ export interface CustomTabBarItem {
   pagePath: string
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
   icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
-  activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
+  iconActive?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
   badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
   isBulge?: boolean // 是否是中间的鼓包tabbarItem
 }
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
+// 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
 export const customTabbarList: CustomTabBarItem[] = [
   {
     text: '首页',

src/tabbar/index.vue

@@ -57,11 +57,11 @@ function getColorByIndex(index: number) {
 }
 
 function getImageByIndex(index: number, item: CustomTabBarItem) {
-  if (!item.activeIcon) {
+  if (!item.iconActive) {
     console.warn('image 模式下，需要配置 iconActive (高亮时的图片），否则无法切换高亮图片')
     return item.icon
   }
-  return tabbarStore.curIdx === index ? item.activeIcon : item.icon
+  return tabbarStore.curIdx === index ? item.iconActive : item.icon
 }
 </script>