前言做到这里时我已经把桌宠窗口、模型渲染和鼠标跟随都跑起来了。接下来很自然就要添加功能了毕竟桌宠就一个图片和加载模型太low了甚至都没有退出按键。这个窗口没有标题栏也没有传统工具栏那用户怎么操作它比如- 切换模型- 退出程序未来还需要增加新功能。这些操作总不能都靠快捷键。所以我很快就决定把这类入口统一放进右键菜单。为什么右键菜单是桌宠最适合的入口桌宠窗口本身是轻量、悬浮、透明的它不适合塞太多显式按钮不然很快就会破坏“挂件感”。所以我当时给自己定的交互原则是- 主窗口尽量干净- 常用功能收进右键菜单- 打开复杂功能时再弹出独立窗口这样既不影响桌宠本身的观感也给后面扩功能留了足够空间。这一步我第一次彻底把 IPC 用顺了右键菜单这个功能虽然不大但它特别适合拿来把 Electron 的前后分工跑通。我当时做法是这样的1. 渲染层拦截默认右键事件2. 渲染层通过 ipcRenderer.send(show-context-menu) 通知主进程// 监听右键菜单事件替换默认右键菜单 window.addEventListener(contextmenu, (e) { // 阻止浏览器默认右键菜单 e.preventDefault(); // 鼠标未穿透时通知主进程显示自定义右键菜单 if (lastIgnoreState false) { ipcRenderer.send(show-context-menu); } });3. 主进程监听这个消息4. 主进程用 Menu.buildFromTemplate() 构建菜单5. 点击菜单项后再去调用窗口或会话逻辑function init() { ipcMain.on(show-context-menu, async (event) { const template [ { label: 切换 Live2D 模型, click: () { ChangeRoleUi.create(); }, }, { type: separator }, { label: 退出程序, click: () { app.quit(); }, }, ]; // 把你的 JS 数组转换成系统能识别的菜单对象。 const menu Menu.buildFromTemplate(template); // 指令下达系统就在鼠标点击的位置弹出了这个菜单。 menu.popup({ window: BrowserWindow.fromWebContents(event.sender) }); }); }我在菜单里先放了哪些操作第一版我没有放太多主要是最常用的几项- 切换 Live2D 模型- 退出程序我当时的想法很简单菜单是主窗口的“控制中枢”。所以先放高频操作后面再继续加。右键菜单做完后我对项目结构更有底了这一步让我非常直观地感受到Electron 里很多功能其实都是同一种套路- 页面感知用户动作- 页面通知主进程- 主进程调用桌面能力等我把这件事跑顺以后再去做- 拖动窗口- 打开子窗口- 保存配置整个思路就明显更流畅了。本篇小结这一篇本质上是在解决一个用户体验的的问题没有标题栏的悬浮窗口到底怎么让用户操作。我的答案就是主窗口保持干净把操作入口集中到右键菜单再通过 IPC 把渲染层和主进程串起来。