修复 智能输入框 聚焦冲突问题

This commit is contained in:
北枳 2025-08-17 17:52:14 +08:00
parent aa204e731e
commit b97c867ac3
3 changed files with 9 additions and 10 deletions

View File

@ -7,7 +7,7 @@ interface AISuggestionBarProps {
suggestions: string[]; suggestions: string[];
onSuggestionClick: (suggestion: string) => void; onSuggestionClick: (suggestion: string) => void;
onSubmit: (text: string) => void; onSubmit: (text: string) => void;
onFocus: () => void; onClick: () => void;
placeholder?: string; placeholder?: string;
} }
@ -15,7 +15,7 @@ export function AISuggestionBar({
suggestions, suggestions,
onSuggestionClick, onSuggestionClick,
onSubmit, onSubmit,
onFocus, onClick,
placeholder = "输入你的想法,或点击预设词条获取 AI 建议..." placeholder = "输入你的想法,或点击预设词条获取 AI 建议..."
}: AISuggestionBarProps) { }: AISuggestionBarProps) {
const [inputText, setInputText] = useState(''); const [inputText, setInputText] = useState('');
@ -89,7 +89,7 @@ export function AISuggestionBar({
</motion.div> </motion.div>
</div> </div>
<div className="max-w-5xl mx-auto px-6"> <div className="max-w-5xl mx-auto px-6" onClick={onClick}>
{/* 智能预设词条 英文 */} {/* 智能预设词条 英文 */}
<AnimatePresence> <AnimatePresence>
{showSuggestions && !isCollapsed && ( {showSuggestions && !isCollapsed && (
@ -179,7 +179,6 @@ export function AISuggestionBar({
if (isCollapsed) { if (isCollapsed) {
toggleCollapse(); toggleCollapse();
} }
onFocus();
}} }}
onBlur={() => setIsFocused(false)} onBlur={() => setIsFocused(false)}
placeholder={isCollapsed ? "点击展开..." : placeholder} placeholder={isCollapsed ? "点击展开..." : placeholder}

View File

@ -168,7 +168,7 @@ const WorkFlow = React.memo(function WorkFlow() {
{taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && ( {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
<div className="h-[112px] w-[calc((100vh-6rem-200px)/9*16)]"> <div className="h-[112px] w-[calc((100vh-6rem-200px)/9*16)]">
<ThumbnailGrid <ThumbnailGrid
isEditModalOpen={isEditModalOpen} isDisabledFocus={isEditModalOpen || isPauseWorkFlow}
taskObject={taskObject} taskObject={taskObject}
isLoading={isLoading} isLoading={isLoading}
currentSketchIndex={currentSketchIndex} currentSketchIndex={currentSketchIndex}
@ -215,7 +215,7 @@ const WorkFlow = React.memo(function WorkFlow() {
suggestions={mockSuggestions} suggestions={mockSuggestions}
onSuggestionClick={handleSuggestionClick} onSuggestionClick={handleSuggestionClick}
onSubmit={handleSubmit} onSubmit={handleSubmit}
onFocus={() => setIsPauseWorkFlow(true)} onClick={() => setIsPauseWorkFlow(true)}
placeholder="Please input your ideas, or click the predefined tags to receive AI advice..." placeholder="Please input your ideas, or click the predefined tags to receive AI advice..."
/> />
</ErrorBoundary> </ErrorBoundary>

View File

@ -8,7 +8,7 @@ import { Loader2, X } from 'lucide-react';
import { TaskObject } from '@/api/DTO/movieEdit'; import { TaskObject } from '@/api/DTO/movieEdit';
interface ThumbnailGridProps { interface ThumbnailGridProps {
isEditModalOpen: boolean; isDisabledFocus: boolean;
taskObject: TaskObject; taskObject: TaskObject;
isLoading: boolean; isLoading: boolean;
currentSketchIndex: number; currentSketchIndex: number;
@ -22,7 +22,7 @@ interface ThumbnailGridProps {
} }
export function ThumbnailGrid({ export function ThumbnailGrid({
isEditModalOpen, isDisabledFocus,
taskObject, taskObject,
isLoading, isLoading,
currentSketchIndex, currentSketchIndex,
@ -124,7 +124,7 @@ export function ThumbnailGrid({
// 监听键盘事件 // 监听键盘事件
useEffect(() => { useEffect(() => {
// 组件挂载时自动聚焦 // 组件挂载时自动聚焦
if (thumbnailsRef.current && !isEditModalOpen) { if (thumbnailsRef.current && !isDisabledFocus) {
thumbnailsRef.current.focus(); thumbnailsRef.current.focus();
} }
@ -134,7 +134,7 @@ export function ThumbnailGrid({
// 确保在数据变化时保持焦点 // 确保在数据变化时保持焦点
useEffect(() => { useEffect(() => {
if (thumbnailsRef.current && !isFocused && !isEditModalOpen) { if (thumbnailsRef.current && !isFocused && !isDisabledFocus) {
thumbnailsRef.current.focus(); thumbnailsRef.current.focus();
} }
}, [taskObject.currentStage, isFocused]); }, [taskObject.currentStage, isFocused]);