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] =?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 {