一个不错的组合是将无框 Electron 窗口与 QBar 组件一起使用。原因如下。

¥A nice combo is to use frameless Electron window along with QBar component. Here’s why.

主线程(Main thread)

¥Main thread

设置无框窗口(Setting frameless window)

¥Setting frameless window

首先，将 @electron/remote 依赖安装到你的应用中。

¥Firstly, install the @electron/remote dependency into your app.

$ yarn add @electron/remote

然后，在你的 src-electron/main-process/electron-main.js 文件中，编辑以下几行：

¥Then, in your src-electron/main-process/electron-main.js file, make some edits to these lines:

import { app, BrowserWindow, nativeTheme } from 'electron'
import { initialize, enable } from '@electron/remote/main' // <-- add this
import path from 'path'

initialize() // <-- add this

// ...

mainWindow = new BrowserWindow({
  width: 1000,
  height: 600,
  useContentSize: true,
  frame: false // <-- add this
  webPreferences: {
    sandbox: false // <-- to be able to import @electron/remote in preload script
    // ...
  }
})

enable(mainWindow.webContents) // <-- add this

mainWindow.loadURL(process.env.APP_URL)

// ...

请注意，我们还需要显式启用远程模块。我们将在预加载脚本中使用它，为渲染线程提供窗口最小化/最大化/关闭功能。

¥Notice that we need to explicitly enable the remote module too. We’ll be using it in the preload script to provide the renderer thread with the window minimize/maximize/close functionality.

预加载脚本(The preload script)

¥The preload script

由于我们无法在渲染线程中直接访问 Electron，因此我们需要通过 Electron 预加载脚本 (src-electron/main-process/electron-preload.js) 提供必要的功能。所以我们将其编辑为：

¥Since we can’t directly access Electron from within the renderer thread, we’ll need to provide the necessary functionality through the electron preload script (src-electron/main-process/electron-preload.js). So we edit it to:

import { contextBridge } from 'electron'
import { BrowserWindow } from '@electron/remote'

contextBridge.exposeInMainWorld('myWindowAPI', {
  minimize () {
    BrowserWindow.getFocusedWindow().minimize()
  },

  toggleMaximize () {
    const win = BrowserWindow.getFocusedWindow()

    if (win.isMaximized()) {
      win.unmaximize()
    } else {
      win.maximize()
    }
  },

  close () {
    BrowserWindow.getFocusedWindow().close()
  }
})

渲染线程(Renderer thread)

¥Renderer thread

处理窗口拖动(Handling window dragging)

¥Handling window dragging

当我们使用无框窗口（仅限无框！）时，我们还需要一种方式让用户能够在屏幕上移动应用窗口。你可以使用 q-electron-drag 和 q-electron-drag--exception Quasar CSS 辅助类来实现此目的。

¥When we use a frameless window (only frameless!) we also need a way for the user to be able to move the app window around the screen. You can use q-electron-drag and q-electron-drag--exception Quasar CSS helper classes for this.

<q-bar class="q-electron-drag">
  ...
</q-bar>

它的作用是，允许用户在屏幕上点击、按住并同时拖动鼠标时拖动应用窗口。

¥What this does is that it allows the user to drag the app window when clicking, holding and simultaneously dragging the mouse on the screen.

虽然这是一个很好的功能，但你还必须考虑到你需要指定一些例外情况。你的自定义状态栏中可能存在你不希望触发窗口拖动的元素。默认情况下，QBtn 不受此行为的影响（无需为此执行任何操作）。如果你想为具有 q-electron-drag 类的元素的任何子元素添加例外，你可以将 q-electron-drag--exception CSS 类附加到它们。

¥While this is a good feature, you must also take into account that you’ll need to specify some exceptions. There may be elements in your custom statusbar that you do not want to trigger the window dragging. By default, QBtn is excepted from this behavior (no need to do anything for this). Should you want to add exceptions to any children of the element having q-electron-drag class, you can attach the q-electron-drag--exception CSS class to them.

向图标添加例外的示例：

¥Example of adding an exception to an icon:

<q-bar class="q-electron-drag">
  <q-icon name="map" class="q-electron-drag--exception" />

  <div>My title</div>
</q-bar>

最小化、最大化和关闭应用(Minimize, maximize and close app)

¥Minimize, maximize and close app

在上面的例子中，请注意，我们将 q-electron-drag 添加到了 QBar，并且还通过使用注入的 window.myWindowAPI 对象（来自 Electron 预加载脚本）为最小化、最大化和关闭应用按钮添加了处理程序。

¥In the example above, notice that we add q-electron-drag to our QBar and we also add handlers for the minimize, maximize and close app buttons by using the injected window.myWindowAPI Object (from the Electron preload script).

// We guard the Electron API calls, but this
// is only needed if we build same app with other
// Quasar Modes as well (SPA/PWA/Cordova/SSR...)

export default {
  setup () {
    // we rely upon
    function minimize () {
      if (process.env.MODE === 'electron') {
        window.myWindowAPI.minimize()
      }
    }

    function toggleMaximize () {
      if (process.env.MODE === 'electron') {
        window.myWindowAPI.toggleMaximize()
      }
    }

    function closeApp () {
      if (process.env.MODE === 'electron') {
        window.myWindowAPI.close()
      }
    }

    return { minimize, toggleMaximize, closeApp }
  }
}