forked from 77media/video-flow
修复 智能输入框 聚焦冲突问题
This commit is contained in:
parent
aa204e731e
commit
b97c867ac3
@ -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}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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]);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user