From 6de409bc69bcccb19bec3c3f8492c8de8608546e Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Mon, 15 Sep 2025 10:51:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=AD=98?=
 =?UTF-8?q?=E5=82=A8=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6=E7=9A=84=E5=AD=90?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BD=8D=E7=BD=AE=E4=B8=BA=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=EF=BC=8C=E7=AE=80=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/context-menu/storage-menu.vue | 83 +++++++++++---------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/components/context-menu/storage-menu.vue b/src/components/context-menu/storage-menu.vue
index 397355e..8f74c98 100644
--- a/src/components/context-menu/storage-menu.vue
+++ b/src/components/context-menu/storage-menu.vue
@@ -40,21 +40,13 @@
       v-if="showSubMenu && selectedLocation"
       :open="!!showSubMenu"
       :trigger="[]"
-      placement="topRight"
+      placement="rightTop"
       :get-popup-container="getSubMenuContainer"
       @open-change="handleSubMenuOpenChange"
     >
-      <div
-        ref="subMenuTriggerRef"
-        class="sub-menu-trigger"
-        :style="subMenuTriggerStyle"
-      />
+      <div ref="subMenuTriggerRef" class="sub-menu-trigger" :style="subMenuTriggerStyle" />
       <template #overlay>
-        <div 
-          class="sub-menu-overlay"
-          @mouseenter="handleSubMenuMouseEnter"
-          @mouseleave="handleSubMenuMouseLeave"
-        >
+        <div class="sub-menu-overlay" @mouseenter="handleSubMenuMouseEnter" @mouseleave="handleSubMenuMouseLeave">
           <div class="sub-menu-header">
             <div class="sub-menu-title">{{ selectedLocation.name }} - 操作</div>
           </div>
@@ -131,7 +123,7 @@ const subMenuTriggerRef = ref<HTMLElement | null>(null);
 // 监听子菜单显示状态
 watch(showSubMenu, (newValue) => {
   if (newValue) {
-    selectedLocation.value = props.storageLocations.find(loc => loc.id === newValue) || null;
+    selectedLocation.value = props.storageLocations.find((loc) => loc.id === newValue) || null;
     // 清除之前的隐藏定时器
     if (hideTimer.value) {
       clearTimeout(hideTimer.value);
@@ -176,13 +168,13 @@ const handleSubMenuMouseLeave = () => {
 // 子菜单触发器样式 - 创建不可见的定位点
 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);
-  
+  const itemIndex = props.storageLocations.findIndex((loc) => loc.id === showSubMenu.value);
+  const offsetY = headerHeight + itemIndex * menuItemHeight;
+
   const style = {
     position: 'absolute' as const,
     left: '100%', // 紧贴主菜单右侧
@@ -197,7 +189,6 @@ const subMenuTriggerStyle = computed(() => {
   return style;
 });
 
-
 // 获取子菜单弹出层容器
 const getSubMenuContainer = () => document.body;
 
@@ -216,7 +207,6 @@ const hideSubMenu = () => {
   }
 };
 
-
 // 处理子菜单开关变化
 const handleSubMenuOpenChange = (open: boolean) => {
   if (!open) {
@@ -238,11 +228,11 @@ const handleSubMenuOpenChange = (open: boolean) => {
 // 库位操作处理
 const handleStorageAction = async (action: string, actionName: string) => {
   if (!selectedLocation.value) return;
-  
+
   try {
     // 直接调用API，不需要勾选
     const { StorageActionService } = await import('../../services/storageActionService');
-    
+
     // 转换类型以匹配API期望的格式
     const apiLocation = {
       id: selectedLocation.value.id,
@@ -252,25 +242,25 @@ const handleStorageAction = async (action: string, actionName: string) => {
       isDisabled: selectedLocation.value.isDisabled,
       isEmptyTray: selectedLocation.value.isEmptyTray,
       status: selectedLocation.value.status,
-      layer_name: selectedLocation.value.name
+      layer_name: selectedLocation.value.name,
     };
-    
+
     await StorageActionService.handleStorageAction(action, apiLocation, actionName);
-    
+
     // 发送操作完成事件
     emit('actionComplete', {
       action,
       location: selectedLocation.value,
-      success: true
+      success: true,
     });
   } catch (error) {
     console.error(`库位${actionName}操作失败:`, error);
-    
+
     // 发送操作失败事件
     emit('actionComplete', {
       action,
       location: selectedLocation.value,
-      success: false
+      success: false,
     });
   }
 };
@@ -350,21 +340,44 @@ const getStorageTooltip = (location: StorageLocationInfo) => {
   background-color: #d9d9d9;
 }
 
-.status-indicator.occupied.active { background-color: #ff4d4f; }
-.status-indicator.locked.active { background-color: #faad14; }
-.status-indicator.disabled.active { background-color: #8c8c8c; }
-.status-indicator.empty-tray.active { background-color: #13c2c2; }
+.status-indicator.occupied.active {
+  background-color: #ff4d4f;
+}
+.status-indicator.locked.active {
+  background-color: #faad14;
+}
+.status-indicator.disabled.active {
+  background-color: #8c8c8c;
+}
+.status-indicator.empty-tray.active {
+  background-color: #13c2c2;
+}
 
 .status-text {
   color: #666;
   font-size: 11px;
 }
 
-.storage-occupied { background-color: #fff2f0; border-left-color: #ff4d4f; }
-.storage-locked { background-color: #fffbe6; border-left-color: #faad14; }
-.storage-disabled { background-color: #f5f5f5; border-left-color: #8c8c8c; }
-.storage-empty-tray { background-color: #e6fffb; border-left-color: #13c2c2; }
-.storage-available { background-color: #f6ffed; border-left-color: #52c41a; }
+.storage-occupied {
+  background-color: #fff2f0;
+  border-left-color: #ff4d4f;
+}
+.storage-locked {
+  background-color: #fffbe6;
+  border-left-color: #faad14;
+}
+.storage-disabled {
+  background-color: #f5f5f5;
+  border-left-color: #8c8c8c;
+}
+.storage-empty-tray {
+  background-color: #e6fffb;
+  border-left-color: #13c2c2;
+}
+.storage-available {
+  background-color: #f6ffed;
+  border-left-color: #52c41a;
+}
 
 .arrow-icon {
   color: #999;