🚧 WIP: finished shortKey page

src/main/index.js

@@ -452,8 +452,8 @@ ipcMain.on('uploadChoosedFiles', async (evt, files) => {
   return uploadChoosedFiles(evt.sender, files)
 })
 
-ipcMain.on('updateShortKey', (evt, item) => {
-  shortKeyUpdater(globalShortcut, item)
+ipcMain.on('updateShortKey', (evt, item, oldKey) => {
+  shortKeyUpdater(globalShortcut, item, oldKey)
   const notification = new Notification({
     title: '操作成功',
     body: '你的快捷键已经修改成功'

src/main/utils/shortKeyRegister.js

@@ -11,7 +11,17 @@ const shortKeyHandler = (name) => {
   }
 }
 
-const shortKeyUpdater = (globalShortcut, item) => {
+/**
+ * 用于更新快捷键绑定
+ * @param {globalShortcut} globalShortcut
+ * @param {keyObject} item
+ * @param {string} oldKey
+ */
+const shortKeyUpdater = (globalShortcut, item, oldKey) => {
+  // 如果提供了旧key，则解绑
+  if (oldKey) {
+    globalShortcut.unregister(oldKey)
+  }
   if (item.enable === false) {
     globalShortcut.unregister(item.key)
   } else {

src/renderer/layouts/SettingPage.vue

@@ -281,12 +281,6 @@ export default {
       this.keyBindingVisible = false
       this.shortKey = db.get('shortKey')
     },
-    confirmKeyBinding () {
-      const oldKey = db.get('shortKey')
-      db.set('shortKey', this.shortKey)
-      this.keyBindingVisible = false
-      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
-    },
     cancelCustomLink () {
       this.customLinkVisible = false
       this.customLink.value = db.get('customLink') || '$url'

src/renderer/pages/PicGoSetting.vue

@@ -370,12 +370,6 @@ export default {
       this.keyBindingVisible = false
       this.shortKey = this.$db.get('settings.shortKey')
     },
-    confirmKeyBinding () {
-      const oldKey = this.$db.get('settings.shortKey')
-      this.$db.set('settings.shortKey', this.shortKey)
-      this.keyBindingVisible = false
-      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
-    },
     cancelCustomLink () {
       this.customLinkVisible = false
       this.customLink.value = this.$db.get('settings.customLink') || '$url'

src/renderer/pages/ShortCutPage.vue

@@ -17,6 +17,7 @@
             </template>
           </el-table-column>
           <el-table-column
+            width="180px"
             label="快捷键绑定"
             prop="key"
           >
@@ -47,11 +48,16 @@
               <el-button
                 @click="toggleEnable(scope.row)"
                 size="mini"
+                :class="{
+                  disabled: scope.row.enable
+                }"
                 type="text">
                 {{ scope.row.enable ? '禁用' : '启用' }}
               </el-button>
               <el-button
+                class="edit"
                 size="mini"
+                @click="openKeyBindingDialog(scope.row.name)"
                 type="text">
                 编辑
               </el-button>
@@ -60,14 +66,43 @@
         </el-table>
       </el-col>
     </el-row>
+    <el-dialog
+      title="修改上传快捷键"
+      :visible.sync="keyBindingVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-position="top"
+        label-width="80px"
+      >
+        <el-form-item
+          label="快捷上传"
+        >
+          <el-input 
+            class="align-center"
+            @keydown.native.prevent="keyDetect($event)"
+            v-model="shortKey"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelKeyBinding" round>取消</el-button>
+        <el-button type="primary" @click="confirmKeyBinding" round>确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import keyDetect from 'utils/key-binding'
 export default {
   name: 'shortcut-page',
   data () {
     return {
-      list: []
+      list: [],
+      keyBindingVisible: false,
+      shortKeyName: '',
+      shortKey: ''
     }
   },
   created () {
@@ -84,12 +119,40 @@ export default {
       item.enable = status
       this.$db.set(`settings.shortKey.${item.name}.enable`, status)
       this.$electron.ipcRenderer.send('updateShortKey', item)
+    },
+    keyDetect (event) {
+      this.shortKey = keyDetect(event).join('+')
+    },
+    openKeyBindingDialog (name) {
+      this.shortKeyName = name
+      this.shortKey = this.$db.get(`settings.shortKey.${name}.key`)
+      this.keyBindingVisible = true
+    },
+    cancelKeyBinding () {
+      this.keyBindingVisible = false
+      this.shortKey = this.$db.get(`settings.shortKey.${this.shortKeyName}.key`)
+    },
+    confirmKeyBinding () {
+      const oldKey = this.$db.get(`settings.shortKey.${this.shortKeyName}.key`)
+      this.$db.set(`settings.shortKey.${this.shortKeyName}.key`, this.shortKey)
+      const newKey = this.$db.get(`settings.shortKey.${this.shortKeyName}`)
+      this.$electron.ipcRenderer.send('updateShortKey', newKey, oldKey)
+      this.keyBindingVisible = false
     }
   }
 }
 </script>
 <style lang='stylus'>
 #shortcut-page
+  .el-dialog__body
+    padding 10px 20px
+    .el-form-item
+      margin-bottom 0
+  .el-button
+    &.disabled
+      color: #F56C6C
+    &.edit
+      color: #67C23A
   .el-table
     background-color: transparent
     color #ddd