mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-10 00:51:00 +08:00
Compare commits
25 Commits
codex/modi
...
codex/fix-
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3f152906f2 | ||
|
|
ef71d0b3d4 | ||
|
|
6f80d139ba | ||
|
|
7454931fa5 | ||
|
|
0852664a82 | ||
|
|
5814fb673a | ||
|
|
4ee4266e3d | ||
|
|
6a27fbe1d7 | ||
|
|
38ff04c358 | ||
|
|
fc27200ac1 | ||
|
|
b1998be425 | ||
|
|
72adc5b232 | ||
|
|
d24e67de5d | ||
|
|
eefefac236 | ||
|
|
2f339fdbdb | ||
|
|
3808becc8b | ||
|
|
18db4d7317 | ||
|
|
52cbb71945 | ||
|
|
39c34a9048 | ||
|
|
4baabf2224 | ||
|
|
8023183bc6 | ||
|
|
27efc493b2 | ||
|
|
ca6e45a711 | ||
|
|
803ca9e103 | ||
|
|
9d1e12773a |
@@ -44,7 +44,7 @@ public class PostController {
|
|||||||
req.getType(), req.getPrizeDescription(), req.getPrizeIcon(),
|
req.getType(), req.getPrizeDescription(), req.getPrizeIcon(),
|
||||||
req.getPrizeCount(), req.getPointCost(),
|
req.getPrizeCount(), req.getPointCost(),
|
||||||
req.getStartTime(), req.getEndTime(),
|
req.getStartTime(), req.getEndTime(),
|
||||||
req.getOptions());
|
req.getOptions(), req.getMultiple());
|
||||||
draftService.deleteDraft(auth.getName());
|
draftService.deleteDraft(auth.getName());
|
||||||
PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
|
PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
|
||||||
dto.setReward(levelService.awardForPost(auth.getName()));
|
dto.setReward(levelService.awardForPost(auth.getName()));
|
||||||
@@ -94,7 +94,7 @@ public class PostController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping("/{id}/poll/vote")
|
@PostMapping("/{id}/poll/vote")
|
||||||
public ResponseEntity<Void> vote(@PathVariable Long id, @RequestParam("option") int option, Authentication auth) {
|
public ResponseEntity<Void> vote(@PathVariable Long id, @RequestParam("option") List<Integer> option, Authentication auth) {
|
||||||
postService.votePoll(id, auth.getName(), option);
|
postService.votePoll(id, auth.getName(), option);
|
||||||
return ResponseEntity.ok().build();
|
return ResponseEntity.ok().build();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,4 +13,5 @@ public class PollDto {
|
|||||||
private LocalDateTime endTime;
|
private LocalDateTime endTime;
|
||||||
private List<AuthorDto> participants;
|
private List<AuthorDto> participants;
|
||||||
private Map<Integer, List<AuthorDto>> optionParticipants;
|
private Map<Integer, List<AuthorDto>> optionParticipants;
|
||||||
|
private boolean multiple;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,5 +28,6 @@ public class PostRequest {
|
|||||||
private LocalDateTime endTime;
|
private LocalDateTime endTime;
|
||||||
// fields for poll posts
|
// fields for poll posts
|
||||||
private List<String> options;
|
private List<String> options;
|
||||||
|
private Boolean multiple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -111,6 +111,7 @@ public class PostMapper {
|
|||||||
.collect(Collectors.groupingBy(PollVote::getOptionIndex,
|
.collect(Collectors.groupingBy(PollVote::getOptionIndex,
|
||||||
Collectors.mapping(v -> userMapper.toAuthorDto(v.getUser()), Collectors.toList())));
|
Collectors.mapping(v -> userMapper.toAuthorDto(v.getUser()), Collectors.toList())));
|
||||||
p.setOptionParticipants(optionParticipants);
|
p.setOptionParticipants(optionParticipants);
|
||||||
|
p.setMultiple(Boolean.TRUE.equals(pp.getMultiple()));
|
||||||
dto.setPoll(p);
|
dto.setPoll(p);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,6 +5,8 @@ import lombok.Getter;
|
|||||||
import lombok.NoArgsConstructor;
|
import lombok.NoArgsConstructor;
|
||||||
import lombok.Setter;
|
import lombok.Setter;
|
||||||
import org.hibernate.annotations.CreationTimestamp;
|
import org.hibernate.annotations.CreationTimestamp;
|
||||||
|
import org.hibernate.annotations.SQLDelete;
|
||||||
|
import org.hibernate.annotations.Where;
|
||||||
|
|
||||||
import java.time.LocalDateTime;
|
import java.time.LocalDateTime;
|
||||||
|
|
||||||
@@ -13,6 +15,8 @@ import java.time.LocalDateTime;
|
|||||||
@Setter
|
@Setter
|
||||||
@NoArgsConstructor
|
@NoArgsConstructor
|
||||||
@Table(name = "comments")
|
@Table(name = "comments")
|
||||||
|
@SQLDelete(sql = "UPDATE comments SET deleted_at = CURRENT_TIMESTAMP(6) WHERE id = ?")
|
||||||
|
@Where(clause = "deleted_at IS NULL")
|
||||||
public class Comment {
|
public class Comment {
|
||||||
@Id
|
@Id
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||||
@@ -41,4 +45,7 @@ public class Comment {
|
|||||||
@Column
|
@Column
|
||||||
private LocalDateTime pinnedAt;
|
private LocalDateTime pinnedAt;
|
||||||
|
|
||||||
|
@Column(name = "deleted_at")
|
||||||
|
private LocalDateTime deletedAt;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ import jakarta.persistence.*;
|
|||||||
import lombok.Getter;
|
import lombok.Getter;
|
||||||
import lombok.NoArgsConstructor;
|
import lombok.NoArgsConstructor;
|
||||||
import lombok.Setter;
|
import lombok.Setter;
|
||||||
|
import org.hibernate.annotations.SQLDelete;
|
||||||
|
import org.hibernate.annotations.Where;
|
||||||
|
|
||||||
import java.time.LocalDateTime;
|
import java.time.LocalDateTime;
|
||||||
|
|
||||||
@@ -13,6 +15,8 @@ import java.time.LocalDateTime;
|
|||||||
@Setter
|
@Setter
|
||||||
@NoArgsConstructor
|
@NoArgsConstructor
|
||||||
@Table(name = "point_histories")
|
@Table(name = "point_histories")
|
||||||
|
@SQLDelete(sql = "UPDATE point_histories SET deleted_at = CURRENT_TIMESTAMP(6) WHERE id = ?")
|
||||||
|
@Where(clause = "deleted_at IS NULL")
|
||||||
public class PointHistory {
|
public class PointHistory {
|
||||||
@Id
|
@Id
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||||
@@ -46,4 +50,7 @@ public class PointHistory {
|
|||||||
|
|
||||||
@Column(name = "created_at", nullable = false)
|
@Column(name = "created_at", nullable = false)
|
||||||
private LocalDateTime createdAt;
|
private LocalDateTime createdAt;
|
||||||
|
|
||||||
|
@Column(name = "deleted_at")
|
||||||
|
private LocalDateTime deletedAt;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -32,6 +32,9 @@ public class PollPost extends Post {
|
|||||||
inverseJoinColumns = @JoinColumn(name = "user_id"))
|
inverseJoinColumns = @JoinColumn(name = "user_id"))
|
||||||
private Set<User> participants = new HashSet<>();
|
private Set<User> participants = new HashSet<>();
|
||||||
|
|
||||||
|
@Column
|
||||||
|
private Boolean multiple = false;
|
||||||
|
|
||||||
@Column
|
@Column
|
||||||
private LocalDateTime endTime;
|
private LocalDateTime endTime;
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import lombok.NoArgsConstructor;
|
|||||||
import lombok.Setter;
|
import lombok.Setter;
|
||||||
|
|
||||||
@Entity
|
@Entity
|
||||||
@Table(name = "poll_votes", uniqueConstraints = @UniqueConstraint(columnNames = {"post_id", "user_id"}))
|
@Table(name = "poll_votes", uniqueConstraints = @UniqueConstraint(columnNames = {"post_id", "user_id", "option_index"}))
|
||||||
@Getter
|
@Getter
|
||||||
@Setter
|
@Setter
|
||||||
@NoArgsConstructor
|
@NoArgsConstructor
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ package com.openisle.repository;
|
|||||||
|
|
||||||
import com.openisle.model.PointHistory;
|
import com.openisle.model.PointHistory;
|
||||||
import com.openisle.model.User;
|
import com.openisle.model.User;
|
||||||
|
import com.openisle.model.Comment;
|
||||||
import org.springframework.data.jpa.repository.JpaRepository;
|
import org.springframework.data.jpa.repository.JpaRepository;
|
||||||
|
|
||||||
import java.time.LocalDateTime;
|
import java.time.LocalDateTime;
|
||||||
@@ -12,4 +13,6 @@ public interface PointHistoryRepository extends JpaRepository<PointHistory, Long
|
|||||||
long countByUser(User user);
|
long countByUser(User user);
|
||||||
|
|
||||||
List<PointHistory> findByUserAndCreatedAtAfterOrderByCreatedAtDesc(User user, LocalDateTime createdAt);
|
List<PointHistory> findByUserAndCreatedAtAfterOrderByCreatedAtDesc(User user, LocalDateTime createdAt);
|
||||||
|
|
||||||
|
List<PointHistory> findByComment(Comment comment);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import com.openisle.repository.UserRepository;
|
|||||||
import com.openisle.repository.ReactionRepository;
|
import com.openisle.repository.ReactionRepository;
|
||||||
import com.openisle.repository.CommentSubscriptionRepository;
|
import com.openisle.repository.CommentSubscriptionRepository;
|
||||||
import com.openisle.repository.NotificationRepository;
|
import com.openisle.repository.NotificationRepository;
|
||||||
|
import com.openisle.repository.PointHistoryRepository;
|
||||||
import com.openisle.service.NotificationService;
|
import com.openisle.service.NotificationService;
|
||||||
import com.openisle.service.SubscriptionService;
|
import com.openisle.service.SubscriptionService;
|
||||||
import com.openisle.model.Role;
|
import com.openisle.model.Role;
|
||||||
@@ -37,6 +38,7 @@ public class CommentService {
|
|||||||
private final ReactionRepository reactionRepository;
|
private final ReactionRepository reactionRepository;
|
||||||
private final CommentSubscriptionRepository commentSubscriptionRepository;
|
private final CommentSubscriptionRepository commentSubscriptionRepository;
|
||||||
private final NotificationRepository notificationRepository;
|
private final NotificationRepository notificationRepository;
|
||||||
|
private final PointHistoryRepository pointHistoryRepository;
|
||||||
private final ImageUploader imageUploader;
|
private final ImageUploader imageUploader;
|
||||||
|
|
||||||
@Transactional
|
@Transactional
|
||||||
@@ -235,10 +237,14 @@ public class CommentService {
|
|||||||
for (Comment c : replies) {
|
for (Comment c : replies) {
|
||||||
deleteCommentCascade(c);
|
deleteCommentCascade(c);
|
||||||
}
|
}
|
||||||
|
// 逻辑删除相关的积分历史记录
|
||||||
|
pointHistoryRepository.findByComment(comment).forEach(pointHistoryRepository::delete);
|
||||||
|
// 删除其他相关数据
|
||||||
reactionRepository.findByComment(comment).forEach(reactionRepository::delete);
|
reactionRepository.findByComment(comment).forEach(reactionRepository::delete);
|
||||||
commentSubscriptionRepository.findByComment(comment).forEach(commentSubscriptionRepository::delete);
|
commentSubscriptionRepository.findByComment(comment).forEach(commentSubscriptionRepository::delete);
|
||||||
notificationRepository.deleteAll(notificationRepository.findByComment(comment));
|
notificationRepository.deleteAll(notificationRepository.findByComment(comment));
|
||||||
imageUploader.removeReferences(imageUploader.extractUrls(comment.getContent()));
|
imageUploader.removeReferences(imageUploader.extractUrls(comment.getContent()));
|
||||||
|
// 逻辑删除评论
|
||||||
commentRepository.delete(comment);
|
commentRepository.delete(comment);
|
||||||
log.debug("deleteCommentCascade removed comment {}", comment.getId());
|
log.debug("deleteCommentCascade removed comment {}", comment.getId());
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -186,7 +186,8 @@ public class PostService {
|
|||||||
Integer pointCost,
|
Integer pointCost,
|
||||||
LocalDateTime startTime,
|
LocalDateTime startTime,
|
||||||
LocalDateTime endTime,
|
LocalDateTime endTime,
|
||||||
java.util.List<String> options) {
|
java.util.List<String> options,
|
||||||
|
Boolean multiple) {
|
||||||
long recent = postRepository.countByAuthorAfter(username,
|
long recent = postRepository.countByAuthorAfter(username,
|
||||||
java.time.LocalDateTime.now().minusMinutes(5));
|
java.time.LocalDateTime.now().minusMinutes(5));
|
||||||
if (recent >= 1) {
|
if (recent >= 1) {
|
||||||
@@ -227,6 +228,7 @@ public class PostService {
|
|||||||
PollPost pp = new PollPost();
|
PollPost pp = new PollPost();
|
||||||
pp.setOptions(options);
|
pp.setOptions(options);
|
||||||
pp.setEndTime(endTime);
|
pp.setEndTime(endTime);
|
||||||
|
pp.setMultiple(multiple != null && multiple);
|
||||||
post = pp;
|
post = pp;
|
||||||
} else {
|
} else {
|
||||||
post = new Post();
|
post = new Post();
|
||||||
@@ -302,7 +304,7 @@ public class PostService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Transactional
|
@Transactional
|
||||||
public PollPost votePoll(Long postId, String username, int optionIndex) {
|
public PollPost votePoll(Long postId, String username, java.util.List<Integer> optionIndices) {
|
||||||
PollPost post = pollPostRepository.findById(postId)
|
PollPost post = pollPostRepository.findById(postId)
|
||||||
.orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
|
.orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
|
||||||
if (post.getEndTime() != null && post.getEndTime().isBefore(LocalDateTime.now())) {
|
if (post.getEndTime() != null && post.getEndTime().isBefore(LocalDateTime.now())) {
|
||||||
@@ -313,16 +315,24 @@ public class PostService {
|
|||||||
if (post.getParticipants().contains(user)) {
|
if (post.getParticipants().contains(user)) {
|
||||||
throw new IllegalArgumentException("User already voted");
|
throw new IllegalArgumentException("User already voted");
|
||||||
}
|
}
|
||||||
if (optionIndex < 0 || optionIndex >= post.getOptions().size()) {
|
if (optionIndices == null || optionIndices.isEmpty()) {
|
||||||
throw new IllegalArgumentException("Invalid option");
|
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);
|
post.getParticipants().add(user);
|
||||||
post.getVotes().merge(optionIndex, 1, Integer::sum);
|
for (int optionIndex : unique) {
|
||||||
PollVote vote = new PollVote();
|
post.getVotes().merge(optionIndex, 1, Integer::sum);
|
||||||
vote.setPost(post);
|
PollVote vote = new PollVote();
|
||||||
vote.setUser(user);
|
vote.setPost(post);
|
||||||
vote.setOptionIndex(optionIndex);
|
vote.setUser(user);
|
||||||
pollVoteRepository.save(vote);
|
vote.setOptionIndex(optionIndex);
|
||||||
|
pollVoteRepository.save(vote);
|
||||||
|
}
|
||||||
PollPost saved = pollPostRepository.save(post);
|
PollPost saved = pollPostRepository.save(post);
|
||||||
if (post.getAuthor() != null && !post.getAuthor().getId().equals(user.getId())) {
|
if (post.getAuthor() != null && !post.getAuthor().getId().equals(user.getId())) {
|
||||||
notificationService.createNotification(post.getAuthor(), NotificationType.POLL_VOTE, post, null, null, user, null, null);
|
notificationService.createNotification(post.getAuthor(), NotificationType.POLL_VOTE, post, null, null, user, null, null);
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
-- Add logical delete support for comments and point_histories tables
|
||||||
|
|
||||||
|
-- Add deleted_at column to comments table
|
||||||
|
ALTER TABLE comments ADD COLUMN deleted_at DATETIME(6) NULL;
|
||||||
|
|
||||||
|
-- Add deleted_at column to point_histories table
|
||||||
|
ALTER TABLE point_histories ADD COLUMN deleted_at DATETIME(6) NULL;
|
||||||
|
|
||||||
|
-- Add index for better performance on logical delete queries
|
||||||
|
CREATE INDEX idx_comments_deleted_at ON comments(deleted_at);
|
||||||
|
CREATE INDEX idx_point_histories_deleted_at ON point_histories(deleted_at);
|
||||||
@@ -76,7 +76,7 @@ class PostControllerTest {
|
|||||||
post.setTags(Set.of(tag));
|
post.setTags(Set.of(tag));
|
||||||
|
|
||||||
when(postService.createPost(eq("alice"), eq(1L), eq("t"), eq("c"), eq(List.of(1L)),
|
when(postService.createPost(eq("alice"), eq(1L), eq("t"), eq("c"), eq(List.of(1L)),
|
||||||
isNull(), isNull(), 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(postService.viewPost(eq(1L), any())).thenReturn(post);
|
||||||
when(commentService.getCommentsForPost(eq(1L), any())).thenReturn(List.of());
|
when(commentService.getCommentsForPost(eq(1L), any())).thenReturn(List.of());
|
||||||
when(commentService.getParticipants(anyLong(), anyInt())).thenReturn(List.of());
|
when(commentService.getParticipants(anyLong(), anyInt())).thenReturn(List.of());
|
||||||
@@ -187,7 +187,7 @@ class PostControllerTest {
|
|||||||
.andExpect(status().isBadRequest());
|
.andExpect(status().isBadRequest());
|
||||||
|
|
||||||
verify(postService, never()).createPost(any(), any(), any(), any(), any(),
|
verify(postService, never()).createPost(any(), any(), any(), any(), any(),
|
||||||
any(), any(), any(), any(), any(), any(), any(), any());
|
any(), any(), any(), any(), any(), any(), any(), any(), any());
|
||||||
}
|
}
|
||||||
|
|
||||||
@Test
|
@Test
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import com.openisle.repository.UserRepository;
|
|||||||
import com.openisle.repository.ReactionRepository;
|
import com.openisle.repository.ReactionRepository;
|
||||||
import com.openisle.repository.CommentSubscriptionRepository;
|
import com.openisle.repository.CommentSubscriptionRepository;
|
||||||
import com.openisle.repository.NotificationRepository;
|
import com.openisle.repository.NotificationRepository;
|
||||||
|
import com.openisle.repository.PointHistoryRepository;
|
||||||
import com.openisle.exception.RateLimitException;
|
import com.openisle.exception.RateLimitException;
|
||||||
import org.junit.jupiter.api.Test;
|
import org.junit.jupiter.api.Test;
|
||||||
|
|
||||||
@@ -24,10 +25,11 @@ class CommentServiceTest {
|
|||||||
ReactionRepository reactionRepo = mock(ReactionRepository.class);
|
ReactionRepository reactionRepo = mock(ReactionRepository.class);
|
||||||
CommentSubscriptionRepository subRepo = mock(CommentSubscriptionRepository.class);
|
CommentSubscriptionRepository subRepo = mock(CommentSubscriptionRepository.class);
|
||||||
NotificationRepository nRepo = mock(NotificationRepository.class);
|
NotificationRepository nRepo = mock(NotificationRepository.class);
|
||||||
|
PointHistoryRepository pointHistoryRepo = mock(PointHistoryRepository.class);
|
||||||
ImageUploader imageUploader = mock(ImageUploader.class);
|
ImageUploader imageUploader = mock(ImageUploader.class);
|
||||||
|
|
||||||
CommentService service = new CommentService(commentRepo, postRepo, userRepo,
|
CommentService service = new CommentService(commentRepo, postRepo, userRepo,
|
||||||
notifService, subService, reactionRepo, subRepo, nRepo, imageUploader);
|
notifService, subService, reactionRepo, subRepo, nRepo, pointHistoryRepo, imageUploader);
|
||||||
|
|
||||||
when(commentRepo.countByAuthorAfter(eq("alice"), any())).thenReturn(3L);
|
when(commentRepo.countByAuthorAfter(eq("alice"), any())).thenReturn(3L);
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,8 @@ class PostServiceTest {
|
|||||||
CategoryRepository catRepo = mock(CategoryRepository.class);
|
CategoryRepository catRepo = mock(CategoryRepository.class);
|
||||||
TagRepository tagRepo = mock(TagRepository.class);
|
TagRepository tagRepo = mock(TagRepository.class);
|
||||||
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
||||||
|
PollPostRepository pollPostRepo = mock(PollPostRepository.class);
|
||||||
|
PollVoteRepository pollVoteRepo = mock(PollVoteRepository.class);
|
||||||
NotificationService notifService = mock(NotificationService.class);
|
NotificationService notifService = mock(NotificationService.class);
|
||||||
SubscriptionService subService = mock(SubscriptionService.class);
|
SubscriptionService subService = mock(SubscriptionService.class);
|
||||||
CommentService commentService = mock(CommentService.class);
|
CommentService commentService = mock(CommentService.class);
|
||||||
@@ -37,7 +39,7 @@ class PostServiceTest {
|
|||||||
PointService pointService = mock(PointService.class);
|
PointService pointService = mock(PointService.class);
|
||||||
|
|
||||||
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
||||||
notifService, subService, commentService, commentRepo,
|
pollPostRepo, pollVoteRepo, notifService, subService, commentService, commentRepo,
|
||||||
reactionRepo, subRepo, notificationRepo, postReadService,
|
reactionRepo, subRepo, notificationRepo, postReadService,
|
||||||
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
||||||
when(context.getBean(PostService.class)).thenReturn(service);
|
when(context.getBean(PostService.class)).thenReturn(service);
|
||||||
@@ -69,6 +71,8 @@ class PostServiceTest {
|
|||||||
CategoryRepository catRepo = mock(CategoryRepository.class);
|
CategoryRepository catRepo = mock(CategoryRepository.class);
|
||||||
TagRepository tagRepo = mock(TagRepository.class);
|
TagRepository tagRepo = mock(TagRepository.class);
|
||||||
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
||||||
|
PollPostRepository pollPostRepo = mock(PollPostRepository.class);
|
||||||
|
PollVoteRepository pollVoteRepo = mock(PollVoteRepository.class);
|
||||||
NotificationService notifService = mock(NotificationService.class);
|
NotificationService notifService = mock(NotificationService.class);
|
||||||
SubscriptionService subService = mock(SubscriptionService.class);
|
SubscriptionService subService = mock(SubscriptionService.class);
|
||||||
CommentService commentService = mock(CommentService.class);
|
CommentService commentService = mock(CommentService.class);
|
||||||
@@ -84,7 +88,7 @@ class PostServiceTest {
|
|||||||
PointService pointService = mock(PointService.class);
|
PointService pointService = mock(PointService.class);
|
||||||
|
|
||||||
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
||||||
notifService, subService, commentService, commentRepo,
|
pollPostRepo, pollVoteRepo, notifService, subService, commentService, commentRepo,
|
||||||
reactionRepo, subRepo, notificationRepo, postReadService,
|
reactionRepo, subRepo, notificationRepo, postReadService,
|
||||||
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
||||||
when(context.getBean(PostService.class)).thenReturn(service);
|
when(context.getBean(PostService.class)).thenReturn(service);
|
||||||
@@ -122,6 +126,8 @@ class PostServiceTest {
|
|||||||
CategoryRepository catRepo = mock(CategoryRepository.class);
|
CategoryRepository catRepo = mock(CategoryRepository.class);
|
||||||
TagRepository tagRepo = mock(TagRepository.class);
|
TagRepository tagRepo = mock(TagRepository.class);
|
||||||
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
||||||
|
PollPostRepository pollPostRepo = mock(PollPostRepository.class);
|
||||||
|
PollVoteRepository pollVoteRepo = mock(PollVoteRepository.class);
|
||||||
NotificationService notifService = mock(NotificationService.class);
|
NotificationService notifService = mock(NotificationService.class);
|
||||||
SubscriptionService subService = mock(SubscriptionService.class);
|
SubscriptionService subService = mock(SubscriptionService.class);
|
||||||
CommentService commentService = mock(CommentService.class);
|
CommentService commentService = mock(CommentService.class);
|
||||||
@@ -137,7 +143,7 @@ class PostServiceTest {
|
|||||||
PointService pointService = mock(PointService.class);
|
PointService pointService = mock(PointService.class);
|
||||||
|
|
||||||
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
||||||
notifService, subService, commentService, commentRepo,
|
pollPostRepo, pollVoteRepo, notifService, subService, commentService, commentRepo,
|
||||||
reactionRepo, subRepo, notificationRepo, postReadService,
|
reactionRepo, subRepo, notificationRepo, postReadService,
|
||||||
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
||||||
when(context.getBean(PostService.class)).thenReturn(service);
|
when(context.getBean(PostService.class)).thenReturn(service);
|
||||||
@@ -146,7 +152,7 @@ class PostServiceTest {
|
|||||||
|
|
||||||
assertThrows(RateLimitException.class,
|
assertThrows(RateLimitException.class,
|
||||||
() -> service.createPost("alice", 1L, "t", "c", List.of(1L),
|
() -> service.createPost("alice", 1L, "t", "c", List.of(1L),
|
||||||
null, null, null, null, null, null, null, null));
|
null, null, null, null, null, null, null, null, null));
|
||||||
}
|
}
|
||||||
|
|
||||||
@Test
|
@Test
|
||||||
@@ -156,6 +162,8 @@ class PostServiceTest {
|
|||||||
CategoryRepository catRepo = mock(CategoryRepository.class);
|
CategoryRepository catRepo = mock(CategoryRepository.class);
|
||||||
TagRepository tagRepo = mock(TagRepository.class);
|
TagRepository tagRepo = mock(TagRepository.class);
|
||||||
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
LotteryPostRepository lotteryRepo = mock(LotteryPostRepository.class);
|
||||||
|
PollPostRepository pollPostRepo = mock(PollPostRepository.class);
|
||||||
|
PollVoteRepository pollVoteRepo = mock(PollVoteRepository.class);
|
||||||
NotificationService notifService = mock(NotificationService.class);
|
NotificationService notifService = mock(NotificationService.class);
|
||||||
SubscriptionService subService = mock(SubscriptionService.class);
|
SubscriptionService subService = mock(SubscriptionService.class);
|
||||||
CommentService commentService = mock(CommentService.class);
|
CommentService commentService = mock(CommentService.class);
|
||||||
@@ -171,7 +179,7 @@ class PostServiceTest {
|
|||||||
PointService pointService = mock(PointService.class);
|
PointService pointService = mock(PointService.class);
|
||||||
|
|
||||||
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
PostService service = new PostService(postRepo, userRepo, catRepo, tagRepo, lotteryRepo,
|
||||||
notifService, subService, commentService, commentRepo,
|
pollPostRepo, pollVoteRepo, notifService, subService, commentService, commentRepo,
|
||||||
reactionRepo, subRepo, notificationRepo, postReadService,
|
reactionRepo, subRepo, notificationRepo, postReadService,
|
||||||
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
imageUploader, taskScheduler, emailSender, context, pointService, PublishMode.DIRECT);
|
||||||
when(context.getBean(PostService.class)).thenReturn(service);
|
when(context.getBean(PostService.class)).thenReturn(service);
|
||||||
|
|||||||
@@ -34,6 +34,7 @@
|
|||||||
--page-max-width-mobile: 900px;
|
--page-max-width-mobile: 900px;
|
||||||
--article-info-background-color: #f0f0f0;
|
--article-info-background-color: #f0f0f0;
|
||||||
--activity-card-background-color: #fafafa;
|
--activity-card-background-color: #fafafa;
|
||||||
|
--poll-option-button-background-color: rgb(218, 218, 218);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme='dark'] {
|
[data-theme='dark'] {
|
||||||
@@ -61,6 +62,7 @@
|
|||||||
--blockquote-text-color: #999;
|
--blockquote-text-color: #999;
|
||||||
--article-info-background-color: #747373;
|
--article-info-background-color: #747373;
|
||||||
--activity-card-background-color: #585858;
|
--activity-card-background-color: #585858;
|
||||||
|
--poll-option-button-background-color: #3a3a3a;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-frosted='off'] {
|
:root[data-frosted='off'] {
|
||||||
@@ -91,7 +93,7 @@ body {
|
|||||||
|
|
||||||
.vditor-toolbar--pin {
|
.vditor-toolbar--pin {
|
||||||
top: calc(var(--header-height) + 1px) !important;
|
top: calc(var(--header-height) + 1px) !important;
|
||||||
z-index: 2000;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vditor-panel {
|
.vditor-panel {
|
||||||
|
|||||||
@@ -18,6 +18,10 @@
|
|||||||
<flat-pickr v-model="data.endTime" :config="dateConfig" class="time-picker" />
|
<flat-pickr v-model="data.endTime" :config="dateConfig" class="time-picker" />
|
||||||
</client-only>
|
</client-only>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="poll-multiple-row">
|
||||||
|
<span class="poll-row-title">多选</span>
|
||||||
|
<BaseSwitch v-model="data.multiple" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -25,6 +29,7 @@
|
|||||||
import 'flatpickr/dist/flatpickr.css'
|
import 'flatpickr/dist/flatpickr.css'
|
||||||
import FlatPickr from 'vue-flatpickr-component'
|
import FlatPickr from 'vue-flatpickr-component'
|
||||||
import BaseInput from '~/components/BaseInput.vue'
|
import BaseInput from '~/components/BaseInput.vue'
|
||||||
|
import BaseSwitch from '~/components/BaseSwitch.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
@@ -80,6 +85,11 @@ const removeOption = (idx) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.poll-multiple-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
.time-picker {
|
.time-picker {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|||||||
310
frontend_nuxt/components/PostLottery.vue
Normal file
310
frontend_nuxt/components/PostLottery.vue
Normal file
@@ -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>
|
||||||
459
frontend_nuxt/components/PostPoll.vue
Normal file
459
frontend_nuxt/components/PostPoll.vue
Normal file
@@ -0,0 +1,459 @@
|
|||||||
|
<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>
|
||||||
|
<div class="poll-title-section">
|
||||||
|
<div class="poll-option-title" v-if="poll.multiple">多选</div>
|
||||||
|
<div class="poll-option-title" v-else>单选</div>
|
||||||
|
|
||||||
|
<div class="poll-left-time">
|
||||||
|
<div class="poll-left-time-title">离结束还有</div>
|
||||||
|
<div class="poll-left-time-value">{{ countdown }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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="join-poll-button" @click="submitMultiPoll">
|
||||||
|
<i class="fas fa-check"></i> 确认投票
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div
|
||||||
|
v-for="(opt, idx) in poll.options"
|
||||||
|
:key="idx"
|
||||||
|
class="poll-option"
|
||||||
|
@click="selectOption(idx)"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
:checked="selectedOption === idx"
|
||||||
|
name="poll-option"
|
||||||
|
class="poll-option-input"
|
||||||
|
/>
|
||||||
|
<span class="poll-option-text">{{ opt }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="single-selection-container">
|
||||||
|
<div class="join-poll-button" @click="submitSinglePoll">
|
||||||
|
<i class="fas fa-check"></i> 确认投票
|
||||||
|
</div>
|
||||||
|
</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 v-else-if="pollEnded" class="poll-option-hint">
|
||||||
|
<i class="fas fa-stopwatch"></i> 投票已结束
|
||||||
|
</div>
|
||||||
|
<div v-else class="poll-option-hint">
|
||||||
|
<i class="fas fa-stopwatch"></i> 您已投票,等待结束查看结果
|
||||||
|
</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 selectedOption = ref(null)
|
||||||
|
const selectOption = (idx) => {
|
||||||
|
selectedOption.value = idx
|
||||||
|
}
|
||||||
|
const submitSinglePoll = async () => {
|
||||||
|
if (selectedOption.value === null) {
|
||||||
|
toast.error('请选择一个选项')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await voteOption(selectedOption.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
.single-selection-container {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-selection-title,
|
||||||
|
.single-selection-title {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-title-section {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-option-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-left-time {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@@ -714,6 +714,12 @@ const formatType = (t) => {
|
|||||||
return '帖子被删除'
|
return '帖子被删除'
|
||||||
case 'POST_FEATURED':
|
case 'POST_FEATURED':
|
||||||
return '文章被精选'
|
return '文章被精选'
|
||||||
|
case 'POLL_VOTE':
|
||||||
|
return '有人参与你的投票'
|
||||||
|
case 'POLL_RESULT_OWNER':
|
||||||
|
return '发布的投票结果已公布'
|
||||||
|
case 'POLL_RESULT_PARTICIPANT':
|
||||||
|
return '参与的投票结果已公布'
|
||||||
default:
|
default:
|
||||||
return t
|
return t
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -74,6 +74,7 @@ const lottery = reactive({
|
|||||||
const poll = reactive({
|
const poll = reactive({
|
||||||
options: ['', ''],
|
options: ['', ''],
|
||||||
endTime: null,
|
endTime: null,
|
||||||
|
multiple: false,
|
||||||
})
|
})
|
||||||
const startTime = ref(null)
|
const startTime = ref(null)
|
||||||
const isWaitingPosting = ref(false)
|
const isWaitingPosting = ref(false)
|
||||||
@@ -121,6 +122,7 @@ const clearPost = async () => {
|
|||||||
startTime.value = null
|
startTime.value = null
|
||||||
poll.options = ['', '']
|
poll.options = ['', '']
|
||||||
poll.endTime = null
|
poll.endTime = null
|
||||||
|
poll.multiple = false
|
||||||
|
|
||||||
// 删除草稿
|
// 删除草稿
|
||||||
const token = getToken()
|
const token = getToken()
|
||||||
@@ -318,6 +320,7 @@ const submitPost = async () => {
|
|||||||
prizeCount: postType.value === 'LOTTERY' ? lottery.prizeCount : undefined,
|
prizeCount: postType.value === 'LOTTERY' ? lottery.prizeCount : undefined,
|
||||||
prizeDescription: postType.value === 'LOTTERY' ? lottery.prizeDescription : undefined,
|
prizeDescription: postType.value === 'LOTTERY' ? lottery.prizeDescription : undefined,
|
||||||
options: postType.value === 'POLL' ? poll.options : undefined,
|
options: postType.value === 'POLL' ? poll.options : undefined,
|
||||||
|
multiple: postType.value === 'POLL' ? poll.multiple : undefined,
|
||||||
startTime:
|
startTime:
|
||||||
postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
|
postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
|
||||||
pointCost: postType.value === 'LOTTERY' ? lottery.pointCost : undefined,
|
pointCost: postType.value === 'LOTTERY' ? lottery.pointCost : undefined,
|
||||||
|
|||||||
@@ -94,157 +94,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="lottery" class="post-prize-container">
|
<PostLottery v-if="lottery" :lottery="lottery" :post-id="postId" @refresh="refreshPost" />
|
||||||
<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>
|
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<div v-if="poll" class="post-poll-container">
|
<PostPoll v-if="poll" :poll="poll" :post-id="postId" @refresh="refreshPost" />
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
<div v-if="closed" class="post-close-container">该帖子已关闭,内容仅供阅读,无法进行互动</div>
|
<div v-if="closed" class="post-close-container">该帖子已关闭,内容仅供阅读,无法进行互动</div>
|
||||||
|
|
||||||
@@ -333,6 +185,8 @@ import ArticleTags from '~/components/ArticleTags.vue'
|
|||||||
import ArticleCategory from '~/components/ArticleCategory.vue'
|
import ArticleCategory from '~/components/ArticleCategory.vue'
|
||||||
import ReactionsGroup from '~/components/ReactionsGroup.vue'
|
import ReactionsGroup from '~/components/ReactionsGroup.vue'
|
||||||
import DropdownMenu from '~/components/DropdownMenu.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 { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
|
||||||
import { getMedalTitle } from '~/utils/medal'
|
import { getMedalTitle } from '~/utils/medal'
|
||||||
import { toast } from '~/main'
|
import { toast } from '~/main'
|
||||||
@@ -388,7 +242,6 @@ useHead(() => ({
|
|||||||
if (import.meta.client) {
|
if (import.meta.client) {
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('scroll', updateCurrentIndex)
|
window.removeEventListener('scroll', updateCurrentIndex)
|
||||||
if (countdownTimer) clearInterval(countdownTimer)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -400,73 +253,6 @@ const isAdmin = computed(() => authState.role === 'ADMIN')
|
|||||||
const isAuthor = computed(() => authState.username === author.value.username)
|
const isAuthor = computed(() => authState.username === author.value.username)
|
||||||
const lottery = ref(null)
|
const lottery = ref(null)
|
||||||
const poll = ref(null)
|
const poll = ref(null)
|
||||||
const showPollResult = ref(false)
|
|
||||||
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 pollParticipants = computed(() => poll.value?.participants || [])
|
|
||||||
const pollOptionParticipants = computed(() => poll.value?.optionParticipants || {})
|
|
||||||
const pollVotes = computed(() => poll.value?.votes || {})
|
|
||||||
const totalPollVotes = computed(() => Object.values(pollVotes.value).reduce((a, b) => a + b, 0))
|
|
||||||
const pollPercentages = computed(() =>
|
|
||||||
poll.value
|
|
||||||
? poll.value.options.map((_, idx) => {
|
|
||||||
const c = pollVotes.value[idx] || 0
|
|
||||||
return totalPollVotes.value ? ((c / totalPollVotes.value) * 100).toFixed(1) : 0
|
|
||||||
})
|
|
||||||
: [],
|
|
||||||
)
|
|
||||||
const pollEnded = computed(() => {
|
|
||||||
if (!poll.value || !poll.value.endTime) return false
|
|
||||||
return new Date(poll.value.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 currentEndTime = computed(() => {
|
|
||||||
if (lottery.value && lottery.value.endTime) return lottery.value.endTime
|
|
||||||
if (poll.value && poll.value.endTime) return poll.value.endTime
|
|
||||||
return null
|
|
||||||
})
|
|
||||||
const updateCountdown = () => {
|
|
||||||
if (!currentEndTime.value) {
|
|
||||||
countdown.value = '00:00:00'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const diff = new Date(currentEndTime.value).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 articleMenuItems = computed(() => {
|
const articleMenuItems = computed(() => {
|
||||||
const items = []
|
const items = []
|
||||||
if (isAuthor.value || isAdmin.value) {
|
if (isAuthor.value || isAdmin.value) {
|
||||||
@@ -628,8 +414,6 @@ watchEffect(() => {
|
|||||||
postTime.value = TimeManager.format(data.createdAt)
|
postTime.value = TimeManager.format(data.createdAt)
|
||||||
lottery.value = data.lottery || null
|
lottery.value = data.lottery || null
|
||||||
poll.value = data.poll || null
|
poll.value = data.poll || null
|
||||||
if ((lottery.value && lottery.value.endTime) || (poll.value && poll.value.endTime))
|
|
||||||
startCountdown()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// 404 客户端跳转
|
// 404 客户端跳转
|
||||||
@@ -920,45 +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}` },
|
|
||||||
})
|
|
||||||
const data = await res.json().catch(() => ({}))
|
|
||||||
if (res.ok) {
|
|
||||||
toast.success('已参与抽奖')
|
|
||||||
await refreshPost()
|
|
||||||
} else {
|
|
||||||
toast.error(data.error || '操作失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const voteOption = async (idx) => {
|
|
||||||
const token = getToken()
|
|
||||||
if (!token) {
|
|
||||||
toast.error('请先登录')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const res = await fetch(`${API_BASE_URL}/api/posts/${postId}/poll/vote?option=${idx}`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
|
||||||
})
|
|
||||||
const data = await res.json().catch(() => ({}))
|
|
||||||
if (res.ok) {
|
|
||||||
toast.success('投票成功')
|
|
||||||
await refreshPost()
|
|
||||||
showPollResult.value = true
|
|
||||||
} else {
|
|
||||||
toast.error(data.error || '操作失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchCommentSorts = () => {
|
const fetchCommentSorts = () => {
|
||||||
return Promise.resolve([
|
return Promise.resolve([
|
||||||
{ id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
|
{ id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
|
||||||
@@ -1287,95 +1032,6 @@ onMounted(async () => {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-option-button {
|
|
||||||
color: var(--text-color);
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: rgb(218, 218, 218);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-left-time-title {
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-menu-icon {
|
.action-menu-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@@ -1491,201 +1147,6 @@ onMounted(async () => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-prize-container {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
background-color: var(--lottery-background-color);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-question {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-vote-button {
|
|
||||||
margin-top: 5px;
|
|
||||||
color: var(--primary-color);
|
|
||||||
cursor: pointer;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-participants {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-participant-avatar {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-left-time-title,
|
|
||||||
.prize-end-time-title {
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.7;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-left-time-value,
|
|
||||||
.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) {
|
@media (max-width: 768px) {
|
||||||
.post-page-main-container {
|
.post-page-main-container {
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
@@ -1736,10 +1197,5 @@ onMounted(async () => {
|
|||||||
.loading-container {
|
.loading-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.join-prize-button,
|
|
||||||
.join-prize-button-disabled {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user