鼠标模式给分

src/components/mark/Mark.vue

@@ -9,6 +9,7 @@
         v-if="showMarkBoardKeyBoard"
         @submit="saveTaskToServer"
       />
+      <mark-board-mouse v-if="showMarkBoardMouse" @submit="saveTaskToServer" />
     </div>
   </div>
 </template>
@@ -32,6 +33,7 @@ import MarkHistory from "./MarkHistory.vue";
 import MarkBoardTrack from "./MarkBoardTrack.vue";
 import { ModeEnum, Setting } from "@/types";
 import MarkBoardKeyBoard from "./MarkBoardKeyBoard.vue";
+import MarkBoardMouse from "./MarkBoardMouse.vue";
 
 export default defineComponent({
   name: "Mark",
@@ -41,6 +43,7 @@ export default defineComponent({
     MarkHistory,
     MarkBoardTrack,
     MarkBoardKeyBoard,
+    MarkBoardMouse,
   },
   setup: () => {
     const { addInterval } = useTimers();
@@ -118,6 +121,13 @@ export default defineComponent({
       );
     });
 
+    const showMarkBoardMouse = computed(() => {
+      return (
+        store.setting.mode === ModeEnum.COMMON &&
+        store.setting.uiSetting["normal.mode"] === "mouse"
+      );
+    });
+
     const saveTaskToServer = async () => {
       console.log("save task to server");
       const res = (await saveTask()) as any;
@@ -140,6 +150,7 @@ export default defineComponent({
       saveTaskToServer,
       showMarkBoardTrack,
       showMarkBoardKeyBoard,
+      showMarkBoardMouse,
     };
   },
 });

src/components/mark/MarkBoardMouse.vue

@@ -0,0 +1,125 @@
+<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>
+      <div class="text-2xl text-center" @click="submit">提交</div>
+    </div>
+
+    <div v-if="store.currentTask && store.currentTask.questionList">
+      <template
+        v-for="(question, index) in store.currentTask?.questionList"
+        :key="index"
+      >
+        <div class="question rounded p-1 mb-2">
+          <div>
+            <div>
+              {{ question.title }} {{ question.mainNumber }}-{{
+                question.subNumber
+              }}
+            </div>
+            <div class="flex flex-wrap gap-1">
+              <div
+                v-for="(s, i) in question.maxScore + 1"
+                :key="i"
+                @click="chooseScore(question, s - 1)"
+                class="single-score"
+                :class="isCurrentScore(question, s - 1) && 'current-score'"
+              >
+                {{ s - 1 }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Question } from "@/types";
+import { defineComponent, watch } from "vue";
+import { findCurrentTaskMarkResult, store } from "./store";
+
+export default defineComponent({
+  name: "MarkBoardMouse",
+  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();
+
+    watch(
+      () => store.currentTask,
+      () => {
+        store.currentQuestion = undefined;
+        store.currentScore = undefined;
+      }
+    );
+    function chooseScore(question: Question, score: number) {
+      store.currentQuestion = question;
+      store.currentQuestion.score = score;
+    }
+    function isCurrentScore(question: Question, score: number) {
+      return question.score === score;
+    }
+
+    function submit() {
+      emit("submit");
+    }
+
+    return {
+      store,
+      toggleKeyMouse,
+      markResult,
+      chooseScore,
+      isCurrentScore,
+      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>