# ADR-003: 右键菜单实现方案

**状态**：已采纳  
**日期**：2025-01-28  
**决策者**：开发团队

## 上下文

需要实现连接树的右键菜单功能。Arco Design Vue Tree组件不直接支持右键菜单事件，需要选择实现方案。

## 考虑的选项

### 选项1：使用Arco Design Dropdown组件
- **优点**：
  - 使用官方组件，样式统一
  - 符合Arco Design设计规范
  - 维护成本低
  - 支持定位和边界处理
- **缺点**：
  - 需要手动处理右键事件和定位
  - 需要处理菜单显示/隐藏逻辑

### 选项2：自定义右键菜单组件
- **优点**：
  - 完全可控，可以自定义样式和行为
  - 可以精确控制所有细节
- **缺点**：
  - 需要自己实现定位、显示、隐藏等逻辑
  - 维护成本较高
  - 可能不符合Arco Design规范
  - 需要处理边界情况、层级管理等

### 选项3：使用第三方右键菜单库
- **优点**：
  - 功能完整，开箱即用
  - 可能有更多高级特性
- **缺点**：
  - 增加依赖
  - 可能不符合Arco Design设计风格
  - 需要适配和定制
  - 增加项目复杂度

## 决策

选择的方案：**选项1 - 使用Arco Design Dropdown组件**

## 理由

1. **符合设计规范**：使用Arco Design官方组件，保持设计一致性
2. **维护成本低**：使用官方组件，减少自定义代码
3. **功能完整**：Dropdown组件支持定位、边界处理等必要功能
4. **实现简单**：只需要处理右键事件和菜单显示逻辑
5. **避免依赖**：不引入第三方库，保持项目简洁

## 后果

### 正面影响
- 样式统一，符合Arco Design规范
- 维护成本低，使用官方组件
- 实现简单，开发效率高
- 不增加额外依赖

### 负面影响
- 需要手动处理右键事件和定位逻辑
- 需要处理菜单显示/隐藏状态管理

### 约束
- 使用Arco Design Dropdown组件
- 菜单定位使用鼠标事件坐标
- 需要处理边界情况（菜单超出视口时自动调整）
- 点击外部区域或ESC键时关闭菜单

## 相关决策

- [ADR-001: 事件系统设计](./ADR-001-事件系统设计.md) - 事件系统设计
- [设计文档/架构设计/右键菜单系统设计.md](../设计文档/架构设计/右键菜单系统设计.md) - 右键菜单系统设计

## 实现要点

1. **事件处理**：在Tree节点上监听`@contextmenu`事件
2. **菜单定位**：使用`Dropdown`组件的`position`属性，基于鼠标事件坐标
3. **状态管理**：使用`v-model:popup-visible`控制菜单显示/隐藏
4. **菜单项配置**：根据节点类型动态生成菜单项
5. **事件触发**：菜单项点击时触发相应的事件（使用已有事件系统）