fix: add mounted ref guard for async preview operation

apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from "react"
+import { useState, useCallback, useEffect, useRef, type ChangeEvent } from "react"
 import { message } from "antd"
 import type { TtsConfig, TtsMode } from "../../../types"
 import { DEFAULT_TTS_CONFIG } from "../../../types"
@@ -19,9 +19,11 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
   /* ── 试听状态 ── */
   const [previewLoading, setPreviewLoading] = useState(false)
   const audioRef = useRef<HTMLAudioElement | null>(null)
+  const mountedRef = useRef(true)
 
   /* ── 加载音色列表 ── */
   useEffect(() => {
+    mountedRef.current = true
     if (!open) return
     setVoicesLoading(true)
     getTtsVoices()
@@ -40,7 +42,7 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
 
   /* ── 文本输入 ── */
   const handleTextChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
       const text = e.target.value.slice(0, 5000)
       onChange({ ...config, text })
     },
@@ -102,12 +104,13 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
         speed: config.speed,
         pitch: config.pitch,
       })
+      if (!mountedRef.current) return
       audioRef.current?.pause()
       const audio = new Audio(res.audio_url)
       audioRef.current = audio
       audio.play().catch(() => message.error("播放失败"))
       audio.onended = () => {
-        audioRef.current = null
+        if (mountedRef.current) audioRef.current = null
       }
       message.success("试听播放中")
     } catch {
@@ -124,6 +127,7 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
 
   /* ── 关闭时停止音频 ── */
   const handleClose = useCallback(() => {
+    mountedRef.current = false
     audioRef.current?.pause()
     audioRef.current = null
     onClose()
@@ -144,4 +148,4 @@ export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOpti
     handleReset,
     handleClose,
   }
-}
+}