在MessageRecord组件中实现parseSystemMessage实用程序，从系统消息中提取纯文本，通过删除HTML标签并为相关内容添加红包图标来增强消息渲染。

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

@@ -12,6 +12,7 @@ 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";
+import { parseSystemMessage } from "@/utils/filter";
 import styles from "./com.module.scss";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
 import { useContactStore } from "@/store/module/weChat/contacts";
@@ -856,13 +857,15 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
         <React.Fragment key={`group-${groupIndex}`}>
           {group.messages
             .filter(v => [10000].includes(v.msgType))
-            .map(msg => (
-              <div
-                key={`divider-${msg.id}`}
-                className={styles.messageTime}
-                dangerouslySetInnerHTML={{ __html: msg.content }}
-              ></div>
-            ))}
+            .map(msg => {
+              // 解析系统消息，提取纯文本（移除img标签和_wc_custom_link_标签）
+              const parsedText = parseSystemMessage(msg.content);
+              return (
+                <div key={`divider-${msg.id}`} className={styles.messageTime}>
+                  {parsedText}
+                </div>
+              );
+            })}
 
           {group.messages
             .filter(v => [570425393, 90000].includes(v.msgType))

Touchkebao/src/utils/filter.ts

@@ -86,3 +86,37 @@ export const messageFilter = (message: string) => {
     return message;
   }
 };
+
+/**
+ * 解析系统消息中的HTML标签，提取纯文本
+ * 例如：<img src="SystemMessages_HongbaoIcon.png"/>  你领取了许老板的<_wc_custom_link_>红包</_wc_custom_link_>。
+ * 提取为：🧧 你领取了许老板的红包
+ */
+export const parseSystemMessage = (html: string): string => {
+  if (!html) return "";
+
+  let text = html;
+
+  // 移除所有 <img> 标签
+  text = text.replace(/<img[^>]*>/gi, "");
+
+  // 提取 <_wc_custom_link_> 标签内的文本内容
+  // 匹配 <_wc_custom_link_ ...>内容</_wc_custom_link_>
+  text = text.replace(
+    /<_wc_custom_link_[^>]*>(.*?)<\/_wc_custom_link_>/gi,
+    "$1",
+  );
+
+  // 清理多余的空格（将多个连续空格替换为单个空格）
+  text = text.replace(/\s+/g, " ");
+
+  // 去除首尾空格
+  text = text.trim();
+
+  // 如果消息内容包含红包相关关键词，在前面添加🧧图标
+  if (/红包|hongbao/i.test(text)) {
+    text = `🧧 ${text}`;
+  }
+
+  return text;
+};