feat(tabbar): 添加角标显示功能

在自定义 tabbar 组件中新增 badge 属性，支持显示数字或小红点角标
修改 tabbar/index.vue 文件实现角标显示逻辑

package.json

@@ -1,8 +1,8 @@
 {
   "name": "unibest",
   "type": "module",
-  "version": "3.7.2",
-  "unibest-version": "3.7.2",
+  "version": "3.7.3",
+  "unibest-version": "3.7.3",
   "packageManager": "pnpm@10.10.0",
   "description": "unibest - 最好的 uniapp 开发模板",
   "generate-time": "用户创建项目时生成",

src/tabbar/config.ts

@@ -6,6 +6,7 @@ type CustomTabBarItem = Pick<NativeTabBarItem, 'text' | 'pagePath'> & {
   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 里面修改）
 }
 
 /**
@@ -60,6 +61,7 @@ export const customTabbarList: CustomTabBarItem[] = [
     // 图标列表地址：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
     iconType: 'uniUi',
     icon: 'home',
+    // badge: 'dot',
   },
   {
     text: nativeTabbarList[1].text,
@@ -69,6 +71,7 @@ export const customTabbarList: CustomTabBarItem[] = [
     // 2）配置到 unocss.config.ts 的 safelist 中
     iconType: 'unocss',
     icon: 'i-carbon-code',
+    // badge: 10,
   },
   // {
   //   pagePath: 'pages/mine/index',

src/tabbar/index.vue

@@ -63,24 +63,37 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
           :style="{ color: getColorByIndex(index) }"
           @click="handleClick(index)"
         >
-          <template v-if="item.iconType === 'uniUi'">
-            <uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
-          </template>
-          <template v-if="item.iconType === 'uiLib'">
-            <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
-            <!-- 如：<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图标^_^) -->
-            <wd-icon :name="item.icon" size="20" />
-          </template>
-          <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
-            <view :class="item.icon" class="text-20px" />
-          </template>
-          <template v-if="item.iconType === 'image'">
-            <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
-          </template>
-          <view class="mt-2px text-12px">
-            {{ item.text }}
+          <view class="relative px-3">
+            <template v-if="item.iconType === 'uniUi'">
+              <uni-icons :type="item.icon" size="20" :color="getColorByIndex(index)" />
+            </template>
+            <template v-if="item.iconType === 'uiLib'">
+              <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
+              <!-- 如：<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图标^_^) -->
+              <wd-icon :name="item.icon" size="20" />
+            </template>
+            <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
+              <view :class="item.icon" class="text-20px" />
+            </template>
+            <template v-if="item.iconType === 'image'">
+              <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-20px w-20px" />
+            </template>
+            <view class="mt-2px text-12px">
+              {{ item.text }}
+            </view>
+            <!-- 角标显示 -->
+            <view v-if="item.badge">
+              <template v-if="item.badge === 'dot'">
+                <view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
+              </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 }}
+                </view>
+              </template>
+            </view>
           </view>
         </view>
       </view>