From 1be4280495c3925ec0e779fd17e2fb110bac8163 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Tue, 9 Sep 2025 11:16:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=BA=93=E4=BD=8D?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E9=80=BB=E8=BE=91=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BA=93=E4=BD=8D=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=82=B9=E4=BD=8D=E5=92=8C=E5=BA=93=E4=BD=8D?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pen-groups.vue              | 155 ++++++++++++++++-----
 src/pages/movement-supervision.vue         |  15 +-
 src/pages/scene-editor.vue                 |   4 +-
 src/services/context-menu/state-manager.ts |   2 +
 4 files changed, 132 insertions(+), 44 deletions(-)

diff --git a/src/components/pen-groups.vue b/src/components/pen-groups.vue
index 707b07e..f7ff20a 100644
--- a/src/components/pen-groups.vue
+++ b/src/components/pen-groups.vue
@@ -1,29 +1,26 @@
 <script setup lang="ts">
-import { MapAreaType, type MapPen, MapPointType, MapRoutePassType } from '@api/map';
-import type { EditorService } from '@core/editor.service';
 import { computed, inject, type InjectionKey, ref, type ShallowRef, watch } from 'vue';
 
+import { MapAreaType, type MapPen, MapPointType, MapRoutePassType } from '../apis/map';
+import type { EditorService } from '../services/editor.service';
+
 type Props = {
   token: InjectionKey<ShallowRef<EditorService>>;
   current?: string;
   onlyArea1?: boolean;
+  onlyStorage?: boolean;
 };
 const props = defineProps<Props>();
 const editor = inject(props.token)!;
 
 const keyword = ref<string>('');
-const activeKeys = ref<string[]>(['defaultActive']);
+const activeKeys = ref<string[]>(['库位']);
 
 //#region 点位列表
 const points = computed<MapPen[]>(() =>
-  editor.value.points.value.filter(({ label, point }) => {
+  editor.value.points.value.filter(({ label }) => {
     if (!keyword.value) return true;
-    const labelMatch = label?.includes(keyword.value);
-    // 库位搜索：检查动作点的associatedStorageLocations
-    const storageLocationMatch =
-      point?.type === MapPointType.动作点 &&
-      point.associatedStorageLocations?.some((location) => location.includes(keyword.value));
-    return labelMatch || storageLocationMatch;
+    return label?.includes(keyword.value);
   }),
 );
 //#endregion
@@ -38,12 +35,65 @@ const routes = computed<MapPen[]>(() =>
 const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label }) => label?.includes(keyword.value)));
 //#endregion
 
+//#region 库位列表
+interface StorageLocationItem {
+  id: string;
+  name: string;
+  pointId: string;
+  pointLabel: string;
+  isOccupied: boolean;
+  isLocked: boolean;
+  isDisabled: boolean;
+  isEmptyTray: boolean;
+  status: 'available' | 'occupied' | 'locked' | 'disabled' | 'unknown';
+}
+
+const storageLocations = computed<StorageLocationItem[]>(() => {
+  const allStorageLocations: StorageLocationItem[] = [];
+  
+  // 遍历所有动作点，收集库位信息
+  editor.value.points.value
+    .filter(({ point }) => point?.type === MapPointType.动作点 && point.associatedStorageLocations?.length)
+    .forEach(({ id, label, point }) => {
+      if (point?.associatedStorageLocations) {
+        point.associatedStorageLocations.forEach((locationName) => {
+          allStorageLocations.push({
+            id: `${id}-${locationName}`,
+            name: locationName,
+            pointId: id!,
+            pointLabel: label || id!,
+            isOccupied: false, // 默认状态，实际状态需要从服务获取
+            isLocked: false,
+            isDisabled: false,
+            isEmptyTray: false,
+            status: 'unknown'
+          });
+        });
+      }
+    });
+  
+  // 根据搜索关键字过滤（只搜索库位名称）
+  if (!keyword.value) return allStorageLocations;
+  
+  return allStorageLocations.filter(({ name }) => 
+    name.includes(keyword.value)
+  );
+});
+//#endregion
+
 //#region 动态计算需要展开的面板
 const updateActiveKeys = () => {
-  if (!keyword.value) return;
-
   const keys: string[] = [];
 
+  // 如果没有搜索关键字，在 only-storage 模式下显示库位面板
+  if (!keyword.value) {
+    if (props.onlyStorage) {
+      keys.push('库位');
+    }
+    activeKeys.value = keys;
+    return;
+  }
+
   // 检查点位类型面板
   const pointTypes = [
     { key: '普通点', type: MapPointType.普通点 },
@@ -79,6 +129,7 @@ const updateActiveKeys = () => {
 
   // 检查区域类型面板
   const areaTypes = [
+    { key: '库区', type: MapAreaType.库区 },
     { key: '互斥区', type: MapAreaType.互斥区 },
     { key: '非互斥区', type: MapAreaType.非互斥区 },
   ];
@@ -88,6 +139,15 @@ const updateActiveKeys = () => {
     if (hasMatch) keys.push(key);
   });
 
+  // 检查库位面板 - 在 only-storage 模式下始终显示，在普通模式下搜索时显示
+  if (props.onlyStorage) {
+    // only-storage 模式下始终显示库位面板
+    keys.push('库位');
+  } else if (keyword.value && storageLocations.value.length > 0) {
+    // 普通模式下，搜索到库位时显示
+    keys.push('库位');
+  }
+
   activeKeys.value = keys;
 };
 //#endregion
@@ -97,6 +157,13 @@ const select = (id: string) => {
   editor.value.gotoById(id);
 };
 
+// 库位点击定位到对应动作点
+const selectStorageLocation = (storageLocation: StorageLocationItem) => {
+  editor.value.active(storageLocation.pointId);
+  editor.value.gotoById(storageLocation.pointId);
+};
+
+
 watch(keyword, updateActiveKeys);
 </script>
 
@@ -113,16 +180,16 @@ watch(keyword, updateActiveKeys);
         <i class="icon dropdown" :class="{ active: v?.isActive }" />
       </template>
 
-      <a-collapse-panel v-if="onlyArea1" :header="$t('库区')" key="defaultActive">
-        <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.库区)">
+      <a-collapse-panel v-if="onlyStorage" :header="$t('库位')" key="库位">
+        <a-list rowKey="id" :data-source="storageLocations">
           <template #renderItem="{ item }">
             <a-list-item
               class="ph-16"
-              :class="{ selected: item.id === current }"
+              :class="{ selected: item.pointId === current }"
               style="height: 36px"
-              @click="select(item.id)"
+              @click="selectStorageLocation(item)"
             >
-              <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              <a-typography-text type="secondary">{{ item.name }}</a-typography-text>
             </a-list-item>
           </template>
         </a-list>
@@ -280,23 +347,27 @@ watch(keyword, updateActiveKeys);
                 style="height: 36px"
                 @click="select(item.id)"
               >
-                <a-typography-text type="secondary">
-                  {{ item.label }}
-                  <a-tag
-                    v-if="item.point?.associatedStorageLocations?.length"
-                    size="small"
-                    type="primary"
-                    style="font-size: 12px; margin-left: 8px; vertical-align: middle; height: 22px"
-                  >
-                    {{
-                      keyword
-                        ? item.point.associatedStorageLocations
-                            .filter((location: string) => location.includes(keyword))
-                            .join(', ')
-                        : item.point.associatedStorageLocations.join(', ')
-                    }}
-                  </a-tag>
-                </a-typography-text>
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+
+        <!-- 库位面板 - 在 only-storage 模式下始终显示，在普通模式下搜索时显示 -->
+        <a-collapse-panel 
+          v-if="(props.onlyStorage || (keyword && storageLocations.length > 0))" 
+          :header="$t('库位')" 
+          key="库位"
+        >
+          <a-list rowKey="id" :data-source="storageLocations">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.pointId === current }"
+                style="height: 36px"
+                @click="selectStorageLocation(item)"
+              >
+                <a-typography-text type="secondary">{{ item.name }}</a-typography-text>
               </a-list-item>
             </template>
           </a-list>
@@ -385,6 +456,21 @@ watch(keyword, updateActiveKeys);
         </a-collapse-panel>
 
         <!-- 区域类型面板 -->
+        <a-collapse-panel :header="$t('库区')" key="库区">
+          <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.库区)">
+            <template #renderItem="{ item }">
+              <a-list-item
+                class="ph-16"
+                :class="{ selected: item.id === current }"
+                style="height: 36px"
+                @click="select(item.id)"
+              >
+                <a-typography-text type="secondary">{{ item.label }}</a-typography-text>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-collapse-panel>
+
         <a-collapse-panel :header="$t('互斥区')" key="互斥区">
           <a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.互斥区)">
             <template #renderItem="{ item }">
@@ -414,6 +500,7 @@ watch(keyword, updateActiveKeys);
             </template>
           </a-list>
         </a-collapse-panel>
+
       </template>
     </a-collapse>
   </a-flex>
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index 305438f..871b3d5 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { RobotRealtimeInfo } from '@api/robot';
-import { getSceneByGroupId, getSceneById, monitorRealSceneById, monitorSceneById } from '@api/scene';
-import { EditorService } from '@core/editor.service';
-import { StorageLocationService } from '@core/storage-location.service';
-import { useViewState } from '@core/useViewState';
 import { message } from 'ant-design-vue';
 import { isNil } from 'lodash-es';
 import { computed, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
+import type { RobotRealtimeInfo } from '../apis/robot';
+import { getSceneByGroupId, getSceneById, monitorRealSceneById, monitorSceneById } from '../apis/scene';
 import { autoDoorSimulationService, type AutoDoorWebSocketData } from '../services/auto-door-simulation.service';
-import colorConfig from '../services/color/color-config.service';
 import { 
   type ContextMenuState, 
   createContextMenuManager, 
   handleContextMenuFromPenData,
   isClickInsideMenu} from '../services/context-menu.service';
+import { EditorService } from '../services/editor.service';
+import { StorageLocationService } from '../services/storage-location.service';
+import { useViewState } from '../services/useViewState';
 
 const EDITOR_KEY = Symbol('editor-key');
 
@@ -442,8 +441,8 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
           <a-tab-pane key="1" :tab="$t('机器人')">
             <RobotGroups v-if="editor" :token="EDITOR_KEY" :sid="sid" :current="current?.id" @change="selectRobot" />
           </a-tab-pane>
-          <a-tab-pane key="2" :tab="$t('库区')">
-            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-area1 />
+          <a-tab-pane key="2" :tab="$t('库位')">
+            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-storage />
           </a-tab-pane>
           <a-tab-pane key="3" :tab="$t('高级组')">
             <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" />
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index bff54b6..418f841 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -234,8 +234,8 @@ const handleAutoCreateStorageCancel = () => {
               show-group-edit
             />
           </a-tab-pane>
-          <a-tab-pane key="2" :tab="$t('库区')">
-            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-area1 />
+          <a-tab-pane key="2" :tab="$t('库位')">
+            <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" only-storage />
           </a-tab-pane>
           <a-tab-pane key="3" :tab="$t('高级组')">
             <PenGroups v-if="editor" :token="EDITOR_KEY" :current="current?.id" />
diff --git a/src/services/context-menu/state-manager.ts b/src/services/context-menu/state-manager.ts
index 44059ec..5513f90 100644
--- a/src/services/context-menu/state-manager.ts
+++ b/src/services/context-menu/state-manager.ts
@@ -9,6 +9,8 @@ export interface ContextMenuState {
   y: number;
   menuType: 'default' | 'storage' | 'storage-background' | 'robot' | 'point' | 'area';
   eventData?: any;
+  storageLocations?: any[];
+  robotInfo?: any;
 }
 
 /**