From dbd803391d301e93ad9daee722a6073c7c9c6483 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: Sun, 10 Aug 2025 21:23:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20use-edit-data=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=20mock=20=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=A7=92=E8=89=B2=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E8=A7=86=E9=A2=91=E7=89=87=E6=AE=B5=E5=92=8C=E8=A7=92?= =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD=E3=80=82=E5=90=8C?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E8=B0=83=E6=95=B4=E8=A7=92=E8=89=B2=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=9A=84=E5=8A=A0=E8=BD=BD=E5=92=8C=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E5=A4=84=E7=90=86=EF=BC=8C=E7=A1=AE=E4=BF=9D=E5=9C=A8=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E9=80=89=E9=A1=B9=E4=B8=8B=E8=83=BD=E5=A4=9F=E6=AD=A3?= =?UTF-8?q?=E7=A1=AE=E5=BA=94=E7=94=A8=E8=A7=92=E8=89=B2=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/work-flow/use-edit-data.tsx | 103 ++++++------------- components/ui/character-tab-content.tsx | 52 ++++++---- 2 files changed, 65 insertions(+), 90 deletions(-) diff --git a/components/pages/work-flow/use-edit-data.tsx b/components/pages/work-flow/use-edit-data.tsx index 5b28a82..64a7ce6 100644 --- a/components/pages/work-flow/use-edit-data.tsx +++ b/components/pages/work-flow/use-edit-data.tsx @@ -2,74 +2,7 @@ import { useEffect, useState } from "react"; import { useShotService } from "@/app/service/Interaction/ShotService"; import { useSearchParams } from 'next/navigation'; - -const mockShotData = [ - { - id: '1', - name: 'Shot 1', - sketchUrl: 'https://example.com/sketch.png', - videoUrl: ['https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ1-0-20250725023719.mp4'], - status: 1, // 0:视频加载中 1:任务已完成 2:任务失败 - lens: [ - { - name: 'Shot 1', - script: '镜头聚焦在 President Alfred King 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。', - content: [{ - roleName: 'President Alfred King', - content: '我需要一个镜头，镜头聚焦在 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。' - }] - } - ] - }, { - id: '2', - name: 'Shot 2', - sketchUrl: 'https://example.com/sketch.png', - videoUrl: ['https://video-base-imf.oss-ap-southeast-7.aliyuncs.com/uploads/FJ3-0-20250725023725.mp4'], - status: 1, // 0:视频加载中 1:任务已完成 2:任务失败 - lens: [ - { - name: 'Shot 1', - script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。', - content: [{ - roleName: 'Samuel Ryan', - content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。' - }] - } - ] - }, { - id: '3', - name: 'Shot 3', - sketchUrl: 'https://example.com/sketch.png', - videoUrl: [], - status: 0, // 0:视频加载中 1:任务已完成 2:任务失败 - lens: [ - { - name: 'Shot 1', - script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。', - content: [{ - roleName: 'Samuel Ryan', - content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。' - }] - } - ] - }, { - id: '4', - name: 'Shot 4', - sketchUrl: 'https://example.com/sketch.png', - videoUrl: [], - status: 2, // 0:视频加载中 1:任务已完成 2:任务失败 - lens: [ - { - name: 'Shot 1', - script: '镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。', - content: [{ - roleName: 'Samuel Ryan', - content: '我需要一个镜头，镜头聚焦在 Samuel Ryan 愤怒的脸上，他被压制住了。他发出一声绝望的吼叫，盖过了枪声。' - }] - } - ] - } -] +import { useRoleServiceHook } from "@/app/service/Interaction/RoleService"; export const useEditData = (tabType: string) => { const searchParams = useSearchParams(); @@ -77,6 +10,8 @@ export const useEditData = (tabType: string) => { const [loading, setLoading] = useState(true); const [shotData, setShotData] = useState([]); + const [roleData, setRoleData] = useState([]); + const { videoSegments, getVideoSegmentList, @@ -85,13 +20,30 @@ export const useEditData = (tabType: string) => { filterRole } = useShotService(); + const { + roleList, + selectedRole, + userRoleLibrary, + fetchRoleList, + selectRole, + fetchUserRoleLibrary + } = useRoleServiceHook(); + useEffect(() => { if (tabType === 'shot') { getVideoSegmentList(projectId).then(() => { setLoading(false); }).catch((err) => { console.log('useEditData-----err', err); - setShotData(mockShotData); + setShotData([]); + setLoading(false); + }); + } else if (tabType === 'role') { + fetchRoleList(projectId).then(() => { + setLoading(false); + }).catch((err) => { + console.log('useEditData-----err', err); + setRoleData([]); setLoading(false); }); } @@ -102,11 +54,22 @@ export const useEditData = (tabType: string) => { setShotData(videoSegments); }, [videoSegments]); + useEffect(() => { + setRoleData(roleList); + }, [roleList]); + return { loading, + // shot shotData, setSelectedSegment, regenerateVideoSegment, - filterRole + filterRole, + // role + roleData, + selectRole, + selectedRole, + userRoleLibrary, + fetchUserRoleLibrary } } \ No newline at end of file diff --git a/components/ui/character-tab-content.tsx b/components/ui/character-tab-content.tsx index 3c0e8bb..79b8710 100644 --- a/components/ui/character-tab-content.tsx +++ b/components/ui/character-tab-content.tsx @@ -8,7 +8,7 @@ import FloatingGlassPanel from './FloatingGlassPanel'; import { ReplaceCharacterPanel, mockShots, mockCharacter } from './replace-character-panel'; import { CharacterLibrarySelector } from './character-library-selector'; import HorizontalScroller from './HorizontalScroller'; -import { useRoleServiceHook } from '@/app/service/Interaction/RoleService'; +import { useEditData } from '@/components/pages/work-flow/use-edit-data'; interface Appearance { hairStyle: string; @@ -63,8 +63,6 @@ export function CharacterTabContent({ onSketchSelect, roles = [mockRole] }: CharacterTabContentProps) { - const [localRole, setLocalRole] = useState(mockRole); - const [currentRole, setCurrentRole] = useState(roles[currentRoleIndex]); const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false); const [replacePanelKey, setReplacePanelKey] = useState(0); const [ignoreReplace, setIgnoreReplace] = useState(false); @@ -74,14 +72,22 @@ export function CharacterTabContent({ const fileInputRef = useRef(null); const [enableAnimation, setEnableAnimation] = useState(true); const [showAddToLibrary, setShowAddToLibrary] = useState(true); - const {fetchRoleList,roleList,fetchUserRoleLibrary,userRoleLibrary} = useRoleServiceHook() + + const { + loading, + roleData, + selectRole, + selectedRole, + userRoleLibrary, + fetchUserRoleLibrary + } = useEditData('role'); + useEffect(() => { - // 从url 获取 episodeId 作为projctId - const projectId = new URLSearchParams(window.location.search).get('episodeId'); - if (projectId) { - fetchRoleList(projectId); + if (roleData.length > 0) { + selectRole(roleData[selectRoleIndex].id); } - }, [fetchRoleList]); + }, [selectRoleIndex, roleData]); + const handleConfirmGotoReplace = () => { setIsRemindReplacePanelOpen(false); setIsReplacePanelOpen(true); @@ -94,10 +100,7 @@ export function CharacterTabContent({ const handleReplaceCharacter = (url: string) => { setEnableAnimation(true); - setCurrentRole({ - ...currentRole, - url: url - }); + // 替换角色 setIsReplacePanelOpen(true); }; @@ -115,7 +118,7 @@ export function CharacterTabContent({ }; const handleChangeRole = (index: number) => { - if (currentRole.url !== roles[selectRoleIndex].url && !ignoreReplace) { + if (selectedRole?.imageUrl !== roleData[selectRoleIndex].imageUrl && !ignoreReplace) { // 提示 角色已修改，弹出替换角色面板 setIsRemindReplacePanelOpen(true); return; @@ -125,7 +128,6 @@ export function CharacterTabContent({ setIgnoreReplace(false); setSelectRoleIndex(index); - setCurrentRole(roles[index]); }; // 从角色库中选择角色 @@ -177,12 +179,22 @@ export function CharacterTabContent({ event.target.value = ''; }; + // 如果loading 显示loading状态 + if (loading) { + return ( +
+
+

Loading...

+
+ ); + } + // 如果没有角色数据，显示占位内容 - if (!roles || roles.length === 0) { + if (roleData.length === 0) { return (
-

No character data

+

No role data

); } @@ -210,7 +222,7 @@ export function CharacterTabContent({ selectedIndex={selectRoleIndex} onItemClick={(i: number) => handleChangeRole(i)} > - {roleList.map((role, index) => ( + {roleData.map((role, index) => (