forked from 77media/video-flow
优化主界面当前选中切换
This commit is contained in:
parent
e2567c4d1c
commit
4e87b4a15f
@ -23,9 +23,10 @@ interface InputBarProps {
|
|||||||
setVideoPreview?: (url: string, id: string) => void;
|
setVideoPreview?: (url: string, id: string) => void;
|
||||||
initialVideoUrl?: string;
|
initialVideoUrl?: string;
|
||||||
initialVideoId?: string;
|
initialVideoId?: string;
|
||||||
|
setIsFocusChatInput?: (v: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVideoId }: InputBarProps) {
|
export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVideoId, setIsFocusChatInput }: InputBarProps) {
|
||||||
const [text, setText] = useState("");
|
const [text, setText] = useState("");
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
const [uploadProgress, setUploadProgress] = useState(0);
|
const [uploadProgress, setUploadProgress] = useState(0);
|
||||||
@ -285,6 +286,8 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide
|
|||||||
handleSend();
|
handleSend();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
onFocus={() => setIsFocusChatInput?.(true)}
|
||||||
|
onBlur={() => setIsFocusChatInput?.(false)}
|
||||||
data-alt="text-input"
|
data-alt="text-input"
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -16,6 +16,7 @@ interface SmartChatBoxProps {
|
|||||||
previewVideoUrl?: string | null;
|
previewVideoUrl?: string | null;
|
||||||
previewVideoId?: string | null;
|
previewVideoId?: string | null;
|
||||||
onClearPreview?: () => void;
|
onClearPreview?: () => void;
|
||||||
|
setIsFocusChatInput?: (v: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MessageGroup {
|
interface MessageGroup {
|
||||||
@ -42,7 +43,8 @@ export default function SmartChatBox({
|
|||||||
userId,
|
userId,
|
||||||
previewVideoUrl,
|
previewVideoUrl,
|
||||||
previewVideoId,
|
previewVideoId,
|
||||||
onClearPreview
|
onClearPreview,
|
||||||
|
setIsFocusChatInput
|
||||||
}: SmartChatBoxProps) {
|
}: SmartChatBoxProps) {
|
||||||
// 消息列表引用
|
// 消息列表引用
|
||||||
const listRef = useRef<HTMLDivElement>(null);
|
const listRef = useRef<HTMLDivElement>(null);
|
||||||
@ -197,6 +199,7 @@ export default function SmartChatBox({
|
|||||||
}}
|
}}
|
||||||
initialVideoUrl={previewVideoUrl || undefined}
|
initialVideoUrl={previewVideoUrl || undefined}
|
||||||
initialVideoId={previewVideoId || undefined}
|
initialVideoId={previewVideoId || undefined}
|
||||||
|
setIsFocusChatInput={setIsFocusChatInput}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -294,7 +294,7 @@ function transformSystemMessage(
|
|||||||
case 'generate_script_summary':
|
case 'generate_script_summary':
|
||||||
if (isScriptSummary(customData)) {
|
if (isScriptSummary(customData)) {
|
||||||
blocks = [
|
blocks = [
|
||||||
{ type: 'text', text: `🎬 剧本摘要生成完成\n\n${customData.summary}\n${content}` }
|
{ type: 'text', text: `🎬 剧本摘要生成完成\n\n${customData.summary}\n\n${content}` }
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|||||||
@ -28,6 +28,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
const [isSmartChatBoxOpen, setIsSmartChatBoxOpen] = React.useState(true);
|
const [isSmartChatBoxOpen, setIsSmartChatBoxOpen] = React.useState(true);
|
||||||
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
|
||||||
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
|
||||||
|
const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
|
||||||
|
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const episodeId = searchParams.get('episodeId') || '';
|
const episodeId = searchParams.get('episodeId') || '';
|
||||||
@ -160,7 +161,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
|
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
|
||||||
<div className="h-[123px] w-[calc((100vh-6rem-200px)/9*16)]">
|
<div className="h-[123px] w-[calc((100vh-6rem-200px)/9*16)]">
|
||||||
<ThumbnailGrid
|
<ThumbnailGrid
|
||||||
isDisabledFocus={isEditModalOpen || isPauseWorkFlow || isSmartChatBoxOpen}
|
isDisabledFocus={isEditModalOpen || isPauseWorkFlow || isFocusChatInput}
|
||||||
taskObject={taskObject}
|
taskObject={taskObject}
|
||||||
currentSketchIndex={currentSketchIndex}
|
currentSketchIndex={currentSketchIndex}
|
||||||
onSketchSelect={setCurrentSketchIndex}
|
onSketchSelect={setCurrentSketchIndex}
|
||||||
@ -214,6 +215,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
mask={false}
|
mask={false}
|
||||||
zIndex={49}
|
zIndex={49}
|
||||||
|
rootClassName="outline-none"
|
||||||
className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
|
className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
@ -236,6 +238,7 @@ const WorkFlow = React.memo(function WorkFlow() {
|
|||||||
userId={userId}
|
userId={userId}
|
||||||
previewVideoUrl={previewVideoUrl}
|
previewVideoUrl={previewVideoUrl}
|
||||||
previewVideoId={previewVideoId}
|
previewVideoId={previewVideoId}
|
||||||
|
setIsFocusChatInput={setIsFocusChatInput}
|
||||||
onClearPreview={() => {
|
onClearPreview={() => {
|
||||||
setPreviewVideoUrl(null);
|
setPreviewVideoUrl(null);
|
||||||
setPreviewVideoId(null);
|
setPreviewVideoId(null);
|
||||||
|
|||||||
@ -117,20 +117,12 @@ export function ThumbnailGrid({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 组件挂载时自动聚焦
|
// 组件挂载时自动聚焦
|
||||||
if (thumbnailsRef.current && !isDisabledFocus) {
|
if (thumbnailsRef.current && !isDisabledFocus) {
|
||||||
thumbnailsRef.current.focus();
|
|
||||||
window.addEventListener('keydown', handleKeyDown);
|
window.addEventListener('keydown', handleKeyDown);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||||
}, [handleKeyDown, isDisabledFocus]);
|
}, [handleKeyDown, isDisabledFocus]);
|
||||||
|
|
||||||
// 确保在数据变化时保持焦点
|
|
||||||
useEffect(() => {
|
|
||||||
if (thumbnailsRef.current && !isFocused && !isDisabledFocus) {
|
|
||||||
thumbnailsRef.current.focus();
|
|
||||||
}
|
|
||||||
}, [taskObject.currentStage, isFocused]);
|
|
||||||
|
|
||||||
// 处理鼠标/触摸拖动事件
|
// 处理鼠标/触摸拖动事件
|
||||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
// 阻止默认的拖拽行为
|
// 阻止默认的拖拽行为
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user