diff --git a/src/components/context-menu/context-menu.vue b/src/components/context-menu/context-menu.vue index 897838e..b20be4d 100644 --- a/src/components/context-menu/context-menu.vue +++ b/src/components/context-menu/context-menu.vue @@ -1,42 +1,59 @@ diff --git a/src/components/context-menu/storage-menu.vue b/src/components/context-menu/storage-menu.vue index c63ad2b..0308545 100644 --- a/src/components/context-menu/storage-menu.vue +++ b/src/components/context-menu/storage-menu.vue @@ -35,55 +35,66 @@
▶
- -
+ - -
-
-
-
{{ selectedLocation.name }} - 操作
+
+ +
@@ -115,6 +126,7 @@ defineOptions({ const showSubMenu = ref(null); const selectedLocation = ref(null); const hideTimer = ref(null); +const subMenuTriggerRef = ref(null); // 监听子菜单显示状态 watch(showSubMenu, (newValue) => { @@ -130,55 +142,67 @@ watch(showSubMenu, (newValue) => { } }); -// 子菜单样式计算 -const subMenuStyle = computed(() => { +// 添加鼠标离开处理，但使用延迟来避免闪烁 +const handleStorageMouseLeave = () => { + // 使用较长的延迟，让用户有时间移动到子菜单 + if (hideTimer.value) { + clearTimeout(hideTimer.value); + } + hideTimer.value = window.setTimeout(() => { + showSubMenu.value = null; + hideTimer.value = null; + }, 500); // 增加到500ms延迟，给用户更多时间 +}; + +// 处理鼠标进入子菜单区域 +const handleSubMenuMouseEnter = () => { + // 清除隐藏定时器，防止子菜单消失 + if (hideTimer.value) { + clearTimeout(hideTimer.value); + hideTimer.value = null; + } +}; + +// 处理鼠标离开子菜单区域 +const handleSubMenuMouseLeave = () => { + // 当鼠标离开子菜单时，立即隐藏 + showSubMenu.value = null; + if (hideTimer.value) { + clearTimeout(hideTimer.value); + hideTimer.value = null; + } +}; + +// 子菜单触发器样式 - 创建不可见的定位点 +const subMenuTriggerStyle = computed(() => { if (!showSubMenu.value) return {}; - // 计算子菜单位置，让它与对应的库位项对齐 + // 计算子菜单触发器的位置，让子菜单的左上角与父菜单的右上角平齐 const menuItemHeight = 60; // 库位项的高度 const headerHeight = 40; // 菜单头部高度 const itemIndex = props.storageLocations.findIndex(loc => loc.id === showSubMenu.value); - const offsetY = headerHeight + (itemIndex * menuItemHeight) - 10; // 往上调整10px - - // 子菜单尺寸（估算） - const subMenuWidth = 180; // 子菜单宽度 - const subMenuHeight = 300; // 子菜单高度（估算） - - // 计算初始位置 - let left = props.menuX + props.mainMenuWidth; - let top = props.menuY + offsetY; - - // 视口边界检测和调整 - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - // 右边界检测：如果子菜单会超出右边界，则向左显示 - if (left + subMenuWidth > viewportWidth) { - left = props.menuX - subMenuWidth; // 显示在主菜单左侧 - } - - // 下边界检测：如果子菜单会超出下边界，则向上调整 - if (top + subMenuHeight > viewportHeight) { - top = viewportHeight - subMenuHeight - 50; // 留10px边距 - } - - // 上边界检测：确保不会超出上边界 - if (top < 0) { - top = 10; // 留10px边距 - } - - // 左边界检测：确保不会超出左边界 - if (left < 0) { - left = 10; // 留10px边距 - } + const offsetY = headerHeight + (itemIndex * menuItemHeight); const style = { - left: `${left}px`, - top: `${top}px`, + position: 'absolute' as const, + left: '100%', // 紧贴主菜单右侧 + top: `${offsetY}px`, // 与对应的库位项对齐 + width: '1px', + height: '1px', + pointerEvents: 'none' as const, + zIndex: 10, + // 调整位置，使子菜单左上角与父菜单右上角平齐 + transform: 'translateY(-1px)', }; return style; }); +// 子菜单位置 - 使用 rightTop 确保左上角与父菜单右上角平齐 +const subMenuPlacement = 'rightTop' as const; + +// 获取子菜单弹出层容器 +const getSubMenuContainer = () => document.body; + // 选择库位 const handleSelectStorage = (location: StorageLocationInfo) => { console.log('选择库位:', location); @@ -194,34 +218,52 @@ const hideSubMenu = () => { } }; -// 延迟隐藏子菜单 -const hideSubMenuDelayed = () => { - if (hideTimer.value) { - clearTimeout(hideTimer.value); +// 延迟隐藏子菜单（已移除，由 Ant Design 处理） +// const hideSubMenuDelayed = () => { +// if (hideTimer.value) { +// clearTimeout(hideTimer.value); +// } +// hideTimer.value = window.setTimeout(() => { +// showSubMenu.value = null; +// hideTimer.value = null; +// }, 150); // 150ms延迟，给用户足够时间移动到子菜单 +// }; + +// 处理库位项鼠标离开（已移除，由 Ant Design 处理） +// const handleStorageMouseLeave = () => { +// hideSubMenuDelayed(); +// }; + +// 处理子菜单鼠标进入（已移除，由 Ant Design 处理） +// const handleSubMenuMouseEnter = () => { +// // 清除隐藏定时器 +// if (hideTimer.value) { +// clearTimeout(hideTimer.value); +// hideTimer.value = null; +// } +// }; + +// 处理子菜单鼠标离开（已移除，由 Ant Design 处理） +// const handleSubMenuMouseLeave = () => { +// hideSubMenu(); +// }; + +// 处理子菜单开关变化 +const handleSubMenuOpenChange = (open: boolean) => { + if (!open) { + // 清除隐藏定时器 + if (hideTimer.value) { + clearTimeout(hideTimer.value); + hideTimer.value = null; + } + hideSubMenu(); + } else { + // 当子菜单打开时，清除任何待隐藏的定时器 + if (hideTimer.value) { + clearTimeout(hideTimer.value); + hideTimer.value = null; + } } - hideTimer.value = window.setTimeout(() => { - showSubMenu.value = null; - hideTimer.value = null; - }, 150); // 150ms延迟，给用户足够时间移动到子菜单 -}; - -// 处理库位项鼠标离开 -const handleStorageMouseLeave = () => { - hideSubMenuDelayed(); -}; - -// 处理子菜单鼠标进入 -const handleSubMenuMouseEnter = () => { - // 清除隐藏定时器 - if (hideTimer.value) { - clearTimeout(hideTimer.value); - hideTimer.value = null; - } -}; - -// 处理子菜单鼠标离开 -const handleSubMenuMouseLeave = () => { - hideSubMenu(); }; // 库位操作处理 @@ -287,10 +329,9 @@ const getStorageTooltip = (location: StorageLocationInfo) => {