fix: 允许窗口收起

feat: add floating message box window

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') {

frontend_nuxt/components/MessageFloatWindow.vue

@@ -0,0 +1,101 @@
+<template>
+  <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-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>
+
+<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>
+.message-float-window {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 400px;
+  /* 高度由内联样式绑定控制：60vh / 100px */
+  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;
+  transition: height 0.25s ease; /* 平滑过渡 */
+}
+
+.message-float-window iframe {
+  width: 100%;
+  flex: 1;
+}
+
+.float-actions {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+}
+
+.float-actions i {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.float-actions i:hover {
+  opacity: 1;
+}
+</style>

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;

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'

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">
+        <div class="back-button" @click="goBack">
+          <i class="fas fa-arrow-left"></i>
+        </div>
+        <h2 class="participant-name">
+          {{ isChannel ? conversationName : otherParticipant?.username }}
+        </h2>
+      </div>
+      <div v-if="!isFloatMode" class="float-control">
+        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+      </div>
     </div>
 
     <div class="messages-list" ref="messagesListEl">
@@ -43,7 +48,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>
@@ -115,6 +120,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 replyTo = ref(null)
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
@@ -179,7 +186,7 @@ async function fetchMessages(page = 0) {
       ...item,
       src: item.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${item.sender.id}`, { replace: true })
+        openUser(item.sender.id)
       },
     }))
 
@@ -260,7 +267,7 @@ async function sendMessage(content, clearInput) {
       ...newMessage,
       src: newMessage.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+        openUser(newMessage.sender.id)
       },
     })
     clearInput()
@@ -347,7 +354,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -401,6 +408,28 @@ onUnmounted(() => {
   }
   disconnect()
 })
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
+}
+
+function openUser(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>
@@ -413,8 +442,13 @@ onUnmounted(() => {
   position: relative;
 }
 
+.chat-container.float {
+  height: 100vh;
+}
+
 .chat-header {
   display: flex;
+  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -425,6 +459,24 @@ onUnmounted(() => {
   backdrop-filter: var(--blur-10);
 }
 
+.header-main {
+  display: flex;
+  align-items: center;
+}
+
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+  cursor: pointer;
+}
+
+.float-control i {
+  cursor: pointer;
+}
+
 .back-button {
   font-size: 18px;
   color: var(--text-color-primary);
@@ -539,12 +591,6 @@ onUnmounted(() => {
   color: var(--text-color-secondary);
 }
 
-@media (max-width: 768px) {
-  .messages-list {
-    padding: 10px;
-  }
-}
-
 .message-input-area {
   margin-left: 10px;
   margin-right: 10px;
@@ -552,7 +598,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 +612,7 @@ onUnmounted(() => {
   cursor: pointer;
   padding: 4px;
   opacity: 0.6;
+  font-size: 12px;
 }
 
 .reply-btn:hover {
@@ -575,7 +622,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;
 }
@@ -584,4 +631,17 @@ onUnmounted(() => {
   margin-left: 8px;
   cursor: pointer;
 }
+
+@media (max-height: 200px) {
+  .messages-list,
+  .message-input-area {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .messages-list {
+    padding: 10px;
+  }
+}
 </style>

frontend_nuxt/pages/message-box/index.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="messages-container">
+    <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>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -18,7 +25,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>
 
@@ -114,8 +121,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 { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -130,7 +137,8 @@ const config = useRuntimeConfig()
 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()
@@ -142,6 +150,8 @@ let subscription = null
 const activeTab = ref('messages')
 const channels = ref([])
 const loadingChannels = ref(false)
+const isFloatMode = computed(() => route.query.float === '1')
+const floatRoute = useState('messageFloatRoute')
 
 async function fetchConversations() {
   const token = getToken()
@@ -223,7 +233,11 @@ async function goToChannel(id) {
       method: 'POST',
       headers: { Authorization: `Bearer ${token}` },
     })
-    router.push(`/message-box/${id}`)
+    if (isFloatMode.value) {
+      navigateTo(`/message-box/${id}?float=1`)
+    } else {
+      navigateTo(`/message-box/${id}`)
+    }
   } catch (e) {
     toast.error(e.message)
   }
@@ -272,12 +286,34 @@ onUnmounted(() => {
 })
 
 function goToConversation(id) {
-  router.push(`/message-box/${id}`)
+  if (isFloatMode.value) {
+    navigateTo(`/message-box/${id}?float=1`)
+  } else {
+    navigateTo(`/message-box/${id}`)
+  }
+}
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
 }
 </script>
 
 <style scoped>
 .messages-container {
+  position: relative;
+}
+
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+}
+
+.float-control i {
+  cursor: pointer;
 }
 
 .tabs {
@@ -313,6 +349,21 @@ function goToConversation(id) {
   margin-bottom: 24px;
 }
 
+.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 {
   font-size: 28px;
   font-weight: 600;
@@ -437,7 +488,21 @@ function goToConversation(id) {
   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;

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('')

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) {