feat: support message replies and reactions

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

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

@@ -5,7 +5,6 @@ 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;
@@ -55,16 +54,16 @@ public class MessageController {
 
     @PostMapping
     public ResponseEntity<MessageDto> sendMessage(@RequestBody MessageRequest req, Authentication auth) {
-        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent());
-        return ResponseEntity.ok(toDto(message));
+        Message message = messageService.sendMessage(getCurrentUserId(auth), req.getRecipientId(), req.getContent(), req.getReplyToId());
+        return ResponseEntity.ok(messageService.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());
-        return ResponseEntity.ok(toDto(message));
+        Message message = messageService.sendMessageToConversation(getCurrentUserId(auth), conversationId, req.getContent(), req.getReplyToId());
+        return ResponseEntity.ok(messageService.toDto(message));
     }
 
     @PostMapping("/conversations/{conversationId}/read")
@@ -79,23 +78,6 @@ 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)));
@@ -105,6 +87,7 @@ public class MessageController {
     static class MessageRequest {
         private Long recipientId;
         private String content;
+        private Long replyToId;
 
         public Long getRecipientId() {
             return recipientId;
@@ -121,10 +104,19 @@ 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;
@@ -133,5 +125,13 @@ 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,4 +57,17 @@ 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,6 +2,7 @@ package com.openisle.dto;
 
 import lombok.Data;
 import java.time.LocalDateTime;
+import java.util.List;
 
 @Data
 public class MessageDto {
@@ -10,4 +11,6 @@ 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 or comment.
+ * DTO representing a reaction on a post, comment or message.
  */
 @Data
 public class ReactionDto {
@@ -13,6 +13,7 @@ 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,6 +19,9 @@ 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,6 +29,10 @@ 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 or comment.
+ * Reaction entity representing a user's reaction to a post, comment or message.
  */
 @Entity
 @Getter
@@ -16,7 +16,8 @@ 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
@@ -39,6 +40,10 @@ 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/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/ReactionRepository.java

@@ -1,6 +1,7 @@
 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;
@@ -15,8 +16,10 @@ 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,14 +4,18 @@ 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;
@@ -34,9 +38,11 @@ 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) {
+    public Message sendMessage(Long senderId, Long recipientId, String content, Long replyToId) {
         log.info("Attempting to send message from user {} to user {}", senderId, recipientId);
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
@@ -51,6 +57,11 @@ 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());
 
@@ -83,7 +94,7 @@ public class MessageService {
     }
 
     @Transactional
-    public Message sendMessageToConversation(Long senderId, Long conversationId, String content) {
+    public Message sendMessageToConversation(Long senderId, Long conversationId, String content, Long replyToId) {
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
         MessageConversation conversation = conversationRepository.findById(conversationId)
@@ -102,6 +113,11 @@ 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);
@@ -128,7 +144,7 @@ public class MessageService {
         return message;
     }
 
-    private MessageDto toDto(Message message) {
+    public MessageDto toDto(Message message) {
         MessageDto dto = new MessageDto();
         dto.setId(message.getId());
         dto.setContent(message.getContent());
@@ -141,6 +157,25 @@ 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,10 +6,12 @@ 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;
@@ -24,6 +26,7 @@ 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;
 
@@ -77,6 +80,26 @@ 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,6 +5,7 @@ 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;
@@ -78,6 +79,27 @@ 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,9 +15,10 @@ 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, notif, email);
+        ReactionService service = new ReactionService(reactionRepo, userRepo, postRepo, commentRepo, messageRepo, notif, email);
         org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
 
         User user = new User();

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

@@ -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/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>
@@ -119,7 +138,9 @@ const toggleReaction = async (type) => {
   const url =
     props.contentType === 'post'
       ? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
-      : `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+      : props.contentType === 'comment'
+        ? `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
+        : `${API_BASE_URL}/api/messages/${props.contentId}/reactions`
 
   // optimistic update
   const existingIdx = reactions.value.findIndex(
@@ -217,13 +238,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 +276,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 +299,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/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

@@ -20,7 +20,7 @@
             {{ loadingMore ? '加载中...' : '查看更多消息' }}
           </div>
         </div>
-        <BaseTimeline :items="messages">
+        <BaseTimeline :items="messages" hover>
           <template #item="{ item }">
             <div class="message-header">
               <div class="user-name">
@@ -30,9 +30,21 @@
                 {{ 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">
@@ -46,6 +58,11 @@
     </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>
@@ -65,8 +82,9 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown } from '~/utils/markdown'
+import { renderMarkdown, stripMarkdownLength } 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'
@@ -97,6 +115,7 @@ const loadingMore = ref(false)
 let scrollInterval = null
 const conversationName = ref('')
 const isChannel = ref(false)
+const replyTo = ref(null)
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
@@ -115,6 +134,10 @@ function handleAvatarError(event) {
   event.target.src = '/default-avatar.svg'
 }
 
+function setReply(message) {
+  replyTo.value = message
+}
+
 // No changes needed here, as renderMarkdown is now imported.
 // The old function is removed.
 
@@ -208,7 +231,7 @@ async function sendMessage(content, clearInput) {
             'Content-Type': 'application/json',
             Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify({ content }),
+          body: JSON.stringify({ content, replyToId: replyTo.value?.id }),
         },
       )
     } else {
@@ -226,6 +249,7 @@ async function sendMessage(content, clearInput) {
         body: JSON.stringify({
           recipientId: recipient.id,
           content: content,
+          replyToId: replyTo.value?.id,
         }),
       })
     }
@@ -240,6 +264,7 @@ async function sendMessage(content, clearInput) {
       },
     })
     clearInput()
+    replyTo.value = null
     setTimeout(() => {
       scrollToBottom()
     }, 100)
@@ -524,4 +549,39 @@ 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

@@ -287,13 +287,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 = {
-  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 []
+      }
+    },
+  }
+}