From d31edeef6507ec2720bc7076dd33fe67d47a2535 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Fri, 5 Sep 2025 11:05:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor(weChat):=20=E9=87=8D=E6=9E=84=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将消息滚动逻辑移至MessageRecord组件 统一处理群组和好友消息的ID判断 移除ChatWindow中不必要的props传递 --- .../components/MessageRecord/index.tsx | 40 ++++++++++--------- .../pc/ckbox/components/ChatWindow/index.tsx | 25 ++---------- Cunkebao/src/store/module/weChat/weChat.ts | 15 +++++-- 3 files changed, 36 insertions(+), 44 deletions(-) diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx index 40fd62cf..3c059ad9 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/components/MessageRecord/index.tsx @@ -1,28 +1,33 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import { Avatar } from "antd"; import { UserOutlined } from "@ant-design/icons"; import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; import { formatWechatTime } from "@/utils/common"; import styles from "./MessageRecord.module.scss"; +import { useWeChatStore } from "@/store/module/weChat/weChat"; interface MessageRecordProps { - messages: ChatRecord[]; contract: ContractData | weChatGroup; - currentGroupMembers?: any[]; - messagesEndRef?: React.RefObject; } -const MessageRecord: React.FC = ({ - messages, - contract, - currentGroupMembers = [], - messagesEndRef, -}) => { +const MessageRecord: React.FC = ({ contract }) => { + const messagesEndRef = useRef(null); + const currentMessages = useWeChatStore(state => state.currentMessages); + const currentGroupMembers = useWeChatStore( + state => state.currentGroupMembers, + ); + + useEffect(() => { + console.log(currentMessages); + scrollToBottom(); + }, [currentMessages]); + + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + // 解析消息内容，判断消息类型并返回对应的渲染内容 - const parseMessageContent = ( - content: string | null | undefined, - msg: ChatRecord, - ) => { + const parseMessageContent = (content: string | null | undefined) => { // 处理null或undefined的内容 if (content === null || content === undefined) { return
消息内容不可用
; @@ -149,7 +154,7 @@ const MessageRecord: React.FC = ({ {contract.nickname} )} - {parseMessageContent(msg?.content, msg)} + {parseMessageContent(msg?.content)} )} @@ -171,7 +176,6 @@ const MessageRecord: React.FC = ({ )} {parseMessageContent( clearWechatidInContent(msg?.sender, msg?.content), - msg, )} @@ -179,7 +183,7 @@ const MessageRecord: React.FC = ({ {isOwn && (
- {parseMessageContent(msg?.content, msg)} + {parseMessageContent(msg?.content)}
)} @@ -189,7 +193,7 @@ const MessageRecord: React.FC = ({ return (
- {groupMessagesByTime(messages).map((group, groupIndex) => ( + {groupMessagesByTime(currentMessages).map((group, groupIndex) => (
{group.time}
{group.messages.map(renderMessage)} diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index 16a3c643..e90aab2a 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx @@ -7,13 +7,13 @@ import { UserOutlined, TeamOutlined, } from "@ant-design/icons"; -import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; +import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; import styles from "./ChatWindow.module.scss"; import ProfileCard from "./components/ProfileCard"; import MessageEnter from "./components/MessageEnter"; import MessageRecord from "./components/MessageRecord"; -import { useWeChatStore } from "@/store/module/weChat/weChat"; + const { Header, Content } = Layout; interface ChatWindowProps { @@ -27,20 +27,6 @@ const ChatWindow: React.FC = ({ showProfile = true, onToggleProfile, }) => { - const messagesEndRef = useRef(null); - const currentMessages = useWeChatStore(state => state.currentMessages); - const currentGroupMembers = useWeChatStore( - state => state.currentGroupMembers, - ); - - useEffect(() => { - scrollToBottom(); - }, [currentMessages]); - - const scrollToBottom = () => { - messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); - }; - const chatMenu = ( }> @@ -109,12 +95,7 @@ const ChatWindow: React.FC = ({ {/* 聊天内容 */} - + {/* 消息输入组件 */} diff --git a/Cunkebao/src/store/module/weChat/weChat.ts b/Cunkebao/src/store/module/weChat/weChat.ts index 28e32d49..4ab64187 100644 --- a/Cunkebao/src/store/module/weChat/weChat.ts +++ b/Cunkebao/src/store/module/weChat/weChat.ts @@ -89,20 +89,27 @@ export const useWeChatStore = create()( receivedMsg: message => { const currentContract = useWeChatStore.getState().currentContract; + //判断群还是好友 + const getMessageId = + currentContract?.chatroomId || message.wechatFriendId; + const isGroup = currentContract?.chatroomId; + if ( currentContract && currentContract.wechatAccountId == message.wechatAccountId && - currentContract.id == message.wechatFriendId + currentContract.id == getMessageId ) { + console.log("进入"); + if (isGroup) { + message.unreadCount = 1; + } set(state => ({ currentMessages: [...state.currentMessages, message], })); } else { //更新消息列表unread数值，根据接收的++1 这样 const chatSessions = useCkChatStore.getState().chatSessions; - const session = chatSessions.find( - item => item.id == message.wechatFriendId, - ); + const session = chatSessions.find(item => item.id == getMessageId); if (session) { session.unreadCount = Number(session.unreadCount) + 1; updateChatSession(session);