fix(practice): 修复长按状态处理逻辑

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") {
+    longPressTriggered = true;
-      // 长按暂停按钮 = 停止听写
+    if (buttonType === "replay") {
-      stopDictation();
+      // 长按跟读按钮 = 显示当前单词
-    } else 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;