feat(工具栏): 添加水平镜像功能并调整工具栏样式

- 在工具栏添加水平镜像按钮
- 调整工具栏间距和分割线样式
- 实现图片水平镜像功能及状态同步

js/script.js

@@ -23,6 +23,7 @@
     const opacityValue = document.getElementById('opacityValue');
     const rotateSlider = document.getElementById('rotateSlider');
     const rotateValue = document.getElementById('rotateValue');
+    const mirrorHBtn = document.getElementById('mirrorHBtn');
     const bgScaleSlider = document.getElementById('bgScaleSlider');
     const bgScaleValue = document.getElementById('bgScaleValue');
     const bgOpacitySlider = document.getElementById('bgOpacitySlider');
@@ -150,6 +151,30 @@
             }
         });
 
+        // 水平镜像按钮
+        mirrorHBtn.addEventListener('click', () => {
+            if (selectedOverlay) {
+                const img = selectedOverlay.querySelector('img');
+                if (img) {
+                    const currentTransform = img.style.transform || '';
+                    const isMirroredH = currentTransform.includes('scaleX(-1)');
+                    
+                    // 移除之前的 scaleX 变换
+                    let newTransform = currentTransform.replace(/scaleX\(-?1\)/g, '').trim();
+                    
+                    // 如果之前没有水平镜像，则添加
+                    if (!isMirroredH) {
+                        newTransform = newTransform ? newTransform + ' scaleX(-1)' : 'scaleX(-1)';
+                        mirrorHBtn.classList.add('active');
+                    } else {
+                        mirrorHBtn.classList.remove('active');
+                    }
+                    
+                    img.style.transform = newTransform;
+                }
+            }
+        });
+
         // 背景图缩放滑块
         bgScaleSlider.addEventListener('input', (e) => {
             bgImageScale = e.target.value / 100;
@@ -654,6 +679,13 @@
         const currentRotate = rotateMatch ? parseFloat(rotateMatch[1]) : 0;
         rotateSlider.value = currentRotate;
         rotateValue.textContent = currentRotate + '°';
+
+        // 更新镜像按钮状态
+        const img = overlayEl.querySelector('img');
+        if (img) {
+            const imgTransform = img.style.transform || '';
+            mirrorHBtn.classList.toggle('active', imgTransform.includes('scaleX(-1)'));
+        }
     }
 
     // 计算图片滑动边界