From 0aca637b060a326b3abda7f5835f73150e0d02a0 Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Wed, 15 Apr 2026 21:10:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(practice):=20=E4=BF=AE=E5=A4=8D=E9=95=BF?=
 =?UTF-8?q?=E6=8C=89=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/SpellPractice.vue | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/views/SpellPractice.vue b/src/views/SpellPractice.vue
index 3adb5c2..cd58626 100644
--- a/src/views/SpellPractice.vue
+++ b/src/views/SpellPractice.vue
@@ -92,12 +92,13 @@ let audioCache = new Map(); // 缓存已生成的音频
 
 // 长按状态
 const longPressState = reactive({
-  pause: false, // 暂停按钮是否正在长按
-  replay: false, // 重播按钮是否正在长按
+  replay: false, // 跟读按钮是否正在长按
 });
 
 // 长按定时器
 let longPressTimer = null;
+// 标记长按是否已经触发（避免重复执行）
+let longPressTriggered = false;
 
 // 长按开始
 const handleLongPressStart = (buttonType) => {
@@ -106,17 +107,17 @@ const handleLongPressStart = (buttonType) => {
     clearTimeout(longPressTimer);
   }
 
+  longPressTriggered = false;
   longPressState[buttonType] = true;
 
   // 设置长按触发时间（800ms）
   longPressTimer = setTimeout(() => {
-    if (buttonType === "pause" && dictationState.value === "playing") {
-      // 长按暂停按钮 = 停止听写
-      stopDictation();
-    } else if (buttonType === "replay") {
-      // 长按重播按钮 = 显示当前单词
+    longPressTriggered = true;
+    if (buttonType === "replay") {
+      // 长按跟读按钮 = 显示当前单词
       showCurrentWord();
     }
+    // 长按触发后重置状态
     longPressState[buttonType] = false;
   }, 800);
 };
@@ -127,7 +128,11 @@ const handleLongPressEnd = (buttonType) => {
     clearTimeout(longPressTimer);
     longPressTimer = null;
   }
-  longPressState[buttonType] = false;
+  // 只有当长按未触发时才重置状态（已触发时已在定时器中重置）
+  if (!longPressTriggered) {
+    longPressState[buttonType] = false;
+  }
+  longPressTriggered = false;
 };
 
 // 显示当前单词（用于听写时查看答案）
@@ -594,13 +599,7 @@ onUnmounted(() => {
             <template v-else-if="dictationState === 'playing'">
               <button
                 class="control-btn pause-btn"
-                :class="{ pressing: longPressState.pause }"
                 @click="pauseDictation"
-                @mousedown="handleLongPressStart('pause')"
-                @mouseup="handleLongPressEnd('pause')"
-                @mouseleave="handleLongPressEnd('pause')"
-                @touchstart.prevent="handleLongPressStart('pause')"
-                @touchend="handleLongPressEnd('pause')"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -625,6 +624,7 @@ onUnmounted(() => {
                 @mouseleave="handleLongPressEnd('replay')"
                 @touchstart.prevent="handleLongPressStart('replay')"
                 @touchend="handleLongPressEnd('replay')"
+                @touchcancel="handleLongPressEnd('replay')"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -683,6 +683,7 @@ onUnmounted(() => {
                 @mouseleave="handleLongPressEnd('replay')"
                 @touchstart.prevent="handleLongPressStart('replay')"
                 @touchend="handleLongPressEnd('replay')"
+                @touchcancel="handleLongPressEnd('replay')"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -1438,11 +1439,6 @@ onUnmounted(() => {
   opacity: 0.8;
 }
 
-.pause-btn.pressing {
-  background: linear-gradient(135deg, #dc2626, #b91c1c);
-  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
-}
-
 .replay-btn.pressing {
   background: linear-gradient(135deg, var(--accent-5), #d97706);
   color: white;