refactor(voice-materials): 拆分 VoiceMaterialRow 进度条和标签组件 (#1087)

- 拆分 VoiceMaterialRow 为独立子组件
- 进度条逻辑抽取到 useRowProgress hook
- 标签展示组件独立为 TagDisplay
- 代码行数从 186 行减少到 138 行 (-26%)

apps/web/src/pages/voice-materials/components/voice-material-row/useRowProgress.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from "react"
+import { useRef, useCallback, useEffect } from "react"
 
 interface UseRowProgressOptions {
   duration: number
@@ -7,6 +7,22 @@ interface UseRowProgressOptions {
 
 export function useRowProgress({ duration, onSeek }: UseRowProgressOptions) {
   const progressRef = useRef<HTMLDivElement>(null)
+  const listenersRef = useRef<{ move: ((e: MouseEvent) => void) | null; up: (() => void) | null }>({
+    move: null,
+    up: null,
+  })
+
+  const cleanupListeners = useCallback(() => {
+    const { move, up } = listenersRef.current
+    if (move) {
+      document.removeEventListener("mousemove", move)
+      listenersRef.current.move = null
+    }
+    if (up) {
+      document.removeEventListener("mouseup", up)
+      listenersRef.current.up = null
+    }
+  }, [])
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -16,6 +32,7 @@ export function useRowProgress({ duration, onSeek }: UseRowProgressOptions) {
       const doSeek = (ev: MouseEvent) => {
         if (!progressRef.current) return
         const rect = progressRef.current.getBoundingClientRect()
+        if (rect.width <= 0) return
         const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
         onSeek(percent * duration)
       }
@@ -24,15 +41,26 @@ export function useRowProgress({ duration, onSeek }: UseRowProgressOptions) {
 
       const handleMove = (ev: MouseEvent) => doSeek(ev)
       const handleUp = () => {
-        document.removeEventListener("mousemove", handleMove)
-        document.removeEventListener("mouseup", handleUp)
+        cleanupListeners()
       }
 
+      // 先清理旧的，再添加新的
+      cleanupListeners()
+      listenersRef.current.move = handleMove
+      listenersRef.current.up = handleUp
+
       document.addEventListener("mousemove", handleMove)
       document.addEventListener("mouseup", handleUp)
     },
-    [duration, onSeek],
+    [duration, onSeek, cleanupListeners],
   )
 
+  // 组件卸载时清理事件监听器
+  useEffect(() => {
+    return () => {
+      cleanupListeners()
+    }
+  }, [cleanupListeners])
+
   return { progressRef, handleMouseDown }
 }

apps/web/src/test/pages/voice-materials/smoke.test.tsx

@@ -20,6 +20,8 @@ import "@/pages/voice-materials/components/voice-material-card/CardActions"
 import "@/pages/voice-materials/components/voice-material-card/BatchCheckbox"
 import "@/pages/voice-materials/components/voice-material-card/types"
 import "@/pages/voice-materials/components/VoiceMaterialRow"
+import "@/pages/voice-materials/components/voice-material-row/useRowProgress"
+import "@/pages/voice-materials/components/voice-material-row/TagDisplay"
 import "@/pages/voice-materials/components/Toolbar"
 import "@/pages/voice-materials/components/TagFilterBar"
 import "@/pages/voice-materials/components/BatchBar"