fix: 新增交互

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>

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

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

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;