fix: 修复标签预览弹窗位置溢出视口的问题
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-02-02 12:44:52 +08:00
parent 46806b6f82
commit 1b5bd33b54

View File

@ -1432,28 +1432,44 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
const previewHeight = 280; // 预估高度
const padding = 16;
// 获取聊天面板的边界(弹窗应该在面板内显示)
const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 800;
const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 600;
// 水平位置:居中对齐标签,但确保不超出左右边界
let left = tagPreview.x - previewWidth / 2;
// 确保不超出左边界
if (left < padding) left = padding;
if (left + previewWidth > window.innerWidth - padding) {
left = window.innerWidth - previewWidth - padding;
// 确保不超出右边界(考虑弹窗宽度)
if (left + previewWidth > viewportWidth - padding) {
left = viewportWidth - previewWidth - padding;
}
// 垂直位置:显示在标签上方
// 垂直位置:优先显示在标签上方
let top = tagPreview.y - previewHeight - 12;
// 如果上方空间不够(弹窗会超出顶部),显示在标签下方
if (top < padding) {
// 如果上方空间不够,显示在标签下方
top = tagPreview.y + 30;
}
// 再次检查:如果下方也会超出底部,则尽量靠近底部显示
if (top + previewHeight > viewportHeight - padding) {
top = viewportHeight - previewHeight - padding;
}
// 最终确保 top 不为负数
if (top < padding) top = padding;
return (
<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"
style={{
left: left,
top: top,
left: Math.max(padding, Math.min(left, viewportWidth - previewWidth - padding)),
top: Math.max(padding, Math.min(top, viewportHeight - previewHeight - padding)),
width: previewWidth,
maxHeight: viewportHeight - padding * 2,
}}
onMouseEnter={() => {
// 鼠标进入预览弹窗,取消隐藏