全局遮罩层UI

src/App.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { NConfigProvider, NMessageProvider, useMessage } from "naive-ui";
 import { zhCN, dateZhCN } from "naive-ui";
-import { defineComponent } from "vue";
+import { defineComponent, watch, watchEffect } from "vue";
+import { store } from "./store/store";
+
+let spinning = $ref(false);
+
+setTimeout(() => {
+  watch(
+    () => store?.hasGlobalMask,
+    () => (spinning = store?.hasGlobalMask)
+  );
+});
 
 const DummyComp = defineComponent({
   setup() {
@@ -12,6 +22,11 @@ const DummyComp = defineComponent({
     return null;
   },
 });
+
+watchEffect(() => {
+  const bodyScrollProp = spinning ? "hidden" : "auto";
+  document.body.style.overflow = bodyScrollProp;
+});
 </script>
 
 <template>
@@ -21,6 +36,12 @@ const DummyComp = defineComponent({
       <DummyComp />
     </n-config-provider>
   </n-message-provider>
+  <div
+    v-if="spinning"
+    style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh"
+  >
+    <n-spin :show="spinning" size="large" class="global-mask fade-in"> </n-spin>
+  </div>
 </template>
 
 <style>
@@ -32,4 +53,37 @@ const DummyComp = defineComponent({
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.global-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
+  min-width: var(--app-min-width);
+  overflow: hidden;
+  display: flex;
+  place-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 6000;
+}
+.fade-in {
+  opacity: 0;
+  animation-name: fadeInOpacity;
+  animation-delay: 1.5s;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 5s;
+}
+
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
 </style>

src/store/store.ts

@@ -46,7 +46,7 @@ export const useStore = defineStore("ecs", {
     },
     /** 减少当前的globalMaskCount */
     decreaseGlobalMaskCount(byWho: string) {
-      store.globalMaskCount++;
+      store.globalMaskCount--;
       console.debug(byWho, "decreaseGlobalMaskCount", store.globalMaskCount);
       if (store.globalMaskCount < 0) {
         console.error("store.globalMaskCount < 0");
@@ -62,7 +62,12 @@ void Promise.resolve(0).then(() => {
   store = useStore();
 
   store.$subscribe((_mutation, state) => {
-    sessionStorage.setItem("ecs", JSON.stringify(state));
+    sessionStorage.setItem(
+      "ecs",
+      JSON.stringify(
+        Object.assign(JSON.parse(JSON.stringify(state)), { globalMaskCount: 0 })
+      )
+    );
   });
   const cachedState = JSON.parse(sessionStorage.getItem("ecs") || "0");
   cachedState && (store.$state = cachedState);