From 6f06de232bab373f1fac923935edb141d1fbb64d Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 14 Sep 2026 21:29:05 +0800 Subject: [PATCH] style: format useStep2Materials.ts with prettier (#1899 #1900) --- .../pages/generate/hooks/useStep2Materials.ts | 173 ++++++++++-------- 1 file changed, 96 insertions(+), 77 deletions(-) diff --git a/apps/web/src/pages/generate/hooks/useStep2Materials.ts b/apps/web/src/pages/generate/hooks/useStep2Materials.ts index 06143fa22..c901e46ac 100644 --- a/apps/web/src/pages/generate/hooks/useStep2Materials.ts +++ b/apps/web/src/pages/generate/hooks/useStep2Materials.ts @@ -2,27 +2,31 @@ * Step 1 素材选择 Hook（#1899 原 Step2 前移） * 使用 clipCount 替代 templateSegments 决定片段数量 */ -import { useCallback, useEffect, useRef } from "react" -import { message } from "antd" -import type { EditPlanClip } from "@/api/template-editor" -import { updateEditPlanClips, createClipsFromAssets, getEditPlanClips } from "@/api/template-editor" -import { useMaterialLibrary } from "./step2-materials/useMaterialLibrary" -import { useSmartMatch } from "./step2-materials/useSmartMatch" -import { useDraftAutoSave } from "./useDraftAutoSave" +import { useCallback, useEffect, useRef } from "react"; +import { message } from "antd"; +import type { EditPlanClip } from "@/api/template-editor"; +import { + updateEditPlanClips, + createClipsFromAssets, + getEditPlanClips, +} from "@/api/template-editor"; +import { useMaterialLibrary } from "./step2-materials/useMaterialLibrary"; +import { useSmartMatch } from "./step2-materials/useSmartMatch"; +import { useDraftAutoSave } from "./useDraftAutoSave"; interface UseStep2MaterialsProps { - materialMode: "manual" | "auto" - onMaterialModeChange: (mode: "manual" | "auto") => void - selectedMaterials: string[] - onSelectedMaterialsChange: (ids: string[]) => void - smartSelectedIds: string[] - onSmartSelectedIdsChange: (ids: string[]) => void + materialMode: "manual" | "auto"; + onMaterialModeChange: (mode: "manual" | "auto") => void; + selectedMaterials: string[]; + onSelectedMaterialsChange: (ids: string[]) => void; + smartSelectedIds: string[]; + onSmartSelectedIdsChange: (ids: string[]) => void; /** 片段数量（#1899） */ - clipCount: number + clipCount: number; /** 当前选中的模板/草稿 ID，用于自动保存 */ - selectedTemplate?: string + selectedTemplate?: string; /** 服务端 clips 创建成功后的回调，用于通知预览播放器 */ - onServerClipsChange?: (clips: EditPlanClip[]) => void + onServerClipsChange?: (clips: EditPlanClip[]) => void; } export function useStep2Materials({ @@ -44,114 +48,129 @@ export function useStep2Materials({ selectableMaterials, allMaterialsExhausted, materialsLoading, - } = useMaterialLibrary() + } = useMaterialLibrary(); const smartMatch = useSmartMatch({ libraryId: selectedLibraryId, materials: selectableMaterials, onSmartSelectedIdsChange, clipCount, - }) + }); /* ── 自动触发智能匹配：选择视频库后自动调用 ── */ - const autoTriggeredRef = useRef("") - const { handleSmartMatch } = smartMatch + const autoTriggeredRef = useRef(""); + const { handleSmartMatch } = smartMatch; useEffect(() => { if (materialMode !== "auto") { - autoTriggeredRef.current = "" - return + autoTriggeredRef.current = ""; + return; } - if (!selectedLibraryId) return - if (materialsLoading) return - if (selectableMaterials.items.length === 0) return - if (autoTriggeredRef.current === selectedLibraryId) return + if (!selectedLibraryId) return; + if (materialsLoading) return; + if (selectableMaterials.items.length === 0) return; + if (autoTriggeredRef.current === selectedLibraryId) return; - autoTriggeredRef.current = selectedLibraryId - handleSmartMatch() + autoTriggeredRef.current = selectedLibraryId; + handleSmartMatch(); }, [ selectedLibraryId, materialMode, materialsLoading, selectableMaterials.items, handleSmartMatch, - ]) + ]); /* ── 选择素材后自动保存草稿 asset_ids（防抖 500ms，失败静默） ── */ - const { scheduleSave } = useDraftAutoSave(selectedTemplate) + const { scheduleSave } = useDraftAutoSave(selectedTemplate); useEffect(() => { - if (!selectedTemplate) return - const ids = materialMode === "auto" ? smartSelectedIds : selectedMaterials - scheduleSave({ asset_ids: ids }, 500) - }, [selectedTemplate, materialMode, selectedMaterials, smartSelectedIds, scheduleSave]) + if (!selectedTemplate) return; + const ids = materialMode === "auto" ? smartSelectedIds : selectedMaterials; + scheduleSave({ asset_ids: ids }, 500); + }, [ + selectedTemplate, + materialMode, + selectedMaterials, + smartSelectedIds, + scheduleSave, + ]); /* ── 选择素材后同步写入 edit_plan_clips（防抖 800ms，失败静默）── * 调用后端 POST /clips/from-assets，传递 clipCount 作为片段数量 */ - const clipsTimerRef = useRef>() - const clipsAbortRef = useRef(null) - const clipCountRef = useRef(clipCount) - clipCountRef.current = clipCount - const selectedTemplateRef = useRef(selectedTemplate) - selectedTemplateRef.current = selectedTemplate - const onServerClipsChangeRef = useRef(onServerClipsChange) - onServerClipsChangeRef.current = onServerClipsChange + const clipsTimerRef = useRef>(); + const clipsAbortRef = useRef(null); + const clipCountRef = useRef(clipCount); + clipCountRef.current = clipCount; + const selectedTemplateRef = useRef(selectedTemplate); + selectedTemplateRef.current = selectedTemplate; + const onServerClipsChangeRef = useRef(onServerClipsChange); + onServerClipsChangeRef.current = onServerClipsChange; useEffect(() => { - const tid = selectedTemplateRef.current - if (!tid) return - const ids = materialMode === "auto" ? smartSelectedIds : selectedMaterials + const tid = selectedTemplateRef.current; + if (!tid) return; + const ids = materialMode === "auto" ? smartSelectedIds : selectedMaterials; if (!ids.length) { - onServerClipsChangeRef.current?.([]) - return + onServerClipsChangeRef.current?.([]); + return; } - if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current) + if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current); clipsTimerRef.current = setTimeout(async () => { - if (clipsAbortRef.current) clipsAbortRef.current.abort() - const controller = new AbortController() - clipsAbortRef.current = controller + if (clipsAbortRef.current) clipsAbortRef.current.abort(); + const controller = new AbortController(); + clipsAbortRef.current = controller; - const requiredClipsCount = clipCountRef.current + const requiredClipsCount = clipCountRef.current; try { // 1. 清空旧片段 - await updateEditPlanClips(tid, [], controller.signal, true) + await updateEditPlanClips(tid, [], controller.signal, true); // 2. 调用后端 from-assets 接口创建片段，传递 clipCount await createClipsFromAssets(tid, ids, "main", requiredClipsCount, { signal: controller.signal, silentErrorToast: true, - }) + }); // 3. 获取服务端生成的 clips - const clipList = await getEditPlanClips(tid, { limit: 500 }) + const clipList = await getEditPlanClips(tid, { limit: 500 }); const readyClips = clipList.items .filter((c) => c.status === "ready") - .sort((a, b) => a.order - b.order) - onServerClipsChangeRef.current?.(readyClips) + .sort((a, b) => a.order - b.order); + onServerClipsChangeRef.current?.(readyClips); } catch (err) { - const name = (err as { name?: string })?.name - if (name === "CanceledError" || name === "AbortError") return - const code = (err as { code?: string })?.code - if (code === "ECONNABORTED" || /timeout/i.test((err as Error)?.message || "")) { - console.warn("[useStep2Materials] 智能选片超时:", err) - message.error("智能选片失败，请重试") - return + const name = (err as { name?: string })?.name; + if (name === "CanceledError" || name === "AbortError") return; + const code = (err as { code?: string })?.code; + if ( + code === "ECONNABORTED" || + /timeout/i.test((err as Error)?.message || "") + ) { + console.warn("[useStep2Materials] 智能选片超时:", err); + message.error("智能选片失败，请重试"); + return; } - console.warn("[useStep2Materials] 写入 clips 失败:", err) + console.warn("[useStep2Materials] 写入 clips 失败:", err); } - }, 800) + }, 800); return () => { - if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current) - } - }, [selectedTemplate, materialMode, selectedMaterials, smartSelectedIds, clipCount]) + if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current); + }; + }, [ + selectedTemplate, + materialMode, + selectedMaterials, + smartSelectedIds, + clipCount, + ]); // 组件卸载时取消未完成请求 useEffect(() => { return () => { - if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current) - if (clipsAbortRef.current) clipsAbortRef.current.abort() - } - }, []) + if (clipsTimerRef.current) clearTimeout(clipsTimerRef.current); + if (clipsAbortRef.current) clipsAbortRef.current.abort(); + }; + }, []); /* ── 手动选择素材 ── */ const handleToggleMaterial = useCallback( @@ -160,10 +179,10 @@ export function useStep2Materials({ selectedMaterials.includes(materialId) ? selectedMaterials.filter((id) => id !== materialId) : [...selectedMaterials, materialId], - ) + ); }, [selectedMaterials, onSelectedMaterialsChange], - ) + ); return { libraries, @@ -181,7 +200,7 @@ export function useStep2Materials({ hasMatched: smartMatch.hasMatched, handleSmartMatch: smartMatch.handleSmartMatch, handleRefreshMatch: smartMatch.handleRefreshMatch, - } + }; } -export default useStep2Materials +export default useStep2Materials;