feat: add message float components

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

backend/src/main/java/com/openisle/config/ChannelInitializer.java

@@ -18,14 +18,14 @@ public class ChannelInitializer implements CommandLineRunner {
             chat.setChannel(true);
             chat.setName("吹水群");
             chat.setDescription("吹水聊天");
-            chat.setAvatar("/default-avatar.svg");
+            chat.setAvatar("https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/32647273e2334d14adfd4a6ce9db0643.jpeg");
             conversationRepository.save(chat);
 
             MessageConversation tech = new MessageConversation();
             tech.setChannel(true);
             tech.setName("技术讨论群");
             tech.setDescription("讨论技术相关话题");
-            tech.setAvatar("/default-avatar.svg");
+            tech.setAvatar("https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/5edde9a5864e471caa32491dbcdaa8b2.png");
             conversationRepository.save(tech);
         }
     }

backend/src/main/java/com/openisle/config/SecurityConfig.java

@@ -121,6 +121,7 @@ public class SecurityConfig {
                     .requestMatchers(HttpMethod.GET, "/api/reaction-types").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/activities/**").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/sitemap.xml").permitAll()
+                    .requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/rss").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/point-goods").permitAll()
                     .requestMatchers(HttpMethod.POST, "/api/point-goods").permitAll()
@@ -156,7 +157,7 @@ public class SecurityConfig {
                         uri.startsWith("/api/search") || uri.startsWith("/api/users") ||
                          uri.startsWith("/api/reaction-types") || uri.startsWith("/api/config") ||
                          uri.startsWith("/api/activities") || uri.startsWith("/api/push/public-key") ||
-                                uri.startsWith("/api/point-goods") ||
+                                uri.startsWith("/api/point-goods") || uri.startsWith("/api/channels") ||
                          uri.startsWith("/api/sitemap.xml") || uri.startsWith("/api/medals") ||
                          uri.startsWith("/api/rss"));
 

backend/src/main/java/com/openisle/controller/ChannelController.java

@@ -4,6 +4,7 @@ import com.openisle.dto.ChannelDto;
 import com.openisle.model.User;
 import com.openisle.repository.UserRepository;
 import com.openisle.service.ChannelService;
+import com.openisle.service.MessageService;
 import lombok.RequiredArgsConstructor;
 import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.*;
@@ -15,6 +16,7 @@ import java.util.List;
 @RequiredArgsConstructor
 public class ChannelController {
     private final ChannelService channelService;
+    private final MessageService messageService;
     private final UserRepository userRepository;
 
     private Long getCurrentUserId(Authentication auth) {
@@ -32,4 +34,9 @@ public class ChannelController {
     public ChannelDto joinChannel(@PathVariable Long channelId, Authentication auth) {
         return channelService.joinChannel(channelId, getCurrentUserId(auth));
     }
+
+    @GetMapping("/unread-count")
+    public long unreadCount(Authentication auth) {
+        return messageService.getUnreadChannelCount(getCurrentUserId(auth));
+    }
 }

backend/src/main/java/com/openisle/dto/ChannelDto.java

@@ -10,6 +10,7 @@ public class ChannelDto {
     private String name;
     private String description;
     private String avatar;
+    private MessageDto lastMessage;
     private long memberCount;
     private boolean joined;
     private long unreadCount;

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,
 }

backend/src/main/java/com/openisle/repository/MessageConversationRepository.java

@@ -1,23 +1,22 @@
 package com.openisle.repository;
 
 import com.openisle.model.MessageConversation;
-import org.springframework.data.jpa.repository.JpaRepository;
-import org.springframework.stereotype.Repository;
-
 import com.openisle.model.User;
-import java.util.List;
-
+import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.data.repository.query.Param;
+import org.springframework.stereotype.Repository;
 
-import java.util.Optional;
-import com.openisle.model.User;
 import java.util.List;
 
 @Repository
 public interface MessageConversationRepository extends JpaRepository<MessageConversation, Long> {
-    @Query("SELECT c FROM MessageConversation c JOIN c.participants p1 JOIN c.participants p2 WHERE p1.user = :user1 AND p2.user = :user2")
-    Optional<MessageConversation> findConversationByUsers(@Param("user1") User user1, @Param("user2") User user2);
+    @Query("SELECT c FROM MessageConversation c " +
+           "WHERE c.channel = false AND size(c.participants) = 2 " +
+           "AND EXISTS (SELECT 1 FROM c.participants p1 WHERE p1.user = :user1) " +
+           "AND EXISTS (SELECT 1 FROM c.participants p2 WHERE p2.user = :user2) " +
+           "ORDER BY c.createdAt DESC")
+    List<MessageConversation> findConversationsByUsers(@Param("user1") User user1, @Param("user2") User user2);
     
     @Query("SELECT DISTINCT c FROM MessageConversation c " +
            "JOIN c.participants p " +
@@ -32,4 +31,4 @@ public interface MessageConversationRepository extends JpaRepository<MessageConv
     List<MessageConversation> findByChannelTrue();
 
     long countByChannelTrue();
-}
+}

backend/src/main/java/com/openisle/service/ChannelService.java

@@ -1,6 +1,9 @@
 package com.openisle.service;
 
 import com.openisle.dto.ChannelDto;
+import com.openisle.dto.MessageDto;
+import com.openisle.dto.UserSummaryDto;
+import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.MessageParticipant;
 import com.openisle.model.User;
@@ -54,6 +57,9 @@ public class ChannelService {
         dto.setName(channel.getName());
         dto.setDescription(channel.getDescription());
         dto.setAvatar(channel.getAvatar());
+        if (channel.getLastMessage() != null) {
+            dto.setLastMessage(toMessageDto(channel.getLastMessage()));
+        }
         dto.setMemberCount(channel.getParticipants().size());
         boolean joined = channel.getParticipants().stream()
                 .anyMatch(p -> p.getUser().getId().equals(userId));
@@ -73,4 +79,20 @@ public class ChannelService {
         }
         return dto;
     }
+
+    private MessageDto toMessageDto(Message message) {
+        MessageDto dto = new MessageDto();
+        dto.setId(message.getId());
+        dto.setContent(message.getContent());
+        dto.setConversationId(message.getConversation().getId());
+        dto.setCreatedAt(message.getCreatedAt());
+
+        UserSummaryDto userDto = new UserSummaryDto();
+        userDto.setId(message.getSender().getId());
+        userDto.setUsername(message.getSender().getUsername());
+        userDto.setAvatar(message.getSender().getAvatar());
+        dto.setSender(userDto);
+
+        return dto;
+    }
 }

backend/src/main/java/com/openisle/service/MessageService.java

@@ -120,6 +120,9 @@ public class MessageService {
             long unreadCount = getUnreadMessageCount(participant.getUser().getId());
             String username = participant.getUser().getUsername();
             messagingTemplate.convertAndSendToUser(username, "/queue/unread-count", unreadCount);
+
+            long channelUnread = getUnreadChannelCount(participant.getUser().getId());
+            messagingTemplate.convertAndSendToUser(username, "/queue/channel-unread", channelUnread);
         }
 
         return message;
@@ -151,7 +154,8 @@ public class MessageService {
 
     private MessageConversation findOrCreateConversation(User user1, User user2) {
         log.info("Searching for existing conversation between {} and {}", user1.getUsername(), user2.getUsername());
-        return conversationRepository.findConversationByUsers(user1, user2)
+        return conversationRepository.findConversationsByUsers(user1, user2).stream()
+                .findFirst()
                 .orElseGet(() -> {
                     log.info("No existing conversation found. Creating a new one.");
                     MessageConversation conversation = new MessageConversation();
@@ -260,10 +264,26 @@ public class MessageService {
         List<MessageParticipant> participations = participantRepository.findByUserId(userId);
         long totalUnreadCount = 0;
         for (MessageParticipant p : participations) {
+            if (p.getConversation().isChannel()) continue;
             LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
             // 只计算别人发送给当前用户的未读消息
             totalUnreadCount += messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
         }
         return totalUnreadCount;
     }
+
+    @Transactional(readOnly = true)
+    public long getUnreadChannelCount(Long userId) {
+        List<MessageParticipant> participations = participantRepository.findByUserId(userId);
+        long unreadChannelCount = 0;
+        for (MessageParticipant p : participations) {
+            if (!p.getConversation().isChannel()) continue;
+            LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
+            long unread = messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
+            if (unread > 0) {
+                unreadChannelCount++;
+            }
+        }
+        return unreadChannelCount;
+    }
 }

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 />
-    <ConfirmDialog />
+    <GlobalPopups v-if="!isFloatMode" />
+    <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

@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline">
+  <div class="timeline" :class="{ 'hover-enabled': hover }">
     <div class="timeline-item" v-for="(item, idx) in items" :key="idx">
       <div
         class="timeline-icon"
@@ -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>
@@ -22,6 +22,7 @@ export default {
   name: 'BaseTimeline',
   props: {
     items: { type: Array, default: () => [] },
+    hover: { type: Boolean, default: false },
   },
 }
 </script>
@@ -41,7 +42,7 @@ export default {
   margin-top: 10px;
 }
 
-.timeline-item:hover {
+.hover-enabled .timeline-item:hover {
   background-color: var(--menu-selected-background-color);
   transition: background-color 0.2s;
   border-radius: 10px;
@@ -73,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
-  line-height: 1;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

frontend_nuxt/components/GlobalPopups.vue

@@ -7,6 +7,7 @@
       @close="closeMilkTeaPopup"
     />
     <NotificationSettingPopup :visible="showNotificationPopup" @close="closeNotificationPopup" />
+    <MessagePopup :visible="showMessagePopup" @close="closeMessagePopup" />
     <MedalPopup :visible="showMedalPopup" :medals="newMedals" @close="closeMedalPopup" />
 
     <ActivityPopup
@@ -22,6 +23,7 @@
 import ActivityPopup from '~/components/ActivityPopup.vue'
 import MedalPopup from '~/components/MedalPopup.vue'
 import NotificationSettingPopup from '~/components/NotificationSettingPopup.vue'
+import MessagePopup from '~/components/MessagePopup.vue'
 import { authState } from '~/utils/auth'
 
 const config = useRuntimeConfig()
@@ -33,6 +35,7 @@ const milkTeaIcon = ref('')
 const inviteCodeIcon = ref('')
 
 const showNotificationPopup = ref(false)
+const showMessagePopup = ref(false)
 const showMedalPopup = ref(false)
 const newMedals = ref([])
 
@@ -43,6 +46,9 @@ onMounted(async () => {
   await checkInviteCodeActivity()
   if (showInviteCodePopup.value) return
 
+  await checkMessageFeature()
+  if (showMessagePopup.value) return
+
   await checkNotificationSetting()
   if (showNotificationPopup.value) return
 
@@ -97,6 +103,18 @@ const closeMilkTeaPopup = () => {
   showMilkTeaPopup.value = false
 }
 
+const checkMessageFeature = async () => {
+  if (!import.meta.client) return
+  if (!authState.loggedIn) return
+  if (localStorage.getItem('messageFeaturePopupShown')) return
+  showMessagePopup.value = true
+}
+const closeMessagePopup = () => {
+  if (!import.meta.client) return
+  localStorage.setItem('messageFeaturePopupShown', 'true')
+  showMessagePopup.value = false
+}
+
 const checkNotificationSetting = async () => {
   if (!import.meta.client) return
   if (!authState.loggedIn) return

frontend_nuxt/components/HeaderComponent.vue

@@ -6,7 +6,10 @@
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
             <i class="fas fa-bars"></i>
           </button>
-          <span v-if="isMobile && unreadMessageCount > 0" class="menu-unread-dot"></span>
+          <span
+            v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"
+            class="menu-unread-dot"
+          ></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
           <img
@@ -53,6 +56,7 @@
               <span v-if="unreadMessageCount > 0" class="unread-badge">{{
                 unreadMessageCount
               }}</span>
+              <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
 
@@ -85,6 +89,7 @@ import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
+import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import { useIsMobile } from '~/utils/screen'
 import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { toast } from '~/main'
@@ -103,6 +108,7 @@ const props = defineProps({
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
+const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
@@ -143,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 || '生成邀请链接失败')
@@ -227,8 +245,10 @@ onMounted(async () => {
   }
   const updateUnread = async () => {
     if (authState.loggedIn) {
-      // Initialize the unread count composable
       fetchUnreadCount()
+      fetchChannelUnread()
+    } else {
+      fetchChannelUnread()
     }
   }
 
@@ -413,6 +433,16 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
+.unread-dot {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ff4d4f;
+}
+
 .rss-icon {
   animation: rss-glow 2s 3;
 }

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

@@ -0,0 +1,74 @@
+<template>
+  <BasePopup :visible="visible" @close="close">
+    <div class="message-popup">
+      <div class="message-popup-title">📨 站内信上线啦</div>
+      <div class="message-popup-text">现在可以在右上角使用站内信功能</div>
+      <div class="message-popup-actions">
+        <div class="message-popup-close" @click="close">知道了</div>
+        <div class="message-popup-button" @click="gotoMessage">去看看</div>
+      </div>
+    </div>
+  </BasePopup>
+</template>
+
+<script setup>
+import BasePopup from '~/components/BasePopup.vue'
+
+defineProps({
+  visible: { type: Boolean, default: false },
+})
+const emit = defineEmits(['close'])
+
+const gotoMessage = () => {
+  emit('close')
+  navigateTo('/message-box', { replace: true })
+}
+const close = () => emit('close')
+</script>
+
+<style scoped>
+.message-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+  min-width: 200px;
+}
+
+.message-popup-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.message-popup-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.message-popup-button {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.message-popup-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.message-popup-close {
+  cursor: pointer;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+}
+
+.message-popup-close:hover {
+  text-decoration: underline;
+}
+</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">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
-            {{ reactionEmojiMap[r.type] }}
+        <template v-if="reactions.length < 4">
+          <div
+            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;
-  left: -20px;
+  bottom: 50px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  border-radius: 5px;
-  padding: 5px;
-  max-width: 240px;
+  border-radius: 20px;
+  padding: 5px 10px;
   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/useChannelsUnreadCount.js

@@ -0,0 +1,92 @@
+import { ref, computed, watch } from 'vue'
+import { useWebSocket } from './useWebSocket'
+import { getToken } from '~/utils/auth'
+
+const count = ref(0)
+let isInitialized = false
+let wsSubscription = null
+
+export function useChannelsUnreadCount() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
+  const { subscribe, isConnected, connect } = useWebSocket()
+
+  const fetchChannelUnread = async () => {
+    const token = getToken()
+    if (!token) {
+      count.value = 0
+      return
+    }
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/channels/unread-count`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        count.value = data
+      }
+    } catch (e) {
+      console.error('Failed to fetch channel unread count:', e)
+    }
+  }
+
+  const initialize = () => {
+    const token = getToken()
+    if (!token) {
+      count.value = 0
+      return
+    }
+    fetchChannelUnread()
+    if (!isConnected.value) {
+      connect(token)
+    }
+    setupWebSocketListener()
+  }
+
+  const setupWebSocketListener = () => {
+    if (!wsSubscription) {
+      watch(
+        isConnected,
+        (newValue) => {
+          if (newValue && !wsSubscription) {
+            wsSubscription = subscribe('/user/queue/channel-unread', (message) => {
+              const unread = parseInt(message.body, 10)
+              if (!isNaN(unread)) {
+                count.value = unread
+              }
+            })
+          }
+        },
+        { immediate: true },
+      )
+    }
+  }
+
+  const setFromList = (channels) => {
+    count.value = Array.isArray(channels) ? channels.filter((c) => c.unreadCount > 0).length : 0
+  }
+
+  const hasUnread = computed(() => count.value > 0)
+
+  const token = getToken()
+  if (token) {
+    if (!isInitialized) {
+      isInitialized = true
+      initialize()
+    } else {
+      fetchChannelUnread()
+      if (!isConnected.value) {
+        connect(token)
+      }
+      setupWebSocketListener()
+    }
+  }
+
+  return {
+    count,
+    hasUnread,
+    fetchChannelUnread,
+    initialize,
+    setFromList,
+  }
+}

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/composables/useWebSocket.js

@@ -55,7 +55,10 @@ const subscribe = (destination, callback) => {
   try {
     const subscription = client.value.subscribe(destination, (message) => {
       try {
-        if (destination.includes('/queue/unread-count')) {
+        if (
+          destination.includes('/queue/unread-count') ||
+          destination.includes('/queue/channel-unread')
+        ) {
           callback(message)
         } else {
           const parsedMessage = JSON.parse(message.body)

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>
@@ -20,10 +28,15 @@
             {{ loadingMore ? '加载中...' : '查看更多消息' }}
           </div>
         </div>
-        <BaseTimeline :items="messages">
+        <BaseTimeline :items="messages" hover>
           <template #item="{ item }">
-            <div class="message-timestamp">
-              {{ TimeManager.format(item.createdAt) }}
+            <div class="message-header">
+              <div class="user-name">
+                {{ item.sender.username }}
+              </div>
+              <div class="message-timestamp">
+                {{ TimeManager.format(item.createdAt) }}
+              </div>
             </div>
             <div class="message-content">
               <div class="info-content-text" v-html="renderMarkdown(item.content)"></div>
@@ -64,15 +77,19 @@ import { renderMarkdown } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
+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 messages = ref([])
@@ -90,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)
 
@@ -108,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.
 
@@ -149,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)
       },
     }))
 
@@ -229,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()
@@ -253,6 +289,7 @@ async function markConversationAsRead() {
     })
     // After marking as read, refresh the global unread count
     refreshGlobalUnreadCount()
+    refreshChannelUnread()
   } catch (e) {
     console.error('Failed to mark conversation as read', e)
   }
@@ -314,7 +351,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -380,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;
@@ -448,10 +500,22 @@ onUnmounted(() => {
 .message-timestamp {
   font-size: 11px;
   color: var(--text-color-secondary);
-  margin-top: 5px;
   opacity: 0.6;
 }
 
+.message-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
 .message-item.sent {
   align-self: flex-end;
   flex-direction: row-reverse;

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'">
         站内信
@@ -94,10 +102,17 @@
                 {{ ch.name }}
                 <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
               </div>
-              <div class="message-time">成员 {{ ch.memberCount }}</div>
+              <div class="message-time">
+                {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+              </div>
             </div>
             <div class="last-message-row">
-              <div class="last-message">{{ ch.description }}</div>
+              <div class="last-message">
+                {{
+                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                }}
+              </div>
+              <div class="member-count">成员 {{ ch.memberCount }}</div>
             </div>
           </div>
         </div>
@@ -107,32 +122,48 @@
 </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'
 import { useUnreadCount } from '~/composables/useUnreadCount'
+import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 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()
 const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
+const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
+  useChannelsUnreadCount()
 let subscription = null
 
 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) {
@@ -185,7 +216,9 @@ async function fetchChannels() {
       headers: { Authorization: `Bearer ${token}` },
     })
     if (!response.ok) throw new Error('无法加载频道')
-    channels.value = await response.json()
+    const data = await response.json()
+    channels.value = data
+    setChannelUnreadFromList(data)
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -224,6 +257,7 @@ onActivated(async () => {
   if (currentUser.value) {
     await fetchConversations()
     refreshGlobalUnreadCount() // Refresh global count when entering the list
+    refreshChannelUnread()
     const token = getToken()
     if (token && !isConnected.value) {
       connect(token)
@@ -244,6 +278,9 @@ watch(isConnected, (newValue) => {
 
     subscription = subscribe(destination, (message) => {
       fetchConversations()
+      if (activeTab.value === 'channels') {
+        fetchChannels()
+      }
     })
   }
 })
@@ -262,8 +299,21 @@ function goToConversation(id) {
 
 <style scoped>
 .messages-container {
-  margin: 0 auto;
-  padding: 20px;
+  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 {
@@ -273,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 {
@@ -291,6 +341,8 @@ function goToConversation(id) {
 
 .search-container {
   margin-bottom: 24px;
+  margin-left: 20px;
+  margin-right: 20px;
 }
 
 .messages-header {
@@ -330,6 +382,8 @@ function goToConversation(id) {
 .conversation-item {
   display: flex;
   align-items: center;
+  margin-left: 20px;
+  margin-right: 20px;
   padding: 8px 10px;
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -369,6 +423,12 @@ function goToConversation(id) {
   color: var(--text-color);
 }
 
+.member-count {
+  font-size: 12px;
+  color: gray;
+  flex-shrink: 0;
+}
+
 .message-time {
   font-size: 12px;
   color: gray;
@@ -415,8 +475,9 @@ function goToConversation(id) {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .messages-container {
-    padding: 10px 10px;
+  .conversation-item {
+    margin-left: 10px;
+    margin-right: 10px;
   }
 
   .messages-title {

frontend_nuxt/utils/reactions.js

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