From 4d69c8e57033d084ff3437c132c039a4231b571a 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, 16 Sep 2025 14:39:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ckbox):=20=E4=BC=98=E5=8C=96=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=9C=AA=E8=AF=BB=E8=AE=A1=E6=95=B0=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E5=B9=B6=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构未读消息计数逻辑，使用chatSessions中的unreadCount替代原有的messageCount计算方式
调整导航栏中消息按钮和用户下拉菜单的位置顺序
---
 .../pc/ckbox/components/NavCommon/index.tsx   | 12 ++++-----
 .../components/VerticalUserList/index.tsx     | 27 ++++++++++---------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx
index afe391f62..de5bd6e3c 100644
--- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx
@@ -11,7 +11,6 @@ import {
 } from "@ant-design/icons";
 
 import { useUserStore } from "@/store/module/user";
-// import { useCkChatStore } from "@/store/module/ckchat/ckchat";
 import { useNavigate, useLocation } from "react-router-dom";
 import { drawerMenuData, menuList } from "./index.data";
 import styles from "./index.module.scss";
@@ -32,7 +31,6 @@ const NavCommon: React.FC<NavCommonProps> = ({
   const [messageCount] = useState(3); // 模拟消息数量
   const navigate = useNavigate();
   const location = useLocation();
-  // const { userInfo } = useCkChatStore();
   const { user, logout } = useUserStore();
 
   // 处理菜单图标点击
@@ -169,6 +167,11 @@ const NavCommon: React.FC<NavCommonProps> = ({
               </span>
               9307.423
             </span>
+            <div className={styles.messageButton} onClick={handleMessageClick}>
+              <Badge count={messageCount} size="small">
+                <BellOutlined style={{ fontSize: 20 }} />
+              </Badge>
+            </div>
             <Dropdown
               menu={{ items: userMenuItems }}
               placement="bottomRight"
@@ -183,11 +186,6 @@ const NavCommon: React.FC<NavCommonProps> = ({
                 />
               </div>
             </Dropdown>
-            <div className={styles.messageButton} onClick={handleMessageClick}>
-              <Badge count={messageCount} size="small">
-                <BellOutlined style={{ fontSize: 20 }} />
-              </Badge>
-            </div>
           </Space>
         </div>
       </Header>
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/index.tsx
index fbcadb564..c1ed940ea 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/VerticalUserList/index.tsx
@@ -4,20 +4,23 @@ import styles from "./VerticalUserList.module.scss";
 import { useCkChatStore, asyncKfSelected } from "@/store/module/ckchat/ckchat";
 
 const VerticalUserList: React.FC = () => {
-  // 格式化消息数量显示
-  const formatMessageCount = (count: number) => {
-    if (count > 99) return "99+";
-    return count.toString();
-  };
-
   const handleUserSelect = (userId: number) => {
     asyncKfSelected(userId);
   };
   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);
+  const chatSessions = useCkChatStore(state => state.chatSessions);
+  const getUnreadCount = (wechatAccountId: number) => {
+    if (wechatAccountId != 0) {
+      const session = chatSessions.filter(
+        v => v.wechatAccountId === wechatAccountId,
+      );
+      return session.reduce((pre, cur) => pre + cur.unreadCount, 0);
+    } else {
+      return chatSessions.reduce((pre, cur) => pre + cur.unreadCount, 0);
+    }
+  };
+
   return (
     <div className={styles.verticalUserList}>
       <div className={styles.userListHeader}>
@@ -26,7 +29,7 @@ const VerticalUserList: React.FC = () => {
       <div className={styles.userList}>
         <div className={styles.userItem} onClick={() => handleUserSelect(0)}>
           <Badge
-            count={allCount}
+            count={getUnreadCount(0)}
             overflowCount={99}
             className={styles.messageBadge}
           >
@@ -41,9 +44,7 @@ const VerticalUserList: React.FC = () => {
             onClick={() => handleUserSelect(user.id)}
           >
             <Badge
-              count={
-                user.messageCount ? formatMessageCount(user.messageCount) : 0
-              }
+              count={getUnreadCount(user.id)}
               overflowCount={99}
               className={styles.messageBadge}
             >