fix: enforce opaque batch modal and hide node overlays while open
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-03-05 18:11:52 +08:00
parent f83a3037fc
commit 8fc52dfc76
3 changed files with 16 additions and 11 deletions

View File

@ -1619,7 +1619,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
return (
<>
{/* 选中时在图片上方显示标题 */}
{isSelected && !isMultiSelected && data.src && (
{isSelected && !isMultiSelected && data.src && !sceneFusionDialogOpen && (
<div className="absolute -top-7 left-0 right-0 z-10 flex items-center justify-between px-1 text-xs text-[#2f7df6]">
<div className="flex min-w-0 items-center gap-1">
<ImagePlus className="h-3 w-3" />
@ -2048,7 +2048,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
</Dialog>
{/* 工具栏使用 Portal 渲染到 body,避免被裁剪 */}
{isSelected && !isMultiSelected && data.src && !isEditingTitle && typeof document !== 'undefined' && createPortal(
{isSelected && !isMultiSelected && data.src && !isEditingTitle && !sceneFusionDialogOpen && typeof document !== 'undefined' && createPortal(
<TooltipProvider delayDuration={200}>
<div
className="fixed z-[9999] flex items-center rounded-[24px] border border-slate-200 bg-white/95 px-2 py-2 text-gray-800 shadow-[0_14px_38px_rgba(15,23,42,0.16)] backdrop-blur-md dark:border-slate-700 dark:bg-slate-900/95 dark:text-gray-100"

View File

@ -18,12 +18,17 @@ interface SceneFusionDialogProps {
export function SceneFusionDialog({ open, onOpenChange }: SceneFusionDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="z-[10050] max-w-6xl h-[92vh] flex flex-col p-0 gap-0 overflow-hidden bg-background">
<DialogContent className="z-[20000] max-w-6xl h-[92vh] flex flex-col p-0 gap-0 overflow-hidden !bg-white dark:!bg-zinc-950">
<DialogHeader className="sr-only">
<DialogTitle>批量处理</DialogTitle>
<DialogDescription>批量处理图片与场景裂变。</DialogDescription>
</DialogHeader>
<SceneFusionView onBack={() => onOpenChange(false)} />
<div className="relative flex-1 min-h-0">
<div className="absolute inset-0 bg-white dark:bg-zinc-950 pointer-events-none" />
<div className="relative z-10 h-full">
<SceneFusionView onBack={() => onOpenChange(false)} />
</div>
</div>
</DialogContent>
</Dialog>
);

View File

@ -699,10 +699,10 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
};
return (
<div className="flex h-full min-h-0 w-full flex-col bg-background">
<div className="flex h-full min-h-0 w-full flex-col bg-white dark:bg-zinc-950">
<div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
<div className="w-full md:w-[420px] border-r flex min-h-0 flex-col bg-background shrink-0">
<div className="border-b px-4 py-3 shrink-0 bg-background">
<div className="w-full md:w-[420px] border-r flex min-h-0 flex-col bg-white dark:bg-zinc-950 shrink-0">
<div className="border-b px-4 py-3 shrink-0 bg-white dark:bg-zinc-950">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Layers className="w-4 h-4 text-primary" />
@ -729,7 +729,7 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
"rounded-lg border px-3 py-2 text-left transition-all duration-150 active:scale-[0.99]",
mode === option.id
? "border-primary bg-primary/12 shadow-[0_0_0_1px_hsl(var(--primary)/0.35)]"
: "border-border bg-background hover:bg-muted/60 hover:border-primary/40"
: "border-border bg-white dark:bg-zinc-950 hover:bg-muted/60 hover:border-primary/40"
)}
>
<div className="flex items-start justify-between gap-2">
@ -1054,8 +1054,8 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
</div>
</div>
<div className="flex h-full min-h-0 flex-1 flex-col bg-background">
<div className="p-4 border-b flex items-center justify-between bg-background shrink-0">
<div className="flex h-full min-h-0 flex-1 flex-col bg-white dark:bg-zinc-950">
<div className="p-4 border-b flex items-center justify-between bg-white dark:bg-zinc-950 shrink-0">
<h3 className="font-medium">处理结果</h3>
{resultItems.some((item) => item.status === "completed") && (
<Button variant="outline" size="sm" onClick={downloadAll}>
@ -1075,7 +1075,7 @@ export function SceneFusionView({ onBack, initialProductImage, initialProductNam
) : (
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
{resultItems.map((item, index) => (
<div key={item.id} className="border rounded-lg overflow-hidden bg-background shadow-sm flex flex-col">
<div key={item.id} className="border rounded-lg overflow-hidden bg-white dark:bg-zinc-950 shadow-sm flex flex-col">
<div className="p-2 border-b text-xs text-muted-foreground bg-muted/30 flex justify-between items-center">
<span>任务 {index + 1}</span>
<span