fix: prevent navigation to homepage when clicking buttons in angle edit dialog

This commit is contained in:
Your Name 2026-01-22 20:12:41 +08:00
parent 0272f5e391
commit 3366265f1d

View File

@ -56,6 +56,15 @@ export function AngleEditDialog({
}
}, [resultUrl]);
// 处理对话框关闭(防止意外触发导航)
const handleOpenChange = useCallback((newOpen: boolean) => {
// 只有在明确关闭时才调用 onOpenChange
// 避免在处理过程中意外关闭
if (!newOpen && !isProcessing) {
onOpenChange(newOpen);
}
}, [isProcessing, onOpenChange]);
// 处理相机状态变化
const handleCameraStateChange = useCallback((state: CameraState) => {
setCameraState(state);
@ -66,7 +75,11 @@ export function AngleEditDialog({
}, [isProcessing]);
// 生成新视角
const handleGenerate = useCallback(async () => {
const handleGenerate = useCallback(async (e?: React.MouseEvent) => {
if (e) {
e.stopPropagation(); // 阻止事件冒泡,避免触发外层的 onCancel
}
setIsProcessing(true);
setResultUrl(null);
setActiveTab("result"); // 切换到结果 Tab 显示加载状态
@ -124,14 +137,22 @@ export function AngleEditDialog({
}, [resultUrl, cameraState]);
// 使用此图片(直接发送到聊天)
const handleUseImage = useCallback(() => {
const handleUseImage = useCallback((e?: React.MouseEvent) => {
if (e) {
e.stopPropagation(); // 阻止事件冒泡,避免触发外层的 onCancel
e.preventDefault(); // 阻止默认行为
}
if (resultUrl) {
// 如果提供了 onComplete 回调,调用它
if (onComplete) {
onComplete(resultUrl);
}
// 关闭对话框,图片已经通过 API 保存到数据库
onOpenChange(false);
// 使用 setTimeout 确保回调先执行,避免事件冒泡
setTimeout(() => {
onOpenChange(false);
}, 100);
toast.success("图片已添加到对话");
}
}, [resultUrl, onOpenChange, onComplete]);
@ -149,7 +170,7 @@ export function AngleEditDialog({
}, []);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="max-w-4xl p-0 gap-0 overflow-hidden border-none shadow-2xl bg-background/95 backdrop-blur-xl">
{/* 紧凑标题栏 */}
<div className="flex items-center justify-between px-4 py-3 border-b bg-muted/20">