try tray context on linux | 尝试在linux上实现托盘菜单 (#926)

* try tray context on linux

* 调整linux下托盘菜单的选项位置

* bug fix

* fix : linux tray contextMenu cant open

* prettier code

* 移除 显示主面板 的图标

src/electron/tray.js

@@ -9,79 +9,105 @@ export function createTray(win) {
       height: 20,
       width: 20,
     });
-  let tray = new Tray(icon);
-
-  tray.setToolTip('YesPlayMusic');
 
-  tray.on('click', () => {
+  let contextMenu = Menu.buildFromTemplate([
-    win.show();
+    //setContextMenu破坏了预期的click行为
-  });
+    //在linux下，鼠标左右键都会呼出contextMenu
-
+    //所以此处单独为linux添加一个 显示主面板 选项
-  tray.on('right-click', () => {
+    ...(process.platform === 'linux'
-    const contextMenu = Menu.buildFromTemplate([
+      ? [
-      {
+          {
-        label: '播放/暂停',
+            label: '显示主面板',
-        icon: nativeImage.createFromPath(
+            click: () => {
-          path.join(__static, 'img/icons/play.png')
+              win.show();
-        ),
+            },
-        click: () => {
+          },
-          win.webContents.send('play');
+          {
-        },
+            type: 'separator',
+          },
+        ]
+      : []),
+    {
+      label: '播放/暂停',
+      icon: nativeImage.createFromPath(
+        path.join(__static, 'img/icons/play.png')
+      ),
+      click: () => {
+        win.webContents.send('play');
       },
-      {
+    },
-        label: '上一首',
+    {
-        icon: nativeImage.createFromPath(
+      label: '上一首',
-          path.join(__static, 'img/icons/left.png')
+      icon: nativeImage.createFromPath(
-        ),
+        path.join(__static, 'img/icons/left.png')
-        accelerator: 'CmdOrCtrl+Left',
+      ),
-        click: () => {
+      accelerator: 'CmdOrCtrl+Left',
-          win.webContents.send('previous');
+      click: () => {
-        },
+        win.webContents.send('previous');
       },
-      {
+    },
-        label: '下一首',
+    {
-        icon: nativeImage.createFromPath(
+      label: '下一首',
-          path.join(__static, 'img/icons/right.png')
+      icon: nativeImage.createFromPath(
-        ),
+        path.join(__static, 'img/icons/right.png')
-        accelerator: 'CmdOrCtrl+Right',
+      ),
-        click: () => {
+      accelerator: 'CmdOrCtrl+Right',
-          win.webContents.send('next');
+      click: () => {
-        },
+        win.webContents.send('next');
       },
-      {
+    },
-        label: '循环播放',
+    {
-        icon: nativeImage.createFromPath(
+      label: '循环播放',
-          path.join(__static, 'img/icons/repeat.png')
+      icon: nativeImage.createFromPath(
-        ),
+        path.join(__static, 'img/icons/repeat.png')
-        accelerator: 'Alt+R',
+      ),
-        click: () => {
+      accelerator: 'Alt+R',
-          win.webContents.send('repeat');
+      click: () => {
-        },
+        win.webContents.send('repeat');
       },
-      {
+    },
-        label: '加入喜欢',
+    {
-        icon: nativeImage.createFromPath(
+      label: '加入喜欢',
-          path.join(__static, 'img/icons/like.png')
+      icon: nativeImage.createFromPath(
-        ),
+        path.join(__static, 'img/icons/like.png')
-        accelerator: 'CmdOrCtrl+L',
+      ),
-        click: () => {
+      accelerator: 'CmdOrCtrl+L',
-          win.webContents.send('like');
+      click: () => {
-        },
+        win.webContents.send('like');
       },
-      {
+    },
-        label: '退出',
+    {
-        icon: nativeImage.createFromPath(
+      label: '退出',
-          path.join(__static, 'img/icons/exit.png')
+      icon: nativeImage.createFromPath(
-        ),
+        path.join(__static, 'img/icons/exit.png')
-        accelerator: 'CmdOrCtrl+W',
+      ),
-        click: () => {
+      accelerator: 'CmdOrCtrl+W',
-          app.exit();
+      click: () => {
-        },
+        app.exit();
       },
-    ]);
+    },
+  ]);
+  let tray = new Tray(icon);
+  tray.setToolTip('YesPlayMusic');
+
+  if (process.platform === 'linux') {
+    //linux下托盘的实现方式比较迷惑
+    //right-click无法在linux下使用
+    //click在默认行为下会弹出一个contextMenu，里面的唯一选项才会调用click事件
+    //setContextMenu应该是目前唯一能在linux下使用托盘菜单api
+    //但是无法区分鼠标左右键
 
-    tray.popUpContextMenu(contextMenu);
+    tray.setContextMenu(contextMenu);
-  });
+  } else {
+    //windows and macos
+    tray.on('click', () => {
+      win.show();
+    });
+
+    tray.on('right-click', () => {
+      tray.popUpContextMenu(contextMenu);
+    });
+  }
 
   return tray;
 }