全局遮盖

src/App.vue

@@ -1,9 +1,30 @@
 <template>
-  <router-view />
+  <router-view> </router-view>
+  <!-- z-index: 10000; -->
+  <a-spin
+    v-if="spinning"
+    size="large"
+    :spinning="spinning"
+    :delay="32"
+    style="
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      width: 100vw;
+      display: flex;
+      place-content: center;
+      align-items: center;
+    "
+    :style="
+      spinning && { zIndex: 10000, backgroundColor: 'grey', opacity: 0.7 }
+    "
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref, watch } from "vue";
+import { store } from "./features/mark/store";
 // import TestStatus from "./test/TestStatus.vue";
 // import TestSetting from "./test/TestSetting.vue";
 // import TestStore from "./test/TestStore.vue";
@@ -15,9 +36,16 @@ export default defineComponent({
   //   TestSetting,
   //   TestStore,
   // },
-  // setup() {
-  //   console.log("inside App.vue setup");
-  // },
+  setup() {
+    const spinning = ref(false);
+
+    watch(
+      () => store.globalMask,
+      () => (spinning.value = store.globalMask)
+    );
+
+    return { spinning };
+  },
   // beforeCreate() {
   //   console.log("App.vue beforeCreate");
   // },
@@ -30,9 +58,9 @@ export default defineComponent({
   // mounted() {
   //   console.log("App.vue mounted");
   // },
-  updated() {
-    console.log("App.vue updated");
-  },
+  // updated() {
+  //   console.log("App.vue updated");
+  // },
 });
 </script>
 

src/api/markPage.ts

@@ -80,7 +80,7 @@ export async function saveTask() {
     // @ts-ignore
     markResult.__previous = undefined;
 
-    return httpApp.post("/mark/saveTask", markResult);
+    return httpApp.post("/mark/saveTask", markResult, { setGlobalMask: true });
   }
 }
 

src/features/mark/store.ts

@@ -51,6 +51,7 @@ const obj = {
   minimapScrollTo: 0,
   allPaperModal: false,
   sheetViewModal: false,
+  globalMask: false,
 } as MarkStore;
 
 /** 如果currentTask不存在，则返回undefined; 如果currentMarkResult不存在，则创建一个对应的markResult并返回 */

src/plugins/axiosApp.ts

@@ -7,6 +7,7 @@ import cachingGet from "./axiosCache";
 import { notifyInvalidTokenThrottled } from "./axiosNotice";
 import axiosRetry from "axios-retry";
 import { message } from "ant-design-vue";
+import { store } from "@/features/mark/store";
 
 const config = {
   // baseURL: process.env.baseURL || process.env.apiUrl || ""
@@ -20,9 +21,15 @@ axiosRetry(_axiosApp);
 
 _axiosApp.interceptors.request.use(
   function (config) {
+    if (config.setGlobalMask) {
+      store.globalMask = true;
+    }
     return config;
   },
   function (error) {
+    if (error.config.setGlobalMask) {
+      store.globalMask = false;
+    }
     message.error({ content: error, duration: 10 });
     console.log(error);
     return Promise.reject(error);
@@ -32,9 +39,15 @@ _axiosApp.interceptors.request.use(
 // Add a response interceptor
 _axiosApp.interceptors.response.use(
   (response) => {
+    if (response.config.setGlobalMask) {
+      store.globalMask = false;
+    }
     return response;
   },
   (error) => {
+    if (error.config.setGlobalMask) {
+      store.globalMask = false;
+    }
     const showErrorMessage = !error.config?.noErrorMessage;
     if (!error.response) {
       if (showErrorMessage) {

src/types/global.d.ts

@@ -13,3 +13,10 @@ declare module "@vue/runtime-core" {
     // $notification: typeof notification;
   }
 }
+
+declare module "axios/index" {
+  interface AxiosRequestConfig {
+    noErrorMessage?: boolean | false;
+    setGlobalMask?: boolean | false;
+  }
+}

src/types/index.ts

@@ -25,6 +25,7 @@ export interface MarkStore {
   minimapScrollTo: number; // 高度的百分比
   allPaperModal: boolean; // 是否显示全卷
   sheetViewModal: boolean; // 是否显示原卷
+  globalMask: boolean; // 是否全局遮盖
 }
 
 export interface Setting {