diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue
index 5c5e308..3dcea2a 100644
--- a/src/pages/index/ChatPage.vue
+++ b/src/pages/index/ChatPage.vue
@@ -65,11 +65,11 @@
       >
         <div
           v-for="contact in filteredContacts"
-          :key="contact.contactId"
+          :key="contact.contactName"
           class="contact-item"
           :class="{
             active:
-              currentContact && currentContact.contactId === contact.contactId,
+              currentContact && currentContact.contactName === contact.contactName,
           }"
           @click="selectContact(contact)"
         >
@@ -83,7 +83,7 @@
             </div>
 
             <div class="last-message">
-              {{ getLastMessage(contact.contactId) }}
+              {{ getLastMessage(contact.contactName) }}
             </div>
           </div>
 
@@ -100,7 +100,7 @@
       >
         <div
           v-for="contact in contactList"
-          :key="contact.contactId"
+          :key="contact.contactName"
           class="contact-item"
           @click="selectContact(contact)"
         >
@@ -192,8 +192,8 @@
           <div class="empty-content">💬</div>
         </div>
 
-        <!-- 输入区域 -->
-        <div class="input-panel">
+        <!-- 输入消息区域 -->
+        <div v-if="activeMenu === 'messages'" class="input-panel">
           <div class="toolbar">
             <button type="button">😊</button>
             <button type="button">📎</button>
@@ -224,7 +224,7 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo, getContactMessages } from "@/utils/user";
+import { getUserInfo, getContactInfo, getContactMessages, sendMessage } from "@/utils/user";
 export default {
   name: "ChatPage",
 
@@ -267,7 +267,7 @@ export default {
         return [];
       }
 
-      return this.groupedMessages[this.currentContact.contactId] || [];
+      return this.groupedMessages[this.currentContact.contactName] || [];
     },
   },
 
@@ -304,20 +304,20 @@ export default {
           const messages = response.data.messages || [];
           // 把联系人的消息按联系人 id 分组存储
           messages.forEach((item) => {
-            // 这个联系人的 id 是和当前用户聊天消息的发送者 id 或接收者 id
-            const contactId =
-              item.senderId === this.currentUser.userId
-                ? item.receiverId
-                : item.senderId;
+            // 这个联系人的名称是和当前用户聊天消息的发送者名称或接收者名称
+            const contactName =
+              item.senderName === this.currentUser.username
+                ? item.receiverName
+                : item.senderName;
 
             // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
-            if (!groupedMessages[contactId]) {
-              groupedMessages[contactId] = [];
+            if (!groupedMessages[contactName]) {
+              groupedMessages[contactName] = [];
             }
 
-            groupedMessages[contactId].push({
+            groupedMessages[contactName].push({
               ...item,
-              from: item.senderId === this.currentUser.userId ? "me" : "other",
+              from: item.senderName === this.currentUser.username ? "me" : "other",
               time: item.time || item.createdAt,
             });
           });
@@ -367,8 +367,8 @@ export default {
     },
 
     // 获取最后一条消息
-    getLastMessage(contactId) {
-      const messageList = this.groupedMessages[contactId];
+    getLastMessage(contactName) {
+      const messageList = this.groupedMessages[contactName];
 
       if (!messageList || messageList.length === 0) {
         return "暂无消息";
@@ -389,12 +389,26 @@ export default {
         this.$set(this.groupedMessages, this.currentContact.id, []);
       }
 
-      this.groupedMessages[this.currentContact.id].push({
+      const newMessage = {
         id: Date.now(),
-        from: "me",
+        senderName: this.currentUser.username,
+        receiverName: this.currentContact.contactName,
         content: content,
         time: this.getCurrentTime(),
-      });
+      };
+
+      sendMessage()
+        .then((response) => {
+          console.log("发送消息成功", response.data);
+          this.groupedMessages[this.currentContact.contactName].push({
+            ...newMessage,
+            from: "me",
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("发送消息失败");
+        });
 
       // 清空输入框
       this.messageText = "";
diff --git a/src/utils/user.js b/src/utils/user.js
index 87cf18b..c9b6580 100644
--- a/src/utils/user.js
+++ b/src/utils/user.js
@@ -40,4 +40,13 @@ export function getContactMessages() {
     url: '/messagesInfo',
     method: 'get'
   })
+}
+
+// 发送消息
+export function sendMessage(data) {
+  return request({
+    url: '/sendMessage',
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file