切换联系人时的UI优化和消息获取

src/pages/index/ChatPage.vue

@@ -148,7 +148,7 @@
         <div
           ref="messageList"
           class="message-list"
-          :class="activeMenu === 'messages' ? 'active' : ''"
+          :class="activeMenu === 'settings' ? '' : 'active'"
         >
           <div
             v-for="message in currentMessages"
@@ -184,14 +184,6 @@
           </div>
         </div>
 
-        <div
-          ref="messageList"
-          class="message-list"
-          :class="activeMenu === 'contacts' ? 'empty' : ''"
-        >
-          <div class="empty-content">💬</div>
-        </div>
-
         <!-- 输入消息区域 -->
         <div v-if="activeMenu === 'messages'" class="input-panel">
           <div class="toolbar">
@@ -282,7 +274,12 @@ export default {
     // 切换菜单
     changeMenu(menu) {
       this.activeMenu = menu;
+      this.currentContact = null;
+      if(menu === "contacts") {
+        this.getContactList();
+      }
     },
+
     // 退出登录
     logout() {
       // 清除 token 和用户信息
@@ -290,6 +287,7 @@ export default {
       this.$store.commit("SET_USERNAME", "");
       this.$router.push("/login");
     },
+
     // 获取当前登录用户信息
     getCurrentUser() {
       // 获取当前登录用户信息
@@ -303,6 +301,7 @@ export default {
           this.$router.push("/login");
         });
     },
+
     // 获取最近消息列表
     getRecentMessageList() {
       getRecentMessages()
@@ -315,6 +314,7 @@ export default {
           this.$message.error("获取消息列表失败");
         });
     },
+
     // 选择联系人
     selectContact(contact) {
       this.currentContact = contact;
@@ -327,12 +327,14 @@ export default {
         this.scrollToBottom();
       });
     },
+
     // 选择最近一个联系人
     selectFirstContact() {
       if (!this.currentContact && this.recentChats.length > 0) {
         this.selectContact(this.recentChats[0]);
       }
     },
+
     // 获取当前联系人的消息列表
     getContactMessageList(contactName, limit) {
       // 获取当前联系人的消息列表
@@ -362,6 +364,8 @@ export default {
           this.$message.error("获取消息列表失败");
         });
     },
+
+    // 获取联系人列表
     getContactList() {
       getContactInfo()
         .then((response) => {
@@ -369,14 +373,13 @@ export default {
             ...contact,
             unread: contact.unread || 0,
           }));
-          console.log("contactList", this.contactList);
-          this.selectFirstContact();
         })
         .catch((error) => {
           console.error(error);
           this.$message.error("获取联系人信息失败");
         });
     },
+
     // 获取最后一条消息
     getLastMessage(contactName) {
       const messageList = this.contactMessages[contactName];