web-map/src/services/context-menu/README.md

右键菜单服务 - 模块化架构

概述

右键菜单服务已重构为模块化架构，按业务逻辑分离到不同的文件中，提高了代码的可维护性和可扩展性。

文件夹结构

src/services/context-menu/
├── index.ts                    # 主入口文件，导出所有服务
├── state-manager.ts           # 核心状态管理
├── event-parser.ts            # 事件解析器
├── storage-menu.service.ts    # 库位相关业务逻辑
├── robot-menu.service.ts      # 机器人相关业务逻辑
├── menu-config.service.ts     # 菜单配置服务
└── README.md                  # 说明文档

组件结构

src/components/context-menu/
├── index.ts                   # 组件入口文件
├── context-menu.vue          # 主菜单组件
├── storage-menu.vue          # 库位菜单组件
├── robot-menu.vue            # 机器人菜单组件
└── default-menu.vue          # 默认菜单组件

核心模块说明

1. 状态管理 (state-manager.ts)

• 提供纯函数和状态管理工具
• 避免单例模式的问题
• 支持订阅/通知机制

2. 事件解析 (event-parser.ts)

• 解析鼠标事件和pen数据
• 提取事件信息
• 纯函数，无副作用

3. 库位菜单服务 (storage-menu.service.ts)

• 处理库位相关的菜单逻辑
• 库位状态检查
• 库位操作处理

4. 机器人菜单服务 (robot-menu.service.ts)

• 处理机器人相关的菜单逻辑
• 机器人状态管理
• 机器人操作处理

5. 菜单配置服务 (menu-config.service.ts)

• 统一管理不同业务类型的菜单配置
• 提供统一的菜单配置入口

使用方式

基本使用

import { createContextMenuManager, handleContextMenu, handleContextMenuFromPenData } from '@/services/context-menu';

// 创建状态管理器
const manager = createContextMenuManager();

// 处理右键事件
handleContextMenu(event, manager, {
  storageLocationService: storageService,
  robotService: robotService,
});

组件使用

<template>
  <ContextMenu
    :visible="menuVisible"
    :x="menuX"
    :y="menuY"
    :menu-type="menuType"
    :storage-locations="storageLocations"
    :robot-info="robotInfo"
    @close="handleClose"
    @action-complete="handleActionComplete"
  />
</template>

<script setup>
import { ContextMenu } from '@/components/context-menu';
</script>

扩展新业务类型

1. 添加新的业务服务

在 src/services/context-menu/ 下创建新的服务文件，例如 point-menu.service.ts：

export interface PointMenuConfig {
  menuType: 'point' | 'default';
  pointInfo?: PointInfo;
}

export function getPointMenuConfig(data: ParsedEventData): PointMenuConfig {
  // 实现点位菜单逻辑
}

2. 添加新的组件

在 src/components/context-menu/ 下创建新的组件文件，例如 point-menu.vue：

<template>
  <div class="point-menu">
    <!-- 点位菜单内容 -->
  </div>
</template>

<script setup lang="ts">
// 实现点位菜单组件
</script>

3. 更新菜单配置服务

在 menu-config.service.ts 中添加新的业务类型处理：

case 'point':
  return getPointMenuConfig(data);

4. 更新主菜单组件

在 context-menu.vue 中添加新的组件：

<PointMenu
  v-else-if="menuType === 'point' && pointInfo"
  :point-info="pointInfo"
  @action-complete="handleActionComplete"
/>

向后兼容

原有的 context-menu.service.ts 文件仍然保留，作为向后兼容的入口，重新导出新的模块化服务。现有代码无需修改即可继续使用。

优势

1. 模块化: 按业务逻辑分离，代码更清晰
2. 可维护性: 每个模块职责单一，易于维护
3. 可扩展性: 新增业务类型只需添加对应模块
4. 可测试性: 每个模块可独立测试
5. 向后兼容: 保持现有API不变