优化时间显示

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>
@@ -168,7 +180,8 @@
 
             <div class="message-content">
               <div class="message-time">
-                {{ message.time }}
+                {{ getTime(message.time) }}
+                <!-- {{ message.time }} -->
               </div>
 
               <div class="message-bubble">
@@ -231,7 +244,7 @@ import {
 import {
   connectWebSocket,
   sendWebSocketMessage,
-  closeWebSocket
+  closeWebSocket,
 } from "@/utils/websocket";
 
 export default {
@@ -243,6 +256,8 @@ export default {
       currentUser: {},
       // 联系人
       contactList: [],
+      // 在线用户
+      onlineList: [],
       // 当前聊天联系人
       currentContact: null,
       // 最近聊天列表
@@ -454,6 +469,18 @@ export default {
       }
     },
 
+    getTime(time) {
+      if (!time) return "";
+
+      const date = new Date(time);
+      return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(
+        2,
+        "0"
+      )}月${String(date.getDate()).padStart(2, "0")}日 ${String(
+        date.getHours()
+      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+    },
+
     // 更新最近消息列表
     updateRecentChat(messageType, contactName, newMessage) {
       const index = this.recentChats.findIndex(
@@ -524,11 +551,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 +565,9 @@ export default {
         this.$nextTick(() => {
           this.scrollToBottom();
         });
+      } else if (data.type == "userOnline") {
+        // 获取所有在线用户
+        this.onlineList = data.userList;
       } else {
         return;
       }
@@ -901,10 +931,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 +973,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 +1057,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>