From 7e5c41bbac62dfef180d59517eb171aaea01b3f3 Mon Sep 17 00:00:00 2001
From: Zzm0809 <934230207@qq.com>
Date: Sun, 7 Apr 2024 15:00:50 +0800
Subject: [PATCH] optimization right-click menu overflow unable to display

Signed-off-by: Zzm0809 <934230207@qq.com>
---
 .../AuthCenter/Menu/components/MenuList/index.tsx   | 10 ++++++++--
 .../DataStudio/LeftContainer/Project/index.tsx      |  9 ++++++++-
 .../Resource/components/ResourceOverView/index.tsx  | 13 +++++++++++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx b/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx
index 03e0b0f4fc..2f24ed1b72 100644
--- a/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx
+++ b/dinky-web/src/pages/AuthCenter/Menu/components/MenuList/index.tsx
@@ -144,6 +144,10 @@ const MenuList: React.FC = () => {
   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..68915f1314 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..5071ff9c79 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,13 @@ const ResourceOverView: React.FC = () => {
   const handleRightClick = (info: any) => {
     // 获取右键点击的节点信息
     const { node, event } = info;
+
+
+    // 判断右键的位置是否超出屏幕 , 如果超出屏幕则设置为屏幕的最大值 往上偏移 150
+    if (event.clientY + 150 > window.innerHeight) {
+      event.clientY = window.innerHeight - 75;
+    }
+
     setResourceState((prevState) => ({
       ...prevState,
       selectedKeys: [node.key],
@@ -179,8 +186,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
       }
     }));
   };