refactor(tabbar): 重构底部导航栏配置及逻辑

将底部导航栏配置从 pages.config.ts 移动到单独的文件中
添加 CUSTOM_TABBAR_ENABLE 开关控制自定义导航栏行为
优化导航栏切换逻辑，根据开关选择不同跳转方式

pages.config.ts

@@ -1,5 +1,5 @@
 import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
-import { tabbarList, midButton } from './src/components/fg-tabbar/tabbarList'
+import { tabBar } from './src/components/fg-tabbar/tabbarList'
 
 export default defineUniPages({
   globalStyle: {
@@ -18,19 +18,5 @@ export default defineUniPages({
         'z-paging/components/z-paging$1/z-paging$1.vue',
     },
   },
-  // 如果不需要tabBar，直接把下面的tabbar删除或者注释掉即可
-  tabBar: {
-    // custom: true,
-    color: '#999999',
-    selectedColor: '#018d71',
-    backgroundColor: '#F8F8F8',
-    borderStyle: 'black',
-    height: '50px',
-    fontSize: '10px',
-    iconWidth: '24px',
-    spacing: '3px',
-    list: tabbarList as any,
-    // midButton 仅App和H5支持
-    midButton: midButton,
-  },
+  tabBar: tabBar as any,
 })

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

@@ -35,30 +35,31 @@
 </template>
 
 <script setup lang="ts">
-// unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
-// i-carbon-code
-import { tabBarList as _tabBarList } from '@/utils/index'
+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}` }))
-
 function selectTabBar({ value: index }: { value: number }) {
   const url = tabbarList[index].path
   tabbarStore.setCurIdx(index)
-  uni.switchTab({ url })
+  if (CUSTOM_TABBAR_ENABLE) {
+    uni.navigateTo({ url })
+  } else {
+    uni.switchTab({ url })
+  }
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  // #ifdef APP-PLUS | H5
-  uni.hideTabBar({
-    fail(err) {
-      console.log('hideTabBar fail: ', err)
-    },
-    success(res) {
-      console.log('hideTabBar success: ', res)
-    },
-  })
-  // #endif
+  !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

@@ -31,3 +31,20 @@ export const midButton = {
   iconPath: '/static/logo.svg',
   text: '发布',
 }
+
+const _tabbar = {
+  color: '#999999',
+  selectedColor: '#018d71',
+  backgroundColor: '#F8F8F8',
+  borderStyle: 'black',
+  height: '50px',
+  fontSize: '10px',
+  iconWidth: '24px',
+  spacing: '3px',
+  list: tabbarList as any,
+  // midButton 仅App和H5支持
+  midButton: midButton,
+}
+
+export const CUSTOM_TABBAR_ENABLE = false
+export const tabBar = CUSTOM_TABBAR_ENABLE ? undefined : _tabbar