fix: 使用 Portal 渲染标签预览弹窗到 body,修复 backdrop-blur 导致 fixed 定位失效的问题

This commit is contained in:
Your Name 2026-02-02 13:10:11 +08:00
parent d14f7f263e
commit 3d4cbf4662

View File

@ -3,6 +3,7 @@
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { useEffect, useRef, useState, useCallback } from "react";
import { createPortal } from "react-dom";
import { useRouter } from "next/navigation";
import useSWR from "swr";
import { Send, Loader2, ImagePlus, Paperclip, X, Sparkles, User, Bot, Plus, History, Share2, LayoutGrid, Maximize2, RefreshCw, Zap, Globe, Box, ArrowUp } from "lucide-react";
@ -1483,7 +1484,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
top = padding;
}
return (
// 使用 Portal 渲染到 body,避免 backdrop-blur 影响 fixed 定位
return createPortal(
<div
data-tag-preview="true"
className="fixed z-[10001] bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-border/50 overflow-hidden animate-in fade-in zoom-in-95 duration-150"
@ -1560,7 +1562,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</div>
)}
</div>
</div>
</div>,
document.body
);
})()}
</div>