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

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

css/style.css

@@ -158,7 +158,7 @@ html, body {
     display: none;
     justify-content: center;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
     width: 100%;
 }
 
@@ -193,17 +193,22 @@ html, body {
     font-style: italic;
 }
 
+/* 镜像按钮样式 */
+.toolbar-btn.mirror-btn {
+    font-size: 18px;
+}
+
 .toolbar-divider {
     width: 1px;
     height: 24px;
     background: #ddd;
-    margin: 0 2px;
+    margin: 0 1px;
 }
 
 .toolbar-label {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
     font-size: 12px;
     color: #666;
 }

index.html

@@ -63,6 +63,8 @@
                     <input type="range" id="rotateSlider" min="-180" max="180" value="0" class="rotate-slider">
                     <span id="rotateValue">0°</span>
                 </label>
+                <div class="toolbar-divider"></div>
+                <button class="toolbar-btn mirror-btn" id="mirrorHBtn" title="水平镜像">↔</button>
             </div>
             <!-- 背景图编辑工具 -->
             <div class="toolbar-group bg-tools" id="bgTools">

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)'));
+        }
     }
 
     // 计算图片滑动边界