From 2f15cebc4ce95c276fc701d45453e199d1ce4e04 Mon Sep 17 00:00:00 2001
From: Seven <1530011482@qq.com>
Date: Thu, 24 Sep 2026 10:33:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=81=94=E7=B3=BB=E4=BA=BA?=
 =?UTF-8?q?=E7=9A=84=E5=9C=A8=E7=BA=BF=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/ChatPage.vue | 47 ++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue
index 441d9ba..97db6b2 100644
--- a/src/pages/index/ChatPage.vue
+++ b/src/pages/index/ChatPage.vue
@@ -113,6 +113,15 @@
             <div class="contact-name">
               {{ contact.contactName }}
             </div>
+
+            <div
+              class="contact-user-status"
+              :class="
+                onlineList.includes(contact.contactName) ? 'online' : 'offline'
+              "
+            >
+              {{ onlineList.includes(contact.contactName) ? "在线" : "离线" }}
+            </div>
           </div>
         </div>
       </div>
@@ -140,7 +149,10 @@
             </div>
 
             <div class="chat-user-status">
-              {{ currentContact.online ? "在线" : "离线" }}
+              <span v-if="onlineList.includes(currentContact.contactName)">
+                在线
+              </span>
+              <span v-else> 离线 </span>
             </div>
           </div>
         </div>
@@ -231,7 +243,7 @@ import {
 import {
   connectWebSocket,
   sendWebSocketMessage,
-  closeWebSocket
+  closeWebSocket,
 } from "@/utils/websocket";
 
 export default {
@@ -243,6 +255,8 @@ export default {
       currentUser: {},
       // 联系人
       contactList: [],
+      // 在线用户
+      onlineList: [],
       // 当前聊天联系人
       currentContact: null,
       // 最近聊天列表
@@ -524,11 +538,11 @@ export default {
           // 不是当前联系人，不加入 contactMessages，只更新最近聊天列表、未读数量
           this.updateRecentChat("receive", senderName, message);
         }
-        
+
         // 返回 ACK
         sendWebSocketMessage({
           type: "ack",
-          messageId: message.messageId
+          messageId: message.messageId,
         });
         this.$nextTick(() => {
           this.scrollToBottom();
@@ -538,6 +552,9 @@ export default {
         this.$nextTick(() => {
           this.scrollToBottom();
         });
+      } else if (data.type == "userOnline") {
+        // 获取所有在线用户
+        this.onlineList = data.userList;
       } else {
         return;
       }
@@ -901,10 +918,18 @@ export default {
   justify-content: flex-start;
 }
 
+.message-other .message-bubble {
+  float: left;
+}
+
 .message-me {
   justify-content: flex-end;
 }
 
+.message-me .message-bubble {
+  float: right;
+}
+
 .message-avatar {
   width: 38px;
   height: 38px;
@@ -935,7 +960,6 @@ export default {
   line-height: 1.5;
   word-break: break-word;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  float: right;
 }
 
 .message-me .message-bubble {
@@ -1020,4 +1044,17 @@ export default {
   background: #ddd;
   border-radius: 3px;
 }
+
+.contact-user-status {
+  margin-top: 5px;
+  font-size: 12px;
+}
+
+.contact-user-status.online {
+  color: #67c23a;
+}
+
+.contact-user-status.offline {
+  color: #999;
+}
 </style>