重构数据流和setup

src/components/mark/Mark.vue

@@ -25,7 +25,7 @@ import {
   saveTask,
   updateUISetting,
 } from "@/api/markPage";
-import { store } from "./store";
+import { findCurrentTaskMarkResult, store } from "./store";
 import MarkHeader from "./MarkHeader.vue";
 import MarkBody from "./MarkBody.vue";
 import { useTimers } from "@/setups/useTimers";
@@ -110,6 +110,14 @@ export default defineComponent({
       { deep: true }
     );
 
+    // 切换currentTask的同时，切换currentMarkResult
+    watch(
+      () => store.currentTask,
+      () => {
+        store.currentMarkResult = findCurrentTaskMarkResult();
+      }
+    );
+
     const showMarkBoardTrack = computed(() => {
       return store.setting.mode === ModeEnum.TRACK;
     });

src/components/mark/MarkBoardKeyBoard.vue

@@ -51,20 +51,14 @@
 import { Question } from "@/types";
 import { isNumber } from "lodash";
 import { computed, defineComponent, onMounted, onUnmounted, watch } from "vue";
-import { findCurrentTaskMarkResult, store } from "./store";
+import { store } from "./store";
+import { keyMouse } from "./use/keyboardAndMouse";
 
 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 { markResult, toggleKeyMouse } = keyMouse();
 
     const questionScoreSteps = computed(() => {
       const question = store.currentQuestion;
@@ -94,13 +88,7 @@ export default defineComponent({
         store.currentQuestion?.subNumber === question.subNumber
       );
     }
-    watch(
-      () => store.currentTask,
-      () => {
-        store.currentQuestion = undefined;
-        store.currentScore = undefined;
-      }
-    );
+    // 当题目改变时，重置当前分数
     watch(
       () => store.currentQuestion,
       () => {
@@ -136,7 +124,7 @@ export default defineComponent({
         keys = [];
         return;
       }
-
+      // TODO: 确认数字按键的间隔
       if (event.timeStamp - keyPressTimestamp > 1.5 * 1000) {
         keys = [];
       }

src/components/mark/MarkBoardMouse.vue

@@ -48,28 +48,15 @@
 import { Question } from "@/types";
 import { isNumber } from "lodash";
 import { defineComponent, watch } from "vue";
-import { findCurrentTaskMarkResult, store } from "./store";
+import { store } from "./store";
+import { keyMouse } from "./use/keyboardAndMouse";
 
 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();
+    const { markResult, toggleKeyMouse } = keyMouse();
 
-    watch(
-      () => store.currentTask,
-      () => {
-        store.currentQuestion = undefined;
-        store.currentScore = undefined;
-      }
-    );
     function chooseScore(question: Question, score: number) {
       store.currentQuestion = question;
       store.currentQuestion.score = score;
@@ -116,10 +103,6 @@ export default defineComponent({
   min-width: 80px;
   border: 1px solid grey;
 }
-.current-question {
-  border: 1px solid yellowgreen;
-  background-color: lightblue;
-}
 .single-score {
   width: 30px;
   height: 30px;

src/components/mark/MarkBoardTrack.vue

@@ -68,19 +68,13 @@ export default defineComponent({
       const question = store.currentQuestion;
       if (!question) return [];
 
+      const remainScore = question.maxScore - (question.score || 0);
       const steps = [];
-      for (
-        let i = 0;
-        i <= question.maxScore - (question.score || 0);
-        i += question.intervalScore
-      ) {
+      for (let i = 0; i <= remainScore; i += question.intervalScore) {
         steps.push(i);
       }
-      if (
-        (question.maxScore - (question.score || 0)) % question.intervalScore !==
-        0
-      ) {
-        steps.push(question.maxScore - (question.score || 0));
+      if (remainScore % question.intervalScore !== 0) {
+        steps.push(remainScore);
       }
 
       return steps;

src/components/mark/MarkBody.vue

@@ -46,7 +46,7 @@ interface SliceImage {
 export default defineComponent({
   name: "MarkBody",
   components: { MarkDrawTrack },
-  setup(props, context) {
+  setup() {
     const container = ref(null);
     let sliceImagesWithTrackList: Array<SliceImage> = reactive([]);
     let _studentId = -1; // 判断是否改变了任务
@@ -71,29 +71,6 @@ export default defineComponent({
       let markResult = findCurrentTaskMarkResult();
       // console.log("watcheffect markResult 1", markResult, store.markResults);
 
-      if (!markResult && store.currentTask) {
-        const { libraryId, studentId } = store.currentTask;
-        const statusValue = store.setting.statusValue;
-        markResult = {} as MarkResult;
-        markResult.libraryId = libraryId;
-        markResult.studentId = studentId;
-        markResult.statusValue = statusValue;
-        markResult.spent = Date.now();
-
-        markResult.trackList = store.currentTask.questionList.reduce(
-          (all, c) => all.concat(c.trackList),
-          [] as Array<Track>
-        );
-        markResult.scoreList = store.currentTask.questionList.map(
-          (q) => q.score
-        );
-        markResult.markerScore =
-          markResult.scoreList
-            .filter((v): v is number => v !== null)
-            .reduce((acc, v) => (acc += v * 100), 0) / 100;
-        store.markResults = [...store.markResults, markResult];
-        // console.log("watcheffect markResult 2", markResult, store.markResults);
-      }
       if (!markResult || !store.currentTask) return;
       // store.markResults.splice(store.markResults.indexOf(markResult), 1);
       // store.markResults.push(markResult);
@@ -316,7 +293,7 @@ export default defineComponent({
           });
         }
       }, 10);
-      const scale = store.setting.uiSetting["answer.paper.scale"] || 1;
+      const scale = store.setting.uiSetting["answer.paper.scale"];
       return scale * 100 + "%";
     });
 

src/components/mark/store.ts

@@ -1,4 +1,4 @@
-import { ModeEnum, Setting, MarkStore, Task } from "@/types";
+import { ModeEnum, Setting, MarkStore, Task, MarkResult, Track } from "@/types";
 import { groupBy, sortBy } from "lodash";
 import { reactive, watch } from "vue";
 
@@ -32,7 +32,7 @@ const obj = {
   groups: [],
   tasks: [],
   currentMarkResult: undefined,
-  currentTask: <Task>{},
+  currentTask: undefined,
   currentQuestion: undefined,
   currentScore: undefined,
   markResults: [],
@@ -41,15 +41,38 @@ const obj = {
   historyTasks: [],
 } as MarkStore;
 
-/** 保存setting和task */
-export function saveSetting(settingRes: Setting) {
-  store.setting = settingRes;
-}
-
+/** 如果currentTask不存在，则返回undefined; 如果currentMarkResult不存在，则创建一个对应的markResult并返回 */
 export function findCurrentTaskMarkResult() {
   if (!store.currentTask) return;
   const { libraryId, studentId } = store.currentTask;
   const statusValue = store.setting.statusValue;
+  let markResult = store.markResults.find(
+    (m) =>
+      m.libraryId === libraryId &&
+      m.studentId === studentId &&
+      m.statusValue === statusValue
+  );
+
+  if (!markResult) {
+    const { libraryId, studentId } = store.currentTask;
+    const statusValue = store.setting.statusValue;
+    markResult = {} as MarkResult;
+    markResult.libraryId = libraryId;
+    markResult.studentId = studentId;
+    markResult.statusValue = statusValue;
+    markResult.spent = Date.now();
+    markResult.trackList = store.currentTask.questionList.reduce(
+      (all, c) => all.concat(c.trackList),
+      [] as Array<Track>
+    );
+    markResult.scoreList = store.currentTask.questionList.map((q) => q.score);
+    markResult.markerScore =
+      markResult.scoreList
+        .filter((v): v is number => v !== null)
+        .reduce((acc, v) => (acc += v * 100), 0) / 100;
+    store.markResults = [...store.markResults, markResult];
+  }
+
   return store.markResults.find(
     (m) =>
       m.libraryId === libraryId &&
@@ -60,15 +83,6 @@ export function findCurrentTaskMarkResult() {
 
 export const store = reactive(obj);
 
-// 切换currentTask的同时，切换currentMarkResult
-watch(
-  () => store.currentTask,
-  () => {
-    const m = findCurrentTaskMarkResult();
-    store.currentMarkResult = m;
-  }
-);
-
 // 轨迹模式下，添加轨迹，更新分数
 watch(
   () => store.currentMarkResult?.trackList,
@@ -130,21 +144,3 @@ watch(
   },
   { deep: true }
 );
-
-// 普通模式更新分数时
-watch(
-  () => store.currentQuestion?.score,
-  () => {
-    if (store.setting.mode === ModeEnum.COMMON) {
-      const markResult = findCurrentTaskMarkResult();
-      if (markResult && store.currentTask) {
-        const scoreList = store.currentTask.questionList.map(
-          (q) => q.score || 0
-        );
-        markResult.scoreList = scoreList as number[];
-        markResult.markerScore =
-          scoreList.reduce((acc, v) => (acc += v * 100), 0) / 100;
-      }
-    }
-  }
-);

src/components/mark/use/keyboardAndMouse.ts

@@ -0,0 +1,42 @@
+import { ModeEnum } from "@/types";
+import { watch } from "vue";
+import { findCurrentTaskMarkResult, store } from "../store";
+
+export function keyMouse() {
+  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;
+    }
+  );
+
+  // 普通模式更新分数时
+  watch(
+    () => store.currentQuestion?.score,
+    () => {
+      if (store.setting.mode === ModeEnum.COMMON) {
+        if (markResult && store.currentTask) {
+          const scoreList = store.currentTask.questionList.map(
+            (q) => q.score || 0
+          );
+          markResult.scoreList = scoreList as number[];
+          markResult.markerScore =
+            scoreList.reduce((acc, v) => (acc += v * 100), 0) / 100;
+        }
+      }
+    }
+  );
+
+  return { toggleKeyMouse, markResult };
+}