Fixed: #17

src/renderer/components/SettingPage.vue

@@ -63,11 +63,36 @@
         </el-col>
       </el-row>
     </el-dialog>
+    <el-dialog
+      title="修改快捷键"
+      :visible.sync="keyBindingVisible"
+    >
+      <el-form
+        label-width="80px"
+      >
+        <el-form-item
+          label="快捷上传"
+        >
+          <el-input 
+            class="align-center"
+            @keydown.native.prevent="keyDetect('upload', $event)"
+            v-model="shortKey.upload"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelKeyBinding">取消</el-button>
+        <el-button type="primary" @click="confirmKeyBinding">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import pkg from '../../../package.json'
+import keyDetect from 'utils/key-binding'
 import { remote } from 'electron'
+import db from '../../datastore'
 const { Menu, dialog, BrowserWindow } = remote
 export default {
   name: 'setting-page',
@@ -77,7 +102,11 @@ export default {
       defaultActive: 'upload',
       menu: null,
       visible: false,
-      os: ''
+      keyBindingVisible: false,
+      os: '',
+      shortKey: {
+        upload: db.read().get('shortKey.upload').value()
+      }
     }
   },
   created () {
@@ -117,6 +146,12 @@ export default {
             _this.visible = true
           }
         },
+        {
+          label: '修改快捷键',
+          click () {
+            _this.keyBindingVisible = true
+          }
+        },
         {
           label: '打开更新助手',
           type: 'checkbox',
@@ -131,6 +166,19 @@ export default {
     },
     openDialog () {
       this.menu.popup(remote.getCurrentWindow)
+    },
+    keyDetect (type, event) {
+      this.shortKey[type] = keyDetect(event).join('+')
+    },
+    cancelKeyBinding () {
+      this.keyBindingVisible = false
+      this.shortKey = db.read().get('shortKey').value()
+    },
+    confirmKeyBinding () {
+      const oldKey = db.read().get('shortKey').value()
+      db.read().set('shortKey', this.shortKey).write()
+      this.keyBindingVisible = false
+      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
     }
   },
   beforeRouteEnter: (to, from, next) => {
@@ -211,4 +259,7 @@ export default {
     &-title
       text-align center
       color #878d99
+  .align-center
+    input
+      text-align center
 </style>

src/renderer/utils/key-binding.js

@@ -0,0 +1,38 @@
+import keycode from 'keycode'
+
+const isSpecialKey = (keyCode) => {
+  const keyArr = [
+    16, // Shift
+    17, // Ctrl
+    18, // Alt
+    91, // Left Meta
+    93 // Right Meta
+  ]
+
+  return keyArr.includes(keyCode)
+}
+
+const keyDetect = (event) => {
+  const meta = process.platform === 'darwin' ? 'Cmd' : 'Super'
+  let specialKey = {
+    Ctrl: event.ctrlKey,
+    Shift: event.shiftKey,
+    Alt: event.altKey
+  }
+  specialKey[meta] = event.metaKey
+
+  let pressKey = []
+
+  for (let i in specialKey) {
+    if (specialKey[i]) {
+      pressKey.push(i)
+    }
+  }
+
+  if (!isSpecialKey(event.keyCode)) {
+    pressKey.push(keycode(event.keyCode).toUpperCase())
+  }
+  return pressKey
+}
+
+export default keyDetect