fix: reset canvas add image dialog state

This commit is contained in:
134 2026-06-23 18:41:23 +08:00
parent 97563450a6
commit c15a68385a

View File

@ -1,7 +1,7 @@
"use client"; "use client";
import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react"; import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react";
import { useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage"; import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -172,6 +172,29 @@ export function CanvasAddImageDialog({
[images, selectedImageIds] [images, selectedImageIds]
); );
const resetDialogState = useCallback(() => {
setQuery("");
setQueryMode("spu");
setResult(null);
setSelectedImageIds([]);
setErrorText(null);
}, []);
const handleDialogOpenChange = useCallback(
(nextOpen: boolean) => {
if (!nextOpen) {
resetDialogState();
}
onOpenChange(nextOpen);
},
[onOpenChange, resetDialogState]
);
const closeDialog = useCallback(() => {
resetDialogState();
onOpenChange(false);
}, [onOpenChange, resetDialogState]);
const handleSearch = async (nextQuery?: string, nextMode?: AgentWorkflowMaterialQueryType) => { const handleSearch = async (nextQuery?: string, nextMode?: AgentWorkflowMaterialQueryType) => {
if (!materialSearchEnabled) return; if (!materialSearchEnabled) return;
const keyword = String(nextQuery ?? query).trim(); const keyword = String(nextQuery ?? query).trim();
@ -234,14 +257,14 @@ export function CanvasAddImageDialog({
try { try {
setIsAdding(true); setIsAdding(true);
await onAddImages(selectedImages); await onAddImages(selectedImages);
onOpenChange(false); closeDialog();
} finally { } finally {
setIsAdding(false); setIsAdding(false);
} }
}; };
return ( return (
<Dialog onOpenChange={onOpenChange} open={open}> <Dialog onOpenChange={handleDialogOpenChange} open={open}>
<DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0"> <DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0">
<DialogHeader className="border-b px-6 pt-5 pb-4"> <DialogHeader className="border-b px-6 pt-5 pb-4">
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
@ -260,7 +283,7 @@ export function CanvasAddImageDialog({
className="h-11 justify-start gap-2 rounded-xl" className="h-11 justify-start gap-2 rounded-xl"
onClick={() => { onClick={() => {
onCreateBlankImage(); onCreateBlankImage();
onOpenChange(false); closeDialog();
}} }}
type="button" type="button"
variant="secondary" variant="secondary"
@ -417,7 +440,7 @@ export function CanvasAddImageDialog({
<DialogFooter className="border-t px-6 py-4"> <DialogFooter className="border-t px-6 py-4">
<Button <Button
onClick={() => onOpenChange(false)} onClick={closeDialog}
type="button" type="button"
variant="outline" variant="outline"
> >