feat: add message float components

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

@@ -5,6 +5,7 @@ import com.openisle.dto.ConversationDto;
 import com.openisle.dto.CreateConversationRequest;
 import com.openisle.dto.CreateConversationResponse;
 import com.openisle.dto.MessageDto;
+import com.openisle.dto.UserSummaryDto;
 import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.User;
@@ -54,16 +55,16 @@ public class MessageController {
 
     @PostMapping
     public ResponseEntity<MessageDto> sendMessage(@RequestBody MessageRequest req, Authentication auth) {
-        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent(), req.getReplyToId());
+        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent());
-        return ResponseEntity.ok(messageService.toDto(message));
+        return ResponseEntity.ok(toDto(message));
     }
 
     @PostMapping("/conversations/{conversationId}/messages")
     public ResponseEntity<MessageDto> sendMessageToConversation(@PathVariable Long conversationId,
                                                                 @RequestBody ChannelMessageRequest req,
                                                                 Authentication auth) {
-        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent(), req.getReplyToId());
+        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent());
-        return ResponseEntity.ok(messageService.toDto(message));
+        return ResponseEntity.ok(toDto(message));
     }
 
     @PostMapping("/conversations/{conversationId}/read")
@@ -78,6 +79,23 @@ public class MessageController {
         return ResponseEntity.ok(new CreateConversationResponse(conversation.getId()));
     }
 
+    private MessageDto toDto(Message message) {
+        MessageDto dto = new MessageDto();
+        dto.setId(message.getId());
+        dto.setContent(message.getContent());
+        dto.setCreatedAt(message.getCreatedAt());
+
+        dto.setConversationId(message.getConversation().getId());
+
+        UserSummaryDto senderDto = new UserSummaryDto();
+        senderDto.setId(message.getSender().getId());
+        senderDto.setUsername(message.getSender().getUsername());
+        senderDto.setAvatar(message.getSender().getAvatar());
+        dto.setSender(senderDto);
+
+        return dto;
+    }
+
     @GetMapping("/unread-count")
     public ResponseEntity<Long> getUnreadCount(Authentication auth) {
         return ResponseEntity.ok(messageService.getUnreadMessageCount(getCurrentUserId(auth)));
@@ -87,7 +105,6 @@ public class MessageController {
     static class MessageRequest {
         private Long recipientId;
         private String content;
-        private Long replyToId;
 
         public Long getRecipientId() {
             return recipientId;
@@ -104,19 +121,10 @@ public class MessageController {
         public void setContent(String content) {
             this.content = content;
         }
-
-        public Long getReplyToId() {
-            return replyToId;
-        }
-
-        public void setReplyToId(Long replyToId) {
-            this.replyToId = replyToId;
-        }
     }
 
     static class ChannelMessageRequest {
         private String content;
-        private Long replyToId;
 
         public String getContent() {
             return content;
@@ -125,13 +133,5 @@ public class MessageController {
         public void setContent(String content) {
             this.content = content;
         }
-
-        public Long getReplyToId() {
-            return replyToId;
-        }
-
-        public void setReplyToId(Long replyToId) {
-            this.replyToId = replyToId;
-        }
     }
 }

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

@@ -57,17 +57,4 @@ public class ReactionController {
         pointService.awardForReactionOfComment(auth.getName(), commentId);
         return ResponseEntity.ok(dto);
     }
-
-    @PostMapping("/messages/{messageId}/reactions")
-    public ResponseEntity<ReactionDto> reactToMessage(@PathVariable Long messageId,
-                                                      @RequestBody ReactionRequest req,
-                                                      Authentication auth) {
-        Reaction reaction = reactionService.reactToMessage(auth.getName(), messageId, req.getType());
-        if (reaction == null) {
-            return ResponseEntity.noContent().build();
-        }
-        ReactionDto dto = reactionMapper.toDto(reaction);
-        dto.setReward(levelService.awardForReaction(auth.getName()));
-        return ResponseEntity.ok(dto);
-    }
 }

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

@@ -2,7 +2,6 @@ package com.openisle.dto;
 
 import lombok.Data;
 import java.time.LocalDateTime;
-import java.util.List;
 
 @Data
 public class MessageDto {
@@ -11,6 +10,4 @@ public class MessageDto {
     private UserSummaryDto sender;
     private Long conversationId;
     private LocalDateTime createdAt;
-    private MessageDto replyTo;
-    private List<ReactionDto> reactions;
 }

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

@@ -4,7 +4,7 @@ import com.openisle.model.ReactionType;
 import lombok.Data;
 
 /**
- * DTO representing a reaction on a post, comment or message.
+ * DTO representing a reaction on a post or comment.
  */
 @Data
 public class ReactionDto {
@@ -13,7 +13,6 @@ public class ReactionDto {
     private String user;
     private Long postId;
     private Long commentId;
-    private Long messageId;
     private int reward;
 }
 

backend/src/main/java/com/openisle/mapper/ReactionMapper.java

@@ -19,9 +19,6 @@ public class ReactionMapper {
         if (reaction.getComment() != null) {
             dto.setCommentId(reaction.getComment().getId());
         }
-        if (reaction.getMessage() != null) {
-            dto.setMessageId(reaction.getMessage().getId());
-        }
         dto.setReward(0);
         return dto;
     }

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

@@ -29,10 +29,6 @@ public class Message {
     @Column(nullable = false, columnDefinition = "TEXT")
     private String content;
 
-    @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "reply_to_id")
-    private Message replyTo;
-
     @CreationTimestamp
     @Column(nullable = false, updatable = false)
     private LocalDateTime createdAt;

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

@@ -7,7 +7,7 @@ import lombok.Setter;
 import org.hibernate.annotations.CreationTimestamp;
 
 /**
- * Reaction entity representing a user's reaction to a post, comment or message.
+ * Reaction entity representing a user's reaction to a post or comment.
  */
 @Entity
 @Getter
@@ -16,8 +16,7 @@ import org.hibernate.annotations.CreationTimestamp;
 @Table(name = "reactions",
        uniqueConstraints = {
            @UniqueConstraint(columnNames = {"user_id", "post_id", "type"}),
-           @UniqueConstraint(columnNames = {"user_id", "comment_id", "type"}),
+           @UniqueConstraint(columnNames = {"user_id", "comment_id", "type"})
-           @UniqueConstraint(columnNames = {"user_id", "message_id", "type"})
        })
 public class Reaction {
     @Id
@@ -40,10 +39,6 @@ public class Reaction {
     @JoinColumn(name = "comment_id")
     private Comment comment;
 
-    @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "message_id")
-    private Message message;
-
     @CreationTimestamp
     @Column(nullable = false, updatable = false,
             columnDefinition = "DATETIME(6) DEFAULT CURRENT_TIMESTAMP(6)")

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

@@ -1,7 +1,6 @@
 package com.openisle.repository;
 
 import com.openisle.model.Comment;
-import com.openisle.model.Message;
 import com.openisle.model.Post;
 import com.openisle.model.Reaction;
 import com.openisle.model.User;
@@ -16,10 +15,8 @@ import java.util.Optional;
 public interface ReactionRepository extends JpaRepository<Reaction, Long> {
     Optional<Reaction> findByUserAndPostAndType(User user, Post post, com.openisle.model.ReactionType type);
     Optional<Reaction> findByUserAndCommentAndType(User user, Comment comment, com.openisle.model.ReactionType type);
-    Optional<Reaction> findByUserAndMessageAndType(User user, Message message, com.openisle.model.ReactionType type);
     List<Reaction> findByPost(Post post);
     List<Reaction> findByComment(Comment comment);
-    List<Reaction> findByMessage(Message message);
 
     @Query("SELECT r.post.id FROM Reaction r WHERE r.post IS NOT NULL AND r.post.author.username = :username AND r.type = com.openisle.model.ReactionType.LIKE GROUP BY r.post.id ORDER BY COUNT(r.id) DESC")
     List<Long> findTopPostIds(@Param("username") String username, Pageable pageable);

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

@@ -4,18 +4,14 @@ import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.MessageParticipant;
 import com.openisle.model.User;
-import com.openisle.model.Reaction;
 import com.openisle.repository.MessageConversationRepository;
 import com.openisle.repository.MessageParticipantRepository;
 import com.openisle.repository.MessageRepository;
 import com.openisle.repository.UserRepository;
-import com.openisle.repository.ReactionRepository;
 import com.openisle.dto.ConversationDetailDto;
 import com.openisle.dto.ConversationDto;
 import com.openisle.dto.MessageDto;
-import com.openisle.dto.ReactionDto;
 import com.openisle.dto.UserSummaryDto;
-import com.openisle.mapper.ReactionMapper;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.data.domain.Page;
@@ -38,11 +34,9 @@ public class MessageService {
     private final MessageParticipantRepository participantRepository;
     private final UserRepository userRepository;
     private final SimpMessagingTemplate messagingTemplate;
-    private final ReactionRepository reactionRepository;
-    private final ReactionMapper reactionMapper;
 
     @Transactional
-    public Message sendMessage(Long senderId, Long recipientId, String content, Long replyToId) {
+    public Message sendMessage(Long senderId, Long recipientId, String content) {
         log.info("Attempting to send message from user {} to user {}", senderId, recipientId);
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
@@ -57,11 +51,6 @@ public class MessageService {
         message.setConversation(conversation);
         message.setSender(sender);
         message.setContent(content);
-        if (replyToId != null) {
-            Message replyTo = messageRepository.findById(replyToId)
-                    .orElseThrow(() -> new IllegalArgumentException("Message not found"));
-            message.setReplyTo(replyTo);
-        }
         message = messageRepository.save(message);
         log.info("Message saved with ID: {}", message.getId());
 
@@ -94,7 +83,7 @@ public class MessageService {
     }
 
     @Transactional
-    public Message sendMessageToConversation(Long senderId, Long conversationId, String content, Long replyToId) {
+    public Message sendMessageToConversation(Long senderId, Long conversationId, String content) {
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
         MessageConversation conversation = conversationRepository.findById(conversationId)
@@ -113,11 +102,6 @@ public class MessageService {
         message.setConversation(conversation);
         message.setSender(sender);
         message.setContent(content);
-        if (replyToId != null) {
-            Message replyTo = messageRepository.findById(replyToId)
-                    .orElseThrow(() -> new IllegalArgumentException("Message not found"));
-            message.setReplyTo(replyTo);
-        }
         message = messageRepository.save(message);
 
         conversation.setLastMessage(message);
@@ -144,7 +128,7 @@ public class MessageService {
         return message;
     }
 
-    public MessageDto toDto(Message message) {
+    private MessageDto toDto(Message message) {
         MessageDto dto = new MessageDto();
         dto.setId(message.getId());
         dto.setContent(message.getContent());
@@ -157,25 +141,6 @@ public class MessageService {
         userSummaryDto.setAvatar(message.getSender().getAvatar());
         dto.setSender(userSummaryDto);
 
-        if (message.getReplyTo() != null) {
-            Message reply = message.getReplyTo();
-            MessageDto replyDto = new MessageDto();
-            replyDto.setId(reply.getId());
-            replyDto.setContent(reply.getContent());
-            UserSummaryDto replySender = new UserSummaryDto();
-            replySender.setId(reply.getSender().getId());
-            replySender.setUsername(reply.getSender().getUsername());
-            replySender.setAvatar(reply.getSender().getAvatar());
-            replyDto.setSender(replySender);
-            dto.setReplyTo(replyDto);
-        }
-
-        java.util.List<Reaction> reactions = reactionRepository.findByMessage(message);
-        java.util.List<ReactionDto> reactionDtos = reactions.stream()
-                .map(reactionMapper::toDto)
-                .collect(Collectors.toList());
-        dto.setReactions(reactionDtos);
-
         return dto;
     }
 

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

@@ -6,12 +6,10 @@ import com.openisle.model.Reaction;
 import com.openisle.model.ReactionType;
 import com.openisle.model.User;
 import com.openisle.model.NotificationType;
-import com.openisle.model.Message;
 import com.openisle.repository.CommentRepository;
 import com.openisle.repository.PostRepository;
 import com.openisle.repository.ReactionRepository;
 import com.openisle.repository.UserRepository;
-import com.openisle.repository.MessageRepository;
 import com.openisle.service.NotificationService;
 import com.openisle.service.EmailSender;
 import lombok.RequiredArgsConstructor;
@@ -26,7 +24,6 @@ public class ReactionService {
     private final UserRepository userRepository;
     private final PostRepository postRepository;
     private final CommentRepository commentRepository;
-    private final MessageRepository messageRepository;
     private final NotificationService notificationService;
     private final EmailSender emailSender;
 
@@ -80,26 +77,6 @@ public class ReactionService {
         return reaction;
     }
 
-    @Transactional
-    public Reaction reactToMessage(String username, Long messageId, ReactionType type) {
-        User user = userRepository.findByUsername(username)
-                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
-        Message message = messageRepository.findById(messageId)
-                .orElseThrow(() -> new IllegalArgumentException("Message not found"));
-        java.util.Optional<Reaction> existing =
-                reactionRepository.findByUserAndMessageAndType(user, message, type);
-        if (existing.isPresent()) {
-            reactionRepository.delete(existing.get());
-            return null;
-        }
-        Reaction reaction = new Reaction();
-        reaction.setUser(user);
-        reaction.setMessage(message);
-        reaction.setType(type);
-        reaction = reactionRepository.save(reaction);
-        return reaction;
-    }
-
     public java.util.List<Reaction> getReactionsForPost(Long postId) {
         Post post = postRepository.findById(postId)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));

backend/src/test/java/com/openisle/controller/ReactionControllerTest.java

@@ -5,7 +5,6 @@ import com.openisle.model.Post;
 import com.openisle.model.Reaction;
 import com.openisle.model.ReactionType;
 import com.openisle.model.User;
-import com.openisle.model.Message;
 import com.openisle.service.ReactionService;
 import com.openisle.service.LevelService;
 import com.openisle.mapper.ReactionMapper;
@@ -79,27 +78,6 @@ class ReactionControllerTest {
                 .andExpect(jsonPath("$.commentId").value(2));
     }
 
-    @Test
-    void reactToMessage() throws Exception {
-        User user = new User();
-        user.setUsername("u3");
-        Message message = new Message();
-        message.setId(3L);
-        Reaction reaction = new Reaction();
-        reaction.setId(3L);
-        reaction.setUser(user);
-        reaction.setMessage(message);
-        reaction.setType(ReactionType.LIKE);
-        Mockito.when(reactionService.reactToMessage(eq("u3"), eq(3L), eq(ReactionType.LIKE))).thenReturn(reaction);
-
-        mockMvc.perform(post("/api/messages/3/reactions")
-                        .contentType("application/json")
-                        .content("{\"type\":\"LIKE\"}")
-                        .principal(new UsernamePasswordAuthenticationToken("u3", "p")))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$.messageId").value(3));
-    }
-
     @Test
     void listReactionTypes() throws Exception {
         mockMvc.perform(get("/api/reaction-types"))

backend/src/test/java/com/openisle/service/ReactionServiceTest.java

@@ -15,10 +15,9 @@ class ReactionServiceTest {
         UserRepository userRepo = mock(UserRepository.class);
         PostRepository postRepo = mock(PostRepository.class);
         CommentRepository commentRepo = mock(CommentRepository.class);
-        MessageRepository messageRepo = mock(MessageRepository.class);
         NotificationService notif = mock(NotificationService.class);
         EmailSender email = mock(EmailSender.class);
-        ReactionService service = new ReactionService(reactionRepo, userRepo, postRepo, commentRepo, messageRepo, notif, email);
+        ReactionService service = new ReactionService(reactionRepo, userRepo, postRepo, commentRepo, notif, email);
         org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
 
         User user = new User();

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

@@ -138,9 +138,7 @@ const toggleReaction = async (type) => {
   const url =
     props.contentType === 'post'
       ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
-      : props.contentType === 'comment'
+      : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
-        ? `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
-        : `${API_BASE_URL}/api/messages/${props.contentId}/reactions`
 
   // optimistic update
   const existingIdx = reactions.value.findIndex(

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>
@@ -30,21 +38,9 @@
                 {{ TimeManager.format(item.createdAt) }}
               </div>
             </div>
-            <div v-if="item.replyTo" class="reply-preview">
-              <div class="reply-author">{{ item.replyTo.sender.username }}</div>
-              <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
-            </div>
             <div class="message-content">
               <div class="info-content-text" v-html="renderMarkdown(item.content)"></div>
             </div>
-            <ReactionsGroup
-              :model-value="item.reactions"
-              content-type="message"
-              :content-id="item.id"
-              @update:modelValue="(v) => (item.reactions = v)"
-            >
-              <div class="reply-btn" @click="setReply(item)">回复</div>
-            </ReactionsGroup>
           </template>
         </BaseTimeline>
         <div class="empty-container">
@@ -58,11 +54,6 @@
     </div>
 
     <div class="message-input-area">
-      <div v-if="replyTo" class="active-reply">
-        正在回复 {{ replyTo.sender.username }}:
-        {{ stripMarkdownLength(replyTo.content, 50) }}
-        <i class="fas fa-times close-reply" @click="replyTo = null"></i>
-      </div>
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
   </div>
@@ -82,18 +73,19 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
+import { renderMarkdown } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
-import ReactionsGroup from '~/components/ReactionsGroup.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()
@@ -115,7 +107,7 @@ const loadingMore = ref(false)
 let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
-const replyTo = ref(null)
+const isFloat = computed(() => route.query.float === '1')
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
@@ -134,8 +126,22 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
-function setReply(message) {
+function shrink() {
-  replyTo.value = message
+  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.
@@ -179,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)
       },
     }))
 
@@ -231,7 +237,7 @@ async function sendMessage(content, clearInput) {
             'Content-Type': 'application/json',
             Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify({ content, replyToId: replyTo.value?.id }),
+          body: JSON.stringify({ content }),
         },
       )
     } else {
@@ -249,7 +255,6 @@ async function sendMessage(content, clearInput) {
         body: JSON.stringify({
           recipientId: recipient.id,
           content: content,
-          replyToId: replyTo.value?.id,
         }),
       })
     }
@@ -260,11 +265,10 @@ async function sendMessage(content, clearInput) {
       ...newMessage,
       src: newMessage.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+        openUser(newMessage.sender.id)
       },
     })
     clearInput()
-    replyTo.value = null
     setTimeout(() => {
       scrollToBottom()
     }, 100)
@@ -347,7 +351,7 @@ watch(isConnected, (newValue) => {
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
           // 实时收到消息时自动标记为已读
@@ -413,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;
@@ -549,39 +568,4 @@ onUnmounted(() => {
   margin-left: 10px;
   margin-right: 10px;
 }
-
-.reply-preview {
-  padding: 5px 10px;
-  border-left: 2px solid var(--primary-color);
-  margin-bottom: 5px;
-  font-size: 13px;
-}
-
-.reply-author {
-  font-weight: bold;
-  margin-bottom: 2px;
-}
-
-.reply-btn {
-  cursor: pointer;
-  padding: 4px;
-  opacity: 0.6;
-}
-
-.reply-btn:hover {
-  opacity: 1;
-}
-
-.active-reply {
-  background-color: var(--bg-color-soft);
-  padding: 5px 10px;
-  border-left: 3px solid var(--primary-color);
-  margin-bottom: 5px;
-  font-size: 13px;
-}
-
-.close-reply {
-  margin-left: 8px;
-  cursor: pointer;
-}
 </style>

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 {