feat(tabbar): 添加徽章显示限制和设置方法

限制徽章数字显示最大为99+，并添加设置徽章的方法

src/tabbar/config.ts

@@ -46,13 +46,16 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
+// badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
+export type CustomTabBarItemBadge = number | 'dot'
+
 export interface CustomTabBarItem {
   text: string
   pagePath: string
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
   icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
   iconActive?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
-  badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
+  badge?: CustomTabBarItemBadge
   isBulge?: boolean // 是否是中间的鼓包tabbarItem
 }
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置

src/tabbar/index.vue

@@ -110,7 +110,7 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
               </template>
               <template v-else>
                 <view class="absolute right-0 top-0 h-4 w-4 center rounded-full bg-#f56c6c text-center text-xs text-white">
-                  {{ item.badge }}
+                  {{ item.badge > 99 ? '99+' : item.badge }}
                 </view>
               </template>
             </view>

src/tabbar/store.ts

@@ -1,4 +1,4 @@
-import type { CustomTabBarItem } from './config'
+import type { CustomTabBarItem, CustomTabBarItemBadge } from './config'
 import { tabbarList as _tabbarList, customTabbarEnable } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
@@ -35,6 +35,9 @@ const tabbarStore = reactive({
     this.curIdx = idx
     uni.setStorageSync('app-tabbar-index', idx)
   },
+  setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) {
+    tabbarList[idx].badge = badge
+  },
   setAutoCurIdx(path: string) {
     const index = tabbarList.findIndex(item => item.pagePath === path)
     console.log('index:', index, path)