优化主界面当前选中切换

This commit is contained in:
北枳 2025-08-26 17:15:17 +08:00
parent e2567c4d1c
commit 4e87b4a15f
5 changed files with 13 additions and 12 deletions

View File

@ -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>

View File

@ -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>
); );

View File

@ -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;

View File

@ -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);

View File

@ -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>) => {
// 阻止默认的拖拽行为 // 阻止默认的拖拽行为