more elegant message passing

package.json

@@ -18,6 +18,7 @@
     "custom-cursor.js": "1.3.6",
     "gsap": "^3.7.1",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.0",
     "moment": "^2.29.1",
     "tailwindcss": "^2.2.9",
     "ua-parser-js": "^0.7.28",
@@ -34,8 +35,8 @@
     "autoprefixer": "^10.3.3",
     "postcss": "^8.3.6",
     "typescript": "^4.3.5",
-    "vite": "^2.5.2",
     "unplugin-vue-components": "^0.14.0",
+    "vite": "^2.5.2",
     "vue-tsc": "^0.3.0"
   },
   "vetur": {

src/features/mark/Mark.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="my-container">
-    <mark-header @should-reload-history="shouldReloadFunc" />
+    <mark-header />
     <div class="tw-flex tw-gap-1">
-      <mark-history :should-reload="shouldReloadHistory" />
+      <mark-history />
       <mark-body @error="removeBrokenTask" />
       <mark-board-track
         v-if="showMarkBoardTrack"
@@ -71,6 +71,7 @@ import SheetViewModal from "./SheetViewModal.vue";
 import SpecialTagModal from "./SpecialTagModal.vue";
 import { preDrawImage } from "@/utils/utils";
 import { getJSON, getPaper } from "@/api/jsonMark";
+import EventBus from "@/plugins/eventBus";
 
 const { addInterval } = useTimers();
 
@@ -243,12 +244,6 @@ const removeBrokenTask = () => {
   }
 };
 
-const shouldReloadHistory = ref(0);
-
-const shouldReloadFunc = () => {
-  shouldReloadHistory.value = Date.now();
-};
-
 const allZeroSubmit = async () => {
   const markResult = store.currentMarkResult;
   if (!markResult) return;
@@ -291,7 +286,7 @@ const unselectiveSubmit = async () => {
       };
       removeSubmitedTask();
       if (store.historyOpen) {
-        shouldReloadFunc();
+        EventBus.emit("should-reload-history");
       }
       updateStatus();
     } else {
@@ -385,7 +380,7 @@ const saveTaskToServer = async () => {
       store.tasks.shift();
       store.currentTask = store.tasks[0];
     } else {
-      shouldReloadHistory.value = Date.now();
+      EventBus.emit("should-reload-history");
     }
   } else if (res.data.message) {
     console.log(res.data.message);

src/features/mark/MarkHeader.vue

@@ -323,10 +323,7 @@
   </div>
   <MarkChangeProfile ref="changeProfileRef" />
   <MarkSwitchGroupDialog ref="switchGroupRef" />
-  <MarkProblemDialog
-    @should-reload-history="$emit('should-reload-history')"
-    ref="problemRef"
-  />
+  <MarkProblemDialog ref="problemRef" />
 </template>
 
 <script setup lang="ts">
@@ -348,8 +345,6 @@ import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
 import gsap from "gsap";
 
-defineEmits(["should-reload-history"]);
-
 const modeName = computed(() =>
   store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
 );

src/features/mark/MarkHistory.vue

@@ -110,8 +110,7 @@ import {
   CaretUpOutlined,
 } from "@ant-design/icons-vue";
 import { cloneDeep } from "lodash";
-
-const props = defineProps<{ shouldReload: number }>();
+import EventBus from "@/plugins/eventBus";
 
 const secretNumberInput = ref("");
 const loading = ref(false);
@@ -149,52 +148,49 @@ const currentTaskChange = async () => {
 watch(() => store.historyOpen, currentTaskChange);
 watch([order, sort, currentPage], currentTaskChange);
 
-watch(
-  () => props.shouldReload,
-  async () => {
-    // await updateHistoryTask({
-    //   secretNumber: secretNumberInput.value,
-    //   order: order.value,
-    //   sort: sort.value,
-    //   pageNumber: currentPage.value,
-    // });
-    // // 提交后，渲染第一条
-    // replaceCurrentTask(store.historyTasks[0]);
-    store.globalMask = true;
-    try {
-      const res = await getHistoryTask({
-        secretNumber: store.currentTask?.secretNumber,
-      });
-      if (res.data) {
-        let data = cloneDeep(res.data) as Array<Task>;
-        data = data.map((t) => {
-          t.questionList.map((q) => {
-            q.__origScore = q.score;
-            return q;
-          });
-          t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
-          t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
-          t.jsonUrl = store.setting.fileServer + t.jsonUrl;
-
-          return t;
+EventBus.on("should-reload-history", async () => {
+  // await updateHistoryTask({
+  //   secretNumber: secretNumberInput.value,
+  //   order: order.value,
+  //   sort: sort.value,
+  //   pageNumber: currentPage.value,
+  // });
+  // // 提交后，渲染第一条
+  // replaceCurrentTask(store.historyTasks[0]);
+  store.globalMask = true;
+  try {
+    const res = await getHistoryTask({
+      secretNumber: store.currentTask?.secretNumber,
+    });
+    if (res.data) {
+      let data = cloneDeep(res.data) as Array<Task>;
+      data = data.map((t) => {
+        t.questionList.map((q) => {
+          q.__origScore = q.score;
+          return q;
         });
-        if (store.currentTask) {
-          const indexOfTasks = store.historyTasks.indexOf(store.currentTask);
-          if (data[0]) {
-            store.historyTasks.splice(indexOfTasks, 1, data[0]);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
-          } else {
-            // 问题卷会查找不到，这里直接删除此任务
-            store.historyTasks.splice(indexOfTasks, 1);
-            replaceCurrentTask(store.historyTasks[indexOfTasks]);
-          }
+        t.sliceUrls = t.sliceUrls?.map((s) => store.setting.fileServer + s);
+        t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
+        t.jsonUrl = store.setting.fileServer + t.jsonUrl;
+
+        return t;
+      });
+      if (store.currentTask) {
+        const indexOfTasks = store.historyTasks.indexOf(store.currentTask);
+        if (data[0]) {
+          store.historyTasks.splice(indexOfTasks, 1, data[0]);
+          replaceCurrentTask(store.historyTasks[indexOfTasks]);
+        } else {
+          // 问题卷会查找不到，这里直接删除此任务
+          store.historyTasks.splice(indexOfTasks, 1);
+          replaceCurrentTask(store.historyTasks[indexOfTasks]);
         }
       }
-    } finally {
-      store.globalMask = false;
     }
+  } finally {
+    store.globalMask = false;
   }
-);
+});
 
 async function updateHistoryTask({
   pageNumber = 1,

src/features/mark/MarkProblemDialog.vue

@@ -33,10 +33,10 @@ import { doProblemType, getStatus } from "@/api/markPage";
 import { message } from "ant-design-vue";
 import { ref, defineComponent } from "vue";
 import { removeCurrentMarkResult, store } from "./store";
+import EventBus from "@/plugins/eventBus";
 
 export default defineComponent({
   name: "MarkProblemDialog",
-  emits: ["should-reload-history"],
   setup(props, { emit }) {
     const visible = ref(false);
 
@@ -79,7 +79,7 @@ export default defineComponent({
           visible.value = false;
           removeSubmitedTask();
           if (store.historyOpen) {
-            emit("should-reload-history");
+            EventBus.emit("should-reload-history");
           }
           updateStatus();
         } else {

src/plugins/eventBus.ts

@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const EventBus = mitt();
+
+export default EventBus;

yarn.lock

@@ -1212,6 +1212,11 @@ minimist@^1.1.1, minimist@^1.2.0:
   resolved "https://registry.nlark.com/minimist/download/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.nlark.com/mitt/download/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha1-ae+b1cgP9vV0c+jYkybQHEFL4L0=
+
 modern-normalize@^1.1.0:
   version "1.1.0"
   resolved "https://registry.nlark.com/modern-normalize/download/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"