diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/api.ts b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/api.ts index cb50d14b..447d672f 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/api.ts +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/api.ts @@ -1,6 +1,6 @@ // 朋友圈相关的API接口 import { useWebSocketStore } from "@/store/module/websocket/websocket"; - +import request from "@/api/request"; // 朋友圈请求参数接口 export interface FetchMomentParams { friendMessageId: number; @@ -30,3 +30,16 @@ export const fetchVoiceToTextApi = async (params: VoiceToTextParams) => { seq: params.seq, }); }; + +export const getChatroomMemberList = async (params: { groupId: number }) => { + return request( + "/v1/chatroom/getMemberList", + { + groupId: params.groupId, + keyword: "", + limit: 500, + page: 1, + }, + "GET", + ); +}; diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx index a3de4b84..bd5813d0 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx @@ -14,7 +14,11 @@ import styles from "./com.module.scss"; import { useWeChatStore } from "@/store/module/weChat/weChat"; import { useContactStore } from "@/store/module/weChat/contacts"; import { useCustomerStore } from "@weChatStore/customer"; -import { fetchReCallApi, fetchVoiceToTextApi } from "./api"; +import { + fetchReCallApi, + fetchVoiceToTextApi, + getChatroomMemberList, +} from "./api"; import TransmitModal from "./components/TransmitModal"; const IMAGE_EXT_REGEX = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i; @@ -131,6 +135,16 @@ const tryParseContentJson = (content: string): Record | null => { interface MessageRecordProps { contract: ContractData | weChatGroup; } +type GroupRenderItem = { + id: number; + identifier: string; + nickname: string; + avatar: string; + groupId: number; + chatroomId?: string; + wechatId?: string; +}; + const MessageRecord: React.FC = ({ contract }) => { const messagesEndRef = useRef(null); // 右键菜单状态 @@ -152,9 +166,6 @@ const MessageRecord: React.FC = ({ contract }) => { const loadChatMessages = useWeChatStore(state => state.loadChatMessages); const messagesLoading = useWeChatStore(state => state.messagesLoading); const isLoadingData = useWeChatStore(state => state.isLoadingData); - const currentGroupMembers = useWeChatStore( - state => state.currentGroupMembers, - ); const showCheckbox = useWeChatStore(state => state.showCheckbox); const prevMessagesRef = useRef(currentMessages); const updateShowCheckbox = useWeChatStore(state => state.updateShowCheckbox); @@ -168,6 +179,7 @@ const MessageRecord: React.FC = ({ contract }) => { ); const setTransmitModal = useContactStore(state => state.setTransmitModal); + const [groupRender, setGroupRender] = useState([]); const currentContract = useWeChatStore(state => state.currentContract); const updateQuoteMessageContent = useWeChatStore( @@ -345,6 +357,37 @@ const MessageRecord: React.FC = ({ contract }) => { ); }; + useEffect(() => { + const fetchGroupMembers = async () => { + if (!contract.chatroomId) { + setGroupRender([]); + return; + } + try { + const res = await getChatroomMemberList({ groupId: contract.id }); + setGroupRender(res?.list || []); + } catch (error) { + console.error("获取群成员失败", error); + setGroupRender([]); + } + }; + fetchGroupMembers(); + }, [contract.id, contract.chatroomId]); + + const renderGroupUser = (msg: ChatRecord) => { + if (!msg) { + return { avatar: "", nickname: "" }; + } + const member = + groupRender.find(user => user?.identifier === msg?.sender?.wechatId) || + groupRender.find(user => user?.wechatId === msg?.sender?.wechatId); + + return { + avatar: member?.avatar || msg?.sender?.avatar || "", + nickname: member?.nickname || msg?.sender?.nickname || "", + }; + }; + useEffect(() => { const prevMessages = prevMessagesRef.current; const prevLength = prevMessages.length; @@ -498,13 +541,6 @@ const MessageRecord: React.FC = ({ contract }) => { }; // 获取群成员头像 - const groupMemberAvatar = (msg: ChatRecord) => { - const groupMembers = currentGroupMembers.find( - v => v?.wechatId == msg?.sender?.wechatId, - ); - return groupMembers?.avatar; - }; - // 清理微信ID前缀 const clearWechatidInContent = (sender: any, content: string) => { try { @@ -579,6 +615,7 @@ const MessageRecord: React.FC = ({ contract }) => { const isOwn = msg?.isSend; const isGroup = !!contract.chatroomId; + const groupUser = isGroup ? renderGroupUser(msg) : null; return (
= ({ contract }) => { {/* 如果是群聊 */} {isGroup && !isOwn && ( <> - {/* Checkbox 显示控制 */} + {/* 群聊场景下根据消息发送者匹配头像与昵称 */} {showCheckbox && (
= ({ contract }) => { )} } className={styles.messageAvatar} />
{!isOwn && (
- {msg?.sender?.nickname} + {groupUser?.nickname}
)} <> diff --git a/Touchkebao/src/store/module/weChat/weChat.data.ts b/Touchkebao/src/store/module/weChat/weChat.data.ts index dc9aa163..1b0c1e94 100644 --- a/Touchkebao/src/store/module/weChat/weChat.data.ts +++ b/Touchkebao/src/store/module/weChat/weChat.data.ts @@ -46,6 +46,8 @@ export interface WeChatState { currentMessagesPageSize: number; /** 是否还有更多历史消息 */ currentMessagesHasMore: boolean; + /** 当前消息请求ID,用于防止跨联系人数据串联 */ + currentMessagesRequestId: number; /** 添加新消息 */ addMessage: (message: ChatRecord) => void; /** 更新指定消息 */ diff --git a/Touchkebao/src/store/module/weChat/weChat.ts b/Touchkebao/src/store/module/weChat/weChat.ts index e06e27cd..91282a3a 100644 --- a/Touchkebao/src/store/module/weChat/weChat.ts +++ b/Touchkebao/src/store/module/weChat/weChat.ts @@ -516,6 +516,7 @@ export const useWeChatStore = create()( currentMessagesPage: 1, currentMessagesPageSize: DEFAULT_MESSAGE_PAGE_SIZE, currentMessagesHasMore: true, + currentMessagesRequestId: 0, // ==================== 聊天消息管理方法 ==================== /** 添加新消息到当前聊天 */ @@ -603,6 +604,7 @@ export const useWeChatStore = create()( currentMessagesPage: 1, currentMessagesHasMore: true, currentMessagesPageSize: DEFAULT_MESSAGE_PAGE_SIZE, + currentMessagesRequestId: 0, }); }, /** 设置当前联系人并加载相关数据 */ @@ -616,6 +618,7 @@ export const useWeChatStore = create()( pendingMessages = []; const state = useWeChatStore.getState(); + const newRequestId = Date.now(); // 切换联系人时清空当前消息,等待重新加载 set({ currentMessages: [], @@ -623,6 +626,7 @@ export const useWeChatStore = create()( currentMessagesHasMore: true, currentMessagesPageSize: DEFAULT_MESSAGE_PAGE_SIZE, isLoadingAiChat: false, + currentMessagesRequestId: newRequestId, }); const params: any = {}; @@ -643,7 +647,10 @@ export const useWeChatStore = create()( set({ aiQuoteMessageContent: result }); }); // 注意:会话列表的未读数清零在MessageList组件的onContactClick中处理 - set({ currentContract: contract }); + set({ + currentContract: contract, + currentMessagesRequestId: newRequestId, + }); updateConfig({ id: contract.id, config: { chat: true }, @@ -656,8 +663,10 @@ export const useWeChatStore = create()( loadChatMessages: async (Init: boolean, pageOverride?: number) => { const state = useWeChatStore.getState(); const contact = state.currentContract; + const requestIdAtStart = state.currentMessagesRequestId; + const requestedContactId = contact?.id; - if (!contact) { + if (!contact || !requestedContactId) { return; } @@ -716,22 +725,42 @@ export const useWeChatStore = create()( }); } - set(current => ({ - currentMessages: Init - ? sortedMessages - : [...sortedMessages, ...current.currentMessages], - currentGroupMembers: - Init && isGroup ? nextGroupMembers : current.currentGroupMembers, - currentMessagesPage: paginationMeta.page, - currentMessagesPageSize: paginationMeta.limit, - currentMessagesHasMore: paginationMeta.hasMore, - })); + set(current => { + if ( + current.currentMessagesRequestId !== requestIdAtStart || + !current.currentContract || + current.currentContract.id !== requestedContactId + ) { + return {}; + } + return { + currentMessages: Init + ? sortedMessages + : [...sortedMessages, ...current.currentMessages], + currentGroupMembers: + Init && isGroup + ? nextGroupMembers + : current.currentGroupMembers, + currentMessagesPage: paginationMeta.page, + currentMessagesPageSize: paginationMeta.limit, + currentMessagesHasMore: paginationMeta.hasMore, + }; + }); } catch (error) { console.error("获取聊天消息失败:", error); } finally { - set({ - messagesLoading: false, - isLoadingData: false, + set(current => { + if ( + current.currentMessagesRequestId !== requestIdAtStart || + !current.currentContract || + current.currentContract.id !== requestedContactId + ) { + return {}; + } + return { + messagesLoading: false, + isLoadingData: false, + }; }); } }, diff --git a/Touchkebao/src/store/module/websocket/msgManage.ts b/Touchkebao/src/store/module/websocket/msgManage.ts index f103f9e1..d83fce6a 100644 --- a/Touchkebao/src/store/module/websocket/msgManage.ts +++ b/Touchkebao/src/store/module/websocket/msgManage.ts @@ -199,8 +199,6 @@ const messageHandlers: Record = { }); } }, - - // 可以继续添加更多处理器... }; //消息异步同步 const goAsyncServiceData = (message: Messages) => {