From 4af10ecf79cbf7686bf1995eb448693066c070d5 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Fri, 22 Aug 2025 12:21:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B6=88=E6=81=AF=E9=A1=B5=E9=9D=A2ui?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/HeaderComponent.vue  |  12 +-
 frontend_nuxt/pages/message-box/[id].vue      | 480 +++++++++++++++++
 .../pages/{messages => message-box}/index.vue | 204 ++++----
 frontend_nuxt/pages/messages/[id].vue         | 490 ------------------
 frontend_nuxt/pages/users/[id].vue            |  26 +-
 5 files changed, 588 insertions(+), 624 deletions(-)
 create mode 100644 frontend_nuxt/pages/message-box/[id].vue
 rename frontend_nuxt/pages/{messages => message-box}/index.vue (66%)
 delete mode 100644 frontend_nuxt/pages/messages/[id].vue

diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 2e7e9e46f..5ec4446fb 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -50,7 +50,9 @@
           <ToolTip v-if="isLogin" content="站内信" placement="bottom">
             <div class="messages-icon" @click="goToMessages">
               <i class="fas fa-envelope"></i>
-              <span v-if="unreadMessageCount > 0" class="unread-badge">{{ unreadMessageCount }}</span>
+              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
+                unreadMessageCount
+              }}</span>
             </div>
           </ToolTip>
 
@@ -193,14 +195,14 @@ const refrechData = async () => {
 }
 
 const goToMessages = () => {
-  navigateTo('/messages');
-};
+  navigateTo('/message-box')
+}
 
 const headerMenuItems = computed(() => [
   { text: '设置', onClick: goToSettings },
   { text: '个人主页', onClick: goToProfile },
   { text: '退出', onClick: goToLogout },
-]);
+])
 
 /** 其余逻辑保持不变 */
 const iconClass = computed(() => {
@@ -226,7 +228,7 @@ onMounted(async () => {
   const updateUnread = async () => {
     if (authState.loggedIn) {
       // Initialize the unread count composable
-      fetchUnreadCount();
+      fetchUnreadCount()
     }
   }
 
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
new file mode 100644
index 000000000..023eaea85
--- /dev/null
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -0,0 +1,480 @@
+<template>
+  <div class="chat-container">
+    <div v-if="!loading && otherParticipant" class="chat-header">
+      <NuxtLink to="/message-box" class="back-button">
+        <i class="fas fa-arrow-left"></i>
+      </NuxtLink>
+      <h2 class="participant-name">{{ otherParticipant.username }}</h2>
+    </div>
+
+    <div class="messages-list" ref="messagesListEl">
+      <div v-if="loading" class="loading-container">加载中...</div>
+      <div v-else-if="error" class="error-container">{{ error }}</div>
+      <template v-else>
+        <div class="load-more-container" v-if="hasMoreMessages">
+          <button @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
+            {{ loadingMore ? '加载中...' : '查看更多消息' }}
+          </button>
+        </div>
+        <BaseTimeline :items="messages">
+          <template #item="{ item }">
+            <div class="message-timestamp">
+              {{ TimeManager.format(item.createdAt) }}
+            </div>
+            <div class="message-content">
+              <div class="message-text" v-html="renderMarkdown(item.content)"></div>
+            </div>
+          </template>
+        </BaseTimeline>
+      </template>
+    </div>
+
+    <div class="message-input-area">
+      <MessageEditor :loading="sending" @submit="sendMessage" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  watch,
+  onActivated,
+  onDeactivated,
+} from 'vue'
+import { useRoute } from 'vue-router'
+import { getToken, fetchCurrentUser } from '~/utils/auth'
+import { toast } from '~/main'
+import { renderMarkdown } from '~/utils/markdown'
+import MessageEditor from '~/components/MessageEditor.vue'
+import { useWebSocket } from '~/composables/useWebSocket'
+import { useUnreadCount } from '~/composables/useUnreadCount'
+import TimeManager from '~/utils/time'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+
+const config = useRuntimeConfig()
+const route = useRoute()
+const API_BASE_URL = config.public.apiBaseUrl
+const { connect, disconnect, subscribe, isConnected } = useWebSocket()
+const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
+let subscription = null
+
+const messages = ref([])
+const participants = ref([])
+const loading = ref(true)
+const sending = ref(false)
+const error = ref(null)
+const conversationId = route.params.id
+const currentUser = ref(null)
+const messagesListEl = ref(null)
+let lastMessageEl = null
+const currentPage = ref(0)
+const totalPages = ref(0)
+const loadingMore = ref(false)
+let scrollInterval = null
+
+const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
+
+const otherParticipant = computed(() => {
+  if (!currentUser.value || participants.value.length === 0) {
+    return null
+  }
+  return participants.value.find((p) => p.id !== currentUser.value.id)
+})
+
+function isSentByCurrentUser(message) {
+  return message.sender.id === currentUser.value?.id
+}
+
+function handleAvatarError(event) {
+  event.target.src = '/default-avatar.svg'
+}
+
+// No changes needed here, as renderMarkdown is now imported.
+// The old function is removed.
+
+async function fetchMessages(page = 0) {
+  if (page === 0) {
+    loading.value = true
+    messages.value = []
+  } else {
+    loadingMore.value = true
+  }
+  error.value = null
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    loading.value = false
+    return
+  }
+
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/api/messages/conversations/${conversationId}?page=${page}&size=20`,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    )
+    if (!response.ok) throw new Error('无法加载消息')
+
+    const conversationData = await response.json()
+    const pageData = conversationData.messages
+
+    if (page === 0) {
+      participants.value = conversationData.participants
+    }
+
+    // Since the backend sorts by descending, we need to reverse for correct chat order
+    const newMessages = pageData.content.reverse().map((item) => ({
+      ...item,
+      src: item.sender.avatar,
+      iconClick: () => {
+        navigateTo(`/users/${item.sender.id}`, { replace: true })
+      },
+    }))
+
+    const list = messagesListEl.value
+    const oldScrollHeight = list ? list.scrollHeight : 0
+
+    if (page === 0) {
+      messages.value = newMessages
+    } else {
+      messages.value = [...newMessages, ...messages.value]
+    }
+
+    currentPage.value = pageData.number
+    totalPages.value = pageData.totalPages
+
+    // Scrolling is now fully handled by the watcher
+    await nextTick()
+    if (page > 0 && list) {
+      const newScrollHeight = list.scrollHeight
+      list.scrollTop = newScrollHeight - oldScrollHeight
+    }
+  } catch (e) {
+    error.value = e.message
+    toast.error(e.message)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function loadMoreMessages() {
+  if (hasMoreMessages.value && !loadingMore.value) {
+    await fetchMessages(currentPage.value + 1)
+  }
+}
+
+async function sendMessage(content, clearInput) {
+  if (!content.trim()) return
+
+  const recipient = otherParticipant.value
+  if (!recipient) {
+    toast.error('无法确定收信人')
+    return
+  }
+
+  sending.value = true
+  const token = getToken()
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/messages`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        recipientId: recipient.id,
+        content: content,
+      }),
+    })
+    if (!response.ok) throw new Error('发送失败')
+
+    const newMessage = await response.json()
+    messages.value.push(newMessage)
+    clearInput()
+
+    // Use a more reliable scroll approach
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+  } catch (e) {
+    toast.error(e.message)
+  } finally {
+    sending.value = false
+  }
+}
+
+async function markConversationAsRead() {
+  const token = getToken()
+  if (!token) return
+  try {
+    await fetch(`${API_BASE_URL}/api/messages/conversations/${conversationId}/read`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    // After marking as read, refresh the global unread count
+    refreshGlobalUnreadCount()
+  } catch (e) {
+    console.error('Failed to mark conversation as read', e)
+  }
+}
+
+function scrollToBottom() {
+  if (messagesListEl.value) {
+    const element = messagesListEl.value
+    // 強制滾動到底部，使用 smooth 行為確保視覺效果
+    element.scrollTop = element.scrollHeight
+
+    // 再次確認滾動位置
+    setTimeout(() => {
+      if (element.scrollTop < element.scrollHeight - element.clientHeight) {
+        element.scrollTop = element.scrollHeight
+      }
+    }, 50)
+  }
+}
+
+watch(
+  messages,
+  async (newMessages) => {
+    if (newMessages.length === 0) return
+
+    await nextTick()
+
+    // Simple, reliable scroll to bottom
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+  },
+  { deep: true },
+)
+
+onMounted(async () => {
+  currentUser.value = await fetchCurrentUser()
+  if (currentUser.value) {
+    await fetchMessages(0)
+    await markConversationAsRead()
+    const token = getToken()
+    if (token && !isConnected.value) {
+      connect(token)
+    }
+  } else {
+    toast.error('请先登录')
+    loading.value = false
+  }
+})
+
+watch(isConnected, (newValue) => {
+  if (newValue) {
+    // 等待一小段时间确保连接稳定
+    setTimeout(() => {
+      subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
+        // 避免重复显示当前用户发送的消息
+        if (message.sender.id !== currentUser.value.id) {
+          messages.value.push(message)
+          // 实时收到消息时自动标记为已读
+          markConversationAsRead()
+          setTimeout(() => {
+            scrollToBottom()
+          }, 100)
+        }
+      })
+    }, 500)
+  }
+})
+
+onActivated(async () => {
+  // This will be called every time the component is activated (navigated to)
+  if (currentUser.value) {
+    await fetchMessages(0)
+    await markConversationAsRead()
+
+    // 確保滾動到底部 - 使用多重延遲策略
+    await nextTick()
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+    setTimeout(() => {
+      scrollToBottom()
+    }, 300)
+    setTimeout(() => {
+      scrollToBottom()
+    }, 500)
+
+    if (!isConnected.value) {
+      const token = getToken()
+      if (token) connect(token)
+    }
+  }
+})
+
+onDeactivated(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+    subscription = null
+  }
+  disconnect()
+})
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+    subscription = null
+  }
+  disconnect()
+})
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 80px); /* Adjust based on your header/footer height */
+  margin: 0 auto;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--bg-color);
+  position: relative;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-color-soft);
+}
+
+.back-button {
+  font-size: 18px;
+  color: var(--text-color-primary);
+  margin-right: 15px;
+  cursor: pointer;
+}
+
+.participant-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.messages-list {
+  position: absolute;
+  top: 60px; /* Header height */
+  bottom: 250px; /* Increased space for input area */
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  padding: 20px;
+  padding-bottom: 40px; /* Extra padding at bottom */
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.load-more-container {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.load-more-button {
+  background-color: var(--bg-color-soft);
+  border: 1px solid var(--border-color);
+  color: var(--text-color-primary);
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.load-more-button:hover {
+  background-color: var(--border-color);
+}
+
+.message-item {
+  display: flex;
+  gap: 10px;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  align-self: flex-end;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-text {
+  font-size: 15px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.message-text :deep(p) {
+  margin: 0;
+}
+
+.message-timestamp {
+  font-size: 11px;
+  color: var(--text-color-secondary);
+  margin-top: 5px;
+  opacity: 0.6;
+}
+
+/* Sent messages */
+.message-item.sent {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.message-item.sent .message-timestamp {
+  text-align: right;
+}
+
+/* Received messages */
+.message-item.received {
+  align-self: flex-start;
+}
+
+.message-item.received .message-content {
+  align-items: flex-start;
+}
+
+.message-item.received .message-bubble {
+  background-color: var(--bg-color-soft);
+  border: 1px solid var(--border-color);
+  border-bottom-left-radius: 4px;
+}
+
+.message-input-area {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-height: 200px;
+  max-height: 400px;
+  padding: 10px 20px;
+  border-top: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.loading-container,
+.error-container {
+  text-align: center;
+  padding: 50px;
+  color: var(--text-color-secondary);
+}
+</style>
diff --git a/frontend_nuxt/pages/messages/index.vue b/frontend_nuxt/pages/message-box/index.vue
similarity index 66%
rename from frontend_nuxt/pages/messages/index.vue
rename to frontend_nuxt/pages/message-box/index.vue
index cd44a2055..6bb4958ee 100644
--- a/frontend_nuxt/pages/messages/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,21 +1,17 @@
 <template>
   <div class="messages-container">
-    <div class="messages-header">
-      <h1 class="messages-title">站内信</h1>
+    <div v-if="loading" class="loading-message">
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
-    
-    <div v-if="loading" class="loading-container">
-      <div class="loading-text">加载中...</div>
-    </div>
-    
+
     <div v-else-if="error" class="error-container">
       <div class="error-text">{{ error }}</div>
     </div>
-    
+
     <div v-else-if="conversations.length === 0" class="empty-container">
       <div class="empty-text">暂无会话</div>
     </div>
-    
+
     <div v-else class="conversations-list">
       <div
         v-for="convo in conversations"
@@ -31,7 +27,7 @@
             @error="handleAvatarError"
           />
         </div>
-        
+
         <div class="conversation-content">
           <div class="conversation-header">
             <div class="participant-name">
@@ -41,68 +37,71 @@
               {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
             </div>
           </div>
-          
+
           <div class="last-message-row">
-             <div class="last-message">
-               {{ convo.lastMessage ? convo.lastMessage.content : '暂无消息' }}
-             </div>
-             <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-               {{ convo.unreadCount }}
-             </div>
-           </div>
+            <div class="last-message">
+              {{
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
+              }}
+            </div>
+            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+              {{ convo.unreadCount }}
+            </div>
           </div>
         </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, onActivated } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, onMounted, onUnmounted, watch, onActivated } from 'vue'
+import { useRouter } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { useWebSocket } from '~/composables/useWebSocket';
-import { useUnreadCount } from '~/composables/useUnreadCount';
+import { useWebSocket } from '~/composables/useWebSocket'
+import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
+import { stripMarkdownLength } from '~/utils/markdown'
 
 const config = useRuntimeConfig()
-const conversations = ref([]);
-const loading = ref(true);
-const error = ref(null);
-const router = useRouter();
-const currentUser = ref(null);
+const conversations = ref([])
+const loading = ref(true)
+const error = ref(null)
+const router = useRouter()
+const currentUser = ref(null)
 const API_BASE_URL = config.public.apiBaseUrl
-const { connect, disconnect, subscribe, isConnected } = useWebSocket();
-const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount();
-let subscription = null;
+const { connect, disconnect, subscribe, isConnected } = useWebSocket()
+const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
+let subscription = null
 
 async function fetchConversations() {
-  const token = getToken();
-   if (!token) {
-    toast.error('请先登录');
-    return;
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
   }
   try {
     const response = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
       method: 'GET',
       headers: { Authorization: `Bearer ${token}` },
-    });
+    })
     if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
+      throw new Error(`HTTP error! status: ${response.status}`)
     }
-    const data = await response.json();
-    conversations.value = data;
+    const data = await response.json()
+    conversations.value = data
   } catch (e) {
-    error.value = '无法加载会话列表。';
+    error.value = '无法加载会话列表。'
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 // 获取对话中的另一个参与者（非当前用户）
 function getOtherParticipant(conversation) {
   if (!currentUser.value || !conversation.participants) return null
-  return conversation.participants.find(p => p.id !== currentUser.value.id)
+  return conversation.participants.find((p) => p.id !== currentUser.value.id)
 }
 
 // 格式化时间
@@ -117,57 +116,61 @@ function handleAvatarError(event) {
 }
 
 onActivated(async () => {
-  loading.value = true;
-  currentUser.value = await fetchCurrentUser();
-  
+  loading.value = true
+  currentUser.value = await fetchCurrentUser()
+
   if (currentUser.value) {
-    await fetchConversations();
-    refreshGlobalUnreadCount(); // Refresh global count when entering the list
-    const token = getToken();
+    await fetchConversations()
+    refreshGlobalUnreadCount() // Refresh global count when entering the list
+    const token = getToken()
     if (token && !isConnected.value) {
-      connect(token);
+      connect(token)
     }
   } else {
-    loading.value = false;
+    loading.value = false
   }
-});
+})
 
 watch(isConnected, (newValue) => {
-  
   if (newValue && currentUser.value) {
-    const destination = `/topic/user/${currentUser.value.id}/messages`;
-    
+    const destination = `/topic/user/${currentUser.value.id}/messages`
+
     // 清理旧的订阅
     if (subscription) {
-      subscription.unsubscribe();
+      subscription.unsubscribe()
     }
-    
+
     subscription = subscribe(destination, (message) => {
-      fetchConversations();
-    });
-    
+      fetchConversations()
+    })
   }
-});
+})
 
 onUnmounted(() => {
   if (subscription) {
-    subscription.unsubscribe();
+    subscription.unsubscribe()
   }
-  disconnect();
-});
+  disconnect()
+})
 
 function goToConversation(id) {
-  router.push(`/messages/${id}`);
+  router.push(`/message-box/${id}`)
 }
 </script>
 
 <style scoped>
 .messages-container {
-  max-width: 800px;
   margin: 0 auto;
   padding: 20px;
 }
 
+.loading-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
 .messages-header {
   margin-bottom: 24px;
 }
@@ -179,14 +182,18 @@ function goToConversation(id) {
   margin: 0;
 }
 
-.loading-container, .error-container, .empty-container {
+.loading-container,
+.error-container,
+.empty-container {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 200px;
 }
 
-.loading-text, .error-text, .empty-text {
+.loading-text,
+.error-text,
+.empty-text {
   font-size: 16px;
   color: #666;
 }
@@ -196,61 +203,30 @@ function goToConversation(id) {
 }
 
 .conversations-list {
-  background: #fff;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  overflow: hidden;
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-/* 美化滚动条 */
-.conversations-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.conversations-list::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 3px;
-}
-
-.conversations-list::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 3px;
-}
-
-.conversations-list::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
 }
 
 .conversation-item {
   display: flex;
   align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #f7fafc;
+  padding: 8px 10px;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
-.conversation-item:last-child {
-  border-bottom: none;
-}
-
 .conversation-item:hover {
-  background-color: #f7fafc;
+  background-color: var(--menu-selected-background-color);
 }
 
 .conversation-avatar {
   flex-shrink: 0;
-  margin-right: 16px;
+  margin-right: 12px;
 }
 
 .avatar-img {
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   object-fit: cover;
-  border: 2px solid #e2e8f0;
 }
 
 .conversation-content {
@@ -312,32 +288,32 @@ function goToConversation(id) {
   .messages-container {
     padding: 16px 12px;
   }
-  
+
   .messages-title {
     font-size: 24px;
   }
-  
+
   .conversations-list {
     max-height: 500px;
   }
-  
+
   .conversation-item {
     padding: 12px 16px;
   }
-  
+
   .avatar-img {
     width: 40px;
     height: 40px;
   }
-  
+
   .participant-name {
     font-size: 15px;
   }
-  
+
   .message-time {
     font-size: 11px;
   }
-  
+
   .last-message {
     font-size: 13px;
   }
@@ -347,20 +323,20 @@ function goToConversation(id) {
   .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;
   }
@@ -372,4 +348,4 @@ function goToConversation(id) {
     max-height: 700px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend_nuxt/pages/messages/[id].vue b/frontend_nuxt/pages/messages/[id].vue
deleted file mode 100644
index f9ef6d074..000000000
--- a/frontend_nuxt/pages/messages/[id].vue
+++ /dev/null
@@ -1,490 +0,0 @@
-<template>
-  <div class="chat-container">
-    <div v-if="!loading && otherParticipant" class="chat-header">
-      <NuxtLink to="/messages" class="back-button">
-        <i class="fas fa-arrow-left"></i>
-      </NuxtLink>
-      <h2 class="participant-name">{{ otherParticipant.username }}</h2>
-    </div>
-
-    <div class="messages-list" ref="messagesListEl">
-      <div v-if="loading" class="loading-container">加载中...</div>
-      <div v-else-if="error" class="error-container">{{ error }}</div>
-      <template v-else>
-        <div class="load-more-container" v-if="hasMoreMessages">
-          <button @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
-            {{ loadingMore ? '加载中...' : '查看更多消息' }}
-          </button>
-        </div>
-        <div
-          v-for="(msg, index) in messages"
-          :key="msg.id"
-          :ref="el => { if (index === messages.length - 1) lastMessageEl = el }"
-          class="message-item"
-          :class="{ sent: isSentByCurrentUser(msg), received: !isSentByCurrentUser(msg) }"
-        >
-          <img
-            :src="msg.sender.avatar"
-            alt="avatar"
-            class="message-avatar"
-            @error="handleAvatarError"
-          />
-          <div class="message-content">
-            <div class="message-bubble">
-              <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
-            </div>
-            <div class="message-timestamp">
-              {{ TimeManager.format(msg.createdAt) }}
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <div class="message-input-area">
-      <MessageEditor
-        :loading="sending"
-        @submit="sendMessage"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, nextTick, computed, watch, onActivated, onDeactivated } from 'vue';
-import { useRoute } from 'vue-router';
-import { getToken, fetchCurrentUser } from '~/utils/auth';
-import { toast } from '~/main';
-import { renderMarkdown } from '~/utils/markdown';
-import MessageEditor from '~/components/MessageEditor.vue';
-import { useWebSocket } from '~/composables/useWebSocket';
-import { useUnreadCount } from '~/composables/useUnreadCount';
-import TimeManager from '~/utils/time'
-
-const config = useRuntimeConfig();
-const route = useRoute();
-const API_BASE_URL = config.public.apiBaseUrl;
-const { connect, disconnect, subscribe, isConnected } = useWebSocket();
-const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount();
-let subscription = null;
-
-const messages = ref([]);
-const participants = ref([]);
-const loading = ref(true);
-const sending = ref(false);
-const error = ref(null);
-const conversationId = route.params.id;
-const currentUser = ref(null);
-const messagesListEl = ref(null);
-let lastMessageEl = null;
-const currentPage = ref(0);
-const totalPages = ref(0);
-const loadingMore = ref(false);
-let scrollInterval = null;
-
-const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1);
-
-const otherParticipant = computed(() => {
-    if (!currentUser.value || participants.value.length === 0) {
-        return null;
-    }
-    return participants.value.find(p => p.id !== currentUser.value.id);
-});
-
-function isSentByCurrentUser(message) {
-  return message.sender.id === currentUser.value?.id;
-}
-
-function handleAvatarError(event) {
-  event.target.src = '/default-avatar.svg';
-}
-
-// No changes needed here, as renderMarkdown is now imported.
-// The old function is removed.
-
-async function fetchMessages(page = 0) {
-  if (page === 0) {
-    loading.value = true;
-    messages.value = [];
-  } else {
-    loadingMore.value = true;
-  }
-  error.value = null;
-  const token = getToken();
-  if (!token) {
-    toast.error('请先登录');
-    loading.value = false;
-    return;
-  }
-
-  try {
-    const response = await fetch(`${API_BASE_URL}/api/messages/conversations/${conversationId}?page=${page}&size=20`, {
-      headers: { Authorization: `Bearer ${token}` },
-    });
-    if (!response.ok) throw new Error('无法加载消息');
-
-    const conversationData = await response.json();
-    const pageData = conversationData.messages;
-
-    if (page === 0) {
-        participants.value = conversationData.participants;
-    }
-
-    // Since the backend sorts by descending, we need to reverse for correct chat order
-    const newMessages = pageData.content.reverse();
-
-    const list = messagesListEl.value;
-    const oldScrollHeight = list ? list.scrollHeight : 0;
-
-    if (page === 0) {
-      messages.value = newMessages;
-    } else {
-      messages.value = [...newMessages, ...messages.value];
-    }
-
-    currentPage.value = pageData.number;
-    totalPages.value = pageData.totalPages;
-
-    // Scrolling is now fully handled by the watcher
-    await nextTick();
-    if (page > 0 && list) {
-        const newScrollHeight = list.scrollHeight;
-        list.scrollTop = newScrollHeight - oldScrollHeight;
-    }
-
-  } catch (e) {
-    error.value = e.message;
-    toast.error(e.message);
-  } finally {
-    loading.value = false;
-    loadingMore.value = false;
-  }
-}
-
-async function loadMoreMessages() {
-  if (hasMoreMessages.value && !loadingMore.value) {
-    await fetchMessages(currentPage.value + 1);
-  }
-}
-
-async function sendMessage(content, clearInput) {
-  if (!content.trim()) return;
-
-  const recipient = otherParticipant.value;
-  if (!recipient) {
-    toast.error('无法确定收信人');
-    return;
-  }
-
-  sending.value = true;
-  const token = getToken();
-  try {
-    const response = await fetch(`${API_BASE_URL}/api/messages`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
-      },
-      body: JSON.stringify({
-        recipientId: recipient.id,
-        content: content,
-      }),
-    });
-    if (!response.ok) throw new Error('发送失败');
-    
-    const newMessage = await response.json();
-    messages.value.push(newMessage);
-    clearInput();
-    
-    // Use a more reliable scroll approach
-    setTimeout(() => {
-      scrollToBottom();
-    }, 100);
-
-  } catch (e) {
-    toast.error(e.message);
-  } finally {
-    sending.value = false;
-  }
-}
-
-async function markConversationAsRead() {
-  const token = getToken();
-  if (!token) return;
-  try {
-    await fetch(`${API_BASE_URL}/api/messages/conversations/${conversationId}/read`, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token}` },
-    });
-    // After marking as read, refresh the global unread count
-    refreshGlobalUnreadCount();
-  } catch (e) {
-    console.error('Failed to mark conversation as read', e);
-  }
-}
-
-function scrollToBottom() {
-    if (messagesListEl.value) {
-        const element = messagesListEl.value;
-        // 強制滾動到底部，使用 smooth 行為確保視覺效果
-        element.scrollTop = element.scrollHeight;
-        
-        // 再次確認滾動位置
-        setTimeout(() => {
-            if (element.scrollTop < element.scrollHeight - element.clientHeight) {
-                element.scrollTop = element.scrollHeight;
-            }
-        }, 50);
-    }
-}
-
-watch(messages, async (newMessages) => {
-    if (newMessages.length === 0) return;
-    
-    await nextTick();
-    
-    // Simple, reliable scroll to bottom
-    setTimeout(() => {
-        scrollToBottom();
-    }, 100);
-}, { deep: true });
-
-onMounted(async () => {
-  currentUser.value = await fetchCurrentUser();
-  if (currentUser.value) {
-    await fetchMessages(0);
-    await markConversationAsRead();
-    const token = getToken();
-    if (token && !isConnected.value) {
-        connect(token);
-    }
-  } else {
-    toast.error('请先登录');
-    loading.value = false;
-  }
-});
-
-watch(isConnected, (newValue) => {
-    if (newValue) {
-        // 等待一小段时间确保连接稳定
-        setTimeout(() => {
-            subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
-                // 避免重复显示当前用户发送的消息
-                if (message.sender.id !== currentUser.value.id) {
-                    messages.value.push(message);
-                    // 实时收到消息时自动标记为已读
-                    markConversationAsRead();
-                    setTimeout(() => {
-                        scrollToBottom();
-                    }, 100);
-                }
-            });
-        }, 500);
-    }
-});
-
-onActivated(async () => {
-    // This will be called every time the component is activated (navigated to)
-    if (currentUser.value) {
-        await fetchMessages(0);
-        await markConversationAsRead();
-        
-        // 確保滾動到底部 - 使用多重延遲策略
-        await nextTick();
-        setTimeout(() => {
-            scrollToBottom();
-        }, 100);
-        setTimeout(() => {
-            scrollToBottom();
-        }, 300);
-        setTimeout(() => {
-            scrollToBottom();
-        }, 500);
-        
-        if (!isConnected.value) {
-            const token = getToken();
-            if (token) connect(token);
-        }
-    }
-});
-
-onDeactivated(() => {
-    if (subscription) {
-        subscription.unsubscribe();
-        subscription = null;
-    }
-    disconnect();
-});
-
-onUnmounted(() => {
-    if (subscription) {
-        subscription.unsubscribe();
-        subscription = null;
-    }
-    disconnect();
-});
-</script>
-
-<style scoped>
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 80px); /* Adjust based on your header/footer height */
-  max-width: 900px;
-  margin: 0 auto;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  overflow: hidden;
-  background-color: var(--bg-color);
-  position: relative;
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--bg-color-soft);
-}
-
-.back-button {
-  font-size: 18px;
-  color: var(--text-color-primary);
-  margin-right: 15px;
-  cursor: pointer;
-}
-
-.participant-name {
-  font-size: 18px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.messages-list {
-  position: absolute;
-  top: 60px; /* Header height */
-  bottom: 250px; /* Increased space for input area */
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  padding: 20px;
-  padding-bottom: 40px; /* Extra padding at bottom */
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.load-more-container {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.load-more-button {
-  background-color: var(--bg-color-soft);
-  border: 1px solid var(--border-color);
-  color: var(--text-color-primary);
-  padding: 8px 16px;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.load-more-button:hover {
-  background-color: var(--border-color);
-}
-
-.message-item {
-  display: flex;
-  gap: 10px;
-  max-width: 75%;
-}
-
-.message-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  align-self: flex-end;
-}
-
-.message-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.message-bubble {
-  padding: 10px 15px;
-  border-radius: 18px;
-  max-width: 100%;
-}
-
-.message-text {
-  font-size: 15px;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
-
-.message-text :deep(p) {
-  margin: 0;
-}
-
-.message-timestamp {
-  font-size: 11px;
-  color: var(--text-color-secondary);
-  margin-top: 5px;
-}
-
-/* Sent messages */
-.message-item.sent {
-  align-self: flex-end;
-  flex-direction: row-reverse;
-}
-
-.message-item.sent .message-content {
-  align-items: flex-end;
-}
-
-.message-item.sent .message-bubble {
-  background-color: var(--primary-color);
-  color: white;
-  border-bottom-right-radius: 4px;
-}
-
-.message-item.sent .message-timestamp {
-  text-align: right;
-}
-
-/* Received messages */
-.message-item.received {
-  align-self: flex-start;
-}
-
-.message-item.received .message-content {
-  align-items: flex-start;
-}
-
-.message-item.received .message-bubble {
-  background-color: var(--bg-color-soft);
-  border: 1px solid var(--border-color);
-  border-bottom-left-radius: 4px;
-}
-
-.message-input-area {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  min-height: 200px;
-  max-height: 400px;
-  padding: 10px 20px;
-  border-top: 1px solid var(--border-color);
-  background-color: var(--bg-color);
-  box-sizing: border-box;
-  overflow: visible;
-}
-
-.loading-container, .error-container {
-  text-align: center;
-  padding: 50px;
-  color: var(--text-color-secondary);
-}
-</style>
\ No newline at end of file
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 4523565df..8ac524306 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -27,15 +27,11 @@
           >
             <i class="fas fa-user-minus"></i>
             取消关注
-         </div>
-         <div
-           v-if="!isMine"
-           class="profile-page-header-subscribe-button"
-           @click="sendMessage"
-         >
-           <i class="fas fa-paper-plane"></i>
-           发私信
-         </div>
+          </div>
+          <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
+            <i class="fas fa-paper-plane"></i>
+            发私信
+          </div>
           <LevelProgress
             :exp="levelInfo.exp"
             :current-level="levelInfo.currentLevel"
@@ -558,14 +554,14 @@ const sendMessage = async () => {
         recipientId: user.value.id,
       }),
       headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-    });
-    const result = await response.json();
-    router.push(`/messages/${result.conversationId}`);
+    })
+    const result = await response.json()
+    router.push(`/message-box/${result.conversationId}`)
   } catch (e) {
-    toast.error('无法发起私信');
-    console.error(e);
+    toast.error('无法发起私信')
+    console.error(e)
   }
-};
+}
 
 const gotoTag = (tag) => {
   const value = encodeURIComponent(tag.id ?? tag.name)