refactor: extract useClipReorder and useClipImport from useEditPlanClipMutations

Split the large mutations hook into focused sub-hooks. Main file reduces
from 183 to 134 lines (-27%).

- useClipReorder: reorder mutation with query invalidation
- useClipImport: create clips from assets mutation
- Main hook retains core CRUD (create/update/delete/batchDelete)

apps/web/src/pages/editing-planner/hooks/useEditPlanClips/useClipImport.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react"
+import { message } from "antd"
+import { useQueryClient, useMutation } from "@tanstack/react-query"
+import { createClipsFromAssets } from "@/api/template-editor"
+
+const QUERY_KEY = "editPlanClips"
+
+export function useClipImport(planId: string | undefined) {
+  const queryClient = useQueryClient()
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] })
+  }
+
+  const importFromAssetsMutation = useMutation({
+    mutationFn: (assetIds: string[]) => createClipsFromAssets(planId!, assetIds),
+    onSuccess: (res) => {
+      invalidate()
+      message.success(`已导入 ${res.created_count} 个素材片段`)
+    },
+    onError: () => {
+      message.error("导入素材失败")
+    },
+  })
+
+  const importFromAssets = useCallback(
+    (assetIds: string[]) => {
+      if (!planId || assetIds.length === 0) return
+      importFromAssetsMutation.mutate(assetIds)
+    },
+    [planId, importFromAssetsMutation],
+  )
+
+  return {
+    importFromAssets,
+    isImporting: importFromAssetsMutation.isPending,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useEditPlanClips/useClipReorder.ts

@@ -0,0 +1,39 @@
+import { useCallback } from "react"
+import { message } from "antd"
+import { useQueryClient, useMutation } from "@tanstack/react-query"
+import type { ClipReorderItem } from "@/api/template-editor"
+import { reorderEditPlanClips } from "@/api/template-editor"
+
+const QUERY_KEY = "editPlanClips"
+
+export function useClipReorder(planId: string | undefined) {
+  const queryClient = useQueryClient()
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] })
+  }
+
+  const reorderMutation = useMutation({
+    mutationFn: (items: ClipReorderItem[]) => reorderEditPlanClips(planId!, items),
+    onSuccess: () => {
+      invalidate()
+    },
+    onError: () => {
+      message.error("排序失败")
+      invalidate()
+    },
+  })
+
+  const reorderClips = useCallback(
+    (items: ClipReorderItem[]) => {
+      if (!planId || items.length === 0) return
+      reorderMutation.mutate(items)
+    },
+    [planId, reorderMutation],
+  )
+
+  return {
+    reorderClips,
+    isReordering: reorderMutation.isPending,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useEditPlanClips/useEditPlanClipMutations.ts

@@ -1,19 +1,15 @@
 import { useCallback } from "react"
 import { message } from "antd"
 import { useQueryClient, useMutation } from "@tanstack/react-query"
-import type {
-  CreateEditPlanClipRequest,
-  UpdateEditPlanClipRequest,
-  ClipReorderItem,
-} from "@/api/template-editor"
+import type { CreateEditPlanClipRequest, UpdateEditPlanClipRequest } from "@/api/template-editor"
 import {
   createEditPlanClip,
   updateEditPlanClip,
   deleteEditPlanClip,
-  reorderEditPlanClips,
   batchDeleteEditPlanClips,
-  createClipsFromAssets,
 } from "@/api/template-editor"
+import { useClipReorder } from "./useClipReorder"
+import { useClipImport } from "./useClipImport"
 
 const QUERY_KEY = "editPlanClips"
 
@@ -24,10 +20,6 @@ interface UseEditPlanClipMutationsOptions {
   clipsLength: number
 }
 
-/**
- * 编辑计划片段 CRUD Hook
- * 封装创建、更新、删除、批量删除、重排序、素材导入等操作
- */
 export function useEditPlanClipMutations({
   planId,
   selectedClipId,
@@ -40,7 +32,6 @@ export function useEditPlanClipMutations({
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY, planId] })
   }
 
-  /* ── 创建片段 ── */
   const createMutation = useMutation({
     mutationFn: (data: CreateEditPlanClipRequest) => createEditPlanClip(planId!, data),
     onSuccess: () => {
@@ -61,7 +52,6 @@ export function useEditPlanClipMutations({
     [planId, clipsLength, createMutation],
   )
 
-  /* ── 更新片段 ── */
   const updateMutation = useMutation({
     mutationFn: ({ clipId, data }: { clipId: string; data: UpdateEditPlanClipRequest }) =>
       updateEditPlanClip(planId!, clipId, data),
@@ -81,7 +71,6 @@ export function useEditPlanClipMutations({
     [planId, updateMutation],
   )
 
-  /* ── 删除片段 ── */
   const deleteMutation = useMutation({
     mutationFn: (clipId: string) => deleteEditPlanClip(planId!, clipId),
     onSuccess: () => {
@@ -104,7 +93,6 @@ export function useEditPlanClipMutations({
     [planId, selectedClipId, setSelectedClipId, deleteMutation],
   )
 
-  /* ── 批量删除 ── */
   const batchDeleteMutation = useMutation({
     mutationFn: (clipIds: string[]) => batchDeleteEditPlanClips(planId!, clipIds),
     onSuccess: (res) => {
@@ -127,45 +115,8 @@ export function useEditPlanClipMutations({
     [planId, selectedClipId, setSelectedClipId, batchDeleteMutation],
   )
 
-  /* ── 重排序 ── */
-  const reorderMutation = useMutation({
-    mutationFn: (items: ClipReorderItem[]) => reorderEditPlanClips(planId!, items),
-    onSuccess: () => {
-      invalidate()
-    },
-    onError: () => {
-      message.error("排序失败")
-      invalidate()
-    },
-  })
-
-  const reorderClips = useCallback(
-    (items: ClipReorderItem[]) => {
-      if (!planId || items.length === 0) return
-      reorderMutation.mutate(items)
-    },
-    [planId, reorderMutation],
-  )
-
-  /* ── 从素材批量导入 ── */
-  const importFromAssetsMutation = useMutation({
-    mutationFn: (assetIds: string[]) => createClipsFromAssets(planId!, assetIds),
-    onSuccess: (res) => {
-      invalidate()
-      message.success(`已导入 ${res.created_count} 个素材片段`)
-    },
-    onError: () => {
-      message.error("导入素材失败")
-    },
-  })
-
-  const importFromAssets = useCallback(
-    (assetIds: string[]) => {
-      if (!planId || assetIds.length === 0) return
-      importFromAssetsMutation.mutate(assetIds)
-    },
-    [planId, importFromAssetsMutation],
-  )
+  const { reorderClips, isReordering } = useClipReorder(planId)
+  const { importFromAssets, isImporting } = useClipImport(planId)
 
   return {
     addClip,
@@ -177,7 +128,7 @@ export function useEditPlanClipMutations({
     isCreating: createMutation.isPending,
     isUpdating: updateMutation.isPending,
     isDeleting: deleteMutation.isPending,
-    isReordering: reorderMutation.isPending,
-    isImporting: importFromAssetsMutation.isPending,
+    isReordering,
+    isImporting,
   }
 }