避免事先加载影响效率

src/features/mark/SheetViewModal.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, watchEffect } from "vue";
+import { defineComponent, reactive, ref, watch } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 import { loadImage } from "@/utils/utils";
@@ -46,36 +46,42 @@ export default defineComponent({
   emits: ["close"],
   setup() {
     const dataUrls: Array<string> = reactive([]);
-    watchEffect(async () => {
-      const urls =
-        store.currentTask?.sheetUrls.map((s) => store.setting.fileServer + s) ??
-        [];
-      const images = [];
-      for (const url of urls) {
-        images.push(await loadImage(url));
-      }
+    watch(
+      () => store.sheetViewModal,
+      async () => {
+        if (!store.sheetViewModal) return;
+        dataUrls.splice(0);
+        const urls =
+          store.currentTask?.sheetUrls.map(
+            (s) => store.setting.fileServer + s
+          ) ?? [];
+        const images = [];
+        for (const url of urls) {
+          images.push(await loadImage(url));
+        }
 
-      const sheetConfig = store.setting.sheetConfig;
+        const sheetConfig = store.setting.sheetConfig;
 
-      for (let i = 0; i < images.length; i++) {
-        if (sheetConfig.length === 0) {
-          dataUrls.push(
-            getDataUrlForSheetConfig(
-              images[i],
-              i % 2 === 0
-                ? [
-                    // 通过-1来标记该用默认遮盖规则
-                    { i: -1, x: 0, y: 0, w: 0, h: 0 },
-                  ]
-                : []
-            )
-          );
-        } else {
-          const scs = sheetConfig.filter((s) => s.i - 1 === i);
-          dataUrls.push(getDataUrlForSheetConfig(images[i], scs));
+        for (let i = 0; i < images.length; i++) {
+          if (sheetConfig.length === 0) {
+            dataUrls.push(
+              getDataUrlForSheetConfig(
+                images[i],
+                i % 2 === 0
+                  ? [
+                      // 通过-1来标记该用默认遮盖规则
+                      { i: -1, x: 0, y: 0, w: 0, h: 0 },
+                    ]
+                  : []
+              )
+            );
+          } else {
+            const scs = sheetConfig.filter((s) => s.i - 1 === i);
+            dataUrls.push(getDataUrlForSheetConfig(images[i], scs));
+          }
         }
       }
-    });
+    );
 
     const checkedIndex = ref(0);
 
@@ -83,7 +89,7 @@ export default defineComponent({
   },
 });
 
-export function getDataUrlForSheetConfig(
+function getDataUrlForSheetConfig(
   image: HTMLImageElement,
   sliceConfigs: Array<PictureSlice>
 ) {