导航菜单切换

src/pages/index/ChatPage.vue

@@ -3,20 +3,37 @@
     <!-- 左侧导航 -->
     <aside class="app-sidebar">
       <div class="avatar my-avatar">
-        {{ currentUser.username ? currentUser.username.charAt(0) : '' }}
+        {{ currentUser.username ? currentUser.username.charAt(0) : "" }}
       </div>
 
       <nav class="sidebar-nav" aria-label="功能导航">
-        <button class="nav-item active" type="button" title="消息">💬</button>
         <button
           class="nav-item"
+          :class="{ active: activeMenu === 'messages' }"
+          type="button"
+          title="消息"
+          @click="changeMenu('messages')"
+        >
+          💬
+        </button>
+        <button
+          class="nav-item"
+          :class="{ active: activeMenu === 'contacts' }"
           type="button"
           title="联系人"
-          @click="getContactList()"
+          @click="changeMenu('contacts')"
         >
           👥
         </button>
-        <button class="nav-item" type="button" title="设置">⚙️</button>
+        <button
+          class="nav-item"
+          :class="{ active: activeMenu === 'settings' }"
+          type="button"
+          title="设置"
+          @click="changeMenu('settings')"
+        >
+          ⚙️
+        </button>
       </nav>
 
       <div class="sidebar-footer">
@@ -41,14 +58,18 @@
         <input v-model="searchText" type="text" placeholder="搜索联系人" />
       </div>
 
-      <!-- 最近联系人列表 -->
-      <div class="message-list">
+      <!-- 最近消息列表 -->
+      <div
+        class="message-list"
+        :class="activeMenu === 'messages' ? 'active' : ''"
+      >
         <div
           v-for="contact in filteredContacts"
           :key="contact.contactId"
           class="contact-item"
           :class="{
-            active: currentContact && currentContact.contactId === contact.contactId,
+            active:
+              currentContact && currentContact.contactId === contact.contactId,
           }"
           @click="selectContact(contact)"
         >
@@ -72,6 +93,28 @@
         </div>
       </div>
 
+      <!-- 联系人列表 -->
+      <div
+        class="message-list"
+        :class="activeMenu === 'contacts' ? 'active' : ''"
+      >
+        <div
+          v-for="contact in contactList"
+          :key="contact.contactId"
+          class="contact-item"
+          @click="selectContact(contact)"
+        >
+          <div class="avatar">
+            {{ contact.contactName.charAt(0) }}
+          </div>
+
+          <div class="contact-info">
+            <div class="contact-name">
+              {{ contact.contactName }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <!-- 右侧聊天区域 -->
@@ -102,7 +145,11 @@
         </div>
 
         <!-- 消息区域 -->
-        <div ref="messageList" class="message-list">
+        <div
+          ref="messageList"
+          class="message-list"
+          :class="activeMenu === 'messages' ? 'active' : ''"
+        >
           <div
             v-for="message in currentMessages"
             :key="message.id"
@@ -137,6 +184,14 @@
           </div>
         </div>
 
+        <div
+          ref="messageList"
+          class="message-list"
+          :class="activeMenu === 'contacts' ? 'empty' : ''"
+        >
+          <div class="empty-content">💬</div>
+        </div>
+
         <!-- 输入区域 -->
         <div class="input-panel">
           <div class="toolbar">
@@ -175,18 +230,20 @@ export default {
 
   data() {
     return {
+      // 当前用户
       currentUser: {},
-      searchText: "",
-      messageText: "",
-
       // 联系人
       contactList: [],
-
       // 当前聊天联系人
       currentContact: null,
-
       // 聊天消息
       groupedMessages: {},
+      // 搜索联系人
+      searchText: "",
+      // 输入的消息内容
+      messageText: "",
+      // 当前选中的菜单
+      activeMenu: "messages",
     };
   },
 
@@ -252,7 +309,7 @@ export default {
               item.senderId === this.currentUser.userId
                 ? item.receiverId
                 : item.senderId;
-            
+
             // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
             if (!groupedMessages[contactId]) {
               groupedMessages[contactId] = [];
@@ -265,7 +322,7 @@ export default {
             });
           });
           this.groupedMessages = groupedMessages;
-          console.log("groupedMessages", groupedMessages)
+          console.log("groupedMessages", groupedMessages);
         })
         .catch((error) => {
           console.error(error);
@@ -287,7 +344,9 @@ export default {
           this.$message.error("获取联系人信息失败");
         });
     },
-
+    changeMenu(menu) {
+      this.activeMenu = menu;
+    },
     // 选择联系人
     selectContact(contact) {
       this.currentContact = contact;
@@ -621,10 +680,30 @@ export default {
   font-size: 50px;
 }
 
+.empty-content {
+  margin-top: 15px;
+  font-size: 50px;
+  color: #999;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .message-list {
   flex: 1;
   padding: 25px 35px;
   overflow-y: auto;
+  display: none;
+}
+
+.message-list.active {
+  display: block;
+}
+
+.message-list.empty {
+  display: block;
+  height: 100%;
 }
 
 .message-row {