86 lines
2.7 KiB
Markdown
86 lines
2.7 KiB
Markdown
# 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. **事件触发**：菜单项点击时触发相应的事件（使用已有事件系统）
|
||
|