feat(ui): 优化多个组件的样式和功能

- 调整消息记录宽度和样式
- 更新导航栏算力图标和颜色
- 修改垂直用户列表布局和交互
- 移除侧边栏菜单图标
- 添加调试日志和错误处理

Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx

@@ -1,4 +1,8 @@
-import { BarChartOutlined, RobotOutlined } from "@ant-design/icons";
+import {
+  BarChartOutlined,
+  RobotOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
 // 菜单项接口
 export interface MenuItem {
   id: string;
@@ -31,7 +35,7 @@ export const drawerMenuData = {
     appDesc: "AI智能营销系统",
   },
   footer: {
-    balanceIcon: "⚡",
+    balanceIcon: <ThunderboltOutlined size={20} />,
     balanceLabel: "算力余额",
     balanceValue: "9307.423",
   },

Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss

@@ -89,8 +89,7 @@
         cursor: pointer;
 
         .suanliIcon {
-          font-size: 20px;
-          color: #ffc107;
+          color: #52c41a;
         }
 
         &:hover {
@@ -330,7 +329,7 @@
           color: #666;
 
           .suanliIcon {
-            font-size: 20px;
+            color: #3d9c0d;
           }
         }
 

Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx

@@ -7,6 +7,7 @@ import {
   CloseOutlined,
   LogoutOutlined,
   UserSwitchOutlined,
+  ThunderboltOutlined,
 } from "@ant-design/icons";
 
 import { useUserStore } from "@/store/module/user";
@@ -163,7 +164,9 @@ const NavCommon: React.FC<NavCommonProps> = ({
         <div className={styles.headerRight}>
           <Space className={styles.userInfo}>
             <span className={styles.suanli}>
-              <span className={styles.suanliIcon}>⚡</span>
+              <span className={styles.suanliIcon}>
+                <ThunderboltOutlined size={20} />
+              </span>
               9307.423
             </span>
             <Dropdown

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

@@ -55,6 +55,7 @@
 
     .messageContent {
       flex-direction: row-reverse;
+      width: 70%;
     }
 
     .messageBubble {

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

@@ -175,6 +175,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
       <div className={styles.messageText}>{fallbackText}</div>
     );
 
+    // 添加调试信息
+    console.log("MessageRecord - msgType:", msgType, "content:", content);
+
     // 根据msgType进行消息类型判断
     switch (msgType) {
       case 1: // 文本消息
@@ -255,14 +258,7 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
 
       case 49: // 小程序/文章/其他：图文、文件
         return <SmallProgramMessage content={content || ""} />;
-      case 1090519089: {
-        // 文本消息
-        const extractedJson = extractJsonFromContent(content);
-        const newContent = extractedJson
-          ? JSON.stringify(extractedJson)
-          : content;
-        return <SmallProgramMessage content={newContent || ""} />;
-      }
+
       default: {
         // 兼容旧版本和未知消息类型的处理逻辑
         if (typeof content !== "string" || !content.trim()) {
@@ -604,7 +600,10 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
           <div className={styles.messageTime}>{group.time}</div>
           {group.messages
             .filter(v => ![10000].includes(v.msgType))
-            .map(renderMessage)}
+            .map(msg => {
+              console.log("Rendering message with msgType:", msg.msgType);
+              return renderMessage(msg);
+            })}
         </React.Fragment>
       ))}
       <div ref={messagesEndRef} />

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

@@ -97,21 +97,18 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ loading = false }) => {
           className={`${styles.tabItem} ${activeTab === "chats" ? styles.active : ""}`}
           onClick={() => setActiveTab("chats")}
         >
-          <MessageOutlined />
           <span>聊天</span>
         </div>
         <div
           className={`${styles.tabItem} ${activeTab === "contracts" ? styles.active : ""}`}
           onClick={() => setActiveTab("contracts")}
         >
-          <UserOutlined />
           <span>联系人</span>
         </div>
         <div
           className={`${styles.tabItem} ${activeTab === "groups" ? styles.active : ""}`}
           onClick={() => setActiveTab("groups")}
         >
-          <ChromeOutlined />
           <span>朋友圈</span>
         </div>
       </div>

Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/VerticalUserList.module.scss

@@ -9,6 +9,7 @@
     text-align: center;
     cursor: pointer;
     .allFriends {
+      padding-top: 15px;
       font-size: 12px;
       color: #333333;
     }
@@ -48,6 +49,16 @@
         }
       }
     }
+    .allUser {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: 6px #1890ff solid;
+      display: flex;
+      align-items: center;
+      color: #333;
+      justify-content: center;
+    }
   }
 
   .messageBadge {

Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/index.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { Avatar, Badge, Tooltip } from "antd";
+import { Avatar, Badge } from "antd";
 import styles from "./VerticalUserList.module.scss";
 import { useCkChatStore, asyncKfSelected } from "@/store/module/ckchat/ckchat";
 
-import { TeamOutlined } from "@ant-design/icons";
 const VerticalUserList: React.FC = () => {
   // 格式化消息数量显示
   const formatMessageCount = (count: number) => {
@@ -16,46 +15,53 @@ const VerticalUserList: React.FC = () => {
   };
   const kfUserList = useCkChatStore(state => state.kfUserList);
   const kfSelected = useCkChatStore(state => state.kfSelected);
-
+  const allCount = kfUserList
+    .map(v => v.messageCount || 0)
+    .reduce((pre, cur) => pre + cur, 0);
   return (
     <div className={styles.verticalUserList}>
-      <div
-        className={styles.userListHeader}
-        onClick={() => handleUserSelect(0)}
-      >
-        <TeamOutlined style={{ fontSize: "26px" }} />
-        <div className={styles.allFriends}>全部好友</div>
+      <div className={styles.userListHeader}>
+        <div className={styles.allFriends}>微信号</div>
       </div>
       <div className={styles.userList}>
+        <div className={styles.userItem} onClick={() => handleUserSelect(0)}>
+          <Badge
+            count={allCount}
+            overflowCount={99}
+            className={styles.messageBadge}
+          >
+            <div className={styles.allUser}>全部</div>
+          </Badge>
+          <div className={`${styles.onlineIndicator} ${styles.online}`} />
+        </div>
         {kfUserList.map(user => (
-          <Tooltip key={user.id} title={user.name} placement="right">
-            <div
-              className={`${styles.userItem} ${kfSelected === user.id ? styles.active : ""}`}
-              onClick={() => handleUserSelect(user.id)}
+          <div
+            key={user.id}
+            className={`${styles.userItem} ${kfSelected === user.id ? styles.active : ""}`}
+            onClick={() => handleUserSelect(user.id)}
+          >
+            <Badge
+              count={
+                user.messageCount ? formatMessageCount(user.messageCount) : 0
+              }
+              overflowCount={99}
+              className={styles.messageBadge}
             >
-              <Badge
-                count={
-                  user.messageCount ? formatMessageCount(user.messageCount) : 0
-                }
-                overflowCount={99}
-                className={styles.messageBadge}
+              <Avatar
+                src={user.avatar}
+                size={50}
+                className={styles.userAvatar}
+                style={{
+                  backgroundColor: !user.avatar ? "#1890ff" : undefined,
+                }}
               >
-                <Avatar
-                  src={user.avatar}
-                  size={50}
-                  className={styles.userAvatar}
-                  style={{
-                    backgroundColor: !user.avatar ? "#1890ff" : undefined,
-                  }}
-                >
-                  {!user.avatar && user.name.charAt(0)}
-                </Avatar>
-              </Badge>
-              <div
-                className={`${styles.onlineIndicator} ${user.isOnline ? styles.online : styles.offline}`}
-              />
-            </div>
-          </Tooltip>
+                {!user.avatar && user.name.charAt(0)}
+              </Avatar>
+            </Badge>
+            <div
+              className={`${styles.onlineIndicator} ${user.isOnline ? styles.online : styles.offline}`}
+            />
+          </div>
         ))}
       </div>
     </div>