修改聊天界面，增加联系人信息获取接口

src/pages/index/ChatPage.vue

@@ -3,24 +3,25 @@
     <!-- 左侧导航 -->
     <aside class="app-sidebar">
       <div class="avatar my-avatar">
-          {{ currentUser.username.charAt(0)}}
+        {{ currentUser.username.charAt(0) }}
-        </div>
+      </div>
 
       <nav class="sidebar-nav" aria-label="功能导航">
-        <button class="nav-item active" type="button" title="消息">
+        <button class="nav-item active" type="button" title="消息">💬</button>
-          💬
+        <button
-        </button>
+          class="nav-item"
-        <button class="nav-item" type="button" title="联系人">
+          type="button"
+          title="联系人"
+          @click="getContactList()"
+        >
           👥
         </button>
-        <button class="nav-item" type="button" title="设置">
+        <button class="nav-item" type="button" title="设置">⚙️</button>
-          ⚙️
-        </button>
       </nav>
 
       <div class="sidebar-footer">
         <button class="nav-item" type="button" title="退出" @click="logout">
-        ↪
+          ↪
         </button>
       </div>
     </aside>
@@ -41,7 +42,8 @@
       </div>
 
       <!-- 联系人列表 -->
-      <div class="contact-list">
+      <!-- 
+      <div class="message-list">
         <div
           v-for="contact in filteredContacts"
           :key="contact.id"
@@ -70,6 +72,27 @@
           </div>
         </div>
       </div>
+      -->
+
+      <!-- 联系人列表 -->
+      <div class="contact-list">
+        <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>
 
     <!-- 右侧聊天区域 -->
@@ -167,7 +190,7 @@
 </template>
 
 <script>
-import { getUserInfo } from "@/utils/user";
+import { getUserInfo, getContactInfo } from "@/utils/user";
 export default {
   name: "ChatPage",
 
@@ -178,79 +201,13 @@ export default {
       messageText: "",
 
       // 联系人
-      contacts: [
+      contactList: [],
-        {
-          id: 1,
-          name: "张三",
-          online: true,
-          unread: 2,
-        },
-        {
-          id: 2,
-          name: "李四",
-          online: true,
-          unread: 0,
-        },
-        {
-          id: 3,
-          name: "王五",
-          online: false,
-          unread: 5,
-        },
-        {
-          id: 4,
-          name: "赵六",
-          online: true,
-          unread: 0,
-        },
-      ],
 
       // 当前聊天联系人
       currentContact: null,
 
       // 聊天消息
-      messages: {
+      messages: {},
-        1: [
-          {
-            id: 1,
-            from: "other",
-            content: "你好！",
-            time: "15:20",
-          },
-          {
-            id: 2,
-            from: "me",
-            content: "你好，最近怎么样？",
-            time: "15:21",
-          },
-          {
-            id: 3,
-            from: "other",
-            content: "挺好的，你呢？",
-            time: "15:22",
-          },
-        ],
-
-        2: [
-          {
-            id: 4,
-            from: "other",
-            content: "晚上一起吃饭吗？",
-            time: "14:30",
-          },
-        ],
-
-        3: [
-          {
-            id: 5,
-            from: "other",
-            content: "明天记得开会。",
-            time: "10:15",
-          },
-        ],
-
-        4: [],
-      },
     };
   },
 
@@ -258,7 +215,7 @@ export default {
     // 搜索联系人
     filteredContacts() {
       if (!this.searchText.trim()) {
-        return this.contacts;
+        return this.contactList;
       }
 
       const keyword = this.searchText.trim().toLowerCase();
@@ -280,13 +237,14 @@ export default {
 
   mounted() {
     // 默认选择第一个联系人
-    if (this.contacts.length > 0) {
+    // if (this.contacts.length > 0) {
-      this.selectContact(this.contacts[0]);
+    //   this.selectContact(this.contacts[0]);
-    }
+    // }
   },
 
   created() {
-    this.getCurrentUser()
+    this.getCurrentUser();
+    // this.getContactList();
   },
 
   methods: {
@@ -302,6 +260,23 @@ export default {
           this.$router.push("/login");
         });
     },
+    logout() {
+      // 清除 token 和用户信息
+      this.$store.commit("SET_TOKEN", "");
+      this.$store.commit("SET_USERNAME", "");
+      this.$router.push("/login");
+    },
+    getContactList() {
+      getContactInfo()
+        .then((response) => {
+          this.contactList = response.data.contacts;
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("获取联系人信息失败");
+        });
+    },
+
     // 选择联系人
     selectContact(contact) {
       this.currentContact = contact;

src/utils/user.js

@@ -9,14 +9,6 @@ export function login(data) {
   })
 }
 
-// 获取用户信息
-export function getUserInfo() {
-  return request({
-    url: '/userInfo',
-    method: 'get'
-  })
-}
-
 // 注册账号
 export function register(data) {
     return request({
@@ -25,3 +17,19 @@ export function register(data) {
         data
     })
 }
+
+// 获取用户信息
+export function getUserInfo() {
+  return request({
+    url: '/userInfo',
+    method: 'get'
+  })
+}
+
+// 获取用户的联系人信息
+export function getContactInfo() {
+  return request({
+    url: '/contactInfo',
+    method: 'get'
+  })
+}