From 13a282d93a2949e829a5de44c8ad8212918f8758 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Tue, 21 Apr 2026 18:28:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E6=A0=8F):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=B0=B4=E5=B9=B3=E9=95=9C=E5=83=8F=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E8=B0=83=E6=95=B4=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在工具栏添加水平镜像按钮
- 调整工具栏间距和分割线样式
- 实现图片水平镜像功能及状态同步
---
 css/style.css | 11 ++++++++---
 index.html    |  2 ++
 js/script.js  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index e5f66aa..8baf890 100644
--- a/css/style.css
+++ b/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;
 }
diff --git a/index.html b/index.html
index 7a3ffaa..b53282c 100644
--- a/index.html
+++ b/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">
diff --git a/js/script.js b/js/script.js
index 617505d..a4198b0 100644
--- a/js/script.js
+++ b/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)'));
+        }
     }
 
     // 计算图片滑动边界