refactor(tabbar): 重构tabbar配置和状态管理逻辑

将tabbar配置集中到config.ts，移除store中的冗余数据
重命名nativeTabbarNeedHide为needHideNativeTabbar
统一通过tabbarList获取当前使用的tabbar列表

src/tabbar/config.ts

@@ -1,7 +1,5 @@
 import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
 
-type NativeTabBarItem = TabBar['list'][0]
-
 /**
  * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
  * 0: 'NO_TABBAR' `无 tabbar`
@@ -19,13 +17,13 @@ export const TABBAR_MAP = {
 }
 
 // TODO: 1/3. 通过这里切换使用tabbar的策略
+// 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
+// 如果是使用 NATIVE_TABBAR(1)，只需要配置 nativeTabbarList，customTabbarList 不生效
+// 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
 export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
 
-// TODO: 2/3. 更新下面的 tabbar 配置
-// 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
-// 如果是使用 NATIVE_TABBAR(1)，customTabbarList 不生效(里面的配置不用管)
-// 如果是使用 CUSTOM_TABBAR(2,3)，nativeTabbarList 不生效(里面的配置不用管)
-// pagePath 是 nativeTabbarList 和 customTabbarList 的关联点，如果没有对应上，会有问题！！
+type NativeTabBarItem = TabBar['list'][0]
+// TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
 export const nativeTabbarList: NativeTabBarItem[] = [
   {
     iconPath: 'static/tabbar/home.png',
@@ -41,19 +39,77 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
-// NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存
-/** 是否启用 tabbar 缓存 */
+interface CustomTabBarItem {
+  text: string
+  pagePath: string
+  iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
+  icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
+  activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
+  badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
+  isBulge?: boolean // 是否是中间的鼓包tabbarItem
+}
+// TODO: 2/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
+export const customTabbarList: CustomTabBarItem[] = [
+  {
+    text: '首页',
+    pagePath: 'pages/index/index',
+    // 本框架内置了 uniapp 官方UI库 （uni-ui)的图标库
+    // 使用方式如：<uni-icons type="home" size="30"/>
+    // 图标列表地址：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
+    iconType: 'uniUi',
+    icon: 'home',
+    // badge: 'dot',
+  },
+  {
+    text: '关于',
+    pagePath: 'pages/about/about',
+    // 注意 unocss 图标需要如下处理：（二选一）
+    // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
+    // 2）配置到 unocss.config.ts 的 safelist 中
+    iconType: 'unocss',
+    icon: 'i-carbon-code',
+    // badge: 10,
+  },
+
+  // {
+  //   pagePath: 'pages/mine/index',
+  //   text: '我的',
+  //   // 注意 iconfont 图标需要额外加上 'iconfont'，如下
+  //   iconType: 'iconfont',
+  //   icon: 'iconfont icon-my',
+  // },
+  // {
+  //   pagePath: 'pages/index/index',
+  //   text: '首页',
+  //   // 使用 ‘image’时，需要配置 icon + iconActive 2张图片（不推荐）
+  //   // 既然已经用了自定义tabbar了，就不建议用图片了，所以不推荐
+  //   iconType: 'image',
+  //   icon: '/static/tabbar/home.png',
+  //   iconActive: '/static/tabbar/homeHL.png',
+  // },
+]
+
+/**
+ * 是否启用 tabbar 缓存
+ * NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存
+ */
 export const tabbarCacheEnable
   = [TABBAR_MAP.NATIVE_TABBAR, TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy)
 
-// CUSTOM_TABBAR_WITH_CACHE(2) 和 CUSTOM_TABBAR_WITHOUT_CACHE(3) 时，启用自定义tabbar
-/** 是否启用自定义 tabbar */
+/**
+ * 是否启用自定义 tabbar
+ * CUSTOM_TABBAR(2,3) 时，启用自定义tabbar
+ */
 export const customTabbarEnable
   = [TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy)
 
-// CUSTOM_TABBAR_WITH_CACHE(2)时，需要隐藏原生tabbar
-/** 是否需要隐藏原生 tabbar */
-export const nativeTabbarNeedHide = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
+/**
+ * 是否需要隐藏原生 tabbar
+ * CUSTOM_TABBAR_WITH_CACHE(2) 时，需要隐藏原生tabbar
+ */
+export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
+
+export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
 
 const _tabbar: TabBar = {
   // 只有微信小程序支持 custom。App 和 H5 不生效
@@ -66,10 +122,8 @@ const _tabbar: TabBar = {
   fontSize: '10px',
   iconWidth: '24px',
   spacing: '3px',
-  list: nativeTabbarList as unknown as TabBar['list'],
+  list: tabbarList as unknown as TabBar['list'],
 }
 
-export const tabbarList = nativeTabbarList
-
 // 0和1 需要显示底部的tabbar的各种配置，以利用缓存
 export const tabBar = tabbarCacheEnable ? _tabbar : undefined

src/tabbar/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 'i-carbon-code',
 import { http } from '@/http/http'
-import { customTabbarEnable, nativeTabbarNeedHide, tabbarCacheEnable } from './config'
+import { tabbarList as _tabbarList, customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarStore } from './store'
 
 // #ifdef MP-WEIXIN
@@ -27,7 +27,7 @@ function handleClickBulge() {
 }
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
-const tabbarList = tabbarStore.tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
+const tabbarList = _tabbarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
 if (BULGE_ENABLE) {
   if (tabbarList.length % 2 === 1) {
     console.error('tabbar 数量必须是偶数，否则样式很奇怪！！')
@@ -56,7 +56,7 @@ function handleClick(index: number) {
 }
 onLoad(() => {
   // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
-  nativeTabbarNeedHide
+  needHideNativeTabbar
   && uni.hideTabBar({
     fail(err) {
       console.log('hideTabBar fail: ', err)

src/tabbar/store.ts

@@ -1,63 +1,10 @@
 import { tabbarList } from './config'
 
-interface CustomTabBarItem {
-  text: string
-  pagePath: string
-  iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
-  icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
-  activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
-  badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
-  isBulge?: boolean // 是否是中间的鼓包tabbarItem
-}
-
-// pagePath 是 nativeTabbarList 和 customTabbarList 的关联点，如果没有对应上，会有问题！！
-// 如果希望通过接口调用 customTabbarList，可以在 tabbar/index.vue 文件里面调用接口
-export const customTabbarList: CustomTabBarItem[] = [
-  {
-    // text 和 pagePath 可以自己直接写，也可以通过索引从 nativeTabbarList 中获取
-    text: '首页',
-    pagePath: 'pages/index/index', // pagePath 是两者的关联点
-    // 本框架内置了 uniapp 官方UI库 （uni-ui)的图标库
-    // 使用方式如：<uni-icons type="home" size="30"/>
-    // 图标列表地址：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
-    iconType: 'uniUi',
-    icon: 'home',
-    // badge: 'dot',
-  },
-  {
-    text: tabbarList[1].text,
-    pagePath: tabbarList[1].pagePath, // pagePath 是两者的关联点
-    // 注意 unocss 图标需要如下处理：（二选一）
-    // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
-    // 2）配置到 unocss.config.ts 的 safelist 中
-    iconType: 'unocss',
-    icon: 'i-carbon-code',
-    // badge: 10,
-  },
-
-  // {
-  //   pagePath: 'pages/mine/index',
-  //   text: '我的',
-  //   // 注意 iconfont 图标需要额外加上 'iconfont'，如下
-  //   iconType: 'iconfont',
-  //   icon: 'iconfont icon-my',
-  // },
-  // {
-  //   pagePath: 'pages/index/index',
-  //   text: '首页',
-  //   // 使用 ‘image’时，需要配置 icon + iconActive 2张图片（不推荐）
-  //   // 既然已经用了自定义tabbar了，就不建议用图片了，所以不推荐
-  //   iconType: 'image',
-  //   icon: '/static/tabbar/home.png',
-  //   iconActive: '/static/tabbar/homeHL.png',
-  // },
-]
 /**
  * tabbar 状态，增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
  * 使用reactive简单状态，而不是 pinia 全局状态
  */
 export const tabbarStore = reactive({
-  tabbarList: customTabbarList,
   curIdx: uni.getStorageSync('app-tabbar-index') || 0,
   prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
   setCurIdx(idx: number) {