feat(消息转发): 更新转发逻辑并优化状态管理

在消息记录和转发模态框中添加了选中聊天记录的更新逻辑，确保转发功能的正确性。同时，简化了转发模态框的参数传递，移除了不必要的回调，提升了用户体验。
2025-09-19 15:40:47 +08:00
parent c625e12075
commit 18f2ebf455
5 changed files with 51 additions and 42 deletions
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx
@@ -32,7 +32,9 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
  const EnterModule = useWeChatStore(state => state.EnterModule);
  const updateShowCheckbox = useWeChatStore(state => state.updateShowCheckbox);
  const updateEnterModule = useWeChatStore(state => state.updateEnterModule);
-
+  const updateTransmitModal = useWeChatStore(
+    state => state.updateTransmitModal,
+  );
  const handleSend = async () => {
    if (!inputValue.trim()) return;
    console.log("发送消息", contract);
@@ -140,7 +142,7 @@ const MessageEnter: React.FC<MessageEnterProps> = ({ contract }) => {
    updateEnterModule("common");
  };
  const handTurnRignt = () => {
-    console.log("转发");
+    updateTransmitModal(true);
  };

  return (
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx
@@ -20,12 +20,8 @@ import styles from "./TransmitModal.module.scss";
 import { weChatGroupService, contractService } from "@/utils/db";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
 import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
-
-export interface TransmitModalProps {
-  onConfirm?: (params: (ContractData | weChatGroup)[]) => void; // 可选，因为会自动更新到store
-}
-
-const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+const TransmitModal: React.FC = () => {
  const [searchValue, setSearchValue] = useState("");
  const [allContacts, setAllContacts] = useState<
    (ContractData | weChatGroup)[]
@@ -36,12 +32,19 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const pageSize = 20;
-
+  const { sendCommand } = useWebSocketStore.getState();
  // 从 Zustand store 获取更新方法
  const openTransmitModal = useWeChatStore(state => state.openTransmitModal);
  const updateTransmitModal = useWeChatStore(
    state => state.updateTransmitModal,
  );
+  const updateSelectedChatRecords = useWeChatStore(
+    state => state.updateSelectedChatRecords,
+  );
+
+  const selectedChatRecords = useWeChatStore(
+    state => state.selectedChatRecords,
+  );

  // 加载联系人数据
  const loadContacts = async () => {
@@ -115,8 +118,20 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {

  // 确认转发
  const handleConfirm = () => {
-    console.log("handleConfirm", selectedWechatFriend);
-    onConfirm?.(selectedWechatFriend);
+    for (const user of selectedWechatFriend) {
+      for (const record of selectedChatRecords) {
+        const params = {
+          wechatAccountId: user.wechatAccountId,
+          wechatChatroomId: user?.chatroomId ? user.id : 0,
+          wechatFriendId: user?.chatroomId ? 0 : user.id,
+          msgSubType: record.msgSubType,
+          msgType: record.msgType,
+          content: record.content,
+        };
+        sendCommand("CmdSendMessage", params);
+      }
+    }
+    updateSelectedChatRecords([]);
    updateTransmitModal(false);
  };

@@ -130,7 +145,7 @@ const TransmitModal: React.FC<TransmitModalProps> = ({ onConfirm }) => {
      title="转发消息"
      open={openTransmitModal}
      onCancel={() => updateTransmitModal(false)}
-      width={800}
+      width={"60%"}
      className={styles.transmitModal}
      footer={[
        <Button key="cancel" onClick={() => updateTransmitModal(false)}>
--- 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
@@ -46,7 +46,10 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
    state.kfUserList.find(kf => kf.id === contract.wechatAccountId),
  );

-  const openTransmitModal = useWeChatStore(state => state.openTransmitModal);
+  const updateSelectedChatRecords = useWeChatStore(
+    state => state.updateSelectedChatRecords,
+  );
+
  const updateTransmitModal = useWeChatStore(
    state => state.updateTransmitModal,
  );
@@ -514,6 +517,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
      // 从选中记录中移除
      setSelectedRecords(prev => prev.filter(record => record.id !== msg.id));
    }
+    updateSelectedChatRecords(selectedRecords);
  };

  // 检查消息是否被选中
@@ -663,21 +667,11 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
    loadChatMessages(false, timestamp);
  };

-  const handleDeleteMessage = (messageId: string) => {
-    // 删除消息的处理逻辑
-    console.log("删除消息:", messageId);
-  };
-
  const handleForwardMessage = (messageData: ChatRecord) => {
+    updateSelectedChatRecords([messageData]);
    updateTransmitModal(true);
-    // 转发消息的处理逻辑
-    console.log("转发消息:", messageData);
  };

-  const handleRetryMessage = (messageData: ChatRecord) => {
-    // 重试发送消息的处理逻辑
-    console.log("重试发送:", messageData);
-  };
  const handRecall = messageData => {
    // 撤回消息的处理逻辑
    fetchReCallApi({
@@ -696,7 +690,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
        // 多条转发逻辑
        updateEnterModule(!showCheckbox ? "multipleForwarding" : "common");
        updateShowCheckbox(!showCheckbox);
-
        break;
      case "quote":
        // 引用逻辑
@@ -710,13 +703,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
    }
  };

-  const handleConfirmTransmit = (
-    selectedContacts: ContractData[] | weChatGroup[],
-  ) => {
-    // 确认转发逻辑
-    console.log("确认转发:", selectedContacts);
-  };
-
  return (
    <div className={styles.messagesContainer}>
      <div className={styles.loadMore} onClick={() => loadMoreMessages()}>
@@ -753,11 +739,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
        onCommad={handCommad}
      />
      {/*  转发模态框 */}
-      <TransmitModal
-        onConfirm={(selectedContacts: ContractData[] | weChatGroup[]) =>
-          handleConfirmTransmit(selectedContacts)
-        }
-      />
+      <TransmitModal />
    </div>
  );
 };
--- a/Touchkebao/src/store/module/weChat/weChat.ts
+++ b/Touchkebao/src/store/module/weChat/weChat.ts
@@ -61,9 +61,19 @@ export const useWeChatStore = create<WeChatState>()(
      // ==================== 聊天消息管理方法 ====================
      /** 添加新消息到当前聊天 */
      addMessage: message => {
-        set(state => ({
-          currentMessages: [...state.currentMessages, message],
-        }));
+        const { wechatAccountId, wechatChatroomId, wechatFriendId } = message;
+        const currentContract = get().currentContract;
+        if (currentContract) {
+          if (
+            currentContract.wechatAccountId === wechatAccountId &&
+            (currentContract.id === wechatFriendId ||
+              currentContract.id === wechatChatroomId)
+          ) {
+            set(state => ({
+              currentMessages: [...state.currentMessages, message],
+            }));
+          }
+        }
      },
      /** 更新指定消息内容 */
      updateMessage: (messageId, updates) => {
@@ -126,7 +136,7 @@ export const useWeChatStore = create<WeChatState>()(
      ) => {
        const state = useWeChatStore.getState();
        // 切换联系人时清空当前消息，等待重新加载
-        set({ currentMessages: [] });
+        set({ currentMessages: [], openTransmitModal: false });
        clearUnreadCount([contract.id]).then(() => {
          if (isExist) {
            updateChatSession({ ...contract, unreadCount: 0 });
--- a/Touchkebao/src/store/module/websocket/msgManage.ts
+++ b/Touchkebao/src/store/module/websocket/msgManage.ts
@@ -38,7 +38,7 @@ const messageHandlers: Record<string, MessageHandler> = {
  // 发送消息响应
  CmdSendMessageResp: message => {
    console.log("发送消息响应", message);
-    addMessage(message.friendMessage || message.chatroomMessage);
+    // addMessage(message.friendMessage || message.chatroomMessage);
    // 在这里添加具体的处理逻辑
  },
  CmdSendMessageResult: message => {