在MessageRecord组件中增加微信转账消息支持，更新消息过滤逻辑。调整RedPacketMessage样式以获得更好的布局。

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

@@ -2,7 +2,7 @@
 .redPacketMessage {
   background: transparent;
   box-shadow: none;
-  max-width: 300px;
+  width: 260px;
 }
 
 .redPacketCard {

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

@@ -0,0 +1,124 @@
+// 转账消息样式
+.transferMessage {
+  background: transparent;
+  box-shadow: none;
+  width: 260px;
+  max-width: 260px;
+}
+
+.transferCard {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #ff9500; // 橙色背景
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2);
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.transferHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 5px;
+}
+
+.transferIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #ffffff;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 18px;
+  color: #ff9500;
+}
+
+.transferAmount {
+  font-size: 20px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 1.2;
+  flex: 1;
+}
+
+.transferStatus {
+  font-size: 13px;
+  color: #ffffff;
+  margin-bottom: 5px;
+  opacity: 0.95;
+}
+
+.transferDivider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.3);
+  margin-bottom: 6px;
+}
+
+.transferFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.transferLabel {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+// 消息文本样式（用于错误提示）
+.messageText {
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #8c8c8c;
+  font-size: 13px;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .transferMessage {
+    max-width: 200px;
+  }
+
+  .transferCard {
+    padding: 12px;
+  }
+
+  .transferIcon {
+    width: 28px;
+    height: 28px;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .transferAmount {
+    font-size: 18px;
+  }
+
+  .transferStatus {
+    font-size: 12px;
+  }
+
+  .transferLabel {
+    font-size: 11px;
+  }
+}

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { SwapOutlined } from "@ant-design/icons";
+import styles from "./TransferMessage.module.scss";
+
+interface TransferData {
+  title?: string;
+  feedesc?: string;
+  payMemo?: string;
+  transferid?: string;
+  transcationid?: string;
+  invalidtime?: string;
+  paysubtype?: string;
+  [key: string]: any;
+}
+
+interface TransferMessageProps {
+  content: string;
+}
+
+const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
+  const renderErrorMessage = (fallbackText: string) => (
+    <div className={styles.messageText}>{fallbackText}</div>
+  );
+
+  if (typeof content !== "string" || !content.trim()) {
+    return renderErrorMessage("[转账消息 - 无效内容]");
+  }
+
+  try {
+    const trimmedContent = content.trim();
+    const jsonData: TransferData = JSON.parse(trimmedContent);
+
+    // 验证是否为转账消息
+    const isTransfer =
+      jsonData.title === "微信转账" ||
+      (jsonData.transferid && jsonData.feedesc);
+
+    if (!isTransfer) {
+      return renderErrorMessage("[转账消息 - 格式错误]");
+    }
+
+    const amount = jsonData.feedesc || "￥0.00";
+    const memo = jsonData.payMemo || "";
+    // 根据转账状态显示不同的提示文字
+    // 可以根据实际业务逻辑判断状态，这里默认显示"待朋友确认收钱"
+    const statusText = "待朋友确认收钱";
+
+    return (
+      <div className={styles.transferMessage}>
+        <div className={styles.transferCard}>
+          <div className={styles.transferHeader}>
+            <div className={styles.transferIcon}>
+              <SwapOutlined />
+            </div>
+            <div className={styles.transferAmount}>{amount}</div>
+          </div>
+          <div className={styles.transferStatus}>{statusText}</div>
+          <div className={styles.transferDivider}></div>
+          <div className={styles.transferFooter}>
+            <span className={styles.transferLabel}>微信转账</span>
+          </div>
+        </div>
+      </div>
+    );
+  } catch (e) {
+    console.warn("转账消息解析失败:", e);
+    return renderErrorMessage("[转账消息 - 解析失败]");
+  }
+};
+
+export default TransferMessage;

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

@@ -8,6 +8,7 @@ import ClickMenu from "./components/ClickMeau";
 import LocationMessage from "./components/LocationMessage";
 import SystemRecommendRemarkMessage from "./components/SystemRecommendRemarkMessage/index";
 import RedPacketMessage from "./components/RedPacketMessage";
+import TransferMessage from "./components/TransferMessage";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { formatWechatTime } from "@/utils/common";
 import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji";
@@ -274,6 +275,14 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
         return <RedPacketMessage content={rawContent} />;
       }
 
+      // 判断是否为转账消息
+      if (
+        jsonData.title === "微信转账" ||
+        (jsonData.transferid && jsonData.feedesc)
+      ) {
+        return <TransferMessage content={rawContent} />;
+      }
+
       if (jsonData.type === "file" && msg && contract) {
         return (
           <SmallProgramMessage

Touchkebao/src/utils/filter.ts

@@ -52,6 +52,13 @@ export const messageFilter = (message: string) => {
           ? `[微信红包] ${parsed.sendertitle}`
           : "[微信红包]";
 
+      // 微信转账消息：包含 title="微信转账" 或 transferid + feedesc
+      case !!(
+        parsed.title === "微信转账" ||
+        (parsed.transferid && parsed.feedesc)
+      ):
+        return parsed.feedesc ? `[微信转账] ${parsed.feedesc}` : "[微信转账]";
+
       // 文本消息：包含 text 或 content
       case !!(parsed.text || parsed.content):
         return parsed.text || parsed.content;