165 lines
3.9 KiB
Markdown
165 lines
3.9 KiB
Markdown
|
# 右键菜单服务 - 模块化架构
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
右键菜单服务已重构为模块化架构，按业务逻辑分离到不同的文件中，提高了代码的可维护性和可扩展性。
|
|||
|
|
|
|||
|
|
## 文件夹结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
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)
|
|||
|
|
|
|||
|
|
- 统一管理不同业务类型的菜单配置
|
|||
|
|
- 提供统一的菜单配置入口
|
|||
|
|
|
|||
|
|
## 使用方式
|
|||
|
|
|
|||
|
|
### 基本使用
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { createContextMenuManager, handleContextMenu, handleContextMenuFromPenData } from '@/services/context-menu';
|
|||
|
|
|
|||
|
|
// 创建状态管理器
|
|||
|
|
const manager = createContextMenuManager();
|
|||
|
|
|
|||
|
|
// 处理右键事件
|
|||
|
|
handleContextMenu(event, manager, {
|
|||
|
|
storageLocationService: storageService,
|
|||
|
|
robotService: robotService,
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 组件使用
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<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`：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
export interface PointMenuConfig {
|
|||
|
|
menuType: 'point' | 'default';
|
|||
|
|
pointInfo?: PointInfo;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function getPointMenuConfig(data: ParsedEventData): PointMenuConfig {
|
|||
|
|
// 实现点位菜单逻辑
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 添加新的组件
|
|||
|
|
|
|||
|
|
在 `src/components/context-menu/` 下创建新的组件文件，例如 `point-menu.vue`：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<div class="point-menu">
|
|||
|
|
<!-- 点位菜单内容 -->
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
// 实现点位菜单组件
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 更新菜单配置服务
|
|||
|
|
|
|||
|
|
在 `menu-config.service.ts` 中添加新的业务类型处理：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
case 'point':
|
|||
|
|
return getPointMenuConfig(data);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 更新主菜单组件
|
|||
|
|
|
|||
|
|
在 `context-menu.vue` 中添加新的组件：
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<PointMenu
|
|||
|
|
v-else-if="menuType === 'point' && pointInfo"
|
|||
|
|
:point-info="pointInfo"
|
|||
|
|
@action-complete="handleActionComplete"
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 向后兼容
|
|||
|
|
|
|||
|
|
原有的 `context-menu.service.ts` 文件仍然保留，作为向后兼容的入口，重新导出新的模块化服务。现有代码无需修改即可继续使用。
|
|||
|
|
|
|||
|
|
## 优势
|
|||
|
|
|
|||
|
|
1. **模块化**: 按业务逻辑分离，代码更清晰
|
|||
|
|
2. **可维护性**: 每个模块职责单一，易于维护
|
|||
|
|
3. **可扩展性**: 新增业务类型只需添加对应模块
|
|||
|
|
4. **可测试性**: 每个模块可独立测试
|
|||
|
|
5. **向后兼容**: 保持现有API不变
|