feat(底部导航): 添加未读消息红点提示功能

在底部导航栏的"我的"图标上添加未读消息红点提示
通过调用用户信息接口获取未读消息数量
未登录或接口失败时默认不显示红点

@@ -39,6 +39,7 @@ declare module 'vue' {
     UserAgreement: typeof import('./components/ui/UserAgreement.vue')['default']
     UserAgreement: typeof import('./components/ui/UserAgreement.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanBackTop: typeof import('vant/es')['BackTop']
     VanBackTop: typeof import('vant/es')['BackTop']
+    VanBadge: typeof import('vant/es')['Badge']
     VanButton: typeof import('vant/es')['Button']
     VanButton: typeof import('vant/es')['Button']
     VanCalendar: typeof import('vant/es')['Calendar']
     VanCalendar: typeof import('vant/es')['Calendar']
     VanCell: typeof import('vant/es')['Cell']
     VanCell: typeof import('vant/es')['Cell']

 <!--
 <!--
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-01 16:14:16
+ * @LastEditTime: 2025-12-08 13:49:00
  * @FilePath: /mlaj/src/components/layout/BottomNav.vue
  * @FilePath: /mlaj/src/components/layout/BottomNav.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -18,18 +18,20 @@
           'text-gray-500': !isActive(item.path)
           'text-gray-500': !isActive(item.path)
         }"
         }"
       >
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 mb-1"
-          :class="{
-            'text-green-500': isActive(item.path),
-            'text-gray-500': !isActive(item.path)
-          }"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          v-html="item.icon"
-        />
+        <van-badge :dot="item.path === '/profile' && unread_msg_count > 0">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 mb-1"
+                :class="{
+                    'text-green-500': isActive(item.path),
+                    'text-gray-500': !isActive(item.path)
+                }"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                v-html="item.icon"
+            />
+        </van-badge>
         <span class="text-xs">{{ item.name }}</span>
         <span class="text-xs">{{ item.name }}</span>
       </div>
       </div>
     </div>
     </div>
@@ -37,15 +39,44 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuth } from '@/contexts/auth'
 import { useAuth } from '@/contexts/auth'
 import { showToast } from 'vant'
 import { showToast } from 'vant'
+import { getUserInfoAPI } from '@/api/users'
 
 
 const route = useRoute()
 const route = useRoute()
 const router = useRouter()
 const router = useRouter()
 const { currentUser } = useAuth()
 const { currentUser } = useAuth()
 
 
+/**
+ * @var {import('vue').Ref<number>} unread_msg_count
+ * @description 未读消息数量，来源于 getUserInfoAPI() 的返回值；用于控制“我的”图标右上角红点显示
+ */
+const unread_msg_count = ref(0)
+
+/**
+ * @function load_unread_msg_count
+ * @description 拉取用户信息，提取未读消息数量；未登录或接口失败时默认为 0
+ * @returns {Promise<void>}
+ */
+async function load_unread_msg_count() {
+    try {
+        const { code, data } = await getUserInfoAPI()
+        if (code) {
+            unread_msg_count.value = +data.unread_msg_count || 0
+        } else {
+            unread_msg_count.value = 0
+        }
+    } catch (e) {
+        unread_msg_count.value = 0
+    }
+}
+
+onMounted(() => {
+    load_unread_msg_count()
+})
+
 const navItems = [
 const navItems = [
   {
   {
     name: '首页',
     name: '首页',