feat: enable dark mode for diff2html

feat: expand post change log details

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

@@ -37,22 +37,22 @@ public class AdminPostController {
     }
 
     @PostMapping("/{id}/pin")
-    public PostSummaryDto pin(@PathVariable Long id) {
+    public PostSummaryDto pin(@PathVariable Long id, org.springframework.security.core.Authentication auth) {
-        return postMapper.toSummaryDto(postService.pinPost(id));
+        return postMapper.toSummaryDto(postService.pinPost(id, auth.getName()));
     }
 
     @PostMapping("/{id}/unpin")
-    public PostSummaryDto unpin(@PathVariable Long id) {
+    public PostSummaryDto unpin(@PathVariable Long id, org.springframework.security.core.Authentication auth) {
-        return postMapper.toSummaryDto(postService.unpinPost(id));
+        return postMapper.toSummaryDto(postService.unpinPost(id, auth.getName()));
     }
 
     @PostMapping("/{id}/rss-exclude")
-    public PostSummaryDto excludeFromRss(@PathVariable Long id) {
+    public PostSummaryDto excludeFromRss(@PathVariable Long id, org.springframework.security.core.Authentication auth) {
-        return postMapper.toSummaryDto(postService.excludeFromRss(id));
+        return postMapper.toSummaryDto(postService.excludeFromRss(id, auth.getName()));
     }
 
     @PostMapping("/{id}/rss-include")
-    public PostSummaryDto includeInRss(@PathVariable Long id) {
+    public PostSummaryDto includeInRss(@PathVariable Long id, org.springframework.security.core.Authentication auth) {
-        return postMapper.toSummaryDto(postService.includeInRss(id));
+        return postMapper.toSummaryDto(postService.includeInRss(id, auth.getName()));
     }
 }

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

@@ -0,0 +1,25 @@
+package com.openisle.controller;
+
+import com.openisle.dto.PostChangeLogDto;
+import com.openisle.mapper.PostChangeLogMapper;
+import com.openisle.service.PostChangeLogService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@RestController
+@RequestMapping("/api/posts")
+@RequiredArgsConstructor
+public class PostChangeLogController {
+    private final PostChangeLogService changeLogService;
+    private final PostChangeLogMapper mapper;
+
+    @GetMapping("/{id}/change-logs")
+    public List<PostChangeLogDto> listLogs(@PathVariable Long id) {
+        return changeLogService.listLogs(id).stream()
+                .map(mapper::toDto)
+                .collect(Collectors.toList());
+    }
+}

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

@@ -0,0 +1,31 @@
+package com.openisle.dto;
+
+import com.openisle.model.PostChangeType;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+public class PostChangeLogDto {
+    private Long id;
+    private String username;
+    private String userAvatar;
+    private PostChangeType type;
+    private LocalDateTime time;
+    private String oldTitle;
+    private String newTitle;
+    private String oldContent;
+    private String newContent;
+    private String oldCategory;
+    private String newCategory;
+    private String oldTags;
+    private String newTags;
+    private Boolean oldClosed;
+    private Boolean newClosed;
+    private LocalDateTime oldPinnedAt;
+    private LocalDateTime newPinnedAt;
+    private Boolean oldFeatured;
+    private Boolean newFeatured;
+}

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

@@ -0,0 +1,42 @@
+package com.openisle.mapper;
+
+import com.openisle.dto.PostChangeLogDto;
+import com.openisle.model.*;
+import org.springframework.stereotype.Component;
+
+@Component
+public class PostChangeLogMapper {
+    public PostChangeLogDto toDto(PostChangeLog log) {
+        PostChangeLogDto dto = new PostChangeLogDto();
+        dto.setId(log.getId());
+        if (log.getUser() != null) {
+            dto.setUsername(log.getUser().getUsername());
+            dto.setUserAvatar(log.getUser().getAvatar());
+        }
+        dto.setType(log.getType());
+        dto.setTime(log.getCreatedAt());
+        if (log instanceof PostTitleChangeLog t) {
+            dto.setOldTitle(t.getOldTitle());
+            dto.setNewTitle(t.getNewTitle());
+        } else if (log instanceof PostContentChangeLog c) {
+            dto.setOldContent(c.getOldContent());
+            dto.setNewContent(c.getNewContent());
+        } else if (log instanceof PostCategoryChangeLog cat) {
+            dto.setOldCategory(cat.getOldCategory());
+            dto.setNewCategory(cat.getNewCategory());
+        } else if (log instanceof PostTagChangeLog tag) {
+            dto.setOldTags(tag.getOldTags());
+            dto.setNewTags(tag.getNewTags());
+        } else if (log instanceof PostClosedChangeLog cl) {
+            dto.setOldClosed(cl.isOldClosed());
+            dto.setNewClosed(cl.isNewClosed());
+        } else if (log instanceof PostPinnedChangeLog p) {
+            dto.setOldPinnedAt(p.getOldPinnedAt());
+            dto.setNewPinnedAt(p.getNewPinnedAt());
+        } else if (log instanceof PostFeaturedChangeLog f) {
+            dto.setOldFeatured(f.isOldFeatured());
+            dto.setNewFeatured(f.isNewFeatured());
+        }
+        return dto;
+    }
+}

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

@@ -0,0 +1,17 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_category_change_logs")
+public class PostCategoryChangeLog extends PostChangeLog {
+    private String oldCategory;
+    private String newCategory;
+}

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

@@ -0,0 +1,37 @@
+package com.openisle.model;
+
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.CreationTimestamp;
+
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_change_logs")
+@Inheritance(strategy = InheritanceType.JOINED)
+public abstract class PostChangeLog {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "post_id")
+    private Post post;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = true)
+    @JoinColumn(name = "user_id")
+    private User user;
+
+    @CreationTimestamp
+    @Column(nullable = false, updatable = false)
+    private LocalDateTime createdAt;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false)
+    private PostChangeType type;
+}

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

@@ -0,0 +1,13 @@
+package com.openisle.model;
+
+public enum PostChangeType {
+    CONTENT,
+    TITLE,
+    CATEGORY,
+    TAG,
+    CLOSED,
+    PINNED,
+    FEATURED,
+    VOTE_RESULT,
+    LOTTERY_RESULT
+}

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

@@ -0,0 +1,17 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_closed_change_logs")
+public class PostClosedChangeLog extends PostChangeLog {
+    private boolean oldClosed;
+    private boolean newClosed;
+}

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

@@ -0,0 +1,21 @@
+package com.openisle.model;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_content_change_logs")
+public class PostContentChangeLog extends PostChangeLog {
+    @Column(name = "old_content", columnDefinition = "LONGTEXT")
+    private String oldContent;
+
+    @Column(name = "new_content", columnDefinition = "LONGTEXT")
+    private String newContent;
+}

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

@@ -0,0 +1,17 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_featured_change_logs")
+public class PostFeaturedChangeLog extends PostChangeLog {
+    private boolean oldFeatured;
+    private boolean newFeatured;
+}

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

@@ -0,0 +1,16 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_lottery_result_change_logs")
+public class PostLotteryResultChangeLog extends PostChangeLog {
+}
+

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

@@ -0,0 +1,19 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_pinned_change_logs")
+public class PostPinnedChangeLog extends PostChangeLog {
+    private LocalDateTime oldPinnedAt;
+    private LocalDateTime newPinnedAt;
+}

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

@@ -0,0 +1,21 @@
+package com.openisle.model;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_tag_change_logs")
+public class PostTagChangeLog extends PostChangeLog {
+    @Column(name = "old_tags")
+    private String oldTags;
+
+    @Column(name = "new_tags")
+    private String newTags;
+}

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

@@ -0,0 +1,17 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_title_change_logs")
+public class PostTitleChangeLog extends PostChangeLog {
+    private String oldTitle;
+    private String newTitle;
+}

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

@@ -0,0 +1,16 @@
+package com.openisle.model;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@Entity
+@Table(name = "post_vote_result_change_logs")
+public class PostVoteResultChangeLog extends PostChangeLog {
+}
+

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

@@ -0,0 +1,11 @@
+package com.openisle.repository;
+
+import com.openisle.model.Post;
+import com.openisle.model.PostChangeLog;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+
+public interface PostChangeLogRepository extends JpaRepository<PostChangeLog, Long> {
+    List<PostChangeLog> findByPostOrderByCreatedAtAsc(Post post);
+}

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

@@ -0,0 +1,108 @@
+package com.openisle.service;
+
+import com.openisle.model.*;
+import com.openisle.repository.PostChangeLogRepository;
+import com.openisle.repository.PostRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.Set;
+import java.util.stream.Collectors;
+
+@Service
+@RequiredArgsConstructor
+public class PostChangeLogService {
+    private final PostChangeLogRepository logRepository;
+    private final PostRepository  postRepository;
+
+    public void recordContentChange(Post post, User user, String oldContent, String newContent) {
+        PostContentChangeLog log = new PostContentChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.CONTENT);
+        log.setOldContent(oldContent);
+        log.setNewContent(newContent);
+        logRepository.save(log);
+    }
+
+    public void recordTitleChange(Post post, User user, String oldTitle, String newTitle) {
+        PostTitleChangeLog log = new PostTitleChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.TITLE);
+        log.setOldTitle(oldTitle);
+        log.setNewTitle(newTitle);
+        logRepository.save(log);
+    }
+
+    public void recordCategoryChange(Post post, User user, String oldCategory, String newCategory) {
+        PostCategoryChangeLog log = new PostCategoryChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.CATEGORY);
+        log.setOldCategory(oldCategory);
+        log.setNewCategory(newCategory);
+        logRepository.save(log);
+    }
+
+    public void recordTagChange(Post post, User user, Set<Tag> oldTags, Set<Tag> newTags) {
+        PostTagChangeLog log = new PostTagChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.TAG);
+        log.setOldTags(oldTags.stream().map(Tag::getName).collect(Collectors.joining(",")));
+        log.setNewTags(newTags.stream().map(Tag::getName).collect(Collectors.joining(",")));
+        logRepository.save(log);
+    }
+
+    public void recordClosedChange(Post post, User user, boolean oldClosed, boolean newClosed) {
+        PostClosedChangeLog log = new PostClosedChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.CLOSED);
+        log.setOldClosed(oldClosed);
+        log.setNewClosed(newClosed);
+        logRepository.save(log);
+    }
+
+    public void recordPinnedChange(Post post, User user, java.time.LocalDateTime oldPinnedAt, java.time.LocalDateTime newPinnedAt) {
+        PostPinnedChangeLog log = new PostPinnedChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.PINNED);
+        log.setOldPinnedAt(oldPinnedAt);
+        log.setNewPinnedAt(newPinnedAt);
+        logRepository.save(log);
+    }
+
+    public void recordFeaturedChange(Post post, User user, boolean oldFeatured, boolean newFeatured) {
+        PostFeaturedChangeLog log = new PostFeaturedChangeLog();
+        log.setPost(post);
+        log.setUser(user);
+        log.setType(PostChangeType.FEATURED);
+        log.setOldFeatured(oldFeatured);
+        log.setNewFeatured(newFeatured);
+        logRepository.save(log);
+    }
+
+    public void recordVoteResult(Post post) {
+        PostVoteResultChangeLog log = new PostVoteResultChangeLog();
+        log.setPost(post);
+        log.setType(PostChangeType.VOTE_RESULT);
+        logRepository.save(log);
+    }
+
+    public void recordLotteryResult(Post post) {
+        PostLotteryResultChangeLog log = new PostLotteryResultChangeLog();
+        log.setPost(post);
+        log.setType(PostChangeType.LOTTERY_RESULT);
+        logRepository.save(log);
+    }
+
+    public List<PostChangeLog> listLogs(Long postId) {
+        Post post = postRepository.findById(postId)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        return logRepository.findByPostOrderByCreatedAtAsc(post);
+    }
+}

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

@@ -19,6 +19,7 @@ import com.openisle.repository.CategoryRepository;
 import com.openisle.repository.TagRepository;
 import com.openisle.service.SubscriptionService;
 import com.openisle.service.CommentService;
+import com.openisle.service.PostChangeLogService;
 import com.openisle.repository.CommentRepository;
 import com.openisle.repository.ReactionRepository;
 import com.openisle.repository.PostSubscriptionRepository;
@@ -74,6 +75,7 @@ public class PostService {
     private final EmailSender emailSender;
     private final ApplicationContext applicationContext;
     private final PointService pointService;
+    private final PostChangeLogService postChangeLogService;
     private final ConcurrentMap<Long, ScheduledFuture<?>> scheduledFinalizations = new ConcurrentHashMap<>();
     @Value("${app.website-url:https://www.open-isle.com}")
     private String websiteUrl;
@@ -99,6 +101,7 @@ public class PostService {
                        EmailSender emailSender,
                        ApplicationContext applicationContext,
                        PointService pointService,
+                       PostChangeLogService postChangeLogService,
                        @Value("${app.post.publish-mode:DIRECT}") PublishMode publishMode) {
         this.postRepository = postRepository;
         this.userRepository = userRepository;
@@ -120,6 +123,7 @@ public class PostService {
         this.emailSender = emailSender;
         this.applicationContext = applicationContext;
         this.pointService = pointService;
+        this.postChangeLogService = postChangeLogService;
         this.publishMode = publishMode;
     }
 
@@ -159,19 +163,28 @@ public class PostService {
         return postRepository.findByStatusAndRssExcludedFalseOrderByCreatedAtDesc(PostStatus.PUBLISHED, pageable);
     }
 
-    public Post excludeFromRss(Long id) {
+    public Post excludeFromRss(Long id, String username) {
         Post post = postRepository.findById(id).orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        boolean oldFeatured = !Boolean.TRUE.equals(post.getRssExcluded());
         post.setRssExcluded(true);
-        return postRepository.save(post);
+        Post saved = postRepository.save(post);
+        postChangeLogService.recordFeaturedChange(saved, user, oldFeatured, false);
+        return saved;
     }
 
-    public Post includeInRss(Long id) {
+    public Post includeInRss(Long id, String username) {
         Post post = postRepository.findById(id).orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        boolean oldFeatured = !Boolean.TRUE.equals(post.getRssExcluded());
         post.setRssExcluded(false);
-        post = postRepository.save(post);
+        Post saved = postRepository.save(post);
-        notificationService.createNotification(post.getAuthor(), NotificationType.POST_FEATURED, post, null, null, null, null, null);
+        postChangeLogService.recordFeaturedChange(saved, user, oldFeatured, true);
-        pointService.awardForFeatured(post.getAuthor().getUsername(), post.getId());
+        notificationService.createNotification(saved.getAuthor(), NotificationType.POST_FEATURED, saved, null, null, null, null, null);
-        return post;
+        pointService.awardForFeatured(saved.getAuthor().getUsername(), saved.getId());
+        return saved;
     }
 
     public Post createPost(String username,
@@ -638,18 +651,28 @@ public class PostService {
         return post;
     }
 
-    public Post pinPost(Long id) {
+    public Post pinPost(Long id, String username) {
         Post post = postRepository.findById(id)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        java.time.LocalDateTime oldPinned = post.getPinnedAt();
         post.setPinnedAt(java.time.LocalDateTime.now());
-        return postRepository.save(post);
+        Post saved = postRepository.save(post);
+        postChangeLogService.recordPinnedChange(saved, user, oldPinned, saved.getPinnedAt());
+        return saved;
     }
 
-    public Post unpinPost(Long id) {
+    public Post unpinPost(Long id, String username) {
         Post post = postRepository.findById(id)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
+        User user = userRepository.findByUsername(username)
+                .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
+        java.time.LocalDateTime oldPinned = post.getPinnedAt();
         post.setPinnedAt(null);
-        return postRepository.save(post);
+        Post saved = postRepository.save(post);
+        postChangeLogService.recordPinnedChange(saved, user, oldPinned, null);
+        return saved;
     }
 
     public Post closePost(Long id, String username) {
@@ -660,8 +683,11 @@ public class PostService {
         if (!user.getId().equals(post.getAuthor().getId()) && user.getRole() != Role.ADMIN) {
             throw new IllegalArgumentException("Unauthorized");
         }
+        boolean oldClosed = post.isClosed();
         post.setClosed(true);
-        return postRepository.save(post);
+        Post saved = postRepository.save(post);
+        postChangeLogService.recordClosedChange(saved, user, oldClosed, true);
+        return saved;
     }
 
     public Post reopenPost(Long id, String username) {
@@ -672,8 +698,11 @@ public class PostService {
         if (!user.getId().equals(post.getAuthor().getId()) && user.getRole() != Role.ADMIN) {
             throw new IllegalArgumentException("Unauthorized");
         }
+        boolean oldClosed = post.isClosed();
         post.setClosed(false);
-        return postRepository.save(post);
+        Post saved = postRepository.save(post);
+        postChangeLogService.recordClosedChange(saved, user, oldClosed, false);
+        return saved;
     }
 
     @org.springframework.transaction.annotation.Transactional
@@ -702,14 +731,30 @@ public class PostService {
         if (tags.isEmpty()) {
             throw new IllegalArgumentException("Tag not found");
         }
-        post.setTitle(title);
+        String oldTitle = post.getTitle();
         String oldContent = post.getContent();
+        Category oldCategory = post.getCategory();
+        java.util.Set<com.openisle.model.Tag> oldTags = new java.util.HashSet<>(post.getTags());
+        post.setTitle(title);
         post.setContent(content);
         post.setCategory(category);
         post.setTags(new java.util.HashSet<>(tags));
         Post updated = postRepository.save(post);
         imageUploader.adjustReferences(oldContent, content);
         notificationService.notifyMentions(content, user, updated, null);
+        if (!java.util.Objects.equals(oldTitle, title)) {
+            postChangeLogService.recordTitleChange(updated, user, oldTitle, title);
+        }
+        if (!java.util.Objects.equals(oldContent, content)) {
+            postChangeLogService.recordContentChange(updated, user, oldContent, content);
+        }
+        if (!java.util.Objects.equals(oldCategory.getId(), category.getId())) {
+            postChangeLogService.recordCategoryChange(updated, user, oldCategory.getName(), category.getName());
+        }
+        java.util.Set<com.openisle.model.Tag> newTags = new java.util.HashSet<>(tags);
+        if (!oldTags.equals(newTags)) {
+            postChangeLogService.recordTagChange(updated, user, oldTags, newTags);
+        }
         return updated;
     }
 

frontend_nuxt/.env.production.example

@@ -1,10 +1,10 @@
 
 ; 生产环境后端
-NUXT_PUBLIC_API_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_API_BASE_URL=https://www.open-isle.com
 ; 正式环境/生产环境
-NUXT_PUBLIC_WEBSITE_BASE_URL=https://open-isle.com
+NUXT_PUBLIC_WEBSITE_BASE_URL=https://www.open-isle.com
 ; 生产环境ws后端
-NUXT_PUBLIC_WEBSOCKET_URL=https://open-isle.com/websocket
+NUXT_PUBLIC_WEBSOCKET_URL=https://www.open-isle.com/websocket
 
 NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com
 NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ

frontend_nuxt/assets/global.css

@@ -18,7 +18,9 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color: rgba(88, 241, 255, 0.166);
+  --normal-light-background-color: rgba(242, 242, 242, 0.884);
+  --menu-selected-background-color-hover: 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); */
@@ -58,6 +60,8 @@
   --menu-border-color: #555;
   --normal-border-color: #555;
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
+  --normal-light-background-color: rgba(255, 255, 255, 0.1);
+  --menu-selected-background-color-hover: rgba(17, 182, 197, 0.082);
   --menu-text-color: rgb(173, 173, 173);
   /* --normal-background-color: #000000; */
   --normal-background-color: #333;
@@ -162,7 +166,7 @@ body {
   padding-left: 1em;
   border-left: 4px solid #d0d7de;
   color: var(--blockquote-text-color);
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   padding-top: 1px;
   padding-bottom: 1px;
 }
@@ -295,7 +299,7 @@ body {
 
 /* 鼠标悬停行高亮 */
 .info-content-text tbody tr:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
   transition: background-color 0.2s ease;
 }
 

frontend_nuxt/components/ArticleCategory.vue

@@ -2,11 +2,12 @@
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
       <BaseImage
-        v-if="category.smallIcon"
+        v-if="isImageIcon(category.smallIcon)"
         class="article-info-item-img"
         :src="category.smallIcon"
         :alt="category.name"
       />
+      <component v-else :is="category.smallIcon || category.icon" class="article-info-item-img" />
       <div class="article-info-item-text">{{ category.name }}</div>
     </div>
   </div>
@@ -22,6 +23,11 @@ const gotoCategory = async () => {
   const value = encodeURIComponent(props.category.id ?? props.category.name)
   await navigateTo({ path: '/', query: { category: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/ArticleTags.vue

@@ -7,11 +7,17 @@
       @click="gotoTag(tag)"
     >
       <BaseImage
-        v-if="tag.smallIcon"
+        v-if="isImageIcon(tag.smallIcon)"
         class="article-info-item-img"
         :src="tag.smallIcon"
         :alt="tag.name"
       />
+      <component
+        v-else-if="tag.smallIcon || tag.icon"
+        :is="tag.smallIcon || tag.icon"
+        class="article-info-item-img"
+      />
+      <tag-one v-else class="article-info-item-img" />
       <div class="article-info-item-text">{{ tag.name }}</div>
     </div>
   </div>
@@ -26,6 +32,11 @@ const gotoTag = async (tag) => {
   const value = encodeURIComponent(tag.id ?? tag.name)
   await navigateTo({ path: '/', query: { tags: value } }, { replace: true })
 }
+
+const isImageIcon = (icon) => {
+  if (!icon) return false
+  return /^https?:\/\//.test(icon) || icon.startsWith('/')
+}
 </script>
 
 <style scoped>

frontend_nuxt/components/CategorySelect.vue

@@ -15,7 +15,7 @@
               class="option-icon"
               :alt="option.name"
             />
-            <!-- <i v-else :class="['option-icon', option.icon]"></i> -->
+            <component v-else :is="option.smallIcon || option.icon" class="option-icon" />
           </template>
           <span>{{ option.name }}</span>
           <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>

frontend_nuxt/components/CommentItem.vue

@@ -404,7 +404,6 @@ const handleContentClick = (e) => {
   margin-left: 10px;
   margin-right: 10px;
   opacity: 0.5;
-  transform: scaleX(-1);
 }
 
 .reply-user-name {

frontend_nuxt/components/HeaderComponent.vue

@@ -4,7 +4,9 @@
       <div class="header-content-left">
         <div v-if="showMenuBtn" class="menu-btn-wrapper">
           <button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
-            <application-menu class="micon"></application-menu>
+            <ToolTip content="展开/收起菜单" placement="bottom">
+              <application-menu class="micon"></application-menu>
+            </ToolTip>
           </button>
           <span
             v-if="isMobile && (unreadMessageCount > 0 || hasChannelUnread)"

frontend_nuxt/components/MenuComponent.vue

@@ -122,6 +122,11 @@
                 class="section-item-icon"
                 :alt="t.name"
               />
+              <component
+                v-else-if="t.smallIcon || t.icon"
+                :is="t.smallIcon || t.icon"
+                class="section-item-icon"
+              />
               <tag-one v-else class="section-item-icon" />
               <span class="section-item-text"
                 >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
@@ -311,6 +316,10 @@ const gotoTag = (t) => {
   align-items: center;
 }
 
+.menu-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+}
+
 .menu-item.selected {
   font-weight: bold;
   background-color: var(--menu-selected-background-color);
@@ -402,7 +411,7 @@ const gotoTag = (t) => {
 }
 
 .section-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--menu-selected-background-color-hover);
 }
 
 .section-item-text-count {

frontend_nuxt/components/PostChangeLogItem.vue

@@ -0,0 +1,127 @@
+<template>
+  <div :id="`change-log-${log.id}`" class="change-log-container">
+    <div class="change-log-text">
+      <BaseImage
+        v-if="log.userAvatar"
+        class="change-log-avatar"
+        :src="log.userAvatar"
+        alt="avatar"
+        @click="() => navigateTo(`/users/${log.username}`)"
+      />
+      <span v-if="log.username" class="change-log-user">{{ log.username }}</span>
+      <span v-if="log.type === 'CONTENT'" class="change-log-content">变更了文章内容</span>
+      <span v-else-if="log.type === 'TITLE'" class="change-log-content">变更了文章标题</span>
+      <span v-else-if="log.type === 'CATEGORY'" class="change-log-content">变更了文章分类</span>
+      <span v-else-if="log.type === 'TAG'" class="change-log-content">变更了文章标签</span>
+      <span v-else-if="log.type === 'CLOSED'" class="change-log-content">
+        <template v-if="log.newClosed">关闭了文章</template>
+        <template v-else>重新打开了文章</template>
+      </span>
+      <span v-else-if="log.type === 'PINNED'" class="change-log-content">
+        <template v-if="log.newPinnedAt">置顶了文章</template>
+        <template v-else>取消置顶文章</template>
+      </span>
+      <span v-else-if="log.type === 'FEATURED'" class="change-log-content">
+        <template v-if="log.newFeatured">将文章设为精选</template>
+        <template v-else>取消精选文章</template>
+      </span>
+      <span v-else-if="log.type === 'VOTE_RESULT'" class="change-log-content">投票已出结果</span>
+      <span v-else-if="log.type === 'LOTTERY_RESULT'" class="change-log-content">抽奖已开奖</span>
+    </div>
+    <div class="change-log-time">{{ log.time }}</div>
+    <div
+      v-if="log.type === 'CONTENT' || log.type === 'TITLE'"
+      class="content-diff"
+      v-html="diffHtml"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { html } from 'diff2html'
+import { createTwoFilesPatch } from 'diff'
+import { useIsMobile } from '~/utils/screen'
+import 'diff2html/bundles/css/diff2html.min.css'
+import BaseImage from '~/components/BaseImage.vue'
+import { navigateTo } from 'nuxt/app'
+import { themeState } from '~/utils/theme'
+const props = defineProps({
+  log: Object,
+  title: String,
+})
+
+const diffHtml = computed(() => {
+  const isMobile = useIsMobile()
+  // Track theme changes
+  const isDark = import.meta.client && document.documentElement.dataset.theme === 'dark'
+  themeState.mode
+  const colorScheme = isDark ? 'dark' : 'light'
+
+  if (props.log.type === 'CONTENT') {
+    const oldContent = props.log.oldContent ?? ''
+    const newContent = props.log.newContent ?? ''
+    const diff = createTwoFilesPatch(props.title, props.title, oldContent, newContent)
+    return html(diff, {
+      inputFormat: 'diff',
+      showFiles: false,
+      matching: 'lines',
+      drawFileList: false,
+      outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side',
+      colorScheme,
+    })
+  } else if (props.log.type === 'TITLE') {
+    const oldTitle = props.log.oldTitle ?? ''
+    const newTitle = props.log.newTitle ?? ''
+    const diff = createTwoFilesPatch(oldTitle, newTitle, '', '')
+    return html(diff, {
+      inputFormat: 'diff',
+      showFiles: false,
+      matching: 'lines',
+      drawFileList: false,
+      outputFormat: isMobile.value ? 'line-by-line' : 'side-by-side',
+      colorScheme,
+    })
+  }
+  return ''
+})
+</script>
+
+<style scoped>
+.change-log-container {
+  display: flex;
+  flex-direction: column;
+  /* padding-top: 5px; */
+  /* padding-bottom: 30px; */
+  font-size: 14px;
+}
+.change-log-text {
+  display: flex;
+  align-items: center;
+}
+.change-log-user {
+  font-weight: bold;
+  margin-right: 4px;
+}
+
+.change-log-user,
+.change-log-content {
+  opacity: 0.7;
+}
+
+.change-log-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 4px;
+  cursor: pointer;
+}
+.change-log-time {
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.content-diff {
+  margin-top: 8px;
+}
+</style>

frontend_nuxt/components/PostEditor.vue

@@ -136,7 +136,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--menu-selected-background-color);
+  background: var(--normal-light-background-color);
   display: flex;
   align-items: center;
   justify-content: center;

frontend_nuxt/components/ReactionsGroup.vue

@@ -331,11 +331,11 @@ onMounted(async () => {
 
 .reactions-viewer-item.placeholder,
 .reactions-viewer-single-item.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .reaction-option.selected {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 @media (max-width: 768px) {

frontend_nuxt/package-lock.json

@@ -10,6 +10,8 @@
         "@nuxt/image": "^1.11.0",
         "@stomp/stompjs": "^7.0.0",
         "cropperjs": "^1.6.2",
+        "diff": "^8.0.2",
+        "diff2html": "^3.4.52",
         "echarts": "^5.6.0",
         "flatpickr": "^4.6.13",
         "highlight.js": "^11.11.1",
@@ -7218,6 +7220,41 @@
       "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
       "license": "Apache-2.0"
     },
+    "node_modules/diff2html": {
+      "version": "3.4.52",
+      "resolved": "https://registry.npmjs.org/diff2html/-/diff2html-3.4.52.tgz",
+      "integrity": "sha512-qhMg8/I3sZ4zm/6R/Kh0xd6qG6Vm86w6M+C9W+DuH1V8ACz+1cgEC8/k0ucjv6AGqZWzHm/8G1gh7IlrUqCMhg==",
+      "license": "MIT",
+      "dependencies": {
+        "diff": "^7.0.0",
+        "hogan.js": "3.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "highlight.js": "11.9.0"
+      }
+    },
+    "node_modules/diff2html/node_modules/diff": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/diff2html/node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8291,6 +8328,49 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/hogan.js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+      "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+      "dependencies": {
+        "mkdirp": "0.3.0",
+        "nopt": "1.0.10"
+      },
+      "bin": {
+        "hulk": "bin/hulk"
+      }
+    },
+    "node_modules/hogan.js/node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC"
+    },
+    "node_modules/hogan.js/node_modules/mkdirp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+      "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
+      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/hogan.js/node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "license": "MIT",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",

frontend_nuxt/package.json

@@ -16,6 +16,8 @@
     "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
+    "diff": "^8.0.2",
+    "diff2html": "^3.4.52",
     "echarts": "^5.6.0",
     "flatpickr": "^4.6.13",
     "highlight.js": "^11.11.1",

frontend_nuxt/pages/index.vue

@@ -65,16 +65,17 @@
           class="article-item"
           v-for="article in articles"
           :key="article.id"
+          @click="navigateTo(`/posts/${article.id}`)"
         >
           <div class="article-main-container">
-            <NuxtLink class="article-item-title main-item" :to="`/posts/${article.id}`">
+            <NuxtLink class="article-item-title main-item">
               <pin v-if="article.pinned" theme="outline" class="pinned-icon" />
               <gift v-if="article.type === 'LOTTERY'" class="lottery-icon" />
               <ranking-list v-else-if="article.type === 'POLL'" class="poll-icon" />
               <star v-if="!article.rssExcluded" class="featured-icon" />
               {{ article.title }}
             </NuxtLink>
-            <NuxtLink class="article-item-description main-item" :to="`/posts/${article.id}`">
+            <NuxtLink class="article-item-description main-item">
               {{ sanitizeDescription(article.description) }}
             </NuxtLink>
             <div class="article-info-container main-item">
@@ -488,6 +489,11 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   border-bottom: 1px solid var(--normal-border-color);
 }
 
+.article-item:hover {
+  background-color: var(--menu-selected-background-color-hover);
+  cursor: pointer;
+}
+
 .article-main-container,
 .header-item.main-item {
   width: calc(60% - 20px);
@@ -529,7 +535,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 .article-item-title {
-  margin-top: 10px;
+  margin-top: 15px;
   font-size: 18px;
   text-decoration: none;
   color: var(--text-color);
@@ -558,7 +564,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 
 .article-item-description {
   max-width: 100%;
-  margin-top: 10px;
+  margin-top: 5px;
   font-size: 13px;
   color: rgba(140, 140, 140, 0.888);
   display: -webkit-box;
@@ -605,6 +611,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding-bottom: 5px;
 }
 
 .article-member-avatars-container {
@@ -719,10 +726,15 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   }
 
   .article-item-title {
+    margin-top: 10px;
     font-size: 16px;
     font-weight: bold;
   }
 
+  .article-main-container {
+    padding-bottom: 0px;
+  }
+
   .article-item-description {
     margin-top: 2px;
     font-size: 10px;

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

@@ -36,7 +36,11 @@
               </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-header">
+                <next class="reply-icon" />
+                <BaseImage class="reply-avatar" :src="item.replyTo.sender.avatar" alt="avatar" />
+                <div class="reply-author">{{ item.replyTo.sender.username }}:</div>
+              </div>
               <div class="reply-content" v-html="renderMarkdown(item.replyTo.content)"></div>
             </div>
             <div class="message-content">
@@ -48,7 +52,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <div class="reply-btn"><next @click="setReply(item)" /> 写个回复...</div>
+              <div @click="setReply(item)" class="reply-btn"><next /> 写个回复...</div>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -63,11 +67,21 @@
     </div>
 
     <div class="message-input-area">
+      <div
+        v-if="newMessagesCount > 0 && !isUserNearBottom"
+        class="new-message-container"
+        @click="handleScrollToBottom"
+      >
+        <double-down />
+        <div class="new-message-count">有{{ newMessagesCount }}条新消息</div>
+      </div>
+
       <div v-if="replyTo" class="active-reply">
         正在回复 {{ replyTo.sender.username }}:
         {{ stripMarkdownLength(replyTo.content, 50) }}
         <close-icon class="close-reply" @click="replyTo = null" />
       </div>
+
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>
   </div>
@@ -120,6 +134,7 @@ const isChannel = ref(false)
 const isFloatMode = computed(() => route.query.float !== undefined)
 const floatRoute = useState('messageFloatRoute')
 const replyTo = ref(null)
+const newMessagesCount = ref(0)
 
 const isUserNearBottom = ref(true)
 function updateNearBottom() {
@@ -127,6 +142,9 @@ function updateNearBottom() {
   if (!el) return
   const threshold = 40 // px
   isUserNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold
+  if (isUserNearBottom.value) {
+    newMessagesCount.value = 0
+  }
 }
 
 const hasMoreMessages = computed(() => currentPage.value < totalPages.value - 1)
@@ -170,6 +188,11 @@ function scrollToBottomInstant() {
   el.scrollTop = el.scrollHeight
 }
 
+function handleScrollToBottom() {
+  scrollToBottomSmooth()
+  newMessagesCount.value = 0
+}
+
 async function fetchMessages(page = 0) {
   if (page === 0) {
     loading.value = true
@@ -301,6 +324,7 @@ async function sendMessage(content, clearInput) {
     await nextTick()
     // 仅“发送消息成功后”才平滑滚动到底部
     scrollToBottomSmooth()
+    newMessagesCount.value = 0
   } catch (e) {
     toast.error(e.message)
   } finally {
@@ -373,6 +397,8 @@ const subscribeToConversation = () => {
 
       if (isUserNearBottom.value) {
         scrollToBottomSmooth()
+      } else {
+        newMessagesCount.value += 1
       }
     } catch (e) {
       console.error('Failed to parse websocket message', e)
@@ -555,6 +581,25 @@ function goBack() {
   gap: 10px;
 }
 
+.new-message-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 20px;
+  padding: 3px 6px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  width: fit-content;
+  position: absolute;
+  bottom: calc(100% + 20px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  background-color: var(--background-color);
+}
+
 .user-name {
   font-size: 14px;
   font-weight: 600;
@@ -585,11 +630,6 @@ function goBack() {
   border-bottom-left-radius: 4px;
 }
 
-.message-input-area {
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
 .loading-container {
   display: flex;
   justify-content: center;
@@ -606,6 +646,19 @@ function goBack() {
 .message-input-area {
   margin-left: 10px;
   margin-right: 10px;
+  position: relative;
+}
+
+.reply-icon {
+  color: var(--primary-color);
+  margin-right: 5px;
+}
+
+.reply-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
 }
 
 .reply-preview {
@@ -614,12 +667,19 @@ function goBack() {
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;
   font-size: 13px;
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
+}
+
+.reply-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .reply-author {
   font-weight: bold;
   margin-bottom: 2px;
+  opacity: 0.5;
 }
 
 .reply-btn {
@@ -634,7 +694,7 @@ function goBack() {
 }
 
 .active-reply {
-  background-color: var(--bg-color-soft);
+  background-color: var(--normal-light-background-color);
   padding: 5px 10px;
   border-left: 5px solid var(--primary-color);
   margin-bottom: 5px;

frontend_nuxt/pages/message-box/index.vue

@@ -419,7 +419,7 @@ function minimize() {
 }
 
 .conversation-item:hover {
-  background-color: var(--menu-selected-background-color);
+  background-color: var(--normal-light-background-color);
 }
 
 .conversation-avatar {

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

@@ -122,9 +122,10 @@
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
       <div v-else class="comments-container">
-        <BaseTimeline :items="comments">
+        <BaseTimeline :items="timelineItems">
           <template #item="{ item }">
             <CommentItem
+              v-if="item.kind === 'comment'"
               :key="item.id"
               :comment="item"
               :level="0"
@@ -133,6 +134,7 @@
               :post-closed="closed"
               @deleted="onCommentDeleted"
             />
+            <PostChangeLogItem v-else :log="item" :title="title" />
           </template>
         </BaseTimeline>
       </div>
@@ -182,6 +184,7 @@ import { useRoute } from 'vue-router'
 import CommentItem from '~/components/CommentItem.vue'
 import CommentEditor from '~/components/CommentEditor.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
+import PostChangeLogItem from '~/components/PostChangeLogItem.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
@@ -212,6 +215,7 @@ const category = ref('')
 const tags = ref([])
 const postReactions = ref([])
 const comments = ref([])
+const changeLogs = ref([])
 const status = ref('PUBLISHED')
 const closed = ref(false)
 const pinnedAt = ref(null)
@@ -225,6 +229,7 @@ const subscribed = ref(false)
 const commentSort = ref('NEWEST')
 const isFetchingComments = ref(false)
 const isMobile = useIsMobile()
+const timelineItems = ref([])
 
 const headerHeight = import.meta.client
   ? parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 0
@@ -290,8 +295,13 @@ const gatherPostItems = () => {
     const main = mainContainer.value.querySelector('.info-content-container')
     if (main) items.push({ el: main, top: getTop(main) })
 
-    for (const c of comments.value) {
+    for (const c of timelineItems.value) {
-      const el = document.getElementById('comment-' + c.id)
+      let el
+      if (c.kind === 'comment') {
+        el = document.getElementById('comment-' + c.id)
+      } else {
+        el = document.getElementById('change-log-' + c.id)
+      }
       if (el) {
         items.push({ el, top: getTop(el) })
       }
@@ -323,12 +333,66 @@ const mapComment = (
   ),
   openReplies: level === 0,
   src: c.author.avatar,
+  createdAt: c.createdAt,
   iconClick: () => navigateTo(`/users/${c.author.id}`),
   parentUserName: parentUserName,
   parentUserAvatar: parentUserAvatar,
   parentUserClick: parentUserId ? () => navigateTo(`/users/${parentUserId}`) : null,
 })
 
+const changeLogIcon = (l) => {
+  if (l.type === 'CONTENT') {
+    return 'edit'
+  } else if (l.type === 'TITLE') {
+    return 'hashtag-key'
+  } else if (l.type === 'CATEGORY') {
+    return 'tag-one'
+  } else if (l.type === 'TAG') {
+    return 'tag-one'
+  } else if (l.type === 'CLOSED') {
+    if (l.newClosed) {
+      return 'lock-one'
+    } else {
+      return 'unlock'
+    }
+  } else if (l.type === 'PINNED') {
+    return 'pin-icon'
+  } else if (l.type === 'FEATURED') {
+    if (l.newFeatured) {
+      return 'star'
+    } else {
+      return 'dislike'
+    }
+  } else if (l.type === 'VOTE_RESULT') {
+    return 'check-one'
+  } else if (l.type === 'LOTTERY_RESULT') {
+    return 'gift'
+  } else {
+    return 'info'
+  }
+}
+
+const mapChangeLog = (l) => ({
+  id: l.id,
+  username: l.username,
+  userAvatar: l.userAvatar,
+  type: l.type,
+  createdAt: l.time,
+  time: TimeManager.format(l.time),
+  newClosed: l.newClosed,
+  newPinnedAt: l.newPinnedAt,
+  newFeatured: l.newFeatured,
+  oldContent: l.oldContent,
+  newContent: l.newContent,
+  oldTitle: l.oldTitle,
+  newTitle: l.newTitle,
+  oldCategory: l.oldCategory,
+  newCategory: l.newCategory,
+  oldTags: l.oldTags,
+  newTags: l.newTags,
+  icon: changeLogIcon(l),
+})
+
 const getTop = (el) => {
   return el.getBoundingClientRect().top + window.scrollY
 }
@@ -422,19 +486,21 @@ watchEffect(() => {
 //   router.replace('/404')
 // }
 
-const totalPosts = computed(() => comments.value.length + 1)
+const totalPosts = computed(() => timelineItems.value.length + 1)
 const lastReplyTime = computed(() =>
-  comments.value.length ? comments.value[comments.value.length - 1].time : postTime.value,
+  timelineItems.value.length
+    ? timelineItems.value[timelineItems.value.length - 1].time
+    : postTime.value,
 )
 const firstReplyTime = computed(() =>
-  comments.value.length ? comments.value[0].time : postTime.value,
+  timelineItems.value.length ? timelineItems.value[0].time : postTime.value,
 )
 const scrollerTopTime = computed(() =>
   commentSort.value === 'OLDEST' ? postTime.value : firstReplyTime.value,
 )
 
 watch(
-  () => comments.value.length,
+  () => timelineItems.value.length,
   async () => {
     await nextTick()
     gatherPostItems()
@@ -546,6 +612,7 @@ const approvePost = async () => {
     status.value = 'PUBLISHED'
     toast.success('已通过审核')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -561,6 +628,7 @@ const pinPost = async () => {
   if (res.ok) {
     toast.success('已置顶')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -576,6 +644,7 @@ const unpinPost = async () => {
   if (res.ok) {
     toast.success('已取消置顶')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -591,6 +660,7 @@ const excludeRss = async () => {
   if (res.ok) {
     rssExcluded.value = true
     toast.success('已标记为rss不推荐')
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -606,6 +676,7 @@ const includeRss = async () => {
   if (res.ok) {
     rssExcluded.value = false
     toast.success('已标记为rss推荐')
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -622,6 +693,7 @@ const closePost = async () => {
     closed.value = true
     toast.success('已关闭')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -638,6 +710,7 @@ const reopenPost = async () => {
     closed.value = false
     toast.success('已重新打开')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -682,6 +755,7 @@ const rejectPost = async () => {
     status.value = 'REJECTED'
     toast.success('已驳回')
     await refreshPost()
+    await fetchChangeLogs()
   } else {
     toast.error('操作失败')
   }
@@ -740,7 +814,42 @@ const fetchComments = async () => {
   }
 }
 
-watch(commentSort, fetchComments)
+const fetchChangeLogs = async () => {
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/change-logs`)
+    if (res.ok) {
+      const data = await res.json()
+      changeLogs.value = data.map(mapChangeLog)
+      await nextTick()
+      gatherPostItems()
+    }
+  } catch (e) {
+    console.debug('Fetch change logs error', e)
+  }
+}
+
+//
+// todo(tim): fetchComments, fetchChangeLogs 整合到一个请求，并且取消前端排序
+//
+const fetchTimeline = async () => {
+  await Promise.all([fetchComments(), fetchChangeLogs()])
+  const cs = comments.value.map((c) => ({ ...c, kind: 'comment' }))
+  const ls = changeLogs.value.map((l) => ({ ...l, kind: 'log' }))
+
+  if (commentSort.value === 'NEWEST') {
+    timelineItems.value = [...cs, ...ls].sort(
+      (a, b) => new Date(b.createdAt) - new Date(a.createdAt),
+    )
+  } else {
+    timelineItems.value = [...cs, ...ls].sort(
+      (a, b) => new Date(a.createdAt) - new Date(b.createdAt),
+    )
+  }
+}
+
+watch(commentSort, async () => {
+  await fetchTimeline()
+})
 
 const jumpToHashComment = async () => {
   const hash = location.hash
@@ -763,7 +872,7 @@ const gotoProfile = () => {
 
 const initPage = async () => {
   scrollTo(0, 0)
-  await fetchComments()
+  await fetchTimeline()
   const hash = location.hash
   const id = hash.startsWith('#comment-') ? hash.substring('#comment-'.length) : null
   if (id) expandCommentPath(id)

frontend_nuxt/plugins/iconpark.client.ts

@@ -63,6 +63,19 @@ import {
   History,
   Lightning,
   PeoplesTwo,
+  Code,
+  GoodTwo,
+  Twitter,
+  Bitcoin,
+  Fire,
+  Communication,
+  WaterLevel,
+  RobotOne,
+  Server,
+  Protection,
+  DoubleDown,
+  Open,
+  Dislike,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -129,4 +142,17 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('HistoryIcon', History)
   nuxtApp.vueApp.component('Lightning', Lightning)
   nuxtApp.vueApp.component('PeoplesTwo', PeoplesTwo)
+  nuxtApp.vueApp.component('CodeIcon', Code)
+  nuxtApp.vueApp.component('GoodTwo', GoodTwo)
+  nuxtApp.vueApp.component('Twitter', Twitter)
+  nuxtApp.vueApp.component('Bitcoin', Bitcoin)
+  nuxtApp.vueApp.component('Fire', Fire)
+  nuxtApp.vueApp.component('Communication', Communication)
+  nuxtApp.vueApp.component('WaterLevel', WaterLevel)
+  nuxtApp.vueApp.component('RobotOne', RobotOne)
+  nuxtApp.vueApp.component('ServerIcon', Server)
+  nuxtApp.vueApp.component('Protection', Protection)
+  nuxtApp.vueApp.component('DoubleDown', DoubleDown)
+  nuxtApp.vueApp.component('OpenIcon', Open)
+  nuxtApp.vueApp.component('Dislike', Dislike)
 })