TabBar 红点提醒功能

📖 功能说明

TabBar 红点提醒功能用于在"我的"按钮右上角显示红点，提示用户有未读消息或通知。

⚙️ 功能开关

配置文件：src/config/features.js

export const features = {
  // 🔴 功能总开关（默认关闭）
  tabbarBadge: false,

  // 📊 字段名称（根据后端实际返回调整）
  tabbarBadgeField: 'unread_count',  // 当前使用 'unread_count'

  // 🎯 显示阈值
  tabbarBadgeThreshold: 1  // 当 unread_count >= 1 时显示红点
}

🚀 启用功能

方式 1: 修改配置文件（推荐）

// src/config/features.js
export const features = {
  tabbarBadge: true,  // ✅ 改为 true 启用功能
  // ...
}

方式 2: 临时测试（在浏览器控制台）

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

// 测试红点显示
userStore.userInfo = {
  ...userStore.userInfo,
  unread_count: 5  // 模拟 5 条未读消息
}

📊 数据流

┌─────────────────────────────────────────────────┐
│            页面显示（useShow）                    │
│       userStore.fetchUserInfo()                  │
└──────────────────┬──────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────┐
│          后端接口返回用户信息                      │
│    {                                              │
│      user: {                                     │
│        unread_count: 5,  ← 红点字段              │
│        ...                                       │
│      }                                           │
│    }                                              │
└──────────────────┬──────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────┐
│         User Store 计算红点状态                   │
│    computed tabBarBadges()                       │
│    └─ 读取 features.tabbarBadge                  │
│    └─ 读取 userInfo.unread_count                 │
│    └─ 返回 ['me'] 或 []                          │
└──────────────────┬──────────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────────┐
│            TabBar 组件                            │
│    自动读取 userStore.tabBarBadges              │
│    响应式更新红点显示 ✨                          │
└─────────────────────────────────────────────────┘

🔄 刷新时机

自动刷新（已实现）

// ✅ 首页 - 已添加
// pages/index/index.vue
useShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchUserInfo()
  }
})

手动刷新（可选）

// 在其他页面需要时添加
import { useShow } from '@tarojs/taro'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

useShow(() => {
  userStore.fetchUserInfo()
})

🎨 字段类型支持

数字类型（默认）

// 用户信息
{
  unread_count: 5  // 数字
}

// 配置
tabbarBadgeField: 'unread_count'
tabbarBadgeThreshold: 1  // >= 1 显示红点

布尔类型

// 用户信息
{
  has_notification: true  // 布尔
}

// 配置
tabbarBadgeField: 'has_notification'
tabbarBadgeThreshold: 1  // 布尔类型无效

🔧 调整字段名称

当后端接口字段变化时，只需修改配置文件：

// 场景 1: 字段改名
tabbarBadgeField: 'message_badge'  // 从 'unread_count' 改名

// 场景 2: 改用布尔值
tabbarBadgeField: 'has_unread_message'

// 场景 3: 嵌套字段（需要扩展逻辑）
tabbarBadgeField: 'notification.unread.count'

🧪 测试方法

方法 1: 模拟数据

// 在浏览器控制台
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

// 测试显示红点
userStore.userInfo = {
  ...userStore.userInfo,
  unread_count: 5
}

// 测试隐藏红点
userStore.userInfo = {
  ...userStore.userInfo,
  unread_count: 0
}

方法 2: 修改配置

// 临时关闭功能
import { features } from '@/config/features'
features.tabbarBadge = false

// 临时开启功能
features.tabbarBadge = true

📋 上线检查清单

在正式上线前，确认：

• ✅ 功能开关已启用：features.tabbarBadge = true
• ✅ 字段名称正确：与后端接口返回字段一致
• ✅ 阈值设置合理：tabbarBadgeThreshold
• ✅ 关键页面已添加刷新逻辑（首页、我的）
• ✅ 红点显示正常测试通过
• ✅ 性能测试：频繁切换页面无卡顿

🎯 最佳实践

1. 防止频繁请求

// ✅ 好：只在页面显示时请求
useShow(() => {
  userStore.fetchUserInfo()
})

// ❌ 坏：使用定时器频繁请求
setInterval(() => {
  userStore.fetchUserInfo()
}, 5000)

2. 条件刷新

// ✅ 好：只在已登录时刷新
useShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchUserInfo()
  }
})

3. 错误处理

// ✅ 好：捕获错误
useShow(() => {
  userStore.fetchUserInfo().catch(err => {
    console.error('刷新用户信息失败:', err)
  })
})

🐛 常见问题

Q: 红点不显示？

检查清单：

1. 功能开关是否启用：features.tabbarBadge === true
2. 用户信息是否存在：userStore.userInfo
3. 字段值是否满足条件：unread_count >= 1
4. 是否已登录：userStore.isLoggedIn === true

Q: 红点一直显示？

原因：后端返回的 unread_count 值 >= 1

解决：

• 等待后端更新数据
• 或用户查看消息后，后端将字段值改为 0

Q: 性能问题？

优化：

• 减少刷新频率
• 添加防抖（500ms）
• 只在关键页面刷新

📚 相关文件

• 📄 src/config/features.js - 功能配置
• 📄 src/stores/user.js - 用户状态管理
• 📄 src/components/TabBar.vue - TabBar 组件
• 📄 src/pages/index/index.vue - 首页（已添加刷新逻辑）

🔄 更新日志

2026-02-03

• ✨ 新增 TabBar 红点提醒功能
• ✅ 添加功能开关配置
• ✅ 实现自动刷新逻辑
• 📝 创建使用文档