feat: add message float components

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

backend/src/main/java/com/openisle/model/ReactionType.java

@@ -6,7 +6,9 @@ package com.openisle.model;
 public enum ReactionType {
     LIKE,
     DISLIKE,
+    SMILE,
     RECOMMEND,
+    CONGRATULATIONS,
     ANGRY,
     FLUSHED,
     STAR_STRUCK,
@@ -26,5 +28,5 @@ public enum ReactionType {
     CHINA,
     USA,
     JAPAN,
-    KOREA
+    KOREA,
 }

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,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 }"
+        :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" />
+    <MessageFloat />
   </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 MessageFloat from '~/components/MessageFloat.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
@@ -37,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/BaseTimeline.vue

@@ -8,7 +8,7 @@
       >
         <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <i v-else-if="item.icon" :class="item.icon"></i>
-        <span v-else-if="item.emoji" class="timeline-emoji">{{ item.emoji }}</span>
+        <img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>
@@ -74,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
+  width: 20px;
-  line-height: 1;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

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/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/components/ReactionsGroup.vue

@@ -3,20 +3,37 @@
     <div class="reactions-viewer">
       <div
         class="reactions-viewer-item-container"
-        @click="openPanel"
         @mouseenter="cancelHide"
         @mouseleave="scheduleHide"
       >
-        <template v-if="displayedReactions.length">
+        <template v-if="reactions.length < 4">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
+          <div
-            {{ reactionEmojiMap[r.type] }}
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-single-item"
+            :class="{ selected: userReacted(r.type) }"
+            @click="toggleReaction(r.type)"
+          >
+            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <div>{{ counts[r.type] }}</div>
+          </div>
+
+          <div class="reactions-viewer-item placeholder" @click="openPanel">
+            <i class="far fa-smile"></i>
+            <!-- <span class="reactions-viewer-item-placeholder-text">点击以表态</span> -->
+          </div>
+        </template>
+        <template v-else-if="displayedReactions.length">
+          <div
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-item"
+            @click="openPanel"
+          >
+            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
           </div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
-        <div v-else class="reactions-viewer-item placeholder">
-          <i class="far fa-smile"></i>
-          <span class="reactions-viewer-item-placeholder-text">点击以表态</span>
-        </div>
       </div>
     </div>
     <div class="make-reaction-container">
@@ -40,7 +57,9 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        <img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+          counts[t]
+        }}</span>
       </div>
     </div>
   </div>
@@ -217,13 +236,6 @@ onMounted(async () => {
   font-size: 16px;
 }
 
-.reactions-viewer-item.placeholder {
-  opacity: 0.5;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
 .reactions-viewer-item-placeholder-text {
   font-size: 14px;
   padding-left: 5px;
@@ -262,18 +274,16 @@ onMounted(async () => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 40px;
+  bottom: 50px;
-  left: -20px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  border-radius: 5px;
+  border-radius: 20px;
-  padding: 5px;
+  padding: 5px 10px;
-  max-width: 240px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   z-index: 10;
-  gap: 2px;
+  gap: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -287,6 +297,27 @@ onMounted(async () => {
   gap: 2px;
 }
 
+.reactions-viewer-item.placeholder,
+.reactions-viewer-single-item {
+  display: flex;
+  cursor: pointer;
+  flex-direction: row;
+  padding: 2px 10px;
+  gap: 5px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 10px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: var(--text-color);
+  align-items: center;
+}
+
+.reactions-viewer-item.placeholder,
+.reactions-viewer-single-item.selected {
+  background-color: var(--menu-selected-background-color);
+}
+
 .reaction-option.selected {
   background-color: var(--menu-selected-background-color);
 }

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/index.vue

@@ -652,6 +652,10 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 @container home-page (max-width: 768px) {
+  .topic-item-container {
+    margin-left: 0px;
+    gap: 0px;
+  }
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);
@@ -709,6 +713,16 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
   .topic-container {
     position: initial;
+    padding: 0;
+  }
+
+  .topic-item {
+    padding: 10px 20px;
+  }
+
+  .topic-select-container {
+    margin-left: 10px;
+    margin-top: 10px;
   }
 }
 </style>

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>
@@ -73,9 +81,11 @@ 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()
@@ -97,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)
 
@@ -115,6 +126,24 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
+function shrink() {
+  openMessageFloat(route.fullPath)
+  router.push('/')
+}
+
+function expand() {
+  const base = route.fullPath.replace(/(\?|&)float=1/, '')
+  window.top.location.href = base
+}
+
+function openUser(id) {
+  if (isFloat.value) {
+    window.top.location.href = `/users/${id}`
+  } else {
+    navigateTo(`/users/${id}`, { replace: true })
+  }
+}
+
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -156,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)
       },
     }))
 
@@ -236,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()
@@ -322,7 +351,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -388,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;

frontend_nuxt/pages/message-box/index.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="messages-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 class="tabs">
       <div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
         站内信
@@ -114,8 +122,8 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted, watch, onActivated } from 'vue'
+import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
 import { useWebSocket } from '~/composables/useWebSocket'
@@ -125,12 +133,15 @@ 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([])
 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()
@@ -143,6 +154,16 @@ 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) {
@@ -278,6 +299,21 @@ function goToConversation(id) {
 
 <style scoped>
 .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 {
@@ -287,13 +323,13 @@ function goToConversation(id) {
 }
 
 .tab {
-  padding: 8px 16px;
+  padding: 10px 20px;
   cursor: pointer;
 }
 
 .tab.active {
-  font-weight: 600;
   border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
 .loading-message {

frontend_nuxt/utils/reactions.js

@@ -1,25 +1,34 @@
-export const reactionEmojiMap = {
+const toCdnUrl = (emoji) => {
-  LIKE: '❤️',
+  const codepoints = Array.from(emoji)
-  DISLIKE: '👎',
+    .map((c) => c.codePointAt(0).toString(16))
-  RECOMMEND: '👏',
+    .join('_')
-  ANGRY: '😡',
+  return `https://fonts.gstatic.com/s/e/notoemoji/latest/${codepoints}/emoji.svg`
-  FLUSHED: '😳',
+}
-  STAR_STRUCK: '🤩',
+
-  ROFL: '🤣',
+export const reactionEmojiMap = {
-  HOLDING_BACK_TEARS: '🥹',
+  LIKE: toCdnUrl('❤️'),
-  MIND_BLOWN: '🤯',
+  SMILE: toCdnUrl('😁'),
-  POOP: '💩',
+  DISLIKE: toCdnUrl('👎'),
-  CLOWN: '🤡',
+  RECOMMEND: toCdnUrl('👏'),
-  SKULL: '☠️',
+  CONGRATULATIONS: toCdnUrl('🎉'),
-  FIRE: '🔥',
+  ANGRY: toCdnUrl('😡'),
-  EYES: '👀',
+  FLUSHED: toCdnUrl('😳'),
-  FROWN: '☹️',
+  STAR_STRUCK: toCdnUrl('🤩'),
-  HOT: '🥵',
+  ROFL: toCdnUrl('🤣'),
-  EAGLE: '🦅',
+  HOLDING_BACK_TEARS: toCdnUrl('🥹'),
-  SPIDER: '🕷️',
+  MIND_BLOWN: toCdnUrl('🤯'),
-  BAT: '🦇',
+  POOP: toCdnUrl('💩'),
-  CHINA: '🇨🇳',
+  CLOWN: toCdnUrl('🤡'),
-  USA: '🇺🇸',
+  SKULL: toCdnUrl('☠️'),
-  JAPAN: '🇯🇵',
+  FIRE: toCdnUrl('🔥'),
-  KOREA: '🇰🇷',
+  EYES: toCdnUrl('👀'),
+  FROWN: toCdnUrl('☹️'),
+  HOT: toCdnUrl('🥵'),
+  EAGLE: toCdnUrl('🦅'),
+  SPIDER: toCdnUrl('🕷️'),
+  BAT: toCdnUrl('🦇'),
+  CHINA: toCdnUrl('🇨🇳'),
+  USA: toCdnUrl('🇺🇸'),
+  JAPAN: toCdnUrl('🇯🇵'),
+  KOREA: toCdnUrl('🇰🇷'),
 }

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 []
+      }
+    },
+  }
+}