✨ feat: 添加快捷键和关闭提示以及最小化功能

app.js

@@ -1,8 +1,9 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, Tray, Menu, globalShortcut } = require('electron')
 const path = require('path')
 
+let mainWin = null
 function createWindow() {
-  const win = new BrowserWindow({
+  mainWin = new BrowserWindow({
     width: 1280,
     height: 900,
     frame: false,
@@ -11,18 +12,63 @@ function createWindow() {
       preload: path.join(__dirname, '/electron/preload.js'),
     },
   })
-  win.setMinimumSize(1280, 900);
-
-  if (process.env.NODE_ENV === 'dev') {
+  const win = mainWin
+  win.setMinimumSize(1280, 900)
+  if (process.env.NODE_ENV === 'development') {
     win.webContents.openDevTools({ mode: 'detach' })
     win.loadURL('http://localhost:4678/')
   } else {
     win.loadURL(`file://${__dirname}/dist/index.html`)
   }
+  const tray = new Tray(path.join(__dirname, 'public/icon.png'))
+  tray.setTitle('Alger Music')
+  tray.setToolTip('Alger Music')
+  tray.setContextMenu(
+    Menu.buildFromTemplate([
+      {
+        label: '显示',
+        click: () => {
+          win.show()
+        },
+      },
+      {
+        label: '退出',
+        click: () => {
+          win.destroy()
+        },
+      },
+    ])
+  )
+  tray.click = () => {
+    win.show()
+  }
+
+  // 快捷键显示 隐藏
+  
 }
 
 app.whenReady().then(createWindow)
 
+app.on('ready',()=>{
+  globalShortcut.register('CommandOrControl+Alt+Shift+M', () => {
+    if (mainWin.isVisible()) {
+      mainWin.hide()
+    } else {
+      mainWin.show()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('will-quit', () => {
+  globalShortcut.unregisterAll()
+})
+
 ipcMain.on('minimize-window', (event) => {
   const win = BrowserWindow.fromWebContents(event.sender)
   win.minimize()
@@ -39,7 +85,7 @@ ipcMain.on('maximize-window', (event) => {
 
 ipcMain.on('close-window', (event) => {
   const win = BrowserWindow.fromWebContents(event.sender)
-  win.close()
+  win.destroy()
 })
 
 ipcMain.on('drag-start', (event, data) => {
@@ -47,4 +93,9 @@ ipcMain.on('drag-start', (event, data) => {
   win.webContents.beginFrameSubscription((frameBuffer) => {
     event.reply('frame-buffer', frameBuffer)
   })
-})
+})
+
+ipcMain.on('mini-tray', (event) => {
+  const win = BrowserWindow.fromWebContents(event.sender)
+  win.hide()
+})

electron/preload.js

@@ -5,4 +5,5 @@ contextBridge.exposeInMainWorld('electronAPI', {
   maximize: () => ipcRenderer.send('maximize-window'),
   close: () => ipcRenderer.send('close-window'),
   dragStart: (data) => ipcRenderer.send('drag-start', data),
+  miniTray: () => ipcRenderer.send('mini-tray'),
 })

package.json

@@ -7,7 +7,7 @@
     "build": "vite build",
     "serve": "vite preview",
     "es": "vite && electron .",
-    "start": "set NODE_ENV=production && electron .",
+    "start": "set NODE_ENV=development&&electron .",
     "e:b": "electron-builder --config ./electron.config.json",
     "eb": "vite build && e:b"
   },

src/App.vue

@@ -1,22 +1,24 @@
-<template>
-  <div class="app">
-    <n-config-provider :theme="darkTheme">
-      <router-view></router-view>
-    </n-config-provider>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { darkTheme } from 'naive-ui'
-
-
-</script>
-
-<style lang="scss" scoped >
-div {
-  box-sizing: border-box;
-}
-.app {
-  user-select: none;
-}
-</style>
+<template>
+  <div class="app">
+    <n-config-provider :theme="darkTheme">
+      <n-dialog-provider>
+        <router-view></router-view>
+      </n-dialog-provider>
+    </n-config-provider>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { darkTheme } from 'naive-ui'
+
+
+</script>
+
+<style lang="scss" scoped >
+div {
+  box-sizing: border-box;
+}
+.app {
+  user-select: none;
+}
+</style>

src/layout/components/TitleBar.vue

@@ -16,6 +16,9 @@
 </template>
 
 <script setup lang="ts">
+import { useDialog } from 'naive-ui'
+
+const dialog = useDialog()
 
 const minimize = () => {
   window.electronAPI.minimize()
@@ -26,7 +29,18 @@ const maximize = () => {
 }
 
 const close = () => {
-  window.electronAPI.close()
+  dialog.warning({
+    title: '提示',
+    content: '确定要退出吗？',
+    positiveText: '最小化',
+    negativeText: '关闭',
+    onPositiveClick: () => {
+      window.electronAPI.miniTray()
+    },
+    onNegativeClick: () => {
+      window.electronAPI.close()
+    }
+  })
 }
 
 const drag = (event: HTMLElement) => {