fix: 发送信息，携带头像

fix: 消息页面ui重构

frontend_nuxt/pages/message-box/[id].vue

@@ -196,10 +196,14 @@ async function sendMessage(content, clearInput) {
     if (!response.ok) throw new Error('发送失败')
 
     const newMessage = await response.json()
-    messages.value.push(newMessage)
+    messages.value.push({
+      ...newMessage,
+      src: newMessage.sender.avatar,
+      iconClick: () => {
+        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+      },
+    })
     clearInput()
-
-    // Use a more reliable scroll approach
     setTimeout(() => {
       scrollToBottom()
     }, 100)
@@ -445,6 +449,7 @@ onUnmounted(() => {
 
 .message-input-area {
   margin-left: 20px;
+  margin-right: 20px;
 }
 
 .loading-container,
@@ -453,4 +458,15 @@ onUnmounted(() => {
   padding: 50px;
   color: var(--text-color-secondary);
 }
+
+@media (max-width: 768px) {
+  .messages-list {
+    padding: 10px;
+  }
+}
+
+.message-input-area {
+  margin-left: 10px;
+  margin-right: 10px;
+}
 </style>

frontend_nuxt/pages/message-box/index.vue

@@ -283,7 +283,7 @@ function goToConversation(id) {
 /* 响应式设计 */
 @media (max-width: 768px) {
   .messages-container {
-    padding: 16px 12px;
+    padding: 10px 10px;
   }
 
   .messages-title {
@@ -295,7 +295,7 @@ function goToConversation(id) {
   }
 
   .conversation-item {
-    padding: 12px 16px;
+    padding: 6px 8px;
   }
 
   .avatar-img {
@@ -315,34 +315,4 @@ function goToConversation(id) {
     font-size: 13px;
   }
 }
-
-@media (max-width: 480px) {
-  .messages-container {
-    padding: 12px 8px;
-  }
-
-  .conversations-list {
-    max-height: 400px;
-  }
-
-  .conversation-item {
-    padding: 10px 12px;
-  }
-
-  .avatar-img {
-    width: 36px;
-    height: 36px;
-  }
-
-  .conversation-avatar {
-    margin-right: 12px;
-  }
-}
-
-/* 大屏幕设备 */
-@media (min-width: 1024px) {
-  .conversations-list {
-    max-height: 700px;
-  }
-}
 </style>