From 0697d9c67d97b03e6f7a33184a58cb80cbf1cbc4 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 14 Sep 2026 21:37:48 +0800 Subject: [PATCH] style: reformat useStep2Materials.ts with repo prettier config (#1899 #1900) --- .../pages/generate/hooks/useStep2Materials.ts | 173 ++++++++---------- 1 file changed, 77 insertions(+), 96 deletions(-) diff --git a/apps/web/src/pages/generate/hooks/useStep2Materials.ts b/apps/web/src/pages/generate/hooks/useStep2Materials.ts index c901e46ac..06143fa22 100644 --- a/apps/web/src/pages/generate/hooks/useStep2Materials.ts +++ b/apps/web/src/pages/generate/hooks/useStep2Materials.ts @@ -2,31 +2,27 @@ * 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({ @@ -48,129 +44,114 @@ 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( @@ -179,10 +160,10 @@ export function useStep2Materials({ selectedMaterials.includes(materialId) ? selectedMaterials.filter((id) => id !== materialId) : [...selectedMaterials, materialId], - ); + ) }, [selectedMaterials, onSelectedMaterialsChange], - ); + ) return { libraries, @@ -200,7 +181,7 @@ export function useStep2Materials({ hasMatched: smartMatch.hasMatched, handleSmartMatch: smartMatch.handleSmartMatch, handleRefreshMatch: smartMatch.handleRefreshMatch, - }; + } } -export default useStep2Materials; +export default useStep2Materials