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

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

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

frontend-web/js/design2/ui.js

@@ -365,6 +365,8 @@ $('#version_change').click(function () {
         if (typeof window.soonDesign2ScaleBgSources === 'function') {
             window.soonDesign2ScaleBgSources()
         }
+        canvas1.requestRenderAll()
+        canvas2.requestRenderAll()
     }
     sf.onerror = sf.onload
     sf.src = soonAsset('front_bg' + bg_version + '_2.png')
@@ -785,62 +787,38 @@ $('#down_obj').click(function () {
     }
 })
 $('#set_bg').click(function () {
-    //设置为背景
     let obj = canvas.getActiveObject()
-    let idx = getIndex(canvas.getActiveObject())
-    const scaleX = 1012 / obj.width
-    const scaleY = 648 / obj.height
-    // 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
-    const scaledWidth = obj.width * scaleX;
-    const scaledHeight = obj.height * scaleY;
-    obj.set({
-        scaleX: scaleX,
-        scaleY: scaleY,
-        left: ($('#canvas1').width() - scaledWidth) / 2,
-        top: ($('#canvas1').height() - scaledHeight) / 2
-    })
-    $('#text_w').val(1012)
-    $('#text_h').val(648)
-    $('#text_x').val(0)
-    $('#text_y').val(0)
-    // 设为背景时，锁定所有编辑操作，并设置为不可选中
-    obj.set({
-        lockMovementX: true,
-        lockMovementY: true,
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        lockSkewingX: true,
-        lockSkewingY: true,
-        selectable: false,
-        evented: false
-    });
+    let idx = getIndex(obj)
+    var oldBg = background_image1 || background_image
+    var frame = typeof window.soonDesign2FrameOrigin === 'function'
+        ? window.soonDesign2FrameOrigin(canvas)
+        : { left: oldBg.left, top: oldBg.top }
+    if (typeof window.soonDesign2SnapImageToCardFrame === 'function') {
+        window.soonDesign2SnapImageToCardFrame(obj, canvas, frame)
+    }
+    var card = typeof window.soonDesign2CardSize === 'function'
+        ? window.soonDesign2CardSize()
+        : { w: 1012, h: 648 }
+    window._soonSyncingFontControls = true;
+    try {
+        $('#text_w').val(card.w)
+        $('#text_h').val(card.h)
+        $('#text_x').val(0)
+        $('#text_y').val(0)
+    } finally {
+        window._soonSyncingFontControls = false;
+    }
+    if (typeof window.soonDesign2LockBgObject === 'function') {
+        window.soonDesign2LockBgObject(obj)
+    }
     $("#lock_img").attr("src", soonAsset("lock20.png"))
-    canvas.sendToBack(canvas.getActiveObject())
-    canvas.bringForward(canvas.getActiveObject())
+    if (typeof window.soonDesign2ApplyUserBgAsCanvas0 === 'function') {
+        window.soonDesign2ApplyUserBgAsCanvas0(obj, canvas, oldBg)
+    }
     canvas.renderAll()
     let objItem = objs.splice(idx - 1, 1)[0]
     objs.unshift(objItem)
 
-    // 确保背景图（索引0）的锁定属性被正确设置
-    setTimeout(() => {
-        let bgObj = canvas.getObjects()[0];
-        if (bgObj) {
-            bgObj.set({
-                lockMovementX: true,
-                lockMovementY: true,
-                lockRotation: true,
-                lockScalingX: true,
-                lockScalingY: true,
-                lockSkewingX: true,
-                lockSkewingY: true,
-                selectable: false,
-                evented: false
-            });
-            canvas.renderAll();
-        }
-    }, 100);
-
     recordState()
     if (typeof window.updateList === 'function') {
         window.updateList();
@@ -1385,23 +1363,6 @@ function selectObject(target, index) {
     $('#base_control').show()
     //$("#text_x").val((target.left - background_image.left).toFixed(1));
 }
-function updateControls() {
-    // 检查是否有选中对象，如果没有则直接返回
-    if (!canvas || !canvas.getActiveObject()) return;
-
-    const activeObj = canvas.getActiveObject();
-    $('#text_r').val(activeObj.get('angle').toFixed(0))
-    $('#text_x').val((activeObj.get('left') - background_image.left).toFixed(0))
-    $('#text_y').val((activeObj.get('top') - background_image.top).toFixed(0))
-    $('#text_h').val((activeObj.get('scaleY') * activeObj.get('height')).toFixed(0))
-    $('#text_w').val((activeObj.get('scaleX') * activeObj.get('width')).toFixed(0))
-    // 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
-    if (activeObj.get('lockMovementX')) {
-        $('#lock_img').attr('src', soonAsset('lock20.png')) //已锁定
-    } else {
-        $('#lock_img').attr('src', soonAsset('unlock20.png')) //未锁定
-    }
-}
 function checkName(name) {
     //检查字段名是否重复了
     for (let item of objs1) {
@@ -1444,8 +1405,8 @@ function selectPic(target, index) {
 
     let activeObj = canvas.getActiveObject();
 
-    // 检查对象是否被锁定
-    if (isObjectLocked(activeObj)) {
+    // 列表选中时允许锁定对象保持选中；画布点击仍不可选
+    if (!window._selectingFromList && isObjectLocked(activeObj)) {
         canvas.discardActiveObject();
         canvas.renderAll();
         return;
@@ -2092,6 +2053,8 @@ function getCoordsMaxY(acoords) {
 }
 
 $('#text_y').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     if ($('#text_y').val() == '') {
         $('#text_y').val(0)
     }
@@ -2104,6 +2067,8 @@ $('#text_y').bind('input propertychange', function () {
     recordState()
 })
 $('#text_x').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     if ($('#text_x').val() == '') {
         $('#text_x').val(0)
     }
@@ -2116,11 +2081,17 @@ $('#text_x').bind('input propertychange', function () {
     recordState()
 })
 $('#text_w').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     let val = '0'
     if ($('#text_w').val() != '') {
         val = $('#text_w').val()
     }
-    let type = objs[getIndex(canvas.getActiveObject()) - 1].type
+    var metaIdx = typeof window.soonDesign2ResolveObjMetaIndex === 'function'
+        ? window.soonDesign2ResolveObjMetaIndex(canvas.getActiveObject(), canvas)
+        : getIndex(canvas.getActiveObject()) - 1;
+    if (metaIdx < 0 || !objs[metaIdx]) return;
+    let type = objs[metaIdx].type
     if (type == 3 || type == 4) {
         canvas.getActiveObject().set('width', parseInt(val))
     } else {
@@ -2131,8 +2102,13 @@ $('#text_w').bind('input propertychange', function () {
     recordState()
 })
 $('#text_h').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
+    if (typeof window.soonDesign2ActiveIsAnchorBg === 'function' && window.soonDesign2ActiveIsAnchorBg()) return;
     let idx = getIndex(canvas.getActiveObject())
-    if (objs[idx - 1].type == 7) {
+    var metaIdx = typeof window.soonDesign2ResolveObjMetaIndex === 'function'
+        ? window.soonDesign2ResolveObjMetaIndex(canvas.getActiveObject(), canvas)
+        : idx - 1;
+    if (metaIdx >= 0 && objs[metaIdx] && objs[metaIdx].type == 7) {
         if ($('#text_h').val() == '') {
             $('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
         }
@@ -2144,7 +2120,8 @@ $('#text_h').bind('input propertychange', function () {
     if ($('#text_h').val() != '') {
         val = $('#text_h').val()
     }
-    let type = objs[getIndex(canvas.getActiveObject()) - 1].type
+    if (metaIdx < 0 || !objs[metaIdx]) return;
+    let type = objs[metaIdx].type
     if (type == 3 || type == 4) {
         canvas.getActiveObject().set('height', parseInt(val))
     } else {
@@ -2155,6 +2132,7 @@ $('#text_h').bind('input propertychange', function () {
     recordState()
 })
 $('#text_r').bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     if ($('#text_r').val() == '') {
         $('#text_r').val('0')
     }
@@ -2257,6 +2235,7 @@ $('#out_text_back_color').bind('input propertychange', function () {
     recordState()
 })
 $("#text_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#text_size").val())) {
         val = parseFloat($("#text_size").val())
@@ -2312,6 +2291,7 @@ $('#out_text_color').bind('input propertychange', function () {
     recordState()
 })
 $("#out_text_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#out_text_size").val())) {
         val = parseFloat($("#out_text_size").val())
@@ -2417,6 +2397,7 @@ $('#counter_color').bind('input propertychange', function () {
     recordState()
 })
 $("#count_size").bind('input propertychange', function () {
+    if (window._soonSyncingFontControls) return;
     let val = 1
     if (parseFloat($("#count_size").val())) {
         val = parseFloat($("#count_size").val())