fix: bug修复3

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); /* 轻微缩小 */
 }

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>