🚧 WIP: almost finish shortKey system

src/renderer/layouts/SettingPage.vue

@@ -171,7 +171,7 @@ export default class extends Vue {
     ]
   }
   os = ''
-  shortKey: ShortKeyMap = {
+  shortKey: IShortKeyMap = {
     upload: db.get('shortKey.upload')
   }
   picBed: IPicBedType[] = []

src/renderer/pages/Gallery.vue

@@ -131,7 +131,7 @@ export default class extends Vue {
     id: null,
     imgUrl: ''
   }
-  choosedList: ObjT<boolean> = {}
+  choosedList: IObjT<boolean> = {}
   choosedPicBed: string[] = []
   searchText = ''
   handleBarActive = false
@@ -173,7 +173,7 @@ export default class extends Vue {
     if (this.choosedPicBed.length > 0) {
       let arr: ImgInfo[] = []
       this.choosedPicBed.forEach(item => {
-        let obj: Obj = {
+        let obj: IObj = {
           type: item
         }
         if (this.searchText) {
@@ -288,7 +288,7 @@ export default class extends Vue {
   cleanSearch () {
     this.searchText = ''
   }
-  isMultiple (obj: Obj) {
+  isMultiple (obj: IObj) {
     return Object.values(obj).some(item => item)
   }
   multiRemove () {

src/renderer/pages/PicGoSetting.vue

@@ -292,7 +292,7 @@ export default class extends Vue {
   customLink = {
     value: db.get('settings.customLink') || '$url'
   }
-  shortKey: ShortKeyMap = {
+  shortKey: IShortKeyMap = {
     upload: db.get('settings.shortKey.upload')
   }
   proxy = db.get('picBed.proxy') || ''
@@ -492,7 +492,7 @@ export default class extends Vue {
     remote.shell.openExternal('https://picgo.github.io/PicGo-Doc/zh/guide/config.html#picgo设置')
   }
   goShortCutPage () {
-    this.$router.push('shortcut')
+    this.$router.push('shortKey')
   }
   beforeDestroy () {
     ipcRenderer.removeListener('getPicBeds', this.getPicBeds)

src/renderer/pages/ShortCutPage.vue

@@ -1,183 +0,0 @@
-<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
-            width="180px"
-            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"
-                :class="{
-                  disabled: scope.row.enable
-                }"
-                type="text">
-                {{ scope.row.enable ? '禁用' : '启用' }}
-              </el-button>
-              <el-button
-                class="edit"
-                size="mini"
-                @click="openKeyBindingDialog(scope.row.name, scope.$index)"
-                type="text">
-                编辑
-              </el-button>
-            </template>
-          </el-table-column>
-        </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: [],
-      keyBindingVisible: false,
-      shortKeyName: '',
-      shortKey: '',
-      currentIndex: 0
-    }
-  },
-  created () {
-    const shortKeyConfig = this.$db.get('settings.shortKey')
-    this.list = Object.keys(shortKeyConfig).map(item => shortKeyConfig[item])
-  },
-  watch: {
-    keyBindingVisible (val) {
-      this.$electron.ipcRenderer.send('toggleShortKeyModifiedMode', val)
-    }
-  },
-  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)
-      this.$electron.ipcRenderer.send('updateShortKey', item)
-    },
-    keyDetect (event) {
-      this.shortKey = keyDetect(event).join('+')
-    },
-    openKeyBindingDialog (name, index) {
-      this.shortKeyName = name
-      this.shortKey = this.$db.get(`settings.shortKey.${name}.key`)
-      this.currentIndex = index
-      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.list[this.currentIndex].key = this.shortKey
-      this.keyBindingVisible = false
-    }
-  },
-  beforeDestroy () {
-    this.$electron.ipcRenderer.send('toggleShortKeyModifiedMode', 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
-    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/pages/ShortKey.vue

@@ -38,7 +38,7 @@
             label="来源"
           >
             <template slot-scope="scope">
-              {{ calcOrigin(scope.row.name) }}
+              {{ calcOriginShowName(scope.row.from) }}
             </template>
           </el-table-column>
           <el-table-column
@@ -57,7 +57,7 @@
               <el-button
                 class="edit"
                 size="mini"
-                @click="openKeyBindingDialog(scope.row.name, scope.$index)"
+                @click="openKeyBindingDialog(scope.row, scope.$index)"
                 type="text">
                 编辑
               </el-button>
@@ -96,20 +96,25 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import keyDetect from '@/utils/key-binding'
-import { ipcRenderer } from 'electron'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
 
 @Component({
-  name: 'shortcut-page'
+  name: 'shortkey-page'
 })
 export default class extends Vue {
   list: IShortKeyConfig[] = []
   keyBindingVisible = false
-  shortKeyName = ''
+  command = ''
   shortKey = ''
   currentIndex = 0
   created () {
     const shortKeyConfig = this.$db.get('settings.shortKey') as IShortKeyConfigs
-    this.list = Object.keys(shortKeyConfig).map(item => shortKeyConfig[item])
+    this.list = Object.keys(shortKeyConfig).map(item => {
+      return {
+        ...shortKeyConfig[item],
+        from: this.calcOrigin(item)
+      }
+    })
   }
   @Watch('keyBindingVisible')
   onKeyBindingVisibleChange (val: boolean) {
@@ -119,32 +124,41 @@ export default class extends Vue {
     const [origin] = item.split(':')
     return origin
   }
+  calcOriginShowName (item: string) {
+    return item.replace('picgo-plugin-', '')
+  }
   toggleEnable (item: IShortKeyConfig) {
     const status = !item.enable
     item.enable = status
-    this.$db.set(`settings.shortKey.${item.name}.enable`, status)
-    ipcRenderer.send('updateShortKey', item)
+    // this.$db.set(`settings.shortKey.${item.name}.enable`, status)
+    ipcRenderer.send('bindOrUnbindShortKey', item, item.from)
   }
   keyDetect (event: KeyboardEvent) {
     this.shortKey = keyDetect(event).join('+')
   }
-  openKeyBindingDialog (name: string, index: number) {
-    this.shortKeyName = name
-    this.shortKey = this.$db.get(`settings.shortKey.${name}.key`)
+  openKeyBindingDialog (config: IShortKeyConfig, index: number) {
+    this.command = `${config.from}:${config.name}`
+    this.shortKey = this.$db.get(`settings.shortKey.${this.command}.key`)
     this.currentIndex = index
     this.keyBindingVisible = true
   }
   cancelKeyBinding () {
     this.keyBindingVisible = false
-    this.shortKey = this.$db.get(`settings.shortKey.${this.shortKeyName}.key`)
+    this.shortKey = this.$db.get(`settings.shortKey.${this.command}.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}`)
-    ipcRenderer.send('updateShortKey', newKey, oldKey)
-    this.list[this.currentIndex].key = this.shortKey
-    this.keyBindingVisible = false
+    const oldKey = this.$db.get(`settings.shortKey.${this.command}.key`)
+    // this.$db.set(`settings.shortKey.${this.command}.key`, this.shortKey)
+    // const newKey = this.$db.get(`settings.shortKey.${this.command}`)
+    const config = Object.assign({}, this.list[this.currentIndex])
+    config.key = this.shortKey
+    ipcRenderer.send('updateShortKey', config, oldKey, config.from)
+    ipcRenderer.once('updateShortKeyResponse', (evt: IpcRendererEvent, result) => {
+      if (result) {
+        this.keyBindingVisible = false
+        this.list[this.currentIndex].key = this.shortKey
+      }
+    })
   }
   beforeDestroy () {
     ipcRenderer.send('toggleShortKeyModifiedMode', false)

src/renderer/router/index.ts

@@ -95,9 +95,9 @@ export default new Router({
           name: 'plugin'
         },
         {
-          path: 'shortcut',
-          component: () => import(/* webpackChunkName: "ShortkeyPage" */ '@/pages/ShortCut.vue'),
-          name: 'shortcut'
+          path: 'shortKey',
+          component: () => import(/* webpackChunkName: "ShortkeyPage" */ '@/pages/ShortKey.vue'),
+          name: 'shortKey'
         }
       ]
     },