From cd73747164be2b46236e519baaf0340f964fafdd Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:42:09 +0800
Subject: [PATCH 1/8] feat: support floating message box

---
 frontend_nuxt/app.vue                     |  2 +
 frontend_nuxt/components/ChatFloating.vue | 56 +++++++++++++++++++++++
 frontend_nuxt/pages/message-box/[id].vue  | 38 +++++++++++++++
 frontend_nuxt/pages/message-box/index.vue | 44 +++++++++++++++++-
 4 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 frontend_nuxt/components/ChatFloating.vue

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index 8eab548cf..a79f1c6d2 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -22,6 +22,7 @@
     </div>
     <GlobalPopups />
     <ConfirmDialog />
+    <ChatFloating />
   </div>
 </template>
 
@@ -30,6 +31,7 @@ import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
 import GlobalPopups from '~/components/GlobalPopups.vue'
 import ConfirmDialog from '~/components/ConfirmDialog.vue'
+import ChatFloating from '~/components/ChatFloating.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
diff --git a/frontend_nuxt/components/ChatFloating.vue b/frontend_nuxt/components/ChatFloating.vue
new file mode 100644
index 000000000..d1202bfba
--- /dev/null
+++ b/frontend_nuxt/components/ChatFloating.vue
@@ -0,0 +1,56 @@
+<template>
+  <div v-if="chatFloating" class="chat-floating">
+    <iframe :src="iframeSrc" class="chat-frame"></iframe>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const chatFloating = useState('chatFloating', () => false)
+const chatPath = useState('chatPath', () => '/message-box')
+
+const iframeSrc = computed(() =>
+  chatPath.value.includes('?') ? `${chatPath.value}&float=1` : `${chatPath.value}?float=1`,
+)
+
+if (process.client) {
+  window.addEventListener('message', (event) => {
+    if (event.data?.type === 'maximize-chat') {
+      chatFloating.value = false
+      navigateTo(event.data.path || chatPath.value)
+    }
+  })
+}
+</script>
+
+<style scoped>
+.chat-floating {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 400px;
+  height: 70vh;
+  max-height: 600px;
+  background: var(--background-color);
+  border: 1px solid var(--normal-border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+@media (max-width: 500px) {
+  .chat-floating {
+    right: 0;
+    width: 100%;
+    height: 60vh;
+  }
+}
+</style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index fee571f53..5f049289e 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -7,6 +7,10 @@
       <h2 class="participant-name">
         {{ isChannel ? conversationName : otherParticipant?.username }}
       </h2>
+      <div class="chat-controls">
+        <i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
+        <i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
+      </div>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
@@ -82,6 +86,10 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
 let subscription = null
 
+const chatFloating = useState('chatFloating', () => false)
+const chatPath = useState('chatPath', () => '/message-box')
+const isFloat = computed(() => route.query.float === '1')
+
 const messages = ref([])
 const participants = ref([])
 const loading = ref(true)
@@ -115,6 +123,24 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
+function minimizeChat() {
+  chatPath.value = route.fullPath
+  chatFloating.value = true
+  navigateTo('/')
+}
+
+function maximizeChat() {
+  if (window.parent) {
+    window.parent.postMessage(
+      {
+        type: 'maximize-chat',
+        path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
+      },
+      '*',
+    )
+  }
+}
+
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -411,6 +437,7 @@ onUnmounted(() => {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
+  flex: 1;
 }
 
 .messages-list {
@@ -524,4 +551,15 @@ onUnmounted(() => {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+.chat-controls {
+  margin-left: auto;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.control-icon {
+  font-size: 16px;
+}
 </style>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index d2af0f6af..73abdde2c 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="messages-container">
+    <div class="chat-controls">
+      <i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
+      <i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
+    </div>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -114,8 +118,8 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted, watch, onActivated } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -131,6 +135,7 @@ const conversations = ref([])
 const loading = ref(true)
 const error = ref(null)
 const router = useRouter()
+const route = useRoute()
 const currentUser = ref(null)
 const API_BASE_URL = config.public.apiBaseUrl
 const { connect, disconnect, subscribe, isConnected } = useWebSocket()
@@ -139,6 +144,10 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
   useChannelsUnreadCount()
 let subscription = null
 
+const chatFloating = useState('chatFloating', () => false)
+const chatPath = useState('chatPath', () => '/message-box')
+const isFloat = computed(() => route.query.float === '1')
+
 const activeTab = ref('messages')
 const channels = ref([])
 const loadingChannels = ref(false)
@@ -229,6 +238,24 @@ async function goToChannel(id) {
   }
 }
 
+function minimizeChat() {
+  chatPath.value = route.fullPath
+  chatFloating.value = true
+  navigateTo('/')
+}
+
+function maximizeChat() {
+  if (window.parent) {
+    window.parent.postMessage(
+      {
+        type: 'maximize-chat',
+        path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
+      },
+      '*',
+    )
+  }
+}
+
 onActivated(async () => {
   loading.value = true
   currentUser.value = await fetchCurrentUser()
@@ -278,6 +305,7 @@ function goToConversation(id) {
 
 <style scoped>
 .messages-container {
+  position: relative;
 }
 
 .tabs {
@@ -437,6 +465,18 @@ function goToConversation(id) {
   margin-left: 4px;
 }
 
+.chat-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.control-icon {
+  font-size: 16px;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .conversation-item {

From 6c48a382123a73973ec58020c2b9173578515249 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 25 Aug 2025 15:44:14 +0800
Subject: [PATCH 2/8] feat: delete router

---
 frontend_nuxt/pages/message-box/index.vue | 6 ++----
 frontend_nuxt/pages/posts/[id]/index.vue  | 2 --
 frontend_nuxt/pages/users/[id].vue        | 9 ++++-----
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index d2af0f6af..dae64f36e 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -115,7 +115,6 @@
 
 <script setup>
 import { ref, 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'
@@ -130,7 +129,6 @@ const config = useRuntimeConfig()
 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()
@@ -223,7 +221,7 @@ async function goToChannel(id) {
       method: 'POST',
       headers: { Authorization: `Bearer ${token}` },
     })
-    router.push(`/message-box/${id}`)
+    navigateTo(`/message-box/${id}`)
   } catch (e) {
     toast.error(e.message)
   }
@@ -272,7 +270,7 @@ onUnmounted(() => {
 })
 
 function goToConversation(id) {
-  router.push(`/message-box/${id}`)
+  navigateTo(`/message-box/${id}`)
 }
 </script>
 
diff --git a/frontend_nuxt/pages/posts/[id]/index.vue b/frontend_nuxt/pages/posts/[id]/index.vue
index 33ecd8f61..7777cb2a0 100644
--- a/frontend_nuxt/pages/posts/[id]/index.vue
+++ b/frontend_nuxt/pages/posts/[id]/index.vue
@@ -260,7 +260,6 @@ import { getMedalTitle } from '~/utils/medal'
 import { toast } from '~/main'
 import { getToken, authState } from '~/utils/auth'
 import TimeManager from '~/utils/time'
-import { useRouter } from 'vue-router'
 import { useIsMobile } from '~/utils/screen'
 import Dropdown from '~/components/Dropdown.vue'
 import { ClientOnly } from '#components'
@@ -272,7 +271,6 @@ const API_BASE_URL = config.public.apiBaseUrl
 
 const route = useRoute()
 const postId = route.params.id
-const router = useRouter()
 
 const title = ref('')
 const author = ref('')
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 521e445ea..973a95b68 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -328,7 +328,7 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import AchievementList from '~/components/AchievementList.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
@@ -346,7 +346,6 @@ definePageMeta({
   alias: ['/users/:id/'],
 })
 const route = useRoute()
-const router = useRouter()
 const username = route.params.id
 
 const user = ref({})
@@ -407,7 +406,7 @@ const fetchUser = async () => {
     user.value = data
     subscribed.value = !!data.subscribed
   } else if (res.status === 404) {
-    router.replace('/404')
+    navigateTo('/404')
   }
 }
 
@@ -558,7 +557,7 @@ const sendMessage = async () => {
       headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
     })
     const result = await response.json()
-    router.push(`/message-box/${result.conversationId}`)
+    navigateTo(`/message-box/${result.conversationId}`)
   } catch (e) {
     toast.error('无法发起私信')
     console.error(e)
@@ -592,7 +591,7 @@ const init = async () => {
 onMounted(init)
 
 watch(selectedTab, async (val) => {
-  // router.replace({ query: { ...route.query, tab: val } })
+  // navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
   if (val === 'timeline' && timelineItems.value.length === 0) {
     await loadTimeline()
   } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {

From b543953d229e2eaebaf3f12ed47f586c79ca1179 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 25 Aug 2025 15:51:02 +0800
Subject: [PATCH 3/8] Revert "feat: support floating message box"

This reverts commit cd73747164be2b46236e519baaf0340f964fafdd.

# Conflicts:
#	frontend_nuxt/pages/message-box/index.vue
---
 frontend_nuxt/app.vue                     |  2 -
 frontend_nuxt/components/ChatFloating.vue | 56 -----------------------
 frontend_nuxt/pages/message-box/[id].vue  | 38 ---------------
 frontend_nuxt/pages/message-box/index.vue | 41 +----------------
 4 files changed, 1 insertion(+), 136 deletions(-)
 delete mode 100644 frontend_nuxt/components/ChatFloating.vue

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index a79f1c6d2..8eab548cf 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -22,7 +22,6 @@
     </div>
     <GlobalPopups />
     <ConfirmDialog />
-    <ChatFloating />
   </div>
 </template>
 
@@ -31,7 +30,6 @@ import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
 import GlobalPopups from '~/components/GlobalPopups.vue'
 import ConfirmDialog from '~/components/ConfirmDialog.vue'
-import ChatFloating from '~/components/ChatFloating.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
diff --git a/frontend_nuxt/components/ChatFloating.vue b/frontend_nuxt/components/ChatFloating.vue
deleted file mode 100644
index d1202bfba..000000000
--- a/frontend_nuxt/components/ChatFloating.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div v-if="chatFloating" class="chat-floating">
-    <iframe :src="iframeSrc" class="chat-frame"></iframe>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const chatFloating = useState('chatFloating', () => false)
-const chatPath = useState('chatPath', () => '/message-box')
-
-const iframeSrc = computed(() =>
-  chatPath.value.includes('?') ? `${chatPath.value}&float=1` : `${chatPath.value}?float=1`,
-)
-
-if (process.client) {
-  window.addEventListener('message', (event) => {
-    if (event.data?.type === 'maximize-chat') {
-      chatFloating.value = false
-      navigateTo(event.data.path || chatPath.value)
-    }
-  })
-}
-</script>
-
-<style scoped>
-.chat-floating {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 400px;
-  height: 70vh;
-  max-height: 600px;
-  background: var(--background-color);
-  border: 1px solid var(--normal-border-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 2000;
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-frame {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-@media (max-width: 500px) {
-  .chat-floating {
-    right: 0;
-    width: 100%;
-    height: 60vh;
-  }
-}
-</style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 5f049289e..fee571f53 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -7,10 +7,6 @@
       <h2 class="participant-name">
         {{ isChannel ? conversationName : otherParticipant?.username }}
       </h2>
-      <div class="chat-controls">
-        <i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
-        <i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
-      </div>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
@@ -86,10 +82,6 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
 let subscription = null
 
-const chatFloating = useState('chatFloating', () => false)
-const chatPath = useState('chatPath', () => '/message-box')
-const isFloat = computed(() => route.query.float === '1')
-
 const messages = ref([])
 const participants = ref([])
 const loading = ref(true)
@@ -123,24 +115,6 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
-function minimizeChat() {
-  chatPath.value = route.fullPath
-  chatFloating.value = true
-  navigateTo('/')
-}
-
-function maximizeChat() {
-  if (window.parent) {
-    window.parent.postMessage(
-      {
-        type: 'maximize-chat',
-        path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
-      },
-      '*',
-    )
-  }
-}
-
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -437,7 +411,6 @@ onUnmounted(() => {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
-  flex: 1;
 }
 
 .messages-list {
@@ -551,15 +524,4 @@ onUnmounted(() => {
   margin-left: 10px;
   margin-right: 10px;
 }
-
-.chat-controls {
-  margin-left: auto;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.control-icon {
-  font-size: 16px;
-}
 </style>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 0f95ffa73..17f14587c 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,9 +1,5 @@
 <template>
   <div class="messages-container">
-    <div class="chat-controls">
-      <i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
-      <i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
-    </div>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -118,8 +114,8 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { ref, onUnmounted, watch, onActivated } from 'vue'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -144,10 +140,6 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
   useChannelsUnreadCount()
 let subscription = null
 
-const chatFloating = useState('chatFloating', () => false)
-const chatPath = useState('chatPath', () => '/message-box')
-const isFloat = computed(() => route.query.float === '1')
-
 const activeTab = ref('messages')
 const channels = ref([])
 const loadingChannels = ref(false)
@@ -238,24 +230,6 @@ async function goToChannel(id) {
   }
 }
 
-function minimizeChat() {
-  chatPath.value = route.fullPath
-  chatFloating.value = true
-  navigateTo('/')
-}
-
-function maximizeChat() {
-  if (window.parent) {
-    window.parent.postMessage(
-      {
-        type: 'maximize-chat',
-        path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
-      },
-      '*',
-    )
-  }
-}
-
 onActivated(async () => {
   loading.value = true
   currentUser.value = await fetchCurrentUser()
@@ -305,7 +279,6 @@ function goToConversation(id) {
 
 <style scoped>
 .messages-container {
-  position: relative;
 }
 
 .tabs {
@@ -465,18 +438,6 @@ function goToConversation(id) {
   margin-left: 4px;
 }
 
-.chat-controls {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-  z-index: 10;
-}
-
-.control-icon {
-  font-size: 16px;
-}
-
 /* 响应式设计 */
 @media (max-width: 768px) {
   .conversation-item {

From 175ab79b27b26485a6fffb58102d12d844990b5f Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Mon, 25 Aug 2025 16:42:14 +0800
Subject: [PATCH 4/8] feat: support message replies and reactions

---
 .../controller/MessageController.java         | 44 ++++++-------
 .../controller/ReactionController.java        | 13 ++++
 .../java/com/openisle/dto/MessageDto.java     |  3 +
 .../java/com/openisle/dto/ReactionDto.java    |  3 +-
 .../com/openisle/mapper/ReactionMapper.java   |  3 +
 .../main/java/com/openisle/model/Message.java |  4 ++
 .../java/com/openisle/model/Reaction.java     |  9 ++-
 .../repository/ReactionRepository.java        |  3 +
 .../com/openisle/service/MessageService.java  | 41 +++++++++++-
 .../com/openisle/service/ReactionService.java | 23 +++++++
 .../controller/ReactionControllerTest.java    | 22 +++++++
 .../openisle/service/ReactionServiceTest.java |  3 +-
 frontend_nuxt/components/ReactionsGroup.vue   |  4 +-
 frontend_nuxt/pages/message-box/[id].vue      | 64 ++++++++++++++++++-
 14 files changed, 207 insertions(+), 32 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/MessageController.java b/backend/src/main/java/com/openisle/controller/MessageController.java
index bf2b2b1ad..500ad2a05 100644
--- a/backend/src/main/java/com/openisle/controller/MessageController.java
+++ b/backend/src/main/java/com/openisle/controller/MessageController.java
@@ -5,7 +5,6 @@ import com.openisle.dto.ConversationDto;
 import com.openisle.dto.CreateConversationRequest;
 import com.openisle.dto.CreateConversationResponse;
 import com.openisle.dto.MessageDto;
-import com.openisle.dto.UserSummaryDto;
 import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.User;
@@ -55,16 +54,16 @@ public class MessageController {
 
     @PostMapping
     public ResponseEntity<MessageDto> sendMessage(@RequestBody MessageRequest req, Authentication auth) {
-        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent());
-        return ResponseEntity.ok(toDto(message));
+        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent(), req.getReplyToId());
+        return ResponseEntity.ok(messageService.toDto(message));
     }
 
     @PostMapping("/conversations/{conversationId}/messages")
     public ResponseEntity<MessageDto> sendMessageToConversation(@PathVariable Long conversationId,
                                                                 @RequestBody ChannelMessageRequest req,
                                                                 Authentication auth) {
-        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent());
-        return ResponseEntity.ok(toDto(message));
+        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent(), req.getReplyToId());
+        return ResponseEntity.ok(messageService.toDto(message));
     }
 
     @PostMapping("/conversations/{conversationId}/read")
@@ -79,23 +78,6 @@ public class MessageController {
         return ResponseEntity.ok(new CreateConversationResponse(conversation.getId()));
     }
 
-    private MessageDto toDto(Message message) {
-        MessageDto dto = new MessageDto();
-        dto.setId(message.getId());
-        dto.setContent(message.getContent());
-        dto.setCreatedAt(message.getCreatedAt());
-
-        dto.setConversationId(message.getConversation().getId());
-
-        UserSummaryDto senderDto = new UserSummaryDto();
-        senderDto.setId(message.getSender().getId());
-        senderDto.setUsername(message.getSender().getUsername());
-        senderDto.setAvatar(message.getSender().getAvatar());
-        dto.setSender(senderDto);
-
-        return dto;
-    }
-
     @GetMapping("/unread-count")
     public ResponseEntity<Long> getUnreadCount(Authentication auth) {
         return ResponseEntity.ok(messageService.getUnreadMessageCount(getCurrentUserId(auth)));
@@ -105,6 +87,7 @@ public class MessageController {
     static class MessageRequest {
         private Long recipientId;
         private String content;
+        private Long replyToId;
 
         public Long getRecipientId() {
             return recipientId;
@@ -121,10 +104,19 @@ public class MessageController {
         public void setContent(String content) {
             this.content = content;
         }
+
+        public Long getReplyToId() {
+            return replyToId;
+        }
+
+        public void setReplyToId(Long replyToId) {
+            this.replyToId = replyToId;
+        }
     }
 
     static class ChannelMessageRequest {
         private String content;
+        private Long replyToId;
 
         public String getContent() {
             return content;
@@ -133,5 +125,13 @@ public class MessageController {
         public void setContent(String content) {
             this.content = content;
         }
+
+        public Long getReplyToId() {
+            return replyToId;
+        }
+
+        public void setReplyToId(Long replyToId) {
+            this.replyToId = replyToId;
+        }
     }
 }
\ No newline at end of file
diff --git a/backend/src/main/java/com/openisle/controller/ReactionController.java b/backend/src/main/java/com/openisle/controller/ReactionController.java
index 5ef655e1b..ce0966160 100644
--- a/backend/src/main/java/com/openisle/controller/ReactionController.java
+++ b/backend/src/main/java/com/openisle/controller/ReactionController.java
@@ -57,4 +57,17 @@ public class ReactionController {
         pointService.awardForReactionOfComment(auth.getName(), commentId);
         return ResponseEntity.ok(dto);
     }
+
+    @PostMapping("/messages/{messageId}/reactions")
+    public ResponseEntity<ReactionDto> reactToMessage(@PathVariable Long messageId,
+                                                      @RequestBody ReactionRequest req,
+                                                      Authentication auth) {
+        Reaction reaction = reactionService.reactToMessage(auth.getName(), messageId, req.getType());
+        if (reaction == null) {
+            return ResponseEntity.noContent().build();
+        }
+        ReactionDto dto = reactionMapper.toDto(reaction);
+        dto.setReward(levelService.awardForReaction(auth.getName()));
+        return ResponseEntity.ok(dto);
+    }
 }
diff --git a/backend/src/main/java/com/openisle/dto/MessageDto.java b/backend/src/main/java/com/openisle/dto/MessageDto.java
index ff536cf84..956a8a7c4 100644
--- a/backend/src/main/java/com/openisle/dto/MessageDto.java
+++ b/backend/src/main/java/com/openisle/dto/MessageDto.java
@@ -2,6 +2,7 @@ package com.openisle.dto;
 
 import lombok.Data;
 import java.time.LocalDateTime;
+import java.util.List;
 
 @Data
 public class MessageDto {
@@ -10,4 +11,6 @@ public class MessageDto {
     private UserSummaryDto sender;
     private Long conversationId;
     private LocalDateTime createdAt;
+    private MessageDto replyTo;
+    private List<ReactionDto> reactions;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/com/openisle/dto/ReactionDto.java b/backend/src/main/java/com/openisle/dto/ReactionDto.java
index b57a3d333..7266bbfc0 100644
--- a/backend/src/main/java/com/openisle/dto/ReactionDto.java
+++ b/backend/src/main/java/com/openisle/dto/ReactionDto.java
@@ -4,7 +4,7 @@ import com.openisle.model.ReactionType;
 import lombok.Data;
 
 /**
- * DTO representing a reaction on a post or comment.
+ * DTO representing a reaction on a post, comment or message.
  */
 @Data
 public class ReactionDto {
@@ -13,6 +13,7 @@ public class ReactionDto {
     private String user;
     private Long postId;
     private Long commentId;
+    private Long messageId;
     private int reward;
 }
 
diff --git a/backend/src/main/java/com/openisle/mapper/ReactionMapper.java b/backend/src/main/java/com/openisle/mapper/ReactionMapper.java
index d5cca8c90..8e23fb0b5 100644
--- a/backend/src/main/java/com/openisle/mapper/ReactionMapper.java
+++ b/backend/src/main/java/com/openisle/mapper/ReactionMapper.java
@@ -19,6 +19,9 @@ public class ReactionMapper {
         if (reaction.getComment() != null) {
             dto.setCommentId(reaction.getComment().getId());
         }
+        if (reaction.getMessage() != null) {
+            dto.setMessageId(reaction.getMessage().getId());
+        }
         dto.setReward(0);
         return dto;
     }
diff --git a/backend/src/main/java/com/openisle/model/Message.java b/backend/src/main/java/com/openisle/model/Message.java
index 2cd1d4cca..72edb3e2b 100644
--- a/backend/src/main/java/com/openisle/model/Message.java
+++ b/backend/src/main/java/com/openisle/model/Message.java
@@ -29,6 +29,10 @@ public class Message {
     @Column(nullable = false, columnDefinition = "TEXT")
     private String content;
 
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "reply_to_id")
+    private Message replyTo;
+
     @CreationTimestamp
     @Column(nullable = false, updatable = false)
     private LocalDateTime createdAt;
diff --git a/backend/src/main/java/com/openisle/model/Reaction.java b/backend/src/main/java/com/openisle/model/Reaction.java
index b2610e8df..7b7b7240e 100644
--- a/backend/src/main/java/com/openisle/model/Reaction.java
+++ b/backend/src/main/java/com/openisle/model/Reaction.java
@@ -7,7 +7,7 @@ import lombok.Setter;
 import org.hibernate.annotations.CreationTimestamp;
 
 /**
- * Reaction entity representing a user's reaction to a post or comment.
+ * Reaction entity representing a user's reaction to a post, comment or message.
  */
 @Entity
 @Getter
@@ -16,7 +16,8 @@ import org.hibernate.annotations.CreationTimestamp;
 @Table(name = "reactions",
        uniqueConstraints = {
            @UniqueConstraint(columnNames = {"user_id", "post_id", "type"}),
-           @UniqueConstraint(columnNames = {"user_id", "comment_id", "type"})
+           @UniqueConstraint(columnNames = {"user_id", "comment_id", "type"}),
+           @UniqueConstraint(columnNames = {"user_id", "message_id", "type"})
        })
 public class Reaction {
     @Id
@@ -39,6 +40,10 @@ public class Reaction {
     @JoinColumn(name = "comment_id")
     private Comment comment;
 
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "message_id")
+    private Message message;
+
     @CreationTimestamp
     @Column(nullable = false, updatable = false,
             columnDefinition = "DATETIME(6) DEFAULT CURRENT_TIMESTAMP(6)")
diff --git a/backend/src/main/java/com/openisle/repository/ReactionRepository.java b/backend/src/main/java/com/openisle/repository/ReactionRepository.java
index e66c1f568..4f07eab80 100644
--- a/backend/src/main/java/com/openisle/repository/ReactionRepository.java
+++ b/backend/src/main/java/com/openisle/repository/ReactionRepository.java
@@ -1,6 +1,7 @@
 package com.openisle.repository;
 
 import com.openisle.model.Comment;
+import com.openisle.model.Message;
 import com.openisle.model.Post;
 import com.openisle.model.Reaction;
 import com.openisle.model.User;
@@ -15,8 +16,10 @@ import java.util.Optional;
 public interface ReactionRepository extends JpaRepository<Reaction, Long> {
     Optional<Reaction> findByUserAndPostAndType(User user, Post post, com.openisle.model.ReactionType type);
     Optional<Reaction> findByUserAndCommentAndType(User user, Comment comment, com.openisle.model.ReactionType type);
+    Optional<Reaction> findByUserAndMessageAndType(User user, Message message, com.openisle.model.ReactionType type);
     List<Reaction> findByPost(Post post);
     List<Reaction> findByComment(Comment comment);
+    List<Reaction> findByMessage(Message message);
 
     @Query("SELECT r.post.id FROM Reaction r WHERE r.post IS NOT NULL AND r.post.author.username = :username AND r.type = com.openisle.model.ReactionType.LIKE GROUP BY r.post.id ORDER BY COUNT(r.id) DESC")
     List<Long> findTopPostIds(@Param("username") String username, Pageable pageable);
diff --git a/backend/src/main/java/com/openisle/service/MessageService.java b/backend/src/main/java/com/openisle/service/MessageService.java
index f4e1d20cd..9993cd8f3 100644
--- a/backend/src/main/java/com/openisle/service/MessageService.java
+++ b/backend/src/main/java/com/openisle/service/MessageService.java
@@ -4,14 +4,18 @@ import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.MessageParticipant;
 import com.openisle.model.User;
+import com.openisle.model.Reaction;
 import com.openisle.repository.MessageConversationRepository;
 import com.openisle.repository.MessageParticipantRepository;
 import com.openisle.repository.MessageRepository;
 import com.openisle.repository.UserRepository;
+import com.openisle.repository.ReactionRepository;
 import com.openisle.dto.ConversationDetailDto;
 import com.openisle.dto.ConversationDto;
 import com.openisle.dto.MessageDto;
+import com.openisle.dto.ReactionDto;
 import com.openisle.dto.UserSummaryDto;
+import com.openisle.mapper.ReactionMapper;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.data.domain.Page;
@@ -34,9 +38,11 @@ public class MessageService {
     private final MessageParticipantRepository participantRepository;
     private final UserRepository userRepository;
     private final SimpMessagingTemplate messagingTemplate;
+    private final ReactionRepository reactionRepository;
+    private final ReactionMapper reactionMapper;
 
     @Transactional
-    public Message sendMessage(Long senderId, Long recipientId, String content) {
+    public Message sendMessage(Long senderId, Long recipientId, String content, Long replyToId) {
         log.info("Attempting to send message from user {} to user {}", senderId, recipientId);
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
@@ -51,6 +57,11 @@ public class MessageService {
         message.setConversation(conversation);
         message.setSender(sender);
         message.setContent(content);
+        if (replyToId != null) {
+            Message replyTo = messageRepository.findById(replyToId)
+                    .orElseThrow(() -> new IllegalArgumentException("Message not found"));
+            message.setReplyTo(replyTo);
+        }
         message = messageRepository.save(message);
         log.info("Message saved with ID: {}", message.getId());
 
@@ -83,7 +94,7 @@ public class MessageService {
     }
 
     @Transactional
-    public Message sendMessageToConversation(Long senderId, Long conversationId, String content) {
+    public Message sendMessageToConversation(Long senderId, Long conversationId, String content, Long replyToId) {
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
         MessageConversation conversation = conversationRepository.findById(conversationId)
@@ -102,6 +113,11 @@ public class MessageService {
         message.setConversation(conversation);
         message.setSender(sender);
         message.setContent(content);
+        if (replyToId != null) {
+            Message replyTo = messageRepository.findById(replyToId)
+                    .orElseThrow(() -> new IllegalArgumentException("Message not found"));
+            message.setReplyTo(replyTo);
+        }
         message = messageRepository.save(message);
 
         conversation.setLastMessage(message);
@@ -128,7 +144,7 @@ public class MessageService {
         return message;
     }
 
-    private MessageDto toDto(Message message) {
+    public MessageDto toDto(Message message) {
         MessageDto dto = new MessageDto();
         dto.setId(message.getId());
         dto.setContent(message.getContent());
@@ -141,6 +157,25 @@ public class MessageService {
         userSummaryDto.setAvatar(message.getSender().getAvatar());
         dto.setSender(userSummaryDto);
 
+        if (message.getReplyTo() != null) {
+            Message reply = message.getReplyTo();
+            MessageDto replyDto = new MessageDto();
+            replyDto.setId(reply.getId());
+            replyDto.setContent(reply.getContent());
+            UserSummaryDto replySender = new UserSummaryDto();
+            replySender.setId(reply.getSender().getId());
+            replySender.setUsername(reply.getSender().getUsername());
+            replySender.setAvatar(reply.getSender().getAvatar());
+            replyDto.setSender(replySender);
+            dto.setReplyTo(replyDto);
+        }
+
+        java.util.List<Reaction> reactions = reactionRepository.findByMessage(message);
+        java.util.List<ReactionDto> reactionDtos = reactions.stream()
+                .map(reactionMapper::toDto)
+                .collect(Collectors.toList());
+        dto.setReactions(reactionDtos);
+
         return dto;
     }
 
diff --git a/backend/src/main/java/com/openisle/service/ReactionService.java b/backend/src/main/java/com/openisle/service/ReactionService.java
index b6cda46f5..8df020eaf 100644
--- a/backend/src/main/java/com/openisle/service/ReactionService.java
+++ b/backend/src/main/java/com/openisle/service/ReactionService.java
@@ -6,10 +6,12 @@ import com.openisle.model.Reaction;
 import com.openisle.model.ReactionType;
 import com.openisle.model.User;
 import com.openisle.model.NotificationType;
+import com.openisle.model.Message;
 import com.openisle.repository.CommentRepository;
 import com.openisle.repository.PostRepository;
 import com.openisle.repository.ReactionRepository;
 import com.openisle.repository.UserRepository;
+import com.openisle.repository.MessageRepository;
 import com.openisle.service.NotificationService;
 import com.openisle.service.EmailSender;
 import lombok.RequiredArgsConstructor;
@@ -24,6 +26,7 @@ public class ReactionService {
     private final UserRepository userRepository;
     private final PostRepository postRepository;
     private final CommentRepository commentRepository;
+    private final MessageRepository messageRepository;
     private final NotificationService notificationService;
     private final EmailSender emailSender;
 
@@ -77,6 +80,26 @@ public class ReactionService {
         return reaction;
     }
 
+    @Transactional
+    public Reaction reactToMessage(String username, Long messageId, ReactionType type) {
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        Message message = messageRepository.findById(messageId)
+                .orElseThrow(() -> new IllegalArgumentException("Message not found"));
+        java.util.Optional<Reaction> existing =
+                reactionRepository.findByUserAndMessageAndType(user, message, type);
+        if (existing.isPresent()) {
+            reactionRepository.delete(existing.get());
+            return null;
+        }
+        Reaction reaction = new Reaction();
+        reaction.setUser(user);
+        reaction.setMessage(message);
+        reaction.setType(type);
+        reaction = reactionRepository.save(reaction);
+        return reaction;
+    }
+
     public java.util.List<Reaction> getReactionsForPost(Long postId) {
         Post post = postRepository.findById(postId)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
diff --git a/backend/src/test/java/com/openisle/controller/ReactionControllerTest.java b/backend/src/test/java/com/openisle/controller/ReactionControllerTest.java
index 635dad98e..8b1ab96b6 100644
--- a/backend/src/test/java/com/openisle/controller/ReactionControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/ReactionControllerTest.java
@@ -5,6 +5,7 @@ import com.openisle.model.Post;
 import com.openisle.model.Reaction;
 import com.openisle.model.ReactionType;
 import com.openisle.model.User;
+import com.openisle.model.Message;
 import com.openisle.service.ReactionService;
 import com.openisle.service.LevelService;
 import com.openisle.mapper.ReactionMapper;
@@ -78,6 +79,27 @@ class ReactionControllerTest {
                 .andExpect(jsonPath("$.commentId").value(2));
     }
 
+    @Test
+    void reactToMessage() throws Exception {
+        User user = new User();
+        user.setUsername("u3");
+        Message message = new Message();
+        message.setId(3L);
+        Reaction reaction = new Reaction();
+        reaction.setId(3L);
+        reaction.setUser(user);
+        reaction.setMessage(message);
+        reaction.setType(ReactionType.LIKE);
+        Mockito.when(reactionService.reactToMessage(eq("u3"), eq(3L), eq(ReactionType.LIKE))).thenReturn(reaction);
+
+        mockMvc.perform(post("/api/messages/3/reactions")
+                        .contentType("application/json")
+                        .content("{\"type\":\"LIKE\"}")
+                        .principal(new UsernamePasswordAuthenticationToken("u3", "p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.messageId").value(3));
+    }
+
     @Test
     void listReactionTypes() throws Exception {
         mockMvc.perform(get("/api/reaction-types"))
diff --git a/backend/src/test/java/com/openisle/service/ReactionServiceTest.java b/backend/src/test/java/com/openisle/service/ReactionServiceTest.java
index 9c4cb5780..0c74a8f36 100644
--- a/backend/src/test/java/com/openisle/service/ReactionServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/ReactionServiceTest.java
@@ -15,9 +15,10 @@ class ReactionServiceTest {
         UserRepository userRepo = mock(UserRepository.class);
         PostRepository postRepo = mock(PostRepository.class);
         CommentRepository commentRepo = mock(CommentRepository.class);
+        MessageRepository messageRepo = mock(MessageRepository.class);
         NotificationService notif = mock(NotificationService.class);
         EmailSender email = mock(EmailSender.class);
-        ReactionService service = new ReactionService(reactionRepo, userRepo, postRepo, commentRepo, notif, email);
+        ReactionService service = new ReactionService(reactionRepo, userRepo, postRepo, commentRepo, messageRepo, notif, email);
         org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
 
         User user = new User();
diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index dc8fcea22..fefd10287 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -138,7 +138,9 @@ const toggleReaction = async (type) => {
   const url =
     props.contentType === 'post'
       ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
-      : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+      : props.contentType === 'comment'
+        ? `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+        : `${API_BASE_URL}/api/messages/${props.contentId}/reactions`
 
   // optimistic update
   const existingIdx = reactions.value.findIndex(
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index fee571f53..d16e1ebf2 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -30,9 +30,21 @@
                 {{ TimeManager.format(item.createdAt) }}
               </div>
             </div>
+            <div v-if="item.replyTo" class="reply-preview">
+              <div class="reply-author">{{ item.replyTo.sender.username }}</div>
+              <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
+            </div>
             <div class="message-content">
               <div class="info-content-text" v-html="renderMarkdown(item.content)"></div>
             </div>
+            <ReactionsGroup
+              :model-value="item.reactions"
+              content-type="message"
+              :content-id="item.id"
+              @update:modelValue="(v) => (item.reactions = v)"
+            >
+              <div class="reply-btn" @click="setReply(item)">回复</div>
+            </ReactionsGroup>
           </template>
         </BaseTimeline>
         <div class="empty-container">
@@ -46,6 +58,11 @@
     </div>
 
     <div class="message-input-area">
+      <div v-if="replyTo" class="active-reply">
+        正在回复 {{ replyTo.sender.username }}:
+        {{ stripMarkdownLength(replyTo.content, 50) }}
+        <i class="fas fa-times close-reply" @click="replyTo = null"></i>
+      </div>
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
   </div>
@@ -65,8 +82,9 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown } from '~/utils/markdown'
+import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
+import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
@@ -97,6 +115,7 @@ const loadingMore = ref(false)
 let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
+const replyTo = ref(null)
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
@@ -115,6 +134,10 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
+function setReply(message) {
+  replyTo.value = message
+}
+
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -208,7 +231,7 @@ async function sendMessage(content, clearInput) {
             'Content-Type': 'application/json',
             Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify({ content }),
+          body: JSON.stringify({ content, replyToId: replyTo.value?.id }),
         },
       )
     } else {
@@ -226,6 +249,7 @@ async function sendMessage(content, clearInput) {
         body: JSON.stringify({
           recipientId: recipient.id,
           content: content,
+          replyToId: replyTo.value?.id,
         }),
       })
     }
@@ -240,6 +264,7 @@ async function sendMessage(content, clearInput) {
       },
     })
     clearInput()
+    replyTo.value = null
     setTimeout(() => {
       scrollToBottom()
     }, 100)
@@ -524,4 +549,39 @@ onUnmounted(() => {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+.reply-preview {
+  padding: 5px 10px;
+  border-left: 2px solid var(--primary-color);
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+
+.reply-author {
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.reply-btn {
+  cursor: pointer;
+  padding: 4px;
+  opacity: 0.6;
+}
+
+.reply-btn:hover {
+  opacity: 1;
+}
+
+.active-reply {
+  background-color: var(--bg-color-soft);
+  padding: 5px 10px;
+  border-left: 3px solid var(--primary-color);
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+
+.close-reply {
+  margin-left: 8px;
+  cursor: pointer;
+}
 </style>

From 02d366e2c7808cecba8dd91c6ed70744e7e3d5a5 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 25 Aug 2025 17:06:44 +0800
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E6=94=AF=E6=8C=81=E5=9B=9E=E5=A4=8D?=
 =?UTF-8?q?/reactions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/ReactionsGroup.vue | 12 ++++++++++--
 frontend_nuxt/pages/message-box/[id].vue    |  7 ++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index fefd10287..697cc81e0 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -19,7 +19,7 @@
           </div>
 
           <div class="reactions-viewer-item placeholder" @click="openPanel">
-            <i class="far fa-smile"></i>
+            <i class="far fa-smile reactions-viewer-item-placeholder-icon"></i>
             <!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> -->
           </div>
         </template>
@@ -37,7 +37,11 @@
       </div>
     </div>
     <div class="make-reaction-container">
-      <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')">
+      <div
+        v-if="props.contentType !== 'message'"
+        class="make-reaction-item like-reaction"
+        @click="toggleReaction('LIKE')"
+      >
         <i v-if="!userReacted('LIKE')" class="far fa-heart"></i>
         <i v-else class="fas fa-heart"></i>
         <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
@@ -238,6 +242,10 @@ onMounted(async () => {
   font-size: 16px;
 }
 
+.reactions-viewer-item-placeholder-icon {
+  opacity: 0.5;
+}
+
 .reactions-viewer-item-placeholder-text {
   font-size: 14px;
   padding-left: 5px;
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index d16e1ebf2..0ecf3e5a4 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -43,7 +43,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <div class="reply-btn" @click="setReply(item)">回复</div>
+              <i class="fas fa-reply reply-btn" @click="setReply(item)"> 写个回复...</i>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -552,7 +552,7 @@ onUnmounted(() => {
 
 .reply-preview {
   padding: 5px 10px;
-  border-left: 2px solid var(--primary-color);
+  border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
 }
@@ -566,6 +566,7 @@ onUnmounted(() => {
   cursor: pointer;
   padding: 4px;
   opacity: 0.6;
+  font-size: 12px;
 }
 
 .reply-btn:hover {
@@ -575,7 +576,7 @@ onUnmounted(() => {
 .active-reply {
   background-color: var(--bg-color-soft);
   padding: 5px 10px;
-  border-left: 3px solid var(--primary-color);
+  border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
 }

From df71cf901b1640dcf11cc92b251705f84659dd67 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Mon, 25 Aug 2025 17:18:34 +0800
Subject: [PATCH 6/8] feat: add floating message box window

---
 frontend_nuxt/app.vue                         | 19 ++++--
 .../components/MessageFloatWindow.vue         | 65 +++++++++++++++++++
 frontend_nuxt/pages/message-box/[id].vue      | 54 ++++++++++++---
 frontend_nuxt/pages/message-box/index.vue     | 24 ++++++-
 4 files changed, 146 insertions(+), 16 deletions(-)
 create mode 100644 frontend_nuxt/components/MessageFloatWindow.vue

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index 8eab548cf..6a429d5ae 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div class="header-container">
+    <div v-if="!isFloatMode" class="header-container">
       <HeaderComponent
         ref="header"
         @toggle-menu="menuVisible = !menuVisible"
@@ -9,19 +9,28 @@
     </div>
 
     <div class="main-container">
-      <div class="menu-container" v-click-outside="handleMenuOutside">
+      <div v-if="!isFloatMode" class="menu-container" v-click-outside="handleMenuOutside">
         <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
       </div>
-      <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
+      <div
+        class="content"
+        :class="{ 'menu-open': menuVisible && !hideMenu && !isFloatMode }"
+        :style="isFloatMode ? { paddingTop: '0px', minHeight: '100vh' } : {}"
+      >
         <NuxtPage keepalive />
       </div>
 
-      <div v-if="showNewPostIcon && isMobile" class="app-new-post-icon" @click="goToNewPost">
+      <div
+        v-if="showNewPostIcon && isMobile && !isFloatMode"
+        class="app-new-post-icon"
+        @click="goToNewPost"
+      >
         <i class="fas fa-edit"></i>
       </div>
     </div>
     <GlobalPopups />
     <ConfirmDialog />
+    <MessageFloatWindow v-if="!isFloatMode" />
   </div>
 </template>
 
@@ -30,6 +39,7 @@ import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
 import GlobalPopups from '~/components/GlobalPopups.vue'
 import ConfirmDialog from '~/components/ConfirmDialog.vue'
+import MessageFloatWindow from '~/components/MessageFloatWindow.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
@@ -52,6 +62,7 @@ const hideMenu = computed(() => {
 })
 
 const header = useTemplateRef('header')
+const isFloatMode = computed(() => useRoute().query.float !== undefined)
 
 onMounted(() => {
   if (typeof window !== 'undefined') {
diff --git a/frontend_nuxt/components/MessageFloatWindow.vue b/frontend_nuxt/components/MessageFloatWindow.vue
new file mode 100644
index 000000000..c3866a672
--- /dev/null
+++ b/frontend_nuxt/components/MessageFloatWindow.vue
@@ -0,0 +1,65 @@
+<template>
+  <div v-if="floatRoute" class="message-float-window">
+    <iframe :src="iframeSrc" frameborder="0"></iframe>
+    <div class="float-actions">
+      <i class="fas fa-expand" @click="expand"></i>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const floatRoute = useState('messageFloatRoute')
+
+const iframeSrc = computed(() => {
+  if (!floatRoute.value) return ''
+  return floatRoute.value + (floatRoute.value.includes('?') ? '&' : '?') + 'float=1'
+})
+
+function expand() {
+  if (!floatRoute.value) return
+  const target = floatRoute.value
+  floatRoute.value = null
+  navigateTo(target)
+}
+</script>
+
+<style scoped>
+.message-float-window {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 400px;
+  height: 60vh;
+  max-height: 90vh;
+  background-color: var(--background-color);
+  border: 1px solid var(--normal-border-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-float-window iframe {
+  width: 100%;
+  flex: 1;
+}
+
+.float-actions {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+}
+
+.float-actions i {
+  cursor: pointer;
+}
+
+@media (max-width: 480px) {
+  .message-float-window {
+    width: 100%;
+    right: 0;
+    left: 0;
+    height: 100vh;
+  }
+}
+</style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index fee571f53..7184e2bd4 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="chat-container">
+  <div class="chat-container" :class="{ float: isFloatMode }">
     <div v-if="!loading" class="chat-header">
-      <NuxtLink to="/message-box" class="back-button">
-        <i class="fas fa-arrow-left"></i>
-      </NuxtLink>
-      <h2 class="participant-name">
-        {{ isChannel ? conversationName : otherParticipant?.username }}
-      </h2>
+      <div class="header-main">
+        <NuxtLink to="/message-box" class="back-button">
+          <i class="fas fa-arrow-left"></i>
+        </NuxtLink>
+        <h2 class="participant-name">
+          {{ isChannel ? conversationName : otherParticipant?.username }}
+        </h2>
+      </div>
+      <div v-if="!isFloatMode" class="header-actions" @click="minimize">
+        <i class="fas fa-window-minimize"></i>
+      </div>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
@@ -97,6 +102,8 @@ const loadingMore = ref(false)
 let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
+const isFloatMode = computed(() => route.query.float !== undefined)
+const floatRoute = useState('messageFloatRoute')
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
@@ -156,7 +163,7 @@ async function fetchMessages(page = 0) {
       ...item,
       src: item.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${item.sender.id}`, { replace: true })
+        openUser(item.sender.id)
       },
     }))
 
@@ -236,7 +243,7 @@ async function sendMessage(content, clearInput) {
       ...newMessage,
       src: newMessage.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+        openUser(newMessage.sender.id)
       },
     })
     clearInput()
@@ -322,7 +329,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -376,6 +383,19 @@ onUnmounted(() => {
   }
   disconnect()
 })
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
+}
+
+function openUser(id) {
+  if (isFloatMode.value && typeof window !== 'undefined') {
+    window.top.location.href = `/users/${id}`
+  } else {
+    navigateTo(`/users/${id}`, { replace: true })
+  }
+}
 </script>
 
 <style scoped>
@@ -388,8 +408,13 @@ onUnmounted(() => {
   position: relative;
 }
 
+.chat-container.float {
+  height: 100vh;
+}
+
 .chat-header {
   display: flex;
+  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -400,6 +425,15 @@ onUnmounted(() => {
   backdrop-filter: var(--blur-10);
 }
 
+.header-main {
+  display: flex;
+  align-items: center;
+}
+
+.header-actions i {
+  cursor: pointer;
+}
+
 .back-button {
   font-size: 18px;
   color: var(--text-color-primary);
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index d2af0f6af..1d8502a89 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="messages-container">
+    <div v-if="!isFloatMode" class="float-control">
+      <i class="fas fa-window-minimize" @click="minimize"></i>
+    </div>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -114,8 +117,8 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted, watch, onActivated } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -142,6 +145,9 @@ let subscription = null
 const activeTab = ref('messages')
 const channels = ref([])
 const loadingChannels = ref(false)
+const route = useRoute()
+const isFloatMode = computed(() => route.query.float !== undefined)
+const floatRoute = useState('messageFloatRoute')
 
 async function fetchConversations() {
   const token = getToken()
@@ -274,12 +280,26 @@ onUnmounted(() => {
 function goToConversation(id) {
   router.push(`/message-box/${id}`)
 }
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
+}
 </script>
 
 <style scoped>
 .messages-container {
 }
 
+.float-control {
+  text-align: right;
+  padding: 8px 12px;
+}
+
+.float-control i {
+  cursor: pointer;
+}
+
 .tabs {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);

From ffd9ef8a32cd3c83b4560ee6da90ce3e8fab701b Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 25 Aug 2025 19:25:06 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MessageFloatWindow.vue         | 11 +----
 frontend_nuxt/pages/index.vue                 |  1 +
 frontend_nuxt/pages/message-box/[id].vue      | 47 ++++++++++++++-----
 frontend_nuxt/pages/message-box/index.vue     | 46 ++++++++++++++----
 4 files changed, 75 insertions(+), 30 deletions(-)

diff --git a/frontend_nuxt/components/MessageFloatWindow.vue b/frontend_nuxt/components/MessageFloatWindow.vue
index c3866a672..2d997f6b3 100644
--- a/frontend_nuxt/components/MessageFloatWindow.vue
+++ b/frontend_nuxt/components/MessageFloatWindow.vue
@@ -30,6 +30,7 @@ function expand() {
   right: 0;
   width: 400px;
   height: 60vh;
+  /* height: 80px; */
   max-height: 90vh;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
@@ -48,18 +49,10 @@ function expand() {
   position: absolute;
   top: 4px;
   right: 8px;
+  padding: 6px;
 }
 
 .float-actions i {
   cursor: pointer;
 }
-
-@media (max-width: 480px) {
-  .message-float-window {
-    width: 100%;
-    right: 0;
-    left: 0;
-    height: 100vh;
-  }
-}
 </style>
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 6dc86891d..9162a78b9 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -125,6 +125,7 @@
 
 <script setup>
 import { computed, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 7dd6856d2..370f48045 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -2,15 +2,15 @@
   <div class="chat-container" :class="{ float: isFloatMode }">
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
-        <NuxtLink to="/message-box" class="back-button">
+        <div class="back-button" @click="goBack">
           <i class="fas fa-arrow-left"></i>
-        </NuxtLink>
+        </div>
         <h2 class="participant-name">
           {{ isChannel ? conversationName : otherParticipant?.username }}
         </h2>
       </div>
-      <div v-if="!isFloatMode" class="header-actions" @click="minimize">
-        <i class="fas fa-window-minimize"></i>
+      <div v-if="!isFloatMode" class="float-control">
+        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
       </div>
     </div>
 
@@ -415,12 +415,21 @@ function minimize() {
 }
 
 function openUser(id) {
-  if (isFloatMode.value && typeof window !== 'undefined') {
-    window.top.location.href = `/users/${id}`
+  if (isFloatMode.value) {
+    // 先不处理...
+    // navigateTo(`/users/${id}?float=1`)
   } else {
     navigateTo(`/users/${id}`, { replace: true })
   }
 }
+
+function goBack() {
+  if (isFloatMode.value) {
+    navigateTo('/message-box?float=1')
+  } else {
+    navigateTo('/message-box')
+  }
+}
 </script>
 
 <style scoped>
@@ -455,7 +464,16 @@ function openUser(id) {
   align-items: center;
 }
 
-.header-actions i {
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+  cursor: pointer;
+}
+
+.float-control i {
   cursor: pointer;
 }
 
@@ -573,12 +591,6 @@ function openUser(id) {
   color: var(--text-color-secondary);
 }
 
-@media (max-width: 768px) {
-  .messages-list {
-    padding: 10px;
-  }
-}
-
 .message-input-area {
   margin-left: 10px;
   margin-right: 10px;
@@ -619,4 +631,13 @@ function openUser(id) {
   margin-left: 8px;
   cursor: pointer;
 }
+
+@media (max-height: 200px) {
+}
+
+@media (max-width: 768px) {
+  .messages-list {
+    padding: 10px;
+  }
+}
 </style>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 2b016e81c..bb4d5eaf6 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="messages-container">
+    <div class="page-title"><i class="fas fa-comments"></i>选择聊天</div>
     <div v-if="!isFloatMode" class="float-control">
-      <i class="fas fa-window-minimize" @click="minimize"></i>
+      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
@@ -21,7 +22,7 @@
         <div class="error-text">{{ error }}</div>
       </div>
 
-      <div v-if="!loading" class="search-container">
+      <div v-if="!loading && !isFloatMode" class="search-container">
         <SearchPersonDropdown />
       </div>
 
@@ -146,8 +147,7 @@ let subscription = null
 const activeTab = ref('messages')
 const channels = ref([])
 const loadingChannels = ref(false)
-const route = useRoute()
-const isFloatMode = computed(() => route.query.float !== undefined)
+const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
 
 async function fetchConversations() {
@@ -230,7 +230,11 @@ async function goToChannel(id) {
       method: 'POST',
       headers: { Authorization: `Bearer ${token}` },
     })
-    navigateTo(`/message-box/${id}`)
+    if (isFloatMode.value) {
+      navigateTo(`/message-box/${id}?float=1`)
+    } else {
+      navigateTo(`/message-box/${id}`)
+    }
   } catch (e) {
     toast.error(e.message)
   }
@@ -279,7 +283,11 @@ onUnmounted(() => {
 })
 
 function goToConversation(id) {
-  navigateTo(`/message-box/${id}`)
+  if (isFloatMode.value) {
+    navigateTo(`/message-box/${id}?float=1`)
+  } else {
+    navigateTo(`/message-box/${id}`)
+  }
 }
 
 function minimize() {
@@ -290,11 +298,15 @@ function minimize() {
 
 <style scoped>
 .messages-container {
+  position: relative;
 }
 
 .float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
   text-align: right;
-  padding: 8px 12px;
+  padding: 12px 12px;
 }
 
 .float-control i {
@@ -334,6 +346,10 @@ function minimize() {
   margin-bottom: 24px;
 }
 
+.page-title {
+  display: none;
+}
+
 .messages-title {
   font-size: 28px;
   font-weight: 600;
@@ -458,7 +474,21 @@ function minimize() {
   margin-left: 4px;
 }
 
-/* 响应式设计 */
+@media (max-height: 200px) {
+  .page-title {
+    display: block;
+  }
+
+  .tabs,
+  .loading-message,
+  .error-container,
+  .search-container,
+  .empty-container,
+  .conversation-item {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
   .conversation-item {
     margin-left: 10px;

From 7701d359dcdac39c78df02ed7ce58f3d142c5838 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Mon, 25 Aug 2025 20:35:33 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E5=85=81=E8=AE=B8=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E6=94=B6=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MessageFloatWindow.vue         | 53 +++++++++++++++++--
 frontend_nuxt/pages/message-box/[id].vue      |  4 ++
 frontend_nuxt/pages/message-box/index.vue     | 16 +++++-
 3 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/frontend_nuxt/components/MessageFloatWindow.vue b/frontend_nuxt/components/MessageFloatWindow.vue
index 2d997f6b3..3f2f39182 100644
--- a/frontend_nuxt/components/MessageFloatWindow.vue
+++ b/frontend_nuxt/components/MessageFloatWindow.vue
@@ -1,8 +1,23 @@
 <template>
-  <div v-if="floatRoute" class="message-float-window">
+  <div v-if="floatRoute" class="message-float-window" :style="{ height: floatHeight }">
     <iframe :src="iframeSrc" frameborder="0"></iframe>
+
     <div class="float-actions">
-      <i class="fas fa-expand" @click="expand"></i>
+      <i
+        class="fas fa-chevron-down"
+        v-if="floatHeight !== MINI_HEIGHT"
+        title="收起至 100px"
+        @click="collapseToMini"
+      ></i>
+      <!-- 回弹：60vh -->
+      <i
+        class="fas fa-chevron-up"
+        v-if="floatHeight !== DEFAULT_HEIGHT"
+        title="回弹至 60vh"
+        @click="reboundToDefault"
+      ></i>
+      <!-- 全屏打开（原有逻辑） -->
+      <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
     </div>
   </div>
 </template>
@@ -10,17 +25,37 @@
 <script setup>
 const floatRoute = useState('messageFloatRoute')
 
+const DEFAULT_HEIGHT = '60vh'
+const MINI_HEIGHT = '45px'
+const floatHeight = ref(DEFAULT_HEIGHT)
+
 const iframeSrc = computed(() => {
   if (!floatRoute.value) return ''
   return floatRoute.value + (floatRoute.value.includes('?') ? '&' : '?') + 'float=1'
 })
 
+function collapseToMini() {
+  floatHeight.value = MINI_HEIGHT
+}
+
+function reboundToDefault() {
+  floatHeight.value = DEFAULT_HEIGHT
+}
+
 function expand() {
   if (!floatRoute.value) return
   const target = floatRoute.value
   floatRoute.value = null
   navigateTo(target)
 }
+
+// 当浮窗重新出现时，恢复默认高度
+watch(
+  () => floatRoute.value,
+  (v) => {
+    if (v) floatHeight.value = DEFAULT_HEIGHT
+  },
+)
 </script>
 
 <style scoped>
@@ -29,8 +64,7 @@ function expand() {
   bottom: 0;
   right: 0;
   width: 400px;
-  height: 60vh;
-  /* height: 80px; */
+  /* 高度由内联样式绑定控制：60vh / 100px */
   max-height: 90vh;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
@@ -38,6 +72,7 @@ function expand() {
   z-index: 2000;
   display: flex;
   flex-direction: column;
+  transition: height 0.25s ease; /* 平滑过渡 */
 }
 
 .message-float-window iframe {
@@ -49,10 +84,18 @@ function expand() {
   position: absolute;
   top: 4px;
   right: 8px;
-  padding: 6px;
+  padding: 12px;
+  display: flex;
+  gap: 10px;
 }
 
 .float-actions i {
   cursor: pointer;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.float-actions i:hover {
+  opacity: 1;
 }
 </style>
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index 370f48045..8f183b127 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -633,6 +633,10 @@ function goBack() {
 }
 
 @media (max-height: 200px) {
+  .messages-list,
+  .message-input-area {
+    display: none;
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index bb4d5eaf6..f5c62630f 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="messages-container">
-    <div class="page-title"><i class="fas fa-comments"></i>选择聊天</div>
+    <div class="page-title">
+      <i class="fas fa-comments"></i>
+      <span class="page-title-text">选择聊天</span>
+    </div>
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
@@ -347,7 +350,18 @@ function minimize() {
 }
 
 .page-title {
+  padding: 12px;
   display: none;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.page-title-text {
+  margin-left: 10px;
+}
+
+.page-title-text:hover {
+  text-decoration: underline;
 }
 
 .messages-title {