From 24c99c7b954d65f69f9e87d4f6f1ff187125c712 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Tue, 9 Sep 2025 15:22:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(MessageRecord):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E8=A1=A8=E6=83=85=E7=AC=A6=E5=8F=B7=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 parseEmojiText 方法用于解析文本中的表情符号格式[表情名称]，并将其替换为对应的表情图片。当表情不存在时保持原文本显示。修改了文本消息的渲染逻辑以支持表情显示。
---
 .../components/MessageRecord/index.tsx        | 57 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
index 5cf356cb..ab84c7cd 100644
--- a/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
+++ b/Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx
@@ -8,6 +8,7 @@ import {
 } from "@ant-design/icons";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { formatWechatTime, parseWeappMsgStr } from "@/utils/common";
+import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji";
 import styles from "./MessageRecord.module.scss";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
@@ -49,6 +50,56 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
     );
   };
 
+  // 解析表情包文字格式[表情名称]并替换为img标签
+  const parseEmojiText = (text: string): React.ReactNode[] => {
+    const emojiRegex = /\[([^\]]+)\]/g;
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let match;
+
+    while ((match = emojiRegex.exec(text)) !== null) {
+      // 添加表情前的文字
+      if (match.index > lastIndex) {
+        parts.push(text.slice(lastIndex, match.index));
+      }
+
+      // 获取表情名称并查找对应路径
+      const emojiName = match[1];
+      const emojiPath = getEmojiPath(emojiName as any);
+
+      if (emojiPath) {
+        // 如果找到表情，添加img标签
+        parts.push(
+          <img
+            key={`emoji-${match.index}`}
+            src={emojiPath}
+            alt={emojiName}
+            className={styles.emojiImage}
+            style={{
+              width: "20px",
+              height: "20px",
+              verticalAlign: "middle",
+              margin: "0 2px",
+              display: "inline",
+            }}
+          />,
+        );
+      } else {
+        // 如果没找到表情，保持原文字
+        parts.push(match[0]);
+      }
+
+      lastIndex = emojiRegex.lastIndex;
+    }
+
+    // 添加剩余的文字
+    if (lastIndex < text.length) {
+      parts.push(text.slice(lastIndex));
+    }
+
+    return parts;
+  };
+
   useEffect(() => {
     const prevMessages = prevMessagesRef.current;
 
@@ -139,7 +190,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
       case 1: // 文本消息
         return (
           <div className={styles.messageBubble}>
-            <div className={styles.messageText}>{content}</div>
+            <div className={styles.messageText}>{parseEmojiText(content)}</div>
           </div>
         );
 
@@ -776,7 +827,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
         }
 
         // 5. 默认按文本消息处理
-        return <div className={styles.messageText}>{content}</div>;
+        return (
+          <div className={styles.messageText}>{parseEmojiText(content)}</div>
+        );
       }
     }
   };