diff --git a/dinky-web/src/components/RightContextMenu/index.tsx b/dinky-web/src/components/RightContextMenu/index.tsx index fd792f9dda..9074a72504 100644 --- a/dinky-web/src/components/RightContextMenu/index.tsx +++ b/dinky-web/src/components/RightContextMenu/index.tsx @@ -36,6 +36,8 @@ const RightContextMenu: React.FC = (props) => { return ( { const handleRightClick = (info: any) => { // 获取右键点击的节点信息 const { node, event } = info; + // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 125 (需要根据具体的右键菜单数量合理设置) + if (event.clientY + 150 > window.innerHeight) { + event.clientY = window.innerHeight - 125; + } setMenuState((prevState) => ({ ...prevState, contextMenuOpen: true, @@ -151,8 +155,10 @@ const MenuList: React.FC = () => { clickNode: { ...prevState.clickNode, rightClickedNode: node }, contextMenuPosition: { ...prevState.contextMenuPosition, - top: event.clientY + 20, - left: event.clientX + 20 + top: event.clientY + 5, + left: event.clientX + 10, + screenX: event.screenX, + screenY: event.screenY } })); }; diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx index ffe0533413..81465de764 100644 --- a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx +++ b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx @@ -90,6 +90,11 @@ const Project: React.FC = (props: connect) => { event } = info; + // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 200px (需要根据具体的右键菜单数量合理设置) + if (event.clientY + 150 > window.innerHeight) { + event.clientY = window.innerHeight - 200; + } + // 设置右键菜单 setProjectState((prevState) => ({ ...prevState, @@ -101,7 +106,9 @@ const Project: React.FC = (props: connect) => { contextMenuPosition: { ...prevState.contextMenuPosition, top: event.clientY + 5, - left: event.clientX + 10 + left: event.clientX + 10, + screenX: event.screenX, + screenY: event.screenY }, selectedKeys: [key], rightClickedNode: { ...node, ...fullInfo }, diff --git a/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx b/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx index e2e82b75ee..2a2c2a7e0d 100644 --- a/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx +++ b/dinky-web/src/pages/RegCenter/Resource/components/ResourceOverView/index.tsx @@ -172,6 +172,12 @@ const ResourceOverView: React.FC = () => { const handleRightClick = (info: any) => { // 获取右键点击的节点信息 const { node, event } = info; + + // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 75 (需要根据具体的右键菜单数量合理设置) + if (event.clientY + 150 > window.innerHeight) { + event.clientY = window.innerHeight - 75; + } + setResourceState((prevState) => ({ ...prevState, selectedKeys: [node.key], @@ -179,8 +185,10 @@ const ResourceOverView: React.FC = () => { contextMenuOpen: true, contextMenuPosition: { ...prevState.contextMenuPosition, - left: event.clientX + 20, - top: event.clientY + 20 + top: event.clientY + 5, + left: event.clientX + 10, + screenX: event.screenX, + screenY: event.screenY } })); };