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

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

css/style.css

@@ -23,18 +23,19 @@ html, body {
 .toolbar {
     display: flex;
     justify-content: center;
-    gap: 8px;
+    align-items: center;
-    padding: 12px 16px;
+    gap: 6px;
+    padding: 10px 12px;
     background: #fff;
     border-bottom: 1px solid #e0e0e0;
     flex-shrink: 0;
 }
 
 .btn {
-    min-width: 72px;
+    min-width: 68px;
-    height: 40px;
+    height: 36px;
-    padding: 0 12px;
+    padding: 0 10px;
-    font-size: 15px;
+    font-size: 14px;
     border: 1px solid #ddd;
     border-radius: 6px;
     background: #fff;
@@ -65,29 +66,31 @@ html, body {
 /* 工具栏垂直分隔线 */
 .toolbar-divider-v {
     width: 1px;
-    height: 24px;
+    height: 20px;
-    background: #ddd;
+    background: #e0e0e0;
-    margin: 0 4px;
+    margin: 0 2px;
 }
 
 /* 工具栏图标按钮 */
 .toolbar-btn-icon {
-    width: 32px;
+    width: 28px;
-    height: 32px;
+    height: 28px;
-    font-size: 16px;
+    font-size: 14px;
     border: 1px solid #ddd;
-    border-radius: 6px;
+    border-radius: 5px;
     background: #fff;
-    color: #333;
+    color: #555;
     cursor: pointer;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0;
 }
 
 .toolbar-btn-icon:hover {
     background: #f5f5f5;
+    border-color: #ccc;
 }
 
 .toolbar-btn-icon:active {
@@ -95,8 +98,9 @@ html, body {
 }
 
 .toolbar-btn-icon:disabled {
-    opacity: 0.4;
+    opacity: 0.3;
     cursor: not-allowed;
+    background: #f5f5f5;
 }
 
 /* 文本输入框删除按钮 */

js/script.js

@@ -493,25 +493,12 @@
         // 恢复层叠图
         overlayLayer.innerHTML = '';
         state.overlays.forEach(overlayData => {
-            const div = document.createElement('div');
+            // 创建新图片对象
-            div.className = 'overlay-image';
+            const img = new Image();
-            div.style.left = overlayData.left;
+            img.onload = () => {
-            div.style.top = overlayData.top;
+                createOverlayElementFromData(img, overlayData);
-            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');
             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;