增强MessageRecord组件以支持RedPacketMessage和TransferMessage的额外道具，从而更好地处理单击事件和套接字请求。更新禁用的转接消息的样式以改善用户体验。

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/RedPacketMessage/index.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import styles from "./RedPacketMessage.module.scss";
 
 interface RedPacketData {
@@ -10,9 +12,15 @@ interface RedPacketData {
 
 interface RedPacketMessageProps {
   content: string;
+  msg?: ChatRecord;
+  contract?: ContractData | weChatGroup;
 }
 
-const RedPacketMessage: React.FC<RedPacketMessageProps> = ({ content }) => {
+const RedPacketMessage: React.FC<RedPacketMessageProps> = ({
+  content,
+  msg,
+  contract,
+}) => {
   const renderErrorMessage = (fallbackText: string) => (
     <div className={styles.messageText}>{fallbackText}</div>
   );
@@ -39,10 +47,42 @@ const RedPacketMessage: React.FC<RedPacketMessageProps> = ({ content }) => {
 
     const title = jsonData.sendertitle || "恭喜发财，大吉大利";
     const paymsgid = jsonData.paymsgid || "";
+    const nativeurl = jsonData.nativeurl || "";
+
+    // 处理红包点击事件，发送 socket 请求
+    const handleRedPacketClick = () => {
+      if (!contract || !paymsgid || !nativeurl) {
+        console.warn("红包点击失败：缺少必要参数", {
+          contract,
+          paymsgid,
+          nativeurl,
+        });
+        return;
+      }
+
+      const isGroup = !!contract.chatroomId;
+      const wechatFriendId = isGroup ? 0 : contract.id;
+
+      // 发送 socket 请求
+      useWebSocketStore.getState().sendCommand("CmdOpenLuckyMoney", {
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        paymsgid: paymsgid,
+        nativeurl: nativeurl,
+      });
+
+      console.log("发送红包打开请求:", {
+        cmdType: "CmdOpenLuckyMoney",
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        paymsgid: paymsgid,
+        nativeurl: nativeurl,
+      });
+    };
 
     return (
       <div className={styles.redPacketMessage}>
-        <div className={styles.redPacketCard}>
+        <div className={styles.redPacketCard} onClick={handleRedPacketClick}>
           <div className={styles.redPacketHeader}>
             <div className={styles.redPacketIcon}>🧧</div>
             <div className={styles.redPacketTitle}>{title}</div>

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss

@@ -25,6 +25,16 @@
   &:active {
     transform: translateY(0);
   }
+
+  &.transferDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      transform: none;
+      box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2);
+    }
+  }
 }
 
 .transferHeader {

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { SwapOutlined } from "@ant-design/icons";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import styles from "./TransferMessage.module.scss";
 
 interface TransferData {
@@ -15,9 +17,16 @@ interface TransferData {
 
 interface TransferMessageProps {
   content: string;
+  msg?: ChatRecord;
+  contract?: ContractData | weChatGroup;
 }
 
-const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
+const TransferMessage: React.FC<TransferMessageProps> = ({
+  content,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  msg, // 保留参数以保持与 RedPacketMessage 组件的一致性，未来可能会用到
+  contract,
+}) => {
   const renderErrorMessage = (fallbackText: string) => (
     <div className={styles.messageText}>{fallbackText}</div>
   );
@@ -40,14 +49,85 @@ const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
     }
 
     const amount = jsonData.feedesc || "￥0.00";
-    const memo = jsonData.payMemo || "";
+
-    // 根据转账状态显示不同的提示文字
+    // 判断转账状态
-    // 可以根据实际业务逻辑判断状态，这里默认显示"待朋友确认收钱"
+    const getTransferStatus = (
-    const statusText = "待朋友确认收钱";
+      data: TransferData,
+    ): { text: string; canClick: boolean } => {
+      const paySubType = data.paysubtype || "";
+
+      switch (paySubType) {
+        case "1":
+          return { text: "待朋友确认收钱", canClick: true };
+        case "2":
+          return { text: "已过期", canClick: false };
+        case "3":
+          return { text: "已领取", canClick: false };
+        case "4":
+          return { text: "已退回", canClick: false };
+        default:
+          // 默认情况：可能是待领取
+          return { text: "待朋友确认收钱", canClick: true };
+      }
+    };
+
+    const { text: statusText, canClick } = getTransferStatus(jsonData);
+
+    // 处理转账点击事件，发送 socket 请求
+    const handleTransferClick = () => {
+      // 如果状态不允许点击，直接返回
+      if (!canClick) {
+        console.log("转账状态不允许点击:", statusText);
+        return;
+      }
+
+      if (
+        !contract ||
+        !jsonData.transferid ||
+        !jsonData.transcationid ||
+        !jsonData.invalidtime ||
+        !jsonData.paysubtype
+      ) {
+        console.warn("转账点击失败：缺少必要参数", {
+          contract,
+          transferid: jsonData.transferid,
+          transcationid: jsonData.transcationid,
+          invalidtime: jsonData.invalidtime,
+          paysubtype: jsonData.paysubtype,
+        });
+        return;
+      }
+
+      const isGroup = !!contract.chatroomId;
+      const wechatFriendId = isGroup ? 0 : contract.id;
+
+      // 发送 socket 请求
+      useWebSocketStore.getState().sendCommand("CmdReceiveTransMoney", {
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        transcationid: jsonData.transcationid,
+        transferid: jsonData.transferid,
+        invalidtime: jsonData.invalidtime,
+        paysubtype: jsonData.paysubtype,
+      });
+
+      console.log("发送转账接收请求:", {
+        cmdType: "CmdReceiveTransMoney",
+        wechatAccountId: contract.wechatAccountId,
+        wechatFriendId: wechatFriendId,
+        transcationid: jsonData.transcationid,
+        transferid: jsonData.transferid,
+        invalidtime: jsonData.invalidtime,
+        paysubtype: jsonData.paysubtype,
+      });
+    };
 
     return (
       <div className={styles.transferMessage}>
-        <div className={styles.transferCard}>
+        <div
+          className={`${styles.transferCard} ${!canClick ? styles.transferDisabled : ""}`}
+          onClick={handleTransferClick}
+        >
           <div className={styles.transferHeader}>
             <div className={styles.transferIcon}>
               <SwapOutlined style={{ fontSize: 20 }} />

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx

@@ -256,7 +256,6 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
     msg?: ChatRecord,
     contract?: ContractData | weChatGroup,
   ) => {
-    console.log("红包");
     if (isLegacyEmojiContent(trimmedContent)) {
       return renderEmojiContent(rawContent);
     }
@@ -272,7 +271,13 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
           "wxpay://c2cbizmessagehandler/hongbao/receivehongbao",
         )
       ) {
-        return <RedPacketMessage content={rawContent} />;
+        return (
+          <RedPacketMessage
+            content={rawContent}
+            msg={msg}
+            contract={contract}
+          />
+        );
       }
 
       // 判断是否为转账消息
@@ -280,7 +285,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
         jsonData.title === "微信转账" ||
         (jsonData.transferid && jsonData.feedesc)
       ) {
-        return <TransferMessage content={rawContent} />;
+        return (
+          <TransferMessage content={rawContent} msg={msg} contract={contract} />
+        );
       }
 
       if (jsonData.type === "file" && msg && contract) {