提取公共方法 toggleHistory

src/features/arbitrate/MarkHeader.vue

@@ -7,7 +7,7 @@
       v-if="!isSingleStudent"
       class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
       :class="[store.historyOpen && 'menu-toggled']"
-      @click="toggleHistory"
+      @click="store.toggleHistory"
     >
       <span title="回看" class="tw-inline-flex tw-place-content-center">
         <img
@@ -167,9 +167,6 @@ const {
   historyId: string;
 };
 
-const toggleHistory = () => {
-  store.historyOpen = !store.historyOpen;
-};
 async function updateClearTask() {
   await clearArbitrateTask(libraryId, subjectCode, groupNumber);
 }

src/features/library/inspect/MarkHeader.vue

@@ -7,7 +7,7 @@
       v-if="!isSingleStudent"
       class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
       :class="[store.historyOpen && 'menu-toggled']"
-      @click="toggleHistory"
+      @click="store.toggleHistory"
     >
       <span title="回看" class="tw-inline-flex tw-place-content-center">
         <img
@@ -112,9 +112,6 @@ const { subjectCode, groupNumber } = route.query as {
   groupNumber: string;
 };
 
-const toggleHistory = () => {
-  store.historyOpen = !store.historyOpen;
-};
 async function updateClearTask() {
   await clearInspectedTask(subjectCode, groupNumber);
 }

src/features/mark/MarkHeader.vue

@@ -6,7 +6,7 @@
     <div
       class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
       :class="[store.historyOpen && 'menu-toggled']"
-      @click="toggleHistory"
+      @click="store.toggleHistory"
     >
       <span title="回看" class="tw-inline-flex tw-place-content-center">
         <img
@@ -374,10 +374,6 @@ const progress = computed(() => {
   return p;
 });
 
-const toggleHistory = () => {
-  store.historyOpen = !store.historyOpen;
-};
-
 const toggleScoreBoard = () => {
   store.setting.uiSetting["score.board.collapse"] =
     !store.setting.uiSetting["score.board.collapse"];

src/features/student/importInspect/MarkHeader.vue

@@ -101,9 +101,6 @@ const { studentId, subjectCode } = route.query as {
   subjectCode: string;
 };
 
-const toggleHistory = () => {
-  store.historyOpen = !store.historyOpen;
-};
 async function updateClearTask() {
   await clearInspectedTask(studentId, subjectCode);
 }

src/features/student/inspect/MarkHeader.vue

@@ -7,7 +7,7 @@
       v-if="!isSingleStudent"
       class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
       :class="[store.historyOpen && 'menu-toggled']"
-      @click="toggleHistory"
+      @click="store.toggleHistory"
     >
       <span title="回看" class="tw-inline-flex tw-place-content-center">
         <img
@@ -110,9 +110,6 @@ const { studentId, subjectCode } = route.query as {
   subjectCode: string;
 };
 
-const toggleHistory = () => {
-  store.historyOpen = !store.historyOpen;
-};
 async function updateClearTask() {
   await clearInspectedTask(studentId, subjectCode);
 }

src/store/store.ts

@@ -70,7 +70,11 @@ export const useMarkStore = defineStore("mark", {
       return "";
     },
   },
-  actions: {},
+  actions: {
+    toggleHistory(): void {
+      this.historyOpen = !this.historyOpen;
+    },
+  },
 });
 
 export let store = null as unknown as ReturnType<typeof useMarkStore>;