feat: 增强上下文菜单位置计算逻辑，添加视口边界检测，确保菜单和子菜单不超出可视区域

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;
 });

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;
 });