feat: create BaseTabs component

feat: add Nuxt image component with LQIP placeholder

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
+  <BaseImage alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="200">
   <br>
-  高效的开源社区前后端端平台
+  高效的开源社区前后端平台
   <br><br><br>
-  <img alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
+  <BaseImage alt="Image" src="https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/22752cfac5a04a9c90c41995b9f55fed.png" width="1200">
 </p>
 
 ## 💡 简介

backend/pom.xml

@@ -26,6 +26,10 @@
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
     </dependency>
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-starter-websocket</artifactId>
+    </dependency>
     <dependency>
       <groupId>org.slf4j</groupId>
       <artifactId>slf4j-api</artifactId>

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

@@ -0,0 +1,32 @@
+package com.openisle.config;
+
+import com.openisle.model.MessageConversation;
+import com.openisle.repository.MessageConversationRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.boot.CommandLineRunner;
+import org.springframework.stereotype.Component;
+
+@Component
+@RequiredArgsConstructor
+public class ChannelInitializer implements CommandLineRunner {
+    private final MessageConversationRepository conversationRepository;
+
+    @Override
+    public void run(String... args) {
+        if (conversationRepository.countByChannelTrue() == 0) {
+            MessageConversation chat = new MessageConversation();
+            chat.setChannel(true);
+            chat.setName("吹水群");
+            chat.setDescription("吹水聊天");
+            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("https://openisle-1307107697.cos.accelerate.myqcloud.com/dynamic_assert/5edde9a5864e471caa32491dbcdaa8b2.png");
+            conversationRepository.save(tech);
+        }
+    }
+}

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

@@ -99,11 +99,13 @@ public class SecurityConfig {
     @Bean
     public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
         http.csrf(csrf -> csrf.disable())
-                .cors(Customizer.withDefaults())         // 让 Spring 自带 CorsFilter 处理预检
+                .cors(Customizer.withDefaults())
-            .sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
+                .headers(h -> h.frameOptions(f -> f.sameOrigin()))
+                .sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
             .exceptionHandling(eh -> eh.accessDeniedHandler(customAccessDeniedHandler))
             .authorizeHttpRequests(auth -> auth
                     .requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()
+                    .requestMatchers("/api/ws/**", "/api/sockjs/**").permitAll()
                     .requestMatchers(HttpMethod.POST, "/api/auth/**").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/posts/**").permitAll()
                     .requestMatchers(HttpMethod.GET, "/api/comments/**").permitAll()
@@ -119,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()
@@ -154,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"));
 
@@ -172,7 +175,8 @@ public class SecurityConfig {
                         response.getWriter().write("{\"error\": \"Invalid or expired token\"}");
                         return;
                     }
-                } else if (!uri.startsWith("/api/auth") && !publicGet) {
+                } else if (!uri.startsWith("/api/auth") && !publicGet
+                        && !uri.startsWith("/api/ws") && !uri.startsWith("/api/sockjs")) {
                     response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                     response.setContentType("application/json");
                     response.getWriter().write("{\"error\": \"Missing token\"}");

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

@@ -0,0 +1,110 @@
+package com.openisle.config;
+
+import com.openisle.service.JwtService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.messaging.Message;
+import org.springframework.messaging.MessageChannel;
+import org.springframework.messaging.simp.config.ChannelRegistration;
+import org.springframework.messaging.simp.config.MessageBrokerRegistry;
+import org.springframework.messaging.simp.stomp.StompCommand;
+import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
+import org.springframework.messaging.support.ChannelInterceptor;
+import org.springframework.messaging.support.MessageHeaderAccessor;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
+import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
+
+@Configuration
+@EnableWebSocketMessageBroker
+@RequiredArgsConstructor
+public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
+    
+    private final JwtService jwtService;
+    private final UserDetailsService userDetailsService;
+    @Value("${app.website-url}")
+    private String websiteUrl;
+
+    @Override
+    public void configureMessageBroker(MessageBrokerRegistry config) {
+        // Enable a simple memory-based message broker to carry the messages back to the client on destinations prefixed with "/topic" and "/queue"
+        config.enableSimpleBroker("/topic", "/queue");
+        // Set user destination prefix for personal messages
+        config.setUserDestinationPrefix("/user");
+        // Designates the "/app" prefix for messages that are bound for @MessageMapping-annotated methods.
+        config.setApplicationDestinationPrefixes("/app");
+    }
+
+    @Override
+    public void registerStompEndpoints(StompEndpointRegistry registry) {
+        // 1) 原生 WebSocket（不带 SockJS）
+        registry.addEndpoint("/api/ws")
+                .setAllowedOriginPatterns(
+                        "https://staging.open-isle.com",
+                        "https://www.staging.open-isle.com",
+                        websiteUrl,
+                        websiteUrl.replace("://www.", "://"),
+                        "http://localhost:*",
+                        "http://127.0.0.1:*",
+                        "http://192.168.7.98:*",
+                        "http://30.211.97.238:*"
+                );
+
+        // 2) SockJS 回退：单独路径
+        registry.addEndpoint("/api/sockjs")
+                .setAllowedOriginPatterns(
+                        "https://staging.open-isle.com",
+                        "https://www.staging.open-isle.com",
+                        websiteUrl,
+                        websiteUrl.replace("://www.", "://"),
+                        "http://localhost:*",
+                        "http://127.0.0.1:*",
+                        "http://192.168.7.98:*",
+                        "http://30.211.97.238:*"
+                )
+                .withSockJS()
+                .setWebSocketEnabled(true)
+                .setSessionCookieNeeded(false);
+    }
+
+
+
+    @Override
+    public void configureClientInboundChannel(ChannelRegistration registration) {
+        registration.interceptors(new ChannelInterceptor() {
+            @Override
+            public Message<?> preSend(Message<?> message, MessageChannel channel) {
+                StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
+                
+                if (StompCommand.CONNECT.equals(accessor.getCommand())) {
+                    System.out.println("WebSocket CONNECT command received");
+                    String authHeader = accessor.getFirstNativeHeader("Authorization");
+                    System.out.println("Authorization header: " + (authHeader != null ? "present" : "missing"));
+                    
+                    if (authHeader != null && authHeader.startsWith("Bearer ")) {
+                        String token = authHeader.substring(7);
+                        try {
+                            String username = jwtService.validateAndGetSubject(token);
+                            System.out.println("JWT validated for user: " + username);
+                            var userDetails = userDetailsService.loadUserByUsername(username);
+                            Authentication auth = new UsernamePasswordAuthenticationToken(
+                                userDetails, null, userDetails.getAuthorities());
+                            accessor.setUser(auth);
+                            System.out.println("WebSocket user set: " + username);
+                        } catch (Exception e) {
+                            System.err.println("JWT validation failed: " + e.getMessage());
+                        }
+                    }
+                } else if (StompCommand.SUBSCRIBE.equals(accessor.getCommand())) {
+                    System.out.println("WebSocket SUBSCRIBE to: " + accessor.getDestination());
+                    System.out.println("WebSocket user during subscribe: " + (accessor.getUser() != null ? accessor.getUser().getName() : "null"));
+                }
+                return message;
+            }
+        });
+    }
+}

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

@@ -0,0 +1,42 @@
+package com.openisle.controller;
+
+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.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/channels")
+@RequiredArgsConstructor
+public class ChannelController {
+    private final ChannelService channelService;
+    private final MessageService messageService;
+    private final UserRepository userRepository;
+
+    private Long getCurrentUserId(Authentication auth) {
+        User user = userRepository.findByUsername(auth.getName())
+                .orElseThrow(() -> new IllegalArgumentException("User not found"));
+        return user.getId();
+    }
+
+    @GetMapping
+    public List<ChannelDto> listChannels(Authentication auth) {
+        return channelService.listChannels(getCurrentUserId(auth));
+    }
+
+    @PostMapping("/{channelId}/join")
+    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/controller/MessageController.java

@@ -0,0 +1,137 @@
+package com.openisle.controller;
+
+import com.openisle.dto.ConversationDetailDto;
+import com.openisle.dto.ConversationDto;
+import com.openisle.dto.CreateConversationRequest;
+import com.openisle.dto.CreateConversationResponse;
+import com.openisle.dto.MessageDto;
+import com.openisle.model.Message;
+import com.openisle.model.MessageConversation;
+import com.openisle.model.User;
+import com.openisle.repository.UserRepository;
+import com.openisle.service.MessageService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/messages")
+@RequiredArgsConstructor
+public class MessageController {
+
+    private final MessageService messageService;
+    private final UserRepository userRepository;
+
+    // This is a placeholder for getting the current user's ID
+    private Long getCurrentUserId(Authentication auth) {
+        User user = userRepository.findByUsername(auth.getName()).orElseThrow(() -> new IllegalArgumentException("Sender not found"));
+        // In a real application, you would get this from the Authentication object
+        return user.getId();
+    }
+
+    @GetMapping("/conversations")
+    public ResponseEntity<List<ConversationDto>> getConversations(Authentication auth) {
+        List<ConversationDto> conversations = messageService.getConversations(getCurrentUserId(auth));
+        return ResponseEntity.ok(conversations);
+    }
+
+    @GetMapping("/conversations/{conversationId}")
+    public ResponseEntity<ConversationDetailDto> getMessages(@PathVariable Long conversationId,
+                                                               @RequestParam(defaultValue = "0") int page,
+                                                               @RequestParam(defaultValue = "20") int size,
+                                                               Authentication auth) {
+        Pageable pageable = PageRequest.of(page, size, Sort.by("createdAt").descending());
+        ConversationDetailDto conversationDetails = messageService.getConversationDetails(conversationId, getCurrentUserId(auth), pageable);
+        return ResponseEntity.ok(conversationDetails);
+    }
+
+    @PostMapping
+    public ResponseEntity<MessageDto> sendMessage(@RequestBody MessageRequest req, Authentication auth) {
+        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(), req.getReplyToId());
+        return ResponseEntity.ok(messageService.toDto(message));
+    }
+
+    @PostMapping("/conversations/{conversationId}/read")
+    public ResponseEntity<Void> markAsRead(@PathVariable Long conversationId, Authentication auth) {
+        messageService.markConversationAsRead(conversationId, getCurrentUserId(auth));
+        return ResponseEntity.ok().build();
+    }
+
+    @PostMapping("/conversations")
+    public ResponseEntity<CreateConversationResponse> findOrCreateConversation(@RequestBody CreateConversationRequest req, Authentication auth) {
+        MessageConversation conversation = messageService.findOrCreateConversation(getCurrentUserId(auth), req.getRecipientId());
+        return ResponseEntity.ok(new CreateConversationResponse(conversation.getId()));
+    }
+
+    @GetMapping("/unread-count")
+    public ResponseEntity<Long> getUnreadCount(Authentication auth) {
+        return ResponseEntity.ok(messageService.getUnreadMessageCount(getCurrentUserId(auth)));
+    }
+
+    // A simple request DTO
+    static class MessageRequest {
+        private Long recipientId;
+        private String content;
+        private Long replyToId;
+
+        public Long getRecipientId() {
+            return recipientId;
+        }
+
+        public void setRecipientId(Long recipientId) {
+            this.recipientId = recipientId;
+        }
+
+        public String getContent() {
+            return content;
+        }
+
+        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;
+        }
+
+        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/PostController.java

@@ -41,7 +41,8 @@ public class PostController {
         Post post = postService.createPost(auth.getName(), req.getCategoryId(),
                 req.getTitle(), req.getContent(), req.getTagIds(),
                 req.getType(), req.getPrizeDescription(), req.getPrizeIcon(),
-                req.getPrizeCount(), req.getStartTime(), req.getEndTime());
+                req.getPrizeCount(), req.getPointCost(),
+                req.getStartTime(), req.getEndTime());
         draftService.deleteDraft(auth.getName());
         PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
         dto.setReward(levelService.awardForPost(auth.getName()));
@@ -171,4 +172,27 @@ public class PostController {
         return postService.listPostsByLatestReply(ids, tids, page, pageSize)
                 .stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
     }
+
+    @GetMapping("/featured")
+    public List<PostSummaryDto> featuredPosts(@RequestParam(value = "categoryId", required = false) Long categoryId,
+                                       @RequestParam(value = "categoryIds", required = false) List<Long> categoryIds,
+                                       @RequestParam(value = "tagId", required = false) Long tagId,
+                                       @RequestParam(value = "tagIds", required = false) List<Long> tagIds,
+                                       @RequestParam(value = "page", required = false) Integer page,
+                                       @RequestParam(value = "pageSize", required = false) Integer pageSize,
+                                       Authentication auth) {
+        List<Long> ids = categoryIds;
+        if (categoryId != null) {
+            ids = java.util.List.of(categoryId);
+        }
+        List<Long> tids = tagIds;
+        if (tagId != null) {
+            tids = java.util.List.of(tagId);
+        }
+        if (auth != null) {
+            userVisitService.recordVisit(auth.getName());
+        }
+        return postService.listFeaturedPosts(ids, tids, page, pageSize)
+                .stream().map(postMapper::toSummaryDto).collect(Collectors.toList());
+    }
 }

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/controller/RssController.java

@@ -41,7 +41,7 @@ public class RssController {
 
     // 兼容 Markdown/HTML 两类图片写法（用于 enclosure）
     private static final Pattern MD_IMAGE = Pattern.compile("!\\[[^\\]]*\\]\\(([^)]+)\\)");
-    private static final Pattern HTML_IMAGE = Pattern.compile("<img[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>");
+    private static final Pattern HTML_IMAGE = Pattern.compile("<BaseImage[^>]+src=[\"']?([^\"'>]+)[\"']?[^>]*>");
 
     private static final DateTimeFormatter RFC1123 = DateTimeFormatter.RFC_1123_DATE_TIME;
 

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

@@ -105,6 +105,17 @@ public class UserController {
                 .collect(java.util.stream.Collectors.toList());
     }
 
+    @GetMapping("/{identifier}/subscribed-posts")
+    public java.util.List<PostMetaDto> subscribedPosts(@PathVariable("identifier") String identifier,
+                                                       @RequestParam(value = "limit", required = false) Integer limit) {
+        int l = limit != null ? limit : defaultPostsLimit;
+        User user = userService.findByIdentifier(identifier).orElseThrow();
+        return subscriptionService.getSubscribedPosts(user.getUsername()).stream()
+                .limit(l)
+                .map(userMapper::toMetaDto)
+                .collect(java.util.stream.Collectors.toList());
+    }
+
     @GetMapping("/{identifier}/replies")
     public java.util.List<CommentInfoDto> userReplies(@PathVariable("identifier") String identifier,
                                                       @RequestParam(value = "limit", required = false) Integer limit) {

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

@@ -0,0 +1,17 @@
+package com.openisle.dto;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class ChannelDto {
+    private Long id;
+    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/dto/ConversationDetailDto.java

@@ -0,0 +1,16 @@
+package com.openisle.dto;
+
+import lombok.Data;
+import org.springframework.data.domain.Page;
+
+import java.util.List;
+
+@Data
+public class ConversationDetailDto {
+    private Long id;
+    private String name;
+    private boolean channel;
+    private String avatar;
+    private List<UserSummaryDto> participants;
+    private Page<MessageDto> messages;
+}

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

@@ -0,0 +1,20 @@
+package com.openisle.dto;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Getter
+@Setter
+public class ConversationDto {
+    private Long id;
+    private String name;
+    private boolean channel;
+    private String avatar;
+    private MessageDto lastMessage;
+    private List<UserSummaryDto> participants;
+    private LocalDateTime createdAt;
+    private long unreadCount;
+}

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

@@ -0,0 +1,8 @@
+package com.openisle.dto;
+
+import lombok.Data;
+
+@Data
+public class CreateConversationRequest {
+    private Long recipientId;
+}

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

@@ -0,0 +1,12 @@
+package com.openisle.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreateConversationResponse {
+    private Long conversationId;
+}

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

@@ -0,0 +1,12 @@
+package com.openisle.dto;
+
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class FeaturedMedalDto extends MedalDto {
+    private long currentFeaturedCount;
+    private long targetFeaturedCount;
+}
+

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

@@ -10,6 +10,7 @@ public class LotteryDto {
     private String prizeDescription;
     private String prizeIcon;
     private int prizeCount;
+    private int pointCost;
     private LocalDateTime startTime;
     private LocalDateTime endTime;
     private List<AuthorDto> participants;

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

@@ -0,0 +1,16 @@
+package com.openisle.dto;
+
+import lombok.Data;
+import java.time.LocalDateTime;
+import java.util.List;
+
+@Data
+public class MessageDto {
+    private Long id;
+    private String content;
+    private UserSummaryDto sender;
+    private Long conversationId;
+    private LocalDateTime createdAt;
+    private MessageDto replyTo;
+    private List<ReactionDto> reactions;
+}

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

@@ -23,6 +23,7 @@ public class PostRequest {
     private String prizeDescription;
     private String prizeIcon;
     private Integer prizeCount;
+    private Integer pointCost;
     private LocalDateTime startTime;
     private LocalDateTime endTime;
 }

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/dto/UserSummaryDto.java

@@ -0,0 +1,10 @@
+package com.openisle.dto;
+
+import lombok.Data;
+
+@Data
+public class UserSummaryDto {
+    private Long id;
+    private String username;
+    private String avatar;
+}

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

@@ -86,6 +86,7 @@ public class PostMapper {
             l.setPrizeDescription(lp.getPrizeDescription());
             l.setPrizeIcon(lp.getPrizeIcon());
             l.setPrizeCount(lp.getPrizeCount());
+            l.setPointCost(lp.getPointCost());
             l.setStartTime(lp.getStartTime());
             l.setEndTime(lp.getEndTime());
             l.setParticipants(lp.getParticipants().stream().map(userMapper::toAuthorDto).collect(Collectors.toList()));

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/LotteryPost.java

@@ -26,6 +26,9 @@ public class LotteryPost extends Post {
     @Column(nullable = false)
     private int prizeCount;
 
+    @Column(nullable = false)
+    private int pointCost;
+
     @Column
     private LocalDateTime startTime;
 

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

@@ -3,6 +3,7 @@ package com.openisle.model;
 public enum MedalType {
     COMMENT,
     POST,
+    FEATURED,
     CONTRIBUTOR,
     SEED,
     PIONEER

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

@@ -0,0 +1,39 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.time.LocalDateTime;
+
+@Entity
+@Getter
+@Setter
+@NoArgsConstructor
+@Table(name = "messages")
+public class Message {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne(optional = false, fetch = FetchType.LAZY)
+    @JoinColumn(name = "conversation_id")
+    private MessageConversation conversation;
+
+    @ManyToOne(optional = false, fetch = FetchType.LAZY)
+    @JoinColumn(name = "sender_id")
+    private User sender;
+
+    @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/MessageConversation.java

@@ -0,0 +1,48 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.time.LocalDateTime;
+import java.util.HashSet;
+import java.util.Set;
+
+@Entity
+@Getter
+@Setter
+@NoArgsConstructor
+@Table(name = "message_conversations")
+public class MessageConversation {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    // Indicates whether this conversation represents a public channel
+    @Column(nullable = false)
+    private boolean channel = false;
+
+    // Channel metadata
+    private String name;
+
+    @Column(columnDefinition = "TEXT")
+    private String description;
+
+    private String avatar;
+
+    @CreationTimestamp
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "last_message_id")
+    private Message lastMessage;
+
+    @OneToMany(mappedBy = "conversation", cascade = CascadeType.ALL, orphanRemoval = true)
+    private Set<MessageParticipant> participants = new HashSet<>();
+
+    @OneToMany(mappedBy = "conversation", cascade = CascadeType.ALL, orphanRemoval = true)
+    private Set<Message> messages = new HashSet<>();
+}

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

@@ -0,0 +1,30 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Entity
+@Getter
+@Setter
+@NoArgsConstructor
+@Table(name = "message_participants")
+public class MessageParticipant {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne(optional = false, fetch = FetchType.LAZY)
+    @JoinColumn(name = "conversation_id")
+    private MessageConversation conversation;
+
+    @ManyToOne(optional = false, fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id")
+    private User user;
+
+    @Column
+    private LocalDateTime lastReadAt;
+}

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

@@ -40,6 +40,8 @@ public enum NotificationType {
     LOTTERY_WIN,
     /** Your lottery post was drawn */
     LOTTERY_DRAW,
+    /** Your post was featured */
+    POST_FEATURED,
     /** You were mentioned in a post or comment */
     MENTION
 }

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

@@ -6,6 +6,9 @@ public enum PointHistoryType {
     POST_LIKED,
     COMMENT_LIKED,
     INVITE,
+    FEATURE,
     SYSTEM_ONLINE,
-    REDEEM
+    REDEEM,
+    LOTTERY_JOIN,
+    LOTTERY_REWARD
 }

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/MessageConversationRepository.java

@@ -0,0 +1,34 @@
+package com.openisle.repository;
+
+import com.openisle.model.MessageConversation;
+import com.openisle.model.User;
+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.List;
+
+@Repository
+public interface MessageConversationRepository extends JpaRepository<MessageConversation, Long> {
+    @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 " +
+           "LEFT JOIN FETCH c.lastMessage lm " +
+           "LEFT JOIN FETCH lm.sender " +
+           "LEFT JOIN FETCH c.participants cp " +
+           "LEFT JOIN FETCH cp.user " +
+           "WHERE p.user.id = :userId " +
+           "ORDER BY COALESCE(lm.createdAt, c.createdAt) DESC")
+    List<MessageConversation> findConversationsByUserIdOrderByLastMessageDesc(@Param("userId") Long userId);
+
+    List<MessageConversation> findByChannelTrue();
+
+    long countByChannelTrue();
+}

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

@@ -0,0 +1,14 @@
+package com.openisle.repository;
+
+import com.openisle.model.MessageParticipant;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Optional;
+
+@Repository
+public interface MessageParticipantRepository extends JpaRepository<MessageParticipant, Long> {
+    Optional<MessageParticipant> findByConversationIdAndUserId(Long conversationId, Long userId);
+    List<MessageParticipant> findByUserId(Long userId);
+}

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

@@ -0,0 +1,21 @@
+package com.openisle.repository;
+
+import com.openisle.model.Message;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Repository
+public interface MessageRepository extends JpaRepository<Message, Long> {
+    List<Message> findByConversationIdOrderByCreatedAtAsc(Long conversationId);
+
+    Page<Message> findByConversationId(Long conversationId, Pageable pageable);
+
+    long countByConversationIdAndCreatedAtAfter(Long conversationId, java.time.LocalDateTime createdAt);
+    
+    // 只计算不是指定用户发送的消息（即别人发给当前用户的消息）
+    long countByConversationIdAndCreatedAtAfterAndSenderIdNot(Long conversationId, java.time.LocalDateTime createdAt, Long senderId);
+}

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

@@ -97,6 +97,8 @@ public interface PostRepository extends JpaRepository<Post, Long> {
 
     long countDistinctByTags_Id(Long tagId);
 
+    long countByAuthor_IdAndRssExcludedFalse(Long userId);
+
     @Query("SELECT t.id, COUNT(DISTINCT p) FROM Post p JOIN p.tags t WHERE t.id IN :tagIds GROUP BY t.id")
     List<Object[]> countPostsByTagIds(@Param("tagIds") List<Long> tagIds);
 

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/ChannelService.java

@@ -0,0 +1,98 @@
+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;
+import com.openisle.repository.MessageConversationRepository;
+import com.openisle.repository.MessageParticipantRepository;
+import com.openisle.repository.MessageRepository;
+import com.openisle.repository.UserRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+public class ChannelService {
+    private final MessageConversationRepository conversationRepository;
+    private final MessageParticipantRepository participantRepository;
+    private final MessageRepository messageRepository;
+    private final UserRepository userRepository;
+
+    @Transactional(readOnly = true)
+    public List<ChannelDto> listChannels(Long userId) {
+        List<MessageConversation> channels = conversationRepository.findByChannelTrue();
+        return channels.stream().map(c -> toDto(c, userId)).collect(Collectors.toList());
+    }
+
+    @Transactional
+    public ChannelDto joinChannel(Long channelId, Long userId) {
+        MessageConversation channel = conversationRepository.findById(channelId)
+                .orElseThrow(() -> new IllegalArgumentException("Channel not found"));
+        User user = userRepository.findById(userId)
+                .orElseThrow(() -> new IllegalArgumentException("User not found"));
+        participantRepository.findByConversationIdAndUserId(channelId, userId)
+                .orElseGet(() -> {
+                    MessageParticipant p = new MessageParticipant();
+                    p.setConversation(channel);
+                    p.setUser(user);
+                    MessageParticipant saved = participantRepository.save(p);
+                    channel.getParticipants().add(saved);
+                    return saved;
+                });
+        return toDto(channel, userId);
+    }
+
+    private ChannelDto toDto(MessageConversation channel, Long userId) {
+        ChannelDto dto = new ChannelDto();
+        dto.setId(channel.getId());
+        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));
+        dto.setJoined(joined);
+        if (joined) {
+            MessageParticipant participant = channel.getParticipants().stream()
+                    .filter(p -> p.getUser().getId().equals(userId))
+                    .findFirst().orElse(null);
+            LocalDateTime lastRead = participant.getLastReadAt() == null
+                    ? LocalDateTime.of(1970, 1, 1, 0, 0)
+                    : participant.getLastReadAt();
+            long unread = messageRepository
+                    .countByConversationIdAndCreatedAtAfterAndSenderIdNot(channel.getId(), lastRead, userId);
+            dto.setUnreadCount(unread);
+        } else {
+            dto.setUnreadCount(0);
+        }
+        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/MedalService.java

@@ -6,6 +6,7 @@ import com.openisle.dto.MedalDto;
 import com.openisle.dto.PostMedalDto;
 import com.openisle.dto.SeedUserMedalDto;
 import com.openisle.dto.PioneerMedalDto;
+import com.openisle.dto.FeaturedMedalDto;
 import com.openisle.model.MedalType;
 import com.openisle.model.User;
 import com.openisle.repository.CommentRepository;
@@ -74,6 +75,23 @@ public class MedalService {
         postMedal.setSelected(selected == MedalType.POST);
         medals.add(postMedal);
 
+        FeaturedMedalDto featuredMedal = new FeaturedMedalDto();
+        featuredMedal.setIcon("https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_rss.png");
+        featuredMedal.setTitle("精选作者");
+        featuredMedal.setDescription("至少有1篇文章被收录为精选");
+        featuredMedal.setType(MedalType.FEATURED);
+        featuredMedal.setTargetFeaturedCount(1);
+        if (user != null) {
+            long count = postRepository.countByAuthor_IdAndRssExcludedFalse(user.getId());
+            featuredMedal.setCurrentFeaturedCount(count);
+            featuredMedal.setCompleted(count >= 1);
+        } else {
+            featuredMedal.setCurrentFeaturedCount(0);
+            featuredMedal.setCompleted(false);
+        }
+        featuredMedal.setSelected(selected == MedalType.FEATURED);
+        medals.add(featuredMedal);
+
         ContributorMedalDto contributorMedal = new ContributorMedalDto();
         contributorMedal.setIcon("https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_coder.png");
         contributorMedal.setTitle("贡献者");
@@ -141,6 +159,8 @@ public class MedalService {
             user.setDisplayMedal(MedalType.COMMENT);
         } else if (postRepository.countByAuthor_Id(user.getId()) >= POST_TARGET) {
             user.setDisplayMedal(MedalType.POST);
+        } else if (postRepository.countByAuthor_IdAndRssExcludedFalse(user.getId()) >= 1) {
+            user.setDisplayMedal(MedalType.FEATURED);
         } else if (contributorService.getContributionLines(user.getUsername()) >= CONTRIBUTION_TARGET) {
             user.setDisplayMedal(MedalType.CONTRIBUTOR);
         } else if (userRepository.countByCreatedAtBefore(user.getCreatedAt()) < PIONEER_LIMIT) {

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

@@ -0,0 +1,324 @@
+package com.openisle.service;
+
+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;
+import org.springframework.data.domain.Pageable;
+import org.springframework.messaging.simp.SimpMessagingTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class MessageService {
+
+    private final MessageRepository messageRepository;
+    private final MessageConversationRepository conversationRepository;
+    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) {
+        log.info("Attempting to send message from user {} to user {}", senderId, recipientId);
+        User sender = userRepository.findById(senderId)
+                .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
+        User recipient = userRepository.findById(recipientId)
+                .orElseThrow(() -> new IllegalArgumentException("Recipient not found"));
+
+        log.info("Finding or creating conversation for users {} and {}", sender.getUsername(), recipient.getUsername());
+        MessageConversation conversation = findOrCreateConversation(sender, recipient);
+        log.info("Conversation found or created with ID: {}", conversation.getId());
+
+        Message message = new Message();
+        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());
+
+        conversation.setLastMessage(message);
+        conversationRepository.save(conversation);
+        log.info("Conversation {} updated with last message ID {}", conversation.getId(), message.getId());
+
+        // Broadcast the new message to subscribed clients
+        MessageDto messageDto = toDto(message);
+        String conversationDestination = "/topic/conversation/" + conversation.getId();
+        messagingTemplate.convertAndSend(conversationDestination, messageDto);
+        log.info("Message {} broadcasted to destination: {}", message.getId(), conversationDestination);
+
+        // Also notify the recipient on their personal channel to update the conversation list
+        String userDestination = "/topic/user/" + recipient.getId() + "/messages";
+        messagingTemplate.convertAndSend(userDestination, messageDto);
+        log.info("Message {} notification sent to destination: {}", message.getId(), userDestination);
+
+        // Notify recipient of new unread count
+        long unreadCount = getUnreadMessageCount(recipientId);
+        log.info("Calculating unread count for user {}: {}", recipientId, unreadCount);
+        
+        // Send using username instead of user ID for WebSocket routing
+        String recipientUsername = recipient.getUsername();
+        messagingTemplate.convertAndSendToUser(recipientUsername, "/queue/unread-count", unreadCount);
+        log.info("Sent unread count {} to user {} (username: {}) via WebSocket destination: /user/{}/queue/unread-count",
+                unreadCount, recipientId, recipientUsername, recipientUsername);
+
+        return message;
+    }
+
+    @Transactional
+    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)
+                .orElseThrow(() -> new IllegalArgumentException("Conversation not found"));
+
+        // Join the conversation if not already a participant (useful for channels)
+        participantRepository.findByConversationIdAndUserId(conversationId, senderId)
+                .orElseGet(() -> {
+                    MessageParticipant p = new MessageParticipant();
+                    p.setConversation(conversation);
+                    p.setUser(sender);
+                    return participantRepository.save(p);
+                });
+
+        Message message = new Message();
+        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);
+        conversationRepository.save(conversation);
+
+        MessageDto messageDto = toDto(message);
+        String conversationDestination = "/topic/conversation/" + conversation.getId();
+        messagingTemplate.convertAndSend(conversationDestination, messageDto);
+
+        // Notify all participants except sender for updates
+        for (MessageParticipant participant : conversation.getParticipants()) {
+            if (participant.getUser().getId().equals(senderId)) continue;
+            String userDestination = "/topic/user/" + participant.getUser().getId() + "/messages";
+            messagingTemplate.convertAndSend(userDestination, messageDto);
+
+            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;
+    }
+
+    public MessageDto toDto(Message message) {
+        MessageDto dto = new MessageDto();
+        dto.setId(message.getId());
+        dto.setContent(message.getContent());
+        dto.setConversationId(message.getConversation().getId());
+        dto.setCreatedAt(message.getCreatedAt());
+
+        UserSummaryDto userSummaryDto = new UserSummaryDto();
+        userSummaryDto.setId(message.getSender().getId());
+        userSummaryDto.setUsername(message.getSender().getUsername());
+        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;
+    }
+
+    public MessageConversation findOrCreateConversation(Long user1Id, Long user2Id) {
+        User user1 = userRepository.findById(user1Id)
+                .orElseThrow(() -> new IllegalArgumentException("User1 not found"));
+        User user2 = userRepository.findById(user2Id)
+                .orElseThrow(() -> new IllegalArgumentException("User2 not found"));
+        return findOrCreateConversation(user1, user2);
+    }
+
+    private MessageConversation findOrCreateConversation(User user1, User user2) {
+        log.info("Searching for existing conversation between {} and {}", user1.getUsername(), user2.getUsername());
+        return conversationRepository.findConversationsByUsers(user1, user2).stream()
+                .findFirst()
+                .orElseGet(() -> {
+                    log.info("No existing conversation found. Creating a new one.");
+                    MessageConversation conversation = new MessageConversation();
+                    conversation = conversationRepository.save(conversation);
+                    log.info("New conversation created with ID: {}", conversation.getId());
+
+                    MessageParticipant participant1 = new MessageParticipant();
+                    participant1.setConversation(conversation);
+                    participant1.setUser(user1);
+                    participantRepository.save(participant1);
+                    log.info("Participant {} added to conversation {}", user1.getUsername(), conversation.getId());
+
+                    MessageParticipant participant2 = new MessageParticipant();
+                    participant2.setConversation(conversation);
+                    participant2.setUser(user2);
+                    participantRepository.save(participant2);
+                    log.info("Participant {} added to conversation {}", user2.getUsername(), conversation.getId());
+
+                    return conversation;
+                });
+    }
+
+    @Transactional(readOnly = true)
+    public List<ConversationDto> getConversations(Long userId) {
+        List<MessageConversation> conversations = conversationRepository.findConversationsByUserIdOrderByLastMessageDesc(userId);
+        return conversations.stream()
+                .filter(c -> !c.isChannel())
+                .map(c -> toDto(c, userId))
+                .collect(Collectors.toList());
+    }
+
+    private ConversationDto toDto(MessageConversation conversation, Long userId) {
+        ConversationDto dto = new ConversationDto();
+        dto.setId(conversation.getId());
+        dto.setChannel(conversation.isChannel());
+        dto.setName(conversation.getName());
+        dto.setAvatar(conversation.getAvatar());
+        dto.setCreatedAt(conversation.getCreatedAt());
+        if (conversation.getLastMessage() != null) {
+            dto.setLastMessage(toDto(conversation.getLastMessage()));
+        }
+        dto.setParticipants(conversation.getParticipants().stream()
+                .map(p -> {
+                    UserSummaryDto userDto = new UserSummaryDto();
+                    userDto.setId(p.getUser().getId());
+                    userDto.setUsername(p.getUser().getUsername());
+                    userDto.setAvatar(p.getUser().getAvatar());
+                    return userDto;
+                })
+                .collect(Collectors.toList()));
+
+        MessageParticipant self = conversation.getParticipants().stream()
+                .filter(p -> p.getUser().getId().equals(userId))
+                .findFirst()
+                .orElseThrow(() -> new IllegalStateException("Participant not found in conversation"));
+
+        LocalDateTime lastRead = self.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : self.getLastReadAt();
+        // 只计算别人发送给当前用户的未读消息
+        long unreadCount = messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(conversation.getId(), lastRead, userId);
+        dto.setUnreadCount(unreadCount);
+
+        return dto;
+    }
+
+    @Transactional
+    public ConversationDetailDto getConversationDetails(Long conversationId, Long userId, Pageable pageable) {
+        markConversationAsRead(conversationId, userId);
+
+        MessageConversation conversation = conversationRepository.findById(conversationId)
+                .orElseThrow(() -> new IllegalArgumentException("Conversation not found"));
+
+        Page<Message> messagesPage = messageRepository.findByConversationId(conversationId, pageable);
+        Page<MessageDto> messageDtoPage = messagesPage.map(this::toDto);
+
+        List<UserSummaryDto> participants = conversation.getParticipants().stream()
+                .map(p -> {
+                    UserSummaryDto userDto = new UserSummaryDto();
+                    userDto.setId(p.getUser().getId());
+                    userDto.setUsername(p.getUser().getUsername());
+                    userDto.setAvatar(p.getUser().getAvatar());
+                    return userDto;
+                })
+                .collect(Collectors.toList());
+
+        ConversationDetailDto detailDto = new ConversationDetailDto();
+        detailDto.setId(conversation.getId());
+        detailDto.setName(conversation.getName());
+        detailDto.setChannel(conversation.isChannel());
+        detailDto.setAvatar(conversation.getAvatar());
+        detailDto.setParticipants(participants);
+        detailDto.setMessages(messageDtoPage);
+
+        return detailDto;
+    }
+
+    @Transactional
+    public void markConversationAsRead(Long conversationId, Long userId) {
+        MessageParticipant participant = participantRepository.findByConversationIdAndUserId(conversationId, userId)
+                .orElseThrow(() -> new IllegalArgumentException("Participant not found"));
+        participant.setLastReadAt(LocalDateTime.now());
+        participantRepository.save(participant);
+    }
+
+    @Transactional(readOnly = true)
+    public long getUnreadMessageCount(Long userId) {
+        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;
+    }
+}

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

@@ -2,6 +2,7 @@ package com.openisle.service;
 
 import com.openisle.model.*;
 import com.openisle.repository.*;
+import com.openisle.exception.FieldException;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
@@ -33,6 +34,23 @@ public class PointService {
         return addPoint(user, 500, PointHistoryType.INVITE, null, null, invitee);
     }
 
+    public int awardForFeatured(String userName, Long postId) {
+        User user = userRepository.findByUsername(userName).orElseThrow();
+        Post post = postRepository.findById(postId).orElseThrow();
+        return addPoint(user, 500, PointHistoryType.FEATURE, post, null, null);
+    }
+
+    public void processLotteryJoin(User participant, LotteryPost post) {
+        int cost = post.getPointCost();
+        if (cost > 0) {
+            if (participant.getPoint() < cost) {
+                throw new FieldException("point", "积分不足");
+            }
+            addPoint(participant, -cost, PointHistoryType.LOTTERY_JOIN, post, null, post.getAuthor());
+            addPoint(post.getAuthor(), cost, PointHistoryType.LOTTERY_REWARD, post, null, participant);
+        }
+    }
+
     private PointLog getTodayLog(User user) {
         LocalDate today = LocalDate.now();
         return pointLogRepository.findByUserAndLogDate(user, today)

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

@@ -67,6 +67,7 @@ public class PostService {
     private final TaskScheduler taskScheduler;
     private final EmailSender emailSender;
     private final ApplicationContext applicationContext;
+    private final PointService pointService;
     private final ConcurrentMap<Long, ScheduledFuture<?>> scheduledFinalizations = new ConcurrentHashMap<>();
     @Value("${app.website-url:https://www.open-isle.com}")
     private String websiteUrl;
@@ -89,6 +90,7 @@ public class PostService {
                        TaskScheduler taskScheduler,
                        EmailSender emailSender,
                        ApplicationContext applicationContext,
+                       PointService pointService,
                        @Value("${app.post.publish-mode:DIRECT}") PublishMode publishMode) {
         this.postRepository = postRepository;
         this.userRepository = userRepository;
@@ -107,6 +109,7 @@ public class PostService {
         this.taskScheduler = taskScheduler;
         this.emailSender = emailSender;
         this.applicationContext = applicationContext;
+        this.pointService = pointService;
         this.publishMode = publishMode;
     }
 
@@ -146,7 +149,10 @@ public class PostService {
     public Post includeInRss(Long id) {
         Post post = postRepository.findById(id).orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
         post.setRssExcluded(false);
-        return postRepository.save(post);
+        post = postRepository.save(post);
+        notificationService.createNotification(post.getAuthor(), NotificationType.POST_FEATURED, post, null, null, null, null, null);
+        pointService.awardForFeatured(post.getAuthor().getUsername(), post.getId());
+        return post;
     }
 
     public Post createPost(String username,
@@ -158,6 +164,7 @@ public class PostService {
                            String prizeDescription,
                            String prizeIcon,
                            Integer prizeCount,
+                           Integer pointCost,
                            LocalDateTime startTime,
                            LocalDateTime endTime) {
         long recent = postRepository.countByAuthorAfter(username,
@@ -182,10 +189,14 @@ public class PostService {
         PostType actualType = type != null ? type : PostType.NORMAL;
         Post post;
         if (actualType == PostType.LOTTERY) {
+            if (pointCost != null && (pointCost < 0 || pointCost > 100)) {
+                throw new IllegalArgumentException("pointCost must be between 0 and 100");
+            }
             LotteryPost lp = new LotteryPost();
             lp.setPrizeDescription(prizeDescription);
             lp.setPrizeIcon(prizeIcon);
             lp.setPrizeCount(prizeCount != null ? prizeCount : 0);
+            lp.setPointCost(pointCost != null ? pointCost : 0);
             lp.setStartTime(startTime);
             lp.setEndTime(endTime);
             post = lp;
@@ -244,8 +255,10 @@ public class PostService {
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
-        post.getParticipants().add(user);
+        if (post.getParticipants().add(user)) {
-        lotteryPostRepository.save(post);
+            pointService.processLotteryJoin(user, post);
+            lotteryPostRepository.save(post);
+        }
     }
 
     @Transactional
@@ -458,6 +471,34 @@ public class PostService {
         return paginate(sortByPinnedAndCreated(posts), page, pageSize);
     }
 
+    public List<Post> listFeaturedPosts(List<Long> categoryIds,
+                                        List<Long> tagIds,
+                                        Integer page,
+                                        Integer pageSize) {
+        List<Post> posts;
+        boolean hasCategories = categoryIds != null && !categoryIds.isEmpty();
+        boolean hasTags = tagIds != null && !tagIds.isEmpty();
+
+        if (hasCategories && hasTags) {
+            posts = listPostsByCategoriesAndTags(categoryIds, tagIds, null, null);
+        } else if (hasCategories) {
+            posts = listPostsByCategories(categoryIds, null, null);
+        } else if (hasTags) {
+            posts = listPostsByTags(tagIds, null, null);
+        } else {
+            posts = listPosts();
+        }
+
+        // 仅保留 getRssExcluded 为 0 且不为空
+        // 若字段类型是 Boolean（包装类型），0 等价于 false：
+        posts = posts.stream()
+                .filter(p -> p.getRssExcluded() != null && !p.getRssExcluded())
+                .toList();
+
+        return paginate(sortByPinnedAndCreated(posts), page, pageSize);
+    }
+
+
     public List<Post> listPendingPosts() {
         return postRepository.findByStatus(PostStatus.PENDING);
     }

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/main/java/com/openisle/service/SubscriptionService.java

@@ -107,6 +107,11 @@ public class SubscriptionService {
         return commentSubRepo.findByComment(c).stream().map(CommentSubscription::getUser).toList();
     }
 
+    public List<Post> getSubscribedPosts(String username) {
+        User user = userRepo.findByUsername(username).orElseThrow();
+        return postSubRepo.findByUser(user).stream().map(PostSubscription::getPost).toList();
+    }
+
 
     public long countSubscribers(String username) {
         User user = userRepo.findByUsername(username).orElseThrow();

backend/src/main/resources/db/migration/V3__add_point_cost_to_lottery_posts.sql

@@ -0,0 +1 @@
+ALTER TABLE lottery_posts ADD COLUMN point_cost INT NOT NULL DEFAULT 0;

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

@@ -76,7 +76,7 @@ class PostControllerTest {
         post.setTags(Set.of(tag));
 
         when(postService.createPost(eq("alice"), eq(1L), eq("t"), eq("c"), eq(List.of(1L)),
-                isNull(), isNull(), isNull(), isNull(), isNull(), isNull())).thenReturn(post);
+                isNull(), isNull(), isNull(), isNull(), isNull(), isNull(), isNull())).thenReturn(post);
         when(postService.viewPost(eq(1L), any())).thenReturn(post);
         when(commentService.getCommentsForPost(eq(1L), any())).thenReturn(List.of());
         when(commentService.getParticipants(anyLong(), anyInt())).thenReturn(List.of());
@@ -187,7 +187,7 @@ class PostControllerTest {
                 .andExpect(status().isBadRequest());
 
         verify(postService, never()).createPost(any(), any(), any(), any(), any(),
-                any(), any(), any(), any(), any(), any());
+                any(), any(), any(), any(), any(), any(), any());
     }
 
     @Test

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/controller/UserControllerTest.java

@@ -136,6 +136,30 @@ class UserControllerTest {
                 .andExpect(jsonPath("$[0].title").value("hello"));
     }
 
+    @Test
+    void listSubscribedPosts() throws Exception {
+        User user = new User();
+        user.setUsername("bob");
+        com.openisle.model.Category cat = new com.openisle.model.Category();
+        cat.setName("tech");
+        com.openisle.model.Post post = new com.openisle.model.Post();
+        post.setId(6L);
+        post.setTitle("fav");
+        post.setCreatedAt(java.time.LocalDateTime.now());
+        post.setCategory(cat);
+        post.setAuthor(user);
+        Mockito.when(userService.findByIdentifier("bob")).thenReturn(Optional.of(user));
+        Mockito.when(subscriptionService.getSubscribedPosts("bob")).thenReturn(java.util.List.of(post));
+        PostMetaDto meta = new PostMetaDto();
+        meta.setId(6L);
+        meta.setTitle("fav");
+        Mockito.when(userMapper.toMetaDto(post)).thenReturn(meta);
+
+        mockMvc.perform(get("/api/users/bob/subscribed-posts"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].title").value("fav"));
+    }
+
     @Test
     void listUserReplies() throws Exception {
         User user = new User();

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

@@ -27,7 +27,7 @@ class MedalServiceTest {
 
         List<MedalDto> medals = service.getMedals(null);
         medals.forEach(m -> assertFalse(m.isCompleted()));
-        assertEquals(5, medals.size());
+        assertEquals(6, medals.size());
     }
 
     @Test

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

@@ -34,11 +34,12 @@ class PostServiceTest {
         TaskScheduler taskScheduler = mock(TaskScheduler.class);
         EmailSender emailSender = mock(EmailSender.class);
         ApplicationContext context = mock(ApplicationContext.class);
+        PointService pointService = mock(PointService.class);
 
         PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
                 notifService, subService, commentService, commentRepo,
                 reactionRepo, subRepo, notificationRepo, postReadService,
-                imageUploader, taskScheduler, emailSender, context, PublishMode.DIRECT);
+                imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
         when(context.getBean(PostService.class)).thenReturn(service);
 
         Post post = new Post();
@@ -80,11 +81,12 @@ class PostServiceTest {
         TaskScheduler taskScheduler = mock(TaskScheduler.class);
         EmailSender emailSender = mock(EmailSender.class);
         ApplicationContext context = mock(ApplicationContext.class);
+        PointService pointService = mock(PointService.class);
 
         PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
                 notifService, subService, commentService, commentRepo,
                 reactionRepo, subRepo, notificationRepo, postReadService,
-                imageUploader, taskScheduler, emailSender, context, PublishMode.DIRECT);
+                imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
         when(context.getBean(PostService.class)).thenReturn(service);
 
         Post post = new Post();
@@ -132,18 +134,19 @@ class PostServiceTest {
         TaskScheduler taskScheduler = mock(TaskScheduler.class);
         EmailSender emailSender = mock(EmailSender.class);
         ApplicationContext context = mock(ApplicationContext.class);
+        PointService pointService = mock(PointService.class);
 
         PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
                 notifService, subService, commentService, commentRepo,
                 reactionRepo, subRepo, notificationRepo, postReadService,
-                imageUploader, taskScheduler, emailSender, context, PublishMode.DIRECT);
+                imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
         when(context.getBean(PostService.class)).thenReturn(service);
 
         when(postRepo.countByAuthorAfter(eq("alice"), any())).thenReturn(1L);
 
         assertThrows(RateLimitException.class,
                 () -> service.createPost("alice", 1L, "t", "c", List.of(1L),
-                        null, null, null, null, null, null));
+                        null, null, null, null, null, null, null));
     }
 
     @Test
@@ -165,11 +168,12 @@ class PostServiceTest {
         TaskScheduler taskScheduler = mock(TaskScheduler.class);
         EmailSender emailSender = mock(EmailSender.class);
         ApplicationContext context = mock(ApplicationContext.class);
+        PointService pointService = mock(PointService.class);
 
         PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
                 notifService, subService, commentService, commentRepo,
                 reactionRepo, subRepo, notificationRepo, postReadService,
-                imageUploader, taskScheduler, emailSender, context, PublishMode.DIRECT);
+                imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
         when(context.getBean(PostService.class)).thenReturn(service);
 
         User author = new User();

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

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div class="header-container">
+    <div v-if="!isFloatMode" class="header-container">
       <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 && !isFloatMode }"
+        :style="isFloatMode ? { paddingTop: '0px', minHeight: '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 />
+    <MessageFloatWindow v-if="!isFloatMode" />
   </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 MessageFloatWindow from '~/components/MessageFloatWindow.vue'
 import { useIsMobile } from '~/utils/screen'
 
 const isMobile = useIsMobile()
@@ -52,6 +62,7 @@ const hideMenu = computed(() => {
 })
 
 const header = useTemplateRef('header')
+const isFloatMode = computed(() => useRoute().query.float !== undefined)
 
 onMounted(() => {
   if (typeof window !== 'undefined') {

frontend_nuxt/assets/global.css

@@ -18,7 +18,7 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
+  --menu-selected-background-color: rgba(228, 228, 228, 0.884);
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
@@ -139,6 +139,9 @@ body {
   margin-bottom: 0.8em;
 }
 
+.info-content-text video {
+  max-width: 100%;
+}
 .info-content-text {
   word-break: break-word;
   max-width: 100%;

frontend_nuxt/components/AchievementList.vue

@@ -9,7 +9,7 @@
       ]"
       @click="selectMedal(medal)"
     >
-      <img
+      <BaseImage
         :src="medal.icon"
         :alt="medal.title"
         :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"
@@ -26,6 +26,9 @@
         <template v-else-if="medal.type === 'POST'">
           {{ medal.currentPostCount }}/{{ medal.targetPostCount }}
         </template>
+        <template v-else-if="medal.type === 'FEATURED'">
+          {{ medal.currentFeaturedCount }}/{{ medal.targetFeaturedCount }}
+        </template>
         <template v-else-if="medal.type === 'CONTRIBUTOR'">
           {{ medal.currentContributionLines }}/{{ medal.targetContributionLines }}
         </template>

frontend_nuxt/components/ActivityPopup.vue

@@ -1,7 +1,7 @@
 <template>
   <BasePopup :visible="visible" @close="close">
     <div class="activity-popup">
-      <img v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
+      <BaseImage v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
       <div class="activity-popup-text">{{ text }}</div>
       <div class="activity-popup-actions">
         <div class="activity-popup-button" @click="gotoActivity">立即前往</div>

frontend_nuxt/components/ArticleCategory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
-      <img
+      <BaseImage
         v-if="category.smallIcon"
         class="article-info-item-img"
         :src="category.smallIcon"

frontend_nuxt/components/ArticleTags.vue

@@ -6,7 +6,7 @@
       :key="tag.id || tag.name"
       @click="gotoTag(tag)"
     >
-      <img
+      <BaseImage
         v-if="tag.smallIcon"
         class="article-info-item-img"
         :src="tag.smallIcon"

frontend_nuxt/components/AvatarCropper.vue

@@ -2,7 +2,7 @@
   <div v-if="show" class="cropper-modal">
     <div class="cropper-body">
       <div class="cropper-wrapper">
-        <img ref="image" :src="src" alt="to crop" />
+        <BaseImage ref="image" :src="src" alt="to crop" />
       </div>
       <div class="cropper-actions">
         <button class="cropper-btn" @click="$emit('close')">取消</button>

frontend_nuxt/components/BaseImage.vue

@@ -0,0 +1,67 @@
+<template>
+  <NuxtImg
+    v-bind="passAttrs"
+    :src="src"
+    :alt="alt"
+    loading="lazy"
+    :placeholder="placeholder"
+    placeholder-class="base-image-ph"
+    @load="onLoad"
+    @error="onError"
+    :class="['base-image', passAttrs.class, { 'is-loaded': loaded }]"
+  />
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useAttrs } from 'vue'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+})
+
+const attrs = useAttrs()
+
+const passAttrs = computed(() => {
+  const { placeholder, ...rest } = attrs
+  return rest
+})
+
+const loaded = ref(false)
+const img = useImage()
+
+const placeholder = computed(() => {
+  if (!props.src) return undefined
+  return img(props.src, { w: 16, h: 16, f: 'webp', q: 20, blur: 1 })
+})
+
+function onLoad() {
+  loaded.value = true
+}
+function onError() {
+  loaded.value = true
+}
+</script>
+
+<style scoped>
+.base-image {
+  display: block;
+  transition:
+    filter 0.35s ease,
+    transform 0.35s ease,
+    opacity 0.35s ease;
+  opacity: 0.92;
+}
+
+.base-image-ph {
+  filter: blur(10px) saturate(0.85);
+  transform: scale(1.02);
+}
+
+.base-image.is-loaded {
+  filter: none;
+  transform: none;
+  opacity: 1;
+}
+</style>

frontend_nuxt/components/BaseTabs.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="base-tabs" @touchstart="onTouchStart" @touchend="onTouchEnd">
+    <div
+      v-for="tab in tabs"
+      :key="tab.name"
+      :class="[itemClass, { [activeClass]: tab.name === modelValue }]"
+      @click="emit('update:modelValue', tab.name)"
+    >
+      <slot name="tab" :tab="tab">{{ tab.label }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  tabs: { type: Array, required: true },
+  modelValue: { type: String, required: true },
+  itemClass: { type: String, default: '' },
+  activeClass: { type: String, default: 'active' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const startX = ref(0)
+
+function onTouchStart(e) {
+  startX.value = e.changedTouches[0].clientX
+}
+
+function onTouchEnd(e) {
+  const diff = e.changedTouches[0].clientX - startX.value
+  const threshold = 50
+  if (Math.abs(diff) > threshold) {
+    const currentIndex = props.tabs.findIndex((t) => t.name === props.modelValue)
+    if (currentIndex === -1) return
+    const newIndex = currentIndex + (diff < 0 ? 1 : -1)
+    if (newIndex >= 0 && newIndex < props.tabs.length) {
+      emit('update:modelValue', props.tabs[newIndex].name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base-tabs {
+  display: flex;
+}
+</style>

frontend_nuxt/components/BaseTimeline.vue

@@ -1,14 +1,14 @@
 <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"
         :class="{ clickable: !!item.iconClick }"
         @click="item.iconClick && item.iconClick()"
       >
-        <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseImage 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>
+        <BaseImage 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,6 +42,12 @@ export default {
   margin-top: 10px;
 }
 
+.hover-enabled .timeline-item:hover {
+  background-color: var(--menu-selected-background-color);
+  transition: background-color 0.2s;
+  border-radius: 10px;
+}
+
 .timeline-icon {
   position: sticky;
   top: 0;
@@ -67,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
+  width: 20px;
-  line-height: 1;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

frontend_nuxt/components/CategorySelect.vue

@@ -9,7 +9,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/CommentItem.vue

@@ -8,7 +8,7 @@
   >
     <!-- <div class="user-avatar-container">
       <div class="user-avatar-item">
-        <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
+        <BaseImage class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
       </div>
     </div>   -->
     <div class="info-content">

frontend_nuxt/components/Dropdown.vue

@@ -13,7 +13,7 @@
             <template v-for="(label, idx) in selectedLabels" :key="label.id">
               <div class="selected-label">
                 <template v-if="label.icon">
-                  <img
+                  <BaseImage
                     v-if="isImageIcon(label.icon)"
                     :src="label.icon"
                     class="option-icon"
@@ -32,7 +32,7 @@
           <span v-if="selectedLabels.length">
             <div class="selected-label">
               <template v-if="selectedLabels[0].icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(selectedLabels[0].icon)"
                   :src="selectedLabels[0].icon"
                   class="option-icon"
@@ -69,7 +69,12 @@
         >
           <slot name="option" :option="o" :isSelected="isSelected(o.id)">
             <template v-if="o.icon">
-              <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+              <BaseImage
+                v-if="isImageIcon(o.icon)"
+                :src="o.icon"
+                class="option-icon"
+                :alt="o.name"
+              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -100,7 +105,12 @@
             >
               <slot name="option" :option="o" :isSelected="isSelected(o.id)">
                 <template v-if="o.icon">
-                  <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+                  <BaseImage
+                    v-if="isImageIcon(o.icon)"
+                    :src="o.icon"
+                    class="option-icon"
+                    :alt="o.name"
+                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>

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,10 +6,13 @@
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
             <i class="fas fa-bars"></i>
           </button>
-          <span v-if="isMobile && unreadCount > 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
+          <BaseImage
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
             width="60"
@@ -47,10 +50,20 @@
             </div>
           </ToolTip>
 
+          <ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
+            <div class="messages-icon" @click="goToMessages">
+              <i class="fas fa-comments"></i>
+              <span v-if="unreadMessageCount > 0" class="unread-badge">{{
+                unreadMessageCount
+              }}</span>
+              <span v-else-if="hasChannelUnread" class="unread-dot"></span>
+            </div>
+          </ToolTip>
+
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>
@@ -62,7 +75,6 @@
           </div>
         </div>
       </ClientOnly>
-
       <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
@@ -75,7 +87,8 @@ import DropdownMenu from '~/components/DropdownMenu.vue'
 import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
-import { fetchUnreadCount, notificationState } from '~/utils/notification'
+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'
@@ -93,7 +106,8 @@ const props = defineProps({
 
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
-const unreadCount = computed(() => notificationState.unreadCount)
+const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
+const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
@@ -134,8 +148,21 @@ 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 || '生成邀请链接失败')
@@ -182,10 +209,13 @@ const goToNewPost = () => {
 }
 
 const refrechData = async () => {
-  await fetchUnreadCount()
   window.dispatchEvent(new Event('refresh-home'))
 }
 
+const goToMessages = () => {
+  navigateTo('/message-box')
+}
+
 const headerMenuItems = computed(() => [
   { text: '设置', onClick: goToSettings },
   { text: '个人主页', onClick: goToProfile },
@@ -215,9 +245,10 @@ onMounted(async () => {
   }
   const updateUnread = async () => {
     if (authState.loggedIn) {
-      await fetchUnreadCount()
+      fetchUnreadCount()
+      fetchChannelUnread()
     } else {
-      notificationState.unreadCount = 0
+      fetchChannelUnread()
     }
   }
 
@@ -226,7 +257,7 @@ onMounted(async () => {
 
   watch(
     () => authState.loggedIn,
-    async () => {
+    async (isLoggedIn) => {
       await updateAvatar()
       await updateUnread()
     },
@@ -379,9 +410,37 @@ onMounted(async () => {
 }
 
 .rss-icon,
-.new-post-icon {
+.new-post-icon,
+.messages-icon {
   font-size: 18px;
   cursor: pointer;
+  position: relative;
+}
+
+.unread-badge {
+  position: absolute;
+  top: -5px;
+  right: -10px;
+  background-color: #ff4d4f;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+  min-width: 16px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.unread-dot {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ff4d4f;
 }
 
 .rss-icon {

frontend_nuxt/components/MedalPopup.vue

@@ -4,7 +4,7 @@
       <div class="medal-popup-title">恭喜你获得以下勋章</div>
       <div class="medal-popup-list">
         <div v-for="medal in medals" :key="medal.type" class="medal-popup-item">
-          <img :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
+          <BaseImage :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
           <div class="medal-popup-item-title">{{ medal.title }}</div>
         </div>
       </div>

frontend_nuxt/components/MenuComponent.vue

@@ -88,7 +88,7 @@
               @click="gotoCategory(c)"
             >
               <template v-if="c.smallIcon || c.icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(c.smallIcon || c.icon)"
                   :src="c.smallIcon || c.icon"
                   class="section-item-icon"
@@ -106,7 +106,7 @@
 
         <div class="menu-section">
           <div class="section-header" @click="tagOpen = !tagOpen">
-            <span>tag</span>
+            <span>标签</span>
             <i :class="tagOpen ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
           </div>
           <div v-if="tagOpen" class="section-items">
@@ -114,7 +114,7 @@
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
             <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
-              <img
+              <BaseImage
                 v-if="isImageIcon(t.smallIcon || t.icon)"
                 :src="t.smallIcon || t.icon"
                 class="section-item-icon"
@@ -262,7 +262,7 @@ const gotoTag = (t) => {
   top: var(--header-height);
   width: 220px;
   background-color: var(--app-menu-background-color);
-  height: calc(100vh - 20px - var(--header-height));
+  height: calc(100vh - var(--header-height));
   border-right: 1px solid var(--menu-border-color);
   display: flex;
   flex-direction: column;
@@ -348,6 +348,7 @@ const gotoTag = (t) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .menu-section {

frontend_nuxt/components/MessageEditor.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="message-editor-container">
+    <div class="message-editor-wrapper">
+      <div :id="editorId" ref="vditorElement"></div>
+    </div>
+    <div class="message-bottom-container">
+      <div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
+        <template v-if="!loading"> 发送 </template>
+        <template v-else> <i class="fa-solid fa-spinner fa-spin"></i> 发送中... </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref, useId, watch } from 'vue'
+import { clearVditorStorage } from '~/utils/clearVditorStorage'
+import { themeState } from '~/utils/theme'
+import {
+  createVditor,
+  getEditorTheme as getEditorThemeUtil,
+  getPreviewTheme as getPreviewThemeUtil,
+} from '~/utils/vditor'
+import '~/assets/global.css'
+
+export default {
+  name: 'MessageEditor',
+  emits: ['submit'],
+  props: {
+    editorId: {
+      type: String,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const vditorInstance = ref(null)
+    const text = ref('')
+    const editorId = ref(props.editorId)
+    if (!editorId.value) {
+      editorId.value = 'editor-' + useId()
+    }
+    const getEditorTheme = getEditorThemeUtil
+    const getPreviewTheme = getPreviewThemeUtil
+    const applyTheme = () => {
+      if (vditorInstance.value) {
+        vditorInstance.value.setTheme(getEditorTheme(), getPreviewTheme())
+      }
+    }
+
+    const isDisabled = computed(() => props.loading || props.disabled || !text.value.trim())
+
+    const submit = () => {
+      if (!vditorInstance.value || isDisabled.value) return
+      const value = vditorInstance.value.getValue()
+      emit('submit', value, () => {
+        if (!vditorInstance.value) return
+        vditorInstance.value.setValue('')
+        text.value = ''
+      })
+    }
+
+    onMounted(() => {
+      vditorInstance.value = createVditor(editorId.value, {
+        placeholder: '输入消息...',
+        height: 150,
+        toolbar: [
+          'emoji',
+          'bold',
+          'italic',
+          'strike',
+          'link',
+          '|',
+          'list',
+          '|',
+          'line',
+          'quote',
+          'code',
+          'inline-code',
+          '|',
+          'upload',
+        ],
+        preview: {
+          actions: [],
+          markdown: { toc: false },
+        },
+        input(value) {
+          text.value = value
+        },
+        after() {
+          if (props.loading || props.disabled) {
+            vditorInstance.value.disabled()
+          }
+          applyTheme()
+        },
+      })
+    })
+
+    onUnmounted(() => {
+      clearVditorStorage()
+    })
+
+    watch(
+      () => props.loading,
+      (val) => {
+        if (!vditorInstance.value) return
+        if (val) {
+          vditorInstance.value.disabled()
+        } else if (!props.disabled) {
+          vditorInstance.value.enable()
+        }
+      },
+    )
+
+    watch(
+      () => props.disabled,
+      (val) => {
+        if (!vditorInstance.value) return
+        if (val) {
+          vditorInstance.value.disabled()
+        } else if (!props.loading) {
+          vditorInstance.value.enable()
+        }
+      },
+    )
+
+    watch(
+      () => themeState.mode,
+      () => {
+        applyTheme()
+      },
+    )
+
+    return { submit, isDisabled, editorId }
+  },
+}
+</script>
+
+<style scoped>
+.message-editor-container {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.message-bottom-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 10px;
+  background-color: var(--bg-color-soft);
+  border-top: 1px solid var(--border-color);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.message-submit {
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.message-submit.disabled {
+  background-color: var(--primary-color-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.message-submit:not(.disabled):hover {
+  background-color: var(--primary-color-hover);
+}
+</style>

frontend_nuxt/components/MessageFloatWindow.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="floatRoute" class="message-float-window" :style="{ height: floatHeight }">
+    <iframe :src="iframeSrc" frameborder="0" ref="iframeRef" @load="injectBaseTag"></iframe>
+
+    <div class="float-actions">
+      <i
+        class="fas fa-chevron-down"
+        v-if="floatHeight !== MINI_HEIGHT"
+        title="收起至 100px"
+        @click="collapseToMini"
+      ></i>
+      <i
+        class="fas fa-chevron-up"
+        v-if="floatHeight !== DEFAULT_HEIGHT"
+        title="回弹至 60vh"
+        @click="reboundToDefault"
+      ></i>
+      <i class="fas fa-expand" title="在页面中打开" @click="expand"></i>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const floatRoute = useState('messageFloatRoute')
+
+const DEFAULT_HEIGHT = '60vh'
+const MINI_HEIGHT = '45px'
+const floatHeight = ref(DEFAULT_HEIGHT)
+
+const iframeRef = ref(null)
+const iframeSrc = computed(() => {
+  if (!floatRoute.value) return ''
+  return floatRoute.value + (floatRoute.value.includes('?') ? '&' : '?') + 'float=1'
+})
+
+function collapseToMini() {
+  floatHeight.value = MINI_HEIGHT
+}
+
+function reboundToDefault() {
+  floatHeight.value = DEFAULT_HEIGHT
+}
+
+function expand() {
+  if (!floatRoute.value) return
+  const target = floatRoute.value
+  floatRoute.value = null
+  navigateTo(target)
+}
+
+function injectBaseTag() {
+  if (!iframeRef.value) return
+
+  const iframeDoc = iframeRef.value.contentDocument || iframeRef.value.contentWindow.document
+  if (iframeDoc && !iframeDoc.querySelector('base')) {
+    const base = iframeDoc.createElement('base')
+    base.target = '_top'
+    iframeDoc.head.appendChild(base)
+  }
+}
+
+watch(
+  () => floatRoute.value,
+  (v) => {
+    if (v) floatHeight.value = DEFAULT_HEIGHT
+  },
+)
+</script>
+
+<style scoped>
+.message-float-window {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 400px;
+  max-height: 90vh;
+  background-color: var(--background-color);
+  border: 1px solid var(--normal-border-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  transition: height 0.25s ease;
+  /* 平滑过渡 */
+}
+
+.message-float-window iframe {
+  width: 100%;
+  flex: 1;
+}
+
+.float-actions {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+}
+
+.float-actions i {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.9;
+}
+
+.float-actions i:hover {
+  opacity: 1;
+}
+</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,24 +3,45 @@
     <div class="reactions-viewer">
       <div
         class="reactions-viewer-item-container"
-        @click="openPanel"
         @mouseenter="cancelHide"
         @mouseleave="scheduleHide"
       >
-        <template v-if="displayedReactions.length">
+        <template v-if="Object.keys(counts).length < 4">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
+          <div
-            {{ reactionEmojiMap[r.type] }}
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-single-item"
+            :class="{ selected: userReacted(r.type) }"
+            @click="toggleReaction(r.type)"
+          >
+            <BaseImage :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 reactions-viewer-item-placeholder-icon"></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"
+          >
+            <BaseImage :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">
-      <div class="make-reaction-item like-reaction" @click="toggleReaction('LIKE')">
+      <div
+        v-if="props.contentType !== 'message'"
+        class="make-reaction-item like-reaction"
+        @click="toggleReaction('LIKE')"
+      >
         <i v-if="!userReacted('LIKE')" class="far fa-heart"></i>
         <i v-else class="fas fa-heart"></i>
         <span class="reactions-count" v-if="likeCount">{{ likeCount }}</span>
@@ -40,7 +61,9 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        <BaseImage :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+          counts[t]
+        }}</span>
       </div>
     </div>
   </div>
@@ -119,7 +142,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,11 +242,8 @@ onMounted(async () => {
   font-size: 16px;
 }
 
-.reactions-viewer-item.placeholder {
+.reactions-viewer-item-placeholder-icon {
   opacity: 0.5;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 }
 
 .reactions-viewer-item-placeholder-text {
@@ -262,18 +284,16 @@ onMounted(async () => {
 
 .reactions-panel {
   position: absolute;
-  bottom: 40px;
+  bottom: 50px;
-  left: -20px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  border-radius: 5px;
+  border-radius: 20px;
-  padding: 5px;
+  padding: 5px 10px;
-  max-width: 240px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   z-index: 10;
-  gap: 2px;
+  gap: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -287,6 +307,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/components/SearchPersonDropdown.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="search-dropdown">
+    <Dropdown
+      ref="dropdown"
+      v-model="selected"
+      :fetch-options="fetchResults"
+      remote
+      menu-class="search-menu"
+      option-class="search-option"
+      :show-search="isMobile"
+      @update:search="keyword = $event"
+      @close="onClose"
+    >
+      <template #display="{ setSearch }">
+        <div class="search-input">
+          <i class="search-input-icon fas fa-search"></i>
+          <input
+            class="text-input"
+            v-model="keyword"
+            placeholder="Search users"
+            @input="setSearch(keyword)"
+          />
+        </div>
+      </template>
+      <template #option="{ option }">
+        <div class="search-option-item">
+          <BaseImage
+            :src="option.avatar || '/default-avatar.svg'"
+            class="avatar"
+            @error="handleAvatarError"
+          />
+          <div class="result-body">
+            <div class="result-main" v-html="highlight(option.username)"></div>
+            <div
+              v-if="option.introduction"
+              class="result-sub"
+              v-html="highlight(option.introduction)"
+            ></div>
+          </div>
+        </div>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Dropdown from '~/components/Dropdown.vue'
+import { stripMarkdown } from '~/utils/markdown'
+import { useIsMobile } from '~/utils/screen'
+import { getToken } from '~/utils/auth'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+
+const emit = defineEmits(['close'])
+
+const keyword = ref('')
+const selected = ref(null)
+const results = ref([])
+const dropdown = ref(null)
+const isMobile = useIsMobile()
+
+const toggle = () => {
+  dropdown.value.toggle()
+}
+
+const onClose = () => emit('close')
+
+const fetchResults = async (kw) => {
+  if (!kw) return []
+  const res = await fetch(`${API_BASE_URL}/api/search/users?keyword=${encodeURIComponent(kw)}`)
+  if (!res.ok) return []
+  const data = await res.json()
+  results.value = data.map((u) => ({
+    id: u.id,
+    username: u.username,
+    avatar: u.avatar,
+    introduction: u.introduction,
+  }))
+  return results.value
+}
+
+const highlight = (text) => {
+  text = stripMarkdown(text || '')
+  if (!keyword.value) return text
+  const reg = new RegExp(keyword.value, 'gi')
+  return text.replace(reg, (m) => `<span class="highlight">${m}</span>`)
+}
+
+const handleAvatarError = (e) => {
+  e.target.src = '/default-avatar.svg'
+}
+
+watch(selected, async (val) => {
+  if (!val) return
+  const user = results.value.find((u) => u.id === val)
+  if (!user) return
+  const token = getToken()
+  if (!token) {
+    navigateTo('/login', { replace: true })
+  } else {
+    try {
+      const res = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ recipientId: user.id }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        navigateTo(`/message-box/${data.conversationId}`, { replace: true })
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+  selected.value = null
+  keyword.value = ''
+})
+
+defineExpose({
+  toggle,
+})
+</script>
+
+<style scoped>
+.search-dropdown {
+  margin-top: 20px;
+  width: 500px;
+}
+
+.search-input {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.text-input {
+  background-color: var(--app-menu-background-color);
+  color: var(--text-color);
+  border: none;
+  outline: none;
+  width: 100%;
+  margin-left: 10px;
+  font-size: 16px;
+}
+
+.search-menu {
+  width: 100%;
+  max-width: 600px;
+}
+
+@media (max-width: 768px) {
+  .search-dropdown {
+    width: 100%;
+  }
+}
+
+.search-option-item {
+  display: flex;
+  gap: 10px;
+}
+
+.search-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+}
+
+:deep(.highlight) {
+  color: var(--primary-color);
+}
+
+.avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.result-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.result-main {
+  font-weight: bold;
+}
+
+.result-sub {
+  font-size: 12px;
+  color: #666;
+}
+</style>

frontend_nuxt/components/TagSelect.vue

@@ -11,7 +11,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/UserList.vue

@@ -2,7 +2,7 @@
   <div class="user-list">
     <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <img :src="u.avatar" alt="avatar" class="user-avatar" />
+      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>

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/useUnreadCount.js

@@ -0,0 +1,93 @@
+import { ref, watch, onMounted } from 'vue';
+import { useWebSocket } from './useWebSocket';
+import { getToken } from '~/utils/auth';
+
+const count = ref(0);
+let isInitialized = false;
+let wsSubscription = null;
+
+export function useUnreadCount() {
+  const config = useRuntimeConfig();
+  const API_BASE_URL = config.public.apiBaseUrl;
+  const { subscribe, isConnected, connect } = useWebSocket();
+
+  const fetchUnreadCount = async () => {
+    const token = getToken();
+    if (!token) {
+      count.value = 0;
+      return;
+    }
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/messages/unread-count`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        count.value = data;
+      }
+    } catch (error) {
+      console.error('Failed to fetch unread count:', error);
+    }
+  };
+
+  const initialize = async () => {
+    const token = getToken();
+    if (!token) {
+      count.value = 0;
+      return;
+    }
+
+    // 总是获取最新的未读数量
+    fetchUnreadCount();
+    
+    // 确保WebSocket连接
+    if (!isConnected.value) {
+      connect(token);
+    }
+    
+    // 设置WebSocket监听
+    await setupWebSocketListener();
+  };
+
+  const setupWebSocketListener = async () => {
+    // 只有在还没有订阅的情况下才设置监听
+    if (!wsSubscription) {
+      
+      watch(isConnected, (newValue) => {
+        if (newValue && !wsSubscription) {
+          const destination = `/user/queue/unread-count`;
+          wsSubscription = subscribe(destination, (message) => {
+            const unreadCount = parseInt(message.body, 10);
+            if (!isNaN(unreadCount)) {
+              count.value = unreadCount;
+            }
+          });
+        }
+      }, { immediate: true });
+    }
+  };
+
+  // 自动初始化逻辑 - 确保每次调用都能获取到未读数量并设置监听
+  const token = getToken();
+  if (token) {
+    if (!isInitialized) {
+      isInitialized = true;
+      initialize(); // 完整初始化，包括WebSocket监听
+    } else {
+      // 即使已经初始化，也要确保获取最新的未读数量并确保WebSocket监听存在
+      fetchUnreadCount();
+      
+      // 确保WebSocket连接和监听都存在
+      if (!isConnected.value) {
+        connect(token);
+      }
+      setupWebSocketListener();
+    }
+  }
+
+  return {
+    count,
+    fetchUnreadCount,
+    initialize,
+  };
+}

frontend_nuxt/composables/useWebSocket.js

@@ -0,0 +1,86 @@
+import { ref } from 'vue'
+import { Client } from '@stomp/stompjs'
+import SockJS from 'sockjs-client/dist/sockjs.min.js'
+import { useRuntimeConfig } from '#app'
+
+const client = ref(null)
+const isConnected = ref(false)
+
+const connect = (token) => {
+  if (isConnected.value) {
+    return
+  }
+
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
+  const socketUrl = `${API_BASE_URL}/api/sockjs`
+
+  const socket = new SockJS(socketUrl)
+  const stompClient = new Client({
+    webSocketFactory: () => socket,
+    connectHeaders: {
+      Authorization: `Bearer ${token}`,
+    },
+    debug: function (str) {},
+    reconnectDelay: 5000,
+    heartbeatIncoming: 4000,
+    heartbeatOutgoing: 4000,
+  })
+
+  stompClient.onConnect = (frame) => {
+    isConnected.value = true
+  }
+
+  stompClient.onStompError = (frame) => {
+    console.error('WebSocket STOMP error:', frame)
+  }
+
+  stompClient.activate()
+  client.value = stompClient
+}
+
+const disconnect = () => {
+  if (client.value) {
+    isConnected.value = false
+    client.value.deactivate()
+    client.value = null
+  }
+}
+
+const subscribe = (destination, callback) => {
+  if (!isConnected.value || !client.value || !client.value.connected) {
+    return null
+  }
+
+  try {
+    const subscription = client.value.subscribe(destination, (message) => {
+      try {
+        if (
+          destination.includes('/queue/unread-count') ||
+          destination.includes('/queue/channel-unread')
+        ) {
+          callback(message)
+        } else {
+          const parsedMessage = JSON.parse(message.body)
+          callback(parsedMessage)
+        }
+      } catch (error) {
+        callback(message)
+      }
+    })
+
+    return subscription
+  } catch (error) {
+    return null
+  }
+}
+
+export function useWebSocket() {
+  return {
+    client,
+    isConnected,
+    connect,
+    disconnect,
+    subscribe,
+  }
+}

frontend_nuxt/nuxt.config.ts

@@ -2,6 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   ssr: true,
+  modules: ['@nuxt/image'],
   runtimeConfig: {
     public: {
       apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '',

frontend_nuxt/package.json

@@ -9,18 +9,22 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxt/image": "^1.11.0",
+    "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
     "echarts": "^5.6.0",
+    "flatpickr": "^4.6.13",
     "highlight.js": "^11.11.1",
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
-    "nuxt": "latest",
     "nprogress": "^0.2.0",
+    "nuxt": "latest",
+    "sanitize-html": "^2.17.0",
+    "sockjs-client": "^1.6.1",
     "vditor": "^3.11.1",
     "vue-easy-lightbox": "^1.19.0",
     "vue-echarts": "^7.0.3",
-    "vue-toastification": "^2.0.0-rc.5",
+    "vue-flatpickr-component": "^12.0.0",
-    "flatpickr": "^4.6.13",
+    "vue-toastification": "^2.0.0-rc.5"
-    "vue-flatpickr-component": "^12.0.0"
   }
 }

frontend_nuxt/pages/about/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="about-page">
-    <div class="about-tabs">
+    <BaseTabs
-      <div
+      v-model="selectedTab"
-        v-for="tab in tabs"
+      :tabs="tabs"
-        :key="tab.name"
+      class="about-tabs"
-        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
+      item-class="about-tabs-item"
-        @click="selectTab(tab.name)"
+      active-class="selected"
-      >
+    >
+      <template #tab="{ tab }">
         <div class="about-tabs-item-label">{{ tab.label }}</div>
-      </div>
+      </template>
-    </div>
+    </BaseTabs>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
@@ -23,11 +24,13 @@
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { ref, watch } from 'vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
   name: 'AboutPageView',
+  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
@@ -71,21 +74,20 @@ export default {
       }
     }
 
-    const selectTab = (name) => {
+    watch(
-      selectedTab.value = name
+      selectedTab,
-      const tab = tabs.find((t) => t.name === name)
+      (name) => {
-      if (tab) loadContent(tab.file)
+        const tab = tabs.find((t) => t.name === name)
-    }
+        if (tab) loadContent(tab.file)
-
+      },
-    onMounted(() => {
+      { immediate: true },
-      loadContent(tabs[0].file)
+    )
-    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
   },
 }
 </script>
@@ -98,9 +100,7 @@ export default {
 }
 
 .about-tabs {
-  position: sticky;
   top: calc(var(--header-height) + 1px);
-  z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;
   flex-direction: row;

frontend_nuxt/pages/activities.vue

@@ -7,7 +7,7 @@
     <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
       <div class="activity-list-page-card-normal">
         <div v-if="a.icon" class="activity-card-normal-left">
-          <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
+          <BaseImage :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
         </div>
         <div class="activity-card-normal-right">
           <div class="activity-card-normal-right-header">

frontend_nuxt/pages/index.vue

@@ -26,7 +26,10 @@
     <div class="article-container">
       <template
         v-if="
-          selectedTopic === '最新' || selectedTopic === '排行榜' || selectedTopic === '最新回复'
+          selectedTopic === '最新' ||
+          selectedTopic === '排行榜' ||
+          selectedTopic === '最新回复' ||
+          selectedTopic === '精选'
         "
       >
         <div class="article-header-container">
@@ -85,7 +88,7 @@
               class="article-member-avatar-item"
               :to="`/users/${member.id}`"
             >
-              <img class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
+              <BaseImage class="article-member-avatar-item-img" :src="member.avatar" alt="avatar" />
             </NuxtLink>
           </div>
 
@@ -122,6 +125,7 @@
 
 <script setup>
 import { computed, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
@@ -152,17 +156,22 @@ const route = useRoute()
 const tagOptions = ref([])
 const categoryOptions = ref([])
 
-const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
+const topics = ref(['最新回复', '最新', '精选', '排行榜' /*, '热门', '类别'*/])
 const selectedTopicCookie = useCookie('homeTab')
-const selectedTopic = ref(
+
-  selectedTopicCookie.value
+let defaultTopic = '最新回复'
-    ? selectedTopicCookie.value
+
-    : route.query.view === 'ranking'
+if (selectedTopicCookie.value) {
-      ? '排行榜'
+  defaultTopic = selectedTopicCookie.value
-      : route.query.view === 'latest'
+} else if (route.query.view === 'ranking') {
-        ? '最新'
+  defaultTopic = '排行榜'
-        : '最新回复',
+} else if (route.query.view === 'latest') {
-)
+  defaultTopic = '最新'
+} else if (route.query.view === 'featured') {
+  defaultTopic = '精选'
+}
+const selectedTopic = ref(defaultTopic)
+
 if (!selectedTopicCookie.value) selectedTopicCookie.value = selectedTopic.value
 const articles = ref([])
 const page = ref(0)
@@ -236,6 +245,7 @@ const baseQuery = computed(() => ({
 const listApiPath = computed(() => {
   if (selectedTopic.value === '排行榜') return '/api/posts/ranking'
   if (selectedTopic.value === '最新回复') return '/api/posts/latest-reply'
+  if (selectedTopic.value === '精选') return '/api/posts/featured'
   return '/api/posts'
 })
 const buildUrl = ({ pageNo }) => {
@@ -440,7 +450,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 .topic-item {
-  padding: 2px 10px;
+  padding: 6px 20px;
   cursor: pointer;
 }
 
@@ -643,6 +653,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);
@@ -700,6 +714,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/login.vue

@@ -36,19 +36,35 @@
 
     <div class="other-login-page-content">
       <div class="login-page-button" @click="loginWithGoogle">
-        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/google.svg"
+          alt="Google Logo"
+        />
         <div class="login-page-button-text">Google 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithGithub">
-        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/github.svg"
+          alt="GitHub Logo"
+        />
         <div class="login-page-button-text">GitHub 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithDiscord">
-        <img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/discord.svg"
+          alt="Discord Logo"
+        />
         <div class="login-page-button-text">Discord 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithTwitter">
-        <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
+        <BaseImage
+          class="login-page-button-icon"
+          src="../assets/icons/twitter.svg"
+          alt="Twitter Logo"
+        />
         <div class="login-page-button-text">Twitter 登录</div>
       </div>
     </div>

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

@@ -0,0 +1,648 @@
+<template>
+  <div class="chat-container" :class="{ float: isFloatMode }">
+    <div v-if="!loading" class="chat-header">
+      <div class="header-main">
+        <div class="back-button" @click="goBack">
+          <i class="fas fa-arrow-left"></i>
+        </div>
+        <h2 class="participant-name">
+          {{ isChannel ? conversationName : otherParticipant?.username }}
+        </h2>
+      </div>
+      <div v-if="!isFloatMode" class="float-control">
+        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+      </div>
+    </div>
+
+    <div class="messages-list" ref="messagesListEl">
+      <div v-if="loading" class="loading-container">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+      <div v-else-if="error" class="error-container">{{ error }}</div>
+      <template v-else>
+        <div class="load-more-container" v-if="hasMoreMessages">
+          <div @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
+            {{ loadingMore ? '加载中...' : '查看更多消息' }}
+          </div>
+        </div>
+        <BaseTimeline :items="messages">
+          <template #item="{ item }">
+            <div class="message-header">
+              <div class="user-name">
+                {{ item.sender.username }}
+              </div>
+              <div class="message-timestamp">
+                {{ TimeManager.format(item.createdAt) }}
+              </div>
+            </div>
+            <div v-if="item.replyTo" class="reply-preview info-content-text">
+              <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)"
+            >
+              <i class="fas fa-reply reply-btn" @click="setReply(item)"> 写个回复...</i>
+            </ReactionsGroup>
+          </template>
+        </BaseTimeline>
+        <div class="empty-container">
+          <BasePlaceholder
+            v-if="messages.length === 0"
+            text="暂无会话，发送消息试试 🎉"
+            icon="fas fa-inbox"
+          />
+        </div>
+      </template>
+    </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>
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  watch,
+  onActivated,
+  onDeactivated,
+} from 'vue'
+import { useRoute } from 'vue-router'
+import { getToken, fetchCurrentUser } from '~/utils/auth'
+import { toast } from '~/main'
+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'
+import TimeManager from '~/utils/time'
+import BaseTimeline from '~/components/BaseTimeline.vue'
+import BasePlaceholder from '~/components/BasePlaceholder.vue'
+
+const config = useRuntimeConfig()
+const route = useRoute()
+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([])
+const participants = ref([])
+const loading = ref(true)
+const sending = ref(false)
+const error = ref(null)
+const conversationId = route.params.id
+const currentUser = ref(null)
+const messagesListEl = ref(null)
+let lastMessageEl = null
+const currentPage = ref(0)
+const totalPages = ref(0)
+const loadingMore = ref(false)
+let scrollInterval = null
+const conversationName = ref('')
+const isChannel = ref(false)
+const isFloatMode = computed(() => route.query.float !== undefined)
+const floatRoute = useState('messageFloatRoute')
+const replyTo = ref(null)
+
+const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
+
+const otherParticipant = computed(() => {
+  if (isChannel.value || !currentUser.value || participants.value.length === 0) {
+    return null
+  }
+  return participants.value.find((p) => p.id !== currentUser.value.id)
+})
+
+function isSentByCurrentUser(message) {
+  return message.sender.id === currentUser.value?.id
+}
+
+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.
+
+async function fetchMessages(page = 0) {
+  if (page === 0) {
+    loading.value = true
+    messages.value = []
+  } else {
+    loadingMore.value = true
+  }
+  error.value = null
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    loading.value = false
+    return
+  }
+
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/api/messages/conversations/${conversationId}?page=${page}&size=20`,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    )
+    if (!response.ok) throw new Error('无法加载消息')
+
+    const conversationData = await response.json()
+    const pageData = conversationData.messages
+
+    if (page === 0) {
+      participants.value = conversationData.participants
+      conversationName.value = conversationData.name
+      isChannel.value = conversationData.channel
+    }
+
+    // Since the backend sorts by descending, we need to reverse for correct chat order
+    const newMessages = pageData.content.reverse().map((item) => ({
+      ...item,
+      src: item.sender.avatar,
+      iconClick: () => {
+        openUser(item.sender.id)
+      },
+    }))
+
+    const list = messagesListEl.value
+    const oldScrollHeight = list ? list.scrollHeight : 0
+
+    if (page === 0) {
+      messages.value = newMessages
+    } else {
+      messages.value = [...newMessages, ...messages.value]
+    }
+
+    currentPage.value = pageData.number
+    totalPages.value = pageData.totalPages
+
+    // Scrolling is now fully handled by the watcher
+    await nextTick()
+    if (page > 0 && list) {
+      const newScrollHeight = list.scrollHeight
+      list.scrollTop = newScrollHeight - oldScrollHeight
+    }
+  } catch (e) {
+    error.value = e.message
+    toast.error(e.message)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function loadMoreMessages() {
+  if (hasMoreMessages.value && !loadingMore.value) {
+    await fetchMessages(currentPage.value + 1)
+  }
+}
+
+async function sendMessage(content, clearInput) {
+  if (!content.trim()) return
+  sending.value = true
+  const token = getToken()
+  try {
+    let response
+    if (isChannel.value) {
+      response = await fetch(
+        `${API_BASE_URL}/api/messages/conversations/${conversationId}/messages`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ content, replyToId: replyTo.value?.id }),
+        },
+      )
+    } else {
+      const recipient = otherParticipant.value
+      if (!recipient) {
+        toast.error('无法确定收信人')
+        return
+      }
+      response = await fetch(`${API_BASE_URL}/api/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          recipientId: recipient.id,
+          content: content,
+          replyToId: replyTo.value?.id,
+        }),
+      })
+    }
+    if (!response.ok) throw new Error('发送失败')
+
+    const newMessage = await response.json()
+    messages.value.push({
+      ...newMessage,
+      src: newMessage.sender.avatar,
+      iconClick: () => {
+        openUser(newMessage.sender.id)
+      },
+    })
+    clearInput()
+    replyTo.value = null
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+  } catch (e) {
+    toast.error(e.message)
+  } finally {
+    sending.value = false
+  }
+}
+
+async function markConversationAsRead() {
+  const token = getToken()
+  if (!token) return
+  try {
+    await fetch(`${API_BASE_URL}/api/messages/conversations/${conversationId}/read`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    // After marking as read, refresh the global unread count
+    refreshGlobalUnreadCount()
+    refreshChannelUnread()
+  } catch (e) {
+    console.error('Failed to mark conversation as read', e)
+  }
+}
+
+function scrollToBottom() {
+  if (messagesListEl.value) {
+    const element = messagesListEl.value
+    // 強制滾動到底部，使用 smooth 行為確保視覺效果
+    element.scrollTop = element.scrollHeight
+
+    // 再次確認滾動位置
+    setTimeout(() => {
+      if (element.scrollTop < element.scrollHeight - element.clientHeight) {
+        element.scrollTop = element.scrollHeight
+      }
+    }, 50)
+  }
+}
+
+watch(
+  messages,
+  async (newMessages) => {
+    if (newMessages.length === 0) return
+
+    await nextTick()
+
+    // Simple, reliable scroll to bottom
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+  },
+  { deep: true },
+)
+
+onMounted(async () => {
+  currentUser.value = await fetchCurrentUser()
+  if (currentUser.value) {
+    await fetchMessages(0)
+    await markConversationAsRead()
+    const token = getToken()
+    if (token && !isConnected.value) {
+      connect(token)
+    }
+  } else {
+    toast.error('请先登录')
+    loading.value = false
+  }
+})
+
+watch(isConnected, (newValue) => {
+  if (newValue) {
+    // 等待一小段时间确保连接稳定
+    setTimeout(() => {
+      subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
+        // 避免重复显示当前用户发送的消息
+        if (message.sender.id !== currentUser.value.id) {
+          messages.value.push({
+            ...message,
+            src: message.sender.avatar,
+            iconClick: () => {
+              openUser(message.sender.id)
+            },
+          })
+          // 实时收到消息时自动标记为已读
+          markConversationAsRead()
+          setTimeout(() => {
+            scrollToBottom()
+          }, 100)
+        }
+      })
+    }, 500)
+  }
+})
+
+onActivated(async () => {
+  // This will be called every time the component is activated (navigated to)
+  if (currentUser.value) {
+    await fetchMessages(0)
+    await markConversationAsRead()
+
+    // 確保滾動到底部 - 使用多重延遲策略
+    await nextTick()
+    setTimeout(() => {
+      scrollToBottom()
+    }, 100)
+    setTimeout(() => {
+      scrollToBottom()
+    }, 300)
+    setTimeout(() => {
+      scrollToBottom()
+    }, 500)
+
+    if (!isConnected.value) {
+      const token = getToken()
+      if (token) connect(token)
+    }
+  }
+})
+
+onDeactivated(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+    subscription = null
+  }
+  disconnect()
+})
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+    subscription = null
+  }
+  disconnect()
+})
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
+}
+
+function openUser(id) {
+  if (isFloatMode.value) {
+    // 先不处理...
+    // navigateTo(`/users/${id}?float=1`)
+  } else {
+    navigateTo(`/users/${id}`, { replace: true })
+  }
+}
+
+function goBack() {
+  if (isFloatMode.value) {
+    navigateTo('/message-box?float=1')
+  } else {
+    navigateTo('/message-box')
+  }
+}
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  overflow: auto;
+  height: calc(100vh - var(--header-height));
+  position: relative;
+}
+
+.chat-container.float {
+  height: 100vh;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  align-items: center;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--normal-border-color);
+  background-color: var(--background-color-blur);
+  backdrop-filter: var(--blur-10);
+}
+
+.header-main {
+  display: flex;
+  align-items: center;
+}
+
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+  cursor: pointer;
+}
+
+.float-control i {
+  cursor: pointer;
+}
+
+.back-button {
+  font-size: 18px;
+  color: var(--text-color-primary);
+  margin-right: 15px;
+  cursor: pointer;
+}
+
+.participant-name {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.messages-list {
+  overflow-y: auto;
+  padding: 20px;
+  padding-bottom: 100px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.load-more-container {
+  text-align: center;
+}
+
+.load-more-button {
+  color: var(--primary-color);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.load-more-button:hover {
+  text-decoration: underline;
+}
+
+.message-item {
+  display: flex;
+  gap: 10px;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  align-self: flex-end;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-timestamp {
+  font-size: 11px;
+  color: var(--text-color-secondary);
+  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;
+}
+
+.message-item.sent .message-timestamp {
+  text-align: right;
+}
+
+/* Received messages */
+.message-item.received {
+  align-self: flex-start;
+}
+
+.message-item.received .message-content {
+  align-items: flex-start;
+}
+
+.message-item.received .message-bubble {
+  background-color: var(--bg-color-soft);
+  border: 1px solid var(--border-color);
+  border-bottom-left-radius: 4px;
+}
+
+.message-input-area {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.error-container {
+  text-align: center;
+  padding: 50px;
+  color: var(--text-color-secondary);
+}
+
+.message-input-area {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.reply-preview {
+  padding: 10px;
+  border-left: 5px solid var(--primary-color);
+  margin-bottom: 5px;
+  font-size: 13px;
+  background-color: var(--menu-selected-background-color);
+}
+
+.reply-author {
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.reply-btn {
+  cursor: pointer;
+  padding: 4px;
+  opacity: 0.6;
+  font-size: 12px;
+}
+
+.reply-btn:hover {
+  opacity: 1;
+}
+
+.active-reply {
+  background-color: var(--bg-color-soft);
+  padding: 5px 10px;
+  border-left: 5px solid var(--primary-color);
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+
+.close-reply {
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+@media (max-height: 200px) {
+  .messages-list,
+  .message-input-area {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .messages-list {
+    padding: 10px;
+  }
+}
+</style>

frontend_nuxt/pages/message-box/index.vue

@@ -0,0 +1,549 @@
+<template>
+  <div class="messages-container">
+    <div class="page-title">
+      <i class="fas fa-comments"></i>
+      <span class="page-title-text">选择聊天</span>
+    </div>
+    <div v-if="!isFloatMode" class="float-control">
+      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+    </div>
+    <BaseTabs
+      v-model="activeTab"
+      :tabs="tabs"
+      class="tabs"
+      item-class="tab"
+      active-class="active"
+    />
+
+    <div v-if="activeTab === 'messages'">
+      <div v-if="loading" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+
+      <div v-else-if="error" class="error-container">
+        <div class="error-text">{{ error }}</div>
+      </div>
+
+      <div v-if="!loading && !isFloatMode" class="search-container">
+        <SearchPersonDropdown />
+      </div>
+
+      <div v-if="!loading && conversations.length === 0" class="empty-container">
+        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+      </div>
+
+      <div
+        v-if="!loading"
+        v-for="convo in conversations"
+        :key="convo.id"
+        class="conversation-item"
+        @click="goToConversation(convo.id)"
+      >
+        <div class="conversation-avatar">
+          <BaseImage
+            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+            :alt="getOtherParticipant(convo)?.username || '用户'"
+            class="avatar-img"
+            @error="handleAvatarError"
+          />
+        </div>
+
+        <div class="conversation-content">
+          <div class="conversation-header">
+            <div class="participant-name">
+              {{ getOtherParticipant(convo)?.username || '未知用户' }}
+            </div>
+            <div class="message-time">
+              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
+            </div>
+          </div>
+
+          <div class="last-message-row">
+            <div class="last-message">
+              {{
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
+              }}
+            </div>
+            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+              {{ convo.unreadCount }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <div v-if="loadingChannels" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+      <div v-else>
+        <div v-if="channels.length === 0" class="empty-container">
+          <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+        </div>
+        <div
+          v-for="ch in channels"
+          :key="ch.id"
+          class="conversation-item"
+          @click="goToChannel(ch.id)"
+        >
+          <div class="conversation-avatar">
+            <BaseImage
+              :src="ch.avatar || '/default-avatar.svg'"
+              :alt="ch.name"
+              class="avatar-img"
+              @error="handleAvatarError"
+            />
+          </div>
+          <div class="conversation-content">
+            <div class="conversation-header">
+              <div class="participant-name">
+                {{ ch.name }}
+                <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
+              </div>
+              <div class="message-time">
+                {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+              </div>
+            </div>
+            <div class="last-message-row">
+              <div class="last-message">
+                {{
+                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                }}
+              </div>
+              <div class="member-count">成员 {{ ch.memberCount }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
+import { 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 BaseTabs from '~/components/BaseTabs.vue'
+
+const config = useRuntimeConfig()
+const conversations = ref([])
+const loading = ref(true)
+const error = ref(null)
+
+const route = useRoute()
+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 tabs = [
+  { name: 'messages', label: '站内信' },
+  { name: 'channels', label: '频道' },
+]
+const activeTab = ref('channels')
+const channels = ref([])
+const loadingChannels = ref(false)
+const isFloatMode = computed(() => route.query.float === '1')
+const floatRoute = useState('messageFloatRoute')
+
+watch(activeTab, (tab) => {
+  if (tab === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
+async function fetchConversations() {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  loading.value = true
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.json()
+    conversations.value = data
+  } catch (e) {
+    error.value = '无法加载会话列表。'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取对话中的另一个参与者（非当前用户）
+function getOtherParticipant(conversation) {
+  if (!currentUser.value || !conversation.participants) return null
+  return conversation.participants.find((p) => p.id !== currentUser.value.id)
+}
+
+// 格式化时间
+function formatTime(timeString) {
+  if (!timeString) return ''
+  return TimeManager.format(timeString)
+}
+
+// 头像加载失败处理
+function handleAvatarError(event) {
+  event.target.src = '/default-avatar.svg'
+}
+
+async function fetchChannels() {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  loadingChannels.value = true
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/channels`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (!response.ok) throw new Error('无法加载频道')
+    const data = await response.json()
+    channels.value = data
+    setChannelUnreadFromList(data)
+  } catch (e) {
+    toast.error(e.message)
+  } finally {
+    loadingChannels.value = false
+  }
+}
+
+async function goToChannel(id) {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  try {
+    await fetch(`${API_BASE_URL}/api/channels/${id}/join`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    if (isFloatMode.value) {
+      navigateTo(`/message-box/${id}?float=1`)
+    } else {
+      navigateTo(`/message-box/${id}`)
+    }
+  } catch (e) {
+    toast.error(e.message)
+  }
+}
+
+onActivated(async () => {
+  currentUser.value = await fetchCurrentUser()
+
+  if (currentUser.value) {
+    if (activeTab.value === 'messages') {
+      await fetchConversations()
+    } else {
+      await fetchChannels()
+    }
+    refreshGlobalUnreadCount()
+    refreshChannelUnread()
+    const token = getToken()
+    if (token && !isConnected.value) {
+      connect(token)
+    }
+  } else {
+    loading.value = false
+  }
+})
+
+watch(isConnected, (newValue) => {
+  if (newValue && currentUser.value) {
+    const destination = `/topic/user/${currentUser.value.id}/messages`
+
+    // 清理旧的订阅
+    if (subscription) {
+      subscription.unsubscribe()
+    }
+
+    subscription = subscribe(destination, (message) => {
+      fetchConversations()
+      if (activeTab.value === 'channels') {
+        fetchChannels()
+      }
+    })
+  }
+})
+
+onUnmounted(() => {
+  if (subscription) {
+    subscription.unsubscribe()
+  }
+  disconnect()
+})
+
+function goToConversation(id) {
+  if (isFloatMode.value) {
+    navigateTo(`/message-box/${id}?float=1`)
+  } else {
+    navigateTo(`/message-box/${id}`)
+  }
+}
+
+function minimize() {
+  floatRoute.value = route.fullPath
+  navigateTo('/')
+}
+</script>
+
+<style scoped>
+.messages-container {
+  position: relative;
+}
+
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+}
+
+.float-control i {
+  cursor: pointer;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+  margin-bottom: 16px;
+}
+
+.tab {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.tab.active {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
+.loading-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.search-container {
+  margin-bottom: 24px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.messages-header {
+  margin-bottom: 24px;
+}
+
+.page-title {
+  padding: 12px;
+  display: none;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.page-title-text {
+  margin-left: 10px;
+}
+
+.page-title-text:hover {
+  text-decoration: underline;
+}
+
+.messages-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.loading-container,
+.error-container,
+.empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.loading-text,
+.error-text,
+.empty-text {
+  font-size: 16px;
+  color: #666;
+}
+
+.error-text {
+  color: #e53e3e;
+}
+
+.conversations-list {
+}
+
+.conversation-item {
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 8px 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.conversation-item:hover {
+  background-color: var(--menu-selected-background-color);
+}
+
+.conversation-avatar {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.avatar-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.conversation-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.conversation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.participant-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.member-count {
+  font-size: 12px;
+  color: gray;
+  flex-shrink: 0;
+}
+
+.message-time {
+  font-size: 12px;
+  color: gray;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.last-message-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.last-message {
+  font-size: 14px;
+  color: gray;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+  padding-right: 10px; /* Add some space between message and badge */
+}
+
+.unread-count-badge {
+  background-color: #f56c6c;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 2px 8px;
+  border-radius: 12px;
+  line-height: 1.5;
+  flex-shrink: 0;
+}
+
+.unread-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #f56c6c;
+  border-radius: 50%;
+  margin-left: 4px;
+}
+
+@media (max-height: 200px) {
+  .page-title {
+    display: block;
+  }
+
+  .tabs,
+  .loading-message,
+  .error-container,
+  .search-container,
+  .empty-container,
+  .conversation-item {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .conversation-item {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .messages-title {
+    font-size: 24px;
+  }
+
+  .conversations-list {
+    max-height: 500px;
+  }
+
+  .conversation-item {
+    padding: 6px 8px;
+  }
+
+  .avatar-img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .participant-name {
+    font-size: 15px;
+  }
+
+  .message-time {
+    font-size: 11px;
+  }
+
+  .last-message {
+    font-size: 13px;
+  }
+}
+</style>

frontend_nuxt/pages/message.vue

@@ -1,26 +1,13 @@
 <template>
   <div class="message-page">
     <div class="message-page-header">
-      <div class="message-tabs">
+      <BaseTabs
-        <div
+        v-model="selectedTab"
-          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
+        :tabs="messageTabs"
-          @click="selectedTab = 'all'"
+        class="message-tabs"
-        >
+        item-class="message-tab-item"
-          消息
+        active-class="selected"
-        </div>
+      />
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'unread' }]"
-          @click="selectedTab = 'unread'"
-        >
-          未读
-        </div>
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
-          @click="selectedTab = 'control'"
-        >
-          消息设置
-        </div>
-      </div>
 
       <div class="message-page-header-right">
         <div class="message-page-header-right-item" @click="markAllRead">
@@ -493,6 +480,19 @@
                     已被管理员拒绝
                   </NotificationContainer>
                 </template>
+                <template v-else-if="item.type === 'POST_FEATURED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您的文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    被收录为精选
+                  </NotificationContainer>
+                </template>
                 <template v-else-if="item.type === 'POST_DELETED'">
                   <NotificationContainer :item="item" :markRead="markRead">
                     管理员
@@ -549,10 +549,16 @@ import {
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 import BaseSwitch from '~/components/BaseSwitch.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
+const messageTabs = [
+  { name: 'all', label: '消息' },
+  { name: 'unread', label: '未读' },
+  { name: 'control', label: '消息设置' },
+]
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
@@ -674,6 +680,8 @@ const formatType = (t) => {
       return '抽奖已开奖'
     case 'POST_DELETED':
       return '帖子被删除'
+    case 'POST_FEATURED':
+      return '文章被精选'
     default:
       return t
   }
@@ -709,6 +717,7 @@ onActivated(async () => {
   justify-content: space-between;
   align-items: center;
   backdrop-filter: var(--blur-10);
+  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .message-page-header-right {
@@ -822,7 +831,6 @@ onActivated(async () => {
 .message-tabs {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid var(--normal-border-color);
 }
 
 .message-tab-item {

frontend_nuxt/pages/new-post.vue

@@ -16,7 +16,7 @@
           <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
             <i class="fa-solid fa-robot"></i>
-            md格式优化
+            MD 格式优化
           </div>
           <div class="post-draft" @click="saveDraft">
             <i class="fa-solid fa-floppy-disk"></i>
@@ -45,7 +45,7 @@
         <div class="prize-row">
           <span class="prize-row-title">奖品图片</span>
           <label class="prize-container">
-            <img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
+            <BaseImage v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
             <i v-else class="fa-solid fa-image default-prize-icon"></i>
             <div class="prize-overlay">上传奖品图片</div>
             <input type="file" class="prize-input" accept="image/*" @change="onPrizeIconChange" />
@@ -66,6 +66,18 @@
             />
           </div>
         </div>
+        <div class="prize-point-row">
+          <span class="prize-row-title">参与所需积分</span>
+          <div class="prize-count-input">
+            <input
+              class="prize-count-input-field"
+              type="number"
+              v-model.number="pointCost"
+              min="0"
+              max="100"
+            />
+          </div>
+        </div>
         <div class="prize-time-row">
           <span class="prize-row-title">抽奖结束时间</span>
           <client-only>
@@ -105,6 +117,7 @@ const showPrizeCropper = ref(false)
 const prizeName = ref('')
 const prizeCount = ref(1)
 const prizeDescription = ref('')
+const pointCost = ref(0)
 const endTime = ref(null)
 const startTime = ref(null)
 const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
@@ -133,6 +146,11 @@ watch(prizeCount, (val) => {
   if (!val || val < 1) prizeCount.value = 1
 })
 
+watch(pointCost, (val) => {
+  if (val === undefined || val === null || val < 0) pointCost.value = 0
+  if (val > 100) pointCost.value = 100
+})
+
 const loadDraft = async () => {
   const token = getToken()
   if (!token) return
@@ -168,6 +186,7 @@ const clearPost = async () => {
   showPrizeCropper.value = false
   prizeDescription.value = ''
   prizeCount.value = 1
+  pointCost.value = 0
   endTime.value = null
   startTime.value = null
 
@@ -315,6 +334,10 @@ const submitPost = async () => {
       toast.error('请选择抽奖结束时间')
       return
     }
+    if (pointCost.value < 0 || pointCost.value > 100) {
+      toast.error('参与积分需在0到100之间')
+      return
+    }
   }
   try {
     const token = getToken()
@@ -354,6 +377,7 @@ const submitPost = async () => {
         prizeDescription: postType.value === 'LOTTERY' ? prizeDescription.value : undefined,
         startTime:
           postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
+        pointCost: postType.value === 'LOTTERY' ? pointCost.value : undefined,
         // 将时间转换为 UTC+8.5 时区 todo: 需要优化
         endTime:
           postType.value === 'LOTTERY'
@@ -498,6 +522,8 @@ const submitPost = async () => {
   display: flex;
   flex-direction: column;
   gap: 20px;
+
+  margin-bottom: 200px;
 }
 
 .prize-row-title {

frontend_nuxt/pages/points.vue

@@ -1,19 +1,12 @@
 <template>
   <div class="point-mall-page">
-    <div class="point-tabs">
+    <BaseTabs
-      <div
+      v-model="selectedTab"
-        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
+      :tabs="pointTabs"
-        @click="selectedTab = 'mall'"
+      class="point-tabs"
-      >
+      item-class="point-tab-item"
-        积分兑换
+      active-class="selected"
-      </div>
+    />
-      <div
-        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
-        @click="selectedTab = 'history'"
-      >
-        积分历史
-      </div>
-    </div>
 
     <template v-if="selectedTab === 'mall'">
       <div class="point-mall-page-content">
@@ -39,7 +32,7 @@
 
         <section class="goods">
           <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-            <img class="goods-item-image" :src="good.image" alt="good.name" />
+            <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
             <div class="goods-item-name">{{ good.name }}</div>
             <div class="goods-item-cost">
               <i class="fas fa-coins"></i>
@@ -136,9 +129,34 @@
                 }}</NuxtLink>
                 加入社区 🎉，获得 {{ item.amount }} 积分
               </template>
+              <template v-else-if="item.type === 'FEATURE'">
+                文章
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                被收录为精选，获得 {{ item.amount }} 积分
+              </template>
               <template v-else-if="item.type === 'REDEEM'">
                 兑换商品，消耗 {{ -item.amount }} 积分
               </template>
+              <template v-else-if="item.type === 'LOTTERY_JOIN'">
+                参与抽奖帖
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                ，消耗 {{ -item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'LOTTERY_REWARD'">
+                你的抽奖帖
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                被
+                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                  item.fromUserName
+                }}</NuxtLink>
+                参与，获得 {{ item.amount }} 积分
+              </template>
               <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
               <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
             </div>
@@ -159,10 +177,14 @@ import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
-
+const pointTabs = [
+  { name: 'mall', label: '积分兑换' },
+  { name: 'history', label: '积分历史' },
+]
 const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)
@@ -176,6 +198,7 @@ const pointRules = [
   '帖子被点赞：每次 10 积分',
   '评论被点赞：每次 10 积分',
   '邀请好友加入可获得 500 积分/次，注意需要使用邀请链接注册',
+  '文章被收录至精选：每次 500 积分',
 ]
 
 const goods = ref([])
@@ -192,6 +215,9 @@ const iconMap = {
   INVITE: 'fas fa-user-plus',
   SYSTEM_ONLINE: 'fas fa-clock',
   REDEEM: 'fas fa-gift',
+  FEATURE: 'fas fa-star',
+  LOTTERY_JOIN: 'fas fa-ticket-alt',
+  LOTTERY_REWARD: 'fas fa-ticket-alt',
 }
 
 onMounted(async () => {

frontend_nuxt/pages/posts/[id]/edit.vue

@@ -15,7 +15,7 @@
           <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
             <i class="fa-solid fa-robot"></i>
-            md格式优化
+            MD 格式优化
           </div>
           <div class="post-cancel" @click="cancelEdit">取消</div>
           <div

frontend_nuxt/pages/posts/[id]/index.vue

@@ -47,7 +47,7 @@
       <div class="info-content-container author-info-container">
         <div class="user-avatar-container" @click="gotoProfile">
           <div class="user-avatar-item">
-            <img class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
+            <BaseImage class="user-avatar-item-img" :src="author.avatar" alt="avatar" />
           </div>
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
@@ -94,12 +94,12 @@
         </div>
       </div>
 
-      <div v-if="lottery" class="prize-container">
+      <div v-if="lottery" class="post-prize-container">
         <div class="prize-content">
           <div class="prize-info">
             <div class="prize-info-left">
               <div class="prize-icon">
-                <img
+                <BaseImage
                   class="prize-icon-img"
                   v-if="lottery.prizeIcon"
                   :src="lottery.prizeIcon"
@@ -119,7 +119,9 @@
                   class="join-prize-button"
                   @click="joinLottery"
                 >
-                  <div class="join-prize-button-text">参与抽奖</div>
+                  <div class="join-prize-button-text">
+                    参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
+                  </div>
                 </div>
                 <div v-else-if="hasJoined" class="join-prize-button-disabled">
                   <div class="join-prize-button-text">已参与</div>
@@ -134,7 +136,9 @@
               class="join-prize-button"
               @click="joinLottery"
             >
-              <div class="join-prize-button-text">参与抽奖</div>
+              <div class="join-prize-button-text">
+                参与抽奖 <i class="fas fa-coins"></i> {{ lottery.pointCost }}
+              </div>
             </div>
             <div v-else-if="hasJoined" class="join-prize-button-disabled">
               <div class="join-prize-button-text">已参与</div>
@@ -142,7 +146,7 @@
           </div>
         </div>
         <div class="prize-member-container">
-          <img
+          <BaseImage
             v-for="p in lotteryParticipants"
             :key="p.id"
             class="prize-member-avatar"
@@ -153,7 +157,7 @@
           <div v-if="lotteryEnded && lotteryWinners.length" class="prize-member-winner">
             <i class="fas fa-medal medal-icon"></i>
             <span class="prize-member-winner-name">获奖者: </span>
-            <img
+            <BaseImage
               v-for="w in lotteryWinners"
               :key="w.id"
               class="prize-member-avatar"
@@ -260,7 +264,6 @@ import { getMedalTitle } from '~/utils/medal'
 import { toast } from '~/main'
 import { getToken, authState } from '~/utils/auth'
 import TimeManager from '~/utils/time'
-import { useRouter } from 'vue-router'
 import { useIsMobile } from '~/utils/screen'
 import Dropdown from '~/components/Dropdown.vue'
 import { ClientOnly } from '#components'
@@ -272,7 +275,6 @@ const API_BASE_URL = config.public.apiBaseUrl
 
 const route = useRoute()
 const postId = route.params.id
-const router = useRouter()
 
 const title = ref('')
 const author = ref('')
@@ -812,11 +814,12 @@ const joinLottery = async () => {
     method: 'POST',
     headers: { Authorization: `Bearer ${token}` },
   })
+  const data = await res.json().catch(() => ({}))
   if (res.ok) {
     toast.success('已参与抽奖')
     await refreshPost()
   } else {
-    toast.error('操作失败')
+    toast.error(data.error || '操作失败')
   }
 }
 
@@ -1264,7 +1267,7 @@ onMounted(async () => {
   position: relative;
 }
 
-.prize-container {
+.post-prize-container {
   margin-top: 20px;
   display: flex;
   flex-direction: column;

frontend_nuxt/pages/settings.vue

@@ -15,7 +15,7 @@
         <div class="avatar-row">
           <!-- label 充当点击区域，内部隐藏 input -->
           <label class="avatar-container">
-            <img :src="avatar" class="avatar-preview" alt="avatar" />
+            <BaseImage :src="avatar" class="avatar-preview" alt="avatar" />
             <!-- 半透明蒙层：hover 时出现 -->
             <div class="avatar-overlay">更换头像</div>
             <input type="file" class="avatar-input" accept="image/*" @change="onAvatarChange" />

frontend_nuxt/pages/signup.vue

@@ -70,19 +70,35 @@
 
     <div class="other-signup-page-content">
       <div class="signup-page-button" @click="signupWithGoogle">
-        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/google.svg"
+          alt="Google Logo"
+        />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithGithub">
-        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/github.svg"
+          alt="GitHub Logo"
+        />
         <div class="signup-page-button-text">GitHub 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithDiscord">
-        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/discord.svg"
+          alt="Discord Logo"
+        />
         <div class="signup-page-button-text">Discord 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithTwitter">
-        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
+        <BaseImage
+          class="signup-page-button-icon"
+          src="~/assets/icons/twitter.svg"
+          alt="Twitter Logo"
+        />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
     </div>

frontend_nuxt/pages/users/[id].vue

@@ -7,26 +7,32 @@
     <div v-else>
       <div class="profile-page-header">
         <div class="profile-page-header-avatar">
-          <img :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
+          <BaseImage :src="user.avatar" alt="avatar" class="profile-page-header-avatar-img" />
         </div>
         <div class="profile-page-header-user-info">
           <div class="profile-page-header-user-info-name">{{ user.username }}</div>
           <div class="profile-page-header-user-info-description">{{ user.introduction }}</div>
-          <div
+          <div class="profile-page-header-user-info-buttons">
-            v-if="!isMine && !subscribed"
+            <div
-            class="profile-page-header-subscribe-button"
+              v-if="!isMine && !subscribed"
-            @click="subscribeUser"
+              class="profile-page-header-subscribe-button"
-          >
+              @click="subscribeUser"
-            <i class="fas fa-user-plus"></i>
+            >
-            关注
+              <i class="fas fa-user-plus"></i>
-          </div>
+              关注
-          <div
+            </div>
-            v-if="!isMine && subscribed"
+            <div
-            class="profile-page-header-unsubscribe-button"
+              v-if="!isMine && subscribed"
-            @click="unsubscribeUser"
+              class="profile-page-header-unsubscribe-button"
-          >
+              @click="unsubscribeUser"
-            <i class="fas fa-user-minus"></i>
+            >
-            取消关注
+              <i class="fas fa-user-minus"></i>
+              取消关注
+            </div>
+            <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
+              <i class="fas fa-paper-plane"></i>
+              发私信
+            </div>
           </div>
           <LevelProgress
             :exp="levelInfo.exp"
@@ -66,36 +72,18 @@
         </div>
       </div>
 
-      <div class="profile-tabs">
+      <BaseTabs
-        <div
+        v-model="selectedTab"
-          :class="['profile-tabs-item', { selected: selectedTab === 'summary' }]"
+        :tabs="profileTabs"
-          @click="selectedTab = 'summary'"
+        class="profile-tabs"
-        >
+        item-class="profile-tabs-item"
-          <i class="fas fa-chart-line"></i>
+        active-class="selected"
-          <div class="profile-tabs-item-label">总结</div>
+      >
-        </div>
+        <template #tab="{ tab }">
-        <div
+          <i :class="tab.icon"></i>
-          :class="['profile-tabs-item', { selected: selectedTab === 'timeline' }]"
+          <div class="profile-tabs-item-label">{{ tab.label }}</div>
-          @click="selectedTab = 'timeline'"
+        </template>
-        >
+      </BaseTabs>
-          <i class="fas fa-clock"></i>
-          <div class="profile-tabs-item-label">时间线</div>
-        </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'following' }]"
-          @click="selectedTab = 'following'"
-        >
-          <i class="fas fa-user-plus"></i>
-          <div class="profile-tabs-item-label">关注</div>
-        </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
-          @click="selectedTab = 'achievements'"
-        >
-          <i class="fas fa-medal"></i>
-          <div class="profile-tabs-item-label">勋章</div>
-        </div>
-      </div>
 
       <div v-if="tabLoading" class="tab-loading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
@@ -206,26 +194,13 @@
         </div>
 
         <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-          <div class="timeline-tabs">
+          <BaseTabs
-            <div
+            v-model="timelineFilter"
-              :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
+            :tabs="timelineTabs"
-              @click="timelineFilter = 'all'"
+            class="timeline-tabs"
-            >
+            item-class="timeline-tab-item"
-              全部
+            active-class="selected"
-            </div>
+          />
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
-              @click="timelineFilter = 'articles'"
-            >
-              文章
-            </div>
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
-              @click="timelineFilter = 'comments'"
-            >
-              评论和回复
-            </div>
-          </div>
           <BasePlaceholder
             v-if="filteredTimelineItems.length === 0"
             text="暂无时间线"
@@ -292,26 +267,38 @@
         </div>
 
         <div v-else-if="selectedTab === 'following'" class="follow-container">
-          <div class="follow-tabs">
+          <BaseTabs
-            <div
+            v-model="followTab"
-              :class="['follow-tab-item', { selected: followTab === 'followers' }]"
+            :tabs="followTabs"
-              @click="followTab = 'followers'"
+            class="follow-tabs"
-            >
+            item-class="follow-tab-item"
-              关注者
+            active-class="selected"
-            </div>
+          />
-            <div
-              :class="['follow-tab-item', { selected: followTab === 'following' }]"
-              @click="followTab = 'following'"
-            >
-              正在关注
-            </div>
-          </div>
           <div class="follow-list">
             <UserList v-if="followTab === 'followers'" :users="followers" />
             <UserList v-else :users="followings" />
           </div>
         </div>
 
+        <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
+          <div v-if="favoritePosts.length > 0">
+            <BaseTimeline :items="favoritePosts">
+              <template #item="{ item }">
+                <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                  {{ item.post.title }}
+                </NuxtLink>
+                <div class="timeline-snippet">
+                  {{ stripMarkdown(item.post.snippet) }}
+                </div>
+                <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
+              </template>
+            </BaseTimeline>
+          </div>
+          <div v-else>
+            <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
+          </div>
+        </div>
+
         <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
           <AchievementList :medals="medals" :can-select="isMine" />
         </div>
@@ -322,7 +309,7 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import AchievementList from '~/components/AchievementList.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
@@ -333,6 +320,7 @@ import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
 import { stripMarkdown, stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
+import BaseTabs from '~/components/BaseTabs.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
@@ -340,14 +328,30 @@ definePageMeta({
   alias: ['/users/:id/'],
 })
 const route = useRoute()
-const router = useRouter()
 const username = route.params.id
 
 const user = ref({})
 const hotPosts = ref([])
 const hotReplies = ref([])
 const hotTags = ref([])
+const favoritePosts = ref([])
 const timelineItems = ref([])
+const profileTabs = [
+  { name: 'summary', label: '总结', icon: 'fas fa-chart-line' },
+  { name: 'timeline', label: '时间线', icon: 'fas fa-clock' },
+  { name: 'following', label: '关注', icon: 'fas fa-user-plus' },
+  { name: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
+  { name: 'achievements', label: '勋章', icon: 'fas fa-medal' },
+]
+const timelineTabs = [
+  { name: 'all', label: '全部' },
+  { name: 'articles', label: '文章' },
+  { name: 'comments', label: '评论和回复' },
+]
+const followTabs = [
+  { name: 'followers', label: '关注者' },
+  { name: 'following', label: '正在关注' },
+]
 const timelineFilter = ref('all')
 const filteredTimelineItems = computed(() => {
   if (timelineFilter.value === 'articles') {
@@ -364,7 +368,7 @@ const subscribed = ref(false)
 const isLoading = ref(true)
 const tabLoading = ref(false)
 const selectedTab = ref(
-  ['summary', 'timeline', 'following', 'achievements'].includes(route.query.tab)
+  ['summary', 'timeline', 'following', 'favorites', 'achievements'].includes(route.query.tab)
     ? route.query.tab
     : 'summary',
 )
@@ -401,7 +405,7 @@ const fetchUser = async () => {
     user.value = data
     subscribed.value = !!data.subscribed
   } else if (res.status === 404) {
-    router.replace('/404')
+    navigateTo('/404')
   }
 }
 
@@ -467,6 +471,16 @@ const fetchFollowUsers = async () => {
   followings.value = followingRes.ok ? await followingRes.json() : []
 }
 
+const fetchFavorites = async () => {
+  const res = await fetch(`${API_BASE_URL}/api/users/${username}/subscribed-posts`)
+  if (res.ok) {
+    const data = await res.json()
+    favoritePosts.value = data.map((p) => ({ icon: 'fas fa-bookmark', post: p }))
+  } else {
+    favoritePosts.value = []
+  }
+}
+
 const loadSummary = async () => {
   tabLoading.value = true
   await fetchSummary()
@@ -485,6 +499,12 @@ const loadFollow = async () => {
   tabLoading.value = false
 }
 
+const loadFavorites = async () => {
+  tabLoading.value = true
+  await fetchFavorites()
+  tabLoading.value = false
+}
+
 const fetchAchievements = async () => {
   const res = await fetch(`${API_BASE_URL}/api/medals?userId=${user.value.id}`)
   if (res.ok) {
@@ -537,6 +557,28 @@ const unsubscribeUser = async () => {
   }
 }
 
+const sendMessage = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/messages/conversations`, {
+      method: 'POST',
+      body: JSON.stringify({
+        recipientId: user.value.id,
+      }),
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    })
+    const result = await response.json()
+    navigateTo(`/message-box/${result.conversationId}`)
+  } catch (e) {
+    toast.error('无法发起私信')
+    console.error(e)
+  }
+}
+
 const gotoTag = (tag) => {
   const value = encodeURIComponent(tag.id ?? tag.name)
   navigateTo({ path: '/', query: { tags: value } }, { replace: true })
@@ -551,6 +593,8 @@ const init = async () => {
       await loadTimeline()
     } else if (selectedTab.value === 'following') {
       await loadFollow()
+    } else if (selectedTab.value === 'favorites') {
+      await loadFavorites()
     } else if (selectedTab.value === 'achievements') {
       await loadAchievements()
     }
@@ -564,11 +608,13 @@ const init = async () => {
 onMounted(init)
 
 watch(selectedTab, async (val) => {
-  // router.replace({ query: { ...route.query, tab: val } })
+  // navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
   if (val === 'timeline' && timelineItems.value.length === 0) {
     await loadTimeline()
   } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {
     await loadFollow()
+  } else if (val === 'favorites' && favoritePosts.value.length === 0) {
+    await loadFavorites()
   } else if (val === 'achievements' && medals.value.length === 0) {
     await loadAchievements()
   }
@@ -614,6 +660,12 @@ watch(selectedTab, async (val) => {
   color: #666;
 }
 
+.profile-page-header-user-info-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
 .profile-page-header-subscribe-button {
   display: flex;
   flex-direction: row;
@@ -867,6 +919,10 @@ watch(selectedTab, async (val) => {
 .follow-container {
 }
 
+.favorites-container {
+  padding: 10px;
+}
+
 .follow-tabs {
   display: flex;
   flex-direction: row;

frontend_nuxt/public/default-avatar.svg

@@ -0,0 +1 @@
+<svg t="1755789348718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13787" width="400" height="400"><path d="M152.773168 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288198 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288198 56.288199h-45.030559c-37.525466 0-56.281839-18.762733-56.281839-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13788"></path><path d="M409.294708 763.229814h228.968944v146.285714c0 63.22723-51.263602 114.484472-114.484472 114.484472-63.23359 0-114.484472-51.257242-114.484472-114.484472v-146.285714z" fill="#C5AC95" p-id="13789"></path><path d="M73.97605 520.357366c0 55.957466 45.361292 101.318758 101.318757 101.318758 55.951106 0 101.312398-45.361292 101.312398-101.318758 0-55.951106-45.361292-101.312398-101.318758-101.312397-55.951106 0-101.312398 45.361292-101.312397 101.318758z" fill="#C9AB90" p-id="13790"></path><path d="M490.48964 2.531379c186.520646 0 337.710112 151.195826 337.710112 337.716472v382.740671c0 99.474286-80.63523 180.109516-180.109516 180.109515H287.858484c-74.599354 0-135.078957-60.485963-135.078956-135.085317V340.247851C152.773168 153.727205 303.968994 2.531379 490.48964 2.531379z" fill="#EBD3BD" p-id="13791"></path><path d="M400.434882 509.099727c124.342857 0 225.140075 93.241242 225.140075 208.259975 0 5.679702-0.25441 11.308522-0.731429 16.880099H176.019876a195.278708 195.278708 0 0 1-0.731429-16.880099c0-115.018733 100.797217-208.259975 225.146435-208.259975zM805.684472 306.474932h45.030559c37.525466 0 56.288199 18.762733 56.288199 56.288198v45.024199c0 37.525466-18.762733 56.288199-56.288199 56.288199h-45.030559c-37.525466 0-56.288199-18.762733-56.288199-56.288199v-45.030559c0-37.525466 18.762733-56.288199 56.288199-56.288199z" fill="#4D4132" p-id="13792"></path><path d="M749.402634 520.357366c0 55.957466 45.361292 101.318758 101.312397 101.318758s101.318758-45.361292 101.318758-101.318758c0-55.951106-45.367652-101.312398-101.318758-101.312397s-101.318758 45.361292-101.318758 101.318758z" fill="#EBD3BD" p-id="13793"></path><path d="M805.684472 509.099727a45.030559 45.030559 0 1 0 90.061118 0.01908 45.030559 45.030559 0 0 0-90.061118-0.01908z" fill="#E89E80" p-id="13794"></path><path d="M175.288447 374.01441a90.061118 90.061118 0 1 0 180.115876 0c0-49.737143-40.323975-90.054758-90.061118-90.054758s-90.054758 40.323975-90.054758 90.061118z" fill="#FFFFFF" p-id="13795"></path><path d="M220.319006 379.64323a39.401739 39.401739 0 1 0 78.803478 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13796"></path><path d="M490.48964 374.01441c0 49.737143 40.323975 90.061118 90.061118 90.061118s90.048398-40.323975 90.048397-90.061118-40.317615-90.054758-90.054757-90.054758-90.061118 40.323975-90.061118 90.061118z" fill="#FFFFFF" p-id="13797"></path><path d="M535.520199 379.64323a39.401739 39.401739 0 1 0 78.797118 0 39.401739 39.401739 0 0 0-78.803478 0z" fill="#514141" p-id="13798"></path><path d="M394.806062 362.75677a40.18405 40.18405 0 0 1 37.754435 26.458634l41.99036 115.47031A78.803478 78.803478 0 0 1 400.504845 610.412124h-17.789615a78.803478 78.803478 0 0 1-72.920249-108.633043l46.207205-112.970733a41.920398 41.920398 0 0 1 38.797516-26.051578z" fill="#E89E80" p-id="13799"></path><path d="M165.36646 190.807453m38.16149 0l101.763975 0q38.161491 0 38.161491 38.161491l0 0q0 38.161491-38.161491 38.161491l-101.763975 0q-38.161491 0-38.16149-38.161491l0 0q0-38.161491 38.16149-38.161491Z" fill="#4D4132" p-id="13800"></path><path d="M483.378882 190.807453m38.161491 0l127.204969 0q38.161491 0 38.16149 38.161491l0 0q0 38.161491-38.16149 38.161491l-127.204969 0q-38.161491 0-38.161491-38.161491l0 0q0-38.161491 38.161491-38.161491Z" fill="#4D4132" p-id="13801"></path></svg>

frontend_nuxt/utils/markdown.js

@@ -1,5 +1,11 @@
+// markdown.js
 import hljs from 'highlight.js/lib/common'
+import MarkdownIt from 'markdown-it'
+import sanitizeHtml from 'sanitize-html'
+import { toast } from '../main'
+import { tiebaEmoji } from './tiebaEmoji'
 
+// 动态切换 hljs 主题（保持你原有逻辑）
 if (typeof window !== 'undefined') {
   const theme =
     document.documentElement.dataset.theme ||
@@ -10,10 +16,8 @@ if (typeof window !== 'undefined') {
     import('highlight.js/styles/atom-one-light.css')
   }
 }
-import MarkdownIt from 'markdown-it'
-import { toast } from '../main'
-import { tiebaEmoji } from './tiebaEmoji'
 
+/** @section 自定义插件：@mention */
 function mentionPlugin(md) {
   const mentionReg = /^@\[([^\]]+)\]/
   function mention(state, silent) {
@@ -27,6 +31,7 @@ function mentionPlugin(md) {
         ['href', `/users/${match[1]}`],
         ['target', '_blank'],
         ['class', 'mention-link'],
+        ['rel', 'noopener noreferrer'],
       ]
       const text = state.push('text', '', 0)
       text.content = `@${match[1]}`
@@ -38,11 +43,12 @@ function mentionPlugin(md) {
   md.inline.ruler.before('emphasis', 'mention', mention)
 }
 
+/** @section 自定义插件：贴吧表情 :tieba123: */
 function tiebaEmojiPlugin(md) {
   md.renderer.rules['tieba-emoji'] = (tokens, idx) => {
     const name = tokens[idx].content
     const file = tiebaEmoji[name]
-    return `<img class="emoji" src="${file}" alt="${name}">`
+    return `<BaseImage class="emoji" src="${file}" alt="${name}">`
   }
   md.inline.ruler.before('emphasis', 'tieba-emoji', (state, silent) => {
     const pos = state.pos
@@ -60,7 +66,7 @@ function tiebaEmojiPlugin(md) {
   })
 }
 
-// 链接在新窗口打开
+/** @section 链接外开 */
 function linkPlugin(md) {
   const defaultRender =
     md.renderer.rules.link_open ||
@@ -74,7 +80,6 @@ function linkPlugin(md) {
 
     if (hrefIndex >= 0) {
       const href = token.attrs[hrefIndex][1]
-      // 如果是外部链接，添加 target="_blank" 和 rel="noopener noreferrer"
       if (href.startsWith('http://') || href.startsWith('https://')) {
         token.attrPush(['target', '_blank'])
         token.attrPush(['rel', 'noopener noreferrer'])
@@ -85,8 +90,9 @@ function linkPlugin(md) {
   }
 }
 
+/** @section MarkdownIt 实例：开启 HTML，但配合强净化 */
 const md = new MarkdownIt({
-  html: false,
+  html: true, // ⭐ 允许行内 HTML（为 <video> 服务）
   linkify: true,
   breaks: true,
   highlight: (str, lang) => {
@@ -100,16 +106,105 @@ const md = new MarkdownIt({
       .trim()
       .split('\n')
       .map(() => `<div class="line-number"></div>`)
+    // 保留你原有的 CodeBlock + 复制按钮 + 行号结构
     return `<pre class="code-block"><button class="copy-code-btn">Copy</button><div class="line-numbers">${lineNumbers.join('')}</div><code class="hljs language-${lang || ''}">${code.trim()}</code></pre>`
   },
 })
 
 md.use(mentionPlugin)
 md.use(tiebaEmojiPlugin)
-md.use(linkPlugin) // 添加链接插件
+md.use(linkPlugin)
 
+/** @section sanitize-html 配置：只白名单需要的标签/属性/类名 */
+const SANITIZE_CFG = {
+  // 允许的标签（包含你代码块里用到的 button/div）
+  allowedTags: [
+    'a',
+    'p',
+    'div',
+    'span',
+    'pre',
+    'code',
+    'button',
+    'img',
+    'br',
+    'hr',
+    'blockquote',
+    'strong',
+    'em',
+    'ul',
+    'ol',
+    'li',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'td',
+    'th',
+    'video',
+    'source',
+  ],
+  // 允许的属性
+  allowedAttributes: {
+    a: ['href', 'name', 'target', 'rel', 'class'],
+    img: ['src', 'alt', 'title', 'width', 'height', 'class'],
+    div: ['class'],
+    span: ['class'],
+    pre: ['class'],
+    code: ['class'],
+    button: ['class'],
+    video: [
+      'controls',
+      'autoplay',
+      'muted',
+      'loop',
+      'playsinline',
+      'poster',
+      'preload',
+      'width',
+      'height',
+      'crossorigin',
+    ],
+    source: ['src', 'type'],
+  },
+  // 允许的类名（保留你的样式钩子）
+  allowedClasses: {
+    a: ['mention-link'],
+    img: ['emoji'],
+    pre: ['code-block'],
+    div: ['line-numbers', 'line-number'],
+    code: ['hljs', /^language-/],
+    button: ['copy-code-btn'],
+  },
+  // 允许的协议（视频可能是 blob: / data:）
+  allowedSchemes: ['http', 'https', 'data', 'blob'],
+  allowProtocolRelative: false,
+  // 统一移除所有 on* 事件、style 等（默认就会清理）
+  transformTags: {
+    // 没写 controls 的 video，强制加上（避免静默自动播放）
+    video: (tagName, attribs) => {
+      const attrs = { ...attribs }
+      if (!('controls' in attrs)) attrs.controls = 'controls'
+      // 安全建议：若允许 autoplay，默认要求 muted
+      if ('autoplay' in attrs && !('muted' in attrs)) {
+        attrs.muted = 'muted'
+      }
+      return { tagName, attribs: attrs }
+    },
+  },
+}
+
+/** @section 渲染 & 事件 */
 export function renderMarkdown(text) {
-  return md.render(text || '')
+  const raw = md.render(text || '')
+  // ⭐ 核心：对最终 HTML 进行一次净化
+  return sanitizeHtml(raw, SANITIZE_CFG)
 }
 
 export function handleMarkdownClick(e) {
@@ -124,20 +219,16 @@ export function handleMarkdownClick(e) {
   }
 }
 
+/** @section 纯文本提取（保持你原有“统一正则法”） */
 export function stripMarkdown(text) {
   const html = md.render(text || '')
-
-  // 统一使用正则表达式方法，确保服务端和客户端行为一致
   let plainText = html.replace(/<[^>]+>/g, '')
-
-  // 标准化空白字符处理
   plainText = plainText
-    .replace(/\r\n/g, '\n') // Windows换行符转为Unix格式
+    .replace(/\r\n/g, '\n')
-    .replace(/\r/g, '\n') // 旧Mac换行符转为Unix格式
+    .replace(/\r/g, '\n')
-    .replace(/[ \t]+/g, ' ') // 合并空格和制表符为单个空格
+    .replace(/[ \t]+/g, ' ')
-    .replace(/\n{3,}/g, '\n\n') // 最多保留两个连续换行（一个空行）
+    .replace(/\n{3,}/g, '\n\n')
     .trim()
-
   return plainText
 }
 
@@ -146,6 +237,5 @@ export function stripMarkdownLength(text, length) {
   if (!length || plain.length <= length) {
     return plain
   }
-  // 截断并加省略号
   return plain.slice(0, length) + '...'
 }

frontend_nuxt/utils/medal.js

@@ -1,6 +1,7 @@
 export const medalTitles = {
   COMMENT: '评论达人',
   POST: '发帖达人',
+  FEATURED: '精选作者',
   SEED: '种子用户',
   CONTRIBUTOR: '贡献者',
   PIONEER: '开山鼻祖',