fix: 简化标签预览弹窗位置计算,确保在视口内显示
This commit is contained in:
parent
a5319b5346
commit
d14f7f263e
@ -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={() => {
|
||||
// 鼠标进入预览弹窗,取消隐藏
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user