Electron-Egg 顶部标题栏点击事件设置指南

在 Electron 中，顶部标题栏是由操作系统的窗口管理器控制的，不属于 Electron 应用程序的范畴，因此无法直接设置点击事件。

如果你希望在标题栏上添加自定义的按钮或交互，可以考虑使用 Electron 的自定义窗口样式来实现。通过设置窗口样式为 'frameless'，可以隐藏系统默认的标题栏，然后你可以在应用程序中自己构建一个自定义标题栏，并为其添加点击事件。

具体的实现步骤如下：

在创建窗口的时候，将窗口样式设置为 'frameless'，示例代码如下：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 设置窗口样式为 'frameless'
  });

  // 加载应用的 HTML 文件
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

在应用的 HTML 文件中，构建自定义的标题栏，并为其添加点击事件，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron App</title>
    <style>
      /* 自定义标题栏样式 */
      .title-bar {
        height: 30px;
        background-color: #333;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
      }

      /* 标题栏按钮样式 */
      .title-bar-button {
        cursor: pointer;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 自定义标题栏 -->
    <div class="title-bar">
      <div class="title">Electron App</div>
      <div class="title-bar-button" id="close-button">X</div>
    </div>

    <script>
      // 获取关闭按钮元素
      const closeButton = document.getElementById('close-button');

      // 为关闭按钮添加点击事件
      closeButton.addEventListener('click', () => {
        // 在点击事件中执行关闭窗口的操作
        const { remote } = require('electron');
        const win = remote.getCurrentWindow();
        win.close();
      });
    </script>
  </body>
</html>

通过上述方式，你可以在 Electron 应用程序中实现自定义的标题栏，并为其添加点击事件。