feat: support floating message box

fix(frontend): 修复 Safari 浏览器下邀请链接复制问题

frontend_nuxt/app.vue

@@ -22,6 +22,7 @@
     </div>
     <GlobalPopups />
     <ConfirmDialog />
+    <ChatFloating />
   </div>
 </template>
 
@@ -30,6 +31,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 { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()

frontend_nuxt/components/ChatFloating.vue

@@ -0,0 +1,56 @@
+<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/HeaderComponent.vue

@@ -149,8 +149,20 @@ const copyInviteLink = async () => {
     if (res.ok) {
       const data = await res.json()
       const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : ''
-      await navigator.clipboard.writeText(inviteLink)
-      toast.success('邀请链接已复制')
+      /** 
+       * navigator.clipboard在webkit中有点奇怪的行为
+       * https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
+       * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
+      */
+      setTimeout(() => {
+        navigator.clipboard.writeText(inviteLink)
+          .then(() => {
+            toast.success('邀请链接已复制')
+          })
+          .catch(() => {
+            toast.error('邀请链接复制失败')
+          })
+      }, 0)
     } else {
       const data = await res.json().catch(() => ({}))
       toast.error(data.error || '生成邀请链接失败')

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

@@ -7,6 +7,10 @@
       <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">
@@ -82,6 +86,10 @@ 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)
@@ -115,6 +123,24 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
+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', ''),
+      },
+      '*',
+    )
+  }
+}
+
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -411,6 +437,7 @@ onUnmounted(() => {
   font-size: 18px;
   font-weight: 600;
   margin: 0;
+  flex: 1;
 }
 
 .messages-list {
@@ -524,4 +551,15 @@ 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,5 +1,9 @@
 <template>
   <div class="messages-container">
+    <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 class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -114,8 +118,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'
@@ -131,6 +135,7 @@ 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()
@@ -139,6 +144,10 @@ 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)
@@ -229,6 +238,24 @@ 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()
@@ -278,6 +305,7 @@ function goToConversation(id) {
 
 <style scoped>
 .messages-container {
+  position: relative;
 }
 
 .tabs {
@@ -437,6 +465,18 @@ 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 {

frontend_nuxt/utils/vditor.js

@@ -2,6 +2,7 @@ import Vditor from 'vditor'
 import { getToken, authState } from './auth'
 import { searchUsers, fetchFollowings, fetchAdmins } from './user'
 import { tiebaEmoji } from './tiebaEmoji'
+import vditorPostCitation from './vditorPostCitation.js'
 
 export function getEditorTheme() {
   return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
@@ -79,6 +80,7 @@ export function createVditor(editorId, options = {}) {
             }))
           },
         },
+        vditorPostCitation(API_BASE_URL),
       ],
     },
     cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',

frontend_nuxt/utils/vditorPostCitation.js

@@ -0,0 +1,37 @@
+import { authState, getToken } from '~/utils/auth'
+
+async function searchPost(apiBaseUrl, keyword) {
+  return await fetch(`${apiBaseUrl}/api/search/posts/title?keyword=${keyword}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${getToken()}`,
+    },
+  })
+}
+
+export default (apiBaseUrl) => {
+  return {
+    key: '#',
+    hint: async (keyword) => {
+      if (!keyword.trim()) return []
+      try {
+        const response = await searchPost(apiBaseUrl, keyword)
+        if (response.ok) {
+          const body = await response.json()
+          let value = ''
+          return (
+            body.map((item) => ({
+              value: `[${item.title}](/posts/${item.id})`,
+              html: `<div>${item.title}</div>`,
+            })) ?? []
+          )
+        } else {
+          return []
+        }
+      } catch {
+        return []
+      }
+    },
+  }
+}