xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

检测角色改变

Browse Source
This commit is contained in:
北枳 2025-08-14 16:01:32 +08:00
parent 90fb57f0fd
commit e6ef62a3d7
3 changed files with 98 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/pages/work-flow/use-edit-data.tsx
View File

@ -43,6 +43,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
regenerateRole,
uploadImageAndUpdateRole,
saveRoleToLibrary,
changeTabCallback,
} = useRoleServiceHook();
const {
@ -134,6 +135,7 @@ export const useEditData = (tabType: string, originalText?: string) => {
regenerateRole,
fetchUserRoleLibrary,
uploadImageAndUpdateRole,
changeTabCallback,
// role shot
shotSelectionList,
selectedRoleId,

113
components/ui/character-tab-content.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect, forwardRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ImageUp, Library, Play, Pause, RefreshCw, Wand2, Users, CircleX, ReplaceAll, X, TriangleAlert, Loader2 } from 'lucide-react';
import { cn } from '@/public/lib/utils';
@ -35,18 +35,17 @@ interface Role {
interface CharacterTabContentProps {
taskSketch: any[];
currentRoleIndex: number;
onSketchSelect: (index: number) => void;
roles: Role[];
onClose: () => void;
onApply: () => void;
setActiveTab: (tabId: string) => void;
}
export function CharacterTabContent({
taskSketch,
currentRoleIndex,
onSketchSelect,
roles = []
}: CharacterTabContentProps) {
export const CharacterTabContent = forwardRef<
{ switchBefore: (tabId: string) => boolean, saveBefore: () => void },
CharacterTabContentProps
>((props, ref) => {
const { onClose, onApply, setActiveTab } = props;
const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
const [replacePanelKey, setReplacePanelKey] = useState(0);
const [ignoreReplace, setIgnoreReplace] = useState(false);
@ -61,6 +60,10 @@ export function CharacterTabContent({
const [isLoadingShots, setIsLoadingShots] = useState(false);
const [isLoadingLibrary, setIsLoadingLibrary] = useState(false);
const [isUploading, setIsUploading] = useState(false);
const [isUpdate, setIsUpdate] = useState(false);
const [triggerType, setTriggerType] = useState<'tab' | 'apply' | 'user'>('tab');
const [nextToTabId, setNextToTabId] = useState<string>('');
const [nextToUserIndex, setNextToUserIndex] = useState<number>(-1);
const {
loading,
@ -73,6 +76,7 @@ export function CharacterTabContent({
regenerateRole,
fetchUserRoleLibrary,
uploadImageAndUpdateRole,
changeTabCallback,
// role shot
shotSelectionList,
fetchRoleShots,
@ -82,6 +86,31 @@ export function CharacterTabContent({
const searchParams = useSearchParams();
const episodeId = searchParams.get('episodeId');
// 暴露方法给父组件
React.useImperativeHandle(ref, () => ({
switchBefore: (tabId: string) => {
setNextToTabId(tabId);
// 判断 角色是否修改
const isChange = selectedRole!.isChangeRole
console.log('switchBefore', isChange);
if (isChange) {
setTriggerType('tab');
setIsRemindReplacePanelOpen(true);
}
return isChange;
},
saveBefore: () => {
console.log('saveBefore');
// 判断 角色是否修改
changeTabCallback((isChange: Boolean) => {
if (isChange) {
setTriggerType('apply');
handleStartReplaceCharacter();
}
});
}
}));
useEffect(() => {
console.log('-==========roleData===========-', roleData);
@ -116,24 +145,32 @@ export function CharacterTabContent({
const handleConfirmGotoReplace = () => {
setIsRemindReplacePanelOpen(false);
setIsReplacePanelOpen(true);
handleStartReplaceCharacter();
};
const handleCloseRemindReplacePanel = () => {
setIsRemindReplacePanelOpen(false);
setIgnoreReplace(true);
console.log('忽略替换', triggerType, nextToTabId, nextToUserIndex);
if (triggerType === 'apply') {
onClose();
} else if (triggerType === 'tab') {
setActiveTab(nextToTabId);
} else {
selectRole(roleData[nextToUserIndex]);
}
};
// President Alfred King Samuel Ryan
const handleConfirmReplace = (selectedShots: string[], addToLibrary: boolean) => {
const handleConfirmReplace = async (selectedShots: string[], addToLibrary: boolean) => {
// 处理替换确认逻辑
console.log('Selected shots:', selectedShots);
console.log('Add to library:', addToLibrary);
applyRoleToSelectedShots(selectedRole || {} as RoleEntity);
await applyRoleToSelectedShots(selectedRole || {} as RoleEntity);
setIsReplacePanelOpen(false);
if(addToLibrary){
saveRoleToLibrary();
}
onApply();
};
// 取消替换
@ -143,18 +180,22 @@ export function CharacterTabContent({
const handleChangeRole = (index: number) => {
const oldRole = roleData.find(role => role.id === selectedRole?.id);
console.log('切换角色前对比', selectedRole?.imageUrl, oldRole?.imageUrl);
if (selectedRole?.imageUrl !== oldRole?.imageUrl && !ignoreReplace) {
// 提示 角色已修改，弹出替换角色面板
setIsRemindReplacePanelOpen(true);
return;
}
// 重置替换规则
setEnableAnimation(false);
setIgnoreReplace(false);
setIsRegenerate(false);
console.log('切换角色前对比');
changeTabCallback((isChange: Boolean) => {
if (isChange) {
setTriggerType('user');
setIsRemindReplacePanelOpen(true);
setNextToUserIndex(index);
return;
}
selectRole(roleData[index]);
// 重置替换规则
setEnableAnimation(false);
setIgnoreReplace(false);
setIsRegenerate(false);
selectRole(roleData[index]);
});
};
// 从角色库中选择角色
@ -172,7 +213,7 @@ export function CharacterTabContent({
...role,
name: selectedRole?.name || ''
});
handleStartReplaceCharacter();
// handleStartReplaceCharacter();
}
};
@ -194,7 +235,7 @@ export function CharacterTabContent({
// 然后调用重新生成角色
await regenerateRole();
setIsRegenerate(false);
handleStartReplaceCharacter();
// handleStartReplaceCharacter();
};
const handleUploadClick = () => {
@ -347,17 +388,7 @@ export function CharacterTabContent({
onUpdateText={(text: string) => updateRoleText(text)}
/>
{/* 重新生成按钮、替换形象按钮 */}
<div className="grid grid-cols-2 gap-2">
<motion.button
onClick={() => handleStartReplaceCharacter()}
className="flex items-center justify-center gap-2 px-4 py-3 bg-pink-500/10 hover:bg-pink-500/20
text-pink-500 rounded-lg transition-colors"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<ReplaceAll className="w-4 h-4" />
<span>Replace</span>
</motion.button>
<div className="grid grid-cols-1 gap-2">
<motion.button
onClick={() => handleRegenerate()}
className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
@ -410,7 +441,7 @@ export function CharacterTabContent({
<div className="flex flex-col items-center gap-4 text-white py-4">
<div className="flex items-center gap-3">
<TriangleAlert className="w-6 h-6 text-yellow-400" />
<p className="text-lg font-medium">角色已修改，是否需要替换？</p>
<p className="text-lg font-medium">角色已修改，不替换就会丢失修改，是否需要替换？</p>
</div>
<div className="flex gap-3 mt-2">
@ -436,4 +467,4 @@ export function CharacterTabContent({
</FloatingGlassPanel>
</div>
);
}
});

34
components/ui/edit-modal.tsx
View File

@ -66,6 +66,7 @@ export function EditModal({
const [resetKey, setResetKey] = useState(0);
const [remindFallbackText, setRemindFallbackText] = useState('The task will be regenerated and edited. Do you want to continue?');
const scriptTabContentRef = useRef<any>(null);
const characterTabContentRef = useRef<any>(null);
// 添加一个状态来标记是否是从切换tab触发的提醒
const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null);
@ -97,11 +98,16 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
}
const checkUpdate = (tabId: string) => {
if (tabId === '0') {
if (activeTab === '0') {
const scriptTabContent = scriptTabContentRef.current;
if (scriptTabContent) {
return scriptTabContent.checkUpdate();
}
} else if (activeTab === '1') {
const characterTabContent = characterTabContentRef.current;
if (characterTabContent) {
return characterTabContent.switchBefore(tabId);
}
}
return false;
}
@ -109,11 +115,11 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
const handleChangeTab = (tabId: string, disabled: boolean) => {
if (disabled) return;
// 切换前 检查是否更新
const isUpdate = checkUpdate(activeTab);
const isUpdate = checkUpdate(tabId);
if (isUpdate) {
setPendingSwitchTabId(tabId); // 记录要切换到的目标tab
setRemindFallbackText('You must click Apply button to save the current changes.');
setIsRemindFallbackOpen(true);
// setPendingSwitchTabId(tabId); // 记录要切换到的目标tab
// setRemindFallbackText('You must click Apply button to save the current changes.');
// setIsRemindFallbackOpen(true);
return;
}
setActiveTab(tabId);
@ -122,7 +128,15 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
const handleSave = () => {
console.log('handleSave');
setIsRemindFallbackOpen(true);
// setIsRemindFallbackOpen(true);
if (activeTab === '1') {
characterTabContentRef.current.saveBefore();
}
}
const handleApply = () => {
console.log('handleApply');
handleConfirmGotoFallback();
}
const handleConfirmGotoFallback = () => {
@ -174,10 +188,10 @@ const [pendingSwitchTabId, setPendingSwitchTabId] = useState<string | null>(null
case '1':
return (
<CharacterTabContent
taskSketch={taskSketch}
currentRoleIndex={currentRoleIndex}
onSketchSelect={hanldeChangeSelect}
roles={roles}
ref={characterTabContentRef}
onClose={onClose}
onApply={handleApply}
setActiveTab={setActiveTab}
/>
);
case '2':