diff --git a/src/components/GuideBar/index.tsx b/src/components/GuideBar/index.tsx index 4c6a350..7e4b240 100644 --- a/src/components/GuideBar/index.tsx +++ b/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 checkReddot = async () => { - try { - const res = await messageService.getReddotInfo(); - if (res.code === 0) { - setHasReddot(res.data.has_reddot || false); - } - } catch (e) { - console.error("获取红点状态失败:", e); - } - }; + const reddotInfo = useReddotInfo(); + const fetchReddotInfo = useFetchReddotInfo(); useEffect(() => { - checkReddot(); + fetchReddotInfo(); }, []); // 每次页面显示时刷新红点状态 useDidShow(() => { - checkReddot(); + fetchReddotInfo(); }); const guideItems = [ @@ -91,7 +80,7 @@ const GuideBar = (props) => { key={item.code} > {item.text} - {item.code === "message" && hasReddot && ( + {item.code === "message" && reddotInfo?.has_reddot && ( )} diff --git a/src/main_pages/components/MessagePageContent.tsx b/src/main_pages/components/MessagePageContent.tsx index dbd0563..2af26fa 100644 --- a/src/main_pages/components/MessagePageContent.tsx +++ b/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 { @@ -27,14 +27,16 @@ type MessageCategory = "comment" | "follow"; const MessagePageContent = () => { const { statusNavbarHeightInfo } = useGlobalState() || {}; const { totalHeight = 98 } = statusNavbarHeightInfo || {}; - + const [activeTab, setActiveTab] = useState(null); const [messageList, setMessageList] = useState([]); 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 && ( - {commentUnreadCount > 99 ? '99+' : commentUnreadCount} + {(reddotInfo?.comment_unread_count || 0) > 99 ? '99+' : reddotInfo?.comment_unread_count} )} @@ -168,9 +157,9 @@ const MessagePageContent = () => { src={require('@/static/message/follow-icon.svg')} mode="aspectFit" /> - {followUnreadCount > 0 && ( + {(reddotInfo?.follow_unread_count || 0) > 0 && ( - {followUnreadCount > 99 ? '99+' : followUnreadCount} + {(reddotInfo?.follow_unread_count || 0) > 99 ? '99+' : reddotInfo?.follow_unread_count} )} diff --git a/src/other_pages/message/index.tsx b/src/other_pages/message/index.tsx index 527559a..c2a807f 100644 --- a/src/other_pages/message/index.tsx +++ b/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 && ( - {commentUnreadCount > 99 ? '+99' : `+${commentUnreadCount}`} + {(reddotInfo?.comment_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.comment_unread_count || 0}`} )} @@ -186,9 +175,9 @@ const Message = () => { src={require('@/static/message/follow-icon.svg')} mode="aspectFit" /> - {followUnreadCount > 0 && ( + {(reddotInfo?.follow_unread_count || 0) > 0 && ( - {followUnreadCount > 99 ? '+99' : `+${followUnreadCount}`} + {(reddotInfo?.follow_unread_count || 0) > 99 ? '+99' : `+${reddotInfo?.follow_unread_count || 0}`} )} diff --git a/src/store/messageStore.ts b/src/store/messageStore.ts new file mode 100644 index 0000000..6544bde --- /dev/null +++ b/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; + // 重置红点信息 + resetReddotInfo: () => void; + // 更新红点信息的某个字段 + updateReddotInfo: (info: Partial) => void; +} + +// 完整的 Store 类型 +type MessageStore = MessageState & MessageActions; + +// 创建 store +export const useMessageStore = create()((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) => { + 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);