diff --git a/src/components/watch-room/ChatFloatingWindow.tsx b/src/components/watch-room/ChatFloatingWindow.tsx index 8f03ffe..f881923 100644 --- a/src/components/watch-room/ChatFloatingWindow.tsx +++ b/src/components/watch-room/ChatFloatingWindow.tsx @@ -14,7 +14,9 @@ export default function ChatFloatingWindow() { const [message, setMessage] = useState(''); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [showRoomInfo, setShowRoomInfo] = useState(false); + const [unreadCount, setUnreadCount] = useState(0); const messagesEndRef = useRef(null); + const lastMessageCountRef = useRef(0); // 自动滚动到底部 useEffect(() => { @@ -23,6 +25,28 @@ export default function ChatFloatingWindow() { } }, [watchRoom?.chatMessages, watchRoom?.currentRoom]); + // 跟踪未读消息数量 + useEffect(() => { + if (!watchRoom?.chatMessages) return; + + const currentCount = watchRoom.chatMessages.length; + if (currentCount > lastMessageCountRef.current) { + // 有新消息 + if (!isOpen && !isMinimized) { + // 只有在聊天窗口完全关闭时才增加未读计数 + setUnreadCount(prev => prev + (currentCount - lastMessageCountRef.current)); + } + } + lastMessageCountRef.current = currentCount; + }, [watchRoom?.chatMessages, isOpen, isMinimized]); + + // 打开聊天窗口时清空未读计数 + useEffect(() => { + if (isOpen || isMinimized) { + setUnreadCount(0); + } + }, [isOpen, isMinimized]); + // 如果没有加入房间,不显示聊天按钮 if (!watchRoom?.currentRoom) { return null; @@ -81,13 +105,13 @@ export default function ChatFloatingWindow() { {/* 聊天按钮 */}