修复红点问题

src/components/GuideBar/index.tsx

@@ -1,35 +1,24 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { View, Text } from "@tarojs/components";
 import Taro, { useDidShow } from "@tarojs/taro";
 import { redirectTo } from "@/utils/navigation";
-import messageService from "@/services/messageService";
+import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
 import "./index.scss";
 import PublishMenu from "../PublishMenu";
 export type currentPageType = "games" | "message" | "personal";
 
 const GuideBar = (props) => {
   const { currentPage, guideBarClassName, onPublishMenuVisibleChange, onTabChange } = props;
-  const [hasReddot, setHasReddot] = useState(false);
+  const reddotInfo = useReddotInfo();
-
+  const fetchReddotInfo = useFetchReddotInfo();
-  // 获取红点状态
-  const checkReddot = async () => {
-    try {
-      const res = await messageService.getReddotInfo();
-      if (res.code === 0) {
-        setHasReddot(res.data.has_reddot || false);
-      }
-    } catch (e) {
-      console.error("获取红点状态失败:", e);
-    }
-  };
 
   useEffect(() => {
-    checkReddot();
+    fetchReddotInfo();
   }, []);
 
   // 每次页面显示时刷新红点状态
   useDidShow(() => {
-    checkReddot();
+    fetchReddotInfo();
   });
 
   const guideItems = [
@@ -91,7 +80,7 @@ const GuideBar = (props) => {
               key={item.code}
             >
               <Text>{item.text}</Text>
-              {item.code === "message" && hasReddot && (
+              {item.code === "message" && reddotInfo?.has_reddot && (
                 <View className="reddot"></View>
               )}
             </View>

src/main_pages/components/MessagePageContent.tsx

@@ -2,11 +2,11 @@ import { useState, useEffect } from "react";
 import { View, Text, Image, ScrollView } from "@tarojs/components";
 import { EmptyState } from "@/components";
 import noticeService from "@/services/noticeService";
-import messageService from "@/services/messageService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro from "@tarojs/taro";
 import { useGlobalState } from "@/store/global";
 import { navigateTo } from "@/utils/navigation";
+import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
 import "@/other_pages/message/index.scss";
 
 interface MessageItem {
@@ -33,8 +33,10 @@ const MessagePageContent = () => {
   const [loading, setLoading] = useState(false);
   const [reachedBottom, setReachedBottom] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  const [commentUnreadCount, setCommentUnreadCount] = useState(0);
+
-  const [followUnreadCount, setFollowUnreadCount] = useState(0);
+  // 从 store 获取红点信息
+  const reddotInfo = useReddotInfo();
+  const fetchReddotInfo = useFetchReddotInfo();
 
   const getNoticeList = async () => {
     if (loading) return;
@@ -55,22 +57,9 @@ const MessagePageContent = () => {
     }
   };
 
-  // 获取红点信息
-  const getReddotInfo = async () => {
-    try {
-      const res = await messageService.getReddotInfo();
-      if (res.code === 0) {
-        setCommentUnreadCount(res.data.comment_unread_count || 0);
-        setFollowUnreadCount(res.data.follow_unread_count || 0);
-      }
-    } catch (e) {
-      console.error("获取红点信息失败:", e);
-    }
-  };
-
   useEffect(() => {
     getNoticeList();
-    getReddotInfo();
+    fetchReddotInfo();
   }, []);
 
   const filteredMessages = messageList;
@@ -150,9 +139,9 @@ const MessagePageContent = () => {
               src={require('@/static/message/comment-icon.svg')}
               mode="aspectFit"
             />
-            {commentUnreadCount > 0 && (
+            {(reddotInfo?.comment_unread_count || 0) > 0 && (
               <View className="badge">
-                {commentUnreadCount > 99 ? '99+' : commentUnreadCount}
+                {(reddotInfo?.comment_unread_count || 0) > 99 ? '99+' : reddotInfo?.comment_unread_count}
               </View>
             )}
           </View>
@@ -168,9 +157,9 @@ const MessagePageContent = () => {
               src={require('@/static/message/follow-icon.svg')}
               mode="aspectFit"
             />
-            {followUnreadCount > 0 && (
+            {(reddotInfo?.follow_unread_count || 0) > 0 && (
               <View className="badge">
-                {followUnreadCount > 99 ? '99+' : followUnreadCount}
+                {(reddotInfo?.follow_unread_count || 0) > 99 ? '99+' : reddotInfo?.follow_unread_count}
               </View>
             )}
           </View>

src/other_pages/message/index.tsx

@@ -3,9 +3,9 @@ import { View, Text, Image, ScrollView } from "@tarojs/components";
 import GuideBar from "@/components/GuideBar";
 import { withAuth, EmptyState, GeneralNavbar } from "@/components";
 import noticeService from "@/services/noticeService";
-import messageService from "@/services/messageService";
 import { formatRelativeTime } from "@/utils/timeUtils";
 import Taro, { useDidShow } from "@tarojs/taro";
+import { useReddotInfo, useFetchReddotInfo } from "@/store/messageStore";
 import "./index.scss";
 
 // 消息类型定义
@@ -31,8 +31,10 @@ const Message = () => {
   const [loading, setLoading] = useState(false);
   const [reachedBottom, setReachedBottom] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  const [commentUnreadCount, setCommentUnreadCount] = useState(0);
+
-  const [followUnreadCount, setFollowUnreadCount] = useState(0);
+  // 从 store 获取红点信息
+  const reddotInfo = useReddotInfo();
+  const fetchReddotInfo = useFetchReddotInfo();
 
   // 获取消息列表
   const getNoticeList = async () => {
@@ -54,27 +56,14 @@ const Message = () => {
     }
   };
 
-  // 获取红点信息
-  const getReddotInfo = async () => {
-    try {
-      const res = await messageService.getReddotInfo();
-      if (res.code === 0) {
-        setCommentUnreadCount(res.data.comment_unread_count || 0);
-        setFollowUnreadCount(res.data.follow_unread_count || 0);
-      }
-    } catch (e) {
-      console.error("获取红点信息失败:", e);
-    }
-  };
-
   useEffect(() => {
     getNoticeList();
-    getReddotInfo();
+    fetchReddotInfo();
   }, []);
 
   // 每次页面显示时刷新红点信息
   useDidShow(() => {
-    getReddotInfo();
+    fetchReddotInfo();
   });
 
   // 过滤系统消息
@@ -168,9 +157,9 @@ const Message = () => {
               src={require('@/static/message/comment-icon.svg')}
               mode="aspectFit"
             />
-            {commentUnreadCount > 0 && (
+            {(reddotInfo?.comment_unread_count || 0) > 0 && (
               <View className="badge">
-                {commentUnreadCount > 99 ? '+99' : `+${commentUnreadCount}`}
+                {(reddotInfo?.comment_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.comment_unread_count || 0}`}
               </View>
             )}
           </View>
@@ -186,9 +175,9 @@ const Message = () => {
               src={require('@/static/message/follow-icon.svg')}
               mode="aspectFit"
             />
-            {followUnreadCount > 0 && (
+            {(reddotInfo?.follow_unread_count || 0) > 0 && (
               <View className="badge">
-                {followUnreadCount > 99 ? '+99' : `+${followUnreadCount}`}
+                {(reddotInfo?.follow_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.follow_unread_count || 0}`}
               </View>
             )}
           </View>

src/store/messageStore.ts

@@ -0,0 +1,75 @@
+import { create } from "zustand";
+import messageService, { ReddotInfo } from "@/services/messageService";
+
+interface MessageState {
+  // 红点信息
+  reddotInfo: ReddotInfo | null;
+  // 是否正在加载
+  loading: boolean;
+}
+
+interface MessageActions {
+  // 获取红点信息
+  fetchReddotInfo: () => Promise<void>;
+  // 重置红点信息
+  resetReddotInfo: () => void;
+  // 更新红点信息的某个字段
+  updateReddotInfo: (info: Partial<ReddotInfo>) => void;
+}
+
+// 完整的 Store 类型
+type MessageStore = MessageState & MessageActions;
+
+// 创建 store
+export const useMessageStore = create<MessageStore>()((set, get) => ({
+  // 初始状态
+  reddotInfo: null,
+  loading: false,
+
+  // 获取红点信息
+  fetchReddotInfo: async () => {
+    const { loading } = get();
+
+    // 防止重复请求
+    if (loading) return;
+
+    set({ loading: true });
+
+    try {
+      const res = await messageService.getReddotInfo();
+      if (res.code === 0) {
+        set({
+          reddotInfo: res.data,
+          loading: false
+        });
+      } else {
+        set({ loading: false });
+      }
+    } catch (e) {
+      console.error("获取红点信息失败:", e);
+      set({ loading: false });
+    }
+  },
+
+  // 重置红点信息
+  resetReddotInfo: () => {
+    set({
+      reddotInfo: null
+    });
+  },
+
+  // 更新红点信息的某个字段
+  updateReddotInfo: (info: Partial<ReddotInfo>) => {
+    const { reddotInfo } = get();
+    if (reddotInfo) {
+      set({
+        reddotInfo: { ...reddotInfo, ...info }
+      });
+    }
+  },
+}));
+
+// 导出便捷的 hooks
+export const useMessageState = () => useMessageStore((state) => state);
+export const useReddotInfo = () => useMessageStore((state) => state.reddotInfo);
+export const useFetchReddotInfo = () => useMessageStore((state) => state.fetchReddotInfo);