refactor(UI): 优化工具栏样式并重构层叠图恢复逻辑

调整工具栏按钮和间距样式以提升视觉一致性
将层叠图恢复逻辑重构为独立函数以提高代码复用性

js/script.js

@@ -493,25 +493,12 @@
         // 恢复层叠图
         overlayLayer.innerHTML = '';
         state.overlays.forEach(overlayData => {
-            const div = document.createElement('div');
-            div.className = 'overlay-image';
-            div.style.left = overlayData.left;
-            div.style.top = overlayData.top;
-            div.style.width = overlayData.width;
-            div.style.height = overlayData.height;
-            div.style.opacity = overlayData.opacity;
-            div.style.transform = overlayData.transform;
-            
-            const img = document.createElement('img');
+            // 创建新图片对象
+            const img = new Image();
+            img.onload = () => {
+                createOverlayElementFromData(img, overlayData);
+            };
             img.src = overlayData.src;
-            img.style.transform = overlayData.imgTransform;
-            img.draggable = false;
-            
-            div.appendChild(img);
-            overlayLayer.appendChild(div);
-            
-            // 重新初始化拖拽
-            initOverlayDrag(div);
         });
         
         // 恢复文本输入框
@@ -798,6 +785,46 @@
         saveState(true);
     }
 
+    // 从数据创建层叠图元素（用于撤销恢复）
+    function createOverlayElementFromData(img, overlayData) {
+        // 创建层叠图元素
+        const overlayEl = document.createElement('div');
+        overlayEl.className = 'overlay-image';
+        overlayEl.dataset.scale = 1;
+
+        const imgEl = document.createElement('img');
+        imgEl.src = img.src;
+        imgEl.style.width = '100%';
+        imgEl.style.height = '100%';
+        imgEl.style.objectFit = 'contain';
+        imgEl.style.transform = overlayData.imgTransform || '';
+        overlayEl.appendChild(imgEl);
+
+        // 删除按钮
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'delete-btn';
+        deleteBtn.innerHTML = '×';
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            overlayEl.remove();
+            saveState(true);
+        });
+        overlayEl.appendChild(deleteBtn);
+
+        // 恢复位置和尺寸
+        overlayEl.style.left = overlayData.left;
+        overlayEl.style.top = overlayData.top;
+        overlayEl.style.width = overlayData.width;
+        overlayEl.style.height = overlayData.height;
+        overlayEl.style.opacity = overlayData.opacity || '1';
+        overlayEl.style.transform = overlayData.transform || '';
+
+        // 初始化拖拽和缩放
+        initOverlayImage(overlayEl);
+
+        overlayLayer.appendChild(overlayEl);
+    }
+
     // 初始化层叠图交互
     function initOverlayImage(overlayEl) {
         let isDragging = false;