From 1f87271ebcba938b53788b124f92f8f7035a7cec Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Sun, 28 Sep 2025 16:25:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=A8=A1=E6=80=81=E6=A1=86=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=BC=96=E8=BE=91=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=92=8C=E6=9C=BA=E5=99=A8=E4=BA=BA=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=EF=BC=8C=E4=BC=98=E5=8C=96=E7=9B=B8=E5=85=B3=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=92=8C=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/batch-edit-modal.vue | 299 ++++++++++++----------
 src/components/modal/robot-bind-modal.vue |  26 +-
 2 files changed, 182 insertions(+), 143 deletions(-)

diff --git a/src/components/modal/batch-edit-modal.vue b/src/components/modal/batch-edit-modal.vue
index 8fb8f83..a49b3a1 100644
--- a/src/components/modal/batch-edit-modal.vue
+++ b/src/components/modal/batch-edit-modal.vue
@@ -3,104 +3,110 @@
     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">
-      <!-- 选中元素统计 -->
-      <div class="selection-info">
-        <a-alert
-          :message="`已选择 ${selectedItems.length} 个元素`"
-          :description="selectionDescription"
-          type="info"
-          show-icon
-        />
-      </div>
+      <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="pointItems.length > 0" class="edit-section">
-        <h4>点位编辑 ({{ pointItems.length }} 个)</h4>
-        <a-form layout="vertical">
-          <a-form-item label="点位类型">
-            <a-select
-              v-model:value="pointType"
-              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>
-          </a-form-item>
-        </a-form>
-      </div>
+      <!-- 属性编辑 -->
+      <div v-if="editMode === 'property'">
+        <!-- 选中元素统计 -->
+        <div class="selection-info">
+          <a-alert
+            :message="`已选择 ${selectedItems.length} 个元素`"
+            :description="selectionDescription"
+            type="info"
+            show-icon
+          />
+        </div>
 
-      <!-- 路线批量编辑 -->
-      <div v-if="lineItems.length > 0" class="edit-section">
-        <h4>路线编辑 ({{ lineItems.length }} 个)</h4>
-        <a-form layout="vertical">
-          <a-form-item label="通行类型">
-            <a-select
-              v-model:value="routePassType"
-              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>
-          </a-form-item>
-        </a-form>
-      </div>
+        <!-- 点位批量编辑 -->
+        <div v-if="pointItems.length > 0" class="edit-section">
+          <h4>点位编辑 ({{ pointItems.length }} 个)</h4>
+          <a-form layout="vertical">
+            <a-form-item label="点位类型">
+              <a-select v-model:value="pointType" 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>
+            </a-form-item>
+          </a-form>
+        </div>
 
-      <!-- 预览区域 -->
-      <div v-if="hasChanges" class="preview-section">
-        <h4>预览更改</h4>
-        <div class="preview-list">
-          <div
-            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">
-              <a-tag v-if="getPointChanges(item).length" color="blue" class="change-tag">
-                点位: {{ getPointChanges(item).join(', ') }}
-              </a-tag>
-              <a-tag v-if="getRouteChanges(item).length" color="green" class="change-tag">
-                路线: {{ getRouteChanges(item).join(', ') }}
-              </a-tag>
+        <!-- 路线批量编辑 -->
+        <div v-if="lineItems.length > 0" class="edit-section">
+          <h4>路线编辑 ({{ lineItems.length }} 个)</h4>
+          <a-form layout="vertical">
+            <a-form-item label="通行类型">
+              <a-select v-model:value="routePassType" 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>
+            </a-form-item>
+          </a-form>
+        </div>
+
+        <!-- 预览区域 -->
+        <div v-if="hasChanges" class="preview-section">
+          <h4>预览更改</h4>
+          <div class="preview-list">
+            <div 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">
+                <a-tag v-if="getPointChanges(item).length" color="blue" class="change-tag">
+                  点位: {{ getPointChanges(item).join(', ') }}
+                </a-tag>
+                <a-tag v-if="getRouteChanges(item).length" color="green" class="change-tag">
+                  路线: {{ getRouteChanges(item).join(', ') }}
+                </a-tag>
+              </div>
             </div>
           </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 { 
-  MAP_POINT_TYPES,
-  MAP_ROUTE_PASS_TYPES,
-  MapPointType, 
-  MapRoutePassType
-} from '../../apis/map';
+import { 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) => {
@@ -108,12 +114,12 @@ const getPointTypeConfig = (type: MapPointType, editor: EditorService) => {
   const height = type < 10 ? 24 : 60;
   const lineWidth = type < 10 ? 2 : 3;
   const iconSize = type < 10 ? 4 : 10;
-  
+
   // 使用与 editor.service.ts 中 #mapPointImage 相同的逻辑
   const theme = editor.data().theme;
   // 使用相对路径，图片文件在 public/point/ 目录下
   const image = type < 10 ? '' : `./point/${type}-${theme}.png`;
-  
+
   return { width, height, lineWidth, iconSize, image };
 };
 
@@ -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(() => 
-  props.selectedItems.filter(item => item.name === 'point')
-);
+const pointItems = computed(() => props.selectedItems.filter((item) => item.name === 'point'));
 
-const lineItems = computed(() => 
-  props.selectedItems.filter(item => item.name === 'line')
-);
+const lineItems = computed(() => 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) => {
-  if (visible) {
-    resetForm();
-  }
-});
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      resetForm();
+    }
+  },
+);
 
 // 选中元素描述
 const selectionDescription = computed(() => {
@@ -182,8 +204,8 @@ const selectionDescription = computed(() => {
 
 // 获取元素名称
 const getItemName = (item: MapPen) => {
-  if(item.tags?.includes('route')){
-    return item.desc||item.label || item.id || '未命名';
+  if (item.tags?.includes('route')) {
+    return item.desc || item.label || item.id || '未命名';
   }
   return item.label || item.id || '未命名';
 };
@@ -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') {
@@ -204,90 +226,93 @@ const getItemType = (item: MapPen) => {
 // 获取点位变更描述
 const getPointChanges = (item: MapPen) => {
   if (item.name !== 'point' || !pointType.value) return [];
-  
+
   const currentType = item.point?.type;
   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}`];
 };
 
 // 获取路线变更描述
 const getRouteChanges = (item: MapPen) => {
   if (item.name !== 'line') return [];
-  
+
   const changes: string[] = [];
-  
+
   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}`);
   }
-  
+
   return changes;
 };
 
 // 确认更改
 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);
-      
+
       updates.push({
         id: item.id!,
         updates: {
           // 更新点位类型
           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,
       });
     }
   });
-  
+
   emit('update', updates);
-  
+
   // 立即关闭弹窗，提供更好的用户体验
   modalVisible.value = false;
-  
+
   // 在后台异步重新加载主题，避免界面卡顿
   nextTick(() => {
     // 使用 setTimeout 确保点位更新完成后再重新加载主题
@@ -304,7 +329,7 @@ const handleCancel = () => {
 };
 
 defineOptions({
-  name: 'BatchEditModal'
+  name: 'BatchEditModal',
 });
 </script>
 
@@ -315,28 +340,28 @@ defineOptions({
   .selection-info {
     margin-bottom: 16px;
   }
-  
+
   .edit-section {
     margin-bottom: 16px;
     padding: 12px;
     border-radius: 6px;
-    
+
     h4 {
       margin: 0 0 12px 0;
       font-size: 14px;
     }
   }
-  
+
   .preview-section {
     h4 {
       margin: 0 0 12px 0;
       font-size: 14px;
     }
-    
+
     .preview-list {
       max-height: 150px;
       overflow-y: auto;
-      
+
       .preview-item {
         display: flex;
         align-items: center;
@@ -344,32 +369,32 @@ defineOptions({
         margin-bottom: 6px;
         border-radius: 4px;
         font-size: 12px;
-        
+
         .item-name {
           font-weight: 500;
           margin-right: 10px;
           min-width: 80px;
         }
-        
+
         .item-type {
           margin-right: 10px;
           min-width: 100px;
         }
-        
+
         .changes {
           flex: 1;
-          
+
           .ant-tag {
             margin-right: 6px;
             margin-bottom: 2px;
             font-size: 11px;
           }
-          
+
           .change-tag {
             font-weight: 500;
             border: 1px solid currentColor;
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-            
+
             // 突出显示箭头符号
             &::before {
               content: '';
@@ -395,22 +420,22 @@ defineOptions({
     .edit-section {
       background: theme.get-color(fill3);
       border: 1px solid theme.get-color(border2);
-      
+
       h4 {
         color: theme.get-color(primary);
       }
     }
-    
+
     .preview-section {
       h4 {
         color: theme.get-color(success);
       }
-      
+
       .preview-list {
         .preview-item {
           background: theme.get-color(bg_component);
           border: 1px solid theme.get-color(border1);
-          
+
           .item-type {
             color: theme.get-color(text3);
           }
diff --git a/src/components/modal/robot-bind-modal.vue b/src/components/modal/robot-bind-modal.vue
index c964ab1..0e3cfb1 100644
--- a/src/components/modal/robot-bind-modal.vue
+++ b/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;
-  selected.value = pen.point?.robots ?? [];
+  targetPens.value = pens;
+
+  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>