fix: 优化叠加图层级关系与选中失焦逻辑

js/script.js

@@ -405,23 +405,29 @@
         });
     }
 
-    // 选中层叠图
+    // 选中层叠图（同时取消输入框选中）
     let selectedOverlay = null;
     function selectOverlay(overlayEl) {
-        if (selectedOverlay) {
+        if (selectedInput) {
+            selectedInput.classList.remove('selected');
+            selectedInput = null;
+        }
+        if (editingInput) {
+            endEdit(editingInput);
+        }
+        if (selectedOverlay && selectedOverlay !== overlayEl) {
             selectedOverlay.classList.remove('selected');
         }
         selectedOverlay = overlayEl;
         overlayEl.classList.add('selected');
     }
 
-    // 点击背景取消选中层叠图
+    // 点击背景/空白处取消选中层叠图
     imageContainer.addEventListener('click', (e) => {
-        if (e.target === imageContainer ||
-            e.target === bgLayer ||
-            e.target === bgImage ||
-            e.target === emptyTip ||
-            e.target.closest('.preview-bg-layer')) {
+        const isOverlayImage = e.target.closest('.overlay-image');
+        const isTextInput = e.target.closest('.text-input');
+
+        if (!isOverlayImage && !isTextInput) {
             if (selectedOverlay) {
                 selectedOverlay.classList.remove('selected');
                 selectedOverlay = null;
@@ -732,6 +738,10 @@
 
     // 选中输入框
     function selectInput(element) {
+        if (selectedOverlay) {
+            selectedOverlay.classList.remove('selected');
+            selectedOverlay = null;
+        }
         if (editingInput && editingInput !== element) {
             endEdit(editingInput);
         }
@@ -1404,6 +1414,9 @@
             drawImageWithOffset(ctx, currentImage, containerWidth, containerHeight);
         }
 
+        // 绘制层叠图（等待图片加载完成）
+        await drawOverlayImages(ctx);
+
         // 绘制文字
         drawTextOnCanvas(ctx, input1);
         drawTextOnCanvas(ctx, input2);
@@ -1411,6 +1424,47 @@
         return canvas;
     }
 
+    // 绘制层叠图
+    function drawOverlayImages(ctx) {
+        return new Promise((resolve) => {
+            const overlayImages = overlayLayer.querySelectorAll('.overlay-image');
+            if (overlayImages.length === 0) {
+                resolve();
+                return;
+            }
+
+            let loadedCount = 0;
+            overlayImages.forEach(overlayEl => {
+                const imgEl = overlayEl.querySelector('img');
+                if (!imgEl) {
+                    loadedCount++;
+                    return;
+                }
+
+                const left = overlayEl.offsetLeft;
+                const top = overlayEl.offsetTop;
+                const width = overlayEl.offsetWidth;
+                const height = overlayEl.offsetHeight;
+
+                const img = new Image();
+                img.onload = () => {
+                    ctx.drawImage(img, left, top, width, height);
+                    loadedCount++;
+                    if (loadedCount >= overlayImages.length) {
+                        resolve();
+                    }
+                };
+                img.onerror = () => {
+                    loadedCount++;
+                    if (loadedCount >= overlayImages.length) {
+                        resolve();
+                    }
+                };
+                img.src = imgEl.src;
+            });
+        });
+    }
+
     // 绘制图片（考虑滑动偏移）
     function drawImageWithOffset(ctx, img, containerWidth, containerHeight) {
         const imgRatio = img.naturalWidth / img.naturalHeight;