Fix null multiple field for poll posts

feat(poll): use BaseSwitch for multiple selection

.github/ISSUE_TEMPLATE/新功能建议.md

@@ -0,0 +1,20 @@
+---
+name: 新功能建议
+about: 请为该项目提出一个想法
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**你的功能请求是否与某个问题相关？请描述。**
+请清晰、简洁地说明问题。例如：“我经常因为……而感到困扰。”
+
+**你期望的解决方案**
+请清晰、简洁地描述你希望发生的事情/功能如何工作。
+
+**你考虑过的替代方案**
+请清晰、简洁地说明你已考虑过的其他解决方案或功能。
+
+**其他上下文**
+在此添加与功能请求相关的其他信息或截图。

.github/ISSUE_TEMPLATE/错误-bug报告.md

@@ -0,0 +1,41 @@
+---
+name: 错误/Bug报告
+about: 创建报告以帮助我们改进
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**描述 Bug**
+对该 Bug 进行清晰简明的描述。
+
+**复现步骤**
+复现该问题的步骤：
+
+1. 进入 '...'
+2. 点击 '...'
+3. 下拉到 '...'
+4. 看到错误
+
+**预期行为**
+清晰简明地描述你期望发生的情况。
+
+**截图**
+如果适用，请添加截图以帮助解释问题。
+
+**桌面端（请完成以下信息）：**
+
+* 操作系统：\[例如 iOS]
+* 浏览器：\[例如 Chrome、Safari]
+* 版本：\[例如 22]
+
+**移动端（请完成以下信息）：**
+
+* 设备：\[例如 iPhone6]
+* 操作系统：\[例如 iOS8.1]
+* 浏览器：\[例如 系统自带浏览器、Safari]
+* 版本：\[例如 22]
+
+**附加上下文**
+在此添加与问题相关的其他上下文信息。

CODE_OF_CONDUCT.md

@@ -0,0 +1,32 @@
+# OpenIsle Code of Conduct
+
+Like the technical community as a whole, the OpenIsle team and community is made up of a mixture of professionals and volunteers from all over the world, working on every aspect of the mission - including mentorship, teaching, and connecting people.
+
+Diversity is one of our huge strengths, but it can also lead to communication issues and unhappiness. To that end, we have a few ground rules that we ask people to adhere to. This code applies equally to founders, mentors and those seeking help and guidance.
+
+This isn’t an exhaustive list of things that you can’t do. Rather, take it in the spirit in which it’s intended - a guide to make it easier to enrich all of us and the technical communities in which we participate.
+
+This code of conduct applies to all spaces managed by the OpenIsle project or . This includes IRC, the mailing lists, the issue tracker, DSF events, and any other forums created by the project team which the community uses for communication. In addition, violations of this code outside these spaces may affect a person's ability to participate within them.
+
+If you believe someone is violating the code of conduct, we ask that you report it by emailing [](mailto:). For more details please see our 
+
+- **Be friendly and patient.**
+- **Be welcoming.** We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
+- **Be considerate.** Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that we're a world-wide community, so you might not be communicating in someone else's primary language.
+- **Be respectful.** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It’s important to remember that a community where people feel uncomfortable or threatened is not a productive one. Members of the OpenIsle community should be respectful when dealing with other members as well as with people outside the OpenIsle community.
+- **Be careful in the words that you choose.** We are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior aren't acceptable. This includes, but is not limited to: 
+ - Violent threats or language directed against another person.
+ - Discriminatory jokes and language.
+ - Posting sexually explicit or violent material.
+ - Posting (or threatening to post) other people's personally identifying information ("doxing").
+ - Personal insults, especially those using racist or sexist terms.
+ - Unwelcome sexual attention.
+ - Advocating for, or encouraging, any of the above behavior.
+ - Repeated harassment of others. In general, if someone asks you to stop, then stop.
+- **When we disagree, try to understand why.** Disagreements, both social and technical, happen all the time and OpenIsle is no exception. It is important that we resolve disagreements and differing views constructively. Remember that we’re different. The strength of OpenIsle comes from its varied community, people from a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to err and blaming each other doesn’t get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
+
+Original text courtesy of the [Speak Up! project](http://web.archive.org/web/20141109123859/http://speakup.io/coc.html).
+
+## Questions?
+
+If you have questions, please see . If that doesn't answer your questions, feel free to [contact us](mailto:).

CONTRIBUTING.md

@@ -58,6 +58,8 @@ cp open-isle.env.example open-isle.env
 
 > Step3 前端部署
 
+**⚠️ 环境要求：Node.js 版本最低 20.0.0（因为 Nuxt 框架要求）**
+
 前端可以依赖本机部署的后端，也可以直接调用线上的后端接口
 
 ```shell

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

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

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

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

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

@@ -7,9 +7,11 @@ import lombok.RequiredArgsConstructor;
 import org.springframework.security.core.Authentication;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 @RestController
@@ -25,4 +27,10 @@ public class PointHistoryController {
                 .map(pointHistoryMapper::toDto)
                 .collect(Collectors.toList());
     }
+
+    @GetMapping("/trend")
+    public List<Map<String, Object>> trend(Authentication auth,
+                                          @RequestParam(value = "days", defaultValue = "30") int days) {
+        return pointService.trend(auth.getName(), days);
+    }
 }

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

@@ -3,6 +3,7 @@ package com.openisle.controller;
 import com.openisle.dto.PostDetailDto;
 import com.openisle.dto.PostRequest;
 import com.openisle.dto.PostSummaryDto;
+import com.openisle.dto.PollDto;
 import com.openisle.mapper.PostMapper;
 import com.openisle.model.Post;
 import com.openisle.service.*;
@@ -41,7 +42,9 @@ 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(),
+                req.getOptions(), req.getMultiple());
         draftService.deleteDraft(auth.getName());
         PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
         dto.setReward(levelService.awardForPost(auth.getName()));
@@ -85,6 +88,17 @@ public class PostController {
         return ResponseEntity.ok().build();
     }
 
+    @GetMapping("/{id}/poll/progress")
+    public ResponseEntity<PollDto> pollProgress(@PathVariable Long id) {
+        return ResponseEntity.ok(postMapper.toSummaryDto(postService.getPoll(id)).getPoll());
+    }
+
+    @PostMapping("/{id}/poll/vote")
+    public ResponseEntity<Void> vote(@PathVariable Long id, @RequestParam("option") List<Integer> option, Authentication auth) {
+        postService.votePoll(id, auth.getName(), option);
+        return ResponseEntity.ok().build();
+    }
+
     @GetMapping
     public List<PostSummaryDto> listPosts(@RequestParam(value = "categoryId", required = false) Long categoryId,
                                    @RequestParam(value = "categoryIds", required = false) List<Long> categoryIds,

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

@@ -36,6 +36,7 @@ public class ReactionController {
                                                    Authentication auth) {
         Reaction reaction = reactionService.reactToPost(auth.getName(), postId, req.getType());
         if (reaction == null) {
+            pointService.deductForReactionOfPost(auth.getName(), postId);
             return ResponseEntity.noContent().build();
         }
         ReactionDto dto = reactionMapper.toDto(reaction);
@@ -50,6 +51,7 @@ public class ReactionController {
                                                       Authentication auth) {
         Reaction reaction = reactionService.reactToComment(auth.getName(), commentId, req.getType());
         if (reaction == null) {
+            pointService.deductForReactionOfComment(auth.getName(), commentId);
             return ResponseEntity.noContent().build();
         }
         ReactionDto dto = reactionMapper.toDto(reaction);
@@ -57,4 +59,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

@@ -8,6 +8,9 @@ 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

@@ -10,6 +10,9 @@ import java.util.List;
 @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;

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

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

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

@@ -0,0 +1,17 @@
+package com.openisle.dto;
+
+import lombok.Data;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.Map;
+
+@Data
+public class PollDto {
+    private List<String> options;
+    private Map<Integer, Integer> votes;
+    private LocalDateTime endTime;
+    private List<AuthorDto> participants;
+    private Map<Integer, List<AuthorDto>> optionParticipants;
+    private boolean multiple;
+}

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

@@ -23,7 +23,11 @@ public class PostRequest {
     private String prizeDescription;
     private String prizeIcon;
     private Integer prizeCount;
+    private Integer pointCost;
     private LocalDateTime startTime;
     private LocalDateTime endTime;
+    // fields for poll posts
+    private List<String> options;
+    private Boolean multiple;
 }
 

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

@@ -31,6 +31,7 @@ public class PostSummaryDto {
     private int pointReward;
     private PostType type;
     private LotteryDto lottery;
+    private PollDto poll;
     private boolean rssExcluded;
     private boolean closed;
 }

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

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

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

@@ -5,18 +5,24 @@ import com.openisle.dto.PostDetailDto;
 import com.openisle.dto.PostSummaryDto;
 import com.openisle.dto.ReactionDto;
 import com.openisle.dto.LotteryDto;
+import com.openisle.dto.PollDto;
+import com.openisle.dto.AuthorDto;
 import com.openisle.model.CommentSort;
 import com.openisle.model.Post;
 import com.openisle.model.LotteryPost;
+import com.openisle.model.PollPost;
 import com.openisle.model.User;
+import com.openisle.model.PollVote;
 import com.openisle.service.CommentService;
 import com.openisle.service.ReactionService;
 import com.openisle.service.SubscriptionService;
+import com.openisle.repository.PollVoteRepository;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Component;
 
 import java.time.LocalDateTime;
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 /** Mapper responsible for converting posts into DTOs. */
@@ -32,6 +38,7 @@ public class PostMapper {
     private final UserMapper userMapper;
     private final TagMapper tagMapper;
     private final CategoryMapper categoryMapper;
+    private final PollVoteRepository pollVoteRepository;
 
     public PostSummaryDto toSummaryDto(Post post) {
         PostSummaryDto dto = new PostSummaryDto();
@@ -86,11 +93,26 @@ 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()));
             l.setWinners(lp.getWinners().stream().map(userMapper::toAuthorDto).collect(Collectors.toList()));
             dto.setLottery(l);
         }
+
+        if (post instanceof PollPost pp) {
+            PollDto p = new PollDto();
+            p.setOptions(pp.getOptions());
+            p.setVotes(pp.getVotes());
+            p.setEndTime(pp.getEndTime());
+            p.setParticipants(pp.getParticipants().stream().map(userMapper::toAuthorDto).collect(Collectors.toList()));
+            Map<Integer, List<AuthorDto>> optionParticipants = pollVoteRepository.findByPostId(pp.getId()).stream()
+                    .collect(Collectors.groupingBy(PollVote::getOptionIndex,
+                            Collectors.mapping(v -> userMapper.toAuthorDto(v.getUser()), Collectors.toList())));
+            p.setOptionParticipants(optionParticipants);
+            p.setMultiple(Boolean.TRUE.equals(pp.getMultiple()));
+            dto.setPoll(p);
+        }
     }
 }

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

@@ -22,7 +22,7 @@ public class Draft {
 
     private String title;
 
-    @Column(columnDefinition = "TEXT")
+    @Column(columnDefinition = "LONGTEXT")
     private String content;
 
     @ManyToOne(fetch = FetchType.LAZY, optional = false)

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

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

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

@@ -20,6 +20,18 @@ public class MessageConversation {
     @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;

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

@@ -40,6 +40,12 @@ public enum NotificationType {
     LOTTERY_WIN,
     /** Your lottery post was drawn */
     LOTTERY_DRAW,
+    /** Someone participated in your poll */
+    POLL_VOTE,
+    /** Your poll post has concluded */
+    POLL_RESULT_OWNER,
+    /** A poll you participated in has concluded */
+    POLL_RESULT_PARTICIPANT,
     /** Your post was featured */
     POST_FEATURED,
     /** You were mentioned in a post or comment */

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

@@ -5,8 +5,12 @@ public enum PointHistoryType {
     COMMENT,
     POST_LIKED,
     COMMENT_LIKED,
+    POST_LIKE_CANCELLED,
+    COMMENT_LIKE_CANCELLED,
     INVITE,
     FEATURE,
     SYSTEM_ONLINE,
-    REDEEM
+    REDEEM,
+    LOTTERY_JOIN,
+    LOTTERY_REWARD
 }

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

@@ -0,0 +1,43 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+import java.util.*;
+
+@Entity
+@Table(name = "poll_posts")
+@Getter
+@Setter
+@NoArgsConstructor
+@PrimaryKeyJoinColumn(name = "post_id")
+public class PollPost extends Post {
+    @ElementCollection
+    @CollectionTable(name = "poll_post_options", joinColumns = @JoinColumn(name = "post_id"))
+    @Column(name = "option_text")
+    private List<String> options = new ArrayList<>();
+
+    @ElementCollection
+    @CollectionTable(name = "poll_post_votes", joinColumns = @JoinColumn(name = "post_id"))
+    @MapKeyColumn(name = "option_index")
+    @Column(name = "vote_count")
+    private Map<Integer, Integer> votes = new HashMap<>();
+
+    @ManyToMany
+    @JoinTable(name = "poll_participants",
+            joinColumns = @JoinColumn(name = "post_id"),
+            inverseJoinColumns = @JoinColumn(name = "user_id"))
+    private Set<User> participants = new HashSet<>();
+
+    @Column
+    private Boolean multiple = false;
+
+    @Column
+    private LocalDateTime endTime;
+
+    @Column
+    private boolean resultAnnounced = false;
+}

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

@@ -0,0 +1,28 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Entity
+@Table(name = "poll_votes", uniqueConstraints = @UniqueConstraint(columnNames = {"post_id", "user_id", "option_index"}))
+@Getter
+@Setter
+@NoArgsConstructor
+public class PollVote {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "post_id")
+    private PollPost post;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "user_id")
+    private User user;
+
+    @Column(name = "option_index", nullable = false)
+    private int optionIndex;
+}

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

@@ -31,7 +31,7 @@ public class Post {
     @Column(nullable = false)
     private String title;
 
-    @Column(nullable = false, columnDefinition = "TEXT")
+    @Column(nullable = false, columnDefinition = "LONGTEXT")
     private String content;
 
     @CreationTimestamp

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

@@ -2,5 +2,6 @@ package com.openisle.model;
 
 public enum PostType {
     NORMAL,
-    LOTTERY
+    LOTTERY,
+    POLL
 }

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

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

@@ -5,6 +5,7 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
+import com.openisle.model.ReactionType;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
@@ -29,4 +30,8 @@ public interface NotificationRepository extends JpaRepository<Notification, Long
     List<Notification> findByTypeAndFromUser(NotificationType type, User fromUser);
 
     void deleteByTypeAndFromUserAndPost(NotificationType type, User fromUser, Post post);
+
+    void deleteByTypeAndFromUserAndPostAndReactionType(NotificationType type, User fromUser, Post post, ReactionType reactionType);
+
+    void deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType type, User fromUser, Comment comment, ReactionType reactionType);
 }

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

@@ -4,9 +4,12 @@ import com.openisle.model.PointHistory;
 import com.openisle.model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
 
+import java.time.LocalDateTime;
 import java.util.List;
 
 public interface PointHistoryRepository extends JpaRepository<PointHistory, Long> {
     List<PointHistory> findByUserOrderByIdDesc(User user);
     long countByUser(User user);
+
+    List<PointHistory> findByUserAndCreatedAtAfterOrderByCreatedAtDesc(User user, LocalDateTime createdAt);
 }

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

@@ -0,0 +1,13 @@
+package com.openisle.repository;
+
+import com.openisle.model.PollPost;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.time.LocalDateTime;
+import java.util.List;
+
+public interface PollPostRepository extends JpaRepository<PollPost, Long> {
+    List<PollPost> findByEndTimeAfterAndResultAnnouncedFalse(LocalDateTime now);
+
+    List<PollPost> findByEndTimeBeforeAndResultAnnouncedFalse(LocalDateTime now);
+}

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

@@ -0,0 +1,10 @@
+package com.openisle.repository;
+
+import com.openisle.model.PollVote;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface PollVoteRepository extends JpaRepository<PollVote, Long> {
+    List<PollVote> findByPostId(Long postId);
+}

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

@@ -4,14 +4,18 @@ import com.openisle.model.Message;
 import com.openisle.model.MessageConversation;
 import com.openisle.model.MessageParticipant;
 import com.openisle.model.User;
+import com.openisle.model.Reaction;
 import com.openisle.repository.MessageConversationRepository;
 import com.openisle.repository.MessageParticipantRepository;
 import com.openisle.repository.MessageRepository;
 import com.openisle.repository.UserRepository;
+import com.openisle.repository.ReactionRepository;
 import com.openisle.dto.ConversationDetailDto;
 import com.openisle.dto.ConversationDto;
 import com.openisle.dto.MessageDto;
+import com.openisle.dto.ReactionDto;
 import com.openisle.dto.UserSummaryDto;
+import com.openisle.mapper.ReactionMapper;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.data.domain.Page;
@@ -34,9 +38,11 @@ public class MessageService {
     private final MessageParticipantRepository participantRepository;
     private final UserRepository userRepository;
     private final SimpMessagingTemplate messagingTemplate;
+    private final ReactionRepository reactionRepository;
+    private final ReactionMapper reactionMapper;
 
     @Transactional
-    public Message sendMessage(Long senderId, Long recipientId, String content) {
+    public Message sendMessage(Long senderId, Long recipientId, String content, Long replyToId) {
         log.info("Attempting to send message from user {} to user {}", senderId, recipientId);
         User sender = userRepository.findById(senderId)
                 .orElseThrow(() -> new IllegalArgumentException("Sender not found"));
@@ -51,6 +57,11 @@ public class MessageService {
         message.setConversation(conversation);
         message.setSender(sender);
         message.setContent(content);
+        if (replyToId != null) {
+            Message replyTo = messageRepository.findById(replyToId)
+                    .orElseThrow(() -> new IllegalArgumentException("Message not found"));
+            message.setReplyTo(replyTo);
+        }
         message = messageRepository.save(message);
         log.info("Message saved with ID: {}", message.getId());
 
@@ -82,7 +93,58 @@ public class MessageService {
         return message;
     }
 
-    private MessageDto toDto(Message 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());
@@ -95,6 +157,25 @@ public class MessageService {
         userSummaryDto.setAvatar(message.getSender().getAvatar());
         dto.setSender(userSummaryDto);
 
+        if (message.getReplyTo() != null) {
+            Message reply = message.getReplyTo();
+            MessageDto replyDto = new MessageDto();
+            replyDto.setId(reply.getId());
+            replyDto.setContent(reply.getContent());
+            UserSummaryDto replySender = new UserSummaryDto();
+            replySender.setId(reply.getSender().getId());
+            replySender.setUsername(reply.getSender().getUsername());
+            replySender.setAvatar(reply.getSender().getAvatar());
+            replyDto.setSender(replySender);
+            dto.setReplyTo(replyDto);
+        }
+
+        java.util.List<Reaction> reactions = reactionRepository.findByMessage(message);
+        java.util.List<ReactionDto> reactionDtos = reactions.stream()
+                .map(reactionMapper::toDto)
+                .collect(Collectors.toList());
+        dto.setReactions(reactionDtos);
+
         return dto;
     }
 
@@ -108,7 +189,8 @@ public class MessageService {
 
     private MessageConversation findOrCreateConversation(User user1, User user2) {
         log.info("Searching for existing conversation between {} and {}", user1.getUsername(), user2.getUsername());
-        return conversationRepository.findConversationByUsers(user1, user2)
+        return conversationRepository.findConversationsByUsers(user1, user2).stream()
+                .findFirst()
                 .orElseGet(() -> {
                     log.info("No existing conversation found. Creating a new one.");
                     MessageConversation conversation = new MessageConversation();
@@ -134,12 +216,18 @@ public class MessageService {
     @Transactional(readOnly = true)
     public List<ConversationDto> getConversations(Long userId) {
         List<MessageConversation> conversations = conversationRepository.findConversationsByUserIdOrderByLastMessageDesc(userId);
-        return conversations.stream().map(c -> toDto(c, userId)).collect(Collectors.toList());
+        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()));
@@ -189,6 +277,9 @@ public class MessageService {
 
         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);
 
@@ -208,10 +299,26 @@ public class MessageService {
         List<MessageParticipant> participations = participantRepository.findByUserId(userId);
         long totalUnreadCount = 0;
         for (MessageParticipant p : participations) {
+            if (p.getConversation().isChannel()) continue;
             LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
             // 只计算别人发送给当前用户的未读消息
             totalUnreadCount += messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
         }
         return totalUnreadCount;
     }
+
+    @Transactional(readOnly = true)
+    public long getUnreadChannelCount(Long userId) {
+        List<MessageParticipant> participations = participantRepository.findByUserId(userId);
+        long unreadChannelCount = 0;
+        for (MessageParticipant p : participations) {
+            if (!p.getConversation().isChannel()) continue;
+            LocalDateTime lastRead = p.getLastReadAt() == null ? LocalDateTime.of(1970, 1, 1, 0, 0) : p.getLastReadAt();
+            long unread = messageRepository.countByConversationIdAndCreatedAtAfterAndSenderIdNot(p.getConversation().getId(), lastRead, userId);
+            if (unread > 0) {
+                unreadChannelCount++;
+            }
+        }
+        return unreadChannelCount;
+    }
 }

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

@@ -114,6 +114,14 @@ public class NotificationService {
         return n;
     }
 
+    public void deleteReactionNotification(User fromUser, Post post, Comment comment, ReactionType reactionType) {
+        if (post != null) {
+            notificationRepository.deleteByTypeAndFromUserAndPostAndReactionType(NotificationType.REACTION, fromUser, post, reactionType);
+        } else if (comment != null) {
+            notificationRepository.deleteByTypeAndFromUserAndCommentAndReactionType(NotificationType.REACTION, fromUser, comment, reactionType);
+        }
+    }
+
     /**
      * Create notifications for all admins when a user submits a register request.
      * Old register request notifications from the same applicant are removed first.

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

@@ -2,10 +2,15 @@ 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;
 
 import java.time.LocalDate;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
 
 @Service
 @RequiredArgsConstructor
@@ -39,6 +44,17 @@ public class PointService {
         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)
@@ -134,6 +150,16 @@ public class PointService {
         return addPoint(poster, 10, PointHistoryType.POST_LIKED, post, null, reactioner);
     }
 
+    public int deductForReactionOfPost(String reactionerName, Long postId) {
+        User poster = postRepository.findById(postId).orElseThrow().getAuthor();
+        User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
+        if (poster.getId().equals(reactioner.getId())) {
+            return 0;
+        }
+        Post post = postRepository.findById(postId).orElseThrow();
+        return addPoint(poster, -10, PointHistoryType.POST_LIKE_CANCELLED, post, null, reactioner);
+    }
+
     // 考虑点赞者和评论者是同一个的情况
     public int awardForReactionOfComment(String reactionerName, Long commentId) {
         // 根据帖子id找到评论者
@@ -153,6 +179,17 @@ public class PointService {
         return addPoint(commenter, 10, PointHistoryType.COMMENT_LIKED, post, comment, reactioner);
     }
 
+    public int deductForReactionOfComment(String reactionerName, Long commentId) {
+        User commenter = commentRepository.findById(commentId).orElseThrow().getAuthor();
+        User reactioner = userRepository.findByUsername(reactionerName).orElseThrow();
+        if (commenter.getId().equals(reactioner.getId())) {
+            return 0;
+        }
+        Comment comment = commentRepository.findById(commentId).orElseThrow();
+        Post post = comment.getPost();
+        return addPoint(commenter, -10, PointHistoryType.COMMENT_LIKE_CANCELLED, post, comment, reactioner);
+    }
+
     public java.util.List<PointHistory> listHistory(String userName) {
         User user = userRepository.findByUsername(userName).orElseThrow();
         if (pointHistoryRepository.countByUser(user) == 0) {
@@ -161,4 +198,25 @@ public class PointService {
         return pointHistoryRepository.findByUserOrderByIdDesc(user);
     }
 
+    public List<Map<String, Object>> trend(String userName, int days) {
+        if (days < 1) days = 1;
+        User user = userRepository.findByUsername(userName).orElseThrow();
+        LocalDate end = LocalDate.now();
+        LocalDate start = end.minusDays(days - 1L);
+        var histories = pointHistoryRepository.findByUserAndCreatedAtAfterOrderByCreatedAtDesc(
+                user, start.atStartOfDay());
+        int idx = 0;
+        int balance = user.getPoint();
+        List<Map<String, Object>> result = new ArrayList<>();
+        for (LocalDate day = end; !day.isBefore(start); day = day.minusDays(1)) {
+            result.add(Map.of("date", day.toString(), "value", balance));
+            while (idx < histories.size() && histories.get(idx).getCreatedAt().toLocalDate().isEqual(day)) {
+                balance -= histories.get(idx).getAmount();
+                idx++;
+            }
+        }
+        Collections.reverse(result);
+        return result;
+    }
+
 }

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

@@ -9,8 +9,11 @@ import com.openisle.model.Category;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
 import com.openisle.model.LotteryPost;
+import com.openisle.model.PollPost;
+import com.openisle.model.PollVote;
 import com.openisle.repository.PostRepository;
 import com.openisle.repository.LotteryPostRepository;
+import com.openisle.repository.PollPostRepository;
 import com.openisle.repository.UserRepository;
 import com.openisle.repository.CategoryRepository;
 import com.openisle.repository.TagRepository;
@@ -20,6 +23,7 @@ import com.openisle.repository.CommentRepository;
 import com.openisle.repository.ReactionRepository;
 import com.openisle.repository.PostSubscriptionRepository;
 import com.openisle.repository.NotificationRepository;
+import com.openisle.repository.PollVoteRepository;
 import com.openisle.model.Role;
 import com.openisle.exception.RateLimitException;
 import lombok.extern.slf4j.Slf4j;
@@ -54,6 +58,8 @@ public class PostService {
     private final CategoryRepository categoryRepository;
     private final TagRepository tagRepository;
     private final LotteryPostRepository lotteryPostRepository;
+    private final PollPostRepository pollPostRepository;
+    private final PollVoteRepository pollVoteRepository;
     private PublishMode publishMode;
     private final NotificationService notificationService;
     private final SubscriptionService subscriptionService;
@@ -78,6 +84,8 @@ public class PostService {
                        CategoryRepository categoryRepository,
                        TagRepository tagRepository,
                        LotteryPostRepository lotteryPostRepository,
+                       PollPostRepository pollPostRepository,
+                       PollVoteRepository pollVoteRepository,
                        NotificationService notificationService,
                        SubscriptionService subscriptionService,
                        CommentService commentService,
@@ -97,6 +105,8 @@ public class PostService {
         this.categoryRepository = categoryRepository;
         this.tagRepository = tagRepository;
         this.lotteryPostRepository = lotteryPostRepository;
+        this.pollPostRepository = pollPostRepository;
+        this.pollVoteRepository = pollVoteRepository;
         this.notificationService = notificationService;
         this.subscriptionService = subscriptionService;
         this.commentService = commentService;
@@ -125,6 +135,15 @@ public class PostService {
         for (LotteryPost lp : lotteryPostRepository.findByEndTimeBeforeAndWinnersIsEmpty(now)) {
             applicationContext.getBean(PostService.class).finalizeLottery(lp.getId());
         }
+        for (PollPost pp : pollPostRepository.findByEndTimeAfterAndResultAnnouncedFalse(now)) {
+            ScheduledFuture<?> future = taskScheduler.schedule(
+                    () -> applicationContext.getBean(PostService.class).finalizePoll(pp.getId()),
+                    java.util.Date.from(pp.getEndTime().atZone(ZoneId.systemDefault()).toInstant()));
+            scheduledFinalizations.put(pp.getId(), future);
+        }
+        for (PollPost pp : pollPostRepository.findByEndTimeBeforeAndResultAnnouncedFalse(now)) {
+            applicationContext.getBean(PostService.class).finalizePoll(pp.getId());
+        }
     }
 
     public PublishMode getPublishMode() {
@@ -164,8 +183,11 @@ public class PostService {
                            String prizeDescription,
                            String prizeIcon,
                            Integer prizeCount,
+                           Integer pointCost,
                            LocalDateTime startTime,
-                           LocalDateTime endTime) {
+                           LocalDateTime endTime,
+                           java.util.List<String> options,
+                           Boolean multiple) {
         long recent = postRepository.countByAuthorAfter(username,
                 java.time.LocalDateTime.now().minusMinutes(5));
         if (recent >= 1) {
@@ -188,13 +210,26 @@ 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;
+        } else if (actualType == PostType.POLL) {
+            if (options == null || options.size() < 2) {
+                throw new IllegalArgumentException("At least two options required");
+            }
+            PollPost pp = new PollPost();
+            pp.setOptions(options);
+            pp.setEndTime(endTime);
+            pp.setMultiple(multiple != null && multiple);
+            post = pp;
         } else {
             post = new Post();
         }
@@ -207,6 +242,8 @@ public class PostService {
         post.setStatus(publishMode == PublishMode.REVIEW ? PostStatus.PENDING : PostStatus.PUBLISHED);
         if (post instanceof LotteryPost) {
             post = lotteryPostRepository.save((LotteryPost) post);
+        } else if (post instanceof PollPost) {
+            post = pollPostRepository.save((PollPost) post);
         } else {
             post = postRepository.save(post);
         }
@@ -241,6 +278,11 @@ public class PostService {
                     () -> applicationContext.getBean(PostService.class).finalizeLottery(lp.getId()),
                     java.util.Date.from(lp.getEndTime().atZone(ZoneId.systemDefault()).toInstant()));
             scheduledFinalizations.put(lp.getId(), future);
+        } else if (post instanceof PollPost pp && pp.getEndTime() != null) {
+            ScheduledFuture<?> future = taskScheduler.schedule(
+                    () -> applicationContext.getBean(PostService.class).finalizePoll(pp.getId()),
+                    java.util.Date.from(pp.getEndTime().atZone(ZoneId.systemDefault()).toInstant()));
+            scheduledFinalizations.put(pp.getId(), future);
         }
         return post;
     }
@@ -250,8 +292,70 @@ 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"));
+        if (post.getParticipants().add(user)) {
+            pointService.processLotteryJoin(user, post);
+            lotteryPostRepository.save(post);
+        }
+    }
+
+    public PollPost getPoll(Long postId) {
+        return pollPostRepository.findById(postId)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+    }
+
+    @Transactional
+    public PollPost votePoll(Long postId, String username, java.util.List<Integer> optionIndices) {
+        PollPost post = pollPostRepository.findById(postId)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        if (post.getEndTime() != null && post.getEndTime().isBefore(LocalDateTime.now())) {
+            throw new IllegalStateException("Poll has ended");
+        }
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        if (post.getParticipants().contains(user)) {
+            throw new IllegalArgumentException("User already voted");
+        }
+        if (optionIndices == null || optionIndices.isEmpty()) {
+            throw new IllegalArgumentException("No options selected");
+        }
+        java.util.Set<Integer> unique = new java.util.HashSet<>(optionIndices);
+        for (int optionIndex : unique) {
+            if (optionIndex < 0 || optionIndex >= post.getOptions().size()) {
+                throw new IllegalArgumentException("Invalid option");
+            }
+        }
         post.getParticipants().add(user);
-        lotteryPostRepository.save(post);
+        for (int optionIndex : unique) {
+            post.getVotes().merge(optionIndex, 1, Integer::sum);
+            PollVote vote = new PollVote();
+            vote.setPost(post);
+            vote.setUser(user);
+            vote.setOptionIndex(optionIndex);
+            pollVoteRepository.save(vote);
+        }
+        PollPost saved = pollPostRepository.save(post);
+        if (post.getAuthor() != null && !post.getAuthor().getId().equals(user.getId())) {
+            notificationService.createNotification(post.getAuthor(), NotificationType.POLL_VOTE, post, null, null, user, null, null);
+        }
+        return saved;
+    }
+
+    @Transactional
+    public void finalizePoll(Long postId) {
+        scheduledFinalizations.remove(postId);
+        pollPostRepository.findById(postId).ifPresent(pp -> {
+            if (pp.isResultAnnounced()) {
+                return;
+            }
+            pp.setResultAnnounced(true);
+            pollPostRepository.save(pp);
+            if (pp.getAuthor() != null) {
+                notificationService.createNotification(pp.getAuthor(), NotificationType.POLL_RESULT_OWNER, pp, null, null, null, null, null);
+            }
+            for (User participant : pp.getParticipants()) {
+                notificationService.createNotification(participant, NotificationType.POLL_RESULT_PARTICIPANT, pp, null, null, null, null, null);
+            }
+        });
     }
 
     @Transactional

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;
 
@@ -39,6 +42,7 @@ public class ReactionService {
         java.util.Optional<Reaction> existing =
                 reactionRepository.findByUserAndPostAndType(user, post, type);
         if (existing.isPresent()) {
+            notificationService.deleteReactionNotification(user, post, null, type);
             reactionRepository.delete(existing.get());
             return null;
         }
@@ -62,6 +66,7 @@ public class ReactionService {
         java.util.Optional<Reaction> existing =
                 reactionRepository.findByUserAndCommentAndType(user, comment, type);
         if (existing.isPresent()) {
+            notificationService.deleteReactionNotification(user, null, comment, type);
             reactionRepository.delete(existing.get());
             return null;
         }
@@ -77,6 +82,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/PointHistoryControllerTest.java

@@ -0,0 +1,65 @@
+package com.openisle.controller;
+
+import com.openisle.config.CustomAccessDeniedHandler;
+import com.openisle.config.SecurityConfig;
+import com.openisle.service.PointService;
+import com.openisle.mapper.PointHistoryMapper;
+import com.openisle.service.JwtService;
+import com.openisle.repository.UserRepository;
+import com.openisle.model.User;
+import com.openisle.model.Role;
+import org.junit.jupiter.api.Test;
+import org.mockito.Mockito;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
+import org.springframework.boot.test.mock.mockito.MockBean;
+import org.springframework.context.annotation.Import;
+import org.springframework.test.web.servlet.MockMvc;
+
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+@WebMvcTest(PointHistoryController.class)
+@AutoConfigureMockMvc
+@Import({SecurityConfig.class, CustomAccessDeniedHandler.class})
+class PointHistoryControllerTest {
+    @Autowired
+    private MockMvc mockMvc;
+
+    @MockBean
+    private JwtService jwtService;
+    @MockBean
+    private UserRepository userRepository;
+    @MockBean
+    private PointService pointService;
+    @MockBean
+    private PointHistoryMapper pointHistoryMapper;
+
+    @Test
+    void trendReturnsSeries() throws Exception {
+        Mockito.when(jwtService.validateAndGetSubject("token")).thenReturn("user");
+        User user = new User();
+        user.setUsername("user");
+        user.setPassword("p");
+        user.setEmail("u@example.com");
+        user.setRole(Role.USER);
+        Mockito.when(userRepository.findByUsername("user")).thenReturn(Optional.of(user));
+        List<Map<String, Object>> data = List.of(
+                Map.of("date", java.time.LocalDate.now().minusDays(1).toString(), "value", 100),
+                Map.of("date", java.time.LocalDate.now().toString(), "value", 110)
+        );
+        Mockito.when(pointService.trend(Mockito.eq("user"), Mockito.anyInt())).thenReturn(data);
+
+        mockMvc.perform(get("/api/point-histories/trend").param("days", "2")
+                        .header("Authorization", "Bearer token"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].value").value(100))
+                .andExpect(jsonPath("$[1].value").value(110));
+    }
+}

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(), 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(), 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/PostServiceTest.java

@@ -146,7 +146,7 @@ class PostServiceTest {
 
         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, null, null));
     }
 
     @Test

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') {
@@ -127,7 +138,7 @@ const goToNewPost = () => {
   height: 60px;
   border-radius: 50%;
   position: fixed;
-  bottom: 40px;
+  bottom: 70px;
   right: 20px;
   font-size: 20px;
   cursor: pointer;

frontend_nuxt/assets/global.css

@@ -18,8 +18,8 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(228, 228, 228, 0.884);
-  --menu-text-color: black;
+  --menu-selected-background-color: rgba(242, 242, 242, 0.884);
+  --menu-text-color: rgb(99, 99, 99);
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
   --normal-background-color: white;
@@ -27,13 +27,14 @@
   --code-highlight-background-color: rgb(241, 241, 241);
   --login-background-color: rgb(248, 248, 248);
   --login-background-color-hover: #e0e0e0;
-  --text-color: black;
+  --text-color: rgb(70, 70, 70);
   --blockquote-text-color: #6a737d;
   --menu-width: 200px;
   --page-max-width: 1400px;
   --page-max-width-mobile: 900px;
   --article-info-background-color: #f0f0f0;
   --activity-card-background-color: #fafafa;
+  --poll-option-button-background-color: rgb(218, 218, 218);
 }
 
 [data-theme='dark'] {
@@ -50,7 +51,7 @@
   --menu-border-color: #555;
   --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
-  --menu-text-color: white;
+  --menu-text-color: rgb(173, 173, 173);
   /* --normal-background-color: #000000; */
   --normal-background-color: #333;
   --lottery-background-color: #4e4e4e;
@@ -61,6 +62,7 @@
   --blockquote-text-color: #999;
   --article-info-background-color: #747373;
   --activity-card-background-color: #585858;
+  --poll-option-button-background-color: #3a3a3a;
 }
 
 :root[data-frosted='off'] {
@@ -75,7 +77,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--normal-background-color);
   color: var(--text-color);
   /* 禁止滚动 */
@@ -91,7 +93,7 @@ body {
 
 .vditor-toolbar--pin {
   top: calc(var(--header-height) + 1px) !important;
-  z-index: 2000;
+  z-index: 20;
 }
 
 .vditor-panel {
@@ -139,6 +141,10 @@ body {
   margin-bottom: 0.8em;
 }
 
+.info-content-text video {
+  max-width: 100%;
+}
+
 .info-content-text {
   word-break: break-word;
   max-width: 100%;
@@ -158,6 +164,7 @@ body {
   border-radius: 4px;
   line-height: 1.5;
   position: relative;
+  white-space: break-spaces;
 }
 
 .info-content-text pre .line-numbers {
@@ -184,7 +191,6 @@ body {
   font-family: 'Maple Mono', monospace;
   font-size: 13px;
   border-radius: 4px;
-  white-space: break-spaces;
   background-color: var(--code-highlight-background-color);
   color: var(--text-color);
 }

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 }]"

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

@@ -0,0 +1,66 @@
+<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 {
+  transition:
+    filter 0.35s ease,
+    transform 0.35s ease,
+    opacity 0.35s ease;
+  opacity: 0.92;
+}
+
+.base-image-ph {
+  filter: blur(20px);
+  transform: scale(0.5);
+}
+
+.base-image.is-loaded {
+  /* Allow filters from parent classes (e.g. grayscale for unfinished medals) */
+  transform: none;
+  opacity: 1;
+}
+</style>

frontend_nuxt/components/BaseTabs.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="base-tabs">
+    <div class="base-tabs-header">
+      <div class="base-tabs-items">
+        <div
+          v-for="tab in tabs"
+          :key="tab.key"
+          :class="['base-tabs-item', { selected: modelValue === tab.key }]"
+          @click="$emit('update:modelValue', tab.key)"
+        >
+          <i v-if="tab.icon" :class="tab.icon"></i>
+          <div class="base-tabs-item-label">{{ tab.label }}</div>
+        </div>
+      </div>
+      <div class="base-tabs-header-right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+    <div class="base-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  tabs: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+let touchStartX = 0
+
+function onTouchStart(e) {
+  touchStartX = e.touches[0].clientX
+}
+
+function onTouchEnd(e) {
+  const diffX = e.changedTouches[0].clientX - touchStartX
+  if (Math.abs(diffX) > 50) {
+    const index = props.tabs.findIndex((t) => t.key === props.modelValue)
+    if (diffX < 0 && index < props.tabs.length - 1) {
+      emit('update:modelValue', props.tabs[index + 1].key)
+    } else if (diffX > 0 && index > 0) {
+      emit('update:modelValue', props.tabs[index - 1].key)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base-tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+  align-items: center;
+  flex-direction: row;
+}
+
+.base-tabs-items {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: 1;
+}
+
+.base-tabs-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.base-tabs-item i {
+  margin-right: 6px;
+}
+
+.base-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.base-tabs-header-right {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.base-tabs-content {
+  width: 100%;
+}
+</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,7 +42,7 @@ export default {
   margin-top: 10px;
 }
 
-.timeline-item:hover {
+.hover-enabled .timeline-item:hover {
   background-color: var(--menu-selected-background-color);
   transition: background-color 0.2s;
   border-radius: 10px;
@@ -73,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
-  line-height: 1;
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

frontend_nuxt/components/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">
@@ -23,9 +23,13 @@
             >{{ getMedalTitle(comment.medal) }}</NuxtLink
           >
           <i v-if="comment.pinned" class="fas fa-thumbtack pin-icon"></i>
-          <span v-if="level >= 2">
+          <span v-if="level >= 2" class="reply-item">
             <i class="fas fa-reply reply-icon"></i>
-            <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
+            <span class="reply-info">
+              <BaseImage class="reply-avatar"  :src="comment.parentUserAvatar || '/default-avatar.svg'" alt="avatar"
+              @click="comment.parentUserClick && comment.parentUserClick()" />
+              <span class="reply-user-name">{{ comment.parentUserName }}</span>
+            </span>
           </span>
           <div class="post-time">{{ comment.time }}</div>
         </div>
@@ -250,6 +254,7 @@ const submitReply = async (parentUserName, text, clear) => {
         medal: data.author.displayMedal,
         text: data.content,
         parentUserName: parentUserName,
+        parentUserAvatar: props.comment.avatar,
         reactions: [],
         reply: (data.replies || []).map((r) => ({
           id: r.id,
@@ -376,7 +381,22 @@ const handleContentClick = (e) => {
   justify-content: space-between;
 }
 
+.reply-item, .reply-info {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.reply-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
 .reply-icon {
+  color: var(--primary-color);
   margin-right: 10px;
   margin-left: 10px;
   opacity: 0.5;

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

@@ -4,12 +4,15 @@
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
-            <i class="fas fa-bars"></i>
+            <i class="fas fa-bars micon"></i>
           </button>
-          <span v-if="isMobile && unreadMessageCount > 0" class="menu-unread-dot"></span>
+          <span
+            v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"
+            class="menu-unread-dot"
+          ></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
-          <img
+          <BaseImage
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
             width="60"
@@ -53,6 +56,7 @@
               <span v-if="unreadMessageCount > 0" class="unread-badge">{{
                 unreadMessageCount
               }}</span>
+              <span v-else-if="hasChannelUnread" class="unread-dot"></span>
             </div>
           </ToolTip>
 
@@ -71,7 +75,6 @@
           </div>
         </div>
       </ClientOnly>
-
       <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
@@ -85,6 +88,7 @@ import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
+import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import { useIsMobile } from '~/utils/screen'
 import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { toast } from '~/main'
@@ -103,6 +107,7 @@ const props = defineProps({
 const isLogin = computed(() => authState.loggedIn)
 const isMobile = useIsMobile()
 const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
+const { hasUnread: hasChannelUnread, fetchChannelUnread } = useChannelsUnreadCount()
 const avatar = ref('')
 const showSearch = ref(false)
 const searchDropdown = ref(null)
@@ -143,8 +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 || '生成邀请链接失败')
@@ -227,8 +245,10 @@ onMounted(async () => {
   }
   const updateUnread = async () => {
     if (authState.loggedIn) {
-      // Initialize the unread count composable
       fetchUnreadCount()
+      fetchChannelUnread()
+    } else {
+      fetchChannelUnread()
     }
   }
 
@@ -298,6 +318,10 @@ onMounted(async () => {
   gap: 20px;
 }
 
+.micon {
+  margin-left: 10px;
+}
+
 .menu-btn {
   font-size: 24px;
   background: none;
@@ -350,6 +374,7 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin-right: 10px;
 }
 
 .avatar-img {
@@ -413,6 +438,16 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
+.unread-dot {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ff4d4f;
+}
+
 .rss-icon {
   animation: rss-glow 2s 3;
 }

frontend_nuxt/components/LotteryForm.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="lottery-section">
+    <AvatarCropper
+      :src="data.tempPrizeIcon"
+      :show="data.showPrizeCropper"
+      @close="data.showPrizeCropper = false"
+      @crop="onPrizeCropped"
+    />
+    <div class="prize-row">
+      <span class="prize-row-title">奖品图片</span>
+      <label class="prize-container">
+        <BaseImage v-if="data.prizeIcon" :src="data.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" />
+      </label>
+    </div>
+    <div class="prize-name-row">
+      <span class="prize-row-title">奖品描述</span>
+      <BaseInput v-model="data.prizeDescription" placeholder="奖品描述" />
+    </div>
+    <div class="prize-count-row">
+      <span class="prize-row-title">奖品数量</span>
+      <div class="prize-count-input">
+        <input
+          class="prize-count-input-field"
+          type="number"
+          v-model.number="data.prizeCount"
+          min="1"
+        />
+      </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="data.pointCost"
+          min="0"
+          max="100"
+        />
+      </div>
+    </div>
+    <div class="prize-time-row">
+      <span class="prize-row-title">抽奖结束时间</span>
+      <client-only>
+        <flat-pickr v-model="data.endTime" :config="dateConfig" class="time-picker" />
+      </client-only>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import 'flatpickr/dist/flatpickr.css'
+import FlatPickr from 'vue-flatpickr-component'
+import AvatarCropper from '~/components/AvatarCropper.vue'
+import BaseImage from '~/components/BaseImage.vue'
+import BaseInput from '~/components/BaseInput.vue'
+import { watch } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
+
+const onPrizeIconChange = (e) => {
+  const file = e.target.files[0]
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = () => {
+      props.data.tempPrizeIcon = reader.result
+      props.data.showPrizeCropper = true
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+const onPrizeCropped = ({ file, url }) => {
+  props.data.prizeIconFile = file
+  props.data.prizeIcon = url
+}
+
+watch(
+  () => props.data.prizeCount,
+  (val) => {
+    if (!val || val < 1) props.data.prizeCount = 1
+  },
+)
+
+watch(
+  () => props.data.pointCost,
+  (val) => {
+    if (val === undefined || val === null || val < 0) props.data.pointCost = 0
+    if (val > 100) props.data.pointCost = 100
+  },
+)
+</script>
+
+<style scoped>
+.lottery-section {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 200px;
+}
+.prize-row-title {
+  font-size: 16px;
+  color: var(--text-color);
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.prize-row,
+.prize-name-row,
+.prize-count-row,
+.prize-point-row,
+.prize-time-row {
+  display: flex;
+  flex-direction: column;
+}
+.prize-container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: var(--lottery-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.default-prize-icon {
+  font-size: 30px;
+  opacity: 0.1;
+  color: var(--text-color);
+}
+.prize-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.prize-input {
+  display: none;
+}
+.prize-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.prize-container:hover .prize-overlay {
+  opacity: 1;
+}
+.prize-count-input {
+  display: flex;
+  align-items: center;
+}
+.prize-count-input-field {
+  width: 50px;
+  height: 30px;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+  padding: 0 10px;
+  font-size: 16px;
+  color: var(--text-color);
+  background-color: var(--lottery-background-color);
+}
+.time-picker {
+  max-width: 200px;
+  height: 30px;
+  background-color: var(--lottery-background-color);
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+</style>

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"
@@ -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"
@@ -279,12 +279,29 @@ const gotoTag = (t) => {
   padding: 10px 10px 0 10px;
 }
 
+.menu-content::-webkit-scrollbar {
+  display: none;
+}
+
+.menu-content {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.menu-item-container {
+  border-bottom: 1px solid var(--menu-border-color);
+}
+
+.menu-item:last-child {
+  margin-bottom: 5px;
+}
+
 /* .menu-item-container { */
 /**/
 /* } */
 
 .menu-item {
-  padding: 4px 10px;
+  padding: 6px 12px;
   text-decoration: none;
   color: var(--menu-text-color);
   border-radius: 10px;
@@ -298,7 +315,7 @@ const gotoTag = (t) => {
 }
 
 .menu-item-text {
-  font-size: 16px;
+  font-size: 14px;
   text-decoration: none;
   color: var(--menu-text-color);
 }
@@ -352,16 +369,17 @@ const gotoTag = (t) => {
 }
 
 .menu-section {
-  margin-top: 10px;
+  border-bottom: 1px solid var(--menu-border-color);
+  padding-bottom: 5px;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: bold;
-  opacity: 0.5;
-  padding: 4px 10px;
+  font-size: 14px;
+  padding: 6px 12px 0 12px;
+  color: var(--menu-text-color);
   cursor: pointer;
 }
 
@@ -373,7 +391,7 @@ const gotoTag = (t) => {
 }
 
 .section-item {
-  padding: 4px 10px;
+  padding: 6px 12px;
   display: flex;
   align-items: center;
   gap: 5px;
@@ -393,6 +411,8 @@ const gotoTag = (t) => {
 }
 
 .section-item-text {
+  font-size: 14px;
+  text-decoration: none;
   color: var(--menu-text-color);
 }
 

frontend_nuxt/components/MessageFloatWindow.vue

@@ -0,0 +1,115 @@
+<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>
+      <i class="fas fa-times" title="关闭" @click="close"></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 close() {
+  floatRoute.value = null
+}
+
+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/PollForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="poll-section">
+    <div class="poll-options-row">
+      <span class="poll-row-title">投票选项</span>
+      <div class="poll-option-item" v-for="(opt, idx) in data.options" :key="idx">
+        <BaseInput v-model="data.options[idx]" placeholder="选项内容" />
+        <i
+          v-if="data.options.length > 2"
+          class="fa-solid fa-xmark remove-option-icon"
+          @click="removeOption(idx)"
+        ></i>
+      </div>
+      <div class="add-option" @click="addOption">添加选项</div>
+    </div>
+    <div class="poll-time-row">
+      <span class="poll-row-title">投票结束时间</span>
+      <client-only>
+        <flat-pickr v-model="data.endTime" :config="dateConfig" class="time-picker" />
+      </client-only>
+    </div>
+    <div class="poll-multiple-row">
+      <span class="poll-row-title">多选</span>
+      <BaseSwitch v-model="data.multiple" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import 'flatpickr/dist/flatpickr.css'
+import FlatPickr from 'vue-flatpickr-component'
+import BaseInput from '~/components/BaseInput.vue'
+import BaseSwitch from '~/components/BaseSwitch.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
+
+const addOption = () => {
+  props.data.options.push('')
+}
+
+const removeOption = (idx) => {
+  if (props.data.options.length > 2) {
+    props.data.options.splice(idx, 1)
+  }
+}
+</script>
+
+<style scoped>
+.poll-section {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 200px;
+}
+.poll-row-title {
+  font-size: 16px;
+  color: var(--text-color);
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.poll-option-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.remove-option-icon {
+  cursor: pointer;
+}
+.add-option {
+  color: var(--primary-color);
+  cursor: pointer;
+  width: fit-content;
+  margin-top: 5px;
+}
+.poll-options-row,
+.poll-time-row {
+  display: flex;
+  flex-direction: column;
+}
+.poll-multiple-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.time-picker {
+  max-width: 200px;
+  height: 30px;
+  background-color: var(--lottery-background-color);
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+</style>

frontend_nuxt/components/PostLottery.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="post-prize-container" v-if="lottery">
+    <div class="prize-content">
+      <div class="prize-info">
+        <div class="prize-info-left">
+          <div class="prize-icon">
+            <BaseImage
+              class="prize-icon-img"
+              v-if="lottery.prizeIcon"
+              :src="lottery.prizeIcon"
+              alt="prize"
+            />
+            <i v-else class="fa-solid fa-gift default-prize-icon"></i>
+          </div>
+          <div class="prize-name">{{ lottery.prizeDescription }}</div>
+          <div class="prize-count">x {{ lottery.prizeCount }}</div>
+        </div>
+        <div class="prize-end-time prize-info-right">
+          <div v-if="!isMobile" class="prize-end-time-title">离结束还有</div>
+          <div class="prize-end-time-value">{{ countdown }}</div>
+          <div v-if="!isMobile" class="join-prize-button-container-desktop">
+            <div
+              v-if="loggedIn && !hasJoined && !lotteryEnded"
+              class="join-prize-button"
+              @click="joinLottery"
+            >
+              <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>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="isMobile" class="join-prize-button-container-mobile">
+        <div
+          v-if="loggedIn && !hasJoined && !lotteryEnded"
+          class="join-prize-button"
+          @click="joinLottery"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+    <div class="prize-member-container">
+      <BaseImage
+        v-for="p in lotteryParticipants"
+        :key="p.id"
+        class="prize-member-avatar"
+        :src="p.avatar"
+        alt="avatar"
+        @click="gotoUser(p.id)"
+      />
+      <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>
+        <BaseImage
+          v-for="w in lotteryWinners"
+          :key="w.id"
+          class="prize-member-avatar"
+          :src="w.avatar"
+          alt="avatar"
+          @click="gotoUser(w.id)"
+        />
+        <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
+          {{ lotteryWinners[0].username }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { getToken, authState } from '~/utils/auth'
+import { toast } from '~/main'
+import { useRuntimeConfig } from '#imports'
+import { useIsMobile } from '~/utils/screen'
+
+const props = defineProps({
+  lottery: { type: Object, required: true },
+  postId: { type: [String, Number], required: true },
+})
+const emit = defineEmits(['refresh'])
+
+const isMobile = useIsMobile()
+const loggedIn = computed(() => authState.loggedIn)
+const lotteryParticipants = computed(() => props.lottery?.participants || [])
+const lotteryWinners = computed(() => props.lottery?.winners || [])
+const lotteryEnded = computed(() => {
+  if (!props.lottery || !props.lottery.endTime) return false
+  return new Date(props.lottery.endTime).getTime() <= Date.now()
+})
+const hasJoined = computed(() => {
+  if (!loggedIn.value) return false
+  return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
+})
+
+const countdown = ref('00:00:00')
+let timer = null
+const updateCountdown = () => {
+  if (!props.lottery || !props.lottery.endTime) {
+    countdown.value = '00:00:00'
+    return
+  }
+  const diff = new Date(props.lottery.endTime).getTime() - Date.now()
+  if (diff <= 0) {
+    countdown.value = '00:00:00'
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    return
+  }
+  const h = String(Math.floor(diff / 3600000)).padStart(2, '0')
+  const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
+  const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
+  countdown.value = `${h}:${m}:${s}`
+}
+const startCountdown = () => {
+  updateCountdown()
+  if (timer) clearInterval(timer)
+  timer = setInterval(updateCountdown, 1000)
+}
+watch(
+  () => props.lottery?.endTime,
+  () => {
+    if (props.lottery && props.lottery.endTime) startCountdown()
+  },
+)
+onMounted(() => {
+  if (props.lottery && props.lottery.endTime) startCountdown()
+})
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+
+const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
+
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+const joinLottery = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/lottery/join`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  const data = await res.json().catch(() => ({}))
+  if (res.ok) {
+    toast.success('已参与抽奖')
+    emit('refresh')
+  } else {
+    toast.error(data.error || '操作失败')
+  }
+}
+</script>
+
+<style scoped>
+.post-prize-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: var(--lottery-background-color);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.prize-info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.join-prize-button-container-mobile {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.prize-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.default-prize-icon {
+  font-size: 24px;
+  opacity: 0.5;
+}
+
+.prize-icon-img {
+  width: 100%;
+  height: 100%;
+}
+
+.prize-name {
+  font-size: 13px;
+  opacity: 0.7;
+  margin-left: 10px;
+}
+
+.prize-count {
+  font-size: 13px;
+  font-weight: bold;
+  opacity: 0.7;
+  margin-left: 10px;
+  color: var(--primary-color);
+}
+
+.prize-end-time {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 13px;
+  opacity: 0.7;
+  margin-left: 10px;
+}
+
+.prize-end-time-title {
+  font-size: 13px;
+  opacity: 0.7;
+  margin-right: 5px;
+}
+
+.prize-end-time-value {
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.prize-info-left,
+.prize-info-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.join-prize-button {
+  margin-left: 10px;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.join-prize-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.join-prize-button-disabled {
+  text-align: center;
+  margin-left: 10px;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 8px;
+  background-color: var(--primary-color-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.prize-member-avatar {
+  width: 30px;
+  height: 30px;
+  margin-left: 3px;
+  border-radius: 50%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.prize-member-winner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  margin-top: 10px;
+}
+
+.medal-icon {
+  font-size: 16px;
+  color: var(--primary-color);
+}
+
+.prize-member-winner-name {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .join-prize-button,
+  .join-prize-button-disabled {
+    margin-left: 0;
+  }
+}
+</style>

frontend_nuxt/components/PostPoll.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="post-poll-container" v-if="poll">
+    <div class="poll-top-container">
+      <div class="poll-options-container">
+        <div v-if="showPollResult || pollEnded || hasVoted">
+          <div v-for="(opt, idx) in poll.options" :key="idx" class="poll-option-result">
+            <div class="poll-option-info-container">
+              <div class="poll-option-text">{{ opt }}</div>
+              <div class="poll-option-progress-info">
+                {{ pollPercentages[idx] }}% ({{ pollVotes[idx] || 0 }}人已投票)
+              </div>
+            </div>
+            <div class="poll-option-progress">
+              <div
+                class="poll-option-progress-bar"
+                :style="{ width: pollPercentages[idx] + '%' }"
+              ></div>
+            </div>
+            <div class="poll-participants">
+              <BaseImage
+                v-for="p in pollOptionParticipants[idx] || []"
+                :key="p.id"
+                class="poll-participant-avatar"
+                :src="p.avatar"
+                alt="avatar"
+                @click="gotoUser(p.id)"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <template v-if="poll.multiple">
+            <div
+              v-for="(opt, idx) in poll.options"
+              :key="idx"
+              class="poll-option"
+              @click="toggleOption(idx)"
+            >
+              <input
+                type="checkbox"
+                :checked="selectedOptions.includes(idx)"
+                class="poll-option-input"
+              />
+              <span class="poll-option-text">{{ opt }}</span>
+            </div>
+
+            <div class="multi-selection-container">
+              <div class="multi-selection-title">
+                <i class="fas fa-info-circle info-icon"></i>
+                该投票为多选
+              </div>
+              <div class="join-poll-button" @click="submitMultiPoll">
+                <i class="fas fa-plus"></i> 加入投票
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-for="(opt, idx) in poll.options"
+              :key="idx"
+              class="poll-option"
+              @click="voteOption(idx)"
+            >
+              <input type="radio" :checked="false" name="poll-option" class="poll-option-input" />
+              <span class="poll-option-text">{{ opt }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="poll-info">
+        <div class="total-votes">{{ pollParticipants.length }}</div>
+        <div class="total-votes-title">投票人</div>
+      </div>
+    </div>
+    <div class="poll-bottom-container">
+      <div
+        v-if="showPollResult && !pollEnded && !hasVoted"
+        class="poll-option-button"
+        @click="showPollResult = false"
+      >
+        <i class="fas fa-chevron-left"></i> 投票
+      </div>
+      <div
+        v-else-if="!pollEnded && !hasVoted"
+        class="poll-option-button"
+        @click="showPollResult = true"
+      >
+        <i class="fas fa-chart-bar"></i> 结果
+      </div>
+
+      <div class="poll-left-time">
+        <div class="poll-left-time-title">离结束还有</div>
+        <div class="poll-left-time-value">{{ countdown }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { getToken, authState } from '~/utils/auth'
+import { toast } from '~/main'
+import { useRuntimeConfig } from '#imports'
+
+const props = defineProps({
+  poll: { type: Object, required: true },
+  postId: { type: [String, Number], required: true },
+})
+const emit = defineEmits(['refresh'])
+
+const loggedIn = computed(() => authState.loggedIn)
+const showPollResult = ref(false)
+
+const pollParticipants = computed(() => props.poll?.participants || [])
+const pollOptionParticipants = computed(() => props.poll?.optionParticipants || {})
+const pollVotes = computed(() => props.poll?.votes || {})
+const totalPollVotes = computed(() => Object.values(pollVotes.value).reduce((a, b) => a + b, 0))
+const pollPercentages = computed(() =>
+  props.poll
+    ? props.poll.options.map((_, idx) => {
+        const c = pollVotes.value[idx] || 0
+        return totalPollVotes.value ? ((c / totalPollVotes.value) * 100).toFixed(1) : 0
+      })
+    : [],
+)
+const pollEnded = computed(() => {
+  if (!props.poll || !props.poll.endTime) return false
+  return new Date(props.poll.endTime).getTime() <= Date.now()
+})
+const hasVoted = computed(() => {
+  if (!loggedIn.value) return false
+  return pollParticipants.value.some((p) => p.id === Number(authState.userId))
+})
+watch([hasVoted, pollEnded], ([voted, ended]) => {
+  if (voted || ended) showPollResult.value = true
+})
+
+const countdown = ref('00:00:00')
+let timer = null
+const updateCountdown = () => {
+  if (!props.poll || !props.poll.endTime) {
+    countdown.value = '00:00:00'
+    return
+  }
+  const diff = new Date(props.poll.endTime).getTime() - Date.now()
+  if (diff <= 0) {
+    countdown.value = '00:00:00'
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    return
+  }
+  const h = String(Math.floor(diff / 3600000)).padStart(2, '0')
+  const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
+  const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
+  countdown.value = `${h}:${m}:${s}`
+}
+const startCountdown = () => {
+  updateCountdown()
+  if (timer) clearInterval(timer)
+  timer = setInterval(updateCountdown, 1000)
+}
+watch(
+  () => props.poll?.endTime,
+  () => {
+    if (props.poll && props.poll.endTime) startCountdown()
+  },
+)
+onMounted(() => {
+  if (props.poll && props.poll.endTime) startCountdown()
+})
+onBeforeUnmount(() => {
+  if (timer) clearInterval(timer)
+})
+
+const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
+
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+const voteOption = async (idx) => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/poll/vote?option=${idx}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  const data = await res.json().catch(() => ({}))
+  if (res.ok) {
+    toast.success('投票成功')
+    emit('refresh')
+    showPollResult.value = true
+  } else {
+    toast.error(data.error || '操作失败')
+  }
+}
+
+const selectedOptions = ref([])
+const toggleOption = (idx) => {
+  const i = selectedOptions.value.indexOf(idx)
+  if (i >= 0) {
+    selectedOptions.value.splice(i, 1)
+  } else {
+    selectedOptions.value.push(idx)
+  }
+}
+const submitMultiPoll = async () => {
+  const token = getToken()
+  if (!token) {
+    toast.error('请先登录')
+    return
+  }
+  if (!selectedOptions.value.length) {
+    toast.error('请选择至少一个选项')
+    return
+  }
+  const params = selectedOptions.value.map((o) => `option=${o}`).join('&')
+  const res = await fetch(`${API_BASE_URL}/api/posts/${props.postId}/poll/vote?${params}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  const data = await res.json().catch(() => ({}))
+  if (res.ok) {
+    toast.success('投票成功')
+    emit('refresh')
+    showPollResult.value = true
+  } else {
+    toast.error(data.error || '操作失败')
+  }
+}
+</script>
+
+<style scoped>
+.post-poll-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: var(--lottery-background-color);
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.poll-option-button {
+  color: var(--text-color);
+  padding: 5px 10px;
+  border-radius: 8px;
+  background-color: var(--poll-option-button-background-color);
+  cursor: pointer;
+  width: fit-content;
+}
+
+.poll-top-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--normal-border-color);
+}
+
+.poll-options-container {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 4;
+  border-right: 1px solid var(--normal-border-color);
+}
+
+.poll-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+}
+
+.total-votes {
+  font-size: 40px;
+  font-weight: bold;
+  opacity: 0.8;
+}
+
+.total-votes-title {
+  font-size: 18px;
+  opacity: 0.5;
+}
+
+.poll-option {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.poll-option-result {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  gap: 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+.poll-option-input {
+  margin-right: 10px;
+  width: 18px;
+  height: 18px;
+  accent-color: var(--primary-color);
+  border-radius: 50%;
+  border: 2px solid var(--primary-color);
+}
+
+.poll-option-text {
+  font-size: 18px;
+}
+
+.poll-bottom-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.poll-left-time {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.poll-left-time-title {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.poll-left-time-value {
+  font-size: 13px;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.poll-option-progress {
+  position: relative;
+  background-color: rgb(187, 187, 187);
+  height: 20px;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.poll-option-progress-bar {
+  background-color: var(--primary-color);
+  height: 100%;
+}
+
+.poll-option-info-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.poll-option-progress-info {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--text-color);
+}
+
+.multi-selection-container {
+  padding: 20px 15px 20px 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.multi-selection-title {
+  font-size: 13px;
+  color: var(--text-color);
+}
+
+.info-icon {
+  margin-right: 5px;
+}
+
+.join-poll-button {
+  padding: 5px 10px;
+  background-color: var(--primary-color);
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.join-poll-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.poll-participants {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.poll-participant-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+</style>

frontend_nuxt/components/PostTypeSelect.vue

@@ -33,6 +33,7 @@ export default {
       return [
         { id: 'NORMAL', name: '普通帖子', icon: 'fa-regular fa-file' },
         { id: 'LOTTERY', name: '抽奖帖子', icon: 'fa-solid fa-gift' },
+        { id: 'POLL', name: '投票帖子', icon: 'fa-solid fa-square-poll-vertical' },
       ]
     }
 

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">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
-            {{ reactionEmojiMap[r.type] }}
+        <template v-if="Object.keys(counts).length < 4">
+          <div
+            v-for="r in displayedReactions"
+            :key="r.type"
+            class="reactions-viewer-single-item"
+            :class="{ selected: userReacted(r.type) }"
+            @click="toggleReaction(r.type)"
+          >
+            <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;
-  left: -20px;
+  bottom: 50px;
   background-color: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  border-radius: 5px;
-  padding: 5px;
-  max-width: 240px;
+  border-radius: 20px;
+  padding: 5px 10px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   z-index: 10;
-  gap: 2px;
+  gap: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -287,6 +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

@@ -24,7 +24,7 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <img
+          <BaseImage
             :src="option.avatar || '/default-avatar.svg'"
             class="avatar"
             @error="handleAvatarError"

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

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

frontend_nuxt/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 || '',
@@ -87,24 +88,24 @@ export default defineNuxtConfig({
   vite: {
     build: {
       // increase warning limit and split large libraries into separate chunks
-      chunkSizeWarningLimit: 1024,
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            if (id.includes('node_modules')) {
-              if (id.includes('vditor')) {
-                return 'vditor'
-              }
-              if (id.includes('echarts')) {
-                return 'echarts'
-              }
-              if (id.includes('highlight.js')) {
-                return 'highlight'
-              }
-            }
-          },
-        },
-      },
+      // chunkSizeWarningLimit: 1024,
+      // rollupOptions: {
+      //   output: {
+      //     manualChunks(id) {
+      //       if (id.includes('node_modules')) {
+      //         if (id.includes('vditor')) {
+      //           return 'vditor'
+      //         }
+      //         if (id.includes('echarts')) {
+      //           return 'echarts'
+      //         }
+      //         if (id.includes('highlight.js')) {
+      //           return 'highlight'
+      //         }
+      //       }
+      //     },
+      //   },
+      // },
     },
   },
 })

frontend_nuxt/package.json

@@ -9,20 +9,24 @@
     "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",
+    "ipx": "^3.1.1",
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
-    "nuxt": "latest",
+    "mermaid": "^10.9.4",
     "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",
-    "flatpickr": "^4.6.13",
     "vue-flatpickr-component": "^12.0.0",
-    "@stomp/stompjs": "^7.0.0",
-    "sockjs-client": "^1.6.1"
+    "vue-toastification": "^2.0.0-rc.5"
   }
 }

frontend_nuxt/pages/about/index.vue

@@ -1,30 +1,23 @@
 <template>
   <div class="about-page">
-    <div class="about-tabs">
-      <div
-        v-for="tab in tabs"
-        :key="tab.name"
-        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
-        @click="selectTab(tab.name)"
-      >
-        <div class="about-tabs-item-label">{{ tab.label }}</div>
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <div class="about-loading" v-if="isFetching">
+        <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
       </div>
-    </div>
-    <div class="about-loading" v-if="isFetching">
-      <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
-    </div>
-    <div
-      v-else
-      class="about-content"
-      v-html="renderMarkdown(content)"
-      @click="handleContentClick"
-    ></div>
+      <div
+        v-else
+        class="about-content"
+        v-html="renderMarkdown(content)"
+        @click="handleContentClick"
+      ></div>
+    </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 export default {
   name: 'AboutPageView',
@@ -32,27 +25,27 @@ export default {
     const isFetching = ref(false)
     const tabs = [
       {
-        name: 'about',
+        key: 'about',
         label: '关于',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md',
       },
       {
-        name: 'agreement',
+        key: 'agreement',
         label: '用户协议',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md',
       },
       {
-        name: 'guideline',
+        key: 'guideline',
         label: '创作准则',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md',
       },
       {
-        name: 'privacy',
+        key: 'privacy',
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
     ]
-    const selectedTab = ref(tabs[0].name)
+    const selectedTab = ref(tabs[0].key)
     const content = ref('')
 
     const loadContent = async (file) => {
@@ -71,21 +64,20 @@ export default {
       }
     }
 
-    const selectTab = (name) => {
-      selectedTab.value = name
-      const tab = tabs.find((t) => t.name === name)
-      if (tab) loadContent(tab.file)
-    }
-
     onMounted(() => {
       loadContent(tabs[0].file)
     })
 
+    watch(selectedTab, (name) => {
+      const tab = tabs.find((t) => t.key === name)
+      if (tab) loadContent(tab.file)
+    })
+
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
   },
 }
 </script>
@@ -97,28 +89,6 @@ export default {
   margin: 0 auto;
 }
 
-.about-tabs {
-  top: calc(var(--header-height) + 1px);
-  background-color: var(--background-color-blur);
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--normal-border-color);
-  margin-bottom: 20px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.about-tabs-item {
-  padding: 10px 20px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.about-tabs-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .about-content {
   line-height: 1.6;
   padding: 20px;

frontend_nuxt/pages/about/stats.vue

@@ -33,23 +33,11 @@
 </template>
 
 <script setup>
-import { LineChart } from 'echarts/charts'
-import {
-  DataZoomComponent,
-  GridComponent,
-  TitleComponent,
-  TooltipComponent,
-} from 'echarts/components'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
 import { onMounted, ref } from 'vue'
-import VChart from 'vue-echarts'
 import { getToken } from '~/utils/auth'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
-use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
-
 const dauOption = ref(null)
 const newUserOption = ref(null)
 const postOption = ref(null)

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

@@ -70,11 +70,15 @@
             <NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
               <i v-if="article.pinned" class="fas fa-thumbtack pinned-icon"></i>
               <i v-if="article.type === 'LOTTERY'" class="fa-solid fa-gift lottery-icon"></i>
+              <i
+                v-else-if="article.type === 'POLL'"
+                class="fa-solid fa-square-poll-vertical poll-icon"
+              ></i>
               {{ article.title }}
             </NuxtLink>
-            <div class="article-item-description main-item">
+            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
               {{ sanitizeDescription(article.description) }}
-            </div>
+            </NuxtLink>
             <div class="article-info-container main-item">
               <ArticleCategory :category="article.category" />
               <ArticleTags :tags="article.tags" />
@@ -88,7 +92,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>
 
@@ -125,6 +129,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'
@@ -526,19 +531,23 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
 .article-item-title {
   margin-top: 10px;
-  font-size: 20px;
+  font-size: 18px;
   text-decoration: none;
   color: var(--text-color);
   max-width: 100%;
+  font-weight: bold;
+  transition: color 0.2s ease;
 }
 
 .article-item-title:hover {
   color: var(--primary-color);
   text-decoration: underline;
+  transition: color 0.2s ease;
 }
 
 .pinned-icon,
-.lottery-icon {
+.lottery-icon,
+.poll-icon {
   margin-right: 4px;
   color: var(--primary-color);
 }
@@ -546,13 +555,23 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 .article-item-description {
   max-width: 100%;
   margin-top: 10px;
-  font-size: 14px;
-  color: gray;
+  font-size: 13px;
+  color: rgba(140, 140, 140, 0.888);
   display: -webkit-box;
   line-clamp: 3;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  letter-spacing: 0.01em;
+  font-weight: 400;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.article-item-description:hover {
+  color: var(--primary-color);
+  cursor: pointer;
+  transition: color 0.2s ease;
 }
 
 .article-info-container {
@@ -652,6 +671,10 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 @container home-page (max-width: 768px) {
+  .topic-item-container {
+    margin-left: 0px;
+    gap: 0px;
+  }
   .article-main-container,
   .header-item.main-item {
     width: calc(70% - 20px);
@@ -709,6 +732,16 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
   .topic-container {
     position: initial;
+    padding: 0;
+  }
+
+  .topic-item {
+    padding: 10px 20px;
+  }
+
+  .topic-select-container {
+    margin-left: 10px;
+    margin-top: 10px;
   }
 }
 </style>

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

@@ -1,10 +1,17 @@
 <template>
-  <div class="chat-container">
-    <div v-if="!loading && otherParticipant" class="chat-header">
-      <NuxtLink to="/message-box" class="back-button">
-        <i class="fas fa-arrow-left"></i>
-      </NuxtLink>
-      <h2 class="participant-name">{{ otherParticipant.username }}</h2>
+  <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">
@@ -20,12 +27,29 @@
         </div>
         <BaseTimeline :items="messages">
           <template #item="{ item }">
-            <div class="message-timestamp">
-              {{ TimeManager.format(item.createdAt) }}
+            <div class="message-header">
+              <div class="user-name">
+                {{ item.sender.username }}
+              </div>
+              <div class="message-timestamp">
+                {{ TimeManager.format(item.createdAt) }}
+              </div>
+            </div>
+            <div 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">
@@ -39,6 +63,11 @@
     </div>
 
     <div class="message-input-area">
+      <div v-if="replyTo" class="active-reply">
+        正在回复 {{ replyTo.sender.username }}:
+        {{ stripMarkdownLength(replyTo.content, 50) }}
+        <i class="fas fa-times close-reply" @click="replyTo = null"></i>
+      </div>
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
   </div>
@@ -58,10 +87,12 @@ import {
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
-import { renderMarkdown } from '~/utils/markdown'
+import { renderMarkdown, stripMarkdownLength } from '~/utils/markdown'
 import MessageEditor from '~/components/MessageEditor.vue'
+import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
+import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
 import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
@@ -71,6 +102,7 @@ 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([])
@@ -81,31 +113,63 @@ 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 isUserNearBottom = ref(true)
+function updateNearBottom() {
+  const el = messagesListEl.value
+  if (!el) return
+  const threshold = 40 // px
+  isUserNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold
+}
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
 
 const otherParticipant = computed(() => {
-  if (!currentUser.value || participants.value.length === 0) {
+  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 setReply(message) {
+  replyTo.value = message
 }
 
-function handleAvatarError(event) {
-  event.target.src = '/default-avatar.svg'
+/** 改造：滚动函数 —— smooth & instant */
+function scrollToBottomSmooth() {
+  const el = messagesListEl.value
+  if (!el) return
+  // 优先使用原生 smooth，失败则降级
+  try {
+    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
+  } catch {
+    // 降级：简易动画
+    const start = el.scrollTop
+    const end = el.scrollHeight
+    const duration = 200
+    const startTs = performance.now()
+    function step(now) {
+      const p = Math.min(1, (now - startTs) / duration)
+      el.scrollTop = start + (end - start) * p
+      if (p < 1) requestAnimationFrame(step)
+    }
+    requestAnimationFrame(step)
+  }
 }
 
-// No changes needed here, as renderMarkdown is now imported.
-// The old function is removed.
+function scrollToBottomInstant() {
+  const el = messagesListEl.value
+  if (!el) return
+  el.scrollTop = el.scrollHeight
+}
 
 async function fetchMessages(page = 0) {
   if (page === 0) {
@@ -136,14 +200,15 @@ async function fetchMessages(page = 0) {
 
     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: () => {
-        navigateTo(`/users/${item.sender.id}`, { replace: true })
+        openUser(item.sender.id)
       },
     }))
 
@@ -159,12 +224,16 @@ async function fetchMessages(page = 0) {
     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
+    } else if (page === 0) {
+      // 首次加载：定位到底部（不用动画，避免“闪动感”）
+      scrollToBottomInstant()
     }
+    updateNearBottom()
   } catch (e) {
     error.value = e.message
     toast.error(e.message)
@@ -182,27 +251,41 @@ async function loadMoreMessages() {
 
 async function sendMessage(content, clearInput) {
   if (!content.trim()) return
-
-  const recipient = otherParticipant.value
-  if (!recipient) {
-    toast.error('无法确定收信人')
-    return
-  }
-
   sending.value = true
   const token = getToken()
   try {
-    const 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,
-      }),
-    })
+    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()
@@ -210,13 +293,15 @@ async function sendMessage(content, clearInput) {
       ...newMessage,
       src: newMessage.sender.avatar,
       iconClick: () => {
-        navigateTo(`/users/${newMessage.sender.id}`, { replace: true })
+        openUser(newMessage.sender.id)
       },
     })
     clearInput()
-    setTimeout(() => {
-      scrollToBottom()
-    }, 100)
+    replyTo.value = null
+
+    await nextTick()
+    // 仅“发送消息成功后”才平滑滚动到底部
+    scrollToBottomSmooth()
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -232,44 +317,19 @@ async function markConversationAsRead() {
       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 () => {
+  // 监听列表滚动，实时感知是否接近底部
+  if (messagesListEl.value) {
+    messagesListEl.value.addEventListener('scroll', updateNearBottom, { passive: true })
+  }
+
   currentUser.value = await fetchCurrentUser()
   if (currentUser.value) {
     await fetchMessages(0)
@@ -286,23 +346,21 @@ onMounted(async () => {
 
 watch(isConnected, (newValue) => {
   if (newValue) {
-    // 等待一小段时间确保连接稳定
     setTimeout(() => {
-      subscription = subscribe(`/topic/conversation/${conversationId}`, (message) => {
+      subscription = subscribe(`/topic/conversation/${conversationId}`, async (message) => {
         // 避免重复显示当前用户发送的消息
         if (message.sender.id !== currentUser.value.id) {
           messages.value.push({
             ...message,
             src: message.sender.avatar,
             iconClick: () => {
-              navigateTo(`/users/${message.sender.id}`, { replace: true })
+              openUser(message.sender.id)
             },
           })
-          // 实时收到消息时自动标记为已读
+          // 收到消息后只标记已读，不强制滚动（符合“非发送不拉底”）
           markConversationAsRead()
-          setTimeout(() => {
-            scrollToBottom()
-          }, 100)
+          await nextTick()
+          updateNearBottom()
         }
       })
     }, 500)
@@ -310,23 +368,12 @@ watch(isConnected, (newValue) => {
 })
 
 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)
-
+    updateNearBottom()
     if (!isConnected.value) {
       const token = getToken()
       if (token) connect(token)
@@ -347,8 +394,33 @@ onUnmounted(() => {
     subscription.unsubscribe()
     subscription = null
   }
+  if (messagesListEl.value) {
+    messagesListEl.value.removeEventListener('scroll', updateNearBottom)
+  }
   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>
@@ -361,8 +433,13 @@ onUnmounted(() => {
   position: relative;
 }
 
+.chat-container.float {
+  height: 100vh;
+}
+
 .chat-header {
   display: flex;
+  justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -373,6 +450,24 @@ onUnmounted(() => {
   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);
@@ -388,6 +483,7 @@ onUnmounted(() => {
 
 .messages-list {
   overflow-y: auto;
+  overflow-x: hidden;
   padding: 20px;
   padding-bottom: 100px;
   display: flex;
@@ -429,10 +525,22 @@ onUnmounted(() => {
 .message-timestamp {
   font-size: 11px;
   color: var(--text-color-secondary);
-  margin-top: 5px;
   opacity: 0.6;
 }
 
+.message-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
 .message-item.sent {
   align-self: flex-end;
   flex-direction: row-reverse;
@@ -475,14 +583,59 @@ onUnmounted(() => {
   color: var(--text-color-secondary);
 }
 
+.message-input-area {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.reply-preview {
+  margin-top: 10px;
+  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;
   }
 }
-
-.message-input-area {
-  margin-left: 10px;
-  margin-right: 10px;
-}
 </style>

frontend_nuxt/pages/message-box/index.vue

@@ -1,91 +1,167 @@
 <template>
   <div class="messages-container">
-    <div v-if="loading" class="loading-message">
-      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="page-title">
+      <i class="fas fa-comments"></i>
+      <span class="page-title-text">选择聊天</span>
     </div>
-
-    <div v-else-if="error" class="error-container">
-      <div class="error-text">{{ error }}</div>
+    <div v-if="!isFloatMode" class="float-control">
+      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-
-    <div v-if="!loading" 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">
-        <img
-          :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>
+    <BaseTabs v-model="activeTab" :tabs="tabs">
+      <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 class="last-message-row">
-          <div class="last-message">
-            {{
-              convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-            }}
+        <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 v-if="convo.unreadCount > 0" class="unread-count-badge">
-            {{ convo.unreadCount }}
+
+          <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>
+
+      <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>
+    </BaseTabs>
   </div>
 </template>
 
 <script setup>
-import { ref, onUnmounted, watch, onActivated } from 'vue'
-import { useRouter } from 'vue-router'
+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 router = useRouter()
+
+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 activeTab = ref('channels')
+const tabs = [
+  { key: 'messages', label: '站内信' },
+  { key: 'channels', label: '频道' },
+]
+const channels = ref([])
+const loadingChannels = ref(false)
+const isFloatMode = computed(() => route.query.float === '1')
+const floatRoute = useState('messageFloatRoute')
+
 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',
@@ -120,13 +196,68 @@ 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
+  }
+}
+
+watch(activeTab, (tab) => {
+  if (tab === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
+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 () => {
-  loading.value = true
   currentUser.value = await fetchCurrentUser()
 
   if (currentUser.value) {
-    await fetchConversations()
-    refreshGlobalUnreadCount() // Refresh global count when entering the list
+    if (activeTab.value === 'messages') {
+      await fetchConversations()
+    } else {
+      await fetchChannels()
+    }
+    refreshGlobalUnreadCount()
+    refreshChannelUnread()
     const token = getToken()
     if (token && !isConnected.value) {
       connect(token)
@@ -147,6 +278,9 @@ watch(isConnected, (newValue) => {
 
     subscription = subscribe(destination, (message) => {
       fetchConversations()
+      if (activeTab.value === 'channels') {
+        fetchChannels()
+      }
     })
   }
 })
@@ -159,14 +293,50 @@ onUnmounted(() => {
 })
 
 function goToConversation(id) {
-  router.push(`/message-box/${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 {
-  margin: 0 auto;
-  padding: 20px;
+  position: relative;
+}
+
+.float-control {
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: right;
+  padding: 12px 12px;
+}
+
+.float-control i {
+  cursor: pointer;
+}
+
+:deep(.base-tabs-header) {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+  margin-bottom: 16px;
+}
+
+:deep(.base-tabs-item) {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+:deep(.base-tabs-item.selected) {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
 .loading-message {
@@ -178,12 +348,29 @@ function goToConversation(id) {
 
 .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;
@@ -217,6 +404,8 @@ function goToConversation(id) {
 .conversation-item {
   display: flex;
   align-items: center;
+  margin-left: 20px;
+  margin-right: 20px;
   padding: 8px 10px;
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -256,6 +445,12 @@ function goToConversation(id) {
   color: var(--text-color);
 }
 
+.member-count {
+  font-size: 12px;
+  color: gray;
+  flex-shrink: 0;
+}
+
 .message-time {
   font-size: 12px;
   color: gray;
@@ -291,10 +486,34 @@ function goToConversation(id) {
   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;
+  }
+
+  :deep(.base-tabs-header),
+  .loading-message,
+  .error-container,
+  .search-container,
+  .empty-container,
+  .conversation-item {
+    display: none;
+  }
+}
+
 @media (max-width: 768px) {
-  .messages-container {
-    padding: 10px 10px;
+  .conversation-item {
+    margin-left: 10px;
+    margin-right: 10px;
   }
 
   .messages-title {

frontend_nuxt/pages/new-post.vue

@@ -35,59 +35,21 @@
           </div>
         </div>
       </div>
-      <div v-if="postType === 'LOTTERY'" class="lottery-section">
-        <AvatarCropper
-          :src="tempPrizeIcon"
-          :show="showPrizeCropper"
-          @close="showPrizeCropper = false"
-          @crop="onPrizeCropped"
-        />
-        <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" />
-            <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" />
-          </label>
-        </div>
-        <div class="prize-name-row">
-          <span class="prize-row-title">奖品描述</span>
-          <BaseInput v-model="prizeDescription" placeholder="奖品描述" />
-        </div>
-        <div class="prize-count-row">
-          <span class="prize-row-title">奖品数量</span>
-          <div class="prize-count-input">
-            <input
-              class="prize-count-input-field"
-              type="number"
-              v-model.number="prizeCount"
-              min="1"
-            />
-          </div>
-        </div>
-        <div class="prize-time-row">
-          <span class="prize-row-title">抽奖结束时间</span>
-          <client-only>
-            <flat-pickr v-model="endTime" :config="dateConfig" class="time-picker" />
-          </client-only>
-        </div>
-      </div>
+      <LotteryForm v-if="postType === 'LOTTERY'" :data="lottery" />
+      <PollForm v-if="postType === 'POLL'" :data="poll" />
     </div>
   </div>
 </template>
 
 <script setup>
-import 'flatpickr/dist/flatpickr.css'
-import { computed, onMounted, ref, watch } from 'vue'
-import FlatPickr from 'vue-flatpickr-component'
-import AvatarCropper from '~/components/AvatarCropper.vue'
-import BaseInput from '~/components/BaseInput.vue'
+import { computed, onMounted, ref, reactive } from 'vue'
 import CategorySelect from '~/components/CategorySelect.vue'
 import LoginOverlay from '~/components/LoginOverlay.vue'
 import PostEditor from '~/components/PostEditor.vue'
 import PostTypeSelect from '~/components/PostTypeSelect.vue'
 import TagSelect from '~/components/TagSelect.vue'
+import LotteryForm from '~/components/LotteryForm.vue'
+import PollForm from '~/components/PollForm.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 const config = useRuntimeConfig()
@@ -98,41 +60,27 @@ const content = ref('')
 const selectedCategory = ref('')
 const selectedTags = ref([])
 const postType = ref('NORMAL')
-const prizeIcon = ref('')
-const prizeIconFile = ref(null)
-const tempPrizeIcon = ref('')
-const showPrizeCropper = ref(false)
-const prizeName = ref('')
-const prizeCount = ref(1)
-const prizeDescription = ref('')
-const endTime = ref(null)
+const lottery = reactive({
+  prizeIcon: '',
+  prizeIconFile: null,
+  tempPrizeIcon: '',
+  showPrizeCropper: false,
+  prizeName: '',
+  prizeDescription: '',
+  prizeCount: 1,
+  pointCost: 0,
+  endTime: null,
+})
+const poll = reactive({
+  options: ['', ''],
+  endTime: null,
+  multiple: false,
+})
 const startTime = ref(null)
-const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
 const isWaitingPosting = ref(false)
 const isAiLoading = ref(false)
 const isLogin = computed(() => authState.loggedIn)
 
-const onPrizeIconChange = (e) => {
-  const file = e.target.files[0]
-  if (file) {
-    const reader = new FileReader()
-    reader.onload = () => {
-      tempPrizeIcon.value = reader.result
-      showPrizeCropper.value = true
-    }
-    reader.readAsDataURL(file)
-  }
-}
-
-const onPrizeCropped = ({ file, url }) => {
-  prizeIconFile.value = file
-  prizeIcon.value = url
-}
-
-watch(prizeCount, (val) => {
-  if (!val || val < 1) prizeCount.value = 1
-})
-
 const loadDraft = async () => {
   const token = getToken()
   if (!token) return
@@ -162,14 +110,19 @@ const clearPost = async () => {
   selectedCategory.value = ''
   selectedTags.value = []
   postType.value = 'NORMAL'
-  prizeIcon.value = ''
-  prizeIconFile.value = null
-  tempPrizeIcon.value = ''
-  showPrizeCropper.value = false
-  prizeDescription.value = ''
-  prizeCount.value = 1
-  endTime.value = null
+  lottery.prizeIcon = ''
+  lottery.prizeIconFile = null
+  lottery.tempPrizeIcon = ''
+  lottery.showPrizeCropper = false
+  lottery.prizeName = ''
+  lottery.prizeDescription = ''
+  lottery.prizeCount = 1
+  lottery.pointCost = 0
+  lottery.endTime = null
   startTime.value = null
+  poll.options = ['', '']
+  poll.endTime = null
+  poll.multiple = false
 
   // 删除草稿
   const token = getToken()
@@ -299,31 +252,45 @@ const submitPost = async () => {
     return
   }
   if (postType.value === 'LOTTERY') {
-    if (!prizeIcon.value) {
+    if (!lottery.prizeIcon) {
       toast.error('请上传奖品图片')
       return
     }
-    if (!prizeCount.value || prizeCount.value < 1) {
+    if (!lottery.prizeCount || lottery.prizeCount < 1) {
       toast.error('奖品数量必须大于0')
       return
     }
-    if (!prizeDescription.value) {
+    if (!lottery.prizeDescription) {
       toast.error('请输入奖品描述')
       return
     }
-    if (!endTime.value) {
+    if (!lottery.endTime) {
       toast.error('请选择抽奖结束时间')
       return
     }
+    if (lottery.pointCost < 0 || lottery.pointCost > 100) {
+      toast.error('参与积分需在0到100之间')
+      return
+    }
+  }
+  if (postType.value === 'POLL') {
+    if (poll.options.length < 2 || poll.options.some((o) => !o.trim())) {
+      toast.error('请填写至少两个投票选项')
+      return
+    }
+    if (!poll.endTime) {
+      toast.error('请选择投票结束时间')
+      return
+    }
   }
   try {
     const token = getToken()
     await ensureTags(token)
     isWaitingPosting.value = true
-    let prizeIconUrl = prizeIcon.value
-    if (postType.value === 'LOTTERY' && prizeIconFile.value) {
+    let prizeIconUrl = lottery.prizeIcon
+    if (postType.value === 'LOTTERY' && lottery.prizeIconFile) {
       const form = new FormData()
-      form.append('file', prizeIconFile.value)
+      form.append('file', lottery.prizeIconFile)
       const uploadRes = await fetch(`${API_BASE_URL}/api/upload`, {
         method: 'POST',
         headers: { Authorization: `Bearer ${token}` },
@@ -349,16 +316,21 @@ const submitPost = async () => {
         tagIds: selectedTags.value,
         type: postType.value,
         prizeIcon: postType.value === 'LOTTERY' ? prizeIconUrl : undefined,
-        prizeName: postType.value === 'LOTTERY' ? prizeName.value : undefined,
-        prizeCount: postType.value === 'LOTTERY' ? prizeCount.value : undefined,
-        prizeDescription: postType.value === 'LOTTERY' ? prizeDescription.value : undefined,
+        prizeName: postType.value === 'LOTTERY' ? lottery.prizeName : undefined,
+        prizeCount: postType.value === 'LOTTERY' ? lottery.prizeCount : undefined,
+        prizeDescription: postType.value === 'LOTTERY' ? lottery.prizeDescription : undefined,
+        options: postType.value === 'POLL' ? poll.options : undefined,
+        multiple: postType.value === 'POLL' ? poll.multiple : undefined,
         startTime:
           postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
+        pointCost: postType.value === 'LOTTERY' ? lottery.pointCost : undefined,
         // 将时间转换为 UTC+8.5 时区 todo: 需要优化
         endTime:
           postType.value === 'LOTTERY'
-            ? new Date(new Date(endTime.value).getTime() + 8.02 * 60 * 60 * 1000).toISOString()
-            : undefined,
+            ? new Date(new Date(lottery.endTime).getTime() + 8.02 * 60 * 60 * 1000).toISOString()
+            : postType.value === 'POLL'
+              ? new Date(new Date(poll.endTime).getTime() + 8.02 * 60 * 60 * 1000).toISOString()
+              : undefined,
       }),
     })
     const data = await res.json()
@@ -493,121 +465,6 @@ const submitPost = async () => {
   padding-bottom: 50px;
 }
 
-.lottery-section {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.prize-row-title {
-  font-size: 16px;
-  color: var(--text-color);
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.prize-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.prize-name-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.prize-container {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  border-radius: 10px;
-  overflow: hidden;
-  cursor: pointer;
-  background-color: var(--lottery-background-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.default-prize-icon {
-  font-size: 30px;
-  opacity: 0.1;
-  color: var(--text-color);
-}
-
-.prize-preview {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.prize-input {
-  display: none;
-}
-
-.prize-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.prize-container:hover .prize-overlay {
-  opacity: 1;
-}
-
-.prize-count-row,
-.prize-time-row {
-  display: flex;
-  flex-direction: column;
-}
-
-.prize-count-input {
-  display: flex;
-  align-items: center;
-}
-
-.prize-name-input {
-  height: 30px;
-  border-radius: 5px;
-  border: 1px solid var(--border-color);
-  padding: 0 10px;
-  margin-left: 10px;
-  font-size: 16px;
-  color: var(--text-color);
-}
-
-.prize-count-input-field {
-  width: 50px;
-  height: 30px;
-  border-radius: 5px;
-  border: 1px solid var(--border-color);
-  padding: 0 10px;
-  font-size: 16px;
-  color: var(--text-color);
-  background-color: var(--lottery-background-color);
-}
-
-.time-picker {
-  max-width: 200px;
-  height: 30px;
-  background-color: var(--lottery-background-color);
-  border-radius: 5px;
-  border: 1px solid var(--border-color);
-  padding: 0 10px;
-  font-size: 16px;
-  color: var(--text-color);
-}
-
 @media (max-width: 768px) {
   .new-post-page {
     width: calc(100vw - 20px);

frontend_nuxt/pages/points.vue

@@ -1,159 +1,202 @@
 <template>
   <div class="point-mall-page">
-    <div class="point-tabs">
-      <div
-        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
-        @click="selectedTab = 'mall'"
-      >
-        积分兑换
-      </div>
-      <div
-        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
-        @click="selectedTab = 'history'"
-      >
-        积分历史
-      </div>
-    </div>
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <template v-if="selectedTab === 'mall'">
+        <div class="point-mall-page-content">
+          <section class="rules">
+            <div class="section-title">🎉 积分规则</div>
+            <div class="section-content">
+              <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
+                {{ rule }}
+              </div>
+            </div>
+          </section>
 
-    <template v-if="selectedTab === 'mall'">
-      <div class="point-mall-page-content">
-        <section class="rules">
-          <div class="section-title">🎉 积分规则</div>
-          <div class="section-content">
-            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
+          <section class="trend" v-if="trendOption">
+            <div class="section-title">积分走势</div>
+            <ClientOnly>
+              <VChart :option="trendOption" :autoresize="true" style="height: 300px" />
+            </ClientOnly>
+          </section>
+
+          <div class="loading-points-container" v-if="isLoading">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
           </div>
-        </section>
 
-        <div class="loading-points-container" v-if="isLoading">
+          <div class="point-info">
+            <p v-if="authState.loggedIn && point !== null">
+              <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+                class="point-value"
+                >{{ point }}</span
+              >
+            </p>
+          </div>
+
+          <section class="goods">
+            <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
+              <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>
+                {{ good.cost }} 积分
+              </div>
+              <div
+                class="goods-item-button"
+                :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
+                @click="openRedeem(good)"
+              >
+                兑换
+              </div>
+            </div>
+          </section>
+          <RedeemPopup
+            :visible="dialogVisible"
+            v-model="contact"
+            :loading="loading"
+            @close="closeRedeem"
+            @submit="submitRedeem"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="loading-points-container" v-if="historyLoading">
           <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
-
-        <div class="point-info">
-          <p v-if="authState.loggedIn && point !== null">
-            <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
-              class="point-value"
-              >{{ point }}</span
-            >
-          </p>
-        </div>
-
-        <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" />
-            <div class="goods-item-name">{{ good.name }}</div>
-            <div class="goods-item-cost">
-              <i class="fas fa-coins"></i>
-              {{ good.cost }} 积分
-            </div>
-            <div
-              class="goods-item-button"
-              :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
-              @click="openRedeem(good)"
-            >
-              兑换
-            </div>
-          </div>
-        </section>
-        <RedeemPopup
-          :visible="dialogVisible"
-          v-model="contact"
-          :loading="loading"
-          @close="closeRedeem"
-          @submit="submitRedeem"
+        <BasePlaceholder
+          v-else-if="histories.length === 0"
+          text="暂无积分记录"
+          icon="fas fa-inbox"
         />
-      </div>
-    </template>
-
-    <template v-else>
-      <div class="loading-points-container" v-if="historyLoading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
-      <div class="timeline-container" v-else>
-        <BaseTimeline :items="histories">
-          <template #item="{ item }">
-            <div class="history-content">
-              <template v-if="item.type === 'POST'">
-                发送帖子
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                ，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'COMMENT'">
-                在文章
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                中
-                <template v-if="!item.fromUserId">
-                  发送评论
+        <div class="timeline-container" v-else>
+          <BaseTimeline :items="histories">
+            <template #item="{ item }">
+              <div class="history-content">
+                <template v-if="item.type === 'POST'">
+                  发送帖子
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  ，获得{{ item.amount }}积分
+                </template>
+                <template v-else-if="item.type === 'COMMENT'">
+                  在文章
+                  <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                    item.postTitle
+                  }}</NuxtLink>
+                  中
+                  <template v-if="!item.fromUserId">
+                    发送评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                    >
+                    ，获得{{ item.amount }}积分
+                  </template>
+                  <template v-else>
+                    被评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                    >
+                    ，获得{{ item.amount }}积分
+                  </template>
+                </template>
+                <template v-else-if="item.type === 'POST_LIKE_CANCELLED' && item.fromUserId">
+                  你的帖子
+                  <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 === 'COMMENT_LIKE_CANCELLED' && item.fromUserId">
+                  你的评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                  >
+                    {{ stripMarkdownLength(item.commentContent, 100) }}
+                  </NuxtLink>
+                  被
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">
+                    {{ item.fromUserName }}
+                  </NuxtLink>
+                  取消点赞，扣除{{ -item.amount }}积分
+                </template>
+                <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
+                  帖子
+                  <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 === 'COMMENT_LIKED' && item.fromUserId">
+                  评论
                   <NuxtLink
                     :to="`/posts/${item.postId}#comment-${item.commentId}`"
                     class="timeline-link"
                     >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
                   >
-                  ，获得{{ item.amount }}积分
+                  被
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  按赞，获得{{ item.amount }}积分
                 </template>
-                <template v-else>
-                  被评论
-                  <NuxtLink
-                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                    class="timeline-link"
-                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                  >
-                  ，获得{{ item.amount }}积分
+                <template v-else-if="item.type === 'INVITE' && item.fromUserId">
+                  邀请了好友
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</NuxtLink>
+                  加入社区 🎉，获得 {{ item.amount }} 积分
                 </template>
-              </template>
-              <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
-                帖子
-                <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 === 'COMMENT_LIKED' && item.fromUserId">
-                评论
-                <NuxtLink
-                  :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                  class="timeline-link"
-                  >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                >
-                被
-                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                  item.fromUserName
-                }}</NuxtLink>
-                按赞，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'INVITE' && item.fromUserId">
-                邀请了好友
-                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                  item.fromUserName
-                }}</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 === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
-              <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
-            </div>
-            <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
-          </template>
-        </BaseTimeline>
-      </div>
-    </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>
+              <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
+            </template>
+          </BaseTimeline>
+        </div>
+      </template>
+    </BaseTabs>
   </div>
 </template>
 
@@ -166,16 +209,22 @@ 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 selectedTab = ref('mall')
+const tabs = [
+  { key: 'mall', label: '积分兑换' },
+  { key: 'history', label: '积分历史' },
+]
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
 const historyLoading = ref(false)
 const historyLoaded = ref(false)
+const trendOption = ref(null)
 
 const pointRules = [
   '发帖：每天前两次，每次 30 积分',
@@ -201,6 +250,30 @@ const iconMap = {
   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',
+  POST_LIKE_CANCELLED: 'fas fa-thumbs-down',
+  COMMENT_LIKE_CANCELLED: 'fas fa-thumbs-down',
+}
+
+const loadTrend = async () => {
+  if (!authState.loggedIn) return
+  const token = getToken()
+  const res = await fetch(`${API_BASE_URL}/api/point-histories/trend?days=30`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  if (res.ok) {
+    const data = await res.json()
+    const dates = data.map((d) => d.date)
+    const values = data.map((d) => d.value)
+    trendOption.value = {
+      tooltip: { trigger: 'axis' },
+      xAxis: { type: 'category', data: dates, boundaryGap: false },
+      yAxis: { type: 'value' },
+      series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }],
+      dataZoom: [{ type: 'slider', start: 80 }, { type: 'inside' }],
+    }
+  }
 }
 
 onMounted(async () => {
@@ -208,8 +281,10 @@ onMounted(async () => {
   if (authState.loggedIn) {
     const user = await fetchCurrentUser()
     point.value = user ? user.point : null
+    await Promise.all([loadGoods(), loadTrend()])
+  } else {
+    await loadGoods()
   }
-  await loadGoods()
   isLoading.value = false
 })
 
@@ -295,17 +370,17 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
-.point-tabs {
+:deep(.base-tabs-header) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
 }
 
-.point-tab-item {
+:deep(.base-tabs-item) {
   padding: 10px 15px;
   cursor: pointer;
 }
 
-.point-tab-item.selected {
+:deep(.base-tabs-item.selected) {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
@@ -345,7 +420,8 @@ const submitRedeem = async () => {
 }
 
 .rules,
-.goods {
+.goods,
+.trend {
   margin-top: 20px;
 }
 

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,80 +94,10 @@
         </div>
       </div>
 
-      <div v-if="lottery" class="prize-container">
-        <div class="prize-content">
-          <div class="prize-info">
-            <div class="prize-info-left">
-              <div class="prize-icon">
-                <img
-                  class="prize-icon-img"
-                  v-if="lottery.prizeIcon"
-                  :src="lottery.prizeIcon"
-                  alt="prize"
-                />
-                <i v-else class="fa-solid fa-gift default-prize-icon"></i>
-              </div>
-              <div class="prize-name">{{ lottery.prizeDescription }}</div>
-              <div class="prize-count">x {{ lottery.prizeCount }}</div>
-            </div>
-            <div class="prize-end-time prize-info-right">
-              <div v-if="!isMobile" class="prize-end-time-title">离结束还有</div>
-              <div class="prize-end-time-value">{{ countdown }}</div>
-              <div v-if="!isMobile" class="join-prize-button-container-desktop">
-                <div
-                  v-if="loggedIn && !hasJoined && !lotteryEnded"
-                  class="join-prize-button"
-                  @click="joinLottery"
-                >
-                  <div class="join-prize-button-text">参与抽奖</div>
-                </div>
-                <div v-else-if="hasJoined" class="join-prize-button-disabled">
-                  <div class="join-prize-button-text">已参与</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div v-if="isMobile" class="join-prize-button-container-mobile">
-            <div
-              v-if="loggedIn && !hasJoined && !lotteryEnded"
-              class="join-prize-button"
-              @click="joinLottery"
-            >
-              <div class="join-prize-button-text">参与抽奖</div>
-            </div>
-            <div v-else-if="hasJoined" class="join-prize-button-disabled">
-              <div class="join-prize-button-text">已参与</div>
-            </div>
-          </div>
-        </div>
-        <div class="prize-member-container">
-          <img
-            v-for="p in lotteryParticipants"
-            :key="p.id"
-            class="prize-member-avatar"
-            :src="p.avatar"
-            alt="avatar"
-            @click="gotoUser(p.id)"
-          />
-          <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
-              v-for="w in lotteryWinners"
-              :key="w.id"
-              class="prize-member-avatar"
-              :src="w.avatar"
-              alt="avatar"
-              @click="gotoUser(w.id)"
-            />
-            <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
-              {{ lotteryWinners[0].username }}
-            </div>
-          </div>
-        </div>
-      </div>
-
+      <PostLottery v-if="lottery" :lottery="lottery" :post-id="postId" @refresh="refreshPost" />
+      <ClientOnly>
+        <PostPoll v-if="poll" :poll="poll" :post-id="postId" @refresh="refreshPost" />
+      </ClientOnly>
       <div v-if="closed" class="post-close-container">该帖子已关闭，内容仅供阅读，无法进行互动</div>
 
       <ClientOnly>
@@ -255,12 +185,13 @@ import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
+import PostLottery from '~/components/PostLottery.vue'
+import PostPoll from '~/components/PostPoll.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
 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 +203,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('')
@@ -312,7 +242,6 @@ useHead(() => ({
 if (import.meta.client) {
   onBeforeUnmount(() => {
     window.removeEventListener('scroll', updateCurrentIndex)
-    if (countdownTimer) clearInterval(countdownTimer)
   })
 }
 
@@ -323,44 +252,7 @@ const loggedIn = computed(() => authState.loggedIn)
 const isAdmin = computed(() => authState.role === 'ADMIN')
 const isAuthor = computed(() => authState.username === author.value.username)
 const lottery = ref(null)
-const countdown = ref('00:00:00')
-let countdownTimer = null
-const lotteryParticipants = computed(() => lottery.value?.participants || [])
-const lotteryWinners = computed(() => lottery.value?.winners || [])
-const lotteryEnded = computed(() => {
-  if (!lottery.value || !lottery.value.endTime) return false
-  return new Date(lottery.value.endTime).getTime() <= Date.now()
-})
-const hasJoined = computed(() => {
-  if (!loggedIn.value) return false
-  return lotteryParticipants.value.some((p) => p.id === Number(authState.userId))
-})
-const updateCountdown = () => {
-  if (!lottery.value || !lottery.value.endTime) {
-    countdown.value = '00:00:00'
-    return
-  }
-  const diff = new Date(lottery.value.endTime).getTime() - Date.now()
-  if (diff <= 0) {
-    countdown.value = '00:00:00'
-    if (countdownTimer) {
-      clearInterval(countdownTimer)
-      countdownTimer = null
-    }
-    return
-  }
-  const h = String(Math.floor(diff / 3600000)).padStart(2, '0')
-  const m = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
-  const s = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
-  countdown.value = `${h}:${m}:${s}`
-}
-const startCountdown = () => {
-  if (!import.meta.client) return
-  if (countdownTimer) clearInterval(countdownTimer)
-  updateCountdown()
-  countdownTimer = setInterval(updateCountdown, 1000)
-}
-const gotoUser = (id) => navigateTo(`/users/${id}`, { replace: true })
+const poll = ref(null)
 const articleMenuItems = computed(() => {
   const items = []
   if (isAuthor.value || isAdmin.value) {
@@ -409,7 +301,13 @@ const gatherPostItems = () => {
   }
 }
 
-const mapComment = (c, parentUserName = '', level = 0) => ({
+const mapComment = (
+  c,
+  parentUserName = '',
+  parentUserAvatar = '',
+  parentUserId = '',
+  level = 0,
+) => ({
   id: c.id,
   userName: c.author.username,
   medal: c.author.displayMedal,
@@ -419,11 +317,15 @@ const mapComment = (c, parentUserName = '', level = 0) => ({
   text: c.content,
   reactions: c.reactions || [],
   pinned: Boolean(c.pinned ?? c.pinnedAt ?? c.pinned_at),
-  reply: (c.replies || []).map((r) => mapComment(r, c.author.username, level + 1)),
+  reply: (c.replies || []).map((r) =>
+    mapComment(r, c.author.username, c.author.avatar, c.author.id, level + 1),
+  ),
   openReplies: level === 0,
   src: c.author.avatar,
-  iconClick: () => navigateTo(`/users/${c.author.id}`, { replace: true }),
+  iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
+  parentUserAvatar: parentUserAvatar,
+  parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
 const getTop = (el) => {
@@ -511,7 +413,7 @@ watchEffect(() => {
   rssExcluded.value = data.rssExcluded
   postTime.value = TimeManager.format(data.createdAt)
   lottery.value = data.lottery || null
-  if (lottery.value && lottery.value.endTime) startCountdown()
+  poll.value = data.poll || null
 })
 
 // 404 客户端跳转
@@ -802,24 +704,6 @@ const unsubscribePost = async () => {
   }
 }
 
-const joinLottery = async () => {
-  const token = getToken()
-  if (!token) {
-    toast.error('请先登录')
-    return
-  }
-  const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/lottery/join`, {
-    method: 'POST',
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  if (res.ok) {
-    toast.success('已参与抽奖')
-    await refreshPost()
-  } else {
-    toast.error('操作失败')
-  }
-}
-
 const fetchCommentSorts = () => {
   return Promise.resolve([
     { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
@@ -1222,7 +1106,6 @@ onMounted(async () => {
 .info-content-text {
   font-size: 16px;
   line-height: 1.5;
-  width: 100%;
 }
 
 .article-footer-container {
@@ -1264,139 +1147,6 @@ onMounted(async () => {
   position: relative;
 }
 
-.prize-container {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  background-color: var(--lottery-background-color);
-  border-radius: 10px;
-  padding: 10px;
-}
-
-.prize-info {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-}
-
-.join-prize-button-container-mobile {
-  margin-top: 15px;
-  margin-bottom: 10px;
-}
-
-.prize-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.default-prize-icon {
-  font-size: 24px;
-  opacity: 0.5;
-}
-
-.prize-icon-img {
-  width: 100%;
-  height: 100%;
-}
-
-.prize-name {
-  font-size: 13px;
-  opacity: 0.7;
-  margin-left: 10px;
-}
-
-.prize-count {
-  font-size: 13px;
-  font-weight: bold;
-  opacity: 0.7;
-  margin-left: 10px;
-  color: var(--primary-color);
-}
-
-.prize-end-time {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 13px;
-  opacity: 0.7;
-  margin-left: 10px;
-}
-
-.prize-end-time-title {
-  font-size: 13px;
-  opacity: 0.7;
-  margin-right: 5px;
-}
-
-.prize-end-time-value {
-  font-size: 13px;
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-.prize-info-left,
-.prize-info-right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.join-prize-button {
-  margin-left: 10px;
-  background-color: var(--primary-color);
-  color: white;
-  padding: 5px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: center;
-}
-
-.join-prize-button:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.join-prize-button-disabled {
-  text-align: center;
-  margin-left: 10px;
-  background-color: var(--primary-color);
-  color: white;
-  padding: 5px 10px;
-  border-radius: 8px;
-  background-color: var(--primary-color-disabled);
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.prize-member-avatar {
-  width: 30px;
-  height: 30px;
-  margin-left: 3px;
-  border-radius: 50%;
-  object-fit: cover;
-  cursor: pointer;
-}
-
-.prize-member-winner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-  margin-top: 10px;
-}
-
-.medal-icon {
-  font-size: 16px;
-  color: var(--primary-color);
-}
-
-.prize-member-winner-name {
-  font-size: 13px;
-  opacity: 0.7;
-}
-
 @media (max-width: 768px) {
   .post-page-main-container {
     width: calc(100% - 20px);
@@ -1420,7 +1170,7 @@ onMounted(async () => {
   }
 
   .info-content-text {
-    line-height: 1.3;
+    line-height: 1.5;
   }
 
   .reactions-viewer-item {
@@ -1447,10 +1197,5 @@ onMounted(async () => {
   .loading-container {
     width: 100%;
   }
-
-  .join-prize-button,
-  .join-prize-button-disabled {
-    margin-left: 0;
-  }
 }
 </style>

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