feat: 添加获取机器人信息和菜单配置的功能，增强机器人菜单服务的可用性和扩展性
This commit is contained in:
parent
13c1a689b2
commit
1dbb3888d5
@ -1,164 +0,0 @@
|
||||
# 右键菜单服务 - 模块化架构
|
||||
|
||||
## 概述
|
||||
|
||||
右键菜单服务已重构为模块化架构，按业务逻辑分离到不同的文件中，提高了代码的可维护性和可扩展性。
|
||||
|
||||
## 文件夹结构
|
||||
|
||||
```
|
||||
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不变
|
||||
@ -291,3 +291,27 @@ export function getRobotActionIcon(action: RobotAction): string {
|
||||
|
||||
return iconMap[action] || '⚙️';
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取机器人信息
|
||||
* @param robotId 机器人ID
|
||||
* @returns 机器人信息
|
||||
*/
|
||||
export function getRobotInfo(robotId: string): RobotInfo | null {
|
||||
// 这里应该从实际的机器人服务中获取信息
|
||||
// 目前返回null，实际使用时需要对接真实的机器人数据源
|
||||
console.warn('getRobotInfo: 需要对接真实的机器人数据源', robotId);
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取机器人菜单配置
|
||||
* @param robotInfo 机器人信息
|
||||
* @returns 机器人菜单配置
|
||||
*/
|
||||
export function getRobotMenuConfig(robotInfo: RobotInfo): RobotMenuConfig {
|
||||
return {
|
||||
menuType: 'robot',
|
||||
robotInfo,
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user