feat: 优化库位状态显示，统一处理库位相关类型，更新状态文本和样式

src/components/context-menu.vue

@@ -17,8 +17,14 @@
         <div class="storage-info">
           <div class="storage-name">{{ location.name }}</div>
           <div class="storage-status">
-            <span class="status-indicator" :class="location.status"></span>
+            <div class="status-row">
-            <span class="status-text">{{ getStatusText(location) }}</span>
+              <span class="status-indicator occupied" :class="{ active: location.isOccupied }"></span>
+              <span class="status-text">{{ location.isOccupied ? '已占用' : '未占用' }}</span>
+            </div>
+            <div class="status-row">
+              <span class="status-indicator locked" :class="{ active: location.isLocked }"></span>
+              <span class="status-text">{{ location.isLocked ? '已锁定' : '未锁定' }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -108,23 +114,11 @@ const getStorageItemClass = (location: StorageLocationInfo) => {
 
 // 获取库位提示信息
 const getStorageTooltip = (location: StorageLocationInfo) => {
-  const status = getStatusText(location);
+  const occupiedText = location.isOccupied ? '已占用' : '未占用';
-  return `${location.name} - ${status}`;
+  const lockedText = location.isLocked ? '已锁定' : '未锁定';
+  return `${location.name} - 占用: ${occupiedText}, 锁定: ${lockedText}`;
 };
 
-// 获取状态文本
-const getStatusText = (location: StorageLocationInfo) => {
-  switch (location.status) {
-    case 'occupied':
-      return '已占用';
-    case 'locked':
-      return '已锁定';
-    case 'available':
-      return '可用';
-    default:
-      return '未知';
-  }
-};
 </script>
 
 <style scoped>
@@ -212,10 +206,16 @@ const getStatusText = (location: StorageLocationInfo) => {
 }
 
 .storage-status {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+}
+
+.status-row {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
 }
 
 .status-indicator {
@@ -223,26 +223,29 @@ const getStatusText = (location: StorageLocationInfo) => {
   height: 8px;
   border-radius: 50%;
   display: inline-block;
-}
+  background-color: #d9d9d9; /* 默认灰色 */
-
+  transition: background-color 0.2s;
-.status-indicator.available {
-  background-color: #52c41a;
 }
 
 .status-indicator.occupied {
-  background-color: #ff4d4f;
+  background-color: #d9d9d9; /* 默认灰色 */
+}
+
+.status-indicator.occupied.active {
+  background-color: #ff4d4f; /* 占用时红色 */
 }
 
 .status-indicator.locked {
-  background-color: #faad14;
+  background-color: #d9d9d9; /* 默认灰色 */
 }
 
-.status-indicator.unknown {
+.status-indicator.locked.active {
-  background-color: #d9d9d9;
+  background-color: #faad14; /* 锁定时橙色 */
 }
 
 .status-text {
   color: #666;
+  font-size: 11px;
 }
 
 /* 库位状态样式 */

src/services/context-menu.service.ts

@@ -130,13 +130,16 @@ export function parsePenData(penData: Record<string, unknown>): ParsedEventData
     
     console.log('解析后的数据:', { id, name, tags, storageLocation });
     
-    // 根据tags判断类型
+    // 根据tags判断类型 - 统一处理库位相关区域
-    if (tags.includes('storage-background')) {
+    if (tags.includes('storage-background') || tags.includes('storage-location')) {
-      console.log('识别为storage-background类型');
+      const isBackground = tags.includes('storage-background');
-      // 库位背景区域 - 需要查找该点关联的所有库位
+      
+      console.log(`识别为库位相关类型: ${isBackground ? 'storage-background' : 'storage-location'}`);
+      
+      // 库位背景区域或单个库位区域 - 都查找该点关联的所有库位
       const pointId = tags.find((tag: string) => tag.startsWith('point-'))?.replace('point-', '');
       return {
-        type: 'storage-background',
+        type: 'storage-background', // 统一使用storage-background类型
         id,
         name,
         pointId,
@@ -148,23 +151,6 @@ export function parsePenData(penData: Record<string, unknown>): ParsedEventData
       };
     }
     
-    if (tags.includes('storage-location')) {
-      console.log('识别为storage-location类型');
-      // 库位区域 - 使用storageLocation中的详细信息
-      const pointId = tags.find((tag: string) => tag.startsWith('point-'))?.replace('point-', '');
-      return {
-        type: 'storage',
-        id,
-        name: storageLocation?.locationName || name,
-        pointId,
-        storageId: id,
-        tags,
-        target: document.elementFromPoint(position.x, position.y) as HTMLElement,
-        position,
-        pen,
-      };
-    }
-    
     if (tags.includes('point')) {
       // 点区域
       return {
@@ -402,8 +388,8 @@ export function isClickInsideMenu(event: MouseEvent, isMenuVisible: boolean): bo
 export function getMenuConfig(type: string, data: ParsedEventData, storageLocationService?: any) {
   switch (type) {
     case 'storage-background': {
-      // 库位背景区域：显示该点关联的所有库位信息
+      // 库位背景区域或单个库位区域：显示该点关联的所有库位信息
-      console.log(`处理storage-background类型，点ID: ${data.pointId}`);
+      console.log(`处理库位相关类型，点ID: ${data.pointId}`);
       const allStorageLocations = getStorageLocationsForPoint(data, storageLocationService);
       console.log(`找到 ${allStorageLocations.length} 个库位:`, allStorageLocations);
       return {
@@ -411,18 +397,26 @@ export function getMenuConfig(type: string, data: ParsedEventData, storageLocati
         storageLocations: allStorageLocations,
       };
     }
-    case 'storage':
+    case 'storage': {
-      // 单个库位区域
+      // 单个库位区域 - 也使用storage-background类型统一处理
+      console.log(`处理单个库位类型，点ID: ${data.pointId}`);
+      const singleStorageLocations = getStorageLocationsForPoint(data, storageLocationService);
+      console.log(`找到 ${singleStorageLocations.length} 个库位:`, singleStorageLocations);
       return {
-        menuType: 'storage' as const,
+        menuType: 'storage-background' as const,
-        storageLocations: [getStorageLocationInfo(data)],
+        storageLocations: singleStorageLocations,
       };
-    case 'point':
+    }
+    case 'point': {
       // 点区域：显示该点关联的库位信息
+      console.log(`处理点区域类型，点ID: ${data.pointId}`);
+      const pointStorageLocations = getStorageLocationsForPoint(data, storageLocationService);
+      console.log(`找到 ${pointStorageLocations.length} 个库位:`, pointStorageLocations);
       return {
-        menuType: 'storage' as const,
+        menuType: 'storage-background' as const,
-        storageLocations: getStorageLocationsForPoint(data, storageLocationService),
+        storageLocations: pointStorageLocations,
       };
+    }
     default:
       return {
         menuType: 'default' as const,
@@ -431,62 +425,6 @@ export function getMenuConfig(type: string, data: ParsedEventData, storageLocati
   }
 }
 
-/**
- * 获取单个库位信息
- * @param data 事件数据
- * @returns 库位信息
- */
-function getStorageLocationInfo(data: ParsedEventData): StorageLocationInfo {
-  const pen = data.pen as Record<string, unknown>;
-  
-  // 优先使用storageLocation中的数据
-  if (pen?.storageLocation) {
-    const storageLocation = pen.storageLocation as {
-      locationName: string;
-      occupied: boolean;
-      locked: boolean;
-    };
-    const { locationName, occupied, locked } = storageLocation;
-    
-    let status: StorageLocationInfo['status'] = 'unknown';
-    if (locked) {
-      status = 'locked';
-    } else if (occupied) {
-      status = 'occupied';
-    } else {
-      status = 'available';
-    }
-
-    return {
-      id: data.id || data.storageId || 'unknown',
-      name: locationName || data.name || '未知库位',
-      isOccupied: occupied,
-      isLocked: locked,
-      status,
-    };
-  }
-  
-  // 回退到pen的其他属性
-  const isLocked = pen?.locked === 1;
-  const isOccupied = pen?.occupied === 1 || pen?.status === 'occupied';
-  
-  let status: StorageLocationInfo['status'] = 'unknown';
-  if (isLocked) {
-    status = 'locked';
-  } else if (isOccupied) {
-    status = 'occupied';
-  } else {
-    status = 'available';
-  }
-
-  return {
-    id: data.id || data.storageId || 'unknown',
-    name: data.name || '未知库位',
-    isOccupied,
-    isLocked,
-    status,
-  };
-}
 
 /**
  * 查找指定点ID的所有库位信息