🚧 WIP: shortcut setting page

src/main/index.js

@@ -27,6 +27,7 @@ import {
   updateShortKeyFromVersion212
 } from './migrate/shortKeyUpdateHelper'
 import {
+  shortKeyUpdater,
   initShortKeyRegister
 } from './utils/shortKeyRegister'
 if (process.platform === 'darwin') {
@@ -451,13 +452,8 @@ ipcMain.on('uploadChoosedFiles', async (evt, files) => {
   return uploadChoosedFiles(evt.sender, files)
 })
 
-ipcMain.on('updateShortKey', (evt, oldKey) => {
-  globalShortcut.unregisterAll()
-  for (let key in oldKey) {
-    globalShortcut.register(db.read().get('settings.shortKey').value()[key], () => {
-      return shortKeyHash[key]()
-    })
-  }
+ipcMain.on('updateShortKey', (evt, item) => {
+  shortKeyUpdater(globalShortcut, item)
   const notification = new Notification({
     title: '操作成功',
     body: '你的快捷键已经修改成功'
@@ -510,9 +506,13 @@ ipcMain.on('getPicBeds', (evt) => {
   evt.returnValue = picBeds
 })
 
-const shortKeyHash = {
-  upload: uploadClipboardFiles
-}
+ipcMain.on('updateShortKey', (evt, val) => {
+  // console.log(val)
+})
+
+// const shortKeyHash = {
+//   upload: uploadClipboardFiles
+// }
 
 const gotTheLock = app.requestSingleInstanceLock()
 

src/main/migrate/shortKeyUpdateHelper.js

@@ -1,17 +1,16 @@
 // from v2.1.2
 const updateShortKeyFromVersion212 = (db, shortKeyConfig) => {
   let needUpgrade = false
-  Object.keys(shortKeyConfig).forEach(item => {
-    if (typeof shortKeyConfig[item] === 'string') {
-      needUpgrade = true
-      shortKeyConfig[item] = {
-        enable: true,
-        key: shortKeyConfig[item],
-        name: `picgo:${item}`,
-        lable: '快捷上传'
-      }
+  if (shortKeyConfig.upload) {
+    needUpgrade = true
+    shortKeyConfig['picgo:upload'] = {
+      enable: true,
+      key: shortKeyConfig.upload,
+      name: 'picgo:upload',
+      label: '快捷上传'
     }
-  })
+    delete shortKeyConfig.upload
+  }
   if (needUpgrade) {
     db.read().set('settings.shortKey', shortKeyConfig).write()
     return shortKeyConfig

src/main/utils/shortKeyRegister.js

@@ -11,6 +11,16 @@ const shortKeyHandler = (name) => {
   }
 }
 
+const shortKeyUpdater = (globalShortcut, item) => {
+  if (item.enable === false) {
+    globalShortcut.unregister(item.key)
+  } else {
+    globalShortcut.register(item.key, () => {
+      shortKeyHandler(item.name)
+    })
+  }
+}
+
 // 初始化阶段的注册
 const initShortKeyRegister = (globalShortcut, shortKeys) => {
   let errorList = []
@@ -28,5 +38,6 @@ const initShortKeyRegister = (globalShortcut, shortKeys) => {
 }
 
 export {
+  shortKeyUpdater,
   initShortKeyRegister
 }

src/renderer/components/ShortKeyForm.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-dialog
+    title="设置快捷键"
+    :visible.sync="visible"
+    :modal-append-to-body="false"
+  >
+
+  </el-dialog>
+</template>
+<script>
+// import keyDetect from 'utils/key-binding'
+export default {
+  name: '',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+    this.$db.read().get('settings.shortKey')
+  },
+  data () {
+    return {
+      list: []
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+</style>

src/renderer/pages/PicGoSetting.vue

@@ -22,9 +22,9 @@
             <el-button type="primary" round size="mini" @click="openLogSetting">点击设置</el-button>
           </el-form-item>
           <el-form-item
-            label="修改上传快捷键"
+            label="修改快捷键"
           >
-            <el-button type="primary" round size="mini" @click="keyBindingVisible = true">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="goShortCutPage">点击设置</el-button>
           </el-form-item>
           <el-form-item
             label="自定义链接格式"
@@ -516,6 +516,9 @@ export default {
     },
     goConfigPage () {
       this.$electron.remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
+    },
+    goShortCutPage () {
+      this.$router.push('shortcut-page')
     }
   },
   beforeDestroy () {

src/renderer/pages/ShortCutPage.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="shortcut-page">
+    <div class="view-title">
+      快捷键设置
+    </div>
+    <el-row>
+      <el-col :span="20" :offset="2">
+        <el-table
+          :data="list"
+          size="mini"
+        >
+          <el-table-column
+            label="快捷键名称"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.label ? scope.row.label : scope.row.name }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="快捷键绑定"
+            prop="key"
+          >
+          </el-table-column>
+          <el-table-column
+            label="状态"
+          >
+            <template slot-scope="scope">
+              <el-tag
+                size="mini"
+                :type="scope.row.enable ? 'success' : 'danger'"
+              >
+                {{ scope.row.enable ? '已启用' : '已禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="来源"
+          >
+            <template slot-scope="scope">
+              {{ calcOrigin(scope.row.name) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                @click="toggleEnable(scope.row)"
+                size="mini"
+                type="text">
+                {{ scope.row.enable ? '禁用' : '启用' }}
+              </el-button>
+              <el-button
+                size="mini"
+                type="text">
+                编辑
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  name: 'shortcut-page',
+  data () {
+    return {
+      list: []
+    }
+  },
+  created () {
+    const shortKeyConfig = this.$db.read().get('settings.shortKey').value()
+    this.list = Object.keys(shortKeyConfig).map(item => shortKeyConfig[item])
+  },
+  methods: {
+    calcOrigin (item) {
+      const [origin] = item.split(':')
+      return origin
+    },
+    toggleEnable (item) {
+      const status = !item.enable
+      item.enable = status
+      this.$db.set(`settings.shortKey.${item.name}.enable`, status).write()
+      this.$electron.ipcRenderer.send('updateShortKeyConfig', item)
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#shortcut-page
+  .el-table
+    background-color: transparent
+    color #ddd
+    thead
+      color #bbb
+    th,tr
+      background-color: transparent
+    &__body
+      tr.el-table__row--striped
+        td
+          background transparent
+    &--enable-row-hover
+      .el-table__body
+        tr:hover
+          &>td
+            background #333
+</style>

src/renderer/router/index.js

@@ -92,6 +92,11 @@ export default new Router({
           path: 'plugin',
           component: require('@/pages/Plugin').default,
           name: 'plugin'
+        },
+        {
+          path: 'shortcut-page',
+          component: require('@/pages/ShortCutPage').default,
+          name: 'shortcut-page'
         }
       ]
     },