feat(user): 我的页面消息菜单添加未读红点

- 新增 showMessageBadge 计算属性，从 userStore.unreadMsgCount 读取
- 为菜单项添加 key 属性，用于识别消息菜单
- 添加 .menu-badge 样式，与 TabBar 红点保持一致
- 红点仅在未读消息数大于 0 时显示

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+## [2026-02-13] - 我的页面消息红点显示
+
+### 新增
+- 我的页面消息菜单项添加未读红点显示
+- 新增 showMessageBadge 计算属性，从 userStore.unreadMsgCount 读取未读状态
+- 添加 .menu-badge 样式，与 TabBar 红点保持一致
+
+### 优化
+- 为菜单项添加 key 属性，便于识别特定菜单项
+- 红点逻辑与 TabBar 完全一致，确保同步显示
+
+---
+
+**详细信息**：
+- **影响文件**: src/pages/mine/index.vue
+- **技术栈**: Vue 3, Pinia
+- **测试状态**: 已通过
+- **备注**: 红点在 unreadMsgCount > 0 时显示
+
+---
+
 ## [2026-02-12] - 优化反馈列表和消息页面图片加载
 
 ### 新增

@@ -56,10 +56,12 @@
           class="flex items-center justify-between p-[24rpx] rounded-[20rpx] active:bg-gray-50 transition-all duration-200"
           @tap="handleMenuClick(item)">
           <view class="flex items-center">
-            <!-- Icon with soft background -->
-            <view class="w-[72rpx] h-[72rpx] rounded-[20rpx] flex items-center justify-center mr-[24rpx]"
+            <!-- Icon with soft background and badge -->
+            <view class="w-[72rpx] h-[72rpx] rounded-[20rpx] flex items-center justify-center mr-[24rpx] relative"
               :class="item.bgClass">
               <IconFont :name="item.icon" size="22" :color="item.iconColor" />
+              <!-- 消息红点（与 TabBar 样式保持一致）-->
+              <view v-if="item.key === 'message' && showMessageBadge" class="menu-badge"></view>
             </view>
             <text class="text-[30rpx] text-gray-800 font-medium tracking-wide">{{ item.title }}</text>
           </view>
@@ -108,6 +110,11 @@ const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
 
 /**
+ * @description 是否显示消息红点（与 TabBar 逻辑一致）
+ */
+const showMessageBadge = computed(() => userStore.unreadMsgCount > 0)
+
+/**
  * @description 页面加载时获取用户信息（首次进入）
  */
 useLoad(() => {
@@ -132,6 +139,7 @@ useDidShow(() => {
 // Using subtle background colors for icons to add vitality without being "playful"
 const menuItems = [
   {
+    key: 'plan',
     title: '我的计划书',
     icon: 'order',
     path: '/pages/plan/index',
@@ -139,6 +147,7 @@ const menuItems = [
     bgClass: 'bg-blue-50'
   },
   {
+    key: 'message',
     title: '我的消息',
     icon: 'message',
     path: '/pages/message/index',
@@ -146,6 +155,7 @@ const menuItems = [
     bgClass: 'bg-emerald-50'
   },
   {
+    key: 'favorites',
     title: '我的收藏',
     icon: 'star',
     path: '/pages/favorites/index',
@@ -153,6 +163,7 @@ const menuItems = [
     bgClass: 'bg-amber-50'
   },
   {
+    key: 'help',
     title: '帮助中心',
     icon: 'service',
     path: '/pages/help-center/index',
@@ -160,6 +171,7 @@ const menuItems = [
     bgClass: 'bg-indigo-50'
   },
   {
+    key: 'feedback',
     title: '意见反馈',
     icon: 'edit',
     path: '/pages/feedback-list/index',
@@ -228,5 +240,20 @@ const handleLogout = async () => {
 </script>
 
 <style lang="less">
-/* No custom CSS needed, all Tailwind */
+/**
+ * 菜单红点样式（与 TabBar 保持一致）
+ * @description 使用行业标准的小红点设计：右上角、16rpx、红色背景
+ */
+.menu-badge {
+  position: absolute;
+  top: -4rpx;
+  right: -4rpx;
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #ff4d4f;
+  border-radius: 50%;
+  border: 2rpx solid #fff;
+  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
+  z-index: 1;
+}
 </style>