react + electron 最小化到系统托盘 功能实现

实现 React + Electron 应用最小化到系统托盘需要以下几个步骤：

1. 引入 electron 模块

在 React 组件中引入 electron 模块，以便在渲染进程中调用 electron 的 API。

const electron = window.require('electron');

2. 创建系统托盘

在主进程中创建系统托盘，监听点击事件并执行相应的操作。在 Electron 应用中，主进程和渲染进程之间可以通过 ipc 通信。

const { app, Tray, Menu } = require('electron');

let tray = null;

app.on('ready', () => {
  tray = new Tray('path/to/tray/icon.png');
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Restore',
      click: () => {
        mainWindow.show();
      },
    },
    {
      label: 'Quit',
      click: () => {
        app.quit();
      },
    },
  ]);
  tray.setToolTip('My App');
  tray.setContextMenu(contextMenu);
  tray.on('click', () => {
    mainWindow.show();
  });
});

3. 实现最小化到系统托盘

在 React 组件中监听窗口关闭事件，将窗口最小化到系统托盘。

const handleWindowClose = (e) => {
  e.preventDefault();
  const win = electron.remote.getCurrentWindow();
  win.hide();
  tray.displayBalloon({
    title: 'My App',
    content: 'The app has been minimized to the system tray.',
  });
};

// ...

<IconButton onClick={handleWindowClose}>
  <CloseIcon />
</IconButton>

注意：在 Windows 系统中，需要调用 Tray 实例的 `displayBalloon()` 方法才能显示托盘提示。在 macOS 和 Linux 系统中，系统会自动显示通知。