refactor(voice-materials): 拆分 VoiceMaterialRow 进度条和标签组件（186→138行, -26%） (#1087)

Squash merge PR #1087: refactor(voice-materials): 拆分 VoiceMaterialRow 进度条和标签组件（186→138行, -26%）

- 拆分 VoiceMaterialRow 为子组件
- 抽取 TagDisplay 标签展示组件
- 抽取 useRowProgress 进度条Hook
- 186→138行, 精简 -26%

apps/web/src/pages/voice-materials/components/VoiceMaterialRow.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react"
+import React from "react"
 import {
   PlayCircleOutlined,
   PauseCircleOutlined,
@@ -6,11 +6,8 @@ import {
   DeleteOutlined,
   CheckOutlined,
 } from "@ant-design/icons"
-import { Tooltip } from "antd"
-import { Tag } from "@/components/ui"
 import { type TagItem } from "@/api/tags"
 import { type VoiceMaterial } from "../types"
-import { MAX_ROW_TAGS, TAG_VARIANTS } from "../constants"
 import {
   genderClass,
   genderIcon,
@@ -18,6 +15,8 @@ import {
   formatDuration,
   formatFileSize,
 } from "../utils/format"
+import { useRowProgress } from "./voice-material-row/useRowProgress"
+import TagDisplay from "./voice-material-row/TagDisplay"
 
 export interface VoiceRowProps {
   material: VoiceMaterial
@@ -48,26 +47,10 @@ const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
   onDelete,
   onToggleSelect,
 }) => {
-  const progressRef = useRef<HTMLDivElement>(null)
-
-  const handleProgressMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!progressRef.current) return
-    e.preventDefault()
-    const doSeek = (ev: MouseEvent) => {
-      if (!progressRef.current) return
-      const rect = progressRef.current.getBoundingClientRect()
-      const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
-      onSeek(percent * material.duration)
-    }
-    doSeek(e.nativeEvent)
-    const handleMove = (ev: MouseEvent) => doSeek(ev)
-    const handleUp = () => {
-      document.removeEventListener("mousemove", handleMove)
-      document.removeEventListener("mouseup", handleUp)
-    }
-    document.addEventListener("mousemove", handleMove)
-    document.addEventListener("mouseup", handleUp)
-  }
+  const { progressRef, handleMouseDown } = useRowProgress({
+    duration: material.duration,
+    onSeek,
+  })
 
   const progress = material.duration > 0 ? (currentTime / material.duration) * 100 : 0
 
@@ -75,7 +58,6 @@ const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
     <div
       className={`vmat-row ${genderClass(material.gender)}${isPlaying ? " playing" : ""}${isSelected ? " selected" : ""}${batchMode ? " batch-mode" : ""}`}
     >
-      {/* 批量选择 checkbox */}
       {(batchMode || isSelected) && (
         <div
           className={`vmat-row-checkbox vmat-checkbox${isSelected ? " checked" : ""}`}
@@ -88,7 +70,6 @@ const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
         </div>
       )}
 
-      {/* 播放按钮 */}
       <button
         type="button"
         className="vmat-row-play"
@@ -101,60 +82,31 @@ const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
         {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
       </button>
 
-      {/* 名称 + 描述 */}
       <div className="vmat-row-info">
         <h4 className="vmat-row-name">{material.name}</h4>
         {material.description && <p className="vmat-row-desc">{material.description}</p>}
       </div>
 
-      {/* 性别 */}
       <span className={`vmat-row-gender ${genderClass(material.gender)}`}>
         {genderIcon(material.gender)}
         {genderLabel(material.gender)}
       </span>
 
-      {/* 标签 */}
       <div className="vmat-row-tags">
-        {material.tagIds.length === 0 ? (
-          <span className="vmat-tag-empty" onClick={() => onEdit()}>
-            添加标签
-          </span>
-        ) : (
-          <>
-            {material.tagIds.slice(0, MAX_ROW_TAGS).map((tagId, i) => (
-              <Tag key={tagId} variant={TAG_VARIANTS[i % TAG_VARIANTS.length]}>
-                {tagMap.get(tagId)?.name ?? tagId}
-              </Tag>
-            ))}
-            {material.tagIds.length > MAX_ROW_TAGS && (
-              <Tooltip
-                title={material.tagIds
-                  .slice(MAX_ROW_TAGS)
-                  .map((id) => tagMap.get(id)?.name ?? id)
-                  .join("、")}
-              >
-                <Tag className="vmat-tag-overflow">+{material.tagIds.length - MAX_ROW_TAGS}</Tag>
-              </Tooltip>
-            )}
-          </>
-        )}
+        <TagDisplay tagIds={material.tagIds} tagMap={tagMap} onAddTag={() => onEdit()} />
       </div>
 
-      {/* 进度条（可拖拽） */}
-      <div ref={progressRef} className="vmat-row-progress" onMouseDown={handleProgressMouseDown}>
+      <div ref={progressRef} className="vmat-row-progress" onMouseDown={handleMouseDown}>
         <div className="vmat-row-progress-bar" style={{ width: `${progress}%` }} />
         {isPlaying && <div className="vmat-progress-thumb" style={{ left: `${progress}%` }} />}
       </div>
 
-      {/* 时长 */}
       <span className="vmat-row-time">
         {isPlaying ? formatDuration(currentTime) : formatDuration(material.duration)}
       </span>
 
-      {/* 文件大小 */}
       <span className="vmat-row-size">{formatFileSize(material.fileSize)}</span>
 
-      {/* 操作 */}
       <div className="vmat-row-actions">
         <button
           type="button"

apps/web/src/pages/voice-materials/components/voice-material-row/TagDisplay.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { Tooltip } from "antd"
+import { Tag } from "@/components/ui"
+import { type TagItem } from "@/api/tags"
+import { MAX_ROW_TAGS, TAG_VARIANTS } from "../../constants"
+
+interface TagDisplayProps {
+  tagIds: string[]
+  tagMap: Map<string, TagItem>
+  onAddTag?: () => void
+}
+
+const TagDisplay: React.FC<TagDisplayProps> = ({ tagIds, tagMap, onAddTag }) => {
+  if (tagIds.length === 0) {
+    return (
+      <span className="vmat-tag-empty" onClick={onAddTag}>
+        添加标签
+      </span>
+    )
+  }
+
+  const visible = tagIds.slice(0, MAX_ROW_TAGS)
+  const overflow = tagIds.slice(MAX_ROW_TAGS)
+
+  return (
+    <>
+      {visible.map((tagId, i) => (
+        <Tag key={tagId} variant={TAG_VARIANTS[i % TAG_VARIANTS.length]}>
+          {tagMap.get(tagId)?.name ?? tagId}
+        </Tag>
+      ))}
+      {overflow.length > 0 && (
+        <Tooltip title={overflow.map((id) => tagMap.get(id)?.name ?? id).join("、")}>
+          <Tag className="vmat-tag-overflow">+{overflow.length}</Tag>
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
+export default TagDisplay

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

@@ -0,0 +1,38 @@
+import { useRef, useCallback } from "react"
+
+interface UseRowProgressOptions {
+  duration: number
+  onSeek: (time: number) => void
+}
+
+export function useRowProgress({ duration, onSeek }: UseRowProgressOptions) {
+  const progressRef = useRef<HTMLDivElement>(null)
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!progressRef.current) return
+      e.preventDefault()
+
+      const doSeek = (ev: MouseEvent) => {
+        if (!progressRef.current) return
+        const rect = progressRef.current.getBoundingClientRect()
+        const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
+        onSeek(percent * duration)
+      }
+
+      doSeek(e.nativeEvent)
+
+      const handleMove = (ev: MouseEvent) => doSeek(ev)
+      const handleUp = () => {
+        document.removeEventListener("mousemove", handleMove)
+        document.removeEventListener("mouseup", handleUp)
+      }
+
+      document.addEventListener("mousemove", handleMove)
+      document.addEventListener("mouseup", handleUp)
+    },
+    [duration, onSeek],
+  )
+
+  return { progressRef, handleMouseDown }
+}