feat(component): checkable tag

hitokoto-osc · Sep 1, 2023 · ae00d83 · ae00d83
1 parent f70faf0
commit ae00d83
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 10 deletions.
diff --git a/components/PollMarks.vue b/components/PollMarks.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 const props = defineProps<{
   marks: number[]
+  marksSelectedValues: number[]
+  checkable: boolean
 }>()
 
 const emit = defineEmits<{
-  onMarkClick: [markID: number]
+  onSelectChange: [marksSelectedValues: number[]]
 }>()
 
 const marksStore = useMarksStore()
@@ -14,8 +16,22 @@ const marksStore = useMarksStore()
   <a-tag
     v-for="mark in props.marks"
     :key="mark"
-    :color="marksStore.markColorMap[mark]?.color || 'yellow'"
-    @click="emit('onMarkClick', mark)"
+    :style="
+      'cursor: pointer; -webkit-user-select: none; user-select: none;' +
+      (!props.checkable ? ' pointer-events: none;' : '')
+    "
+    :color="
+      (marksStore.markColorMap[mark]?.color || 'yellow') +
+      (props.marksSelectedValues.includes(mark) ? '-inverse' : '')
+    "
+    @click="
+      props.marksSelectedValues.includes(mark)
+        ? emit(
+            'onSelectChange',
+            props.marksSelectedValues.filter((it) => it != mark)
+          )
+        : emit('onSelectChange', props.marksSelectedValues.concat([mark]))
+    "
   >
     {{ marksStore.markColorMap[mark]?.text || '未知' }}
   </a-tag>

diff --git a/components/do/review/Card.vue b/components/do/review/Card.vue
@@ -56,6 +56,12 @@ const onOperationDone = (event: 'submit' | 'cancel') => {
 }
 
 const userStore = useUserStore()
+
+const marksSelectedValues = ref<number[]>([])
+
+const onSelectChange = (x: number[]) => {
+  marksSelectedValues.value = x
+}
 </script>
 
 <template>
@@ -86,7 +92,18 @@ const userStore = useUserStore()
         </li>
       </ul>
     </div>
-    <DoReviewCardMarksContainer v-if="props.marks" :marks="props.marks" />
+    <div v-if="props.marks" class="marks-container">
+      <span v-show="props.marks && props.marks.length" class="tips">
+        此句被标记为：
+      </span>
+      <PollMarks
+        v-if="props.marks"
+        :marks="props.marks"
+        :marks-selected-values="marksSelectedValues"
+        :checkable="!props.polledRecord"
+        @on-select-change="onSelectChange"
+      />
+    </div>
     <div v-if="props.polledRecord" class="review-record">
       <span>
         您投了 <b>{{ convertPollMethod(props.polledRecord.method) }}</b>
@@ -98,8 +115,10 @@ const userStore = useUserStore()
       </span>
     </div>
     <DoReviewCardActionsContainer
+      :props-marks-selected-values="marksSelectedValues"
       :is-polled="!!props.polledRecord"
       :poll-id="props.poll.id"
+      @on-select-change="onSelectChange"
       @do-web-search="
         emit('doWebSearch', {
           sentence: props.sentence.hitokoto,
@@ -121,6 +140,14 @@ const userStore = useUserStore()
 </template>
 
 <style lang="scss" scoped>
+.marks-container {
+  @apply mt-3;
+
+  .tips {
+    @apply block mb-2;
+  }
+}
+
 .hitokoto-sentence {
   @apply text-lg font-noto-serif font-600;
 }

diff --git a/components/do/review/CardActionsContainer.vue b/components/do/review/CardActionsContainer.vue
@@ -7,11 +7,13 @@ import {
 import { PollMethod } from '@/enums/poll'
 import type { PollReq } from '@/composables/api'
 const props = defineProps<{
+  propsMarksSelectedValues: number[]
   isPolled: boolean
   pollId: number // 为了照顾 Vue 的转换规则，因此这里使用 Id 而不是 ID
 }>()
 
 const emit = defineEmits<{
+  onSelectChange: [marksSelectedValues: number[]]
   doMasonryRepaint: [] // 此事件完全只是为了让父组件重绘制
   doWebSearch: []
   doLocalSearch: []
@@ -26,6 +28,11 @@ watch(
   () => nextTick(() => emit('doMasonryRepaint'))
 )
 
+watch(
+  () => props.propsMarksSelectedValues,
+  () => (marksSelectedValues.value = props.propsMarksSelectedValues)
+)
+
 // 评论框
 const isExpandCommentInput = ref(false)
 const comment = ref('')
@@ -88,6 +95,7 @@ const onCancelPoll = async () => {
         mode="multiple"
         :style="{ width: '100%' }"
         placeholder="请选择您对此句的看法，部分选项会展示给其他审核员以辅助审核（选填，若选择“需要修改”则为必填）"
+        @change="emit('onSelectChange', marksSelectedValues)"
       >
         <a-select-option v-for="i in marksStore.marks" :key="i.id">
           {{ i.text }}

diff --git a/components/review/records/Card.vue b/components/review/records/Card.vue
@@ -23,7 +23,7 @@ const sentence = computed(() => {
 })
 
 const emit = defineEmits<{
-  showPollDetail: [pollID: number]
+  showPollDetail: [pollID: number, userMarks: number[]]
 }>()
 </script>
 
@@ -52,7 +52,11 @@ const emit = defineEmits<{
         v-show="userPollLog.user_marks && userPollLog.user_marks.length > 0"
         class="user-marks"
       >
-        审核标记：<PollMarks :marks="userPollLog.user_marks" />
+        审核标记：<PollMarks
+          :marks="userPollLog.user_marks"
+          :marks-selected-values="userPollLog.user_marks"
+          :checkable="false"
+        />
       </div>
       <p v-show="userPollLog.comment" class="comment">
         投票评论：{{ userPollLog.comment }}
@@ -65,7 +69,13 @@ const emit = defineEmits<{
           userPollLog.sentence.poll_status != PollStatus.Open
         "
         type="primary"
-        @click="emit('showPollDetail', props.userPollLog.poll_id)"
+        @click="
+          emit(
+            'showPollDetail',
+            props.userPollLog.poll_id,
+            props.userPollLog.user_marks
+          )
+        "
       >
         投票详情
       </a-button>

diff --git a/components/review/records/PollDetailModal.vue b/components/review/records/PollDetailModal.vue
@@ -2,8 +2,9 @@
 import dayjs from 'dayjs'
 import { PollStatus } from '~/enums/poll'
 const props = defineProps<{
-  pollId: number
   open: boolean
+  pollId: number
+  userMarks: number[]
 }>()
 
 const emit = defineEmits<{
@@ -69,7 +70,11 @@ watch(
         class="marks"
       >
         <span>审核标记：</span>
-        <PollMarks :marks="data?.data.marks || []" />
+        <PollMarks
+          :marks="data?.data.marks || []"
+          :marks-selected-values="props.userMarks || []"
+          :checkable="false"
+        />
       </div>
       <div
         v-if="data?.data.records && data?.data.records.length > 0"

diff --git a/pages/dashboard/records/review.vue b/pages/dashboard/records/review.vue
@@ -6,9 +6,11 @@ useHead({
 
 const showPollDetailModal = ref(false)
 const showPollDetailModalPollId = ref(0)
-const showPollDetail = (pollID: number) => {
+const showPollDetailModalUserMarks = ref<number[]>([])
+const showPollDetail = (pollID: number, userMarks: number[]) => {
   showPollDetailModal.value = true
   showPollDetailModalPollId.value = pollID
+  showPollDetailModalUserMarks.value = userMarks
 }
 
 // 审核记录
@@ -57,6 +59,7 @@ watch([page, pageSize], () => {
     <ReviewRecordsPollDetailModal
       v-model:open="showPollDetailModal"
       :poll-id="showPollDetailModalPollId"
+      :user-marks="showPollDetailModalUserMarks"
     />
     <div class="main">
       <FetchStatusWarpper