feat(electron): add minimize to tray option to settings page

src/background.js

@@ -43,7 +43,7 @@ class Background {
     this.createExpressApp();
 
     // init ipcMain
-    initIpcMain(this.window);
+    initIpcMain(this.window, this.store);
 
     // Scheme must be registered before the app is ready
     protocol.registerSchemesAsPrivileged([
@@ -103,11 +103,6 @@ class Background {
     // hide menu bar on Microsoft Windows and Linux
     this.window.setMenuBarVisibility(false);
 
-    // create tray only for Microsoft windows
-    if (process.platform === "win32") {
-      this.tray = createTray(this.window);
-    }
-
     if (process.env.WEBPACK_DEV_SERVER_URL) {
       // Load the url of the dev server if in development mode
       this.window.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
@@ -172,7 +167,11 @@ class Background {
     });
 
     this.window.on("minimize", () => {
-      if (process.platform === "win32") {
+      if (
+        ["win32", "linux"].includes(process.platform) &&
+        this.store.get("settings.minimizeToTray")
+      ) {
+        this.tray = createTray(this.window);
         this.window.hide();
       }
     });

src/electron/ipcMain.js

@@ -1,7 +1,7 @@
 import { app, ipcMain } from "electron";
 import match from "@njzy/unblockneteasemusic";
 
-export function initIpcMain(win) {
+export function initIpcMain(win, store) {
   ipcMain.on("unblock-music", (event, track) => {
     // 兼容 unblockneteasemusic 所使用的 api 字段
     track.alias = track.alia || [];
@@ -34,4 +34,8 @@ export function initIpcMain(win) {
   ipcMain.on("minimize", () => {
     win.minimize();
   });
+
+  ipcMain.on("settings", (event, options) => {
+    store.set("settings", options);
+  });
 }

src/electron/tray.js

@@ -14,11 +14,8 @@ export function createTray(win) {
   tray.setToolTip("YesPlayMusic");
 
   tray.on("click", () => {
-    if (win && win.isVisible()) {
+    win.show();
-      win.hide();
+    tray.destroy();
-    } else {
-      win.show();
-    }
   });
 
   tray.on("right-click", () => {

src/store/index.js

@@ -7,10 +7,15 @@ import { changeAppearance } from "@/utils/common";
 import Player from "@/utils/Player";
 // vuex 自定义插件
 import saveToLocalStorage from "./plugins/localStorage";
+import { getSendSettingsPlugin } from "./plugins/sendSettings";
 
 Vue.use(Vuex);
 
 let plugins = [saveToLocalStorage];
+if (process.env.IS_ELECTRON === true) {
+  let sendSettings = getSendSettingsPlugin();
+  plugins.push(sendSettings);
+}
 const options = {
   state,
   mutations,

src/store/initLocalStorage.js

@@ -13,6 +13,7 @@ let localStorage = {
     automaticallyCacheSongs: false,
     nyancatStyle: false,
     showLyricsTranslation: true,
+    minimizeToTray: false,
   },
   data: {
     user: {},

src/store/plugins/sendSettings.js

@@ -0,0 +1,13 @@
+export function getSendSettingsPlugin() {
+  const electron = window.require("electron");
+  const ipcRenderer = electron.ipcRenderer;
+  return (store) => {
+    store.subscribe((mutation, state) => {
+      console.log(mutation);
+      if (mutation.type !== "updateSettings") return;
+      ipcRenderer.send("settings", {
+        minimizeToTray: state.settings.minimizeToTray,
+      });
+    });
+  };
+}

src/utils/updateApp.js

@@ -9,6 +9,7 @@ const updateSetting = () => {
     automaticallyCacheSongs,
     nyancatStyle,
     showLyricsTranslation,
+    minimizeToTray,
   } = initLocalStorage.settings;
   const settings = {
     playlistCategories,
@@ -16,6 +17,7 @@ const updateSetting = () => {
     automaticallyCacheSongs,
     nyancatStyle,
     showLyricsTranslation,
+    minimizeToTray,
     ...parsedSettings,
   };
 

src/views/settings.vue

@@ -125,6 +125,22 @@
           </div>
         </div>
       </div>
+      <div class="item" v-if="isElectron && !isMac">
+        <div class="left">
+          <div class="title">最小化到托盘</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="minimize-to-tray"
+              id="minimize-to-tray"
+              v-model="minimizeToTray"
+            />
+            <label for="minimize-to-tray"></label>
+          </div>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.showGitHubIcon") }} </div>
@@ -215,6 +231,12 @@ export default {
   },
   computed: {
     ...mapState(["settings", "data"]),
+    isElectron() {
+      return process.env.IS_ELECTRON;
+    },
+    isMac() {
+      return /macintosh|mac os x/i.test(navigator.userAgent);
+    },
     lang: {
       get() {
         return this.settings.lang;
@@ -321,6 +343,17 @@ export default {
         });
       },
     },
+    minimizeToTray: {
+      get() {
+        return this.settings.minimizeToTray;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "minimizeToTray",
+          value,
+        });
+      },
+    },
   },
   methods: {
     logout() {