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

<template>
  <qm-dialog
    v-if="store.setting.uiSetting['specialTag.modal']"
    ref="dialog"
    top="10%"
    width="300px"
    height="160px"
    title="特殊标记"
    @close="close"
  >
    <div
      class="
        tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer
      "
    >
      <div
        @click="toggleTag('√')"
        :class="[store.currentSpecialTag === '√' && 'tag-selected', 'tag']"
      >
        √
      </div>
      <div
        @click="toggleTag('X')"
        :class="[store.currentSpecialTag === 'X' && 'tag-selected', 'tag']"
      >
        X
      </div>
      <div
        @click="toggleTag('乄')"
        :class="[store.currentSpecialTag === '乄' && 'tag-selected', 'tag']"
      >
        乄
      </div>
      <div
        @click="toggleTag('_____')"
        :class="[store.currentSpecialTag === '_____' && 'tag-selected', 'tag']"
        style="width: 60px"
      >
        <u>下划线</u>
      </div>
    </div>

    <div class="tw-flex tw-place-content-between tw-mt-8">
      <qm-button
        type="primary"
        shape="round"
        size="large"
        :clickTimeout="300"
        @click="clearLatestTagOfCurrentTask"
      >
        回退
      </qm-button>

      <qm-button
        type="primary"
        shape="round"
        size="large"
        :clickTimeout="300"
        @click="clearAllTagsOfCurrentTask"
      >
        清除全部
      </qm-button>
    </div>
  </qm-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { store } from "./store";

export default defineComponent({
  name: "SpecialTagModal",
  setup() {
    function clearLatestTagOfCurrentTask() {
      if (!store.currentMarkResult) return;
      store.currentMarkResult.specialTagList.splice(-1);
    }

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

    const toggleTag = (tagName: string) => {
      if (store.currentSpecialTag === tagName) {
        store.currentSpecialTag = undefined;
      } else {
        store.currentSpecialTag = tagName;
        store.currentScore = undefined;
      }
    };

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

<style>
.tag {
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 2px;
}
.tag-selected {
  background-color: lightgrey;
}
</style>