修复键盘模式

src/features/mark/MarkBoardKeyBoard.vue

@@ -39,8 +39,7 @@
                 }}
               </div>
               <div class="tw-text-center tw-text-3xl">
-                {{ showScore(question) }}
-                <!-- {{ question.__updateScore }} -->
+                {{ isCurrentQuestion(question) ? scoreStr : question.score }}
               </div>
             </div>
             <div>
@@ -70,7 +69,7 @@ import {
   defineComponent,
   onMounted,
   onUnmounted,
-  reactive,
+  ref,
   watch,
 } from "vue";
 import { store } from "./store";
@@ -87,12 +86,27 @@ export default defineComponent({
     const { toggleKeyMouse } = keyMouse();
     const { chooseQuestion } = autoChooseFirstQuestion();
 
+    /**
+     * 当前题的输入串，初次是question.score，然后接收输入字符，回车时判断是否合法，合法则赋值给question.score
+     * 切换到下一题，则重新开始
+     *  */
+    let scoreStr = ref("");
+    watch(
+      () => store.currentQuestion,
+      () => {
+        if (isNumber(store.currentQuestion?.score)) {
+          scoreStr.value = "" + store.currentQuestion?.score;
+        } else {
+          scoreStr.value = "";
+        }
+      }
+    );
+
     const questionScoreSteps = computed(() => {
       const question = store.currentQuestion;
       if (!question) return [];
 
-      const remainScore =
-        Math.round(question.maxScore * 100 - (question.score || 0) * 100) / 100;
+      const remainScore = Math.round(question.maxScore * 100) / 100;
       const steps = [];
       for (
         let i = 0;
@@ -119,8 +133,6 @@ export default defineComponent({
       );
     }
 
-    let keyPressTimestamp = 0;
-    let keys = reactive([] as Array<String>);
     function numberKeyListener(event: KeyboardEvent) {
       // console.log(event);
       if (!store.currentQuestion || !store.currentTask) return;
@@ -132,20 +144,33 @@ export default defineComponent({
             q.subNumber === store.currentQuestion.subNumber
         );
       }
-      const joinScore = (store.currentQuestion.score ?? "") + keys.join("");
       // 处理Enter跳下一题或submit
       if (event.key === "Enter") {
-        // if (!isNumber(store.currentQuestion.score)) {
-        //   // 当前题赋分不通过，Enter无效
-        //   return;
-        // }
-        // 有bug，移除当前题，再回来就出错了
-        if (joinScore.length === 0) {
+        const allScoreMarked = store.currentTask?.questionList.every((q) =>
+          isNumber(q.score)
+        );
+        // 如果所有题已赋分，并且当前题赋分和输入串和当前题分数一致，则可以在任意题提交
+        if (
+          allScoreMarked &&
+          scoreStr.value === "" + store.currentQuestion.score
+        ) {
+          submit();
+          return;
+        }
+
+        if (scoreStr.value.length === 0) {
           message.error({ content: "请输入分数", duration: 10 });
           console.log("请输入分数");
           return;
         }
-        const score = parseFloat(joinScore);
+        if (
+          !(/^\d+$/.test(scoreStr.value) || /^\d+\.\d+$/.test(scoreStr.value))
+        ) {
+          message.error({ content: "分数格式不正确", duration: 10 });
+          console.log("分数格式不正确");
+          return;
+        }
+        const score = parseFloat(scoreStr.value);
         // console.log(score);
         if (!isNumber(score)) {
           message.error({ content: "非数字输入", duration: 10 });
@@ -154,75 +179,48 @@ export default defineComponent({
         }
         if (!questionScoreSteps.value.includes(score)) {
           message.error({ content: "输入的分数不在有效间隔内", duration: 10 });
-          console.log("输入的分数不在有效间隔内");
           return;
         }
         store.currentQuestion.score = score;
+        //
+        // scoreStr.value = "";
+        // console.log("give score", score);
         const idx = indexOfCurrentQuestion() as number;
-        if (idx + 1 === store.currentTask?.questionList.length) {
-          submit();
-        } else {
+        if (idx + 1 < store.currentTask?.questionList.length) {
           chooseQuestion(store.currentTask.questionList[idx + 1]);
         }
-        keys.splice(0);
         return;
       }
       if (event.key === "ArrowLeft") {
         const idx = indexOfCurrentQuestion() as number;
         if (idx > 0) {
-          const score = parseFloat(joinScore);
-          if (questionScoreSteps.value.includes(score)) {
-            store.currentQuestion.score = score;
-          }
           chooseQuestion(store.currentTask.questionList[idx - 1]);
         }
-        keys.splice(0);
         return;
       }
       if (event.key === "ArrowRight") {
         const idx = indexOfCurrentQuestion() as number;
-        const score = parseFloat(joinScore);
-        if (questionScoreSteps.value.includes(score)) {
-          store.currentQuestion.score = score;
-        }
         if (idx < store.currentTask.questionList.length - 1) {
           chooseQuestion(store.currentTask.questionList[idx + 1]);
         }
-        keys.splice(0);
         return;
       }
       // 处理回退删除分数
       if (event.key === "Backspace") {
-        if (keys.length > 0) {
-          keys.splice(keys.length - 1, 1);
+        if (scoreStr.value.length > 0) {
+          scoreStr.value = scoreStr.value.slice(0, scoreStr.value.length - 2);
         } else {
           return;
         }
       }
       if (event.key === "Escape") {
-        keys.splice(0);
+        scoreStr.value = "";
       }
 
-      // TODO: 确认数字按键的间隔
-      // if (event.timeStamp - keyPressTimestamp > 1.5 * 1000) {
-      //   keys = [];
-      // }
-      // keyPressTimestamp = event.timeStamp;
       // 此时不再接受任何非数字键
       if (".0123456789".includes(event.key)) {
-        keys.push(event.key);
-        // console.log(keys);
-      }
-      if (isNaN(parseFloat(keys.join("")))) {
-        keys.splice(0);
+        scoreStr.value += event.key;
       }
-      // FIXME: for update. 得想个更好的办法来解决不能更新的问题
-      // store.currentQuestion.__updateScore = keys.join("");
-      // console.log(
-      //   keys,
-      //   keys.join(""),
-      //   isCurrentQuestion(store.currentQuestion) && keys.length > 0
-      // );
     }
     onMounted(() => {
       document.addEventListener("keydown", numberKeyListener);
@@ -231,12 +229,6 @@ export default defineComponent({
       document.removeEventListener("keydown", numberKeyListener);
     });
 
-    const showScore = (question: Question) => {
-      return isCurrentQuestion(question)
-        ? (question.score ?? "") + keys.join("")
-        : question.score;
-    };
-
     function submit() {
       const errors: any = [];
       store.currentTask?.questionList.forEach((question, index) => {
@@ -264,8 +256,7 @@ export default defineComponent({
       toggleKeyMouse,
       isCurrentQuestion,
       chooseQuestion,
-      keys,
-      showScore,
+      scoreStr,
       questionScoreSteps,
       submit,
     };