fix: 修复多个已知问题

src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js

@@ -25,25 +25,27 @@ export class ThumbnailManager {
 
     // 延迟执行，避免阻塞UI
     fabricObjects.length > 0 &&
-      requestAnimationFrame(async () => {
-        const base64 = await this._generateLayerThumbnailNow(fabricObjects);
-        this.layerThumbnails.set(layerId, base64);
-        try {
-          const { layer, parent } = findLayerRecursively(
-            this.layers.value,
-            layerId
-          );
-          if (layer) {
-            layer.thumbnailUrl = base64; // 更新图层对象的缩略图
-          }
+      requestIdleCallback(() => {
+        setTimeout(async () => {
+          const base64 = await this._generateLayerThumbnailNow(fabricObjects);
+          this.layerThumbnails.set(layerId, base64);
+          try {
+            const { layer, parent } = findLayerRecursively(
+              this.layers.value,
+              layerId
+            );
+            if (layer) {
+              layer.thumbnailUrl = base64; // 更新图层对象的缩略图
+            }
 
-          if (parent) {
-            // 如果是组图层，则同步更新父图层的缩略图
-            this.generateLayerThumbnail(parent.id);
+            if (parent) {
+              // 如果是组图层，则同步更新父图层的缩略图
+              this.generateLayerThumbnail(parent.id);
+            }
+          } catch (error) {
+            console.error("生成图层缩略图时出错:", error);
           }
-        } catch (error) {
-          console.error("生成图层缩略图时出错:", error);
-        }
+        });
       });
   }
 
@@ -54,14 +56,17 @@ export class ThumbnailManager {
   generateAllLayerThumbnails(layers) {
     if (!layers || !Array.isArray(layers)) return;
 
-    // 使用requestAnimationFrame批量生成，避免阻塞主线程
-    layers.forEach((layer) => {
-      if (layer && layer.id) {
-        this.generateLayerThumbnail(layer.id);
-        if (layer.children && layer.children.length) {
-          this.generateLayerThumbnail(layer.id);
-        }
-      }
+    requestIdleCallback(() => {
+      setTimeout(() => {
+        layers.forEach((layer) => {
+          if (layer && layer.id) {
+            this.generateLayerThumbnail(layer.id);
+            if (layer.children && layer.children.length) {
+              this.generateLayerThumbnail(layer.id);
+            }
+          }
+        });
+      });
     });
   }
 
@@ -71,17 +76,22 @@ export class ThumbnailManager {
       console.warn("⚠️ 没有对象需要生成缩略图，返回默认缩略图");
       return this.defaultThumbnail;
     }
-    return await createRasterizedImage({
-      canvas: this.canvas, // 画布对象   必填
-      fabricObjects, // 要栅格化的对象列表  -  按顺序  必填
-      // maskObject = null, // 用于裁剪的对象  -  可选   // TODO: 后期看是否需要裁剪
-      trimWhitespace: true, // 是否裁剪空白区域
-      trimPadding: 2, // 裁剪边距
-      quality: 0.8, // 图像质量
-      format: "png", // 图像格式
-      scaleFactor: 1, //  高清倍数  - 默认是画布的高清倍数
-      isReturenDataURL: true, // 是否返回DataURL而不是fabric.Image对象
-    });
+    try {
+      return await createRasterizedImage({
+        canvas: this.canvas, // 画布对象   必填
+        fabricObjects, // 要栅格化的对象列表  -  按顺序  必填
+        // maskObject = null, // 用于裁剪的对象  -  可选   // TODO: 后期看是否需要裁剪
+        trimWhitespace: true, // 是否裁剪空白区域
+        trimPadding: 2, // 裁剪边距
+        quality: 0.2, // 图像质量
+        format: "png", // 图像格式
+        scaleFactor: 0.2, //  高清倍数  - 默认是画布的高清倍数
+        isReturenDataURL: true, // 是否返回DataURL而不是fabric.Image对象
+        isThumbnail: true, // 为缩略图
+      });
+    } catch (error) {
+      return this.defaultThumbnail; // 出错时返回默认缩略图
+    }
   }
 
   /**