feat: add message float components

frontend_nuxt/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div class="header-container">
+    <div class="header-container" v-if="!isFloatMode">
       <HeaderComponent
         ref="header"
         @toggle-menu="menuVisible = !menuVisible"
@@ -9,20 +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 }"
+        :style="isFloatMode ? 'padding-top:0; min-height: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 />
+    <GlobalPopups v-if="!isFloatMode" />
-    <ConfirmDialog />
+    <ConfirmDialog v-if="!isFloatMode" />
-    <ChatFloating />
+    <MessageFloat />
   </div>
 </template>
 
@@ -31,7 +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 ChatFloating from '~/components/ChatFloating.vue'
+import MessageFloat from '~/components/MessageFloat.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
@@ -39,6 +47,8 @@ const menuVisible = ref(!isMobile.value)
 
 const showNewPostIcon = computed(() => useRoute().path === '/')
 
+const isFloatMode = computed(() => useRoute().query.float === '1')
+
 const hideMenu = computed(() => {
   return [
     '/login',

frontend_nuxt/components/ChatFloating.vue

@@ -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>

frontend_nuxt/components/MessageFloat.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="state.open" class="message-float">
+    <iframe :src="frameSrc" class="message-frame" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useMessageFloat } from '~/composables/useMessageFloat'
+
+const state = useMessageFloat()
+
+const frameSrc = computed(() => {
+  const base = state.value.path || '/message-box'
+  return base + (base.includes('?') ? '&' : '?') + 'float=1'
+})
+</script>
+
+<style scoped>
+.message-float {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 380px;
+  height: 500px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  z-index: 2000;
+  background: var(--background-color);
+}
+
+.message-frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+@media (max-width: 600px) {
+  .message-float {
+    width: 100%;
+    height: 100%;
+    right: 0;
+  }
+}
+</style>

frontend_nuxt/composables/useMessageFloat.ts

@@ -0,0 +1,15 @@
+export const useMessageFloat = () =>
+  useState<{ open: boolean; path: string }>('message-float', () => ({
+    open: false,
+    path: '/message-box',
+  }))
+export const openMessageFloat = (path: string) => {
+  const state = useMessageFloat()
+  state.value.open = true
+  state.value.path = path
+}
+
+export const closeMessageFloat = () => {
+  const state = useMessageFloat()
+  state.value.open = false
+}

frontend_nuxt/pages/message-box/[id].vue

@@ -1,5 +1,13 @@
 <template>
   <div class="chat-container">
+    <div class="window-controls">
+      <button v-if="!isFloat" @click="shrink" class="control-btn">
+        <i class="fas fa-window-minimize"></i>
+      </button>
+      <button v-else @click="expand" class="control-btn">
+        <i class="fas fa-expand"></i>
+      </button>
+    </div>
     <div v-if="!loading" class="chat-header">
       <NuxtLink to="/message-box" class="back-button">
         <i class="fas fa-arrow-left"></i>
@@ -7,10 +15,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">
@@ -77,19 +81,17 @@ import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import { openMessageFloat } from '~/composables/useMessageFloat'
 
 const config = useRuntimeConfig()
 const route = useRoute()
+const router = useRouter()
 const API_BASE_URL = config.public.apiBaseUrl
 const { connect, disconnect, subscribe, isConnected } = useWebSocket()
 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)
@@ -105,6 +107,7 @@ const loadingMore = ref(false)
 let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
+const isFloat = computed(() => route.query.float === '1')
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
@@ -123,21 +126,21 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
-function minimizeChat() {
+function shrink() {
-  chatPath.value = route.fullPath
+  openMessageFloat(route.fullPath)
-  chatFloating.value = true
+  router.push('/')
-  navigateTo('/')
 }
 
-function maximizeChat() {
+function expand() {
-  if (window.parent) {
+  const base = route.fullPath.replace(/(\?|&)float=1/, '')
-    window.parent.postMessage(
+  window.top.location.href = base
-      {
+}
-        type: 'maximize-chat',
+
-        path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
+function openUser(id) {
-      },
+  if (isFloat.value) {
-      '*',
+    window.top.location.href = `/users/${id}`
-    )
+  } else {
+    navigateTo(`/users/${id}`, { replace: true })
   }
 }
 
@@ -182,7 +185,7 @@ async function fetchMessages(page = 0) {
       ...item,
       src: item.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${item.sender.id}`, { replace: true })
+        openUser(item.sender.id)
       },
     }))
 
@@ -262,7 +265,7 @@ async function sendMessage(content, clearInput) {
       ...newMessage,
       src: newMessage.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+        openUser(newMessage.sender.id)
       },
     })
     clearInput()
@@ -348,7 +351,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -414,6 +417,21 @@ onUnmounted(() => {
   position: relative;
 }
 
+.window-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+
+.control-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color-primary);
+  margin-left: 4px;
+}
+
 .chat-header {
   display: flex;
   position: sticky;
@@ -437,7 +455,6 @@ onUnmounted(() => {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
-  flex: 1;
 }
 
 .messages-list {
@@ -551,15 +568,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>

frontend_nuxt/pages/message-box/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="messages-container">
-    <div class="chat-controls">
+    <div class="window-controls">
-      <i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
+      <button v-if="!isFloat" @click="shrink" class="control-btn">
-      <i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
+        <i class="fas fa-window-minimize"></i>
+      </button>
+      <button v-else @click="expand" class="control-btn">
+        <i class="fas fa-expand"></i>
+      </button>
     </div>
     <div class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
@@ -129,6 +133,7 @@ import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import { openMessageFloat } from '~/composables/useMessageFloat'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -136,6 +141,7 @@ const loading = ref(true)
 const error = ref(null)
 const router = useRouter()
 const route = useRoute()
+const isFloat = computed(() => route.query.float === '1')
 const currentUser = ref(null)
 const API_BASE_URL = config.public.apiBaseUrl
 const { connect, disconnect, subscribe, isConnected } = useWebSocket()
@@ -144,14 +150,20 @@ 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)
 
+function shrink() {
+  openMessageFloat(route.fullPath)
+  router.push('/')
+}
+
+function expand() {
+  const base = route.fullPath.replace(/(\?|&)float=1/, '')
+  window.top.location.href = base
+}
+
 async function fetchConversations() {
   const token = getToken()
   if (!token) {
@@ -238,24 +250,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()
@@ -307,6 +301,20 @@ function goToConversation(id) {
 .messages-container {
   position: relative;
 }
+.window-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+
+.control-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color-primary);
+  margin-left: 4px;
+}
 
 .tabs {
   display: flex;
@@ -465,18 +473,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 {