快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
请生成一个实战项目级别的上下文菜单管理器，模拟一个在线思维导图节点的右键菜单。功能要求：1、菜单内容根据点击的节点类型动态变化：根节点、分支节点、叶子节点显示不同的菜单项（如‘添加子节点’、‘删除节点’、‘编辑文本’、‘更改颜色’）。2、菜单项点击后，需要执行具体的业务函数模拟操作，例如点击‘更改颜色’会弹出一个颜色选择器，选择后更新节点背景色。3、菜单样式需精美，有动画弹出效果。4、考虑边界情况，如菜单不能超出视窗边界。5、代码结构清晰，将菜单配置、业务逻辑和视图分离。请使用React框架实现。- 点击'项目生成'按钮，等待项目生成完整后预览效果
今天想和大家分享一个实战项目：在React中实现一个动态节点右键菜单管理器（ContextMenuManager）。这个组件特别适合用在思维导图、流程图这类工具中，让用户能通过右键菜单快速操作节点。
需求分析首先明确核心需求：右键点击不同节点类型（根节点、分支节点、叶子节点）时，需要显示不同的菜单项。比如根节点可能需要"添加子节点"，而叶子节点可能需要"删除节点"和"更改颜色"等功能。
架构设计为了实现这个功能，我决定采用三层架构：
- 菜单配置层：定义不同节点类型对应的菜单项
- 业务逻辑层：处理菜单项点击后的具体操作
- 视图层：负责菜单的渲染和动画效果
- 实现步骤3.1 首先创建菜单配置对象，为每种节点类型定义对应的菜单项：
const menuConfig = { root: [ { label: "添加子节点", action: "addChild" }, { label: "编辑文本", action: "editText" } ], branch: [ { label: "添加子节点", action: "addChild" }, { label: "删除节点", action: "delete" }, { label: "编辑文本", action: "editText" } ], leaf: [ { label: "删除节点", action: "delete" }, { label: "编辑文本", action: "editText" }, { label: "更改颜色", action: "changeColor" } ] }3.2 然后实现业务逻辑处理函数：
const handleMenuAction = (action, node) => { switch(action) { case "addChild": // 添加子节点逻辑 break; case "delete": // 删除节点逻辑 break; case "editText": // 弹出文本编辑框 break; case "changeColor": // 显示颜色选择器并更新节点颜色 break; } }3.3 视图层实现要点：
- 使用React Portal将菜单渲染到body下
- 添加CSS过渡动画实现平滑弹出效果
- 计算菜单位置，确保不会超出视窗边界
- 添加点击外部关闭菜单的功能
- 边界情况处理4.1 菜单位置计算：
const calculatePosition = (event, menuWidth, menuHeight) => { const { clientX, clientY } = event; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = clientX; let top = clientY; // 防止右侧超出 if (clientX + menuWidth > viewportWidth) { left = viewportWidth - menuWidth; } // 防止底部超出 if (clientY + menuHeight > viewportHeight) { top = viewportHeight - menuHeight; } return { left, top }; }4.2 动画效果实现： 使用CSS transition和transform实现平滑的缩放动画：
.context-menu { transform-origin: top left; transform: scale(0.9); opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease; } .context-menu.visible { transform: scale(1); opacity: 1; }- 项目结构优化为了保持代码整洁，我将项目分为以下模块：
- components/ContextMenu：菜单UI组件
- hooks/useContextMenu：菜单状态管理hook
- utils/menuConfig：菜单配置
- utils/positionCalculator：位置计算工具
- 实际应用效果在思维导图项目中集成这个右键菜单后，用户体验得到了显著提升。用户可以通过右键菜单快速完成节点操作，而不用去工具栏寻找对应功能。
这个项目让我深刻体会到组件化开发的优势。通过将菜单配置、业务逻辑和视图分离，代码不仅更易维护，也更容易扩展。未来我计划添加以下功能：
- 支持自定义菜单图标
- 添加菜单项禁用状态
- 支持多级子菜单
如果你也想快速体验这类项目开发，可以试试InsCode(快马)平台。它内置了React开发环境，可以直接在浏览器中编写和预览代码，还能一键部署分享给他人。我实际操作发现，它的实时预览功能特别适合调试UI组件，省去了本地搭建环境的麻烦。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
请生成一个实战项目级别的上下文菜单管理器，模拟一个在线思维导图节点的右键菜单。功能要求：1、菜单内容根据点击的节点类型动态变化：根节点、分支节点、叶子节点显示不同的菜单项（如‘添加子节点’、‘删除节点’、‘编辑文本’、‘更改颜色’）。2、菜单项点击后，需要执行具体的业务函数模拟操作，例如点击‘更改颜色’会弹出一个颜色选择器，选择后更新节点背景色。3、菜单样式需精美，有动画弹出效果。4、考虑边界情况，如菜单不能超出视窗边界。5、代码结构清晰，将菜单配置、业务逻辑和视图分离。请使用React框架实现。- 点击'项目生成'按钮，等待项目生成完整后预览效果
