feat: add floating message box window

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

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