From 6599216e3861405475fc4ad26e4ff926c531bb9a Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Mon, 8 Sep 2025 14:31:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=96=87=E8=8F=9C=E5=8D=95=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=A7=86=E5=8F=A3?=
 =?UTF-8?q?=E8=BE=B9=E7=95=8C=E6=A3=80=E6=B5=8B=EF=BC=8C=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=92=8C=E5=AD=90=E8=8F=9C=E5=8D=95=E4=B8=8D?=
 =?UTF-8?q?=E8=B6=85=E5=87=BA=E5=8F=AF=E8=A7=86=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/context-menu/context-menu.vue | 44 +++++++++++++++++---
 src/components/context-menu/storage-menu.vue | 38 +++++++++++++++--
 2 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/src/components/context-menu/context-menu.vue b/src/components/context-menu/context-menu.vue
index f08fae0..897838e 100644
--- a/src/components/context-menu/context-menu.vue
+++ b/src/components/context-menu/context-menu.vue
@@ -30,12 +30,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from 'vue';
-import StorageMenu from './storage-menu.vue';
-import RobotMenu from './robot-menu.vue';
-import DefaultMenu from './default-menu.vue';
+import { computed, nextTick,ref, watch } from 'vue';
+
 import type { StorageLocationInfo } from '../../services/context-menu';
 import type { RobotInfo } from '../../services/context-menu';
+import DefaultMenu from './default-menu.vue';
+import RobotMenu from './robot-menu.vue';
+import StorageMenu from './storage-menu.vue';
 
 interface Props {
   visible: boolean;
@@ -80,9 +81,40 @@ watch(mainMenuRef, async (newRef) => {
 
 // 菜单样式计算
 const menuStyle = computed(() => {
+  // 菜单尺寸估算
+  const menuWidth = mainMenuWidth.value || 200;
+  const menuHeight = 300; // 估算高度
+  
+  // 视口边界检测和调整
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  let left = props.x;
+  let top = props.y;
+  
+  // 右边界检测：如果菜单会超出右边界，则向左调整
+  if (left + menuWidth > viewportWidth) {
+    left = viewportWidth - menuWidth - 10; // 留10px边距
+  }
+  
+  // 下边界检测：如果菜单会超出下边界，则向上调整
+  if (top + menuHeight > viewportHeight) {
+    top = viewportHeight - menuHeight - 10; // 留10px边距
+  }
+  
+  // 上边界检测：确保不会超出上边界
+  if (top < 0) {
+    top = 10; // 留10px边距
+  }
+  
+  // 左边界检测：确保不会超出左边界
+  if (left < 0) {
+    left = 10; // 留10px边距
+  }
+  
   const style = {
-    left: `${props.x}px`,
-    top: `${props.y}px`,
+    left: `${left}px`,
+    top: `${top}px`,
   };
   return style;
 });
diff --git a/src/components/context-menu/storage-menu.vue b/src/components/context-menu/storage-menu.vue
index 8b162c9..c63ad2b 100644
--- a/src/components/context-menu/storage-menu.vue
+++ b/src/components/context-menu/storage-menu.vue
@@ -138,11 +138,43 @@ const subMenuStyle = computed(() => {
   const menuItemHeight = 60; // 库位项的高度
   const headerHeight = 40; // 菜单头部高度
   const itemIndex = props.storageLocations.findIndex(loc => loc.id === showSubMenu.value);
-  const offsetY = headerHeight + (itemIndex * menuItemHeight);
+  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 style = {
-    left: `${props.menuX + props.mainMenuWidth}px`, // 紧贴主菜单右边缘
-    top: `${props.menuY + offsetY}px`, // 与对应库位项对齐
+    left: `${left}px`,
+    top: `${top}px`,
   };
   return style;
 });