test: 补充editing-planner smoke测试的asset-selector依赖链

Phase 1: 抽 types/constants/utils
- types/index.ts — AssetSelectorProps, ViewMode
- constants.ts — TYPE_OPTIONS
- utils/index.ts — formatSize, formatDuration, getQualityLevel, getQualityColor

Phase 2: 拆 6 个 UI 组件
- SelectorToolbar — 搜索 + 类型/质量筛选 + 视图切换
- SelectorBatchBar — 批量操作栏
- AssetCard — 网格卡片（缩略图/角标/checkbox）
- AssetListItem — 列表项
- PreviewOverlay — 悬浮预览浮层
- EmptyState — 空状态

Phase 3: 抽 4 个业务 Hook
- useAssetFilter — 搜索 + 类型/质量分筛选 + 视图切换
- useAssetSelection — 单选/多选/Shift 连选
- useDragReorder — HTML5 DnD 拖拽排序 + 批量数据携带
- useAssetPreview — 悬浮延迟预览

同步更新 index.ts 导出类型

apps/web/src/components/asset-selector/AssetCard.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import type { MediaAsset } from "@/api/template-editor"
+import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS } from "@/api/template-editor"
+import { formatSize, formatDuration, getQualityLevel } from "./utils"
+
+interface AssetCardProps {
+  asset: MediaAsset
+  isSelected: boolean
+  isDragging: boolean
+  isDragOver: boolean
+  showCheckbox: boolean
+  compact?: boolean
+  onToggleSelect: (asset: MediaAsset, shiftKey: boolean) => void
+  onCardClick: (asset: MediaAsset, e: React.MouseEvent) => void
+  onDragStart: (e: React.DragEvent) => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: (e: React.DragEvent) => void
+  onDragEnd: () => void
+  onMouseEnter: (e: React.MouseEvent) => void
+  onMouseLeave: () => void
+}
+
+const AssetCard: React.FC<AssetCardProps> = ({
+  asset,
+  isSelected,
+  isDragging,
+  isDragOver,
+  showCheckbox,
+  onToggleSelect,
+  onCardClick,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  const qualityLevel = getQualityLevel(asset.quality_score)
+
+  return (
+    <div
+      className={[
+        "as-card",
+        isSelected ? "selected" : "",
+        isDragging ? "dragging" : "",
+        isDragOver ? "drag-over" : "",
+        showCheckbox ? "has-checkbox" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      onClick={(e) => onCardClick(asset, e)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* 缩略图 */}
+      <div className="as-card-thumb">
+        {asset.thumbnail_url ? (
+          <img src={asset.thumbnail_url} alt={asset.name} loading="lazy" />
+        ) : (
+          <span className="as-card-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
+        )}
+
+        {/* Checkbox */}
+        {showCheckbox && (
+          <span
+            data-checkbox
+            className={`as-card-checkbox${isSelected ? " checked" : ""}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              onToggleSelect(asset, e.shiftKey)
+            }}
+          />
+        )}
+
+        {/* 类型角标 */}
+        <span className="as-card-type-badge">{MATERIAL_TYPE_LABELS[asset.type]}</span>
+
+        {/* 时长角标 */}
+        {asset.duration != null && (
+          <span className="as-card-duration">{formatDuration(asset.duration)}</span>
+        )}
+
+        {/* 质量分角标 */}
+        {asset.quality_score != null && (
+          <span
+            className={`as-card-quality ${qualityLevel}`}
+            title={`质量分: ${asset.quality_score}`}
+          >
+            {asset.quality_score}
+          </span>
+        )}
+      </div>
+
+      {/* 信息 */}
+      <div className="as-card-info">
+        <p className="as-card-name" title={asset.name}>
+          {asset.name}
+        </p>
+        <div className="as-card-meta">{formatSize(asset.size)}</div>
+      </div>
+    </div>
+  )
+}
+
+export default AssetCard

apps/web/src/components/asset-selector/AssetListItem.tsx

@@ -0,0 +1,99 @@
+import React from "react"
+import type { MediaAsset } from "@/api/template-editor"
+import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS } from "@/api/template-editor"
+import { formatSize, formatDuration, getQualityColor } from "./utils"
+
+interface AssetListItemProps {
+  asset: MediaAsset
+  isSelected: boolean
+  isDragging: boolean
+  isDragOver: boolean
+  showCheckbox: boolean
+  onToggleSelect: (asset: MediaAsset, shiftKey: boolean) => void
+  onCardClick: (asset: MediaAsset, e: React.MouseEvent) => void
+  onDragStart: (e: React.DragEvent) => void
+  onDragOver: (e: React.DragEvent) => void
+  onDrop: (e: React.DragEvent) => void
+  onDragEnd: () => void
+  onMouseEnter: (e: React.MouseEvent) => void
+  onMouseLeave: () => void
+}
+
+const AssetListItem: React.FC<AssetListItemProps> = ({
+  asset,
+  isSelected,
+  isDragging,
+  isDragOver,
+  showCheckbox,
+  onToggleSelect,
+  onCardClick,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  return (
+    <div
+      className={[
+        "as-list-item",
+        isSelected ? "selected" : "",
+        isDragging ? "dragging" : "",
+        isDragOver ? "drag-over" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      draggable
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      onClick={(e) => onCardClick(asset, e)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* 拖拽手柄 */}
+      <span className="as-list-item-drag" title="拖拽排序">
+        ⠿
+      </span>
+
+      {/* Checkbox */}
+      {showCheckbox && (
+        <span
+          data-checkbox
+          className={`as-list-item-checkbox${isSelected ? " checked" : ""}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onToggleSelect(asset, e.shiftKey)
+          }}
+        />
+      )}
+
+      {/* 图标 */}
+      <span className="as-list-item-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
+
+      {/* 信息 */}
+      <div className="as-list-item-info">
+        <div className="as-list-item-name">{asset.name}</div>
+        <div className="as-list-item-meta">
+          {MATERIAL_TYPE_LABELS[asset.type]}
+          {asset.duration != null && ` · ${formatDuration(asset.duration)}`}
+          {asset.size != null && ` · ${formatSize(asset.size)}`}
+        </div>
+      </div>
+
+      {/* 质量分 */}
+      {asset.quality_score != null && (
+        <span
+          className="as-list-item-quality"
+          style={{ color: getQualityColor(asset.quality_score) }}
+        >
+          {asset.quality_score}分
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default AssetListItem

apps/web/src/components/asset-selector/AssetSelector.tsx

@@ -9,73 +9,20 @@
  * - 筛选增强：类型筛选 + 质量分筛选
  * - 视图切换：网格视图 / 列表视图
  */
-import React, { useState, useMemo, useCallback, useRef, useEffect } from "react"
+import React, { useCallback } from "react"
 import "./AssetSelector.css"
-import { Input, Select, Button } from "@/components/ui"
+import type { AssetSelectorProps } from "./types"
+import useAssetFilter from "./hooks/useAssetFilter"
+import useAssetSelection from "./hooks/useAssetSelection"
+import useDragReorder from "./hooks/useDragReorder"
+import useAssetPreview from "./hooks/useAssetPreview"
+import SelectorToolbar from "./SelectorToolbar"
+import SelectorBatchBar from "./SelectorBatchBar"
+import AssetCard from "./AssetCard"
+import AssetListItem from "./AssetListItem"
+import PreviewOverlay from "./PreviewOverlay"
+import EmptyState from "./EmptyState"
 import type { MediaAsset } from "@/api/template-editor"
-import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS, QUALITY_OPTIONS } from "@/api/template-editor"
-
-/* ──────────── 类型 ──────────── */
-
-export interface AssetSelectorProps {
-  assets: MediaAsset[]
-  selectedIds?: string[]
-  onSelectionChange?: (ids: string[]) => void
-  onAssetDragStart?: (asset: MediaAsset) => void
-  onReorder?: (fromIdx: number, toIdx: number) => void
-  showQualityFilter?: boolean
-  showBatchSelect?: boolean
-  compact?: boolean
-}
-
-type ViewMode = "grid" | "list"
-
-/* ──────────── 工具函数 ──────────── */
-
-/** 格式化文件大小 */
-const formatSize = (bytes?: number): string => {
-  if (!bytes) return ""
-  if (bytes < 1024) return `${bytes}B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
-}
-
-/** 格式化时长 */
-const formatDuration = (seconds?: number): string => {
-  if (!seconds) return ""
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  return m > 0 ? `${m}:${s.toString().padStart(2, "0")}` : `${s}s`
-}
-
-/** 获取质量分等级 */
-const getQualityLevel = (score?: number): string => {
-  if (score == null) return "none"
-  if (score >= 90) return "excellent"
-  if (score >= 70) return "good"
-  if (score >= 50) return "fair"
-  return "poor"
-}
-
-/** 质量分颜色 */
-const getQualityColor = (score?: number): string => {
-  if (score == null) return "var(--text-secondary)"
-  if (score >= 90) return "var(--success-color, #10b981)"
-  if (score >= 70) return "var(--primary-color, #6366f1)"
-  if (score >= 50) return "var(--warning-color, #f59e0b)"
-  return "var(--error-color, #ef4444)"
-}
-
-/* ──────────── 类型筛选选项 ──────────── */
-
-const TYPE_OPTIONS = [
-  { value: "", label: "全部类型" },
-  { value: "video", label: "🎬 视频" },
-  { value: "image", label: "🖼️ 图片" },
-  { value: "audio", label: "🎵 音频" },
-]
-
-/* ──────────── 组件 ──────────── */
 
 const AssetSelector: React.FC<AssetSelectorProps> = ({
   assets,
@@ -87,162 +34,41 @@ const AssetSelector: React.FC<AssetSelectorProps> = ({
   showBatchSelect = true,
   compact = false,
 }) => {
-  /* ── 搜索 & 筛选 ── */
-  const [searchText, setSearchText] = useState("")
-  const [filterType, setFilterType] = useState("")
-  const [filterQuality, setFilterQuality] = useState("")
-  const [viewMode, setViewMode] = useState<ViewMode>("grid")
+  // 搜索 & 筛选
+  const {
+    searchText,
+    filterType,
+    filterQuality,
+    viewMode,
+    filteredAssets,
+    setSearchText,
+    setFilterType,
+    setFilterQuality,
+    setViewMode,
+  } = useAssetFilter(assets)
 
-  /* ── 拖拽状态 ── */
-  const [dragIdx, setDragIdx] = useState<number | null>(null)
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
+  // 选中操作
+  const { selectedSet, toggleSelect, clearSelection } = useAssetSelection({
+    filteredAssets,
+    selectedIds,
+    onSelectionChange,
+  })
 
-  /* ── 悬浮预览 ── */
-  const [previewAsset, setPreviewAsset] = useState<MediaAsset | null>(null)
-  const [previewPos, setPreviewPos] = useState({ x: 0, y: 0 })
-  const previewTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // 拖拽排序
+  const { dragIdx, dragOverIdx, handleDragStart, handleDragOver, handleDrop, handleDragEnd } =
+    useDragReorder({
+      filteredAssets,
+      selectedIds,
+      onAssetDragStart,
+      onReorder,
+    })
 
-  /* ── Shift 连选 ── */
-  const lastClickedIdx = useRef<number | null>(null)
-
-  /* ── 过滤后的素材列表 ── */
-  const filteredAssets = useMemo(() => {
-    let list = assets
-    if (searchText) {
-      const q = searchText.toLowerCase()
-      list = list.filter(
-        (a) => a.name.toLowerCase().includes(q) || a.tags.some((t) => t.toLowerCase().includes(q)),
-      )
-    }
-    if (filterType) {
-      list = list.filter((a) => a.type === filterType)
-    }
-    if (filterQuality) {
-      const opt = QUALITY_OPTIONS.find((o) => o.value === filterQuality)
-      if (opt?.min != null && opt?.max != null) {
-        list = list.filter(
-          (a) =>
-            a.quality_score != null && a.quality_score >= opt.min! && a.quality_score <= opt.max!,
-        )
-      }
-    }
-    return list
-  }, [assets, searchText, filterType, filterQuality])
-
-  /* ── 选中状态 ── */
-  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])
-
-  /* ── 选择操作 ── */
-  const toggleSelect = useCallback(
-    (asset: MediaAsset, idx: number, shiftKey: boolean) => {
-      if (!onSelectionChange) return
-
-      if (shiftKey && lastClickedIdx.current !== null) {
-        // Shift 连选
-        const start = Math.min(lastClickedIdx.current, idx)
-        const end = Math.max(lastClickedIdx.current, idx)
-        const rangeIds = filteredAssets.slice(start, end + 1).map((a) => a.id)
-        const newSet = new Set(selectedIds)
-        rangeIds.forEach((id) => newSet.add(id))
-        onSelectionChange(Array.from(newSet))
-      } else {
-        const newSet = new Set(selectedIds)
-        if (newSet.has(asset.id)) {
-          newSet.delete(asset.id)
-        } else {
-          newSet.add(asset.id)
-        }
-        onSelectionChange(Array.from(newSet))
-      }
-      lastClickedIdx.current = idx
-    },
-    [onSelectionChange, selectedIds, filteredAssets],
-  )
-
-  const clearSelection = useCallback(() => {
-    onSelectionChange?.([])
-  }, [onSelectionChange])
-
-  /* ── 拖拽排序 ── */
-  const handleDragStart = useCallback(
-    (e: React.DragEvent, idx: number) => {
-      setDragIdx(idx)
-      e.dataTransfer.effectAllowed = "move"
-      e.dataTransfer.setData("text/plain", String(idx))
-      // 设置素材数据，供 TimelinePanel 接收（P1-2 修复）
-      e.dataTransfer.setData("application/x-media-asset", JSON.stringify(filteredAssets[idx]))
-      // 批量拖拽：如果有多个选中素材，一起携带
-      if (selectedIds.length > 1 && selectedIds.includes(filteredAssets[idx].id)) {
-        const batchAssets = filteredAssets.filter((a) => selectedIds.includes(a.id))
-        e.dataTransfer.setData("application/x-media-assets", JSON.stringify(batchAssets))
-      }
-      // 通知父组件素材拖拽开始
-      if (onAssetDragStart) {
-        onAssetDragStart(filteredAssets[idx])
-      }
-    },
-    [filteredAssets, selectedIds, onAssetDragStart],
-  )
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent, idx: number) => {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = "move"
-      if (dragIdx === null || dragIdx === idx) return
-      setDragOverIdx(idx)
-    },
-    [dragIdx],
-  )
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent, toIdx: number) => {
-      e.preventDefault()
-      if (dragIdx !== null && dragIdx !== toIdx && onReorder) {
-        onReorder(dragIdx, toIdx)
-      }
-      setDragIdx(null)
-      setDragOverIdx(null)
-    },
-    [dragIdx, onReorder],
-  )
-
-  const handleDragEnd = useCallback(() => {
-    setDragIdx(null)
-    setDragOverIdx(null)
-  }, [])
-
-  /* ── 悬浮预览 ── */
-  const handleMouseEnter = useCallback((asset: MediaAsset, e: React.MouseEvent) => {
-    if (previewTimer.current) clearTimeout(previewTimer.current)
-    previewTimer.current = setTimeout(() => {
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-      setPreviewAsset(asset)
-      setPreviewPos({
-        x: rect.right + 12,
-        y: Math.max(8, rect.top - 20),
-      })
-    }, 400)
-  }, [])
-
-  const handleMouseLeave = useCallback(() => {
-    if (previewTimer.current) {
-      clearTimeout(previewTimer.current)
-      previewTimer.current = null
-    }
-    setPreviewAsset(null)
-  }, [])
-
-  // 清理定时器
-  useEffect(() => {
-    return () => {
-      if (previewTimer.current) clearTimeout(previewTimer.current)
-    }
-  }, [])
+  // 悬浮预览
+  const { previewAsset, previewPos, handleMouseEnter, handleMouseLeave } = useAssetPreview()
 
   /* ── 点击卡片 ── */
   const handleCardClick = useCallback(
     (asset: MediaAsset, idx: number, e: React.MouseEvent) => {
-      // 如果点击的是 checkbox 区域，不触发卡片点击
       const target = e.target as HTMLElement
       if (target.closest("[data-checkbox]")) return
       toggleSelect(asset, idx, e.shiftKey)
@@ -250,253 +76,82 @@ const AssetSelector: React.FC<AssetSelectorProps> = ({
     [toggleSelect],
   )
 
-  /* ──────────── 渲染 ──────────── */
-
   const hasSelection = selectedIds.length > 0
 
   return (
     <div className="as-container">
-      {/* ═══ 工具栏 ═══ */}
-      <div className="as-toolbar">
-        <div className="as-toolbar-left">
-          <div className="as-search">
-            <Input
-              placeholder="搜索素材..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              prefix="🔍"
-            />
-          </div>
-          <Select
-            value={filterType}
-            onChange={(v: string) => setFilterType(v)}
-            options={TYPE_OPTIONS}
-          />
-          {showQualityFilter && (
-            <Select
-              value={filterQuality}
-              onChange={(v: string) => setFilterQuality(v)}
-              options={QUALITY_OPTIONS}
-            />
-          )}
-        </div>
-        <div className="as-toolbar-right">
-          <button
-            className={`as-view-btn${viewMode === "grid" ? " active" : ""}`}
-            onClick={() => setViewMode("grid")}
-            title="网格视图"
-          >
-            ⊞
-          </button>
-          <button
-            className={`as-view-btn${viewMode === "list" ? " active" : ""}`}
-            onClick={() => setViewMode("list")}
-            title="列表视图"
-          >
-            ☰
-          </button>
-        </div>
-      </div>
+      {/* 工具栏 */}
+      <SelectorToolbar
+        searchText={searchText}
+        filterType={filterType}
+        filterQuality={filterQuality}
+        viewMode={viewMode}
+        showQualityFilter={showQualityFilter}
+        onSearchChange={setSearchText}
+        onTypeChange={setFilterType}
+        onQualityChange={setFilterQuality}
+        onViewModeChange={setViewMode}
+      />
 
-      {/* ═══ 批量操作栏 ═══ */}
+      {/* 批量操作栏 */}
       {showBatchSelect && hasSelection && (
-        <div className="as-batch-bar">
-          <span className="as-batch-bar-count">已选 {selectedIds.length} 项</span>
-          <div className="as-batch-bar-actions">
-            <Button buttonType="ghost" buttonSize="sm" onClick={clearSelection}>
-              取消选择
-            </Button>
-          </div>
-        </div>
+        <SelectorBatchBar selectedCount={selectedIds.length} onClear={clearSelection} />
       )}
 
-      {/* ═══ 素材列表 ═══ */}
+      {/* 素材列表 */}
       <div className="as-body">
         {filteredAssets.length === 0 ? (
-          <div className="as-empty">
-            <div className="as-empty-icon">📂</div>
-            <p>暂无素材</p>
-          </div>
+          <EmptyState />
         ) : viewMode === "grid" ? (
-          /* ── 网格视图 ── */
+          /* 网格视图 */
           <div className={`as-grid${compact ? " compact" : ""}`}>
-            {filteredAssets.map((asset, idx) => {
-              const isSelected = selectedSet.has(asset.id)
-              const isDragging = dragIdx === idx
-              const isDragOver = dragOverIdx === idx
-              const qualityLevel = getQualityLevel(asset.quality_score)
-
-              return (
-                <div
-                  key={asset.id}
-                  className={[
-                    "as-card",
-                    isSelected ? "selected" : "",
-                    isDragging ? "dragging" : "",
-                    isDragOver ? "drag-over" : "",
-                    showBatchSelect ? "has-checkbox" : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" ")}
-                  draggable
-                  onDragStart={(e) => handleDragStart(e, idx)}
-                  onDragOver={(e) => handleDragOver(e, idx)}
-                  onDrop={(e) => handleDrop(e, idx)}
-                  onDragEnd={handleDragEnd}
-                  onClick={(e) => handleCardClick(asset, idx, e)}
-                  onMouseEnter={(e) => handleMouseEnter(asset, e)}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  {/* 缩略图 */}
-                  <div className="as-card-thumb">
-                    {asset.thumbnail_url ? (
-                      <img src={asset.thumbnail_url} alt={asset.name} loading="lazy" />
-                    ) : (
-                      <span className="as-card-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
-                    )}
-
-                    {/* Checkbox */}
-                    {showBatchSelect && (
-                      <span
-                        data-checkbox
-                        className={`as-card-checkbox${isSelected ? " checked" : ""}`}
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          toggleSelect(asset, idx, e.shiftKey)
-                        }}
-                      />
-                    )}
-
-                    {/* 类型角标 */}
-                    <span className="as-card-type-badge">{MATERIAL_TYPE_LABELS[asset.type]}</span>
-
-                    {/* 时长角标 */}
-                    {asset.duration != null && (
-                      <span className="as-card-duration">{formatDuration(asset.duration)}</span>
-                    )}
-
-                    {/* 质量分角标 */}
-                    {asset.quality_score != null && (
-                      <span
-                        className={`as-card-quality ${qualityLevel}`}
-                        title={`质量分: ${asset.quality_score}`}
-                      >
-                        {asset.quality_score}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* 信息 */}
-                  <div className="as-card-info">
-                    <p className="as-card-name" title={asset.name}>
-                      {asset.name}
-                    </p>
-                    <div className="as-card-meta">{formatSize(asset.size)}</div>
-                  </div>
-                </div>
-              )
-            })}
+            {filteredAssets.map((asset, idx) => (
+              <AssetCard
+                key={asset.id}
+                asset={asset}
+                isSelected={selectedSet.has(asset.id)}
+                isDragging={dragIdx === idx}
+                isDragOver={dragOverIdx === idx}
+                showCheckbox={showBatchSelect}
+                compact={compact}
+                onToggleSelect={(a, shiftKey) => toggleSelect(a, idx, shiftKey)}
+                onCardClick={(a, e) => handleCardClick(a, idx, e)}
+                onDragStart={(e) => handleDragStart(e, idx)}
+                onDragOver={(e) => handleDragOver(e, idx)}
+                onDrop={(e) => handleDrop(e, idx)}
+                onDragEnd={handleDragEnd}
+                onMouseEnter={(e) => handleMouseEnter(asset, e)}
+                onMouseLeave={handleMouseLeave}
+              />
+            ))}
           </div>
         ) : (
-          /* ── 列表视图 ── */
+          /* 列表视图 */
           <div className="as-list">
-            {filteredAssets.map((asset, idx) => {
-              const isSelected = selectedSet.has(asset.id)
-              const isDragging = dragIdx === idx
-              const isDragOver = dragOverIdx === idx
-
-              return (
-                <div
-                  key={asset.id}
-                  className={[
-                    "as-list-item",
-                    isSelected ? "selected" : "",
-                    isDragging ? "dragging" : "",
-                    isDragOver ? "drag-over" : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" ")}
-                  draggable
-                  onDragStart={(e) => handleDragStart(e, idx)}
-                  onDragOver={(e) => handleDragOver(e, idx)}
-                  onDrop={(e) => handleDrop(e, idx)}
-                  onDragEnd={handleDragEnd}
-                  onClick={(e) => handleCardClick(asset, idx, e)}
-                  onMouseEnter={(e) => handleMouseEnter(asset, e)}
-                  onMouseLeave={handleMouseLeave}
-                >
-                  {/* 拖拽手柄 */}
-                  <span className="as-list-item-drag" title="拖拽排序">
-                    ⠿
-                  </span>
-
-                  {/* Checkbox */}
-                  {showBatchSelect && (
-                    <span
-                      data-checkbox
-                      className={`as-list-item-checkbox${isSelected ? " checked" : ""}`}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        toggleSelect(asset, idx, e.shiftKey)
-                      }}
-                    />
-                  )}
-
-                  {/* 图标 */}
-                  <span className="as-list-item-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
-
-                  {/* 信息 */}
-                  <div className="as-list-item-info">
-                    <div className="as-list-item-name">{asset.name}</div>
-                    <div className="as-list-item-meta">
-                      {MATERIAL_TYPE_LABELS[asset.type]}
-                      {asset.duration != null && ` · ${formatDuration(asset.duration)}`}
-                      {asset.size != null && ` · ${formatSize(asset.size)}`}
-                    </div>
-                  </div>
-
-                  {/* 质量分 */}
-                  {asset.quality_score != null && (
-                    <span
-                      className="as-list-item-quality"
-                      style={{ color: getQualityColor(asset.quality_score) }}
-                    >
-                      {asset.quality_score}分
-                    </span>
-                  )}
-                </div>
-              )
-            })}
+            {filteredAssets.map((asset, idx) => (
+              <AssetListItem
+                key={asset.id}
+                asset={asset}
+                isSelected={selectedSet.has(asset.id)}
+                isDragging={dragIdx === idx}
+                isDragOver={dragOverIdx === idx}
+                showCheckbox={showBatchSelect}
+                onToggleSelect={(a, shiftKey) => toggleSelect(a, idx, shiftKey)}
+                onCardClick={(a, e) => handleCardClick(a, idx, e)}
+                onDragStart={(e) => handleDragStart(e, idx)}
+                onDragOver={(e) => handleDragOver(e, idx)}
+                onDrop={(e) => handleDrop(e, idx)}
+                onDragEnd={handleDragEnd}
+                onMouseEnter={(e) => handleMouseEnter(asset, e)}
+                onMouseLeave={handleMouseLeave}
+              />
+            ))}
           </div>
         )}
       </div>
 
-      {/* ═══ 悬浮预览 ═══ */}
-      {previewAsset && (
-        <div className="as-preview-overlay" style={{ left: previewPos.x, top: previewPos.y }}>
-          <div className="as-preview-overlay-thumb">
-            {previewAsset.thumbnail_url ? (
-              <img src={previewAsset.thumbnail_url} alt={previewAsset.name} />
-            ) : (
-              <span className="as-preview-overlay-thumb-icon">
-                {MATERIAL_TYPE_ICONS[previewAsset.type]}
-              </span>
-            )}
-          </div>
-          <p className="as-preview-overlay-name">{previewAsset.name}</p>
-          <div className="as-preview-overlay-meta">
-            <span>类型: {MATERIAL_TYPE_LABELS[previewAsset.type]}</span>
-            {previewAsset.duration != null && (
-              <span>时长: {formatDuration(previewAsset.duration)}</span>
-            )}
-            {previewAsset.size != null && <span>大小: {formatSize(previewAsset.size)}</span>}
-            {previewAsset.quality_score != null && (
-              <span>质量分: {previewAsset.quality_score}</span>
-            )}
-            {previewAsset.tags.length > 0 && <span>标签: {previewAsset.tags.join(", ")}</span>}
-          </div>
-        </div>
-      )}
+      {/* 悬浮预览 */}
+      {previewAsset && <PreviewOverlay asset={previewAsset} position={previewPos} />}
     </div>
   )
 }

apps/web/src/components/asset-selector/EmptyState.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+const EmptyState: React.FC = () => {
+  return (
+    <div className="as-empty">
+      <div className="as-empty-icon">📂</div>
+      <p>暂无素材</p>
+    </div>
+  )
+}
+
+export default EmptyState

apps/web/src/components/asset-selector/PreviewOverlay.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import type { MediaAsset } from "@/api/template-editor"
+import { MATERIAL_TYPE_LABELS, MATERIAL_TYPE_ICONS } from "@/api/template-editor"
+import { formatSize, formatDuration } from "./utils"
+
+interface PreviewOverlayProps {
+  asset: MediaAsset
+  position: { x: number; y: number }
+}
+
+const PreviewOverlay: React.FC<PreviewOverlayProps> = ({ asset, position }) => {
+  return (
+    <div className="as-preview-overlay" style={{ left: position.x, top: position.y }}>
+      <div className="as-preview-overlay-thumb">
+        {asset.thumbnail_url ? (
+          <img src={asset.thumbnail_url} alt={asset.name} />
+        ) : (
+          <span className="as-preview-overlay-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
+        )}
+      </div>
+      <p className="as-preview-overlay-name">{asset.name}</p>
+      <div className="as-preview-overlay-meta">
+        <span>类型: {MATERIAL_TYPE_LABELS[asset.type]}</span>
+        {asset.duration != null && <span>时长: {formatDuration(asset.duration)}</span>}
+        {asset.size != null && <span>大小: {formatSize(asset.size)}</span>}
+        {asset.quality_score != null && <span>质量分: {asset.quality_score}</span>}
+        {asset.tags.length > 0 && <span>标签: {asset.tags.join(", ")}</span>}
+      </div>
+    </div>
+  )
+}
+
+export default PreviewOverlay

apps/web/src/components/asset-selector/SelectorBatchBar.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { Button } from "@/components/ui"
+
+interface SelectorBatchBarProps {
+  selectedCount: number
+  onClear: () => void
+}
+
+const SelectorBatchBar: React.FC<SelectorBatchBarProps> = ({ selectedCount, onClear }) => {
+  return (
+    <div className="as-batch-bar">
+      <span className="as-batch-bar-count">已选 {selectedCount} 项</span>
+      <div className="as-batch-bar-actions">
+        <Button buttonType="ghost" buttonSize="sm" onClick={onClear}>
+          取消选择
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SelectorBatchBar

apps/web/src/components/asset-selector/SelectorToolbar.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import { Input, Select } from "@/components/ui"
+import { TYPE_OPTIONS } from "./constants"
+import { QUALITY_OPTIONS } from "@/api/template-editor"
+import type { ViewMode } from "./types"
+
+interface SelectorToolbarProps {
+  searchText: string
+  filterType: string
+  filterQuality: string
+  viewMode: ViewMode
+  showQualityFilter: boolean
+  onSearchChange: (value: string) => void
+  onTypeChange: (value: string) => void
+  onQualityChange: (value: string) => void
+  onViewModeChange: (mode: ViewMode) => void
+}
+
+const SelectorToolbar: React.FC<SelectorToolbarProps> = ({
+  searchText,
+  filterType,
+  filterQuality,
+  viewMode,
+  showQualityFilter,
+  onSearchChange,
+  onTypeChange,
+  onQualityChange,
+  onViewModeChange,
+}) => {
+  return (
+    <div className="as-toolbar">
+      <div className="as-toolbar-left">
+        <div className="as-search">
+          <Input
+            placeholder="搜索素材..."
+            value={searchText}
+            onChange={(e) => onSearchChange(e.target.value)}
+            prefix="🔍"
+          />
+        </div>
+        <Select
+          value={filterType}
+          onChange={(v: string) => onTypeChange(v)}
+          options={TYPE_OPTIONS}
+        />
+        {showQualityFilter && (
+          <Select
+            value={filterQuality}
+            onChange={(v: string) => onQualityChange(v)}
+            options={QUALITY_OPTIONS}
+          />
+        )}
+      </div>
+      <div className="as-toolbar-right">
+        <button
+          className={`as-view-btn${viewMode === "grid" ? " active" : ""}`}
+          onClick={() => onViewModeChange("grid")}
+          title="网格视图"
+        >
+          ⊞
+        </button>
+        <button
+          className={`as-view-btn${viewMode === "list" ? " active" : ""}`}
+          onClick={() => onViewModeChange("list")}
+          title="列表视图"
+        >
+          ☰
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default SelectorToolbar

apps/web/src/components/asset-selector/constants.ts

@@ -0,0 +1,7 @@
+/** 类型筛选选项 */
+export const TYPE_OPTIONS = [
+  { value: "", label: "全部类型" },
+  { value: "video", label: "🎬 视频" },
+  { value: "image", label: "🖼️ 图片" },
+  { value: "audio", label: "🎵 音频" },
+]

apps/web/src/components/asset-selector/hooks/useAssetFilter.ts

@@ -0,0 +1,63 @@
+import { useState, useMemo } from "react"
+import type { MediaAsset } from "@/api/template-editor"
+import { QUALITY_OPTIONS } from "@/api/template-editor"
+import type { ViewMode } from "../types"
+
+interface UseAssetFilterReturn {
+  searchText: string
+  filterType: string
+  filterQuality: string
+  viewMode: ViewMode
+  filteredAssets: MediaAsset[]
+  setSearchText: (value: string) => void
+  setFilterType: (value: string) => void
+  setFilterQuality: (value: string) => void
+  setViewMode: (mode: ViewMode) => void
+}
+
+/**
+ * 素材筛选 Hook —— 搜索 + 类型 + 质量分 + 视图切换
+ */
+const useAssetFilter = (assets: MediaAsset[]): UseAssetFilterReturn => {
+  const [searchText, setSearchText] = useState("")
+  const [filterType, setFilterType] = useState("")
+  const [filterQuality, setFilterQuality] = useState("")
+  const [viewMode, setViewMode] = useState<ViewMode>("grid")
+
+  const filteredAssets = useMemo(() => {
+    let list = assets
+    if (searchText) {
+      const q = searchText.toLowerCase()
+      list = list.filter(
+        (a) => a.name.toLowerCase().includes(q) || a.tags.some((t) => t.toLowerCase().includes(q)),
+      )
+    }
+    if (filterType) {
+      list = list.filter((a) => a.type === filterType)
+    }
+    if (filterQuality) {
+      const opt = QUALITY_OPTIONS.find((o) => o.value === filterQuality)
+      if (opt?.min != null && opt?.max != null) {
+        list = list.filter(
+          (a) =>
+            a.quality_score != null && a.quality_score >= opt.min! && a.quality_score <= opt.max!,
+        )
+      }
+    }
+    return list
+  }, [assets, searchText, filterType, filterQuality])
+
+  return {
+    searchText,
+    filterType,
+    filterQuality,
+    viewMode,
+    filteredAssets,
+    setSearchText,
+    setFilterType,
+    setFilterQuality,
+    setViewMode,
+  }
+}
+
+export default useAssetFilter

apps/web/src/components/asset-selector/hooks/useAssetPreview.ts

@@ -0,0 +1,54 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+import type { MediaAsset } from "@/api/template-editor"
+
+interface UseAssetPreviewReturn {
+  previewAsset: MediaAsset | null
+  previewPos: { x: number; y: number }
+  handleMouseEnter: (asset: MediaAsset, e: React.MouseEvent) => void
+  handleMouseLeave: () => void
+}
+
+/**
+ * 悬浮预览 Hook —— 延迟 400ms 显示预览浮层
+ */
+const useAssetPreview = (): UseAssetPreviewReturn => {
+  const [previewAsset, setPreviewAsset] = useState<MediaAsset | null>(null)
+  const [previewPos, setPreviewPos] = useState({ x: 0, y: 0 })
+  const previewTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleMouseEnter = useCallback((asset: MediaAsset, e: React.MouseEvent) => {
+    if (previewTimer.current) clearTimeout(previewTimer.current)
+    previewTimer.current = setTimeout(() => {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+      setPreviewAsset(asset)
+      setPreviewPos({
+        x: rect.right + 12,
+        y: Math.max(8, rect.top - 20),
+      })
+    }, 400)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    if (previewTimer.current) {
+      clearTimeout(previewTimer.current)
+      previewTimer.current = null
+    }
+    setPreviewAsset(null)
+  }, [])
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (previewTimer.current) clearTimeout(previewTimer.current)
+    }
+  }, [])
+
+  return {
+    previewAsset,
+    previewPos,
+    handleMouseEnter,
+    handleMouseLeave,
+  }
+}
+
+export default useAssetPreview

apps/web/src/components/asset-selector/hooks/useAssetSelection.ts

@@ -0,0 +1,65 @@
+import { useCallback, useRef, useMemo } from "react"
+import type { MediaAsset } from "@/api/template-editor"
+
+interface UseAssetSelectionOptions {
+  filteredAssets: MediaAsset[]
+  selectedIds: string[]
+  onSelectionChange?: (ids: string[]) => void
+}
+
+interface UseAssetSelectionReturn {
+  selectedSet: Set<string>
+  toggleSelect: (asset: MediaAsset, idx: number, shiftKey: boolean) => void
+  clearSelection: () => void
+}
+
+/**
+ * 素材选择 Hook —— 单选/多选/Shift 连选
+ */
+const useAssetSelection = ({
+  filteredAssets,
+  selectedIds,
+  onSelectionChange,
+}: UseAssetSelectionOptions): UseAssetSelectionReturn => {
+  const lastClickedIdx = useRef<number | null>(null)
+
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])
+
+  const toggleSelect = useCallback(
+    (asset: MediaAsset, idx: number, shiftKey: boolean) => {
+      if (!onSelectionChange) return
+
+      if (shiftKey && lastClickedIdx.current !== null) {
+        // Shift 连选
+        const start = Math.min(lastClickedIdx.current, idx)
+        const end = Math.max(lastClickedIdx.current, idx)
+        const rangeIds = filteredAssets.slice(start, end + 1).map((a) => a.id)
+        const newSet = new Set(selectedIds)
+        rangeIds.forEach((id) => newSet.add(id))
+        onSelectionChange(Array.from(newSet))
+      } else {
+        const newSet = new Set(selectedIds)
+        if (newSet.has(asset.id)) {
+          newSet.delete(asset.id)
+        } else {
+          newSet.add(asset.id)
+        }
+        onSelectionChange(Array.from(newSet))
+      }
+      lastClickedIdx.current = idx
+    },
+    [onSelectionChange, selectedIds, filteredAssets],
+  )
+
+  const clearSelection = useCallback(() => {
+    onSelectionChange?.([])
+  }, [onSelectionChange])
+
+  return {
+    selectedSet,
+    toggleSelect,
+    clearSelection,
+  }
+}
+
+export default useAssetSelection

apps/web/src/components/asset-selector/hooks/useDragReorder.ts

@@ -0,0 +1,89 @@
+import { useState, useCallback } from "react"
+import type { MediaAsset } from "@/api/template-editor"
+
+interface UseDragReorderOptions {
+  filteredAssets: MediaAsset[]
+  selectedIds: string[]
+  onAssetDragStart?: (asset: MediaAsset) => void
+  onReorder?: (fromIdx: number, toIdx: number) => void
+}
+
+interface UseDragReorderReturn {
+  dragIdx: number | null
+  dragOverIdx: number | null
+  handleDragStart: (e: React.DragEvent, idx: number) => void
+  handleDragOver: (e: React.DragEvent, idx: number) => void
+  handleDrop: (e: React.DragEvent, toIdx: number) => void
+  handleDragEnd: () => void
+}
+
+/**
+ * 拖拽排序 Hook —— HTML5 DnD，支持批量拖拽携带数据
+ */
+const useDragReorder = ({
+  filteredAssets,
+  selectedIds,
+  onAssetDragStart,
+  onReorder,
+}: UseDragReorderOptions): UseDragReorderReturn => {
+  const [dragIdx, setDragIdx] = useState<number | null>(null)
+  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, idx: number) => {
+      setDragIdx(idx)
+      e.dataTransfer.effectAllowed = "move"
+      e.dataTransfer.setData("text/plain", String(idx))
+      // 设置素材数据，供 TimelinePanel 接收
+      e.dataTransfer.setData("application/x-media-asset", JSON.stringify(filteredAssets[idx]))
+      // 批量拖拽：如果有多个选中素材，一起携带
+      if (selectedIds.length > 1 && selectedIds.includes(filteredAssets[idx].id)) {
+        const batchAssets = filteredAssets.filter((a) => selectedIds.includes(a.id))
+        e.dataTransfer.setData("application/x-media-assets", JSON.stringify(batchAssets))
+      }
+      // 通知父组件素材拖拽开始
+      if (onAssetDragStart) {
+        onAssetDragStart(filteredAssets[idx])
+      }
+    },
+    [filteredAssets, selectedIds, onAssetDragStart],
+  )
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, idx: number) => {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = "move"
+      if (dragIdx === null || dragIdx === idx) return
+      setDragOverIdx(idx)
+    },
+    [dragIdx],
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, toIdx: number) => {
+      e.preventDefault()
+      if (dragIdx !== null && dragIdx !== toIdx && onReorder) {
+        onReorder(dragIdx, toIdx)
+      }
+      setDragIdx(null)
+      setDragOverIdx(null)
+    },
+    [dragIdx, onReorder],
+  )
+
+  const handleDragEnd = useCallback(() => {
+    setDragIdx(null)
+    setDragOverIdx(null)
+  }, [])
+
+  return {
+    dragIdx,
+    dragOverIdx,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+  }
+}
+
+export default useDragReorder

apps/web/src/components/asset-selector/index.ts

@@ -1,2 +1,2 @@
 export { default as AssetSelector } from "./AssetSelector"
-export type { AssetSelectorProps } from "./AssetSelector"
+export type { AssetSelectorProps, ViewMode } from "./types"

apps/web/src/components/asset-selector/types/index.ts

@@ -0,0 +1,14 @@
+import type { MediaAsset } from "@/api/template-editor"
+
+export interface AssetSelectorProps {
+  assets: MediaAsset[]
+  selectedIds?: string[]
+  onSelectionChange?: (ids: string[]) => void
+  onAssetDragStart?: (asset: MediaAsset) => void
+  onReorder?: (fromIdx: number, toIdx: number) => void
+  showQualityFilter?: boolean
+  showBatchSelect?: boolean
+  compact?: boolean
+}
+
+export type ViewMode = "grid" | "list"

apps/web/src/components/asset-selector/utils/index.ts

@@ -0,0 +1,33 @@
+/** 格式化文件大小 */
+export const formatSize = (bytes?: number): string => {
+  if (!bytes) return ""
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+}
+
+/** 格式化时长 */
+export const formatDuration = (seconds?: number): string => {
+  if (!seconds) return ""
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return m > 0 ? `${m}:${s.toString().padStart(2, "0")}` : `${s}s`
+}
+
+/** 获取质量分等级 */
+export const getQualityLevel = (score?: number): string => {
+  if (score == null) return "none"
+  if (score >= 90) return "excellent"
+  if (score >= 70) return "good"
+  if (score >= 50) return "fair"
+  return "poor"
+}
+
+/** 质量分颜色 */
+export const getQualityColor = (score?: number): string => {
+  if (score == null) return "var(--text-secondary)"
+  if (score >= 90) return "var(--success-color, #10b981)"
+  if (score >= 70) return "var(--primary-color, #6366f1)"
+  if (score >= 50) return "var(--warning-color, #f59e0b)"
+  return "var(--error-color, #ef4444)"
+}

apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx

@@ -9,7 +9,7 @@
  * - 删除素材
  */
 import React from "react"
-import { AudioOutlined, PlusOutlined, RobotOutlined } from "@ant-design/icons"
+import { PlusOutlined, RobotOutlined } from "@ant-design/icons"
 import { Button, Modal } from "@/components/ui"
 import PageHead from "@/components/layout/PageHead"
 import { useVoiceMaterials } from "./hooks/useVoiceMaterials"
@@ -315,8 +315,8 @@ const VoiceMaterialLibrary: React.FC = () => {
           voiceId={ttsVoiceId}
           speed={ttsSpeed}
           status={ttsStatus}
-          audioUrl={ttsAudioUrl}
-          error={ttsError}
+          audioUrl={ttsAudioUrl ?? ""}
+          error={ttsError ?? ""}
           presetVoices={presetVoices}
           onClose={handleTtsClose}
           onTextChange={setTtsText}

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

@@ -35,7 +35,7 @@ const TtsModal: React.FC<TtsModalProps> = ({
   audioUrl,
   error,
   presetVoices,
-  onClose,
+  onClose: _onClose,
   onTextChange,
   onVoiceChange,
   onSpeedChange,

apps/web/src/test/pages/editing-planner/smoke.test.tsx

@@ -104,3 +104,17 @@ describe("EditingPlanner module smoke test", () => {
     expect(true).toBe(true)
   })
 })
+
+// 公共组件（通过 MediaPanel 间接依赖，显式引入确保 related 模式覆盖）
+import "@/components/asset-selector"
+import "@/components/asset-selector/AssetSelector"
+import "@/components/asset-selector/AssetCard"
+import "@/components/asset-selector/AssetListItem"
+import "@/components/asset-selector/SelectorToolbar"
+import "@/components/asset-selector/SelectorBatchBar"
+import "@/components/asset-selector/PreviewOverlay"
+import "@/components/asset-selector/EmptyState"
+import "@/components/asset-selector/hooks/useAssetFilter"
+import "@/components/asset-selector/hooks/useAssetSelection"
+import "@/components/asset-selector/hooks/useAssetPreview"
+import "@/components/asset-selector/hooks/useDragReorder"