From adf4579ee1566dbde9dd4598a6c03b75e56890ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?= <7854742+wang_rumeng@user.noreply.gitee.com> Date: Sat, 16 Aug 2025 15:06:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96hooks=E5=A4=9A=E6=AC=A1?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96ing?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/work-flow.tsx | 7 -- components/pages/work-flow/media-viewer.tsx | 101 +++++++----------- .../pages/work-flow/use-workflow-data.tsx | 54 +++++----- 3 files changed, 69 insertions(+), 93 deletions(-) diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx index 537b8bd..2475878 100644 --- a/components/pages/work-flow.tsx +++ b/components/pages/work-flow.tsx @@ -58,14 +58,9 @@ const WorkFlow = React.memo(function WorkFlow() { } = useWorkflowData(); const { - isPlaying, isVideoPlaying, - showControls, - setShowControls, - setIsPlaying, togglePlay, toggleVideoPlay, - playTimerRef, } = usePlaybackControls(taskSketch, taskVideos, currentStep); useEffect(() => { @@ -162,10 +157,8 @@ const WorkFlow = React.memo(function WorkFlow() { taskSketch={taskSketch} taskVideos={taskVideos} isVideoPlaying={isVideoPlaying} - showControls={showControls} isGeneratingSketch={isGeneratingSketch} isGeneratingVideo={isGeneratingVideo} - onControlsChange={setShowControls} onEditModalOpen={handleEditModalOpen} onToggleVideoPlay={toggleVideoPlay} onTogglePlay={togglePlay} diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx index 16d6fee..bebbd6f 100644 --- a/components/pages/work-flow/media-viewer.tsx +++ b/components/pages/work-flow/media-viewer.tsx @@ -17,10 +17,8 @@ interface MediaViewerProps { taskSketch: any[]; taskVideos: any[]; isVideoPlaying: boolean; - showControls: boolean; isGeneratingSketch: boolean; isGeneratingVideo: boolean; - onControlsChange: (show: boolean) => void; onEditModalOpen: (tab: string) => void; onToggleVideoPlay: () => void; onTogglePlay: () => void; @@ -39,10 +37,8 @@ export const MediaViewer = React.memo(function MediaViewer({ taskSketch, taskVideos, isVideoPlaying, - showControls, isGeneratingSketch, isGeneratingVideo, - onControlsChange, onEditModalOpen, onToggleVideoPlay, onTogglePlay, @@ -270,7 +266,6 @@ export const MediaViewer = React.memo(function MediaViewer({ {/* 静音按钮 */} @@ -312,10 +307,8 @@ export const MediaViewer = React.memo(function MediaViewer({
onControlsChange(true)} - onMouseLeave={() => onControlsChange(false)} > -
+
{/* 背景模糊的视频 */} - {showControls && ( - - handleEditClick('3', 'final')} - /> - - )} + + handleEditClick('3', 'final')} + /> + {/* 视频信息浮层 */} @@ -405,7 +395,6 @@ export const MediaViewer = React.memo(function MediaViewer({ > @@ -417,7 +406,6 @@ export const MediaViewer = React.memo(function MediaViewer({ {/* 全屏按钮 */} @@ -442,9 +430,7 @@ export const MediaViewer = React.memo(function MediaViewer({ const renderVideoContent = () => { return (
onControlsChange(true)} - onMouseLeave={() => onControlsChange(false)} + className="relative w-full h-full rounded-lg group" > {/* 只在生成过程中或没有视频时使用ProgressiveReveal */}
@@ -500,21 +486,18 @@ export const MediaViewer = React.memo(function MediaViewer({ {/* 操作按钮组 */} - {showControls && ( - - handleEditClick('3')} - /> - - )} + + handleEditClick('3')} + /> + {/* 底部控制区域 */} @@ -535,7 +518,6 @@ export const MediaViewer = React.memo(function MediaViewer({ > @@ -557,9 +539,7 @@ export const MediaViewer = React.memo(function MediaViewer({ return (
onControlsChange(true)} - onMouseLeave={() => onControlsChange(false)} + className="relative w-full h-full rounded-lg group" > {/* 状态 */} {currentSketch.status === 0 && ( @@ -590,21 +570,18 @@ export const MediaViewer = React.memo(function MediaViewer({ {/* 操作按钮组 */} - {showControls && ( - - handleEditClick('1')} - /> - - )} + + handleEditClick('1')} + /> + {/* 底部播放按钮 */} diff --git a/components/pages/work-flow/use-workflow-data.tsx b/components/pages/work-flow/use-workflow-data.tsx index aadda90..01d62e1 100644 --- a/components/pages/work-flow/use-workflow-data.tsx +++ b/components/pages/work-flow/use-workflow-data.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect, useCallback, useRef } from 'react'; +import { useState, useEffect, useCallback, useRef, useMemo } from 'react'; import { useSearchParams } from 'next/navigation'; import { detailScriptEpisodeNew, getScriptTitle, getRunningStreamData, pauseMovieProjectPlan, resumeMovieProjectPlan } from '@/api/video_flow'; import { useAppDispatch, useAppSelector } from '@/lib/store/hooks'; @@ -42,7 +42,7 @@ type ApiStep = keyof typeof STEP_MAP; export function useWorkflowData() { - console.log('98877766777777888888990') + console.log('init-useWorkflowData') const searchParams = useSearchParams(); const episodeId = searchParams.get('episodeId') || ''; @@ -78,13 +78,10 @@ export function useWorkflowData() { // 更新 taskObject 的类型 const [taskObject, setTaskObject] = useState(tempTaskObject.current); - const [originalText, setOriginalText] = useState(''); - const [scriptData, setScriptData] = useState(null); const [taskSketch, setTaskSketch] = useState([]); const [taskScenes, setTaskScenes] = useState([]); const [taskShotSketch, setTaskShotSketch] = useState([]); const [taskVideos, setTaskVideos] = useState([]); - const [isLoading, setIsLoading] = useState(true); const [currentStep, setCurrentStep] = useState('0'); const [currentSketchIndex, setCurrentSketchIndex] = useState(0); const [isGeneratingSketch, setIsGeneratingSketch] = useState(false); @@ -97,7 +94,11 @@ export function useWorkflowData() { const [dataLoadError, setDataLoadError] = useState(null); const [needStreamData, setNeedStreamData] = useState(false); const [isPauseWorkFlow, setIsPauseWorkFlow] = useState(false); - const [mode, setMode] = useState<'automatic' | 'manual' | 'auto'>('automatic'); + const [state, setState] = useState({ + mode: 'automatic' as 'automatic' | 'manual' | 'auto', + originalText: '', + isLoading: true + }); const dispatch = useAppDispatch(); @@ -110,12 +111,8 @@ export function useWorkflowData() { applyScript } = useScriptService(); // 监听剧本加载完毕 - useEffect(() => { - if (scriptBlocksMemo.length > 0) { - console.log('scriptBlocksMemo 更新:', scriptBlocksMemo); - setScriptData(scriptBlocksMemo); - // setCurrentLoadingText(LOADING_TEXT_MAP.script); - } + const scriptData = useMemo(() => { + return scriptBlocksMemo.length > 0 ? scriptBlocksMemo : null; }, [scriptBlocksMemo]); // 监听继续 请求更新数据 useUpdateEffect(() => { @@ -418,7 +415,7 @@ export function useWorkflowData() { } catch (error) { console.error('获取数据失败:', error); } - }, [episodeId, needStreamData, roles.length, taskShotSketch.length]); + }, [episodeId, needStreamData]); // 轮询获取流式数据 useUpdateEffect(() => { @@ -440,12 +437,15 @@ export function useWorkflowData() { const initializeWorkflow = async () => { if (!episodeId) { setDataLoadError('缺少必要的参数'); - setIsLoading(false); return; } try { - setIsLoading(true); + setState({ + mode: 'automatic' as 'automatic' | 'manual' | 'auto', + originalText: '', + isLoading: true + }); setCurrentLoadingText('loading project info...'); // 获取剧集详情 @@ -455,9 +455,6 @@ export function useWorkflowData() { } const { name, status, data, tags, mode, original_text } = response.data; - setMode(mode as 'automatic' | 'manual' | 'auto'); - setOriginalText(original_text); - setIsLoading(false); const { current: taskCurrent } = tempTaskObject; @@ -585,15 +582,20 @@ export function useWorkflowData() { console.log('---look-taskData', taskCurrent); if (taskCurrent.currentStage === 'script') { - console.log('开始初始化剧本', originalText,episodeId); + console.log('开始初始化剧本', original_text,episodeId); // TODO 为什么一开始没项目id - originalText && initializeFromProject(episodeId, originalText).then(() => { + original_text && initializeFromProject(episodeId, original_text).then(() => { console.log('应用剧本'); // 自动模式下 应用剧本;手动模式 需要点击 下一步 触发 mode.includes('auto') && applyScript(); }); } + setState({ + mode: mode as 'automatic' | 'manual' | 'auto', + originalText: original_text, + isLoading: false + }); // 设置步骤 setTaskObject(prev => { const newState = JSON.parse(JSON.stringify({...prev, ...taskCurrent})); @@ -606,7 +608,11 @@ export function useWorkflowData() { } catch (error) { console.error('初始化失败:', error); setDataLoadError('加载失败,请重试'); - setIsLoading(false); + setState({ + mode: 'automatic' as 'automatic' | 'manual' | 'auto', + originalText: '', + isLoading: false + }); } }; @@ -649,7 +655,7 @@ export function useWorkflowData() { taskShotSketch, taskVideos, sketchCount, - isLoading, + isLoading: state.isLoading, currentStep, currentSketchIndex, isGeneratingSketch, @@ -664,11 +670,11 @@ export function useWorkflowData() { retryLoadData, handleManualPlay, isPauseWorkFlow, - mode, + mode: state.mode, setIsPauseWorkFlow, setAnyAttribute, applyScript, fallbackToStep, - originalText + originalText: state.originalText }; }