mark-web/src/features/mark/SpecialTagModal.vue

<template>
  <qm-dialog
    v-if="store.setting.uiSetting['specialTag.modal']"
    top="10%"
    width="378px"
    height="192px"
    title="特殊标记"
    :enableResize="false"
    customClass="board-track-dialog"
    @close="close"
  >
    <div class="mark-board-track" style="height: 100%">
      <div class="board-scores">
        <div
          :class="[
            'board-score',
            'score-icon',
            { 'is-current': store.currentSpecialTag === '√' },
          ]"
          @click="chooseSpecialTag('√', 'RIGHT')"
        >
          <img src="@/assets/icons/icon-right.svg" />
        </div>
        <div
          :class="[
            'board-score',
            'score-icon',
            {
              'is-current': store.currentSpecialTag === '乄',
            },
          ]"
          @click="chooseSpecialTag('乄', 'HALF_RIGTH')"
        >
          乄
        </div>
        <div
          :class="[
            'board-score',
            'score-icon',
            { 'is-current': store.currentSpecialTag === 'X' },
          ]"
          @click="chooseSpecialTag('X', 'WRONG')"
        >
          <img src="@/assets/icons/icon-wrong.svg" />
        </div>
        <!-- <div
          :class="[
            'board-score',
            'score-icon',
            { 'is-current': store.currentSpecialTag === '○' },
          ]"
          title="标记圆圈"
          @click="chooseSpecialTag('○', 'CIRCLE')"
        >
          <img src="@/assets/icons/icon-circle.svg" />
        </div> -->
        <div
          :class="[
            'board-score',
            'score-icon',
            { 'is-current': store.currentSpecialTagType === 'TEXT' },
          ]"
          title="标记文本"
          @click="chooseSpecialTag('', 'TEXT')"
        >
          <img class="icon-text" src="@/assets/icons/icon-text.svg" />
        </div>
      </div>

      <div class="board-footer">
        <qm-button
          class="board-goback"
          :clickTimeout="300"
          @click="clearLatestTagOfCurrentTask"
        >
          <template #icon>
            <img src="@/assets/icons/icon-goback.svg" />
          </template>
          回退
        </qm-button>

        <qm-button
          class="board-clear"
          :clickTimeout="300"
          data-test="clear-score"
          @click="clearAllTagsOfCurrentTask"
        >
          <template #icon>
            <img class="icon-common" src="@/assets/icons/icon-clear.svg" />
            <img
              class="icon-active"
              src="@/assets/icons/icon-clear-white.svg"
            />
          </template>
          清空
        </qm-button>
      </div>
    </div>
  </qm-dialog>
</template>

<script setup lang="ts">
import { store } from "@/store/store";

function clearLatestTagOfCurrentTask() {
  if (!store.currentTask?.markResult) return;
  store.currentTask.markResult.specialTagList.splice(-1);
}

function clearAllTagsOfCurrentTask() {
  if (!store.currentTask?.markResult) return;
  store.currentTask.markResult.specialTagList = [];
}

function chooseSpecialTag(tagName: string, tagType: string) {
  if (store.currentSpecialTag === tagName) {
    store.currentSpecialTag = undefined;
    store.currentSpecialTagType = undefined;
  } else {
    store.currentSpecialTag = tagName;
    store.currentSpecialTagType = tagType;
    store.currentScore = undefined;
  }
}

const close = () => {
  store.currentSpecialTag = undefined;
  store.setting.uiSetting["specialTag.modal"] = false;
};
</script>