fix(web): design1/2 缩略图与 design2 设为背景交互修复

- design1：预览/最近文件缩略图按 background 边界截取，去掉多余白盘
- design2：设为背景贴齐 1012x648 卡框，保存/打开保留用户背景 src
- design2：列表可选中锁定对象并加载完整属性，缩略图叠加 front_bg 模板
- design2：固定卡框锚点，避免选中背景时标尺/蒙版随属性面板漂移

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend-web/js/common/cloud-files.js

@@ -77,9 +77,66 @@
     return soonEnsureSoonExt(soonSessionSlug(keyOrName));
   }
 
+  /** 缩略图截取框：对齐 background_image 设计边界（design1 光盘外接方 / design2 卡面） */
+  function soonResolveSavePreviewCrop(canvas) {
+    if (!canvas) return null;
+    var bg = null;
+    if (typeof window !== 'undefined' && window.canvas1 === canvas && window.background_image1) {
+      bg = window.background_image1;
+    }
+    if (!bg && typeof canvas.getObjects === 'function') {
+      var objs = canvas.getObjects();
+      if (objs.length && objs[0] && objs[0].type === 'image') bg = objs[0];
+    }
+    if (!bg || !bg.width || !bg.height) return null;
+    var sx = bg.scaleX == null ? 1 : bg.scaleX;
+    var sy = bg.scaleY == null ? 1 : bg.scaleY;
+    var cw = canvas.width || 0;
+    var ch = canvas.height || 0;
+    var w;
+    var h;
+    var left = bg.left;
+    var top = bg.top;
+    w = bg.width * sx;
+    h = bg.height * sy;
+    if (!(w > 0 && h > 0)) return null;
+    if (cw > 0 && ch > 0) {
+      var x1 = Math.max(0, left);
+      var y1 = Math.max(0, top);
+      var x2 = Math.min(cw, left + w);
+      var y2 = Math.min(ch, top + h);
+      w = x2 - x1;
+      h = y2 - y1;
+      if (w <= 0 || h <= 0) return null;
+      left = x1;
+      top = y1;
+    }
+    return { left: left, top: top, width: w, height: h };
+  }
+
+  function soonIsDesign2SaveCanvas(canvas) {
+    return !!(typeof window.soonBuildDesign2SavePreviewPic === 'function'
+      && window.canvas1 && canvas === window.canvas1);
+  }
+
+  function soonIsDesign1SaveCanvas(canvas) {
+    return !!(typeof window.soonBuildDesign1SavePreviewPic === 'function'
+      && window.canvas1 && canvas === window.canvas1);
+  }
+
   function soonBuildSavePreviewPic(canvas) {
     var THUMB_MAX = 102400;
     if (!canvas || typeof canvas.getObjects !== 'function') return '';
+    if (soonIsDesign2SaveCanvas(canvas)) {
+      var d2Pic = window.soonBuildDesign2SavePreviewPic(canvas);
+      if (d2Pic) return d2Pic;
+      return '';
+    }
+    if (soonIsDesign1SaveCanvas(canvas)) {
+      var d1Pic = window.soonBuildDesign1SavePreviewPic(canvas);
+      if (d1Pic) return d1Pic;
+      return '';
+    }
     var hidden = [];
     canvas.getObjects().forEach(function (obj) {
       if (obj.isGuideLine) {
@@ -88,24 +145,28 @@
       }
     });
     if (hidden.length) canvas.renderAll();
-    window._soonSkipDesign1CdMask = true;
-    var mult = 0.18;
+    var crop = soonResolveSavePreviewCrop(canvas);
+    var mult = crop ? 0.28 : 0.18;
     var quality = 0.72;
     var url = '';
-    try {
-      for (var i = 0; i < 3; i++) {
-        try {
-          var candidate = canvas.toDataURL({ format: 'jpeg', quality: quality, multiplier: mult });
-          if (candidate && candidate.indexOf('data:image/') === 0 && candidate.length <= THUMB_MAX) {
-            url = candidate;
-            break;
-          }
-        } catch (e) { /* ignore */ }
-        quality -= 0.18;
-        mult -= 0.04;
-      }
-    } finally {
-      window._soonSkipDesign1CdMask = false;
+    for (var i = 0; i < 3; i++) {
+      try {
+        var opts = { format: 'jpeg', quality: quality, multiplier: mult };
+        if (crop) {
+          opts.left = crop.left;
+          opts.top = crop.top;
+          opts.width = crop.width;
+          opts.height = crop.height;
+        }
+        canvas.renderAll();
+        var candidate = canvas.toDataURL(opts);
+        if (candidate && candidate.indexOf('data:image/') === 0 && candidate.length <= THUMB_MAX) {
+          url = candidate;
+          break;
+        }
+      } catch (e) { /* ignore */ }
+      quality -= 0.18;
+      mult -= 0.04;
     }
     hidden.forEach(function (obj) { obj.visible = true; });
     canvas.renderAll();