From ab2d62fe2e9305f543fbac450274fccdd5e483f7 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 20 Jun 2025 15:09:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug=E4=BF=AE=E5=A4=8D3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css         |  7 ++----
 src/pages/Measure.tsx | 61 +++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/index.css b/src/index.css
index 837a33b..e9a168f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,10 +22,7 @@
     justify-content: center;
     align-items: center;
     background-color: var(--primaryColor);
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
+    padding: 0.25rem 1rem;
     color: #fff;
     cursor: pointer;
   }
@@ -94,7 +91,7 @@ code {
   opacity: 1;
 }
 
-.icon-button:active {
+.active-icon-button {
   opacity: 0.6; /* 按下变暗 */
   transform: scale(0.9); /* 轻微缩小 */
 }
diff --git a/src/pages/Measure.tsx b/src/pages/Measure.tsx
index 5a41ac0..b29e522 100644
--- a/src/pages/Measure.tsx
+++ b/src/pages/Measure.tsx
@@ -408,10 +408,18 @@ export default function Measure() {
       }
     }
   }
-
+  const [style, setStyle] = useState({
+    left: 'none',
+    right: 'none',
+    up: 'none',
+    down: 'none',
+    left_rotation:'none',
+    right_rotation:'none',
+  });
   //上下移动
   let timerRef = useRef<any>(null);
   const handlePressStart = (type: string) => {
+    setStyle({...style, [type]: 'active'})
     console.log('你进行了长按操作！');
     if (timerRef.current) {
       return
@@ -424,6 +432,14 @@ export default function Measure() {
   };
 
   const handlePressEnd = () => {
+    setStyle({
+      left: 'none',
+      right: 'none',
+      up: 'none',
+      down: 'none',
+      left_rotation:'none',
+      right_rotation:'none',
+    })
       clearInterval(timerRef.current);
     timerRef.current = null;
   };
@@ -458,6 +474,7 @@ export default function Measure() {
   };
 
   const handleRotationPressStart = (type: string) => {
+    setStyle({...style, [type === 'left' ? 'left_rotation' : 'right_rotation']: 'active'})
     timerRef.current = setInterval(() => {
       onRotationLine(type);
     }, 500);
@@ -575,8 +592,13 @@ export default function Measure() {
                 onClick={() => onMoveLine('left')}
                 onTouchStart={() => handlePressStart('left')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.left === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="左移"
               />
 
@@ -586,8 +608,13 @@ export default function Measure() {
                 onClick={() => onMoveLine('right')}
                 onTouchStart={() => handlePressStart('right')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.right === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="右移"
               />
 
@@ -597,8 +624,13 @@ export default function Measure() {
                 onClick={() => onMoveLine('up')}
                 onTouchStart={() => handlePressStart('up')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.up === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="上移"
               />
 
@@ -608,8 +640,13 @@ export default function Measure() {
                 onClick={() => onMoveLine('down')}
                 onTouchStart={() => handlePressStart('down')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.down === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="下移"
               />
 
@@ -619,8 +656,13 @@ export default function Measure() {
                 onClick={() => onRotationLine('left')}
                 onTouchStart={() => handleRotationPressStart('left')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.left_rotation === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="逆时针旋转"
               />
 
@@ -630,8 +672,13 @@ export default function Measure() {
                 onClick={() => onRotationLine('right')}
                 onTouchStart={() => handleRotationPressStart('right')}
                 onTouchEnd={handlePressEnd}
+                onTouchCancel={handlePressEnd}
                 onContextMenu={handleContextMenu}
-                className="text-[20px] ml-[5px] icon-button"
+                className={
+                  style.right_rotation === 'active'
+                      ? 'text-[20px] ml-[5px] icon-button active-icon-button'
+                      : 'text-[20px] ml-[5px] icon-button'
+                }
                 alt="顺时针旋转"
               />
             </section>