feat: add join button for single polls

Fix poll multiple property null handling

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

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

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

@@ -33,7 +33,7 @@ public class PollPost extends Post {
     private Set<User> participants = new HashSet<>();
 
     @Column
-    private boolean multiple = false;
+    private Boolean multiple = false;
 
     @Column
     private LocalDateTime endTime;

frontend_nuxt/components/PollForm.vue

@@ -19,10 +19,8 @@
       </client-only>
     </div>
     <div class="poll-multiple-row">
-      <label class="poll-row-title">
+      <span class="poll-row-title">多选</span>
-        <input type="checkbox" v-model="data.multiple" class="multiple-checkbox" />
+      <BaseSwitch v-model="data.multiple" />
-        多选
-      </label>
     </div>
   </div>
 </template>
@@ -31,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: {
@@ -89,9 +88,7 @@ const removeOption = (idx) => {
 .poll-multiple-row {
   display: flex;
   align-items: center;
-}
+  gap: 10px;
-.multiple-checkbox {
-  margin-right: 5px;
 }
 .time-picker {
   max-width: 200px;

frontend_nuxt/components/PostPoll.vue

@@ -59,11 +59,26 @@
               v-for="(opt, idx) in poll.options"
               :key="idx"
               class="poll-option"
-              @click="voteOption(idx)"
+              @click="selectOption(idx)"
             >
-              <input type="radio" :checked="false" name="poll-option" class="poll-option-input" />
+              <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="single-selection-title">
+                <i class="fas fa-info-circle info-icon"></i>
+                该投票为单选
+              </div>
+              <div class="join-poll-button" @click="submitSinglePoll">
+                <i class="fas fa-plus"></i> 加入投票
+              </div>
+            </div>
           </template>
         </div>
       </div>
@@ -198,6 +213,18 @@ const voteOption = async (idx) => {
   }
 }
 
+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)
@@ -368,14 +395,16 @@ const submitMultiPoll = async () => {
   color: var(--text-color);
 }
 
-.multi-selection-container {
+.multi-selection-container,
+.single-selection-container {
   padding: 20px 15px 20px 5px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
-.multi-selection-title {
+.multi-selection-title,
+.single-selection-title {
   font-size: 13px;
   color: var(--text-color);
 }