From 0d18623473c752d25a929c268d7b7931edc0d31e 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: Thu, 4 Sep 2025 18:07:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=BE=A4=E8=81=8A):=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E7=BE=A4=E8=81=8A=E6=B6=88=E6=81=AF=E5=B1=95=E7=A4=BA=E5=8F=8A?= =?UTF-8?q?=E6=88=90=E5=91=98=E4=BF=A1=E6=81=AF=E8=8E=B7=E5=8F=96=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在WeChatState中新增currentGroupMembers字段存储群成员信息 - 添加getGroupMembers API接口获取群成员数据 - 重构消息类型定义，统一使用ChatRecord接口 - 修改消息处理逻辑，支持群聊消息展示 - 调整聊天窗口样式，区分群聊和私聊消息显示 - 实现群成员头像和昵称展示功能 --- Cunkebao/src/pages/pc/ckbox/api.ts | 9 +++ .../ChatWindow/ChatWindow.module.scss | 21 ++--- .../pc/ckbox/components/ChatWindow/index.tsx | 76 +++++++++++++++---- Cunkebao/src/pages/pc/ckbox/data.ts | 9 +++ .../src/store/module/weChat/weChat.data.ts | 1 + Cunkebao/src/store/module/weChat/weChat.ts | 12 ++- .../src/store/module/websocket/msg.data.ts | 26 +------ .../src/store/module/websocket/msgManage.ts | 6 +- 8 files changed, 109 insertions(+), 51 deletions(-) diff --git a/Cunkebao/src/pages/pc/ckbox/api.ts b/Cunkebao/src/pages/pc/ckbox/api.ts index e8927829..98bc336a 100644 --- a/Cunkebao/src/pages/pc/ckbox/api.ts +++ b/Cunkebao/src/pages/pc/ckbox/api.ts @@ -60,6 +60,15 @@ export function getGroupList(params: { prevId: number; count: number }) { ); } +//获取群成员 +export function getGroupMembers(params: { id: number }) { + return request( + "/api/WechatChatroom/listMembersByWechatChatroomId", + params, + "GET", + ); +} + //触客宝登陆 export function loginWithToken(params: any) { return request( diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss index 917988e3..dfd8c0ce 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/ChatWindow.module.scss @@ -351,12 +351,7 @@ } .messageBubble { - background: #fff; - border-radius: 12px; - padding: 8px 12px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); max-width: 100%; - .messageSender { font-size: 12px; color: #8c8c8c; @@ -367,6 +362,11 @@ color: #262626; line-height: 1.5; word-break: break-word; + background: #fff; + padding: 8px 12px; + border-radius: 8px; + + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .emojiMessage { @@ -567,11 +567,14 @@ margin-left: auto; .messageBubble { - background: #1890ff; - color: #fff; - + color: #262626; + line-height: 1.5; + word-break: break-word; + background: #fff; + border-radius: 8px; + max-width: 100%; .messageText { - color: #fff; + color: #333; } .messageTime { diff --git a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx index e1bfb7ca..0d107a46 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx +++ b/Cunkebao/src/pages/pc/ckbox/components/ChatWindow/index.tsx @@ -38,6 +38,9 @@ const ChatWindow: React.FC = ({ }) => { const messagesEndRef = useRef(null); const currentMessages = useWeChatStore(state => state.currentMessages); + const currentGroupMembers = useWeChatStore( + state => state.currentGroupMembers, + ); const prevMessagesRef = useRef(currentMessages); useEffect(() => { @@ -540,12 +543,22 @@ const ChatWindow: React.FC = ({ messages: [msg], })); }; - + const groupMemberAvatar = (msg: ChatRecord) => { + const groupMembers = currentGroupMembers.find( + v => v.wechatId == msg.sender.wechatId, + ); + return groupMembers.avatar; + }; + const clearWechatidInContent = (sender, content: string) => { + return content.replace(new RegExp(`${sender.wechatId}:\n`, "g"), ""); + }; const renderMessage = (msg: ChatRecord) => { + console.log(msg); // 添加null检查，防止访问null对象的属性 if (!msg) return null; const isOwn = msg?.isSend; + const isGroup = !!contract.chatroomId; return (
= ({ }`} >
- {!isOwn && ( - } - className={styles.messageAvatar} - /> + {/* 如果不是群聊 */} + {!isGroup && !isOwn && ( + <> + } + className={styles.messageAvatar} + /> + +
+ {!isOwn && ( +
+ {contract.nickname} +
+ )} + {parseMessageContent(msg?.content, msg)} +
+ + )} + {/* 如果是群聊 */} + {isGroup && !isOwn && ( + <> + } + className={styles.messageAvatar} + /> + +
+ {!isOwn && ( +
+ {msg?.sender?.nickname} +
+ )} + {parseMessageContent( + clearWechatidInContent(msg?.sender, msg?.content), + msg, + )} +
+ + )} + + {isOwn && ( +
+ {parseMessageContent(msg?.content, msg)} +
)} -
- {!isOwn && ( -
{msg?.senderName}
- )} - {parseMessageContent(msg?.content, msg)} -
); diff --git a/Cunkebao/src/pages/pc/ckbox/data.ts b/Cunkebao/src/pages/pc/ckbox/data.ts index c65df896..089d8935 100644 --- a/Cunkebao/src/pages/pc/ckbox/data.ts +++ b/Cunkebao/src/pages/pc/ckbox/data.ts @@ -178,6 +178,15 @@ export interface ChatRecord { origin: number; msgId: number; recalled: boolean; + sender?: { + chatroomNickname: string; + isAdmin: boolean; + isDeleted: boolean; + nickname: string; + ownerWechatId: string; + wechatId: string; + [key: string]: any; + }; [key: string]: any; } diff --git a/Cunkebao/src/store/module/weChat/weChat.data.ts b/Cunkebao/src/store/module/weChat/weChat.data.ts index a63ff292..99bfcb15 100644 --- a/Cunkebao/src/store/module/weChat/weChat.data.ts +++ b/Cunkebao/src/store/module/weChat/weChat.data.ts @@ -9,6 +9,7 @@ export interface WeChatState { // 消息加载状态 messagesLoading: boolean; + currentGroupMembers: any[]; // Actions setCurrentContact: ( diff --git a/Cunkebao/src/store/module/weChat/weChat.ts b/Cunkebao/src/store/module/weChat/weChat.ts index 22afe3b8..28e32d49 100644 --- a/Cunkebao/src/store/module/weChat/weChat.ts +++ b/Cunkebao/src/store/module/weChat/weChat.ts @@ -1,6 +1,10 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; -import { getChatMessages, getChatroomMessages } from "@/pages/pc/ckbox/api"; +import { + getChatMessages, + getChatroomMessages, + getGroupMembers, +} from "@/pages/pc/ckbox/api"; import { WeChatState } from "./weChat.data"; import { clearUnreadCount, updateConfig } from "@/pages/pc/ckbox/api"; import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data"; @@ -17,6 +21,7 @@ export const useWeChatStore = create()( currentContract: null, currentMessages: [], messagesLoading: false, + currentGroupMembers: [], // Actions setCurrentContact: ( @@ -56,7 +61,10 @@ export const useWeChatStore = create()( if ("chatroomId" in contact && contact.chatroomId) { params.wechatChatroomId = contact.id; const messages = await getChatroomMessages(params); - set({ currentMessages: messages || [] }); + const currentGroupMembers = await getGroupMembers({ + id: contact.id, + }); + set({ currentMessages: messages || [], currentGroupMembers }); } else { params.wechatFriendId = contact.id; const messages = await getChatMessages(params); diff --git a/Cunkebao/src/store/module/websocket/msg.data.ts b/Cunkebao/src/store/module/websocket/msg.data.ts index ed8510b1..ec1a29c7 100644 --- a/Cunkebao/src/store/module/websocket/msg.data.ts +++ b/Cunkebao/src/store/module/websocket/msg.data.ts @@ -1,27 +1,7 @@ -export interface FriendMessage { - id: number; - wechatFriendId: number; - wechatAccountId: number; - tenantId: number; - accountId: number; - synergyAccountId: number; - content: string; - msgType: number; - msgSubType: number; - msgSvrId: string; - isSend: boolean; - createTime: string; - isDeleted: boolean; - deleteTime: string; - sendStatus: number; - wechatTime: number; - origin: number; - msgId: number; - recalled: boolean; -} +import { ChatRecord } from "@/pages/pc/ckbox/data"; export interface Messages { - friendMessage: FriendMessage | null; - chatroomMessage: string; + friendMessage?: ChatRecord | null; + chatroomMessage?: ChatRecord | null; seq: number; cmdType: string; } diff --git a/Cunkebao/src/store/module/websocket/msgManage.ts b/Cunkebao/src/store/module/websocket/msgManage.ts index 3146e213..92ec518c 100644 --- a/Cunkebao/src/store/module/websocket/msgManage.ts +++ b/Cunkebao/src/store/module/websocket/msgManage.ts @@ -28,7 +28,7 @@ const messageHandlers: Record = { // 发送消息响应 CmdSendMessageResp: message => { console.log("发送消息响应", message); - addMessage(message.friendMessage); + addMessage(message.friendMessage || message.chatroomMessage); // 在这里添加具体的处理逻辑 }, CmdSendMessageResult: message => { @@ -38,13 +38,13 @@ const messageHandlers: Record = { // 接收消息响应 CmdReceiveMessageResp: message => { console.log("接收消息响应", message); - addMessage(message.friendMessage); + addMessage(message.friendMessage || message.chatroomMessage); // 在这里添加具体的处理逻辑 }, //收到消息 CmdNewMessage: (message: Messages) => { // 在这里添加具体的处理逻辑 - receivedMsg(message.friendMessage); + receivedMsg(message.friendMessage || message.chatroomMessage); }, CmdFriendInfoChanged: message => { // console.log("好友信息变更", message);