From c32dd105efa1262466e9309ad48225a66b7bc74e Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 11 Sep 2025 15:07:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=9C=BA=E5=99=A8=E4=BA=BA=E5=88=97=E8=A1=A8=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/robot-groups.vue           | 87 +++++++++++++++--------
 src/services/context-menu/event-parser.ts |  5 +-
 2 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/components/robot-groups.vue b/src/components/robot-groups.vue
index 2d43fb5..d9fc14f 100644
--- a/src/components/robot-groups.vue
+++ b/src/components/robot-groups.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { type RobotGroup, type RobotInfo, seizeRobotByIds } from '@api/robot';
+import { type RobotGroup, type RobotInfo } from '@api/robot';
 import type { RobotAddModalRef } from '@common/modal/robot-add-modal.vue';
 import type { RobotGroupRenameModalRef } from '@common/modal/robot-group-rename-modal.vue';
 import type { RobotRegisterModalRef } from '@common/modal/robot-register-modal.vue';
 import type { EditorService } from '@core/editor.service';
 import { Modal } from 'ant-design-vue';
-import { watch } from 'vue';
-import { reactive } from 'vue';
-import { computed, inject, type InjectionKey, ref, type ShallowRef, shallowRef } from 'vue';
+import { computed, inject, type InjectionKey, reactive, ref, type ShallowRef, shallowRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+
+import { createContextMenuManager, handleContextMenu } from '../services/context-menu';
+import ContextMenu from './context-menu/context-menu.vue';
 
 type Props = {
   token: InjectionKey<ShallowRef<EditorService>>;
@@ -27,15 +27,25 @@ type Events = {
 const emit = defineEmits<Events>();
 
 const { t } = useI18n();
-const router = useRouter();
+// const router = useRouter(); // 暂时注释掉，保留以备将来使用
 
-//#region 接口
-const seizeRobots = async () => {
-  const res = await seizeRobotByIds([...selected.keys()]);
-  editor.value.updateRobots(res, { canControl: true });
+//#region 右键菜单
+const contextMenuManager = createContextMenuManager();
+const contextMenuState = ref(contextMenuManager.getState());
+
+// 订阅右键菜单状态变化
+contextMenuManager.subscribe((state) => {
+  contextMenuState.value = state;
+});
+
+// 处理右键菜单关闭
+const handleContextMenuClose = () => {
+  contextMenuManager.close();
 };
+
 //#endregion
 
+
 const keyword = ref<string>('');
 
 //#region 机器人列表
@@ -75,6 +85,22 @@ const selectRobot = (id: RobotInfo['id'], checked: boolean) => {
     selected.delete(id);
   }
 };
+
+// 处理机器人右键点击
+const handleRobotRightClick = (event: MouseEvent, robot: RobotInfo) => {
+  // 为事件目标添加机器人标识
+  if (event.target && event.target instanceof HTMLElement) {
+    event.target.setAttribute('data-robot-id', robot.id);
+    event.target.setAttribute('data-robot-type', 'robot');
+  }
+  
+  // 处理右键菜单 - handleContextMenu 内部会处理 preventDefault 和 stopPropagation
+  handleContextMenu(event, contextMenuManager, {
+    robotService: {
+      getRobotById: (id: string) => editor.value.getRobotById(id)
+    }
+  });
+};
 //#endregion
 
 //#region 机器人组操作
@@ -92,16 +118,6 @@ const toDeleteGroup = (id: RobotGroup['id']) =>
     onOk: () => editor.value.deleteRobotGroup(id),
   });
 
-const toEditGroup = (id: RobotGroup['id']) =>
-  Modal.confirm({
-    class: 'confirm',
-    title: t('您确定要编辑该机器人组吗？'),
-    content: t('请确保当前场景已经保存，否则将导致当前场景数据丢失。'),
-    centered: true,
-    cancelText: t('取消'),
-    okText: t('编辑'),
-    onOk: () => router.push({ name: '组编辑', params: { sid: props.sid, id } }),
-  });
 //#endregion
 
 //#region 机器人操作
@@ -137,6 +153,16 @@ const toRemoveRobots = () =>
   <RobotAddModal ref="refAddRobot" :token="token" />
   <RobotRegisterModal ref="refRegisterRobot" :token="token" />
   <RobotGroupRenameModal ref="refRenameGroup" :token="token" />
+  
+  <!-- 右键菜单 -->
+  <ContextMenu
+    :visible="contextMenuState.visible"
+    :x="contextMenuState.x"
+    :y="contextMenuState.y"
+    :menu-type="contextMenuState.menuType"
+    :robot-info="contextMenuState.robotInfo"
+    @close="handleContextMenuClose"
+  />
 
   <a-flex class="full" vertical>
     <a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
@@ -148,16 +174,6 @@ const toRemoveRobots = () =>
     <a-flex v-if="editable" class="mb-8" style="height: 32px" justify="space-between" align="center">
       <a-checkbox :checked="isAllSelected" @change="selectAll($event.target.checked)">{{ $t('全选') }}</a-checkbox>
       <a-space align="center">
-        <a-button
-          v-if="false"
-          class="icon-btn panel-btn"
-          size="small"
-          :title="$t('抢占控制权')"
-          @click="seizeRobots"
-          :disabled="!selected.size"
-        >
-          <i class="mask control" />
-        </a-button>
         <a-button
           class="icon-btn panel-btn"
           size="small"
@@ -241,6 +257,7 @@ const toRemoveRobots = () =>
               :class="{ 'ph-16': !editable, 'pl-12': editable, 'pr-8': editable, selected: item.id === current }"
               style="height: 36px"
               @click="emit('change', item.id)"
+              @contextmenu="handleRobotRightClick($event, item)"
             >
               <template v-if="editable" #actions>
                 <a-button
@@ -283,4 +300,14 @@ const toRemoveRobots = () =>
     visibility: visible;
   }
 }
+
+// 机器人列表项样式
+.ant-list-item {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
 </style>
diff --git a/src/services/context-menu/event-parser.ts b/src/services/context-menu/event-parser.ts
index db81e6e..39bdba8 100644
--- a/src/services/context-menu/event-parser.ts
+++ b/src/services/context-menu/event-parser.ts
@@ -165,7 +165,10 @@ export function parseEventData(event: MouseEvent | PointerEvent): ParsedEventDat
   }
 
   // 回退到DOM元素检查
-  if (target?.closest('.robot-item')) {
+  // 检查机器人类型 - 支持多种选择器
+  if (target?.closest('.robot-item') || 
+      target?.closest('.ant-list-item') && target.dataset.robotType === 'robot' ||
+      target?.classList.contains('ant-list-item') && target.dataset.robotType === 'robot') {
     return {
       type: 'robot',
       id: target.dataset.robotId || target.id,