fix: 修复 useTemplateSave CoverConfig 导入路径

- Extract template list + filtering to useTemplateList.ts
- Extract template detail loading to useTemplateDetail.ts
- Extract plan/draft loading to usePlanLoading.ts
- Extract save modal + payload to useTemplateSave.ts
- Main hook reduced from 466 to 210 lines (-55%)
- Keep import path @/pages/editing-planner/hooks/useTemplateManagement unchanged

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

@@ -2,27 +2,130 @@
  * 查重结果列表页面 — V21 设计系统
  * 胶囊筛选 + 卡片列表，零 antd 依赖
  */
-import React from "react"
-import { Button } from "@/components/ui"
-import PageHead from "@/components/layout/PageHead"
+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 useDuplicationResults from "./hooks/useDuplicationResults"
-import FilterBar from "./components/FilterBar"
-import EmptyState from "./components/EmptyState"
-import ResultCard from "./components/ResultCard"
+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: "高风险" },
+]
 
 const DuplicationResults: React.FC = () => {
-  const {
-    isLoading,
-    filteredRecords,
-    riskFilter,
-    setRiskFilter,
-    toast,
-    handleDelete,
-    handleRetry,
-    handleView,
-    handleUpload,
-  } = useDuplicationResults()
+  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])
 
   return (
     <div className="dup-page">
@@ -33,31 +136,136 @@ const DuplicationResults: React.FC = () => {
         title="查重记录"
         actions={
           <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-            <FilterBar value={riskFilter} onChange={setRiskFilter} />
-            <Button buttonType="primary" buttonSize="md" onClick={handleUpload}>
+            {/* 筛选胶囊 */}
+            <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")}
+            >
               📤 上传查重
             </Button>
           </div>
         }
       />
 
-      {/* 加载中 / 空状态 */}
-      {(isLoading || filteredRecords.length === 0) && (
-        <EmptyState isLoading={isLoading} riskFilter={riskFilter} />
+      {/* 加载中 */}
+      {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 && (
         <div className="dup-results-list">
-          {filteredRecords.map((record) => (
-            <ResultCard
-              key={record.id}
-              record={record}
-              onView={handleView}
-              onDelete={handleDelete}
-              onRetry={handleRetry}
-            />
-          ))}
+          {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>
+            )
+          })}
         </div>
       )}
     </div>

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

@@ -1,32 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-/** 根据查重率获取风险等级 */
-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/hooks/template-management/usePlanLoading.ts

@@ -0,0 +1,157 @@
+import { useEffect, type Dispatch, type SetStateAction } from "react"
+import { message } from "antd"
+import { getEditPlan, getEditPlanClips } from "@/api/template-editor"
+import type { ClipData, ClipType, TtsConfig, TtsMode, TrimConfig } from "../../types"
+import type { SubtitleStyleConfig } from "../../types/subtitle"
+import type { TitleConfig } from "@/api/template-editor"
+import type { BgmMixConfig } from "@/api/bgm"
+import type { TransitionEffect } from "@/api/template-editor"
+import type { CoverConfig } from "../../types"
+
+interface UsePlanLoadingOptions {
+  loadedPlanId: string | null
+  resetClips: (clips: ClipData[]) => void
+  setLoadedTemplateId: (id: string | null) => void
+  setDraftName: (name: string) => void
+  setTitleConfig: Dispatch<SetStateAction<TitleConfig>>
+  setSubtitleSettings: Dispatch<SetStateAction<SubtitleStyleConfig>>
+  setBgmSettings: Dispatch<SetStateAction<BgmMixConfig>>
+  setCoverConfig: Dispatch<SetStateAction<CoverConfig>>
+}
+
+/**
+ * 加载已有计划草稿数据到编辑器
+ * 从列表页"编辑"按钮进入时，URL 带 planId，需要还原计划配置
+ */
+export function usePlanLoading({
+  loadedPlanId,
+  resetClips,
+  setLoadedTemplateId,
+  setDraftName,
+  setTitleConfig,
+  setSubtitleSettings,
+  setBgmSettings,
+  setCoverConfig,
+}: UsePlanLoadingOptions) {
+  useEffect(() => {
+    if (!loadedPlanId) return
+
+    Promise.all([
+      getEditPlan(loadedPlanId),
+      getEditPlanClips(loadedPlanId, { limit: 500 }).catch(() => ({
+        items: [],
+        total: 0,
+      })),
+    ])
+      .then(([plan, clipsRes]) => {
+        setLoadedTemplateId(plan.template_id)
+        setDraftName(plan.name)
+
+        const cfg = plan.config
+        if (cfg.title_config) {
+          setTitleConfig({
+            ai_auto_select: cfg.title_config!.ai_auto_select,
+            content: cfg.title_config!.content,
+            position: cfg.title_config!.position,
+            font_preset: cfg.title_config!.font_preset,
+            font_size: cfg.title_config!.font_size,
+            font_color: cfg.title_config!.font_color || "#ffffff",
+          })
+        }
+        if (cfg.subtitle_config) {
+          setSubtitleSettings((prev) => ({
+            ...prev,
+            enabled: cfg.subtitle_config!.enabled,
+            position: (cfg.subtitle_config!.position ||
+              "bottom") as SubtitleStyleConfig["position"],
+            font: cfg.subtitle_config!.font,
+            fontSize: cfg.subtitle_config!.size,
+            fontColor: cfg.subtitle_config!.color || "#ffffff",
+            animation: cfg.subtitle_config!.animation,
+          }))
+        }
+        if (cfg.bgm_config) {
+          setBgmSettings((prev) => ({
+            ...prev,
+            enabled: cfg.bgm_config!.enabled,
+            music_id: cfg.bgm_config!.music_id || "",
+          }))
+        }
+        if (cfg.cover_config) {
+          setCoverConfig((prev: CoverConfig) => ({
+            ...prev,
+            enabled: cfg.cover_config!.enabled ?? prev.enabled,
+            mode: (cfg.cover_config!.mode as CoverConfig["mode"]) || prev.mode,
+            frame_time: cfg.cover_config!.frame_time ?? prev.frame_time,
+            upload_url: cfg.cover_config!.upload_url || prev.upload_url,
+            thumbnail_url: cfg.cover_config!.thumbnail_url || prev.thumbnail_url,
+            ai_suggested_time: cfg.cover_config!.ai_suggested_time ?? prev.ai_suggested_time,
+          }))
+        }
+
+        /* 还原片段：优先从后端 clips 表，其次从 config.segments 兜底 */
+        const backendClips = clipsRes?.items || []
+        if (backendClips.length > 0) {
+          const sorted = [...backendClips].sort((a, b) => a.order - b.order)
+          const mapped: ClipData[] = sorted.map((clip) => ({
+            id: clip.id,
+            template_segment_id: (clip.config?.template_segment_id as string) || "",
+            type: (clip.clip_type === "voiceover" ? "voice" : "pip") as ClipType,
+            duration: clip.duration || 3,
+            startOffset: 0,
+            script_text: clip.text_content || "",
+            order: clip.order,
+            media_asset_id: clip.asset_id || undefined,
+            transition:
+              clip.transition_effect && clip.transition_effect !== "none"
+                ? {
+                    type: clip.transition_effect as TransitionEffect["type"],
+                    duration: clip.transition_duration || 0.3,
+                  }
+                : undefined,
+            speed: clip.playback_speed
+              ? { rate: clip.playback_speed, pitchCorrection: true }
+              : undefined,
+            tts_config: (clip.config?.tts_config as TtsConfig) || undefined,
+            trim_config: (clip.config?.trim_config as TrimConfig) || undefined,
+          }))
+          setTimeout(() => resetClips(mapped), 100)
+        } else if (cfg.segments && cfg.segments.length > 0) {
+          /* 兜底：从 config.segments 还原（老数据兼容） */
+          const mapped: ClipData[] = cfg.segments.map((seg, idx) => ({
+            id: `seg-${idx}`,
+            template_segment_id: `seg-${idx}`,
+            type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
+            duration: (seg.duration_min + seg.duration_max) / 2,
+            startOffset: 0,
+            script_text: "",
+            order: seg.segment_order,
+            transition: seg.transition
+              ? {
+                  type: seg.transition.type as TransitionEffect["type"],
+                  duration: seg.transition.duration,
+                }
+              : undefined,
+            speed: seg.playback_speed
+              ? { rate: seg.playback_speed, pitchCorrection: true }
+              : undefined,
+            tts_config: seg.tts_config
+              ? { ...seg.tts_config, mode: seg.tts_config.mode as TtsMode }
+              : undefined,
+            trim_config: seg.trim_config || undefined,
+          }))
+          setTimeout(() => resetClips(mapped), 100)
+        }
+      })
+      .catch(() => message.error("加载模板草稿失败"))
+  }, [
+    loadedPlanId,
+    resetClips,
+    setLoadedTemplateId,
+    setDraftName,
+    setTitleConfig,
+    setSubtitleSettings,
+    setBgmSettings,
+    setCoverConfig,
+  ])
+}

apps/web/src/pages/editing-planner/hooks/template-management/useTemplateDetail.ts

@@ -0,0 +1,91 @@
+import { useEffect, type Dispatch, type SetStateAction } from "react"
+import { message } from "antd"
+import { getEditingTemplate, type TemplateMode } from "@/api/editing-planner"
+import type { TitleConfig } from "@/api/template-editor"
+import type { ClipData, ClipType } from "../../types"
+import type { SubtitleStyleConfig } from "../../types/subtitle"
+import type { BgmMixConfig } from "@/api/bgm"
+
+interface UseTemplateDetailOptions {
+  loadedTemplateId: string | null
+  resetClips: (clips: ClipData[]) => void
+  setCurrentMode: (mode: TemplateMode) => void
+  setTitleConfig: Dispatch<SetStateAction<TitleConfig>>
+  setSubtitleSettings: Dispatch<SetStateAction<SubtitleStyleConfig>>
+  setBgmSettings: Dispatch<SetStateAction<BgmMixConfig>>
+  setDraftName: (name: string) => void
+  setDraftCategory: (cat: string) => void
+  setDraftTags: (tags: string) => void
+}
+
+/**
+ * 加载模板详情并初始化片段列表 + 配置
+ */
+export function useTemplateDetail({
+  loadedTemplateId,
+  resetClips,
+  setCurrentMode,
+  setTitleConfig,
+  setSubtitleSettings,
+  setBgmSettings,
+  setDraftName,
+  setDraftCategory,
+  setDraftTags,
+}: UseTemplateDetailOptions) {
+  useEffect(() => {
+    if (!loadedTemplateId) return
+    getEditingTemplate(loadedTemplateId)
+      .then((tpl) => {
+        if (!tpl) return
+        setCurrentMode(tpl.mode)
+
+        const mapped: ClipData[] = tpl.segments.map((seg, idx) => ({
+          id: seg.id || `seg-${idx}`,
+          template_segment_id: seg.id || `seg-${idx}`,
+          type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
+          duration: (seg.duration_min + seg.duration_max) / 2,
+          startOffset: 0,
+          script_text: "",
+          order: seg.segment_order,
+        }))
+        resetClips(mapped)
+
+        setTitleConfig({
+          ai_auto_select: tpl.title_config.ai_auto_select,
+          content: tpl.title_config.content,
+          position: tpl.title_config.position,
+          font_preset: tpl.title_config.font_preset,
+          font_size: tpl.title_config.font_size,
+          font_color: tpl.title_config.font_color || "#ffffff",
+        })
+        setSubtitleSettings((prev) => ({
+          ...prev,
+          enabled: tpl.subtitle_config.enabled,
+          position: (tpl.subtitle_config.position || "bottom") as SubtitleStyleConfig["position"],
+          font: tpl.subtitle_config.font,
+          fontSize: tpl.subtitle_config.size,
+          fontColor: tpl.subtitle_config.color || "#ffffff",
+          animation: tpl.subtitle_config.animation,
+        }))
+        setBgmSettings((prev) => ({
+          ...prev,
+          enabled: tpl.bgm_config.enabled,
+          music_id: tpl.bgm_config.music_id || "",
+        }))
+        setDraftName(tpl.name)
+        setDraftCategory(tpl.category)
+        setDraftTags(tpl.tags.join(", "))
+      })
+      .catch(() => message.error("加载模板详情失败"))
+  }, [
+    loadedTemplateId,
+    resetClips,
+    setCurrentMode,
+    setTitleConfig,
+    setSubtitleSettings,
+    setBgmSettings,
+    setDraftName,
+    setDraftCategory,
+    setDraftTags,
+  ])
+}

apps/web/src/pages/editing-planner/hooks/template-management/useTemplateList.ts

@@ -0,0 +1,82 @@
+import { useState, useCallback, useEffect, useMemo } from "react"
+import { message } from "antd"
+import {
+  getEditingTemplates,
+  getTemplateCategories,
+  type EditingTemplate,
+  type TemplateCategory,
+} from "@/api/editing-planner"
+import { getMediaAssets, type MediaAsset } from "@/api/template-editor"
+import { FILTER_CATEGORIES } from "../../constants"
+
+/**
+ * 模板列表 + 分类 + 筛选搜索
+ */
+export function useTemplateList(
+  setMediaAssets: (assets: MediaAsset[]) => void,
+  initialTemplateId: string | null,
+) {
+  const [templates, setTemplates] = useState<EditingTemplate[]>([])
+  const [categories, setCategories] = useState<TemplateCategory[]>([])
+  const [loadingTemplates, setLoadingTemplates] = useState(false)
+  const [currentFilter, setCurrentFilter] = useState("全部")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(initialTemplateId)
+
+  /**
+   * 并行加载模板列表、分类、素材库
+   * 三个接口无依赖关系，用 Promise.all 并发
+   */
+  const loadTemplates = useCallback(async () => {
+    setLoadingTemplates(true)
+    try {
+      const [tpls, cats, assets] = await Promise.all([
+        getEditingTemplates(),
+        getTemplateCategories(),
+        getMediaAssets(),
+      ])
+      setTemplates(tpls)
+      setCategories(cats)
+      setMediaAssets(assets)
+    } catch {
+      message.error("加载模板失败")
+    } finally {
+      setLoadingTemplates(false)
+    }
+  }, [setMediaAssets])
+
+  useEffect(() => {
+    loadTemplates()
+  }, [loadTemplates])
+
+  const filteredTemplates = useMemo(
+    () =>
+      templates.filter((t) => {
+        if (currentFilter !== "全部" && t.category !== currentFilter) return false
+        if (searchQuery && !t.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
+        return true
+      }),
+    [templates, currentFilter, searchQuery],
+  )
+
+  const currentTemplate = useMemo(
+    () => templates.find((t) => t.id === loadedTemplateId) || null,
+    [templates, loadedTemplateId],
+  )
+
+  return {
+    templates,
+    categories,
+    loadingTemplates,
+    loadedTemplateId,
+    setLoadedTemplateId,
+    currentFilter,
+    setCurrentFilter,
+    searchQuery,
+    setSearchQuery,
+    filteredTemplates,
+    currentTemplate,
+    loadTemplates,
+    FILTER_CATEGORIES,
+  }
+}

apps/web/src/pages/editing-planner/hooks/template-management/useTemplateSave.ts

@@ -0,0 +1,184 @@
+import { useState, useCallback } from "react"
+import { message } from "antd"
+import {
+  createEditingTemplate,
+  updateEditingTemplate,
+  type SaveTemplatePayload,
+  type TemplateMode,
+} from "@/api/editing-planner"
+import type {
+  ClipData,
+  WatermarkConfig,
+  IntroOutroConfig,
+  PipConfig,
+  FilterConfig,
+  ChromaKeyConfig,
+  StickerConfig,
+} from "../../types"
+import type { SubtitleStyleConfig } from "../../types/subtitle"
+import type { TitleConfig } from "@/api/template-editor"
+import type { CoverConfig } from "../../types"
+import type { BgmMixConfig } from "@/api/bgm"
+
+interface UseTemplateSaveOptions {
+  currentMode: TemplateMode
+  clips: ClipData[]
+  totalDuration: number
+  titleConfig: TitleConfig
+  subtitleSettings: SubtitleStyleConfig
+  bgmSettings: BgmMixConfig
+  watermarkSettings: WatermarkConfig
+  introOutroSettings: IntroOutroConfig
+  pipSettings: PipConfig
+  filterSettings: FilterConfig
+  chromaKeySettings: ChromaKeyConfig
+  stickerSettings: StickerConfig
+  coverConfig: CoverConfig
+  loadedTemplateId: string | null
+  loadTemplates: () => Promise<void>
+}
+
+/**
+ * 模板保存（创建/更新）
+ */
+export function useTemplateSave(options: UseTemplateSaveOptions) {
+  const {
+    currentMode,
+    clips,
+    totalDuration,
+    titleConfig,
+    subtitleSettings,
+    bgmSettings,
+    watermarkSettings,
+    introOutroSettings,
+    pipSettings,
+    filterSettings,
+    chromaKeySettings,
+    stickerSettings,
+    coverConfig,
+    loadedTemplateId,
+    loadTemplates,
+  } = options
+
+  const [saveModalOpen, setSaveModalOpen] = useState(false)
+  const [draftName, setDraftName] = useState("")
+  const [draftCategory, setDraftCategory] = useState("")
+  const [draftTags, setDraftTags] = useState("")
+  const [saveLoading, setSaveLoading] = useState(false)
+
+  const handleOpenSaveModal = useCallback(() => {
+    setSaveModalOpen(true)
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    if (!draftName.trim()) {
+      message.warning("请输入模板名称")
+      return
+    }
+    setSaveLoading(true)
+    try {
+      const payload: SaveTemplatePayload = {
+        name: draftName,
+        mode: currentMode,
+        category: draftCategory,
+        tags: draftTags
+          .split(",")
+          .map((t) => t.trim())
+          .filter(Boolean),
+        title_config: titleConfig,
+        subtitle_config: {
+          enabled: subtitleSettings.enabled,
+          position: subtitleSettings.position,
+          font: subtitleSettings.font,
+          color: subtitleSettings.fontColor,
+          size: subtitleSettings.fontSize,
+          animation: subtitleSettings.animation,
+        },
+        bgm_config: {
+          enabled: bgmSettings.enabled,
+          music_id: bgmSettings.music_id,
+        },
+        estimated_duration: totalDuration,
+        segments: clips.map((c, i) => ({
+          segment_order: i,
+          duration_min: Math.max(1, c.duration - 2),
+          duration_max: c.duration + 2,
+          material_type: c.type === "voice" ? "voiceover" : "video",
+          transition: c.transition
+            ? { type: c.transition.type, duration: c.transition.duration }
+            : undefined,
+          playback_speed: c.speed ? c.speed.rate : undefined,
+          tts_config: c.tts_config
+            ? {
+                mode: c.tts_config.mode,
+                text: c.tts_config.text,
+                voice_id: c.tts_config.voice_id,
+                speed: c.tts_config.speed,
+                pitch: c.tts_config.pitch,
+                volume: c.tts_config.volume,
+                subtitle_sync: c.tts_config.subtitle_sync,
+              }
+            : undefined,
+          trim_config: c.trim_config
+            ? {
+                start_time: c.trim_config.start_time,
+                end_time: c.trim_config.end_time,
+              }
+            : undefined,
+        })),
+        watermark_config: { ...watermarkSettings },
+        intro_outro_config: { ...introOutroSettings },
+        pip_config: { ...pipSettings },
+        filter_config: { ...filterSettings },
+        green_screen_config: { ...chromaKeySettings },
+        sticker_config: { ...stickerSettings },
+        cover_config: { ...coverConfig },
+      }
+      if (loadedTemplateId) {
+        await updateEditingTemplate(loadedTemplateId, payload)
+      } else {
+        await createEditingTemplate(payload)
+      }
+      message.success(loadedTemplateId ? "模板保存成功" : "模板创建成功")
+      setSaveModalOpen(false)
+      loadTemplates()
+    } catch {
+      message.error("保存失败")
+    } finally {
+      setSaveLoading(false)
+    }
+  }, [
+    draftName,
+    draftCategory,
+    draftTags,
+    currentMode,
+    clips,
+    totalDuration,
+    titleConfig,
+    subtitleSettings,
+    bgmSettings,
+    watermarkSettings,
+    introOutroSettings,
+    pipSettings,
+    filterSettings,
+    chromaKeySettings,
+    stickerSettings,
+    coverConfig,
+    loadedTemplateId,
+    loadTemplates,
+  ])
+
+  return {
+    saveModalOpen,
+    setSaveModalOpen,
+    draftName,
+    setDraftName,
+    draftCategory,
+    setDraftCategory,
+    draftTags,
+    setDraftTags,
+    saveLoading,
+    handleOpenSaveModal,
+    handleSave,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useTemplateManagement.ts

@@ -1,27 +1,8 @@
-import { useState, useCallback, useEffect, type Dispatch, type SetStateAction } from "react"
-import { FILTER_CATEGORIES } from "../constants"
-import { message } from "antd"
-import type {
-  EditingTemplate,
-  TemplateCategory,
-  TemplateMode,
-  SaveTemplatePayload,
-} from "@/api/editing-planner"
-import {
-  getEditingTemplates,
-  getEditingTemplate,
-  createEditingTemplate,
-  updateEditingTemplate,
-  getTemplateCategories,
-} from "@/api/editing-planner"
-import type { MediaAsset, TitleConfig, TransitionEffect } from "@/api/template-editor"
-import { getMediaAssets, getEditPlan, getEditPlanClips } from "@/api/template-editor"
+import { useState, useCallback, type Dispatch, type SetStateAction } from "react"
+import type { TemplateMode } from "@/api/editing-planner"
+import type { MediaAsset, TitleConfig } from "@/api/template-editor"
 import type {
   ClipData,
-  ClipType,
-  TtsConfig,
-  TtsMode,
-  TrimConfig,
   WatermarkConfig,
   IntroOutroConfig,
   PipConfig,
@@ -32,6 +13,11 @@ import type {
 } from "../types"
 import type { SubtitleStyleConfig } from "../types/subtitle"
 import type { BgmMixConfig } from "@/api/bgm"
+import { useTemplateList } from "./template-management/useTemplateList"
+import { useTemplateDetail } from "./template-management/useTemplateDetail"
+import { usePlanLoading } from "./template-management/usePlanLoading"
+import { useTemplateSave } from "./template-management/useTemplateSave"
+import { FILTER_CATEGORIES } from "../constants"
 
 interface UseTemplateManagementParams {
   urlTemplateId: string
@@ -44,7 +30,6 @@ interface UseTemplateManagementParams {
   setSubtitleSettings: Dispatch<SetStateAction<SubtitleStyleConfig>>
   setBgmSettings: Dispatch<SetStateAction<BgmMixConfig>>
   setCoverConfig: Dispatch<SetStateAction<CoverConfig>>
-  // 保存时需要的配置
   clips: ClipData[]
   totalDuration: number
   titleConfig: TitleConfig
@@ -61,7 +46,7 @@ interface UseTemplateManagementParams {
 
 /**
  * 模板管理 Hook
- * 模板列表/分类/加载/保存/模式切换/筛选搜索 + 3 个 useEffect
+ * 模板列表/分类/加载/保存/模式切换/筛选搜索
  */
 export const useTemplateManagement = (params: UseTemplateManagementParams) => {
   const {
@@ -89,346 +74,101 @@ export const useTemplateManagement = (params: UseTemplateManagementParams) => {
     coverConfig,
   } = params
 
-  /* ── 模板列表 ── */
-  const [templates, setTemplates] = useState<EditingTemplate[]>([])
-  const [categories, setCategories] = useState<TemplateCategory[]>([])
-  const [loadingTemplates, setLoadingTemplates] = useState(false)
-  const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(urlTemplateId || null)
   const [currentMode, setCurrentMode] = useState<TemplateMode>("pip")
-
-  /* ── 左栏筛选 ── */
-  const [currentFilter, setCurrentFilter] = useState("全部")
-  const [searchQuery, setSearchQuery] = useState("")
-
-  /* ── 保存弹窗 ── */
-  const [saveModalOpen, setSaveModalOpen] = useState(false)
-  const [draftName, setDraftName] = useState("")
-  const [draftCategory, setDraftCategory] = useState("")
-  const [draftTags, setDraftTags] = useState("")
-  const [saveLoading, setSaveLoading] = useState(false)
-
-  /* ── 计划 ID（从 URL 传入，不变） ── */
   const [loadedPlanId] = useState<string | null>(urlPlanId || null)
 
-  /* ── 计算 ── */
-  const filteredTemplates = templates.filter((t) => {
-    if (currentFilter !== "全部" && t.category !== currentFilter) return false
-    if (searchQuery && !t.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
-    return true
+  /* ── 模板列表 ── */
+  const {
+    templates,
+    categories,
+    loadingTemplates,
+    loadedTemplateId,
+    setLoadedTemplateId,
+    currentFilter,
+    setCurrentFilter,
+    searchQuery,
+    setSearchQuery,
+    filteredTemplates,
+    currentTemplate,
+    loadTemplates,
+  } = useTemplateList(setMediaAssets, urlTemplateId || null)
+
+  /* ── 保存 ── */
+  const {
+    saveModalOpen,
+    setSaveModalOpen,
+    draftName,
+    setDraftName,
+    draftCategory,
+    setDraftCategory,
+    draftTags,
+    setDraftTags,
+    saveLoading,
+    handleOpenSaveModal,
+    handleSave,
+  } = useTemplateSave({
+    currentMode,
+    clips,
+    totalDuration,
+    titleConfig,
+    subtitleSettings,
+    bgmSettings,
+    watermarkSettings,
+    introOutroSettings,
+    pipSettings,
+    filterSettings,
+    chromaKeySettings,
+    stickerSettings,
+    coverConfig,
+    loadedTemplateId,
+    loadTemplates,
   })
 
-  const currentTemplate = templates.find((t) => t.id === loadedTemplateId) || null
+  /* ── 模板详情加载 ── */
+  useTemplateDetail({
+    loadedTemplateId,
+    resetClips,
+    setCurrentMode,
+    setTitleConfig,
+    setSubtitleSettings,
+    setBgmSettings,
+    setDraftName,
+    setDraftCategory,
+    setDraftTags,
+  })
 
-  /* ──────────── 加载 ──────────── */
-
-  /**
-   * 并行加载模板列表、分类、素材库
-   * 首次挂载时调用，三个接口无依赖关系，用 Promise.all 并发
-   */
-  const loadTemplates = useCallback(async () => {
-    setLoadingTemplates(true)
-    try {
-      const [tpls, cats, assets] = await Promise.all([
-        getEditingTemplates(),
-        getTemplateCategories(),
-        getMediaAssets(),
-      ])
-      setTemplates(tpls)
-      setCategories(cats)
-      setMediaAssets(assets)
-    } catch {
-      message.error("加载模板失败")
-    } finally {
-      setLoadingTemplates(false)
-    }
-  }, [setMediaAssets])
-
-  useEffect(() => {
-    loadTemplates()
-  }, [loadTemplates])
-
-  /**
-   * 加载模板详情并初始化片段列表
-   * 将后端 segments 映射为前端 ClipData，取 duration_min/max 均值作为默认时长
-   * 同时还原标题/字幕/BGM 配置
-   */
-  useEffect(() => {
-    if (!loadedTemplateId) return
-    getEditingTemplate(loadedTemplateId)
-      .then((tpl) => {
-        if (!tpl) return
-        setCurrentMode(tpl.mode)
-        const mapped: ClipData[] = tpl.segments.map((seg, idx) => ({
-          id: seg.id || `seg-${idx}`,
-          template_segment_id: seg.id || `seg-${idx}`,
-          type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
-          duration: (seg.duration_min + seg.duration_max) / 2,
-          startOffset: 0,
-          script_text: "",
-          order: seg.segment_order,
-        }))
-        resetClips(mapped)
-
-        setTitleConfig({
-          ai_auto_select: tpl.title_config.ai_auto_select,
-          content: tpl.title_config.content,
-          position: tpl.title_config.position,
-          font_preset: tpl.title_config.font_preset,
-          font_size: tpl.title_config.font_size,
-          font_color: tpl.title_config.font_color || "#ffffff",
-        })
-        setSubtitleSettings((prev) => ({
-          ...prev,
-          enabled: tpl.subtitle_config.enabled,
-          position: (tpl.subtitle_config.position || "bottom") as SubtitleStyleConfig["position"],
-          font: tpl.subtitle_config.font,
-          fontSize: tpl.subtitle_config.size,
-          fontColor: tpl.subtitle_config.color || "#ffffff",
-          animation: tpl.subtitle_config.animation,
-        }))
-        setBgmSettings((prev) => ({
-          ...prev,
-          enabled: tpl.bgm_config.enabled,
-          music_id: tpl.bgm_config.music_id || "",
-        }))
-        setDraftName(tpl.name)
-        setDraftCategory(tpl.category)
-        setDraftTags(tpl.tags.join(", "))
-      })
-      .catch(() => message.error("加载模板详情失败"))
-  }, [loadedTemplateId, resetClips, setTitleConfig, setSubtitleSettings, setBgmSettings])
-
-  /**
-   * 加载已有模板草稿数据到编辑器
-   * 从列表页"编辑"按钮进入时，URL 带 planId，需要还原计划配置
-   */
-  useEffect(() => {
-    if (!loadedPlanId) return
-
-    // 并行加载计划基本信息 + 片段列表
-    Promise.all([
-      getEditPlan(loadedPlanId),
-      getEditPlanClips(loadedPlanId, { limit: 500 }).catch(() => ({
-        items: [],
-        total: 0,
-      })),
-    ])
-      .then(([plan, clipsRes]) => {
-        // 设置关联的模板（触发模板加载 effect）
-        setLoadedTemplateId(plan.template_id)
-
-        // 还原基本信息
-        setDraftName(plan.name)
-
-        // 还原 config 中的编辑器状态
-        const cfg = plan.config
-        if (cfg.title_config) {
-          setTitleConfig({
-            ai_auto_select: cfg.title_config!.ai_auto_select,
-            content: cfg.title_config!.content,
-            position: cfg.title_config!.position,
-            font_preset: cfg.title_config!.font_preset,
-            font_size: cfg.title_config!.font_size,
-            font_color: cfg.title_config!.font_color || "#ffffff",
-          })
-        }
-        if (cfg.subtitle_config) {
-          setSubtitleSettings((prev) => ({
-            ...prev,
-            enabled: cfg.subtitle_config!.enabled,
-            position: (cfg.subtitle_config!.position ||
-              "bottom") as SubtitleStyleConfig["position"],
-            font: cfg.subtitle_config!.font,
-            fontSize: cfg.subtitle_config!.size,
-            fontColor: cfg.subtitle_config!.color || "#ffffff",
-            animation: cfg.subtitle_config!.animation,
-          }))
-        }
-        if (cfg.bgm_config) {
-          setBgmSettings((prev) => ({
-            ...prev,
-            enabled: cfg.bgm_config!.enabled,
-            music_id: cfg.bgm_config!.music_id || "",
-          }))
-        }
-        // 还原封面配置
-        if (cfg.cover_config) {
-          setCoverConfig((prev) => ({
-            ...prev,
-            enabled: cfg.cover_config!.enabled ?? prev.enabled,
-            mode: (cfg.cover_config!.mode as CoverConfig["mode"]) || prev.mode,
-            frame_time: cfg.cover_config!.frame_time ?? prev.frame_time,
-            upload_url: cfg.cover_config!.upload_url || prev.upload_url,
-            thumbnail_url: cfg.cover_config!.thumbnail_url || prev.thumbnail_url,
-            ai_suggested_time: cfg.cover_config!.ai_suggested_time ?? prev.ai_suggested_time,
-          }))
-        }
-
-        // 还原片段：优先从后端 clips 表，其次从 config.segments 兜底
-        const backendClips = clipsRes?.items || []
-        if (backendClips.length > 0) {
-          // 从后端 clips 表还原
-          const sorted = [...backendClips].sort((a, b) => a.order - b.order)
-          const mapped: ClipData[] = sorted.map((clip) => ({
-            id: clip.id,
-            template_segment_id: (clip.config?.template_segment_id as string) || "",
-            type: (clip.clip_type === "voiceover" ? "voice" : "pip") as ClipType,
-            duration: clip.duration || 3,
-            startOffset: 0,
-            script_text: clip.text_content || "",
-            order: clip.order,
-            media_asset_id: clip.asset_id || undefined,
-            transition:
-              clip.transition_effect && clip.transition_effect !== "none"
-                ? {
-                    type: clip.transition_effect as TransitionEffect["type"],
-                    duration: clip.transition_duration || 0.3,
-                  }
-                : undefined,
-            speed: clip.playback_speed
-              ? { rate: clip.playback_speed, pitchCorrection: true }
-              : undefined,
-            tts_config: (clip.config?.tts_config as TtsConfig) || undefined,
-            trim_config: (clip.config?.trim_config as TrimConfig) || undefined,
-          }))
-          setTimeout(() => resetClips(mapped), 100)
-        } else if (cfg.segments && cfg.segments.length > 0) {
-          // 兜底：从 config.segments 还原（老数据兼容）
-          const mapped: ClipData[] = cfg.segments.map((seg, idx) => ({
-            id: `seg-${idx}`,
-            template_segment_id: `seg-${idx}`,
-            type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
-            duration: (seg.duration_min + seg.duration_max) / 2,
-            startOffset: 0,
-            script_text: "",
-            order: seg.segment_order,
-            transition: seg.transition
-              ? {
-                  type: seg.transition.type as TransitionEffect["type"],
-                  duration: seg.transition.duration,
-                }
-              : undefined,
-            speed: seg.playback_speed
-              ? { rate: seg.playback_speed, pitchCorrection: true }
-              : undefined,
-            tts_config: seg.tts_config
-              ? { ...seg.tts_config, mode: seg.tts_config.mode as TtsMode }
-              : undefined,
-            trim_config: seg.trim_config || undefined,
-          }))
-          setTimeout(() => resetClips(mapped), 100)
-        }
-      })
-      .catch(() => message.error("加载模板草稿失败"))
-  }, [
+  /* ── 计划草稿加载 ── */
+  usePlanLoading({
     loadedPlanId,
     resetClips,
+    setLoadedTemplateId,
+    setDraftName,
     setTitleConfig,
     setSubtitleSettings,
     setBgmSettings,
     setCoverConfig,
-  ])
+  })
 
-  /* ──────────── 事件 ──────────── */
+  /* ── 事件 ── */
+  const handleLoadTemplate = useCallback(
+    (templateId: string) => {
+      setLoadedTemplateId(templateId)
+      setSelectedClipId(null)
+    },
+    [setLoadedTemplateId, setSelectedClipId],
+  )
 
-  const handleLoadTemplate = (templateId: string) => {
-    setLoadedTemplateId(templateId)
-    setSelectedClipId(null)
-  }
-
-  const handleModeChange = (mode: TemplateMode) => {
-    setCurrentMode(mode)
-    // 切换纯单类型模式时，自动转换所有已有片段的类型
-    if (mode === "voice_over") {
-      setClips((prev) => prev.map((c) => ({ ...c, type: "voice" as const })))
-    } else if (mode === "pip") {
-      setClips((prev) => prev.map((c) => ({ ...c, type: "pip" as const })))
-    }
-    // 混合模式(voice_pip)和一镜到底(one_take)不自动转换，保留原有类型
-  }
-
-  const handleOpenSaveModal = () => {
-    setSaveModalOpen(true)
-  }
-
-  const handleSave = async () => {
-    if (!draftName.trim()) {
-      message.warning("请输入模板名称")
-      return
-    }
-    setSaveLoading(true)
-    try {
-      const payload: SaveTemplatePayload = {
-        name: draftName,
-        mode: currentMode,
-        category: draftCategory,
-        tags: draftTags
-          .split(",")
-          .map((t) => t.trim())
-          .filter(Boolean),
-        title_config: titleConfig,
-        subtitle_config: {
-          enabled: subtitleSettings.enabled,
-          position: subtitleSettings.position,
-          font: subtitleSettings.font,
-          color: subtitleSettings.fontColor,
-          size: subtitleSettings.fontSize,
-          animation: subtitleSettings.animation,
-        },
-        bgm_config: {
-          enabled: bgmSettings.enabled,
-          music_id: bgmSettings.music_id,
-        },
-        estimated_duration: totalDuration,
-        segments: clips.map((c, i) => ({
-          segment_order: i,
-          duration_min: Math.max(1, c.duration - 2),
-          duration_max: c.duration + 2,
-          material_type: c.type === "voice" ? "voiceover" : "video",
-          transition: c.transition
-            ? { type: c.transition.type, duration: c.transition.duration }
-            : undefined,
-          playback_speed: c.speed ? c.speed.rate : undefined,
-          tts_config: c.tts_config
-            ? {
-                mode: c.tts_config.mode,
-                text: c.tts_config.text,
-                voice_id: c.tts_config.voice_id,
-                speed: c.tts_config.speed,
-                pitch: c.tts_config.pitch,
-                volume: c.tts_config.volume,
-                subtitle_sync: c.tts_config.subtitle_sync,
-              }
-            : undefined,
-          trim_config: c.trim_config
-            ? {
-                start_time: c.trim_config.start_time,
-                end_time: c.trim_config.end_time,
-              }
-            : undefined,
-        })),
-        watermark_config: { ...watermarkSettings },
-        intro_outro_config: { ...introOutroSettings },
-        pip_config: { ...pipSettings },
-        filter_config: { ...filterSettings },
-        green_screen_config: { ...chromaKeySettings },
-        sticker_config: { ...stickerSettings },
-        cover_config: { ...coverConfig },
+  const handleModeChange = useCallback(
+    (mode: TemplateMode) => {
+      setCurrentMode(mode)
+      if (mode === "voice_over") {
+        setClips((prev) => prev.map((c) => ({ ...c, type: "voice" as const })))
+      } else if (mode === "pip") {
+        setClips((prev) => prev.map((c) => ({ ...c, type: "pip" as const })))
       }
-      if (loadedTemplateId) {
-        await updateEditingTemplate(loadedTemplateId, payload)
-      } else {
-        await createEditingTemplate(payload)
-      }
-      message.success(loadedTemplateId ? "模板保存成功" : "模板创建成功")
-      setSaveModalOpen(false)
-      loadTemplates()
-    } catch {
-      message.error("保存失败")
-    } finally {
-      setSaveLoading(false)
-    }
-  }
+    },
+    [setClips],
+  )
 
   return {
     // state