feat: 更新批量编辑模态框，添加编辑模式切换功能，支持属性编辑和机器人绑定，优化相关逻辑和界面

src/components/modal/batch-edit-modal.vue

@@ -3,11 +3,18 @@
     v-model:open="modalVisible"
     title="批量编辑"
     width="500px"
-    :ok-button-props="{ disabled: !hasChanges }"
+    :ok-button-props="{ disabled: !hasChanges && editMode === 'property' }"
     @ok="handleConfirm"
     @cancel="handleCancel"
   >
     <div class="batch-edit-content">
+      <a-radio-group v-model:value="editMode" button-style="solid" style="margin-bottom: 16px">
+        <a-radio-button value="property">属性编辑</a-radio-button>
+        <a-radio-button value="binding">机器人绑定</a-radio-button>
+      </a-radio-group>
+
+      <!-- 属性编辑 -->
+      <div v-if="editMode === 'property'">
         <!-- 选中元素统计 -->
         <div class="selection-info">
           <a-alert
@@ -23,17 +30,8 @@
           <h4>点位编辑 ({{ pointItems.length }} 个)</h4>
           <a-form layout="vertical">
             <a-form-item label="点位类型">
-            <a-select
+              <a-select v-model:value="pointType" placeholder="选择点位类型" allow-clear @change="markChanged">
-              v-model:value="pointType"
+                <a-select-option v-for="[key, value] in MAP_POINT_TYPES" :key="value" :value="value">
-              placeholder="选择点位类型"
-              allow-clear
-              @change="markChanged"
-            >
-              <a-select-option
-                v-for="[key, value] in MAP_POINT_TYPES"
-                :key="value"
-                :value="value"
-              >
                   {{ key }}
                 </a-select-option>
               </a-select>
@@ -46,17 +44,8 @@
           <h4>路线编辑 ({{ lineItems.length }} 个)</h4>
           <a-form layout="vertical">
             <a-form-item label="通行类型">
-            <a-select
+              <a-select v-model:value="routePassType" placeholder="选择通行类型" allow-clear @change="markChanged">
-              v-model:value="routePassType"
+                <a-select-option v-for="[key, value] in MAP_ROUTE_PASS_TYPES" :key="value" :value="value">
-              placeholder="选择通行类型"
-              allow-clear
-              @change="markChanged"
-            >
-              <a-select-option
-                v-for="[key, value] in MAP_ROUTE_PASS_TYPES"
-                :key="value"
-                :value="value"
-              >
                   {{ key }}
                 </a-select-option>
               </a-select>
@@ -68,11 +57,7 @@
         <div v-if="hasChanges" class="preview-section">
           <h4>预览更改</h4>
           <div class="preview-list">
-          <div
+            <div v-for="item in selectedItems" :key="item.id" class="preview-item">
-            v-for="item in selectedItems"
-            :key="item.id"
-            class="preview-item"
-          >
               <span class="item-name">{{ getItemName(item) }}</span>
               <span class="item-type">{{ getItemType(item) }}</span>
               <div class="changes">
@@ -87,20 +72,41 @@
           </div>
         </div>
       </div>
+
+      <!-- 机器人绑定 -->
+      <div v-if="editMode === 'binding'">
+        <div class="selection-info">
+          <a-alert :message="`已选择 ${pointItems.length} 个点位`" type="info" show-icon />
+        </div>
+        <div v-if="chargingPoints.length > 0" class="edit-section">
+          <h4>充电点 ({{ chargingPoints.length }} 个)</h4>
+          <a-button type="primary" @click="handleBatchBind(chargingPoints)">批量绑定机器人</a-button>
+        </div>
+        <div v-if="parkingPoints.length > 0" class="edit-section">
+          <h4>停靠点 ({{ parkingPoints.length }} 个)</h4>
+          <a-button type="primary" @click="handleBatchBind(parkingPoints)">批量绑定机器人</a-button>
+        </div>
+        <div
+          v-if="chargingPoints.length === 0 && parkingPoints.length === 0 && pointItems.length > 0"
+          class="edit-section"
+        >
+          <h4>无符合条件的点位</h4>
+          <p>仅充电点和停靠点支持批量绑定机器人。</p>
+        </div>
+      </div>
+    </div>
   </a-modal>
+  <robot-bind-modal :token="editorToken" ref="robotBindModalRef" />
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, type InjectionKey, nextTick, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';
 
 import type { MapPen } from '../../apis/map';
-import { 
+import { MAP_POINT_TYPES, MAP_ROUTE_PASS_TYPES, MapPointType, MapRoutePassType } from '../../apis/map';
-  MAP_POINT_TYPES,
-  MAP_ROUTE_PASS_TYPES,
-  MapPointType, 
-  MapRoutePassType
-} from '../../apis/map';
 import type { EditorService } from '../../services/editor.service';
+import type { RobotBindModalRef } from './robot-bind-modal.vue';
+import RobotBindModal from './robot-bind-modal.vue';
 
 // 点位类型对应的尺寸和图像配置
 const getPointTypeConfig = (type: MapPointType, editor: EditorService) => {
@@ -133,17 +139,29 @@ const emit = defineEmits<Emits>();
 
 const modalVisible = computed({
   get: () => props.visible,
-  set: (value) => emit('update:visible', value)
+  set: (value) => emit('update:visible', value),
 });
 
 // 分离点位和路线
-const pointItems = computed(() => 
+const pointItems = computed(() => props.selectedItems.filter((item) => item.name === 'point'));
-  props.selectedItems.filter(item => item.name === 'point')
-);
 
-const lineItems = computed(() => 
+const lineItems = computed(() => props.selectedItems.filter((item) => item.name === 'line'));
-  props.selectedItems.filter(item => item.name === 'line')
+
-);
+// 编辑模式
+const editMode = ref<'property' | 'binding'>('property');
+
+// 机器人绑定相关
+const robotBindModalRef = ref<RobotBindModalRef>();
+const editorToken: InjectionKey<ShallowRef<EditorService>> = Symbol('editor');
+provide(editorToken, shallowRef(props.editor));
+
+const chargingPoints = computed(() => pointItems.value.filter((item) => item.point?.type === MapPointType.充电点));
+
+const parkingPoints = computed(() => pointItems.value.filter((item) => item.point?.type === MapPointType.停靠点));
+
+const handleBatchBind = (pens: MapPen[]) => {
+  robotBindModalRef.value?.open(pens);
+};
 
 // 编辑状态
 const pointType = ref<MapPointType>();
@@ -161,14 +179,18 @@ const resetForm = () => {
   pointType.value = undefined;
   routePassType.value = undefined;
   hasChanges.value = false;
+  editMode.value = 'property';
 };
 
 // 监听模态框显示状态
-watch(() => props.visible, (visible) => {
+watch(
+  () => props.visible,
+  (visible) => {
     if (visible) {
       resetForm();
     }
-});
+  },
+);
 
 // 选中元素描述
 const selectionDescription = computed(() => {
@@ -192,7 +214,7 @@ const getItemName = (item: MapPen) => {
 const getItemType = (item: MapPen) => {
   if (item.name === 'point') {
     const pointTypeName = Object.keys(MapPointType).find(
-      key => MapPointType[key as keyof typeof MapPointType] === item.point?.type
+      (key) => MapPointType[key as keyof typeof MapPointType] === item.point?.type,
     );
     return `点位-${pointTypeName || '未知'}`;
   } else if (item.name === 'line') {
@@ -209,10 +231,10 @@ const getPointChanges = (item: MapPen) => {
   if (currentType === pointType.value) return [];
 
   const currentTypeName = Object.keys(MapPointType).find(
-    key => MapPointType[key as keyof typeof MapPointType] === currentType
+    (key) => MapPointType[key as keyof typeof MapPointType] === currentType,
   );
   const newTypeName = Object.keys(MapPointType).find(
-    key => MapPointType[key as keyof typeof MapPointType] === pointType.value
+    (key) => MapPointType[key as keyof typeof MapPointType] === pointType.value,
   );
 
   return [`类型: ${currentTypeName || '未知'} → ${newTypeName}`];
@@ -226,10 +248,10 @@ const getRouteChanges = (item: MapPen) => {
 
   if (routePassType.value !== undefined && item.route?.pass !== routePassType.value) {
     const currentPassName = Object.keys(MapRoutePassType).find(
-      key => MapRoutePassType[key as keyof typeof MapRoutePassType] === item.route?.pass
+      (key) => MapRoutePassType[key as keyof typeof MapRoutePassType] === item.route?.pass,
     );
     const newPassName = Object.keys(MapRoutePassType).find(
-      key => MapRoutePassType[key as keyof typeof MapRoutePassType] === routePassType.value
+      (key) => MapRoutePassType[key as keyof typeof MapRoutePassType] === routePassType.value,
     );
     changes.push(`通行: ${currentPassName || '未知'} → ${newPassName}`);
   }
@@ -239,10 +261,14 @@ const getRouteChanges = (item: MapPen) => {
 
 // 确认更改
 const handleConfirm = () => {
+  if (editMode.value !== 'property') {
+    modalVisible.value = false;
+    return;
+  }
   const updates: Array<{ id: string; updates: Partial<MapPen> }> = [];
 
   // 处理点位更新
-  pointItems.value.forEach(item => {
+  pointItems.value.forEach((item) => {
     if (pointType.value) {
       const pointConfig = getPointTypeConfig(pointType.value, props.editor);
       const rect = props.editor.getPointRect(item);
@@ -253,32 +279,31 @@ const handleConfirm = () => {
           // 更新点位类型
           point: {
             ...item.point,
-            type: pointType.value
+            type: pointType.value,
           },
           // 更新点位尺寸和图像
           ...pointConfig,
           // 调整位置以保持中心点不变
           x: rect ? rect.x - pointConfig.width / 2 : item.x,
           y: rect ? rect.y - pointConfig.height / 2 : item.y,
-         
+        },
-        }
       });
     }
   });
 
   // 处理路线更新
-  lineItems.value.forEach(item => {
+  lineItems.value.forEach((item) => {
     if (item.route && routePassType.value !== undefined) {
       const routeUpdates: Partial<MapPen> = {
         route: {
           ...item.route,
-          pass: routePassType.value
+          pass: routePassType.value,
-        }
+        },
       };
 
       updates.push({
         id: item.id!,
-        updates: routeUpdates
+        updates: routeUpdates,
       });
     }
   });
@@ -304,7 +329,7 @@ const handleCancel = () => {
 };
 
 defineOptions({
-  name: 'BatchEditModal'
+  name: 'BatchEditModal',
 });
 </script>
 

src/components/modal/robot-bind-modal.vue

@@ -12,13 +12,23 @@ const editor = inject(props.token)!;
 
 export type RobotBindModalRef = Ref;
 type Ref = {
-  open: (pen: MapPen) => void;
+  open: (pen: MapPen | MapPen[]) => void;
 };
+const targetPens = ref<MapPen[]>([]);
 const open: Ref['open'] = (pen) => {
-  if (!pen?.id) return;
+  if (!pen) return;
+  const pens = Array.isArray(pen) ? pen : [pen];
+  if (pens.length === 0) return;
+
   keyword.value = '';
-  id.value = pen.id;
+  targetPens.value = pens;
-  selected.value = pen.point?.robots ?? [];
+
+  if (pens.length === 1) {
+    selected.value = pens[0].point?.robots ?? [];
+  } else {
+    selected.value = [];
+  }
+
   show.value = true;
 };
 defineExpose<Ref>({ open });
@@ -28,11 +38,15 @@ const keyword = ref<string>('');
 
 const robots = computed<RobotInfo[]>(() => editor.value.robots.filter(({ label }) => label.includes(keyword.value)));
 
-const id = ref<string>('');
 const selected = ref<string[]>([]);
 
 const submit = () => {
-  editor.value.updatePoint(id.value, { robots: toRaw(selected.value) });
+  const robotIds = toRaw(selected.value);
+  targetPens.value.forEach((pen) => {
+    if (pen.id) {
+      editor.value.updatePoint(pen.id, { robots: robotIds });
+    }
+  });
   show.value = false;
 };
 </script>