fix: 简化标签预览弹窗位置计算,确保在视口内显示

This commit is contained in:
Your Name 2026-02-02 12:58:42 +08:00
parent a5319b5346
commit d14f7f263e

View File

@ -1448,49 +1448,39 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
{/* 🆕 标签悬停预览弹窗 - 固定显示在标签上方 */}
{tagPreview && (() => {
// 计算弹窗位置,确保不超出容器边界
// 计算弹窗位置
const previewWidth = 240;
const previewHeight = 280; // 预估高度
const previewHeight = 280;
const padding = 16;
// 使用容器边界(如果有),否则使用视口
const bounds = tagPreview.containerBounds || {
left: 0,
right: typeof window !== 'undefined' ? window.innerWidth : 800,
top: 0,
bottom: typeof window !== 'undefined' ? window.innerHeight : 600,
};
const containerWidth = bounds.right - bounds.left;
const containerHeight = bounds.bottom - bounds.top;
// 水平位置:居中对齐标签,但确保不超出容器边界
// 简化:直接使用标签位置,在标签上方居中显示
// tagPreview.x 是标签中心的x坐标
// tagPreview.y 是标签顶部的y坐标
let left = tagPreview.x - previewWidth / 2;
// 确保不超出左边界
if (left < bounds.left + padding) {
left = bounds.left + padding;
}
// 确保不超出右边界
if (left + previewWidth > bounds.right - padding) {
left = bounds.right - previewWidth - padding;
}
// 垂直位置:优先显示在标签上方
let top = tagPreview.y - previewHeight - 12;
// 如果上方空间不够(弹窗会超出顶部),显示在标签下方
if (top < bounds.top + padding) {
top = tagPreview.y + 30;
// 确保不超出视口左边界
if (left < padding) {
left = padding;
}
// 确保不超出视口右边界
if (typeof window !== 'undefined' && left + previewWidth > window.innerWidth - padding) {
left = window.innerWidth - previewWidth - padding;
}
// 再次检查:如果下方也会超出底部,则尽量靠近底部显示
if (top + previewHeight > bounds.bottom - padding) {
top = bounds.bottom - previewHeight - padding;
// 如果上方空间不够,显示在标签下方
if (top < padding) {
top = tagPreview.y + 36; // 标签下方
}
// 最终确保 top 不超出顶部
if (top < bounds.top + padding) {
top = bounds.top + padding;
// 确保不超出视口底部
if (typeof window !== 'undefined' && top + previewHeight > window.innerHeight - padding) {
top = window.innerHeight - previewHeight - padding;
}
// 最终确保 top 不为负
if (top < padding) {
top = padding;
}
return (
@ -1500,8 +1490,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
style={{
left: left,
top: top,
width: Math.min(previewWidth, containerWidth - padding * 2),
maxHeight: containerHeight - padding * 2,
width: previewWidth,
}}
onMouseEnter={() => {
// 鼠标进入预览弹窗,取消隐藏