新增系统推荐备注消息组件，并在消息记录中处理该消息类型；优化未读消息计数逻辑，确保正确显示。

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

@@ -0,0 +1,24 @@
+// 系统推荐备注消息样式
+.systemRecommendRemarkMessage {
+  .systemMessageText {
+    font-size: 14px;
+    font-weight: 500;
+    color: #8c8c8c;
+    line-height: 1.4;
+    word-break: break-word;
+    padding: 8px 12px;
+    border-radius: 8px;
+    max-width: 320px;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .systemRecommendRemarkMessage {
+    .systemMessageText {
+      font-size: 13px;
+      padding: 6px 10px;
+      max-width: 280px;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import styles from "./index.module.scss";
+import { WarningOutlined } from "@ant-design/icons";
+
+interface SystemRecommendRemarkMessageProps {
+  content: string;
+}
+
+const SystemRecommendRemarkMessage: React.FC<
+  SystemRecommendRemarkMessageProps
+> = ({ content }) => {
+  // 解析XML内容
+  const parseSystemMessage = (xmlContent: string) => {
+    try {
+      // 使用正则表达式提取关键信息
+      const templateMatch = xmlContent.match(
+        /<template><!\[CDATA\[(.*?)\]\]><\/template>/,
+      );
+      const phoneMatch = xmlContent.match(/<phone>(.*?)<\/phone>/);
+      const talkerMatch = xmlContent.match(/<talker>(.*?)<\/talker>/);
+      const remarkMatch = xmlContent.match(/<remark>(.*?)<\/remark>/);
+
+      const template = templateMatch ? templateMatch[1] : "";
+      const phone = phoneMatch ? phoneMatch[1] : "";
+      const talker = talkerMatch ? talkerMatch[1] : "";
+      const remark = remarkMatch ? remarkMatch[1] : "";
+
+      // 处理模板文本，替换占位符
+      let displayText = template;
+      if (phone) {
+        displayText = displayText.replace(/\$remark_msg_native_url\$/, phone);
+      }
+
+      return {
+        template: displayText,
+        phone,
+        talker,
+        remark,
+        hasRemark: !!remark.trim(),
+      };
+    } catch (error) {
+      console.warn("解析系统推荐备注消息失败:", error);
+      return {
+        template: "系统推荐添加备注",
+        phone: "",
+        talker: "",
+        remark: "",
+        hasRemark: false,
+      };
+    }
+  };
+
+  const messageData = parseSystemMessage(content);
+
+  return (
+    <div className={styles.systemRecommendRemarkMessage}>
+      <div className={styles.systemMessageText}>
+        <WarningOutlined style={{ fontSize: 16 }} />
+        &nbsp;
+        {messageData.template}
+      </div>
+    </div>
+  );
+};
+
+export default SystemRecommendRemarkMessage;

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

@@ -6,6 +6,7 @@ import SmallProgramMessage from "./components/SmallProgramMessage";
 import VideoMessage from "./components/VideoMessage";
 import ClickMenu from "./components/ClickMeau";
 import LocationMessage from "./components/LocationMessage";
+import SystemRecommendRemarkMessage from "./components/SystemRecommendRemarkMessage/index";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { formatWechatTime } from "@/utils/common";
 import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji";
@@ -277,6 +278,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
       case 49: // 小程序/文章/其他：图文、文件
         return <SmallProgramMessage content={content || ""} />;
 
+      case 10002: // 系统推荐备注消息
+        return <SystemRecommendRemarkMessage content={content || ""} />;
+
       default: {
         // 兼容旧版本和未知消息类型的处理逻辑
         if (typeof content !== "string" || !content.trim()) {

Touchkebao/src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx

@@ -14,6 +14,8 @@ const MessageList: React.FC<MessageListProps> = () => {
   const getChatSessions = useCkChatStore(state => state.chatSessions);
   const kfSelected = useCkChatStore(state => state.kfSelected);
   const onContactClick = (session: ContractData | weChatGroup) => {
+    console.log(session);
+
     setCurrentContact(session, true);
   };
   const [chatSessions, setChatSessions] = useState<
@@ -55,7 +57,7 @@ const MessageList: React.FC<MessageListProps> = () => {
             onClick={() => onContactClick(session)}
           >
             <div className={styles.messageInfo}>
-              <Badge count={session.unreadCount} size="small">
+              <Badge count={session.unreadCount || 0} size="small">
                 <Avatar
                   size={48}
                   src={session.avatar || session.chatroomAvatar}