mark-web/src/components/mark/MarkBoardKeyBoard.vue

<template>
  <div
    v-if="store.currentTask"
    style="
      max-width: 250px;
      min-width: 250px;
      border: 1px solid grey;
      padding-left: 6px;
      padding-right: 6px;
    "
  >
    <div>
      <h1 class="text-3xl text-center" @click="toggleKeyMouse">键盘给分</h1>
    </div>
    <div>
      <h1 class="text-3xl text-center">
        总分：{{ store.currentMarkResult?.markerScore || 0 }}
      </h1>
    </div>

    <div v-if="store.currentTask && store.currentTask.questionList">
      <template
        v-for="(question, index) in store.currentTask?.questionList"
        :key="index"
      >
        <div
          @click="chooseQuestion(question)"
          class="question rounded p-1 mb-2"
          :class="isCurrentQuestion(question) && 'current-question'"
        >
          <div class="flex justify-between">
            <div>
              <div>
                {{ question.title }} {{ question.mainNumber }}-{{
                  question.subNumber
                }}
              </div>
              <div class="text-center text-3xl">
                {{ question.score || 0 }}
              </div>
            </div>
            <div>
              <div class="text-center">间隔{{ question.intervalScore }}分</div>
              <div class="text-3xl">
                {{ question.minScore }} ~ {{ question.maxScore }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Question } from "@/types";
import { isNumber } from "lodash";
import { computed, defineComponent, onMounted, onUnmounted, watch } from "vue";
import { findCurrentTaskMarkResult, store } from "./store";

export default defineComponent({
  name: "MarkBoardKeyBoard",
  emits: ["submit"],
  setup(props, { emit }) {
    function toggleKeyMouse() {
      if (store.setting.uiSetting["normal.mode"] === "keyboard") {
        store.setting.uiSetting["normal.mode"] = "mouse";
      } else {
        store.setting.uiSetting["normal.mode"] = "keyboard";
      }
    }
    const markResult = findCurrentTaskMarkResult();

    const questionScoreSteps = computed(() => {
      const question = store.currentQuestion;
      if (!question) return [];

      const steps = [];
      for (
        let i = 0;
        i <= question.maxScore - question.score;
        i += question.intervalScore
      ) {
        steps.push(i);
      }
      if ((question.maxScore - question.score) % question.intervalScore !== 0) {
        steps.push(question.maxScore - question.score);
      }

      return steps;
    });

    function isCurrentQuestion(question: Question) {
      return (
        store.currentQuestion?.mainNumber === question.mainNumber &&
        store.currentQuestion?.subNumber === question.subNumber
      );
    }
    watch(
      () => store.currentTask,
      () => {
        store.currentQuestion = undefined;
        store.currentScore = undefined;
      }
    );
    watch(
      () => store.currentQuestion,
      () => {
        store.currentScore = undefined;
      }
    );
    function chooseQuestion(question: Question) {
      store.currentQuestion = question;
    }

    let keyPressTimestamp = 0;
    let keys: string[] = [];
    function numberKeyListener(event: KeyboardEvent) {
      // console.log(event);
      if (!store.currentQuestion || !store.currentTask) return;

      // 处理Enter跳下一题或submit
      if (event.key === "Enter") {
        if (!isNumber(store.currentQuestion.score)) {
          // 当前题赋分不通过，Enter无效
          return;
        }
        const idx = store.currentTask?.questionList.findIndex(
          (q) =>
            q.mainNumber === store.currentQuestion?.mainNumber &&
            q.subNumber === store.currentQuestion.subNumber
        );
        if (idx + 1 === store.currentTask?.questionList.length) {
          submit();
        } else {
          chooseQuestion(store.currentTask.questionList[idx + 1]);
        }
        keys = [];
        return;
      }

      if (event.timeStamp - keyPressTimestamp > 1.5 * 1000) {
        keys = [];
      }
      keyPressTimestamp = event.timeStamp;
      keys.push(event.key);
      if (isNaN(parseFloat(keys.join("")))) {
        keys = [];
      }
      if (event.key === "Escape") {
        keys = [];
      }
      const score = parseFloat(keys.join(""));
      if (isNumber(score) && questionScoreSteps.value.includes(score)) {
        store.currentQuestion.score = score;
      }
    }
    onMounted(() => {
      document.addEventListener("keydown", numberKeyListener);
    });
    onUnmounted(() => {
      document.removeEventListener("keydown", numberKeyListener);
    });

    function submit() {
      emit("submit");
    }

    return {
      store,
      toggleKeyMouse,
      markResult,
      isCurrentQuestion,
      chooseQuestion,
      questionScoreSteps,
      submit,
    };
  },
});
</script>

<style scoped>
.question {
  min-width: 80px;
  border: 1px solid grey;
}
.current-question {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
.single-score {
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;

  border: 1px solid black;
  border-radius: 5px;
}
.current-score {
  border: 1px solid yellowgreen;
  background-color: lightblue;
}
</style>