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);