From c14852d147002c67b5883638bbd609a14abfe33e Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Thu, 7 Aug 2025 21:42:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E6=B7=BB=E5=8A=A0=E8=A7=92?=
 =?UTF-8?q?=E6=A0=87=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在自定义 tabbar 组件中新增 badge 属性，支持显示数字或小红点角标
修改 tabbar/index.vue 文件实现角标显示逻辑
---
 package.json         |  4 ++--
 src/tabbar/config.ts |  3 +++
 src/tabbar/index.vue | 49 ++++++++++++++++++++++++++++----------------
 3 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 125e654..e3d5876 100644
--- a/package.json
+++ b/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": "用户创建项目时生成",
diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index e61ffcd..d1cac63 100644
--- a/src/tabbar/config.ts
+++ b/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',
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index 563ce7c..7341453 100644
--- a/src/tabbar/index.vue
+++ b/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>