绝尘
a5d30684ed
- 拆分 FileSystem.vue 为模块化组件架构 - 新增 Markdown Mermaid 图表渲染支持 - 新增 180+ 编程语言代码高亮 - 修复编辑/预览模式切换渲染问题 - 优化亮色/暗色模式主题适配 - 新增 TypeScript 类型定义
2.7 KiB
2.7 KiB
ADR-003: 右键菜单实现方案
状态：已采纳
日期：2026-01-28
决策者：开发团队
上下文
需要实现连接树的右键菜单功能。Arco Design Vue Tree组件不直接支持右键菜单事件，需要选择实现方案。
考虑的选项
选项1：使用Arco Design Dropdown组件
- 优点：
- 使用官方组件，样式统一
- 符合Arco Design设计规范
- 维护成本低
- 支持定位和边界处理
- 缺点：
- 需要手动处理右键事件和定位
- 需要处理菜单显示/隐藏逻辑
选项2：自定义右键菜单组件
- 优点：
- 完全可控，可以自定义样式和行为
- 可以精确控制所有细节
- 缺点：
- 需要自己实现定位、显示、隐藏等逻辑
- 维护成本较高
- 可能不符合Arco Design规范
- 需要处理边界情况、层级管理等
选项3：使用第三方右键菜单库
- 优点：
- 功能完整，开箱即用
- 可能有更多高级特性
- 缺点：
- 增加依赖
- 可能不符合Arco Design设计风格
- 需要适配和定制
- 增加项目复杂度
决策
选择的方案：选项1 - 使用Arco Design Dropdown组件
理由
- 符合设计规范：使用Arco Design官方组件，保持设计一致性
- 维护成本低：使用官方组件，减少自定义代码
- 功能完整：Dropdown组件支持定位、边界处理等必要功能
- 实现简单：只需要处理右键事件和菜单显示逻辑
- 避免依赖：不引入第三方库，保持项目简洁
后果
正面影响
- 样式统一，符合Arco Design规范
- 维护成本低，使用官方组件
- 实现简单，开发效率高
- 不增加额外依赖
负面影响
- 需要手动处理右键事件和定位逻辑
- 需要处理菜单显示/隐藏状态管理
约束
- 使用Arco Design Dropdown组件
- 菜单定位使用鼠标事件坐标
- 需要处理边界情况（菜单超出视口时自动调整）
- 点击外部区域或ESC键时关闭菜单
相关决策
- ADR-001: 事件系统设计 - 事件系统设计
- 设计文档/架构设计/右键菜单系统设计.md - 右键菜单系统设计
实现要点
- 事件处理：在Tree节点上监听
@contextmenu事件 - 菜单定位：使用
Dropdown组件的position属性，基于鼠标事件坐标 - 状态管理：使用
v-model:popup-visible控制菜单显示/隐藏 - 菜单项配置：根据节点类型动态生成菜单项
- 事件触发：菜单项点击时触发相应的事件（使用已有事件系统）