refactor(weChat): 重构消息处理逻辑并优化组件结构

将消息滚动逻辑移至MessageRecord组件
统一处理群组和好友消息的ID判断
移除ChatWindow中不必要的props传递

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<HTMLDivElement>;
 }
 
-const MessageRecord: React.FC<MessageRecordProps> = ({
-  messages,
-  contract,
-  currentGroupMembers = [],
-  messagesEndRef,
-}) => {
+const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
+  const messagesEndRef = useRef<HTMLDivElement>(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 <div className={styles.messageText}>消息内容不可用</div>;
@@ -149,7 +154,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({
                     {contract.nickname}
                   </div>
                 )}
-                {parseMessageContent(msg?.content, msg)}
+                {parseMessageContent(msg?.content)}
               </div>
             </>
           )}
@@ -171,7 +176,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({
                 )}
                 {parseMessageContent(
                   clearWechatidInContent(msg?.sender, msg?.content),
-                  msg,
                 )}
               </div>
             </>
@@ -179,7 +183,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({
 
           {isOwn && (
             <div className={styles.messageBubble}>
-              {parseMessageContent(msg?.content, msg)}
+              {parseMessageContent(msg?.content)}
             </div>
           )}
         </div>
@@ -189,7 +193,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({
 
   return (
     <div className={styles.messagesContainer}>
-      {groupMessagesByTime(messages).map((group, groupIndex) => (
+      {groupMessagesByTime(currentMessages).map((group, groupIndex) => (
         <React.Fragment key={`group-${groupIndex}`}>
           <div className={styles.messageTime}>{group.time}</div>
           {group.messages.map(renderMessage)}

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<ChatWindowProps> = ({
   showProfile = true,
   onToggleProfile,
 }) => {
-  const messagesEndRef = useRef<HTMLDivElement>(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 = (
     <Menu>
       <Menu.Item key="profile" icon={<UserOutlined />}>
@@ -109,12 +95,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
 
         {/* 聊天内容 */}
         <Content className={styles.chatContent}>
-          <MessageRecord
-            messages={currentMessages}
-            contract={contract}
-            currentGroupMembers={currentGroupMembers}
-            messagesEndRef={messagesEndRef}
-          />
+          <MessageRecord contract={contract} />
         </Content>
 
         {/* 消息输入组件 */}

Cunkebao/src/store/module/weChat/weChat.ts

@@ -89,20 +89,27 @@ export const useWeChatStore = create<WeChatState>()(
 
       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);