refactor(tabbar): 重构自定义tabbar逻辑并添加图标路径

移除冗余注释并整理tabbar相关配置
添加自定义tabbar的图标路径配置
优化tabbar显示逻辑，根据CUSTOM_TABBAR_ENABLE决定显示方式

src/components/fg-tabbar/fg-tabbar.vue

@@ -1,5 +1,6 @@
 <template>
   <wd-tabbar
+    v-if="CUSTOM_TABBAR_ENABLE"
     fixed
     v-model="tabbarStore.curIdx"
     bordered
@@ -32,12 +33,12 @@
       </wd-tabbar-item>
     </block>
   </wd-tabbar>
+  <view v-else></view>
 </template>
 
 <script setup lang="ts">
 import { tabbarList as _tabBarList, CUSTOM_TABBAR_ENABLE } from './tabbarList'
 import { tabbarStore } from './tabbar'
-import {} from './tabbarList'
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
 const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` }))
@@ -52,14 +53,14 @@ function selectTabBar({ value: index }: { value: number }) {
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  !CUSTOM_TABBAR_ENABLE &&
-    uni.hideTabBar({
-      fail(err) {
-        console.log('hideTabBar fail: ', err)
-      },
-      success(res) {
-        console.log('hideTabBar success: ', res)
-      },
-    })
+  // !CUSTOM_TABBAR_ENABLE &&
+  //   uni.hideTabBar({
+  //     fail(err) {
+  //       console.log('hideTabBar fail: ', err)
+  //     },
+  //     success(res) {
+  //       console.log('hideTabBar success: ', res)
+  //     },
+  //   })
 })
 </script>

src/components/fg-tabbar/tabbarList.ts

@@ -1,12 +1,20 @@
+// 是否使用自定义的tabbar?
+export const CUSTOM_TABBAR_ENABLE = false
+
+// CUSTOM_TABBAR_ENABLE 为 true 时，可以不填 iconPath 和 selectedIconPath
+// CUSTOM_TABBAR_ENABLE 为 false 时，可以不填 icon 和 iconType
 export const tabbarList = [
-  // 注意tabbar路由需要使用 layout:tabbar 布局
   {
+    iconPath: 'static/tabbar/home.png',
+    selectedIconPath: 'static/tabbar/homeHL.png',
     pagePath: 'pages/index/index',
     text: '首页',
     icon: 'home',
     iconType: 'wot',
   },
   {
+    iconPath: 'static/tabbar/example.png',
+    selectedIconPath: 'static/tabbar/exampleHL.png',
     pagePath: 'pages/about/about',
     text: '关于',
     icon: 'i-carbon-code',
@@ -46,5 +54,4 @@ const _tabbar = {
   midButton: midButton,
 }
 
-export const CUSTOM_TABBAR_ENABLE = false
 export const tabBar = CUSTOM_TABBAR_ENABLE ? undefined : _tabbar

src/layouts/tabbar.vue

@@ -1,7 +1,6 @@
 <template>
   <wd-config-provider :themeVars="themeVars">
     <slot />
-    <!-- 注意下面，多了一个自定义tabbar -->
     <fg-tabbar />
     <wd-toast />
     <wd-message-box />

src/pages.json

@@ -25,12 +25,16 @@
     "spacing": "3px",
     "list": [
       {
+        "iconPath": "static/tabbar/home.png",
+        "selectedIconPath": "static/tabbar/homeHL.png",
         "pagePath": "pages/index/index",
         "text": "首页",
         "icon": "home",
         "iconType": "wot"
       },
       {
+        "iconPath": "static/tabbar/example.png",
+        "selectedIconPath": "static/tabbar/exampleHL.png",
         "pagePath": "pages/about/about",
         "text": "关于",
         "icon": "i-carbon-code",