MacOS环境下Electron项目如何自定义工具栏实现NSToolbar效果

以下是三种常用的实现方案，可根据自身需求选择：

方案1：使用 Electron 原生 titleBarOverlay 配置 + 前端DOM模拟工具栏 #

这是Electron官方推荐的跨平台兼容方案，实现逻辑如下：

• 创建窗口时设置titleBarStyle: 'hidden'，同时开启titleBarOverlay适配Mac系统自带的交通灯控制按钮位置，参考配置：

const { BrowserWindow } = require('electron')
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    height: 44 // 和Mac系统默认工具栏高度保持一致
  },
  // 其余窗口配置
})

• 前端页面顶部渲染高度为44px的工具栏区域，左侧预留72px的安全边距避让交通灯按钮，右侧可自由插入自定义按钮、搜索框、标签页等组件。工具栏容器添加CSS属性-webkit-app-region: drag实现窗口拖拽效果，所有可交互元素（按钮、输入框等）单独添加-webkit-app-region: no-drag保证点击正常响应。
• 优缺点：实现简单无额外依赖，Electron 14及以上版本原生支持；但本质是Web模拟效果，不是系统原生NSToolbar，全屏状态下不会和系统菜单栏自动融合，毛玻璃等视觉效果需要手动用CSS模拟，和原生体验有细微差异。

方案2：调用原生NSToolbar API实现完全原生效果 #

如果需要和Swift开发的NSToolbar效果完全一致，可以通过Electron的原生模块调用Mac AppKit的NSToolbar接口：

• 可直接使用封装好的npm包electron-nstoolbar，已经封装了NSToolbar的全部原生能力，支持自定义item、分组、切换展示模式、自动适配系统主题等特性，示例代码：

const { NSToolbar } = require('electron-nstoolbar')
const customToolbar = new NSToolbar(mainWindow, {
  identifier: 'com.your.app.toolbar', // 唯一标识
  items: [
    {
      identifier: 'backBtn',
      icon: 'static/icon/back.png',
      label: '返回',
      action: () => mainWindow.webContents.goBack()
    },
    // 其余自定义按钮配置
  ],
  displayMode: 'iconAndLabel' // 展示模式：仅图标/仅文字/图标+文字
})

• 优缺点：完全原生系统效果，支持所有NSToolbar特性，包括全屏时和系统菜单栏融合、原生毛玻璃效果、自动跟随系统外观切换；缺点是仅支持Mac系统，需要做不同Electron版本的适配测试。

方案3：隐藏原生标题栏完全自定义 #

如果需要全平台UI效果完全统一，可以直接关闭所有原生标题栏元素，自行实现完整的工具栏和窗口控制逻辑：

• 创建窗口时设置frame: false，完全关闭原生窗口边框和标题栏
• 前端自行实现交通灯控制按钮、页面标题、自定义工具栏所有元素，自己编码处理窗口关闭、最小化、最大化、拖拽等交互逻辑
• 优缺点：支持高度自定义，全平台效果完全一致；缺点是需要自己实现所有系统交互逻辑，和Mac原生系统的交互习惯差异较大。

方案选择建议 #

• 需要跨平台兼容、希望控制开发成本，优先选方案1
• 仅针对Mac平台发布、要求完全贴合原生系统体验，优先选方案2
• 需要全平台UI完全统一、不需要贴合Mac原生交互习惯，优先选方案3

内容的提问来源于stack exchange，提问作者Vinicius Bazanella