feat: 移除旧的上下文菜单组件，增强机器人菜单功能，新增自定义图片设置和关闭按钮，优化用户交互体验

src/components/context-menu.vue

@@ -1,45 +0,0 @@
-<template>
-  <!-- 使用新的模块化组件 -->
-  <ContextMenu
-    :visible="visible"
-    :x="x"
-    :y="y"
-    :menu-type="menuType"
-    :storage-locations="storageLocations"
-    :robot-info="robotInfo"
-    :api-base-url="apiBaseUrl"
-    @close="$emit('close')"
-    @action-complete="$emit('actionComplete', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-import { ContextMenu } from './context-menu';
-import type { StorageLocationInfo } from '../services/context-menu';
-import type { RobotInfo } from '../services/context-menu';
-
-interface Props {
-  visible: boolean;
-  x?: number;
-  y?: number;
-  menuType?: 'default' | 'storage' | 'storage-background' | 'robot' | 'point' | 'area';
-  storageLocations?: StorageLocationInfo[];
-  robotInfo?: RobotInfo;
-  apiBaseUrl?: string;
-}
-
-interface Emits {
-  (e: 'close'): void;
-  (e: 'actionComplete', data: any): void;
-}
-
-defineProps<Props>();
-defineEmits<Emits>();
-
-// 定义组件名称
-defineOptions({
-  name: 'ContextMenu',
-});
-</script>
-
-<!-- 样式已移至各个子组件中 -->

src/components/context-menu/context-menu.vue

@@ -16,6 +16,9 @@
       <div class="context-menu-overlay">
         <div class="context-menu-header">
           <div class="menu-title">{{ headerTitle }}</div>
+          <div class="close-button" @click="handleCloseMenu" title="关闭菜单">
+            <span class="close-icon">×</span>
+          </div>
         </div>
 
         <!-- 库位菜单 -->
@@ -33,6 +36,7 @@
           v-else-if="menuType === 'robot' && robotInfo"
           :robot-info="robotInfo"
           @action-complete="handleActionComplete"
+          @custom-image="handleCustomImage"
         />
 
         <!-- 默认菜单 -->
@@ -48,8 +52,8 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref } from 'vue';
 
-import type { RobotInfo } from '../../services/context-menu';
+import type { RobotInfo, StorageLocationInfo } from '../../services/context-menu';
-import type { StorageLocationInfo } from '../../services/context-menu';
+
 // 使用动态导入避免 TypeScript 错误
 const DefaultMenu = defineAsyncComponent(() => import('./default-menu.vue'));
 const RobotMenu = defineAsyncComponent(() => import('./robot-menu.vue'));
@@ -68,6 +72,7 @@ interface Props {
 interface Emits {
   (e: 'close'): void;
   (e: 'actionComplete', data: any): void;
+  (e: 'customImage', data: { robotInfo: RobotInfo }): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -126,11 +131,20 @@ const handleOpenChange = (open: boolean) => {
 const handleActionComplete = (data: any) => {
   console.log('菜单操作完成:', data);
   emit('actionComplete', data);
+  // 所有操作都不关闭菜单，只有关闭按钮才能关闭
+};
 
-  // 某些操作完成后关闭菜单
+// 处理自定义图片事件
-  if (data.action && ['occupy', 'release', 'lock', 'unlock', 'enable', 'disable'].includes(data.action)) {
+const handleCustomImage = (data: { robotInfo: RobotInfo }) => {
-    emit('close');
+  console.log('打开自定义图片设置:', data.robotInfo);
-  }
+  emit('customImage', data);
+  // 不关闭菜单，只有关闭按钮才能关闭
+};
+
+// 处理关闭按钮点击
+const handleCloseMenu = () => {
+  console.log('用户点击关闭按钮');
+  emit('close');
 };
 </script>
 
@@ -169,6 +183,9 @@ const handleActionComplete = (data: any) => {
   background-color: #fafafa;
   padding: 8px 12px;
   border-radius: 6px 6px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 /* 黑色主题菜单头部 */
@@ -186,4 +203,48 @@ const handleActionComplete = (data: any) => {
 :root[theme='dark'] .menu-title {
   color: #ffffffd9 !important;
 }
+
+/* 关闭按钮样式 */
+.close-button {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.close-button:hover {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+.close-icon {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1;
+  color: #666;
+  transition: color 0.2s ease;
+}
+
+.close-button:hover .close-icon {
+  color: white;
+}
+
+/* 黑色主题关闭按钮 */
+:root[theme='dark'] .close-button {
+  background-color: #424242;
+}
+
+:root[theme='dark'] .close-button:hover {
+  background-color: #ff4d4f;
+}
+
+:root[theme='dark'] .close-icon {
+  color: #ffffffd9;
+}
 </style>

src/components/context-menu/robot-menu.vue

@@ -93,6 +93,10 @@
           <!-- 系统管理 -->
           <div class="action-group">
             <div class="action-group-title">系统管理</div>
+            <div class="action-item" @click="handleRobotAction('custom_image', '自定义图片')">
+              <span class="action-icon">🖼️</span>
+              <span>自定义图片</span>
+            </div>
             <div class="action-item" @click="handleRobotAction('reset', '重置')">
               <span class="action-icon">🔄</span>
               <span>重置</span>
@@ -109,27 +113,67 @@
         </div>
       </div>
     </div>
+
+    <!-- 机器人图片设置模态框 -->
+    <RobotImageSettingsModal
+      v-model:open="imageSettingsVisible"
+      :robots="availableRobots"
+      :selected-robot-name="selectedRobotName"
+      @save="handleImageSettingsSave"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { RobotAction,RobotInfo } from '../../services/context-menu/robot-menu.service';
+import { message } from 'ant-design-vue';
+import { computed, ref } from 'vue';
+
+import type { RobotAction, RobotInfo } from '../../services/context-menu/robot-menu.service';
 import { 
   executeRobotAction,
   getRobotStatusColor,
-  getRobotStatusText} from '../../services/context-menu/robot-menu.service';
+  getRobotStatusText
+} from '../../services/context-menu/robot-menu.service';
 
 interface Props {
   robotInfo?: RobotInfo;
+  availableRobots?: Array<{ name: string; type: string; id: string }>;
 }
 
 interface Emits {
   (e: 'actionComplete', data: { action: RobotAction; robot: RobotInfo; success: boolean }): void;
+  (e: 'customImage', data: { robotInfo: RobotInfo }): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  availableRobots: () => []
+});
+
 const emit = defineEmits<Emits>();
 
+// 图片设置模态框状态
+const imageSettingsVisible = ref(false);
+const selectedRobotName = ref('');
+
+// 生成可用的机器人列表
+const availableRobots = computed(() => {
+  // 如果父组件传递了机器人列表，使用父组件的
+  if (props.availableRobots && props.availableRobots.length > 0) {
+    return props.availableRobots;
+  }
+  
+  // 否则，基于当前机器人信息生成列表
+  if (props.robotInfo) {
+    return [{
+      name: props.robotInfo.name,
+      type: 'robot', // 默认类型
+      id: props.robotInfo.id
+    }];
+  }
+  
+  return [];
+});
+
 // 定义组件名称
 defineOptions({
   name: 'RobotMenu',
@@ -152,10 +196,36 @@ const getBatteryClass = (batteryLevel: number) => {
   return 'battery-low';
 };
 
+// 处理自定义图片操作
+const handleCustomImage = () => {
+  if (!props.robotInfo?.name) {
+    message.error('未找到机器人信息');
+    return;
+  }
+  
+  console.log('打开机器人图片设置:', props.robotInfo);
+  
+  // 打开模态框，不关闭右键菜单
+  selectedRobotName.value = props.robotInfo.name;
+  imageSettingsVisible.value = true;
+  console.log('设置模态框可见性：', imageSettingsVisible.value);
+  
+  // 只触发自定义图片事件，不触发操作完成事件
+  emit('customImage', {
+    robotInfo: props.robotInfo
+  });
+};
+
 // 处理机器人操作
-const handleRobotAction = async (action: RobotAction, actionName: string) => {
+const handleRobotAction = async (action: RobotAction | 'custom_image', actionName: string) => {
   if (!props.robotInfo) return;
   
+  // 处理自定义图片操作
+  if (action === 'custom_image') {
+    handleCustomImage();
+    return;
+  }
+  
   try {
     console.log(`执行机器人操作: ${action} (${actionName})`, props.robotInfo);
     
@@ -173,7 +243,6 @@ const handleRobotAction = async (action: RobotAction, actionName: string) => {
   } catch (error) {
     console.error(`机器人${actionName}操作失败:`, error);
     
-    // 发送操作失败事件
     emit('actionComplete', {
       action,
       robot: props.robotInfo,
@@ -181,6 +250,15 @@ const handleRobotAction = async (action: RobotAction, actionName: string) => {
     });
   }
 };
+
+// 处理图片设置保存
+const handleImageSettingsSave = (data: any) => {
+  console.log('机器人图片设置保存:', data);
+  message.success('机器人图片设置保存成功');
+  
+  // 可以在这里添加额外的保存后处理逻辑
+  // 比如通知父组件更新机器人显示等
+};
 </script>
 
 <style scoped>

src/components/context-menu/storage-menu.vue

@@ -218,35 +218,6 @@ const hideSubMenu = () => {
   }
 };
 
-// 延迟隐藏子菜单（已移除，由 Ant Design 处理）
-// const hideSubMenuDelayed = () => {
-//   if (hideTimer.value) {
-//     clearTimeout(hideTimer.value);
-//   }
-//   hideTimer.value = window.setTimeout(() => {
-//     showSubMenu.value = null;
-//     hideTimer.value = null;
-//   }, 150); // 150ms延迟，给用户足够时间移动到子菜单
-// };
-
-// 处理库位项鼠标离开（已移除，由 Ant Design 处理）
-// const handleStorageMouseLeave = () => {
-//   hideSubMenuDelayed();
-// };
-
-// 处理子菜单鼠标进入（已移除，由 Ant Design 处理）
-// const handleSubMenuMouseEnter = () => {
-//   // 清除隐藏定时器
-//   if (hideTimer.value) {
-//     clearTimeout(hideTimer.value);
-//     hideTimer.value = null;
-//   }
-// };
-
-// 处理子菜单鼠标离开（已移除，由 Ant Design 处理）
-// const handleSubMenuMouseLeave = () => {
-//   hideSubMenu();
-// };
 
 // 处理子菜单开关变化
 const handleSubMenuOpenChange = (open: boolean) => {

src/components/modal/robot-image-settings-modal.vue

@@ -0,0 +1,401 @@
+<template>
+  <a-modal
+    :open="props.open"
+    title="机器人图片设置"
+    width="800px"
+    :confirm-loading="loading"
+    @ok="handleSave"
+    @cancel="handleCancel"
+    @update:open="(value) => emit('update:open', value)"
+  >
+    <div class="robot-image-settings">
+      <a-form :model="formData" layout="vertical">
+        <!-- 机器人选择 -->
+        <a-form-item label="选择机器人">
+          <a-select
+            v-model:value="selectedRobot"
+            placeholder="请选择要设置图片的机器人"
+            style="width: 100%"
+          >
+            <a-select-option
+              v-for="robot in availableRobots"
+              :key="robot.name"
+              :value="robot.name"
+            >
+              {{ robot.name }} ({{ robot.type }})
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <!-- 图片设置区域 -->
+        <div v-if="selectedRobot" class="image-settings-section">
+          <a-divider>图片设置</a-divider>
+          
+          <!-- 普通状态图片 -->
+          <a-form-item label="普通状态图片">
+            <div class="image-upload-container">
+              <a-upload
+                :file-list="[]"
+                :before-upload="(file) => handleImageUpload(file, 'normal')"
+                accept="image/*"
+                :show-upload-list="false"
+              >
+                <a-button :loading="uploading.normal">
+                  <template #icon>
+                    <UploadOutlined />
+                  </template>
+                  选择普通状态图片
+                </a-button>
+              </a-upload>
+              
+              <div v-if="formData.images.normal" class="image-preview">
+                <img :src="formData.images.normal" alt="普通状态" />
+                <div class="image-actions">
+                  <a-button size="small" @click="removeImage('normal')">删除</a-button>
+                </div>
+              </div>
+            </div>
+          </a-form-item>
+
+          <!-- 激活状态图片 -->
+          <a-form-item label="激活状态图片">
+            <div class="image-upload-container">
+              <a-upload
+                :file-list="[]"
+                :before-upload="(file) => handleImageUpload(file, 'active')"
+                accept="image/*"
+                :show-upload-list="false"
+              >
+                <a-button :loading="uploading.active">
+                  <template #icon>
+                    <UploadOutlined />
+                  </template>
+                  选择激活状态图片
+                </a-button>
+              </a-upload>
+              
+              <div v-if="formData.images.active" class="image-preview">
+                <img :src="formData.images.active" alt="激活状态" />
+                <div class="image-actions">
+                  <a-button size="small" @click="removeImage('active')">删除</a-button>
+                </div>
+              </div>
+            </div>
+          </a-form-item>
+
+          <!-- 图片尺寸设置 -->
+          <a-form-item label="图片尺寸">
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-input-number
+                  v-model:value="formData.imageWidth"
+                  :min="20"
+                  :max="200"
+                  placeholder="宽度"
+                  style="width: 100%"
+                />
+                <span class="size-label">宽度 (px)</span>
+              </a-col>
+              <a-col :span="12">
+                <a-input-number
+                  v-model:value="formData.imageHeight"
+                  :min="20"
+                  :max="200"
+                  placeholder="高度"
+                  style="width: 100%"
+                />
+                <span class="size-label">高度 (px)</span>
+              </a-col>
+            </a-row>
+          </a-form-item>
+
+          <!-- 操作按钮 -->
+          <a-form-item>
+            <a-space>
+              <a-button @click="resetImages">重置图片</a-button>
+              <a-button danger @click="clearAllImages">清除所有图片</a-button>
+            </a-space>
+          </a-form-item>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import colorConfig from '../../services/color/color-config.service';
+
+interface RobotInfo {
+  name: string;
+  type: string;
+  id: string;
+}
+
+interface Props {
+  open: boolean;
+  robots: RobotInfo[];
+  selectedRobotName?: string;
+}
+
+interface Emits {
+  (e: 'update:open', open: boolean): void;
+  (e: 'update:selectedRobotName', name: string): void;
+  (e: 'save', data: any): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  robots: () => [],
+  selectedRobotName: ''
+});
+
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const selectedRobot = ref<string>(props.selectedRobotName);
+const loading = ref(false);
+const uploading = ref({
+  normal: false,
+  active: false
+});
+
+const formData = ref({
+  images: {
+    normal: '',
+    active: ''
+  },
+  imageWidth: 42,
+  imageHeight: 76
+});
+
+// 计算属性
+const availableRobots = computed(() => props.robots);
+
+// 组件挂载时初始化
+onMounted(() => {
+  if (props.open && props.selectedRobotName) {
+    selectedRobot.value = props.selectedRobotName;
+    loadRobotImages(props.selectedRobotName);
+  }
+});
+
+// 监听选中机器人变化
+watch(selectedRobot, (newRobot) => {
+  if (newRobot) {
+    loadRobotImages(newRobot);
+    emit('update:selectedRobotName', newRobot);
+  }
+});
+
+// 监听props变化
+watch(() => props.selectedRobotName, (newName) => {
+  console.log('模态框接收到selectedRobotName变化:', newName);
+  if (newName && newName !== selectedRobot.value) {
+    selectedRobot.value = newName;
+    console.log('设置selectedRobot为:', newName);
+  }
+});
+
+// 监听open状态变化
+watch(() => props.open, (isOpen) => {
+  console.log('模态框open状态变化:', isOpen);
+  if (isOpen) {
+    // 如果有选中的机器人名称，则设置并加载数据
+    if (props.selectedRobotName) {
+      selectedRobot.value = props.selectedRobotName;
+      loadRobotImages(props.selectedRobotName);
+      console.log('模态框打开，设置selectedRobot为:', props.selectedRobotName);
+    }
+  } else {
+    // 关闭时重置所有状态
+    handleCancel();
+  }
+});
+
+// 加载机器人图片
+const loadRobotImages = (robotName: string) => {
+  formData.value.images.normal = colorConfig.getRobotCustomImage(robotName, 'normal') || '';
+  formData.value.images.active = colorConfig.getRobotCustomImage(robotName, 'active') || '';
+  
+  // 加载图片尺寸配置
+  formData.value.imageWidth = Number(colorConfig.getColor('robot.imageWidth')) || 42;
+  formData.value.imageHeight = Number(colorConfig.getColor('robot.imageHeight')) || 76;
+};
+
+// 处理图片上传
+const handleImageUpload = async (file: File, state: 'normal' | 'active') => {
+  if (!selectedRobot.value) {
+    message.error('请先选择机器人');
+    return false;
+  }
+
+  // 检查文件类型
+  if (!file.type.startsWith('image/')) {
+    message.error('请选择图片文件');
+    return false;
+  }
+
+  // 检查文件大小 (限制为2MB)
+  if (file.size > 2 * 1024 * 1024) {
+    message.error('图片文件大小不能超过2MB');
+    return false;
+  }
+
+  uploading.value[state] = true;
+
+  try {
+    await colorConfig.saveRobotCustomImage(selectedRobot.value, state, file);
+    formData.value.images[state] = colorConfig.getRobotCustomImage(selectedRobot.value, state) || '';
+    message.success(`${state === 'normal' ? '普通状态' : '激活状态'}图片上传成功`);
+  } catch (error) {
+    console.error('图片上传失败:', error);
+    message.error('图片上传失败，请重试');
+  } finally {
+    uploading.value[state] = false;
+  }
+
+  return false; // 阻止默认上传行为
+};
+
+// 删除图片
+const removeImage = (state: 'normal' | 'active') => {
+  if (!selectedRobot.value) return;
+  
+  colorConfig.removeRobotCustomImage(selectedRobot.value, state);
+  formData.value.images[state] = '';
+  message.success(`${state === 'normal' ? '普通状态' : '激活状态'}图片已删除`);
+};
+
+// 重置图片
+const resetImages = () => {
+  if (!selectedRobot.value) return;
+  
+  colorConfig.removeRobotCustomImage(selectedRobot.value);
+  formData.value.images.normal = '';
+  formData.value.images.active = '';
+  message.success('图片已重置');
+};
+
+// 清除所有图片
+const clearAllImages = () => {
+  if (!selectedRobot.value) return;
+  
+  colorConfig.removeRobotCustomImage(selectedRobot.value);
+  formData.value.images.normal = '';
+  formData.value.images.active = '';
+  message.success('所有图片已清除');
+};
+
+// 保存设置
+const handleSave = async () => {
+  if (!selectedRobot.value) {
+    message.error('请选择机器人');
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    // 保存图片尺寸配置
+    if (formData.value.imageWidth !== Number(colorConfig.getColor('robot.imageWidth'))) {
+      colorConfig.setColor('robot.imageWidth', formData.value.imageWidth.toString());
+    }
+    if (formData.value.imageHeight !== Number(colorConfig.getColor('robot.imageHeight'))) {
+      colorConfig.setColor('robot.imageHeight', formData.value.imageHeight.toString());
+    }
+
+    emit('save', {
+      robotName: selectedRobot.value,
+      images: formData.value.images,
+      imageWidth: formData.value.imageWidth,
+      imageHeight: formData.value.imageHeight
+    });
+
+    message.success('设置保存成功');
+    handleCancel();
+  } catch (error) {
+    console.error('保存设置失败:', error);
+    message.error('保存设置失败，请重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 取消
+const handleCancel = () => {
+  emit('update:open', false);
+  // 重置表单
+  selectedRobot.value = '';
+  formData.value = {
+    images: {
+      normal: '',
+      active: ''
+    },
+    imageWidth: 42,
+    imageHeight: 76
+  };
+};
+</script>
+
+<style scoped>
+.robot-image-settings {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.image-settings-section {
+  margin-top: 16px;
+}
+
+.image-upload-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.image-preview {
+  position: relative;
+  display: inline-block;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 8px;
+  background: #fafafa;
+}
+
+.image-preview img {
+  max-width: 120px;
+  max-height: 120px;
+  display: block;
+  border-radius: 4px;
+}
+
+.image-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.image-preview:hover .image-actions {
+  opacity: 1;
+}
+
+.size-label {
+  font-size: 12px;
+  color: #666;
+  margin-left: 8px;
+}
+
+.ant-form-item {
+  margin-bottom: 16px;
+}
+
+.ant-divider {
+  margin: 16px 0;
+}
+</style>

src/pages/movement-supervision.vue

@@ -407,13 +407,16 @@ const handleActionComplete = (data: any) => {
  * @param event 点击事件
  */
 const handleGlobalClick = (event: MouseEvent) => {
-  // 如果右键菜单可见，检查点击是否在菜单内
+
-  if (contextMenuState.value.visible) {
+  // 检查是否点击了关闭按钮
-    // 如果点击不在菜单内，则关闭菜单
+  const closeButton = (event.target as Element)?.closest('.close-button');
-    if (!isClickInsideMenu(event, contextMenuState.value.visible)) {
+  if (closeButton) {
-      contextMenuManager.close();
+    // 如果点击了关闭按钮，让按钮自己的点击事件处理关闭
-    }
+    return;
   }
+    
+
+  
 };
 
 /**

src/services/color/color-config.service.ts

@@ -98,6 +98,14 @@ export interface EditorColorConfig {
     // 机器人图片尺寸
     imageWidth: number;   // 机器人图片宽度
     imageHeight: number;  // 机器人图片高度
+    // 单个机器人自定义图片配置
+    customImages: {
+      [robotName: string]: {
+        normal: string;    // Base64编码的普通状态图片
+        active: string;    // Base64编码的激活状态图片
+      };
+    };
+    useCustomImages: boolean; // 是否启用自定义图片
   };
   
   // 库位颜色
@@ -318,7 +326,9 @@ const DEFAULT_COLORS: EditorColorConfig = {
     strokeFault: '#FF4D4F99',
     fillFault: '#FF4D4F33',
     imageWidth: 42,   // 机器人图片宽度 - 42像素
-    imageHeight: 76   // 机器人图片高度 - 76像素
+    imageHeight: 76,  // 机器人图片高度 - 76像素
+    customImages: {}, // 单个机器人自定义图片配置
+    useCustomImages: false // 默认不启用自定义图片
   },
   storage: {
     occupied: '#ff4d4f',
@@ -465,7 +475,9 @@ const DARK_THEME_COLORS: EditorColorConfig = {
     strokeFault: '#FF4D4F99',
     fillFault: '#FF4D4F33',
     imageWidth: 42,   // 机器人图片宽度 - 42像素
-    imageHeight: 76   // 机器人图片高度 - 76像素
+    imageHeight: 76,  // 机器人图片高度 - 76像素
+    customImages: {}, // 单个机器人自定义图片配置
+    useCustomImages: false // 默认不启用自定义图片
   },
   storage: {
     occupied: '#ff4d4f',
@@ -879,7 +891,9 @@ class ColorConfigService {
         strokeFault: theme.robot['stroke-fault'] || DEFAULT_COLORS.robot.strokeFault,
         fillFault: theme.robot['fill-fault'] || DEFAULT_COLORS.robot.fillFault,
         imageWidth: DEFAULT_COLORS.robot.imageWidth,
-        imageHeight: DEFAULT_COLORS.robot.imageHeight
+        imageHeight: DEFAULT_COLORS.robot.imageHeight,
+        customImages: DEFAULT_COLORS.robot.customImages,
+        useCustomImages: DEFAULT_COLORS.robot.useCustomImages
       };
     }
 
@@ -1009,6 +1023,152 @@ class ColorConfigService {
     }, obj);
     target[lastKey] = value;
   }
+
+  /**
+   * 将文件转换为Base64字符串
+   * @param file 图片文件
+   * @param maxWidth 最大宽度，用于压缩
+   * @param quality 压缩质量 (0-1)
+   */
+  public async fileToBase64(file: File, maxWidth: number = 200, quality: number = 0.8): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      
+      reader.onload = () => {
+        const img = new Image();
+        img.onload = () => {
+          // 创建canvas进行图片压缩
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d')!;
+          
+          // 计算压缩后的尺寸
+          const ratio = Math.min(maxWidth / img.width, maxWidth / img.height);
+          canvas.width = img.width * ratio;
+          canvas.height = img.height * ratio;
+          
+          // 绘制压缩后的图片
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          
+          // 转换为Base64
+          const base64 = canvas.toDataURL('image/png', quality);
+          resolve(base64);
+        };
+        img.onerror = reject;
+        img.src = reader.result as string;
+      };
+      
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  /**
+   * 保存单个机器人的自定义图片
+   * @param robotName 机器人名称
+   * @param state 图片状态 ('normal' | 'active')
+   * @param file 图片文件
+   */
+  public async saveRobotCustomImage(robotName: string, state: 'normal' | 'active', file: File): Promise<void> {
+    try {
+      // 将图片转换为Base64
+      const base64 = await this.fileToBase64(file);
+      
+      // 确保customImages对象存在
+      if (!this.config.value.robot.customImages) {
+        this.setNestedValue(this.config.value, 'robot.customImages', {});
+      }
+      
+      // 确保机器人对象存在
+      if (!this.config.value.robot.customImages[robotName]) {
+        this.setNestedValue(this.config.value, `robot.customImages.${robotName}`, {});
+      }
+      
+      // 保存图片数据
+      this.setNestedValue(this.config.value, `robot.customImages.${robotName}.${state}`, base64);
+      
+      // 启用自定义图片
+      this.setColor('robot.useCustomImages', 'true');
+      
+      // 更新单个机器人的图片
+      if (this.editorService && typeof this.editorService.updateRobotImage === 'function') {
+        this.editorService.updateRobotImage(robotName);
+      }
+      
+      // 触发重新渲染
+      this.triggerRender();
+    } catch (error) {
+      console.error('保存机器人自定义图片失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 获取单个机器人的自定义图片
+   * @param robotName 机器人名称
+   * @param state 图片状态 ('normal' | 'active')
+   */
+  public getRobotCustomImage(robotName: string, state: 'normal' | 'active'): string | null {
+    const customImages = this.config.value.robot.customImages;
+    if (!customImages || !customImages[robotName]) {
+      return null;
+    }
+    return customImages[robotName][state] || null;
+  }
+
+  /**
+   * 删除单个机器人的自定义图片
+   * @param robotName 机器人名称
+   * @param state 图片状态 ('normal' | 'active')，不传则删除所有状态
+   */
+  public removeRobotCustomImage(robotName: string, state?: 'normal' | 'active'): void {
+    const customImages = this.config.value.robot.customImages;
+    if (!customImages || !customImages[robotName]) {
+      return;
+    }
+
+    if (state) {
+      // 删除特定状态的图片
+      this.setNestedValue(this.config.value, `robot.customImages.${robotName}.${state}`, '');
+    } else {
+      // 删除整个机器人的图片配置
+      delete customImages[robotName];
+    }
+
+    // 检查是否还有任何自定义图片
+    const hasAnyCustomImages = Object.values(customImages).some(robot => 
+      robot.normal || robot.active
+    );
+    
+    if (!hasAnyCustomImages) {
+      this.setColor('robot.useCustomImages', 'false');
+    }
+
+    this.triggerRender();
+  }
+
+  /**
+   * 检查机器人是否有自定义图片
+   * @param robotName 机器人名称
+   */
+  public hasRobotCustomImage(robotName: string): boolean {
+    const customImages = this.config.value.robot.customImages;
+    if (!customImages || !customImages[robotName]) {
+      return false;
+    }
+    return !!(customImages[robotName].normal || customImages[robotName].active);
+  }
+
+  /**
+   * 获取所有有自定义图片的机器人名称列表
+   */
+  public getRobotsWithCustomImages(): string[] {
+    const customImages = this.config.value.robot.customImages;
+    if (!customImages) return [];
+    
+    return Object.keys(customImages).filter(robotName => 
+      customImages[robotName].normal || customImages[robotName].active
+    );
+  }
 }
 
 export default new ColorConfigService();

src/services/context-menu/event-parser.ts

@@ -85,10 +85,18 @@ export function parsePenData(penData: Record<string, unknown>): ParsedEventData
     
     if (tags.includes('robot')) {
       // 机器人区域
+      // 机器人的真实名称存储在text字段中，而不是name字段
+      const robotName = (pen?.text as string) || name || `机器人-${id}`;
+      console.log('解析pen数据中的机器人信息:', {
+        id,
+        originalName: name,
+        penText: pen?.text,
+        finalName: robotName
+      });
       return {
         type: 'robot',
         id,
-        name,
+        name: robotName,
         tags,
         target: document.elementFromPoint(position.x, position.y) as HTMLElement,
         position,
@@ -198,10 +206,18 @@ export function parseEventData(event: MouseEvent | PointerEvent): ParsedEventDat
     
     if (tags.includes('robot')) {
       // 机器人区域
+      // 机器人的真实名称存储在text字段中，而不是name字段
+      const robotName = (pen?.text as string) || name || `机器人-${id}`;
+      console.log('解析机器人信息:', {
+        id,
+        originalName: name,
+        penText: pen?.text,
+        finalName: robotName
+      });
       return {
         type: 'robot',
         id,
-        name,
+        name: robotName,
         tags,
         target,
         position,
@@ -282,7 +298,11 @@ export function parseEventData(event: MouseEvent | PointerEvent): ParsedEventDat
 export function isClickInsideMenu(event: MouseEvent, isMenuVisible: boolean): boolean {
   if (!isMenuVisible) return false;
 
-  const menuElement = document.querySelector('.context-menu');
+  // 查找右键菜单元素，支持多种可能的类名
+  const menuElement = document.querySelector('.context-menu-overlay') || 
+                     document.querySelector('.context-menu') ||
+                     document.querySelector('[class*="context-menu"]');
+  
   if (!menuElement) return false;
 
   const rect = menuElement.getBoundingClientRect();

src/services/context-menu/robot-menu.service.ts

@@ -36,7 +36,8 @@ export type RobotAction =
   | 'stop'               // 停止
   | 'reset'              // 重置
   | 'diagnose'           // 诊断
-  | 'update';            // 更新
+  | 'update'             // 更新
+  | 'custom_image';      // 自定义图片
 
 /**
  * 获取机器人信息

src/services/editor.service.ts

@@ -11,7 +11,7 @@ import {
   type Point,
   type Rect,
 } from '@api/map';
-import type { RobotGroup, RobotInfo, RobotRealtimeInfo, RobotType } from '@api/robot';
+import type { RobotGroup, RobotInfo, RobotType } from '@api/robot';
 import type {
   BinLocationGroup,
   BinLocationItem,
@@ -25,7 +25,7 @@ import type {
 import sTheme from '@core/theme.service';
 import { CanvasLayer, LockState, Meta2d, type Meta2dStore, type Pen, s8 } from '@meta2d/core';
 import { useObservable } from '@vueuse/rxjs';
-import { clone, get, isEmpty, isNil, isString, nth, omitBy, pick, remove, some } from 'lodash-es';
+import { clone, get, isEmpty, isNil, isString, nth, pick, remove, some } from 'lodash-es';
 import { BehaviorSubject, debounceTime, filter, map, Subject, switchMap } from 'rxjs';
 import { reactive, watch } from 'vue';
 
@@ -1105,7 +1105,7 @@ export class EditorService extends Meta2d {
     await Promise.all(
       this.robots.map(async ({ id, label, type }) => {
         const pen: MapPen = {
-          ...this.#mapRobotImage(type, true),
+          ...this.#mapRobotImage(type, true, label), // 传递机器人名称(label)
           id,
           name: 'robot',
           tags: ['robot'],
@@ -1171,10 +1171,10 @@ export class EditorService extends Meta2d {
    * 当机器人图片尺寸配置发生变化时调用
    */
   public updateAllRobotImageSizes(): void {
-    this.robots.forEach(({ id, type }) => {
+    this.robots.forEach(({ id, type, label }) => {
       const pen = this.getPenById(id);
       if (pen && pen.robot) {
-        const imageConfig = this.#mapRobotImage(type, pen.robot.active);
+        const imageConfig = this.#mapRobotImage(type, pen.robot.active, label); // 传递机器人名称
         this.setValue(
           {
             id,
@@ -1188,14 +1188,56 @@ export class EditorService extends Meta2d {
     });
   }
 
+  /**
+   * 更新单个机器人的图片
+   * 当机器人自定义图片配置发生变化时调用
+   * @param robotName 机器人名称
+   */
+  public updateRobotImage(robotName: string): void {
+    const robot = this.robots.find(r => r.label === robotName);
+    if (!robot) return;
+
+    const pen = this.getPenById(robot.id);
+    if (pen && pen.robot) {
+      const imageConfig = this.#mapRobotImage(robot.type, pen.robot.active, robotName);
+      this.setValue(
+        {
+          id: robot.id,
+          image: imageConfig.image,
+          iconWidth: imageConfig.iconWidth,
+          iconHeight: imageConfig.iconHeight,
+          iconTop: imageConfig.iconTop,
+        },
+        { render: true, history: false, doEvent: false },
+      );
+    }
+  }
+
 
   #mapRobotImage(
     type: RobotType,
     active?: boolean,
+    robotName?: string,
   ): Required<Pick<MapPen, 'image' | 'iconWidth' | 'iconHeight' | 'iconTop' | 'canvasLayer'>> {
     const theme = this.data().theme;
-    const image =
+    
-      import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
+    // 检查是否启用自定义图片且有机器人名称
+    const useCustomImages = colorConfig.getColor('robot.useCustomImages') === 'true';
+    let image: string;
+    
+    if (useCustomImages && robotName) {
+      // 尝试获取自定义图片
+      const customImage = colorConfig.getRobotCustomImage(robotName, active ? 'active' : 'normal');
+      if (customImage) {
+        image = customImage;
+      } else {
+        // 如果没有自定义图片，回退到默认图片
+        image = import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
+      }
+    } else {
+      // 使用默认图片
+      image = import.meta.env.BASE_URL + (active ? `/robot/${type}-active-${theme}.png` : `/robot/${type}-${theme}.png`);
+    }
 
     // 使用配置的机器人图片尺寸，如果没有配置则使用默认值
     const iconWidth = colorConfig.getColor('robot.imageWidth') ? Number(colorConfig.getColor('robot.imageWidth')) : 42;
@@ -1634,6 +1676,16 @@ export class EditorService extends Meta2d {
     (<HTMLDivElement>container.children.item(5)).ondrop = null;
     // 监听所有画布事件
     this.on('*', (e, v) => this.#listen(e, v));
+    
+    // 添加额外的右键事件监听器，确保阻止默认行为
+    const canvasElement = this.canvas as unknown as HTMLCanvasElement;
+    if (canvasElement && canvasElement.addEventListener) {
+      canvasElement.addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }, true);
+    }
+    
     // 注册自定义绘制函数和锚点
     this.#register();
 
@@ -1665,7 +1717,9 @@ export class EditorService extends Meta2d {
     });
     this.find('robot').forEach((pen) => {
       if (!pen.robot?.type) return;
-      this.canvas.updateValue(pen, this.#mapRobotImage(pen.robot.type, pen.robot.active));
+      // 从pen的text属性获取机器人名称
+      const robotName = pen.text || '';
+      this.canvas.updateValue(pen, this.#mapRobotImage(pen.robot.type, pen.robot.active, robotName));
     });
     this.render();
   }