Fix null multiple field for poll posts

feat(poll): use BaseSwitch for multiple selection

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

@@ -44,7 +44,7 @@ public class PostController {
                 req.getType(), req.getPrizeDescription(), req.getPrizeIcon(),
                 req.getPrizeCount(), req.getPointCost(),
                 req.getStartTime(), req.getEndTime(),
-                req.getOptions());
+                req.getOptions(), req.getMultiple());
         draftService.deleteDraft(auth.getName());
         PostDetailDto dto = postMapper.toDetailDto(post, auth.getName());
         dto.setReward(levelService.awardForPost(auth.getName()));
@@ -94,7 +94,7 @@ public class PostController {
     }
 
     @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);
         return ResponseEntity.ok().build();
     }

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

@@ -13,4 +13,5 @@ public class PollDto {
     private LocalDateTime endTime;
     private List<AuthorDto> participants;
     private Map<Integer, List<AuthorDto>> optionParticipants;
+    private boolean multiple;
 }

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

@@ -28,5 +28,6 @@ public class PostRequest {
     private LocalDateTime endTime;
     // fields for poll posts
     private List<String> options;
+    private Boolean multiple;
 }
 

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

@@ -111,6 +111,7 @@ public class PostMapper {
                     .collect(Collectors.groupingBy(PollVote::getOptionIndex,
                             Collectors.mapping(v -> userMapper.toAuthorDto(v.getUser()), Collectors.toList())));
             p.setOptionParticipants(optionParticipants);
+            p.setMultiple(Boolean.TRUE.equals(pp.getMultiple()));
             dto.setPoll(p);
         }
     }

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

@@ -32,6 +32,9 @@ public class PollPost extends Post {
             inverseJoinColumns = @JoinColumn(name = "user_id"))
     private Set<User> participants = new HashSet<>();
 
+    @Column
+    private Boolean multiple = false;
+
     @Column
     private LocalDateTime endTime;
 

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

@@ -6,7 +6,7 @@ import lombok.NoArgsConstructor;
 import lombok.Setter;
 
 @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
 @Setter
 @NoArgsConstructor

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

@@ -186,7 +186,8 @@ public class PostService {
                            Integer pointCost,
                            LocalDateTime startTime,
                            LocalDateTime endTime,
-                           java.util.List<String> options) {
+                           java.util.List<String> options,
+                           Boolean multiple) {
         long recent = postRepository.countByAuthorAfter(username,
                 java.time.LocalDateTime.now().minusMinutes(5));
         if (recent >= 1) {
@@ -227,6 +228,7 @@ public class PostService {
             PollPost pp = new PollPost();
             pp.setOptions(options);
             pp.setEndTime(endTime);
+            pp.setMultiple(multiple != null && multiple);
             post = pp;
         } else {
             post = new Post();
@@ -302,7 +304,7 @@ public class PostService {
     }
 
     @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)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("Post not found"));
         if (post.getEndTime() != null && post.getEndTime().isBefore(LocalDateTime.now())) {
@@ -313,16 +315,24 @@ public class PostService {
         if (post.getParticipants().contains(user)) {
             throw new IllegalArgumentException("User already voted");
         }
-        if (optionIndex < 0 || optionIndex >= post.getOptions().size()) {
-            throw new IllegalArgumentException("Invalid option");
+        if (optionIndices == null || optionIndices.isEmpty()) {
+            throw new IllegalArgumentException("No options selected");
+        }
+        java.util.Set<Integer> unique = new java.util.HashSet<>(optionIndices);
+        for (int optionIndex : unique) {
+            if (optionIndex < 0 || optionIndex >= post.getOptions().size()) {
+                throw new IllegalArgumentException("Invalid option");
+            }
         }
         post.getParticipants().add(user);
-        post.getVotes().merge(optionIndex, 1, Integer::sum);
-        PollVote vote = new PollVote();
-        vote.setPost(post);
-        vote.setUser(user);
-        vote.setOptionIndex(optionIndex);
-        pollVoteRepository.save(vote);
+        for (int optionIndex : unique) {
+            post.getVotes().merge(optionIndex, 1, Integer::sum);
+            PollVote vote = new PollVote();
+            vote.setPost(post);
+            vote.setUser(user);
+            vote.setOptionIndex(optionIndex);
+            pollVoteRepository.save(vote);
+        }
         PollPost saved = pollPostRepository.save(post);
         if (post.getAuthor() != null && !post.getAuthor().getId().equals(user.getId())) {
             notificationService.createNotification(post.getAuthor(), NotificationType.POLL_VOTE, post, null, null, user, null, null);

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

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

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

@@ -146,7 +146,7 @@ class PostServiceTest {
 
         assertThrows(RateLimitException.class,
                 () -> service.createPost("alice", 1L, "t", "c", List.of(1L),
-                        null, null, null, null, null, null, null, null));
+                        null, null, null, null, null, null, null, null, null));
     }
 
     @Test

frontend_nuxt/assets/global.css

@@ -34,6 +34,7 @@
   --page-max-width-mobile: 900px;
   --article-info-background-color: #f0f0f0;
   --activity-card-background-color: #fafafa;
+  --poll-option-button-background-color: rgb(218, 218, 218);
 }
 
 [data-theme='dark'] {
@@ -61,6 +62,7 @@
   --blockquote-text-color: #999;
   --article-info-background-color: #747373;
   --activity-card-background-color: #585858;
+  --poll-option-button-background-color: #3a3a3a;
 }
 
 :root[data-frosted='off'] {
@@ -91,7 +93,7 @@ body {
 
 .vditor-toolbar--pin {
   top: calc(var(--header-height) + 1px) !important;
-  z-index: 2000;
+  z-index: 20;
 }
 
 .vditor-panel {

frontend_nuxt/components/PollForm.vue

@@ -18,6 +18,10 @@
         <flat-pickr v-model="data.endTime" :config="dateConfig" class="time-picker" />
       </client-only>
     </div>
+    <div class="poll-multiple-row">
+      <span class="poll-row-title">多选</span>
+      <BaseSwitch v-model="data.multiple" />
+    </div>
   </div>
 </template>
 
@@ -25,6 +29,7 @@
 import 'flatpickr/dist/flatpickr.css'
 import FlatPickr from 'vue-flatpickr-component'
 import BaseInput from '~/components/BaseInput.vue'
+import BaseSwitch from '~/components/BaseSwitch.vue'
 
 const props = defineProps({
   data: {
@@ -80,6 +85,11 @@ const removeOption = (idx) => {
   display: flex;
   flex-direction: column;
 }
+.poll-multiple-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 .time-picker {
   max-width: 200px;
   height: 30px;

frontend_nuxt/components/PostLottery.vue

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

frontend_nuxt/components/PostPoll.vue

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

frontend_nuxt/pages/message.vue

@@ -714,6 +714,12 @@ const formatType = (t) => {
       return '帖子被删除'
     case 'POST_FEATURED':
       return '文章被精选'
+    case 'POLL_VOTE':
+      return '有人参与你的投票'
+    case 'POLL_RESULT_OWNER':
+      return '发布的投票结果已公布'
+    case 'POLL_RESULT_PARTICIPANT':
+      return '参与的投票结果已公布'
     default:
       return t
   }

frontend_nuxt/pages/new-post.vue

@@ -74,6 +74,7 @@ const lottery = reactive({
 const poll = reactive({
   options: ['', ''],
   endTime: null,
+  multiple: false,
 })
 const startTime = ref(null)
 const isWaitingPosting = ref(false)
@@ -121,6 +122,7 @@ const clearPost = async () => {
   startTime.value = null
   poll.options = ['', '']
   poll.endTime = null
+  poll.multiple = false
 
   // 删除草稿
   const token = getToken()
@@ -318,6 +320,7 @@ const submitPost = async () => {
         prizeCount: postType.value === 'LOTTERY' ? lottery.prizeCount : undefined,
         prizeDescription: postType.value === 'LOTTERY' ? lottery.prizeDescription : undefined,
         options: postType.value === 'POLL' ? poll.options : undefined,
+        multiple: postType.value === 'POLL' ? poll.multiple : undefined,
         startTime:
           postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
         pointCost: postType.value === 'LOTTERY' ? lottery.pointCost : undefined,

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

@@ -94,157 +94,9 @@
         </div>
       </div>
 
-      <div v-if="lottery" class="post-prize-container">
-        <div class="prize-content">
-          <div class="prize-info">
-            <div class="prize-info-left">
-              <div class="prize-icon">
-                <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>
+      <PostLottery v-if="lottery" :lottery="lottery" :post-id="postId" @refresh="refreshPost" />
       <ClientOnly>
-        <div v-if="poll" class="post-poll-container">
-          <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>
+        <PostPoll v-if="poll" :poll="poll" :post-id="postId" @refresh="refreshPost" />
       </ClientOnly>
       <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 ReactionsGroup from '~/components/ReactionsGroup.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
+import PostLottery from '~/components/PostLottery.vue'
+import PostPoll from '~/components/PostPoll.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '~/utils/markdown'
 import { getMedalTitle } from '~/utils/medal'
 import { toast } from '~/main'
@@ -388,7 +242,6 @@ useHead(() => ({
 if (import.meta.client) {
   onBeforeUnmount(() => {
     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 lottery = 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 items = []
   if (isAuthor.value || isAdmin.value) {
@@ -628,8 +414,6 @@ watchEffect(() => {
   postTime.value = TimeManager.format(data.createdAt)
   lottery.value = data.lottery || null
   poll.value = data.poll || null
-  if ((lottery.value && lottery.value.endTime) || (poll.value && poll.value.endTime))
-    startCountdown()
 })
 
 // 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 = () => {
   return Promise.resolve([
     { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
@@ -1287,95 +1032,6 @@ onMounted(async () => {
   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 {
   cursor: pointer;
   font-size: 18px;
@@ -1491,201 +1147,6 @@ onMounted(async () => {
   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) {
   .post-page-main-container {
     width: calc(100% - 20px);
@@ -1736,10 +1197,5 @@ onMounted(async () => {
   .loading-container {
     width: 100%;
   }
-
-  .join-prize-button,
-  .join-prize-button-disabled {
-    margin-left: 0;
-  }
 }
 </style>