feat: 添加异步导出功能，优化导出图片的下载流程

src/component/Canvas/CanvasEditor/index.vue

@@ -135,11 +135,9 @@ const lastSelectLayerId = ref(null); // 最后选择的图层ID
 // 当前选择的工具
 const activeTool = ref(CanvasConfig.defaultTool); // 默认工具
 
-
 //监听画布元素宽度是否发生变化
-let observer = null
-let observerTime = null//加入防抖
-
+let observer = null;
+let observerTime = null; //加入防抖
 
 // 管理器实例
 let canvasManager = null;
@@ -406,29 +404,49 @@ onMounted(async () => {
   nextTick(() => {
     // 确保所有依赖都已加载完成
     handleCanvasInit();
-    requestAnimationFrame(() => {
-      setTimeout(() => {
-        // 初始状态下生成所有预览图
-        canvasManager?.updateAllThumbnails?.();
-      }, 300);
-    });
+    setTimeout(() => {
+      // 初始状态下生成所有预览图
+      canvasManager?.updateAllThumbnails?.();
+    }, 700);
   });
-  
-	observer = new ResizeObserver(entries => {
-		for (let entry of entries) {
-			clearTimeout(observerTime)
-			observerTime = setTimeout(()=>{
-				nextTick(()=>{
-					handleWindowResize()
-				})
-			},100)
-			// const { width } = entry.contentRect;
-		}
-	});
-	observer.observe(canvasContainerRef.value);
+
+  let throttleTimeout = null;
+  let lastRunTime = 0;
+  let trailingTimeout = null;
+
+  observer = new ResizeObserver((entries) => {
+    const now = Date.now();
+    const throttleDelay = 100;
+
+    if (!throttleTimeout) {
+      // 立即执行一次
+      handleWindowResize();
+      layerManager?.updateLayersObjectsInteractivity?.();
+      setTimeout(() => {
+        layerManager?.updateLayersObjectsInteractivity?.();
+      });
+      lastRunTime = now;
+
+      throttleTimeout = setTimeout(() => {
+        throttleTimeout = null;
+      }, throttleDelay);
+    } else {
+      // 如果在节流期间有新的变化，则重置尾触发
+      clearTimeout(trailingTimeout);
+      trailingTimeout = setTimeout(() => {
+        handleWindowResize();
+        layerManager?.updateLayersObjectsInteractivity?.();
+        setTimeout(() => {
+          layerManager?.updateLayersObjectsInteractivity?.();
+        });
+        lastRunTime = Date.now();
+      }, throttleDelay);
+    }
+  });
+  observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
   // 只有当窗口大小变化时才更新画布尺寸
-//   window.addEventListener("resize", handleWindowResize);
+  //   window.addEventListener("resize", handleWindowResize);
 });
 
 watchEffect(() => {
@@ -472,15 +490,15 @@ onBeforeUnmount(() => {
   redGreenModeManager = null;
 
   // 移除window resize事件监听
-//   window.removeEventListener("resize", handleWindowResize);
-	observer.unobserve(canvasContainerRef.value);
+  //   window.removeEventListener("resize", handleWindowResize);
+  observer.unobserve(canvasContainerRef.value);
 });
 
 // 窗口大小变化处理函数
 function handleWindowResize() {
-	console.log(132)
+  console.log(132);
   // 使用requestAnimationFrame来防止频繁更新
-  requestAnimationFrame(() => {
+  setTimeout(() => {
     // 更新画布大小并自动居中所有元素
     updateCanvasSize();