script setup refactor step 2

src/components/QmDialog.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script lang="ts">
+// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
 import { defineComponent, onMounted, onUpdated, reactive, ref } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";

src/features/mark/MarkBoardKeyBoard.vue

@@ -99,244 +99,210 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Question } from "@/types";
+<script setup lang="ts">
+import type { Question } from "@/types";
 import { isNumber } from "lodash";
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineEmit, onMounted, onUnmounted, ref, watch } from "vue";
 import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
 import { message } from "ant-design-vue";
 import { DownOutlined } from "@ant-design/icons-vue";
 
-export default defineComponent({
-  name: "MarkBoardKeyBoard",
-  emits: ["submit", "allZeroSubmit"],
-  components: { DownOutlined },
-  setup(props, { emit }) {
-    const { toggleKeyMouse } = keyMouse();
-    const { chooseQuestion } = autoChooseFirstQuestion();
+const emit = defineEmit(["submit", "allZeroSubmit"]);
 
-    /**
-     * 当前题的输入串，初次是question.score，然后接收输入字符，回车时判断是否合法，合法则赋值给question.score
-     * 切换到下一题，则重新开始
-     *  */
-    let scoreStr = ref("");
-    watch(
-      () => [store.currentQuestion, store.setting.uiSetting["normal.mode"]],
-      () => {
-        if (isNumber(store.currentQuestion?.score)) {
-          scoreStr.value = "" + store.currentQuestion?.score;
-        } else {
-          scoreStr.value = "";
-        }
-      },
-      { immediate: true }
-    );
+const { toggleKeyMouse } = keyMouse();
+const { chooseQuestion } = autoChooseFirstQuestion();
 
-    const questionScoreSteps = computed(() => {
-      const question = store.currentQuestion;
-      if (!question) return [];
+/**
+ * 当前题的输入串，初次是question.score，然后接收输入字符，回车时判断是否合法，合法则赋值给question.score
+ * 切换到下一题，则重新开始
+ *  */
+let scoreStr = ref("");
+watch(
+  () => [store.currentQuestion, store.setting.uiSetting["normal.mode"]],
+  () => {
+    if (isNumber(store.currentQuestion?.score)) {
+      scoreStr.value = "" + store.currentQuestion?.score;
+    } else {
+      scoreStr.value = "";
+    }
+  },
+  { immediate: true }
+);
 
-      const remainScore = Math.round(question.maxScore * 100) / 100;
-      const steps = [];
-      for (
-        let i = 0;
-        i <= remainScore;
-        i = Math.round(i * 100 + question.intervalScore * 100) / 100
-      ) {
-        steps.push(i);
-      }
-      if (
-        Math.round(remainScore * 100) %
-          Math.round(question.intervalScore * 100) !==
-        0
-      ) {
-        steps.push(remainScore);
-      }
+const questionScoreSteps = computed(() => {
+  const question = store.currentQuestion;
+  if (!question) return [];
 
-      return steps;
-    });
+  const remainScore = Math.round(question.maxScore * 100) / 100;
+  const steps = [];
+  for (
+    let i = 0;
+    i <= remainScore;
+    i = Math.round(i * 100 + question.intervalScore * 100) / 100
+  ) {
+    steps.push(i);
+  }
+  if (
+    Math.round(remainScore * 100) % Math.round(question.intervalScore * 100) !==
+    0
+  ) {
+    steps.push(remainScore);
+  }
 
-    function isCurrentQuestion(question: Question) {
-      return (
-        store.currentQuestion?.mainNumber === question.mainNumber &&
-        store.currentQuestion?.subNumber === question.subNumber
-      );
-    }
+  return steps;
+});
 
-    function numberKeyListener(event: KeyboardEvent) {
-      // console.log(event);
-      if (!store.currentQuestion || !store.currentTask) return;
-      if (store.globalMask) return;
+function isCurrentQuestion(question: Question) {
+  return (
+    store.currentQuestion?.mainNumber === question.mainNumber &&
+    store.currentQuestion?.subNumber === question.subNumber
+  );
+}
 
-      function indexOfCurrentQuestion() {
-        return store.currentTask?.questionList.findIndex(
-          (q) =>
-            q.mainNumber === store.currentQuestion?.mainNumber &&
-            q.subNumber === store.currentQuestion.subNumber
-        );
-      }
-      // 处理Enter跳下一题或submit
-      if (event.key === "Enter") {
-        const allScoreMarked = store.currentTask?.questionList.every((q) =>
-          isNumber(q.score)
-        );
-        // 如果所有题已赋分，并且当前题赋分和输入串和当前题分数一致，则可以在任意题提交
-        if (
-          allScoreMarked &&
-          scoreStr.value === "" + store.currentQuestion.score
-        ) {
-          submit();
-          return;
-        }
+function numberKeyListener(event: KeyboardEvent) {
+  // console.log(event);
+  if (!store.currentQuestion || !store.currentTask) return;
+  if (store.globalMask) return;
 
-        if (scoreStr.value.length === 0) {
-          message.error({ content: "请输入分数", duration: 5 });
-          console.log("请输入分数");
-          return;
-        }
+  function indexOfCurrentQuestion() {
+    return store.currentTask?.questionList.findIndex(
+      (q) =>
+        q.mainNumber === store.currentQuestion?.mainNumber &&
+        q.subNumber === store.currentQuestion.subNumber
+    );
+  }
+  // 处理Enter跳下一题或submit
+  if (event.key === "Enter") {
+    const allScoreMarked = store.currentTask?.questionList.every((q) =>
+      isNumber(q.score)
+    );
+    // 如果所有题已赋分，并且当前题赋分和输入串和当前题分数一致，则可以在任意题提交
+    if (allScoreMarked && scoreStr.value === "" + store.currentQuestion.score) {
+      submit();
+      return;
+    }
 
-        // 0 分
-        // 整数分 (开始不为0)
-        // 小数分 (开始和结束不为0，结束必须为1-9
-        if (
-          !(
-            scoreStr.value === "0" ||
-            /^0\.[1-9]\d*$/.test(scoreStr.value) ||
-            /^[1-9]\d*$/.test(scoreStr.value) ||
-            /^[1-9]\d*\.\d*[1-9]$/.test(scoreStr.value)
-          )
-        ) {
-          message.error({ content: "分数格式不正确", duration: 5 });
-          console.log("分数格式不正确");
-          return;
-        }
-        const score = parseFloat(scoreStr.value);
-        // console.log(score);
-        if (!isNumber(score)) {
-          message.error({ content: "非数字输入", duration: 5 });
-          console.log("非数字输入");
-          return;
-        }
-        if (!questionScoreSteps.value.includes(score)) {
-          message.error({ content: "输入的分数不在有效间隔内", duration: 5 });
-          return;
-        }
-        store.currentQuestion.score = score;
-        //
-        // scoreStr.value = "";
-        // console.log("give score", score);
-        const idx = indexOfCurrentQuestion() as number;
-        if (idx + 1 < store.currentTask?.questionList.length) {
-          chooseQuestion(store.currentTask.questionList[idx + 1]);
-        }
-        return;
-      }
-      if (event.key === "ArrowLeft") {
-        const idx = indexOfCurrentQuestion() as number;
-        if (idx > 0) {
-          chooseQuestion(store.currentTask.questionList[idx - 1]);
-        }
-        return;
-      }
-      if (event.key === "ArrowRight") {
-        const idx = indexOfCurrentQuestion() as number;
-        if (idx < store.currentTask.questionList.length - 1) {
-          chooseQuestion(store.currentTask.questionList[idx + 1]);
-        }
-        return;
-      }
-      // 处理回退删除分数
-      if (event.key === "Backspace") {
-        if (scoreStr.value.length > 0) {
-          scoreStr.value = scoreStr.value.slice(0, -1);
-        } else {
-          return;
-        }
-      }
-      if (event.key === "Escape") {
-        scoreStr.value = "";
-      }
+    if (scoreStr.value.length === 0) {
+      message.error({ content: "请输入分数", duration: 5 });
+      console.log("请输入分数");
+      return;
+    }
 
-      // 此时不再接受任何非数字键
-      if (".0123456789".includes(event.key)) {
-        scoreStr.value += event.key;
-      }
+    // 0 分
+    // 整数分 (开始不为0)
+    // 小数分 (开始和结束不为0，结束必须为1-9
+    if (
+      !(
+        scoreStr.value === "0" ||
+        /^0\.[1-9]\d*$/.test(scoreStr.value) ||
+        /^[1-9]\d*$/.test(scoreStr.value) ||
+        /^[1-9]\d*\.\d*[1-9]$/.test(scoreStr.value)
+      )
+    ) {
+      message.error({ content: "分数格式不正确", duration: 5 });
+      console.log("分数格式不正确");
+      return;
     }
-    onMounted(() => {
-      document.addEventListener("keydown", numberKeyListener);
-    });
-    onUnmounted(() => {
-      document.removeEventListener("keydown", numberKeyListener);
-    });
+    const score = parseFloat(scoreStr.value);
+    // console.log(score);
+    if (!isNumber(score)) {
+      message.error({ content: "非数字输入", duration: 5 });
+      console.log("非数字输入");
+      return;
+    }
+    if (!questionScoreSteps.value.includes(score)) {
+      message.error({ content: "输入的分数不在有效间隔内", duration: 5 });
+      return;
+    }
+    store.currentQuestion.score = score;
+    //
+    // scoreStr.value = "";
+    // console.log("give score", score);
+    const idx = indexOfCurrentQuestion() as number;
+    if (idx + 1 < store.currentTask?.questionList.length) {
+      chooseQuestion(store.currentTask.questionList[idx + 1]);
+    }
+    return;
+  }
+  if (event.key === "ArrowLeft") {
+    const idx = indexOfCurrentQuestion() as number;
+    if (idx > 0) {
+      chooseQuestion(store.currentTask.questionList[idx - 1]);
+    }
+    return;
+  }
+  if (event.key === "ArrowRight") {
+    const idx = indexOfCurrentQuestion() as number;
+    if (idx < store.currentTask.questionList.length - 1) {
+      chooseQuestion(store.currentTask.questionList[idx + 1]);
+    }
+    return;
+  }
+  // 处理回退删除分数
+  if (event.key === "Backspace") {
+    if (scoreStr.value.length > 0) {
+      scoreStr.value = scoreStr.value.slice(0, -1);
+    } else {
+      return;
+    }
+  }
+  if (event.key === "Escape") {
+    scoreStr.value = "";
+  }
 
-    const collapseSideBar = () => {
-      store.setting.uiSetting["score.board.collapse"] =
-        !!!store.setting.uiSetting["score.board.collapse"];
-    };
+  // 此时不再接受任何非数字键
+  if (".0123456789".includes(event.key)) {
+    scoreStr.value += event.key;
+  }
+}
+onMounted(() => {
+  document.addEventListener("keydown", numberKeyListener);
+});
+onUnmounted(() => {
+  document.removeEventListener("keydown", numberKeyListener);
+});
 
-    const handleMouseOverWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.add("show-board");
-        }
-      }
-    };
+const handleMouseOverWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.add("show-board");
+    }
+  }
+};
 
-    const handleMouseOutWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.remove("show-board");
-        }
-      }
-    };
+const handleMouseOutWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.remove("show-board");
+    }
+  }
+};
 
-    function submit() {
-      const errors: any = [];
-      store.currentTask?.questionList.forEach((question, index) => {
-        if (!isNumber(question.score)) {
-          errors.push({
-            question,
-            index,
-            error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
-          });
-        }
+function submit() {
+  const errors: any = [];
+  store.currentTask?.questionList.forEach((question, index) => {
+    if (!isNumber(question.score)) {
+      errors.push({
+        question,
+        index,
+        error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
       });
-      if (errors.length === 0) {
-        emit("submit");
-      } else {
-        console.log(errors);
-        message.error({
-          content: errors.map((e: any) => `${e.error}`).join("\n"),
-          duration: 10,
-        });
-      }
     }
-
-    return {
-      store,
-      collapseSideBar,
-      handleMouseOverWithBoard,
-      handleMouseOutWithBoard,
-      toggleKeyMouse,
-      isCurrentQuestion,
-      chooseQuestion,
-      scoreStr,
-      questionScoreSteps,
-      submit,
-    };
-  },
-});
+  });
+  if (errors.length === 0) {
+    emit("submit");
+  } else {
+    console.log(errors);
+    message.error({
+      content: errors.map((e: any) => `${e.error}`).join("\n"),
+      duration: 10,
+    });
+  }
+}
 </script>
 
 <style scoped>

src/features/mark/MarkBoardMouse.vue

@@ -99,111 +99,87 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Question } from "@/types";
+<script setup lang="ts">
+import type { Question } from "@/types";
 import { isNumber } from "lodash";
-import { defineComponent, watch } from "vue";
+import { defineEmit } from "vue";
 import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { message } from "ant-design-vue";
 import { DownOutlined } from "@ant-design/icons-vue";
 
-export default defineComponent({
-  name: "MarkBoardMouse",
-  emits: ["submit", "allZeroSubmit"],
-  components: { DownOutlined },
-  setup(props, { emit }) {
-    const { toggleKeyMouse } = keyMouse();
+const emit = defineEmit(["submit", "allZeroSubmit"]);
+const { toggleKeyMouse } = keyMouse();
 
-    function chooseScore(question: Question, score: number) {
-      store.currentQuestion = question;
-      store.currentQuestion.score = score;
-    }
-    function isCurrentScore(question: Question, score: number) {
-      return question.score === score;
-    }
-
-    function questionScoreSteps(question: Question) {
-      if (!question) return [];
+function chooseScore(question: Question, score: number) {
+  store.currentQuestion = question;
+  store.currentQuestion.score = score;
+}
+function isCurrentScore(question: Question, score: number) {
+  return question.score === score;
+}
 
-      const remainScore = Math.round(question.maxScore * 100) / 100;
-      const steps = [];
-      for (
-        let i = 0;
-        i <= remainScore;
-        i = Math.round(i * 100 + question.intervalScore * 100) / 100
-      ) {
-        steps.push(i);
-      }
-      if (
-        Math.round(remainScore * 100) %
-          Math.round(question.intervalScore * 100) !==
-        0
-      ) {
-        steps.push(remainScore);
-      }
+function questionScoreSteps(question: Question) {
+  if (!question) return [];
 
-      return steps;
-    }
+  const remainScore = Math.round(question.maxScore * 100) / 100;
+  const steps = [];
+  for (
+    let i = 0;
+    i <= remainScore;
+    i = Math.round(i * 100 + question.intervalScore * 100) / 100
+  ) {
+    steps.push(i);
+  }
+  if (
+    Math.round(remainScore * 100) % Math.round(question.intervalScore * 100) !==
+    0
+  ) {
+    steps.push(remainScore);
+  }
 
-    const collapseSideBar = () => {
-      store.setting.uiSetting["score.board.collapse"] =
-        !!!store.setting.uiSetting["score.board.collapse"];
-    };
+  return steps;
+}
 
-    const handleMouseOverWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.add("show-board");
-        }
-      }
-    };
+const handleMouseOverWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.add("show-board");
+    }
+  }
+};
 
-    const handleMouseOutWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.remove("show-board");
-        }
-      }
-    };
+const handleMouseOutWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.remove("show-board");
+    }
+  }
+};
 
-    function submit() {
-      const errors: any = [];
-      store.currentTask?.questionList.forEach((question, index) => {
-        if (!isNumber(question.score)) {
-          errors.push({
-            question,
-            index,
-            error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
-          });
-        }
+function submit() {
+  const errors: any = [];
+  store.currentTask?.questionList.forEach((question, index) => {
+    if (!isNumber(question.score)) {
+      errors.push({
+        question,
+        index,
+        error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
       });
-      if (errors.length === 0) {
-        emit("submit");
-      } else {
-        console.log(errors);
-        message.error({
-          content: errors.map((e: any) => `${e.error}`).join("\n"),
-          duration: 10,
-        });
-      }
     }
-
-    return {
-      store,
-      collapseSideBar,
-      handleMouseOverWithBoard,
-      handleMouseOutWithBoard,
-      toggleKeyMouse,
-      questionScoreSteps,
-      chooseScore,
-      isCurrentScore,
-      submit,
-    };
-  },
-});
+  });
+  if (errors.length === 0) {
+    emit("submit");
+  } else {
+    console.log(errors);
+    message.error({
+      content: errors.map((e: any) => `${e.error}`).join("\n"),
+      duration: 10,
+    });
+  }
+}
 </script>
 
 <style scoped>

src/features/mark/MarkBoardTrack.vue

@@ -7,11 +7,6 @@
       class="tw-self-start tw-cursor-pointer tw-pb-10"
       @mouseover.stop="() => true"
     >
-      <!-- <ArrowLeftOutlined
-        style="font-size: 30px"
-        @click="collapseSideBar"
-        @mouseover="(e) => e.stopPropagation()"
-      /> -->
       <a-switch
         v-model:checked="store.setting.uiSetting['score.board.collapse']"
       />
@@ -26,7 +21,6 @@
   >
     <div class="tw-flex">
       <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
-        <!-- <ArrowRightOutlined style="font-size: 30px" @click="collapseSideBar" /> -->
         <a-switch
           v-model:checked="store.setting.uiSetting['score.board.collapse']"
         />
@@ -159,246 +153,212 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Question } from "@/types";
+<script setup lang="ts">
+import type { Question } from "@/types";
 import { isNumber } from "lodash";
-import { computed, defineComponent, onMounted, onUnmounted, watch } from "vue";
+import { computed, defineEmit, onMounted, onUnmounted, watch } from "vue";
 import { store } from "./store";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
 import { message } from "ant-design-vue";
 import { dragSplitPane } from "./use/splitPane";
-import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons-vue";
 
-export default defineComponent({
-  name: "MarkBoardTrack",
-  emits: ["submit", "allZeroSubmit"],
-  components: { ArrowRightOutlined, ArrowLeftOutlined },
-  setup(props, { emit }) {
-    const { dragSpliter, topPercent } = dragSplitPane();
+const emit = defineEmit(["submit", "allZeroSubmit"]);
+const { dragSpliter, topPercent } = dragSplitPane();
 
-    const { chooseQuestion } = autoChooseFirstQuestion();
+const { chooseQuestion } = autoChooseFirstQuestion();
 
-    const questionScoreSteps = computed(() => {
-      const question = store.currentQuestion;
-      if (!question) return [];
+const questionScoreSteps = computed(() => {
+  const question = store.currentQuestion;
+  if (!question) return [];
 
-      const remainScore =
-        Math.round(question.maxScore * 100 - (question.score || 0) * 100) / 100;
-      const steps = [];
-      for (
-        let i = 0;
-        i <= remainScore;
-        i = Math.round(i * 100 + question.intervalScore * 100) / 100
-      ) {
-        steps.push(i);
-      }
-      if (
-        Math.round(remainScore * 100) %
-          Math.round(question.intervalScore * 100) !==
-        0
-      ) {
-        steps.push(remainScore);
-      }
+  const remainScore =
+    Math.round(question.maxScore * 100 - (question.score || 0) * 100) / 100;
+  const steps = [];
+  for (
+    let i = 0;
+    i <= remainScore;
+    i = Math.round(i * 100 + question.intervalScore * 100) / 100
+  ) {
+    steps.push(i);
+  }
+  if (
+    Math.round(remainScore * 100) % Math.round(question.intervalScore * 100) !==
+    0
+  ) {
+    steps.push(remainScore);
+  }
 
-      return steps;
-    });
-
-    function isCurrentQuestion(question: Question) {
-      return (
-        store.currentQuestion?.mainNumber === question.mainNumber &&
-        store.currentQuestion?.subNumber === question.subNumber
-      );
-    }
-    watch(
-      () => store.currentQuestion,
-      () => {
-        store.currentScore = undefined;
-      }
-    );
+  return steps;
+});
 
-    function isCurrentScore(score: number) {
-      return store.currentScore === score;
-    }
-    function chooseScore(score: number) {
-      if (store.currentScore === score) {
-        store.currentScore = undefined;
-      } else {
-        store.currentScore = score;
-        store.currentSpecialTag = undefined;
-      }
-    }
+function isCurrentQuestion(question: Question) {
+  return (
+    store.currentQuestion?.mainNumber === question.mainNumber &&
+    store.currentQuestion?.subNumber === question.subNumber
+  );
+}
+watch(
+  () => store.currentQuestion,
+  () => {
+    store.currentScore = undefined;
+  }
+);
 
-    let keyPressTimestamp = 0;
-    let keys: string[] = [];
-    function numberKeyListener(event: KeyboardEvent) {
-      // console.log(event);
-      if (!store.currentQuestion) return;
+function isCurrentScore(score: number) {
+  return store.currentScore === score;
+}
+function chooseScore(score: number) {
+  if (store.currentScore === score) {
+    store.currentScore = undefined;
+  } else {
+    store.currentScore = score;
+    store.currentSpecialTag = undefined;
+  }
+}
 
-      function indexOfCurrentQuestion() {
-        return store.currentTask?.questionList.findIndex(
-          (q) =>
-            q.mainNumber === store.currentQuestion?.mainNumber &&
-            q.subNumber === store.currentQuestion.subNumber
-        );
-      }
+let keyPressTimestamp = 0;
+let keys: string[] = [];
+function numberKeyListener(event: KeyboardEvent) {
+  // console.log(event);
+  if (!store.currentQuestion) return;
 
-      // tab 循环答题列表
-      if (event.key === "Tab") {
-        const idx = indexOfCurrentQuestion() as number;
-        if (idx >= 0 && store.currentTask) {
-          const len = store.currentTask.questionList.length;
-          chooseQuestion(store.currentTask.questionList[(idx + 1) % len]);
-          event.preventDefault();
-        }
-        return;
-      }
+  function indexOfCurrentQuestion() {
+    return store.currentTask?.questionList.findIndex(
+      (q) =>
+        q.mainNumber === store.currentQuestion?.mainNumber &&
+        q.subNumber === store.currentQuestion.subNumber
+    );
+  }
 
-      if (event.timeStamp - keyPressTimestamp > 1 * 1000) {
-        keys = [];
-      }
-      keyPressTimestamp = event.timeStamp;
-      keys.push(event.key);
-      if (isNaN(parseFloat(keys.join("")))) {
-        keys = [];
-      }
-      if (event.key === "Escape") {
-        keys = [];
-        store.currentScore = undefined;
-        store.currentSpecialTag = undefined;
-        return;
-      }
-      const score = parseFloat(keys.join(""));
-      if (isNumber(score) && questionScoreSteps.value.includes(score)) {
-        chooseScore(score);
-      }
+  // tab 循环答题列表
+  if (event.key === "Tab") {
+    const idx = indexOfCurrentQuestion() as number;
+    if (idx >= 0 && store.currentTask) {
+      const len = store.currentTask.questionList.length;
+      chooseQuestion(store.currentTask.questionList[(idx + 1) % len]);
+      event.preventDefault();
     }
+    return;
+  }
 
-    function submitListener(e: KeyboardEvent) {
-      if (import.meta.env.DEV && e.ctrlKey && e.key === "Enter") {
-        submit();
-      }
-    }
-    onMounted(() => {
-      document.addEventListener("keydown", numberKeyListener);
-      document.addEventListener("keydown", submitListener);
-    });
-    onUnmounted(() => {
-      document.removeEventListener("keydown", numberKeyListener);
-      document.removeEventListener("keydown", submitListener);
-    });
+  if (event.timeStamp - keyPressTimestamp > 1 * 1000) {
+    keys = [];
+  }
+  keyPressTimestamp = event.timeStamp;
+  keys.push(event.key);
+  if (isNaN(parseFloat(keys.join("")))) {
+    keys = [];
+  }
+  if (event.key === "Escape") {
+    keys = [];
+    store.currentScore = undefined;
+    store.currentSpecialTag = undefined;
+    return;
+  }
+  const score = parseFloat(keys.join(""));
+  if (isNumber(score) && questionScoreSteps.value.includes(score)) {
+    chooseScore(score);
+  }
+}
 
-    const collapseSideBar = () => {
-      store.setting.uiSetting["score.board.collapse"] =
-        !!!store.setting.uiSetting["score.board.collapse"];
-    };
+function submitListener(e: KeyboardEvent) {
+  if (import.meta.env.DEV && e.ctrlKey && e.key === "Enter") {
+    submit();
+  }
+}
+onMounted(() => {
+  document.addEventListener("keydown", numberKeyListener);
+  document.addEventListener("keydown", submitListener);
+});
+onUnmounted(() => {
+  document.removeEventListener("keydown", numberKeyListener);
+  document.removeEventListener("keydown", submitListener);
+});
 
-    const handleMouseOverWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.add("show-board");
-        }
-      }
-    };
+const handleMouseOverWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.add("show-board");
+    }
+  }
+};
 
-    const handleMouseOutWithBoard = () => {
-      if (store.setting.uiSetting["score.board.collapse"]) {
-        const container = document.querySelector(".mark-board-track-container");
-        if (container) {
-          container.classList.remove("show-board");
-        }
-      }
-    };
+const handleMouseOutWithBoard = () => {
+  if (store.setting.uiSetting["score.board.collapse"]) {
+    const container = document.querySelector(".mark-board-track-container");
+    if (container) {
+      container.classList.remove("show-board");
+    }
+  }
+};
 
-    function clearLatestMarkOfCurrentQuetion() {
-      if (!store.currentMarkResult || !store.currentQuestion) return;
+function clearLatestMarkOfCurrentQuetion() {
+  if (!store.currentMarkResult || !store.currentQuestion) return;
 
-      const ts = store.currentMarkResult?.trackList.filter(
-        (q) =>
-          q.mainNumber === store.currentQuestion?.mainNumber &&
-          q.subNumber === store.currentQuestion?.subNumber
-      );
-      if (ts.length === 0) {
-        return;
-      }
-      if (ts.length === 1) {
-        // 即将清除最后一条记录，置为0，因为watch trackList 算分要考虑不同模式的回评，无法自动
-        store.currentQuestion.score = null;
-      }
-      const maxNumber = Math.max(...ts.map((q) => q.number));
-      const idx = store.currentMarkResult.trackList.findIndex(
-        (q) =>
-          q.mainNumber === store.currentQuestion?.mainNumber &&
-          q.subNumber === store.currentQuestion?.subNumber &&
-          q.number === maxNumber
-      );
-      if (idx >= 0) {
-        store.removeScoreTracks = store.currentMarkResult.trackList.splice(
-          idx,
-          1
-        );
-      }
-    }
+  const ts = store.currentMarkResult?.trackList.filter(
+    (q) =>
+      q.mainNumber === store.currentQuestion?.mainNumber &&
+      q.subNumber === store.currentQuestion?.subNumber
+  );
+  if (ts.length === 0) {
+    return;
+  }
+  if (ts.length === 1) {
+    // 即将清除最后一条记录，置为0，因为watch trackList 算分要考虑不同模式的回评，无法自动
+    store.currentQuestion.score = null;
+  }
+  const maxNumber = Math.max(...ts.map((q) => q.number));
+  const idx = store.currentMarkResult.trackList.findIndex(
+    (q) =>
+      q.mainNumber === store.currentQuestion?.mainNumber &&
+      q.subNumber === store.currentQuestion?.subNumber &&
+      q.number === maxNumber
+  );
+  if (idx >= 0) {
+    store.removeScoreTracks = store.currentMarkResult.trackList.splice(idx, 1);
+  }
+}
 
-    function clearAllMarksOfCurrentQuetion() {
-      if (!store.currentMarkResult || !store.currentQuestion) return;
+function clearAllMarksOfCurrentQuetion() {
+  if (!store.currentMarkResult || !store.currentQuestion) return;
 
-      store.removeScoreTracks = store.currentMarkResult?.trackList.filter(
-        (q) =>
-          q.mainNumber === store.currentQuestion?.mainNumber &&
-          q.subNumber === store.currentQuestion?.subNumber
-      );
-      store.currentMarkResult.trackList =
-        store.currentMarkResult?.trackList.filter(
-          (q) =>
-            !(
-              q.mainNumber === store.currentQuestion?.mainNumber &&
-              q.subNumber === store.currentQuestion?.subNumber
-            )
-        );
-      store.currentQuestion.score = null;
-    }
+  store.removeScoreTracks = store.currentMarkResult?.trackList.filter(
+    (q) =>
+      q.mainNumber === store.currentQuestion?.mainNumber &&
+      q.subNumber === store.currentQuestion?.subNumber
+  );
+  store.currentMarkResult.trackList = store.currentMarkResult?.trackList.filter(
+    (q) =>
+      !(
+        q.mainNumber === store.currentQuestion?.mainNumber &&
+        q.subNumber === store.currentQuestion?.subNumber
+      )
+  );
+  store.currentQuestion.score = null;
+}
 
-    function submit() {
-      const errors: any = [];
-      store.currentTask?.questionList.forEach((question, index) => {
-        if (!isNumber(question.score)) {
-          errors.push({
-            question,
-            index,
-            error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
-          });
-        }
+function submit() {
+  const errors: any = [];
+  store.currentTask?.questionList.forEach((question, index) => {
+    if (!isNumber(question.score)) {
+      errors.push({
+        question,
+        index,
+        error: `${question.mainNumber}-${question.subNumber} 没有赋分不能提交。`,
       });
-      if (errors.length === 0) {
-        emit("submit");
-      } else {
-        console.log(errors);
-        message.error({
-          content: errors.map((e: any) => `${e.error}`).join("\n"),
-          duration: 10,
-        });
-      }
     }
-
-    return {
-      store,
-      isCurrentQuestion,
-      chooseQuestion,
-      isCurrentScore,
-      chooseScore,
-      questionScoreSteps,
-      clearLatestMarkOfCurrentQuetion,
-      clearAllMarksOfCurrentQuetion,
-      dragSpliter,
-      topPercent,
-      collapseSideBar,
-      handleMouseOverWithBoard,
-      handleMouseOutWithBoard,
-      submit,
-    };
-  },
-});
+  });
+  if (errors.length === 0) {
+    emit("submit");
+  } else {
+    console.log(errors);
+    message.error({
+      content: errors.map((e: any) => `${e.error}`).join("\n"),
+      duration: 10,
+    });
+  }
+}
 </script>
 
 <style scoped>

src/features/mark/MarkBody.vue

@@ -15,232 +15,204 @@
   </div>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  watch,
-  watchEffect,
-} from "vue";
+<script setup lang="ts">
+import { defineEmit, onMounted, onUnmounted, watch, watchEffect } from "vue";
 import { store } from "./store";
-import MarkDrawTrack from "./MarkDrawTrack.vue";
-import { ModeEnum, SliceImage, SpecialTag, Track } from "@/types";
-import { useTimers } from "@/setups/useTimers";
+import { ModeEnum } from "@/types";
+import type { SliceImage, SpecialTag, Track } from "@/types";
 import { isNumber } from "lodash";
 // @ts-ignore
 import CustomCursor from "custom-cursor.js";
 import CommonMarkBody from "./CommonMarkBody.vue";
 
-export default defineComponent({
-  name: "MarkBody",
-  components: { MarkDrawTrack, CommonMarkBody },
-  emits: ["error"],
-  setup(props, { emit }) {
-    const makeScoreTrack = (
-      event: MouseEvent,
-      item: SliceImage,
-      maxSliceWidth: number,
-      theFinalHeight: number
-    ) => {
-      // console.log(item);
-      if (!store.currentQuestion || typeof store.currentScore === "undefined")
-        return;
-      const target = event.target as HTMLImageElement;
-      const track = {} as Track;
-      track.mainNumber = store.currentQuestion?.mainNumber;
-      track.subNumber = store.currentQuestion?.subNumber;
-      track.score = store.currentScore;
-      track.offsetIndex = item.indexInSliceUrls;
-      track.offsetX = Math.round(
-        event.offsetX * (target.naturalWidth / target.width) + item.dx
-      );
-      track.offsetY = Math.round(
-        event.offsetY * (target.naturalHeight / target.height) + item.dy
-      );
-      track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-      track.positionY =
-        (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
-      if (track.offsetX > item.effectiveWidth + item.dx) {
-        console.log("不在有效宽度内，轨迹不生效");
-        return;
-      }
-      if (
-        item.trackList.some((t) => {
-          return (
-            Math.pow(Math.abs(t.offsetX - track.offsetX), 2) +
-              Math.pow(Math.abs(t.offsetY - track.offsetY), 2) <
-            500
-          );
-        })
-      ) {
-        console.log("两个轨迹相距过近");
-        return;
-      }
-      // 是否保留当前的轨迹分
-      const ifKeepScore =
-        Math.round(
-          store.currentQuestion.maxScore * 100 -
-            (store.currentQuestion.score || 0) * 100 -
-            store.currentScore * 2 * 100
-        ) / 100;
-      if (ifKeepScore < 0 && store.currentScore > 0) {
-        store.currentScore = undefined;
-      }
-      const markResult = store.currentMarkResult;
-      if (markResult) {
-        const maxNumber =
-          markResult.trackList.length === 0
-            ? 0
-            : Math.max(...markResult.trackList.map((t) => t.number));
-        track.number = maxNumber + 1;
-        // console.log(
-        //   maxNumber,
-        //   track.number,
-        //   markResult.trackList.map((t) => t.number),
-        //   Math.max(...markResult.trackList.map((t) => t.number))
-        // );
-        markResult.trackList = [...markResult.trackList, track];
-      }
-      item.trackList.push(track);
-    };
+const emit = defineEmit(["error", "allZeroSubmit"]);
 
-    const makeSpecialTagTrack = (
-      event: MouseEvent,
-      item: SliceImage,
-      maxSliceWidth: number,
-      theFinalHeight: number
-    ) => {
-      // console.log(item);
-      if (!store.currentTask || typeof store.currentSpecialTag === "undefined")
-        return;
-      const target = event.target as HTMLImageElement;
-      const track = {} as SpecialTag;
-      track.tagName = store.currentSpecialTag;
-      track.offsetIndex = item.indexInSliceUrls;
-      track.offsetX = Math.round(
-        event.offsetX * (target.naturalWidth / target.width) + item.dx
+const makeScoreTrack = (
+  event: MouseEvent,
+  item: SliceImage,
+  maxSliceWidth: number,
+  theFinalHeight: number
+) => {
+  // console.log(item);
+  if (!store.currentQuestion || typeof store.currentScore === "undefined")
+    return;
+  const target = event.target as HTMLImageElement;
+  const track = {} as Track;
+  track.mainNumber = store.currentQuestion?.mainNumber;
+  track.subNumber = store.currentQuestion?.subNumber;
+  track.score = store.currentScore;
+  track.offsetIndex = item.indexInSliceUrls;
+  track.offsetX = Math.round(
+    event.offsetX * (target.naturalWidth / target.width) + item.dx
+  );
+  track.offsetY = Math.round(
+    event.offsetY * (target.naturalHeight / target.height) + item.dy
+  );
+  track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
+  track.positionY =
+    (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
+  if (track.offsetX > item.effectiveWidth + item.dx) {
+    console.log("不在有效宽度内，轨迹不生效");
+    return;
+  }
+  if (
+    item.trackList.some((t) => {
+      return (
+        Math.pow(Math.abs(t.offsetX - track.offsetX), 2) +
+          Math.pow(Math.abs(t.offsetY - track.offsetY), 2) <
+        500
       );
-      track.offsetY = Math.round(
-        event.offsetY * (target.naturalHeight / target.height) + item.dy
+    })
+  ) {
+    console.log("两个轨迹相距过近");
+    return;
+  }
+  // 是否保留当前的轨迹分
+  const ifKeepScore =
+    Math.round(
+      store.currentQuestion.maxScore * 100 -
+        (store.currentQuestion.score || 0) * 100 -
+        store.currentScore * 2 * 100
+    ) / 100;
+  if (ifKeepScore < 0 && store.currentScore > 0) {
+    store.currentScore = undefined;
+  }
+  const markResult = store.currentMarkResult;
+  if (markResult) {
+    const maxNumber =
+      markResult.trackList.length === 0
+        ? 0
+        : Math.max(...markResult.trackList.map((t) => t.number));
+    track.number = maxNumber + 1;
+    // console.log(
+    //   maxNumber,
+    //   track.number,
+    //   markResult.trackList.map((t) => t.number),
+    //   Math.max(...markResult.trackList.map((t) => t.number))
+    // );
+    markResult.trackList = [...markResult.trackList, track];
+  }
+  item.trackList.push(track);
+};
+
+const makeSpecialTagTrack = (
+  event: MouseEvent,
+  item: SliceImage,
+  maxSliceWidth: number,
+  theFinalHeight: number
+) => {
+  // console.log(item);
+  if (!store.currentTask || typeof store.currentSpecialTag === "undefined")
+    return;
+  const target = event.target as HTMLImageElement;
+  const track = {} as SpecialTag;
+  track.tagName = store.currentSpecialTag;
+  track.offsetIndex = item.indexInSliceUrls;
+  track.offsetX = Math.round(
+    event.offsetX * (target.naturalWidth / target.width) + item.dx
+  );
+  track.offsetY = Math.round(
+    event.offsetY * (target.naturalHeight / target.height) + item.dy
+  );
+  track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
+  track.positionY =
+    (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
+  if (track.offsetX > item.effectiveWidth + item.dx) {
+    console.log("不在有效宽度内，轨迹不生效");
+    return;
+  }
+  if (
+    item.tagList.some((t) => {
+      return (
+        Math.pow(Math.abs(t.offsetX - track.offsetX), 2) +
+          Math.pow(Math.abs(t.offsetY - track.offsetY), 2) <
+        500
       );
-      track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-      track.positionY =
-        (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
-      if (track.offsetX > item.effectiveWidth + item.dx) {
-        console.log("不在有效宽度内，轨迹不生效");
-        return;
-      }
-      if (
-        item.tagList.some((t) => {
-          return (
-            Math.pow(Math.abs(t.offsetX - track.offsetX), 2) +
-              Math.pow(Math.abs(t.offsetY - track.offsetY), 2) <
-            500
-          );
-        })
-      ) {
-        console.log("两个轨迹相距过近");
-        return;
-      }
-      const markResult = store.currentMarkResult;
-      if (markResult) {
-        markResult.specialTagList.push(track);
-      }
-      item.tagList.push(track);
-    };
+    })
+  ) {
+    console.log("两个轨迹相距过近");
+    return;
+  }
+  const markResult = store.currentMarkResult;
+  if (markResult) {
+    markResult.specialTagList.push(track);
+  }
+  item.tagList.push(track);
+};
 
-    const makeTrack = (
-      event: MouseEvent,
-      item: SliceImage,
-      maxSliceWidth: number,
-      theFinalHeight: number
-    ) => {
-      if (
-        store.setting.uiSetting["specialTag.modal"] &&
-        store.currentSpecialTag
-      ) {
-        makeSpecialTagTrack(event, item, maxSliceWidth, theFinalHeight);
-      } else {
-        makeScoreTrack(event, item, maxSliceWidth, theFinalHeight);
-      }
-    };
+const makeTrack = (
+  event: MouseEvent,
+  item: SliceImage,
+  maxSliceWidth: number,
+  theFinalHeight: number
+) => {
+  if (store.setting.uiSetting["specialTag.modal"] && store.currentSpecialTag) {
+    makeSpecialTagTrack(event, item, maxSliceWidth, theFinalHeight);
+  } else {
+    makeScoreTrack(event, item, maxSliceWidth, theFinalHeight);
+  }
+};
 
-    // 轨迹模式下，添加轨迹，更新分数
-    watch(
-      () => store.currentMarkResult?.trackList,
-      () => {
-        if (store.setting.mode !== ModeEnum.TRACK) return;
-        const markResult = store.currentMarkResult;
-        if (markResult) {
-          const cq = store.currentQuestion;
-          // 当无轨迹时，不更新；无轨迹时，将分数置null
-          if (cq) {
-            if (markResult.trackList.length > 0) {
-              const cqTrackList = markResult.trackList.filter(
-                (v) =>
-                  v.mainNumber === cq.mainNumber && v.subNumber === cq.subNumber
-              );
-              if (cqTrackList.length > 0) {
-                cq.score =
-                  cqTrackList
-                    .map((v) => v.score)
-                    .reduce((acc, v) => (acc += Math.round(v * 100)), 0) / 100;
-              } else {
-                cq.score = null;
-              }
-            } else {
-              // TODO: 不需要？如果此行代码生效，则无法清除最后一道题的分数 此时的场景是回评普通模式评的分，需要看见
-              // cq.score = cq.__origScore;
-            }
+// 轨迹模式下，添加轨迹，更新分数
+watch(
+  () => store.currentMarkResult?.trackList,
+  () => {
+    if (store.setting.mode !== ModeEnum.TRACK) return;
+    const markResult = store.currentMarkResult;
+    if (markResult) {
+      const cq = store.currentQuestion;
+      // 当无轨迹时，不更新；无轨迹时，将分数置null
+      if (cq) {
+        if (markResult.trackList.length > 0) {
+          const cqTrackList = markResult.trackList.filter(
+            (v) =>
+              v.mainNumber === cq.mainNumber && v.subNumber === cq.subNumber
+          );
+          if (cqTrackList.length > 0) {
+            cq.score =
+              cqTrackList
+                .map((v) => v.score)
+                .reduce((acc, v) => (acc += Math.round(v * 100)), 0) / 100;
+          } else {
+            cq.score = null;
           }
-          // renderPaperAndMark();
+        } else {
+          // TODO: 不需要？如果此行代码生效，则无法清除最后一道题的分数 此时的场景是回评普通模式评的分，需要看见
+          // cq.score = cq.__origScore;
         }
-      },
-      { deep: true }
-    );
+      }
+      // renderPaperAndMark();
+    }
+  },
+  { deep: true }
+);
 
-    // question.score更新后，自动关联markResult.scoreList和markResult.markerScore
-    watchEffect(() => {
-      const markResult = store.currentMarkResult;
+// question.score更新后，自动关联markResult.scoreList和markResult.markerScore
+watchEffect(() => {
+  const markResult = store.currentMarkResult;
 
-      if (markResult && store.currentTask) {
-        const scoreList = store.currentTask.questionList.map((q) => q.score);
-        markResult.scoreList = [...(scoreList as number[])];
-        markResult.markerScore =
-          (markResult.scoreList.filter((s) => isNumber(s)) as number[]).reduce(
-            (acc, v) => (acc += Math.round(v * 100)),
-            0
-          ) / 100;
-      }
-    });
+  if (markResult && store.currentTask) {
+    const scoreList = store.currentTask.questionList.map((q) => q.score);
+    markResult.scoreList = [...(scoreList as number[])];
+    markResult.markerScore =
+      (markResult.scoreList.filter((s) => isNumber(s)) as number[]).reduce(
+        (acc, v) => (acc += Math.round(v * 100)),
+        0
+      ) / 100;
+  }
+});
 
-    watch(
-      () => store.setting.mode,
-      () => {
-        const shouldHide = store.setting.mode === ModeEnum.COMMON;
-        if (shouldHide) {
-          // console.log("hide cursor", theCursor);
-          theCursor && theCursor.destroy();
-        } else {
-          if (document.querySelector(".cursor")) {
-            // console.log("show cursor", theCursor);
-            // theCursor && theCursor.enable();
-            theCursor = new CustomCursor(".cursor", {
-              focusElements: [
-                {
-                  selector: ".mark-body-container",
-                  focusClass: "cursor--focused-view",
-                },
-              ],
-            }).initialize();
-          }
-        }
-      }
-    );
-    let theCursor = null as any;
-    onMounted(() => {
-      if (store.setting.mode === ModeEnum.TRACK) {
+watch(
+  () => store.setting.mode,
+  () => {
+    const shouldHide = store.setting.mode === ModeEnum.COMMON;
+    if (shouldHide) {
+      // console.log("hide cursor", theCursor);
+      theCursor && theCursor.destroy();
+    } else {
+      if (document.querySelector(".cursor")) {
+        // console.log("show cursor", theCursor);
+        // theCursor && theCursor.enable();
         theCursor = new CustomCursor(".cursor", {
           focusElements: [
             {
@@ -250,20 +222,25 @@ export default defineComponent({
           ],
         }).initialize();
       }
-    });
-
-    onUnmounted(() => {
-      theCursor && theCursor.destroy();
-    });
+    }
+  }
+);
+let theCursor = null as any;
+onMounted(() => {
+  if (store.setting.mode === ModeEnum.TRACK) {
+    theCursor = new CustomCursor(".cursor", {
+      focusElements: [
+        {
+          selector: ".mark-body-container",
+          focusClass: "cursor--focused-view",
+        },
+      ],
+    }).initialize();
+  }
+});
 
-    return {
-      store,
-      makeTrack,
-    };
-  },
-  // renderTriggered({ key, target, type }) {
-  //   console.log({ key, target, type });
-  // },
+onUnmounted(() => {
+  theCursor && theCursor.destroy();
 });
 </script>
 

src/features/mark/MarkChangeProfile.vue

@@ -36,7 +36,9 @@
     </a-form>
   </a-modal>
 </template>
+
 <script lang="ts">
+// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
 import { changeUserInfo, doLogout } from "@/api/markPage";
 import { message } from "ant-design-vue";
 import { ref, defineComponent, reactive, watchEffect } from "vue";

src/features/mark/MarkProblemDialog.vue

@@ -27,6 +27,7 @@
 </template>
 
 <script lang="ts">
+// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
 import { doProblemType, getStatus } from "@/api/markPage";
 import { message } from "ant-design-vue";
 import { ref, defineComponent } from "vue";

src/features/mark/MarkSwitchGroupDialog.vue

@@ -28,6 +28,7 @@
   </a-modal>
 </template>
 <script lang="ts">
+// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
 import { doSwitchGroup, getGroups } from "@/api/markPage";
 import { message } from "ant-design-vue";
 import { ref, defineComponent, onUpdated } from "vue";