🚧 WIP: almost finish shortKey system

src/renderer/pages/ShortKey.vue

@@ -0,0 +1,195 @@
+<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">
+              {{ calcOriginShowName(scope.row.from) }}
+            </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, 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 lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import keyDetect from '@/utils/key-binding'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+@Component({
+  name: 'shortkey-page'
+})
+export default class extends Vue {
+  list: IShortKeyConfig[] = []
+  keyBindingVisible = false
+  command = ''
+  shortKey = ''
+  currentIndex = 0
+  created () {
+    const shortKeyConfig = this.$db.get('settings.shortKey') as IShortKeyConfigs
+    this.list = Object.keys(shortKeyConfig).map(item => {
+      return {
+        ...shortKeyConfig[item],
+        from: this.calcOrigin(item)
+      }
+    })
+  }
+  @Watch('keyBindingVisible')
+  onKeyBindingVisibleChange (val: boolean) {
+    ipcRenderer.send('toggleShortKeyModifiedMode', val)
+  }
+  calcOrigin (item: string) {
+    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('bindOrUnbindShortKey', item, item.from)
+  }
+  keyDetect (event: KeyboardEvent) {
+    this.shortKey = keyDetect(event).join('+')
+  }
+  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.command}.key`)
+  }
+  confirmKeyBinding () {
+    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)
+  }
+}
+</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>