Add 快捷键控制 resolve #29

Author: sunzongzheng

src/main/index.js

@@ -1,4 +1,4 @@
-import {app} from 'electron'
+import {app, globalShortcut} from 'electron'
 import initTray from './tray'
 import initUpdater from './updater'
 import initWindow from './window'
@@ -41,6 +41,11 @@ app.on('window-all-closed', () => {
     }
 })
 
+app.on('will-quit', () => {
+    // 清空所有快捷键
+    globalShortcut.unregisterAll()
+})
+
 app.on('activate', () => {
     if (mainWindow === null) {
         createWindow()

src/main/menu.js

@@ -1,32 +1,69 @@
-import {Menu} from 'electron'
+import {Menu, ipcMain, globalShortcut} from 'electron'
 
-export default function initMenu() {
-    const template = [
-        {
-            label: 'Music',
-            submenu: [
-                {
-                    label: '关于',
-                    click() {
-                        require('electron').shell.openExternal('https://github.com/sunzongzheng/music')
-                    }
+const template = [
+    {
+        label: 'Music',
+        submenu: [
+            {
+                label: '关于',
+                click() {
+                    require('electron').shell.openExternal('https://github.com/sunzongzheng/music')
                 }
-            ]
-        },
-        {
-            label: '编辑',
-            submenu: [
-                {role: 'undo', label: '撤销'},
-                {role: 'redo', label: '重做'},
-                {type: 'separator'},
-                {role: 'cut', label: '剪贴'},
-                {role: 'copy', label: '拷贝'},
-                {role: 'paste', label: '粘贴'},
-                {role: 'delete', label: '删除'},
-                {role: 'selectall', label: '全选'}
-            ]
+            }
+        ]
+    },
+    {
+        label: '编辑',
+        submenu: [
+            {role: 'undo', label: '撤销'},
+            {role: 'redo', label: '重做'},
+            {type: 'separator'},
+            {role: 'cut', label: '剪贴'},
+            {role: 'copy', label: '拷贝'},
+            {role: 'paste', label: '粘贴'},
+            {role: 'delete', label: '删除'},
+            {role: 'selectall', label: '全选'}
+        ]
+    }
+]
+
+ipcMain.on('register-hotKey', (event, {hotKey, enableGlobal}) => {
+    console.log(hotKey, enableGlobal)
+    globalShortcut.unregisterAll()
+    const submenu = []
+    hotKey.forEach(single => {
+        submenu.push({
+            label: single.name,
+            accelerator: single.key,
+            click: () => {
+                event.sender.send('hotKey-control', single.value)
+            }
+        })
+        if (enableGlobal) {
+            const res = globalShortcut.register(single.global, () => {
+                event.sender.send('hotKey-control', single.value)
+            })
+            if (res) {
+                console.log(`${single.global}注册成功`)
+            } else {
+                console.log(`${single.global}注册失败`)
+            }
         }
-    ]
+    })
+    if (!enableGlobal) {
+        globalShortcut.unregisterAll()
+    }
+    if (template[2]) {
+        template[2].submenu = submenu
+    } else {
+        template.push({
+            label: '控制',
+            submenu
+        })
+    }
+    initMenu()
+})
+export default function initMenu() {
     const menu = Menu.buildFromTemplate(template)
     Menu.setApplicationMenu(menu)
 }

src/renderer/App.vue

@@ -22,6 +22,7 @@
     import downloadProgress from './view/components/progress/index.vue'
     import eventBus from './eventBus/searchResult'
     import updateAlert from './view/components/updateAlert.vue'
+    import {mapState, mapActions, mapMutations} from 'vuex'
 
     export default {
         components: {
@@ -37,7 +38,13 @@
                 refresh: false
             }
         },
+        computed: {
+            ...mapState('hot-key', ['hotKey', 'enableGlobal']),
+            ...mapState('play', ['volume']),
+        },
         methods: {
+            ...mapActions('c_playlist', ['last', 'next']),
+            ...mapMutations('play', ['pauseChange', 'update']),
             // 登录成功回调
             loginSuccessed(event, info) {
                 console.log(info)
@@ -58,6 +65,29 @@
                     message: h(updateAlert),
                     duration: 0
                 })
+            },
+            // 快捷键控制
+            hotKeyControl(event, key) {
+                switch (key) {
+                    case 'playPause':
+                        this.pauseChange()
+                        break
+                    case 'last':
+                        this.last()
+                        break
+                    case 'next':
+                        this.next()
+                        break
+                    case 'volumeIncrease':
+                        this.update({
+                            volume: this.volume + 10 > 100 ? 100 : this.volume + 10
+                        })
+                        break
+                    case 'volumeDecrease':
+                        this.update({
+                            volume: this.volume - 10 < 0 ? 0 : this.volume - 10
+                        })
+                }
             }
         },
         watch: {
@@ -66,10 +96,14 @@
             }
         },
         created() {
-            // 初始化离线歌单
-            Vue.$store.dispatch('offline-playlist/init')
-            this.$ipc.on('loginSuccessed', this.loginSuccessed)
-            this.$ipc.on('update-alert', this.updateAlert)
+            Vue.$store.dispatch('offline-playlist/init') // 初始化离线歌单
+            this.$ipc.on('loginSuccessed', this.loginSuccessed) // 监听登录成功
+            this.$ipc.on('update-alert', this.updateAlert) // 监听版本更新
+            this.$ipc.send('register-hotKey', {
+                hotKey: this.hotKey,
+                enableGlobal: this.enableGlobal
+            })
+            this.$ipc.on('hotKey-control', this.hotKeyControl)
             if (localStorage.token) {
                 this.$store.dispatch('user/init')
             }

src/renderer/filters/index.js

@@ -31,4 +31,8 @@ Vue.filter('date', (val, format = 'YYYY-MM-DD') => {
 })
 Vue.filter('dateDiff', (val, format) => {
     return moment(val).fromNow()
+})
+Vue.filter('keyboardChar', (val) => {
+    if (!val) return ''
+    return val.split('+').map(item => Vue.$store.getters['hot-key/registerKey2Char'][item]).join(' ')
 })