抽象 isScoreBoardCollapsed

src/features/arbitrate/MarkHeader.vue

@@ -116,9 +116,7 @@
         menu
       "
       :class="[
-        !store.setting.uiSetting['score.board.collapse'] &&
-          store.currentTask &&
-          'menu-toggled',
+        store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
       ]"
       @click="store.toggleScoreBoard"
     >
@@ -128,15 +126,11 @@
       >
         <img
           src="../mark/images/right-menu.svg"
-          :class="[
-            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-          ]"
+          :class="[store.isScoreBoardVisible && 'svg-red']"
         />
       </span>
       <div
-        v-if="
-          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
-        "
+        v-if="store.isScoreBoardVisible && store.currentTask"
         class="triangle"
       ></div>
     </div>

src/features/library/inspect/MarkBoardInspect.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
       <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">

src/features/library/inspect/MarkHeader.vue

@@ -69,9 +69,7 @@
         menu
       "
       :class="[
-        !store.setting.uiSetting['score.board.collapse'] &&
-          store.currentTask &&
-          'menu-toggled',
+        store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
       ]"
       @click="store.toggleScoreBoard"
     >
@@ -81,15 +79,11 @@
       >
         <img
           src="../../mark/images/right-menu.svg"
-          :class="[
-            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-          ]"
+          :class="[store.isScoreBoardVisible && 'svg-red']"
         />
       </span>
       <div
-        v-if="
-          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
-        "
+        v-if="store.isScoreBoardVisible && store.currentTask"
         class="triangle"
       ></div>
     </div>

src/features/mark/CommonMarkBody.vue

@@ -80,7 +80,7 @@ import ZoomPaper from "@/components/ZoomPaper.vue";
 const props = defineProps<{
   useMarkResult?: boolean;
   makeTrack: Function;
-  store: MarkStore; // 实际上不是同一个store!!! 最新的统一成一个相同的store了. 停止使用，看是否无影响。
+  store: MarkStore; // 以前不是一个类型的store，现在变成一样的了，所以这个可以删掉了，并且可以优化这个组件的使用
 }>();
 
 const emit = defineEmits(["error"]);
@@ -147,19 +147,6 @@ let sliceImagesWithTrackList: Array<SliceImage> = reactive([]);
 let maxSliceWidth = 0; // 最大的裁切块宽度，图片容器以此为准
 let theFinalHeight = 0; // 最终宽度，用来定位轨迹在第几张图片，不包括image-seperator高度
 
-async function getImageUsingDataUrl(
-  dataUrl: string
-): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.src = dataUrl;
-    image.onload = function () {
-      resolve(image);
-    };
-    image.onerror = reject;
-  });
-}
-
 async function processSliceConfig() {
   let markResult = store.currentTask?.markResult as MarkResult;
   if (useMarkResult) {
@@ -229,7 +216,7 @@ async function processSliceConfig() {
       (t) => t.offsetIndex === indexInSliceUrls
     );
 
-    const sliceImageRendered = await getImageUsingDataUrl(dataUrl!);
+    const sliceImageRendered = await loadImage(dataUrl!);
     tempSliceImagesWithTrackList.push({
       url: dataUrl!,
       indexInSliceUrls: sliceConfig.i,
@@ -360,7 +347,7 @@ async function processSplitConfig() {
       const thisImageTagList = tagLists.filter(
         (t) => t.offsetIndex === indexInSliceUrls
       );
-      const sliceImageRendered = await getImageUsingDataUrl(dataUrl!);
+      const sliceImageRendered = await loadImage(dataUrl!);
       tempSliceImagesWithTrackList.push({
         url: dataUrl!,
         indexInSliceUrls: store.currentTask.sliceUrls.indexOf(url) + 1,

src/features/mark/MarkBoardKeyBoard.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div class="tw-my-2 tw-flex">
       <a-dropdown class="tw-self-end">

src/features/mark/MarkBoardMouse.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div class="tw-my-2 tw-flex">
       <a-dropdown class="tw-self-end">

src/features/mark/MarkBoardTrack.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div
       class="

src/features/mark/MarkHeader.vue

@@ -298,9 +298,7 @@
       <div
         class="tw-flex tw-place-content-center tw-cursor-pointer menu"
         :class="[
-          !store.setting.uiSetting['score.board.collapse'] &&
-            store.currentTask &&
-            'menu-toggled',
+          store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
         ]"
         @click="store.toggleScoreBoard"
       >
@@ -310,16 +308,11 @@
         >
           <img
             src="./images/right-menu.svg"
-            :class="[
-              !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-            ]"
+            :class="[store.isScoreBoardVisible && 'svg-red']"
           />
         </span>
         <div
-          v-if="
-            !store.setting.uiSetting['score.board.collapse'] &&
-            store.currentTask
-          "
+          v-if="store.isScoreBoardVisible && store.currentTask"
           class="triangle"
         ></div>
       </div>

src/features/student/importInspect/MarkBoardInspect.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
       <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">

src/features/student/importInspect/MarkHeader.vue

@@ -58,9 +58,7 @@
         menu
       "
       :class="[
-        !store.setting.uiSetting['score.board.collapse'] &&
-          store.currentTask &&
-          'menu-toggled',
+        store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
       ]"
       @click="store.toggleScoreBoard"
     >
@@ -70,15 +68,11 @@
       >
         <img
           src="../../mark/images/right-menu.svg"
-          :class="[
-            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-          ]"
+          :class="[store.isScoreBoardVisible && 'svg-red']"
         />
       </span>
       <div
-        v-if="
-          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
-        "
+        v-if="store.isScoreBoardVisible && store.currentTask"
         class="triangle"
       ></div>
     </div>

src/features/student/inspect/MarkBoardInspect.vue

@@ -2,7 +2,7 @@
   <div
     v-if="store.currentTask"
     class="mark-board-track-container"
-    :class="[store.setting.uiSetting['score.board.collapse'] ? 'hide' : 'show']"
+    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
   >
     <div class="top-container tw-flex-shrink-0 tw-flex tw-items-center">
       <div class="tw-flex tw-flex-col tw-flex-1 tw-text-center">

src/features/student/inspect/MarkHeader.vue

@@ -67,9 +67,7 @@
         menu
       "
       :class="[
-        !store.setting.uiSetting['score.board.collapse'] &&
-          store.currentTask &&
-          'menu-toggled',
+        store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
       ]"
       @click="store.toggleScoreBoard"
     >
@@ -79,15 +77,11 @@
       >
         <img
           src="../../mark/images/right-menu.svg"
-          :class="[
-            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
-          ]"
+          :class="[store.isScoreBoardVisible && 'svg-red']"
         />
       </span>
       <div
-        v-if="
-          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
-        "
+        v-if="store.isScoreBoardVisible && store.currentTask"
         class="triangle"
       ></div>
     </div>

src/store/store.ts

@@ -87,6 +87,12 @@ export const useMarkStore = defineStore("mark", {
         store.setting.uiSetting["normal.mode"] === "mouse"
       );
     },
+    isScoreBoardCollapsed(): boolean {
+      return store.setting.uiSetting["score.board.collapse"];
+    },
+    isScoreBoardVisible(): boolean {
+      return !store.setting.uiSetting["score.board.collapse"];
+    },
   },
   actions: {
     initSetting(adminPageSetting: AdminPageSetting): void {
@@ -96,6 +102,7 @@ export const useMarkStore = defineStore("mark", {
           "answer.paper.scale": 1,
           "score.board.collapse": false,
           "normal.mode": "keyboard",
+          "score.fontSize.scale": 1,
         } as Setting["uiSetting"],
       });
       const fileServer = this.setting.fileServer;