fix: 统一 ResultCard id 参数类型为 string

- 抽 types/constants/utils 为独立文件
- 抽 3 个 UI 组件：FilterBar / EmptyState / ResultCard
- 抽业务 Hook：useDuplicationResults
- 主文件精简为纯组合层，保持导入路径向后兼容

apps/web/src/pages/duplication/DuplicationResults.tsx

@@ -2,130 +2,27 @@
  * 查重结果列表页面 — V21 设计系统
  * 胶囊筛选 + 卡片列表，零 antd 依赖
  */
-import React, { useState, useMemo } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { Button, Tag, Tooltip } from "@/components/ui"
-import { useNavigate } from "react-router-dom"
-import {
-  getDuplicationRecords,
-  deleteDuplicationRecord,
-  retryDuplication,
-  type DuplicationStatus,
-} from "@/api/duplication"
-import "./duplication.css"
+import React from "react"
+import { Button } from "@/components/ui"
 import PageHead from "@/components/layout/PageHead"
-
-/** 风险等级分类 */
-type RiskFilter = "all" | "high" | "medium" | "low"
-
-/** 状态配置 */
-const STATUS_CONFIG: Record<
-  DuplicationStatus,
-  {
-    variant: "primary" | "warning" | "success" | "error"
-    text: string
-    icon: string
-  }
-> = {
-  pending: { variant: "primary", text: "等待中", icon: "⏳" },
-  processing: { variant: "warning", text: "查重中", icon: "🔄" },
-  completed: { variant: "success", text: "已完成", icon: "✅" },
-  failed: { variant: "error", text: "失败", icon: "❌" },
-}
-
-/** 根据查重率获取风险等级 */
-const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
-  if (rate === undefined) return "low"
-  if (rate <= 10) return "low"
-  if (rate <= 30) return "medium"
-  return "high"
-}
-
-/** 风险等级标签 */
-const RISK_LABELS: Record<string, string> = {
-  low: "低风险",
-  medium: "中风险",
-  high: "高风险",
-}
-
-/** 格式化文件大小 */
-const formatSize = (bytes: number) => {
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
-}
-
-/** 格式化时长 */
-const formatDuration = (seconds?: number) => {
-  if (!seconds) return "-"
-  const totalSec = Math.round(seconds)
-  const m = Math.floor(totalSec / 60)
-  const s = totalSec % 60
-  return m > 0 ? `${m}分${s}秒` : `${s}秒`
-}
-
-/** 简易 toast */
-interface ToastState {
-  message: string
-  type: "success" | "error" | "warning"
-}
-
-const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
-  { key: "all", label: "全部" },
-  { key: "low", label: "低风险" },
-  { key: "medium", label: "中风险" },
-  { key: "high", label: "高风险" },
-]
+import "./duplication.css"
+import useDuplicationResults from "./hooks/useDuplicationResults"
+import FilterBar from "./components/FilterBar"
+import EmptyState from "./components/EmptyState"
+import ResultCard from "./components/ResultCard"
 
 const DuplicationResults: React.FC = () => {
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
-  const [toast, setToast] = useState<ToastState | null>(null)
-
-  const showToast = (message: string, type: "success" | "error" | "warning") => {
-    setToast({ message, type })
-    setTimeout(() => setToast(null), 3000)
-  }
-
-  // 获取查重记录
-  const { data: records = [], isLoading } = useQuery({
-    queryKey: ["duplication-records"],
-    queryFn: getDuplicationRecords,
-  })
-
-  // 删除
-  const deleteMutation = useMutation({
-    mutationFn: deleteDuplicationRecord,
-    onSuccess: () => {
-      showToast("已删除", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("删除失败", "error")
-    },
-  })
-
-  // 重新查重
-  const retryMutation = useMutation({
-    mutationFn: retryDuplication,
-    onSuccess: () => {
-      showToast("已重新提交查重", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("重新查重失败", "error")
-    },
-  })
-
-  /** 按风险等级筛选 */
-  const filteredRecords = useMemo(() => {
-    if (riskFilter === "all") return records
-    return records.filter((r) => {
-      if (r.status !== "completed") return riskFilter === "low"
-      return getRiskLevel(r.duplicate_rate) === riskFilter
-    })
-  }, [records, riskFilter])
+  const {
+    isLoading,
+    filteredRecords,
+    riskFilter,
+    setRiskFilter,
+    toast,
+    handleDelete,
+    handleRetry,
+    handleView,
+    handleUpload,
+  } = useDuplicationResults()
 
   return (
     <div className="dup-page">
@@ -136,136 +33,31 @@ const DuplicationResults: React.FC = () => {
         title="查重记录"
         actions={
           <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-            {/* 筛选胶囊 */}
-            <div className="dup-filter">
-              {FILTER_OPTIONS.map((opt) => (
-                <button
-                  key={opt.key}
-                  className={`dup-filter-btn ${riskFilter === opt.key ? "active" : ""}`}
-                  onClick={() => setRiskFilter(opt.key)}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-            <Button
-              buttonType="primary"
-              buttonSize="md"
-              onClick={() => navigate("/app/duplication")}
-            >
+            <FilterBar value={riskFilter} onChange={setRiskFilter} />
+            <Button buttonType="primary" buttonSize="md" onClick={handleUpload}>
               📤 上传查重
             </Button>
           </div>
         }
       />
 
-      {/* 加载中 */}
-      {isLoading && (
-        <div className="dup-results-empty">
-          <div className="dup-results-empty-icon">⏳</div>
-          <p>加载中...</p>
-        </div>
-      )}
-
-      {/* 空状态 */}
-      {!isLoading && filteredRecords.length === 0 && (
-        <div className="dup-results-empty">
-          <div className="dup-results-empty-icon">📭</div>
-          <p>
-            {riskFilter === "all"
-              ? "暂无查重记录，上传视频开始查重吧"
-              : `没有${RISK_LABELS[riskFilter]}的记录`}
-          </p>
-        </div>
+      {/* 加载中 / 空状态 */}
+      {(isLoading || filteredRecords.length === 0) && (
+        <EmptyState isLoading={isLoading} riskFilter={riskFilter} />
       )}
 
       {/* 结果卡片列表 */}
       {!isLoading && filteredRecords.length > 0 && (
         <div className="dup-results-list">
-          {filteredRecords.map((record) => {
-            const statusCfg = STATUS_CONFIG[record.status]
-            const riskLevel = getRiskLevel(record.duplicate_rate)
-            const rateValue = record.duplicate_rate
-
-            return (
-              <div
-                key={record.id}
-                className="dup-result-card"
-                onClick={() => {
-                  if (record.status === "completed") {
-                    navigate(`/duplication/${record.id}`)
-                  }
-                }}
-              >
-                {/* 缩略图 */}
-                <div className="dup-result-card-thumb">🎬</div>
-
-                {/* 信息区 */}
-                <div className="dup-result-card-body">
-                  <h4>{record.filename}</h4>
-                  <div className="dup-result-card-meta">
-                    <Tag variant={statusCfg.variant}>
-                      {statusCfg.icon} {statusCfg.text}
-                    </Tag>
-                    <span>{formatSize(record.file_size)}</span>
-                    <span>{formatDuration(record.duration_seconds)}</span>
-                    <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
-                    {record.status === "completed" && record.duplicate_count !== undefined && (
-                      <span>{record.duplicate_count} 个重复片段</span>
-                    )}
-                  </div>
-                </div>
-
-                {/* 查重率 */}
-                <div className="dup-result-card-score">
-                  {record.status === "completed" && rateValue !== undefined ? (
-                    <>
-                      <div className="dup-score-bar">
-                        <div
-                          className={`dup-score-bar-fill ${riskLevel}`}
-                          style={{ width: `${Math.min(rateValue, 100)}%` }}
-                        />
-                      </div>
-                      <span className={`dup-score-value ${riskLevel}`}>
-                        {rateValue.toFixed(1)}%
-                      </span>
-                    </>
-                  ) : record.status === "failed" ? (
-                    <Tooltip title="重新查重">
-                      <Button
-                        buttonType="ghost"
-                        buttonSize="sm"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          retryMutation.mutate(record.id)
-                        }}
-                      >
-                        🔄 重试
-                      </Button>
-                    </Tooltip>
-                  ) : (
-                    <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
-                      {record.status === "processing" ? "分析中..." : "—"}
-                    </span>
-                  )}
-                </div>
-
-                {/* 删除按钮 */}
-                <Button
-                  buttonType="ghost"
-                  buttonSize="sm"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    if (window.confirm("确定删除此记录？")) {
-                      deleteMutation.mutate(record.id)
-                    }
-                  }}
-                >
-                  🗑️
-                </Button>
-              </div>
-            )
-          })}
+          {filteredRecords.map((record) => (
+            <ResultCard
+              key={record.id}
+              record={record}
+              onView={handleView}
+              onDelete={handleDelete}
+              onRetry={handleRetry}
+            />
+          ))}
         </div>
       )}
     </div>

apps/web/src/pages/duplication/components/EmptyState.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { RISK_LABELS } from "../constants"
+import type { RiskFilter } from "../types"
+
+interface EmptyStateProps {
+  isLoading: boolean
+  riskFilter: RiskFilter
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ isLoading, riskFilter }) => {
+  if (isLoading) {
+    return (
+      <div className="dup-results-empty">
+        <div className="dup-results-empty-icon">⏳</div>
+        <p>加载中...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="dup-results-empty">
+      <div className="dup-results-empty-icon">📭</div>
+      <p>
+        {riskFilter === "all"
+          ? "暂无查重记录，上传视频开始查重吧"
+          : `没有${RISK_LABELS[riskFilter]}的记录`}
+      </p>
+    </div>
+  )
+}
+
+export default EmptyState

apps/web/src/pages/duplication/components/FilterBar.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import type { RiskFilter } from "../types"
+import { FILTER_OPTIONS } from "../constants"
+
+interface FilterBarProps {
+  value: RiskFilter
+  onChange: (value: RiskFilter) => void
+}
+
+const FilterBar: React.FC<FilterBarProps> = ({ value, onChange }) => {
+  return (
+    <div className="dup-filter">
+      {FILTER_OPTIONS.map((opt) => (
+        <button
+          key={opt.key}
+          className={`dup-filter-btn ${value === opt.key ? "active" : ""}`}
+          onClick={() => onChange(opt.key)}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default FilterBar

apps/web/src/pages/duplication/components/ResultCard.tsx

@@ -0,0 +1,95 @@
+import React from "react"
+import { Button, Tag, Tooltip } from "@/components/ui"
+import type { DuplicationRecord } from "@/api/duplication"
+import { STATUS_CONFIG } from "../constants"
+import { getRiskLevel, formatSize, formatDuration } from "../utils"
+
+interface ResultCardProps {
+  record: DuplicationRecord
+  onView: (id: string) => void
+  onDelete: (id: string) => void
+  onRetry: (id: string) => void
+}
+
+const ResultCard: React.FC<ResultCardProps> = ({ record, onView, onDelete, onRetry }) => {
+  const statusCfg = STATUS_CONFIG[record.status]
+  const riskLevel = getRiskLevel(record.duplicate_rate)
+  const rateValue = record.duplicate_rate
+
+  const handleClick = () => {
+    if (record.status === "completed") {
+      onView(record.id)
+    }
+  }
+
+  return (
+    <div key={record.id} className="dup-result-card" onClick={handleClick}>
+      {/* 缩略图 */}
+      <div className="dup-result-card-thumb">🎬</div>
+
+      {/* 信息区 */}
+      <div className="dup-result-card-body">
+        <h4>{record.filename}</h4>
+        <div className="dup-result-card-meta">
+          <Tag variant={statusCfg.variant}>
+            {statusCfg.icon} {statusCfg.text}
+          </Tag>
+          <span>{formatSize(record.file_size)}</span>
+          <span>{formatDuration(record.duration_seconds)}</span>
+          <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
+          {record.status === "completed" && record.duplicate_count !== undefined && (
+            <span>{record.duplicate_count} 个重复片段</span>
+          )}
+        </div>
+      </div>
+
+      {/* 查重率 */}
+      <div className="dup-result-card-score">
+        {record.status === "completed" && rateValue !== undefined ? (
+          <>
+            <div className="dup-score-bar">
+              <div
+                className={`dup-score-bar-fill ${riskLevel}`}
+                style={{ width: `${Math.min(rateValue, 100)}%` }}
+              />
+            </div>
+            <span className={`dup-score-value ${riskLevel}`}>{rateValue.toFixed(1)}%</span>
+          </>
+        ) : record.status === "failed" ? (
+          <Tooltip title="重新查重">
+            <Button
+              buttonType="ghost"
+              buttonSize="sm"
+              onClick={(e) => {
+                e.stopPropagation()
+                onRetry(record.id)
+              }}
+            >
+              🔄 重试
+            </Button>
+          </Tooltip>
+        ) : (
+          <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+            {record.status === "processing" ? "分析中..." : "—"}
+          </span>
+        )}
+      </div>
+
+      {/* 删除按钮 */}
+      <Button
+        buttonType="ghost"
+        buttonSize="sm"
+        onClick={(e) => {
+          e.stopPropagation()
+          if (window.confirm("确定删除此记录？")) {
+            onDelete(record.id)
+          }
+        }}
+      >
+        🗑️
+      </Button>
+    </div>
+  )
+}
+
+export default ResultCard

apps/web/src/pages/duplication/constants.ts

@@ -0,0 +1,31 @@
+import type { DuplicationStatus } from "@/api/duplication"
+import type { RiskFilter } from "./types"
+
+/** 状态配置 */
+export const STATUS_CONFIG: Record<
+  DuplicationStatus,
+  {
+    variant: "primary" | "warning" | "success" | "error"
+    text: string
+    icon: string
+  }
+> = {
+  pending: { variant: "primary", text: "等待中", icon: "⏳" },
+  processing: { variant: "warning", text: "查重中", icon: "🔄" },
+  completed: { variant: "success", text: "已完成", icon: "✅" },
+  failed: { variant: "error", text: "失败", icon: "❌" },
+}
+
+/** 风险等级标签 */
+export const RISK_LABELS: Record<string, string> = {
+  low: "低风险",
+  medium: "中风险",
+  high: "高风险",
+}
+
+export const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
+  { key: "all", label: "全部" },
+  { key: "low", label: "低风险" },
+  { key: "medium", label: "中风险" },
+  { key: "high", label: "高风险" },
+]

apps/web/src/pages/duplication/hooks/useDuplicationResults.ts

@@ -0,0 +1,106 @@
+import { useState, useMemo } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "react-router-dom"
+import {
+  getDuplicationRecords,
+  deleteDuplicationRecord,
+  retryDuplication,
+  type DuplicationRecord,
+} from "@/api/duplication"
+import type { RiskFilter, ToastState } from "../types"
+import { getRiskLevel } from "../utils"
+
+interface UseDuplicationResultsReturn {
+  records: DuplicationRecord[]
+  isLoading: boolean
+  filteredRecords: DuplicationRecord[]
+  riskFilter: RiskFilter
+  setRiskFilter: (filter: RiskFilter) => void
+  toast: ToastState | null
+  handleDelete: (id: string) => void
+  handleRetry: (id: string) => void
+  handleView: (id: string) => void
+  handleUpload: () => void
+}
+
+const useDuplicationResults = (): UseDuplicationResultsReturn => {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
+  const [toast, setToast] = useState<ToastState | null>(null)
+
+  const showToast = (message: string, type: "success" | "error" | "warning") => {
+    setToast({ message, type })
+    setTimeout(() => setToast(null), 3000)
+  }
+
+  // 获取查重记录
+  const { data: records = [], isLoading } = useQuery({
+    queryKey: ["duplication-records"],
+    queryFn: getDuplicationRecords,
+  })
+
+  // 删除
+  const deleteMutation = useMutation({
+    mutationFn: deleteDuplicationRecord,
+    onSuccess: () => {
+      showToast("已删除", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("删除失败", "error")
+    },
+  })
+
+  // 重新查重
+  const retryMutation = useMutation({
+    mutationFn: retryDuplication,
+    onSuccess: () => {
+      showToast("已重新提交查重", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("重新查重失败", "error")
+    },
+  })
+
+  /** 按风险等级筛选 */
+  const filteredRecords = useMemo(() => {
+    if (riskFilter === "all") return records
+    return records.filter((r) => {
+      if (r.status !== "completed") return riskFilter === "low"
+      return getRiskLevel(r.duplicate_rate) === riskFilter
+    })
+  }, [records, riskFilter])
+
+  const handleDelete = (id: string) => {
+    deleteMutation.mutate(id)
+  }
+
+  const handleRetry = (id: string) => {
+    retryMutation.mutate(id)
+  }
+
+  const handleView = (id: string) => {
+    navigate(`/duplication/${id}`)
+  }
+
+  const handleUpload = () => {
+    navigate("/app/duplication")
+  }
+
+  return {
+    records,
+    isLoading,
+    filteredRecords,
+    riskFilter,
+    setRiskFilter,
+    toast,
+    handleDelete,
+    handleRetry,
+    handleView,
+    handleUpload,
+  }
+}
+
+export default useDuplicationResults

apps/web/src/pages/duplication/types.ts

@@ -0,0 +1,8 @@
+/** 风险等级分类 */
+export type RiskFilter = "all" | "high" | "medium" | "low"
+
+/** 简易 toast */
+export interface ToastState {
+  message: string
+  type: "success" | "error" | "warning"
+}

apps/web/src/pages/duplication/utils.ts

@@ -0,0 +1,23 @@
+/** 根据查重率获取风险等级 */
+export const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
+  if (rate === undefined) return "low"
+  if (rate <= 10) return "low"
+  if (rate <= 30) return "medium"
+  return "high"
+}
+
+/** 格式化文件大小 */
+export const formatSize = (bytes: number) => {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+/** 格式化时长 */
+export const formatDuration = (seconds?: number) => {
+  if (!seconds) return "-"
+  const totalSec = Math.round(seconds)
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return m > 0 ? `${m}分${s}秒` : `${s}秒`
+}

apps/web/src/pages/editing-planner/components/CoverSelector.tsx

@@ -1,5 +1,286 @@
 /**
- * 封面选择器入口（向后兼容）
- * 实际实现位于 ./cover-selector/ 目录
+ * 封面选择器
+ * 抽帧选封面 + 上传自定义封面 + 智能封面推荐
  */
-export { default } from "./cover-selector"
+import React, { useCallback, useRef, useState } from "react"
+import { Drawer } from "antd"
+import type { CoverConfig, CoverMode } from "../types"
+import { DEFAULT_COVER_CONFIG } from "../types"
+
+interface CoverSelectorProps {
+  open: boolean
+  onClose: () => void
+  config: CoverConfig
+  onChange: (config: CoverConfig) => void
+  totalDuration: number
+}
+
+/** 封面模式标签 */
+const MODE_LABELS: Record<CoverMode, string> = {
+  auto: "智能封面",
+  frame: "抽帧选封面",
+  upload: "上传封面",
+}
+
+/** 封面模式图标 */
+const MODE_ICONS: Record<CoverMode, string> = {
+  auto: "🤖",
+  frame: "🎞️",
+  upload: "📤",
+}
+
+const CoverSelector: React.FC<CoverSelectorProps> = ({
+  open,
+  onClose,
+  config,
+  onChange,
+  totalDuration,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const update = useCallback(
+    (partial: Partial<CoverConfig>) => {
+      onChange({ ...config, ...partial })
+    },
+    [config, onChange],
+  )
+
+  const handleReset = useCallback(() => {
+    onChange({ ...DEFAULT_COVER_CONFIG, enabled: config.enabled })
+  }, [config.enabled, onChange])
+
+  /** 切换模式 */
+  const handleModeChange = useCallback(
+    (mode: CoverMode) => {
+      update({ mode })
+    },
+    [update],
+  )
+
+  /** 处理文件上传 */
+  const handleFileUpload = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) return
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const url = e.target?.result as string
+        update({ upload_url: url, thumbnail_url: url, mode: "upload" })
+      }
+      reader.readAsDataURL(file)
+    },
+    [update],
+  )
+
+  /** 拖拽上传 */
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      const file = e.dataTransfer.files[0]
+      if (file) handleFileUpload(file)
+    },
+    [handleFileUpload],
+  )
+
+  /** 使用 AI 推荐时间 */
+  const handleUseAiSuggestion = useCallback(() => {
+    if (config.ai_suggested_time !== null) {
+      update({ frame_time: config.ai_suggested_time, mode: "frame" })
+    }
+  }, [config.ai_suggested_time, update])
+
+  /** 格式化时间 */
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60)
+    const s = Math.floor(seconds % 60)
+    const ms = Math.floor((seconds % 1) * 10)
+    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}.${ms}`
+  }
+
+  return (
+    <Drawer
+      title="封面选择"
+      placement="right"
+      width={440}
+      open={open}
+      onClose={onClose}
+      className="cover-selector-drawer"
+    >
+      {/* 顶部开关 */}
+      <div className="cover-header">
+        <span className="cover-header-label">启用自定义封面</span>
+        <label className="cover-switch">
+          <input
+            type="checkbox"
+            checked={config.enabled}
+            onChange={(e) => update({ enabled: e.target.checked })}
+          />
+          <span className="cover-switch-slider" />
+        </label>
+      </div>
+
+      {/* 模式选择 */}
+      <div className="cover-mode-section">
+        <div className="cover-section-title">封面来源</div>
+        <div className="cover-mode-tabs">
+          {(["auto", "frame", "upload"] as CoverMode[]).map((m) => (
+            <button
+              key={m}
+              className={`cover-mode-tab${config.mode === m ? " active" : ""}`}
+              onClick={() => handleModeChange(m)}
+            >
+              <span className="cover-mode-icon">{MODE_ICONS[m]}</span>
+              <span className="cover-mode-label">{MODE_LABELS[m]}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 模式内容区 */}
+      <div className="cover-mode-content">
+        {/* 智能封面 */}
+        {config.mode === "auto" && (
+          <div className="cover-auto-section">
+            <div className="cover-auto-desc">
+              AI 将分析视频内容，自动选择最具吸引力的画面作为封面。
+            </div>
+            {config.ai_suggested_time !== null ? (
+              <div className="cover-auto-suggestion">
+                <div className="cover-auto-badge">AI 推荐</div>
+                <div className="cover-auto-time">
+                  推荐时间点：{formatTime(config.ai_suggested_time)}
+                </div>
+                <button className="cover-auto-use-btn" onClick={handleUseAiSuggestion}>
+                  使用此时间点
+                </button>
+              </div>
+            ) : (
+              <div className="cover-auto-pending">
+                <div className="cover-auto-spinner" />
+                <span>AI 分析中...（生成视频后自动推荐）</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 抽帧选封面 */}
+        {config.mode === "frame" && (
+          <div className="cover-frame-section">
+            <div className="cover-frame-preview">
+              <div className="cover-frame-placeholder">
+                <span className="cover-frame-icon">🎞️</span>
+                <span className="cover-frame-time">{formatTime(config.frame_time)}</span>
+              </div>
+            </div>
+            <div className="cover-frame-timeline">
+              <div className="cover-frame-slider-header">
+                <span className="cover-frame-slider-label">拖动选择封面帧</span>
+                <span className="cover-frame-slider-value">{formatTime(config.frame_time)}</span>
+              </div>
+              <input
+                type="range"
+                className="cover-frame-slider"
+                min={0}
+                max={Math.max(totalDuration, 1)}
+                step={0.1}
+                value={config.frame_time}
+                onChange={(e) => update({ frame_time: Number(e.target.value) })}
+              />
+              <div className="cover-frame-range">
+                <span>00:00</span>
+                <span>{formatTime(totalDuration)}</span>
+              </div>
+            </div>
+            {/* 快捷时间点 */}
+            <div className="cover-frame-quick">
+              <span className="cover-quick-label">快捷选帧：</span>
+              {[0, 0.25, 0.5, 0.75].map((ratio) => {
+                const t = totalDuration * ratio
+                return (
+                  <button
+                    key={ratio}
+                    className="cover-quick-btn"
+                    onClick={() => update({ frame_time: t })}
+                  >
+                    {formatTime(t)}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* 上传封面 */}
+        {config.mode === "upload" && (
+          <div className="cover-upload-section">
+            <div
+              className={`cover-upload-area${isDragging ? " dragging" : ""}`}
+              onDragOver={(e) => {
+                e.preventDefault()
+                setIsDragging(true)
+              }}
+              onDragLeave={() => setIsDragging(false)}
+              onDrop={handleDrop}
+              onClick={() => fileInputRef.current?.click()}
+            >
+              {config.upload_url ? (
+                <div className="cover-upload-preview">
+                  <img src={config.upload_url} alt="封面预览" />
+                  <div className="cover-upload-overlay">点击更换</div>
+                </div>
+              ) : (
+                <div className="cover-upload-placeholder">
+                  <span className="cover-upload-icon">📤</span>
+                  <span className="cover-upload-text">点击或拖拽上传封面图片</span>
+                  <span className="cover-upload-hint">支持 JPG / PNG，建议 16:9 比例</span>
+                </div>
+              )}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                style={{ display: "none" }}
+                onChange={(e) => {
+                  const file = e.target.files?.[0]
+                  if (file) handleFileUpload(file)
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 封面预览 */}
+      <div className="cover-preview-section">
+        <div className="cover-section-title">封面预览</div>
+        <div className="cover-preview-box">
+          {config.upload_url ? (
+            <img src={config.upload_url} alt="封面预览" className="cover-preview-img" />
+          ) : (
+            <div className="cover-preview-placeholder">
+              <span className="cover-preview-icon">🖼️</span>
+              <span className="cover-preview-text">
+                {config.mode === "auto"
+                  ? "AI 智能选择"
+                  : config.mode === "frame"
+                    ? `帧 ${formatTime(config.frame_time)}`
+                    : "未上传封面"}
+              </span>
+            </div>
+          )}
+          <div className="cover-preview-ratio">16:9</div>
+        </div>
+      </div>
+
+      {/* 底部 */}
+      <div className="cover-footer">
+        <button className="cover-reset-btn" onClick={handleReset}>
+          重置封面
+        </button>
+      </div>
+    </Drawer>
+  )
+}
+
+export default CoverSelector

apps/web/src/pages/editing-planner/components/cover-selector/CoverModePanels.tsx

@@ -1,143 +0,0 @@
-import React from "react"
-import type { CoverConfig } from "../../types"
-
-interface CoverAutoModeProps {
-  config: CoverConfig
-  formatTime: (s: number) => string
-  onUseAiSuggestion: () => void
-}
-
-/** 智能封面模式面板 */
-export const CoverAutoMode: React.FC<CoverAutoModeProps> = ({
-  config,
-  formatTime,
-  onUseAiSuggestion,
-}) => (
-  <div className="cover-auto-section">
-    <div className="cover-auto-desc">AI 将分析视频内容，自动选择最具吸引力的画面作为封面。</div>
-    {config.ai_suggested_time !== null ? (
-      <div className="cover-auto-suggestion">
-        <div className="cover-auto-badge">AI 推荐</div>
-        <div className="cover-auto-time">推荐时间点：{formatTime(config.ai_suggested_time)}</div>
-        <button className="cover-auto-use-btn" onClick={onUseAiSuggestion}>
-          使用此时间点
-        </button>
-      </div>
-    ) : (
-      <div className="cover-auto-pending">
-        <div className="cover-auto-spinner" />
-        <span>AI 分析中...（生成视频后自动推荐）</span>
-      </div>
-    )}
-  </div>
-)
-
-interface CoverFrameModeProps {
-  config: CoverConfig
-  totalDuration: number
-  formatTime: (s: number) => string
-  onFrameTimeChange: (time: number) => void
-}
-
-/** 抽帧选封面模式面板 */
-export const CoverFrameMode: React.FC<CoverFrameModeProps> = ({
-  config,
-  totalDuration,
-  formatTime,
-  onFrameTimeChange,
-}) => (
-  <div className="cover-frame-section">
-    <div className="cover-frame-preview">
-      <div className="cover-frame-placeholder">
-        <span className="cover-frame-icon">🎞️</span>
-        <span className="cover-frame-time">{formatTime(config.frame_time)}</span>
-      </div>
-    </div>
-    <div className="cover-frame-timeline">
-      <div className="cover-frame-slider-header">
-        <span className="cover-frame-slider-label">拖动选择封面帧</span>
-        <span className="cover-frame-slider-value">{formatTime(config.frame_time)}</span>
-      </div>
-      <input
-        type="range"
-        className="cover-frame-slider"
-        min={0}
-        max={Math.max(totalDuration, 1)}
-        step={0.1}
-        value={config.frame_time}
-        onChange={(e) => onFrameTimeChange(Number(e.target.value))}
-      />
-      <div className="cover-frame-range">
-        <span>00:00</span>
-        <span>{formatTime(totalDuration)}</span>
-      </div>
-    </div>
-    <div className="cover-frame-quick">
-      <span className="cover-quick-label">快捷选帧：</span>
-      {[0, 0.25, 0.5, 0.75].map((ratio) => {
-        const t = totalDuration * ratio
-        return (
-          <button key={ratio} className="cover-quick-btn" onClick={() => onFrameTimeChange(t)}>
-            {formatTime(t)}
-          </button>
-        )
-      })}
-    </div>
-  </div>
-)
-
-interface CoverUploadModeProps {
-  config: CoverConfig
-  isDragging: boolean
-  fileInputRef: React.RefObject<HTMLInputElement>
-  onDragOver: (e: React.DragEvent) => void
-  onDragLeave: () => void
-  onDrop: (e: React.DragEvent) => void
-  onAreaClick: () => void
-  onFileChange: (file: File) => void
-}
-
-/** 上传封面模式面板 */
-export const CoverUploadMode: React.FC<CoverUploadModeProps> = ({
-  config,
-  isDragging,
-  fileInputRef,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onAreaClick,
-  onFileChange,
-}) => (
-  <div className="cover-upload-section">
-    <div
-      className={`cover-upload-area${isDragging ? " dragging" : ""}`}
-      onDragOver={onDragOver}
-      onDragLeave={onDragLeave}
-      onDrop={onDrop}
-      onClick={onAreaClick}
-    >
-      {config.upload_url ? (
-        <div className="cover-upload-preview">
-          <img src={config.upload_url} alt="封面预览" />
-          <div className="cover-upload-overlay">点击更换</div>
-        </div>
-      ) : (
-        <div className="cover-upload-placeholder">
-          <span className="cover-upload-icon">📤</span>
-          <span className="cover-upload-text">点击或拖拽上传封面图片</span>
-          <span className="cover-upload-hint">支持 JPG / PNG，建议 16:9 比例</span>
-        </div>
-      )}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        style={{ display: "none" }}
-        onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) onFileChange(file)
-        }}
-      />
-    </div>
-  </div>
-)

apps/web/src/pages/editing-planner/components/cover-selector/index.tsx

@@ -1,146 +0,0 @@
-/**
- * 封面选择器
- * 抽帧选封面 + 上传自定义封面 + 智能封面推荐
- */
-import React from "react"
-import { Drawer } from "antd"
-import type { CoverConfig, CoverMode } from "../../types"
-import { useCoverSelector, MODE_LABELS, MODE_ICONS } from "./useCoverSelector"
-import { CoverAutoMode, CoverFrameMode, CoverUploadMode } from "./CoverModePanels"
-
-interface CoverSelectorProps {
-  open: boolean
-  onClose: () => void
-  config: CoverConfig
-  onChange: (config: CoverConfig) => void
-  totalDuration: number
-}
-
-const CoverSelector: React.FC<CoverSelectorProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-  totalDuration,
-}) => {
-  const {
-    fileInputRef,
-    isDragging,
-    setIsDragging,
-    update,
-    handleReset,
-    handleModeChange,
-    handleFileUpload,
-    handleDrop,
-    handleUseAiSuggestion,
-    formatTime,
-  } = useCoverSelector({ config, onChange })
-
-  return (
-    <Drawer
-      title="封面选择"
-      placement="right"
-      width={440}
-      open={open}
-      onClose={onClose}
-      className="cover-selector-drawer"
-    >
-      {/* 顶部开关 */}
-      <div className="cover-header">
-        <span className="cover-header-label">启用自定义封面</span>
-        <label className="cover-switch">
-          <input
-            type="checkbox"
-            checked={config.enabled}
-            onChange={(e) => update({ enabled: e.target.checked })}
-          />
-          <span className="cover-switch-slider" />
-        </label>
-      </div>
-
-      {/* 模式选择 */}
-      <div className="cover-mode-section">
-        <div className="cover-section-title">封面来源</div>
-        <div className="cover-mode-tabs">
-          {(["auto", "frame", "upload"] as CoverMode[]).map((m) => (
-            <button
-              key={m}
-              className={`cover-mode-tab${config.mode === m ? " active" : ""}`}
-              onClick={() => handleModeChange(m)}
-            >
-              <span className="cover-mode-icon">{MODE_ICONS[m]}</span>
-              <span className="cover-mode-label">{MODE_LABELS[m]}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* 模式内容区 */}
-      <div className="cover-mode-content">
-        {config.mode === "auto" && (
-          <CoverAutoMode
-            config={config}
-            formatTime={formatTime}
-            onUseAiSuggestion={handleUseAiSuggestion}
-          />
-        )}
-
-        {config.mode === "frame" && (
-          <CoverFrameMode
-            config={config}
-            totalDuration={totalDuration}
-            formatTime={formatTime}
-            onFrameTimeChange={(t) => update({ frame_time: t })}
-          />
-        )}
-
-        {config.mode === "upload" && (
-          <CoverUploadMode
-            config={config}
-            isDragging={isDragging}
-            fileInputRef={fileInputRef}
-            onDragOver={(e) => {
-              e.preventDefault()
-              setIsDragging(true)
-            }}
-            onDragLeave={() => setIsDragging(false)}
-            onDrop={handleDrop}
-            onAreaClick={() => fileInputRef.current?.click()}
-            onFileChange={handleFileUpload}
-          />
-        )}
-      </div>
-
-      {/* 封面预览 */}
-      <div className="cover-preview-section">
-        <div className="cover-section-title">封面预览</div>
-        <div className="cover-preview-box">
-          {config.upload_url ? (
-            <img src={config.upload_url} alt="封面预览" className="cover-preview-img" />
-          ) : (
-            <div className="cover-preview-placeholder">
-              <span className="cover-preview-icon">🖼️</span>
-              <span className="cover-preview-text">
-                {config.mode === "auto"
-                  ? "AI 智能选择"
-                  : config.mode === "frame"
-                    ? `帧 ${formatTime(config.frame_time)}`
-                    : "未上传封面"}
-              </span>
-            </div>
-          )}
-          <div className="cover-preview-ratio">16:9</div>
-        </div>
-      </div>
-
-      {/* 底部 */}
-      <div className="cover-footer">
-        <button className="cover-reset-btn" onClick={handleReset}>
-          重置封面
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default CoverSelector

apps/web/src/pages/editing-planner/components/cover-selector/useCoverSelector.ts

@@ -1,98 +0,0 @@
-import { useCallback, useRef, useState } from "react"
-import type { CoverConfig, CoverMode } from "../../types"
-import { DEFAULT_COVER_CONFIG } from "../../types"
-
-/** 封面模式标签 */
-export const MODE_LABELS: Record<CoverMode, string> = {
-  auto: "智能封面",
-  frame: "抽帧选封面",
-  upload: "上传封面",
-}
-
-/** 封面模式图标 */
-export const MODE_ICONS: Record<CoverMode, string> = {
-  auto: "🤖",
-  frame: "🎞️",
-  upload: "📤",
-}
-
-interface UseCoverSelectorOptions {
-  config: CoverConfig
-  onChange: (config: CoverConfig) => void
-}
-
-/**
- * 封面选择器 Hook
- * 封装状态管理、文件上传、模式切换等逻辑
- */
-export function useCoverSelector({ config, onChange }: UseCoverSelectorOptions) {
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [isDragging, setIsDragging] = useState(false)
-
-  const update = useCallback(
-    (partial: Partial<CoverConfig>) => {
-      onChange({ ...config, ...partial })
-    },
-    [config, onChange],
-  )
-
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_COVER_CONFIG, enabled: config.enabled })
-  }, [config.enabled, onChange])
-
-  const handleModeChange = useCallback(
-    (mode: CoverMode) => {
-      update({ mode })
-    },
-    [update],
-  )
-
-  const handleFileUpload = useCallback(
-    (file: File) => {
-      if (!file.type.startsWith("image/")) return
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        const url = e.target?.result as string
-        update({ upload_url: url, thumbnail_url: url, mode: "upload" })
-      }
-      reader.readAsDataURL(file)
-    },
-    [update],
-  )
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault()
-      setIsDragging(false)
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileUpload(file)
-    },
-    [handleFileUpload],
-  )
-
-  const handleUseAiSuggestion = useCallback(() => {
-    if (config.ai_suggested_time !== null) {
-      update({ frame_time: config.ai_suggested_time, mode: "frame" })
-    }
-  }, [config.ai_suggested_time, update])
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60)
-    const s = Math.floor(seconds % 60)
-    const ms = Math.floor((seconds % 1) * 10)
-    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}.${ms}`
-  }
-
-  return {
-    fileInputRef,
-    isDragging,
-    setIsDragging,
-    update,
-    handleReset,
-    handleModeChange,
-    handleFileUpload,
-    handleDrop,
-    handleUseAiSuggestion,
-    formatTime,
-  }
-}