feat(tabbar): 添加本地图标支持并更新文档

- 在tabbar组件中添加对本地图标类型的支持
- 更新README文档，增加tabbar策略说明
- 调整pages.json配置，将首页图标改为本地类型
- 完善配置文件的TODO注释说明

src/tabbar/README.md

@@ -1,5 +1,7 @@
 # tabbar 说明
 
+## tabbar 4种策略
+
 `tabbar` 分为 `4 种` 情况：
 
 - 0 `无 tabbar`，只有一个页面入口，底部无 `tabbar` 显示；常用语临时活动页。
@@ -16,12 +18,15 @@
 
 > 注意：花里胡哨的效果需要自己实现，本模版不提供。
 
-## 配置说明
+## tabbar 配置说明
 
-- 如果使用的是原生tabbar, 则每个 item 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。
-- 如果使用的是自定义tabbar, 则每个 item 需要配置 `path`、`text`、`icon` 、`iconType` 等属性。
+- 如果使用的是原生tabbar, 则每个 `item` 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。
+- 如果使用的是自定义tabbar, 则每个 `item` 需要配置 `path`、`text`、`icon` 、`iconType` 等属性（如果是local还需要配置2种图片）。
 
-## 如果是自定义tabbar, 且通过接口拿到tabbar列表
-则，需要跟原生tabbar的path对应上即可。
+## 接口拿到tabbar列表怎么处理？
 
-另外，如果用的是 Unocss 图标，还需要在 `uno.config.ts` 的 `safelist` 中添加图标名称。
+首先，接口的配置需要跟原生tabbar的 `path` 对应上。
+
+然后，可以直接在 `index.vue` 文件请求接口拿到 `tabbarList`，然后赋值给 `tabbarList` 即可。
+
+最后，如果用的是 `unocss` 图标，还需要在 `uno.config.ts` 的 `safelist` 中添加图标名称。

src/tabbar/config.ts

@@ -21,10 +21,10 @@ export const TABBAR_MAP = {
   CUSTOM_TABBAR_WITHOUT_CACHE: 3,
 }
 
-// TODO：1. 通过这里切换使用tabbar的策略
+// TODO: 1/3. 通过这里切换使用tabbar的策略
 export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
 
-// TODO：2. 更新下面的tabbar配置
+// TODO: 2/3. 更新下面的tabbar配置
 // selectedTabbarStrategy==NATIVE_TABBAR(1) 时，需要填 iconPath 和 selectedIconPath
 // selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 iconType 和 icon
 // selectedTabbarStrategy==NO_TABBAR(0) 时，tabbarList 不生效
@@ -46,7 +46,7 @@ export const tabbarList: FgTabBarItem[] = [
   //   pagePath: 'pages/index/index',
   //   text: '首页',
   //   // 选用 UI 框架自带的 icon 时，iconType 为 uiLib
-  //   // 需要自行替换vue代码中的图标代码，需要查看相关UI库的图标代码
+  //   // TODO: 3/3. 需要自行替换vue代码中的图标代码，具体代码在 `tabbar/index.vue` 62行
   //   // 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html)
   //   // 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html)
   //   // 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^)

src/tabbar/index.vue

@@ -43,6 +43,10 @@ const inactiveColor = '#666'
 function getColorByIndex(index: number) {
   return tabbarStore.curIdx === index ? activeColor : inactiveColor
 }
+
+function getImageByIndex(index: number, item: { iconActive: string, icon: string }) {
+  return tabbarStore.curIdx === index ? item.iconActive : item.icon
+}
 </script>
 
 <template>
@@ -68,6 +72,9 @@ function getColorByIndex(index: number) {
           <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
             <view :class="item.icon" class="text-20px" />
           </template>
+          <template v-if="item.iconType === 'local'">
+            <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
+          </template>
           <view class="mt-2px text-12px">
             {{ item.text }}
           </view>