From 12748931547ecd81751d15737fa263fd109c186a Mon Sep 17 00:00:00 2001
From: PiEgg <marksz@teamsz.xyz>
Date: Wed, 11 Sep 2019 15:31:27 +0800
Subject: [PATCH] :construction: WIP: shortcut setting page

---
 src/main/index.js                        |  20 ++---
 src/main/migrate/shortKeyUpdateHelper.js |  19 ++--
 src/main/utils/shortKeyRegister.js       |  11 +++
 src/renderer/components/ShortKeyForm.vue |  31 +++++++
 src/renderer/pages/PicGoSetting.vue      |   7 +-
 src/renderer/pages/ShortCutPage.vue      | 109 +++++++++++++++++++++++
 src/renderer/router/index.js             |   5 ++
 yarn.lock                                |  33 ++++---
 8 files changed, 203 insertions(+), 32 deletions(-)
 create mode 100644 src/renderer/components/ShortKeyForm.vue
 create mode 100644 src/renderer/pages/ShortCutPage.vue

diff --git a/src/main/index.js b/src/main/index.js
index aa96463..dbf3eca 100644
--- a/src/main/index.js
+++ b/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()
 
diff --git a/src/main/migrate/shortKeyUpdateHelper.js b/src/main/migrate/shortKeyUpdateHelper.js
index 96d294b..fa31508 100644
--- a/src/main/migrate/shortKeyUpdateHelper.js
+++ b/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
diff --git a/src/main/utils/shortKeyRegister.js b/src/main/utils/shortKeyRegister.js
index 4f3e20c..00819cf 100644
--- a/src/main/utils/shortKeyRegister.js
+++ b/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
 }
diff --git a/src/renderer/components/ShortKeyForm.vue b/src/renderer/components/ShortKeyForm.vue
new file mode 100644
index 0000000..9a8c758
--- /dev/null
+++ b/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>
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 44bc4cb..2dd970a 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/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 () {
diff --git a/src/renderer/pages/ShortCutPage.vue b/src/renderer/pages/ShortCutPage.vue
new file mode 100644
index 0000000..ca6681f
--- /dev/null
+++ b/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>
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 309ef43..15275bd 100644
--- a/src/renderer/router/index.js
+++ b/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'
         }
       ]
     },
diff --git a/yarn.lock b/yarn.lock
index 492d387..3c6f65a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -711,7 +711,8 @@ async-limiter@~1.0.0:
 
 async-validator@~1.8.1:
   version "1.8.5"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=
   dependencies:
     babel-runtime "6.x"
 
@@ -959,7 +960,8 @@ babel-helper-to-multiple-sequence-expressions@^0.1.1:
 
 babel-helper-vue-jsx-merge-props@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  resolved "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=
 
 babel-helpers@^6.24.1:
   version "6.24.1"
@@ -2853,10 +2855,15 @@ copy-webpack-plugin@^4.0.1:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.2.0, core-js@^2.5.0:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
 
+core-js@^2.4.0:
+  version "2.6.9"
+  resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+  integrity sha1-a0shRiDINBUuF5Mjcn/Bl0GwhPI=
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3322,7 +3329,8 @@ deep-is@~0.1.3:
 
 deepmerge@^1.2.0:
   version "1.5.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
+  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
+  integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
 
 deepmerge@^2.0.1:
   version "2.2.1"
@@ -3779,8 +3787,9 @@ electron@^5.0.1:
     extract-zip "^1.0.3"
 
 element-ui@^2.4.11:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.6.1.tgz#86db79ff5de9b1bcc3187b65b3772b0c54074718"
+  version "2.12.0"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.12.0.tgz#a893bc11ae4f7dbb7e9d541606f23e643f131ee4"
+  integrity sha1-qJO8Ea5Pfbt+nVQWBvI+ZD8THuQ=
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -7182,7 +7191,8 @@ normalize-url@^1.4.0:
 
 normalize-wheel@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  resolved "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
 
 npm-bundled@^1.0.1:
   version "1.0.6"
@@ -8556,7 +8566,8 @@ regenerator-runtime@^0.10.5:
 
 regenerator-runtime@^0.11.0:
   version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=
 
 regenerator-transform@^0.10.0:
   version "0.10.1"
@@ -8731,7 +8742,8 @@ requires-port@^1.0.0:
 
 resize-observer-polyfill@^1.5.0:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
@@ -9708,7 +9720,8 @@ text-table@^0.2.0, text-table@~0.2.0:
 
 throttle-debounce@^1.0.1:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  resolved "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha1-UYU9o3vmihVctugns1FKPEIuic0=
 
 throttleit@0.0.2:
   version "0.0.2"