🔨 Refactor: upgrade vue2 -> vue3

src/renderer/pages/ShortKey.vue

@@ -4,18 +4,21 @@
       {{ $T('SETTINGS_SET_SHORTCUT') }}
     </div>
     <el-row>
-      <el-col :span="20" :offset="2">
+      <el-col
+        :span="20"
+        :offset="2"
+      >
         <el-table
           class="shortcut-page-table-border"
           :data="list"
-          size="mini"
+          size="small"
           header-cell-class-name="shortcut-page-table-border"
           cell-class-name="shortcut-page-table-border"
         >
           <el-table-column
             :label="$T('SHORTCUT_NAME')"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               {{ scope.row.label ? scope.row.label : scope.row.name }}
             </template>
           </el-table-column>
@@ -23,14 +26,13 @@
             width="160px"
             :label="$T('SHORTCUT_BIND')"
             prop="key"
-          >
-          </el-table-column>
+          />
           <el-table-column
             :label="$T('SHORTCUT_STATUS')"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-tag
-                size="mini"
+                size="small"
                 :type="scope.row.enable ? 'success' : 'danger'"
               >
                 {{ scope.row.enable ? $T('SHORTCUT_ENABLED') : $T('SHORTCUT_DISABLED') }}
@@ -41,38 +43,43 @@
             :label="$T('SHORTCUT_SOURCE')"
             width="100px"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               {{ calcOriginShowName(scope.row.from) }}
             </template>
           </el-table-column>
           <el-table-column
             :label="$T('SHORTCUT_HANDLE')"
+            width="100px"
           >
-            <template slot-scope="scope">
-              <el-button
-                @click="toggleEnable(scope.row)"
-                size="mini"
-                :class="{
-                  disabled: scope.row.enable
-                }"
-                type="text">
-                {{ scope.row.enable ? $T('SHORTCUT_DISABLE') : $T('SHORTCUT_ENABLE') }}
-              </el-button>
-              <el-button
-                class="edit"
-                size="mini"
-                @click="openKeyBindingDialog(scope.row, scope.$index)"
-                type="text">
-                {{ $T('SHORTCUT_EDIT') }}
-              </el-button>
+            <template #default="scope">
+              <el-row>
+                <el-button
+                  size="small"
+                  :class="{
+                    disabled: scope.row.enable
+                  }"
+                  type="text"
+                  @click="toggleEnable(scope.row)"
+                >
+                  {{ scope.row.enable ? $T('SHORTCUT_DISABLE') : $T('SHORTCUT_ENABLE') }}
+                </el-button>
+                <el-button
+                  class="edit"
+                  size="small"
+                  type="text"
+                  @click="openKeyBindingDialog(scope.row, scope.$index)"
+                >
+                  {{ $T('SHORTCUT_EDIT') }}
+                </el-button>
+              </el-row>
             </template>
           </el-table-column>
         </el-table>
       </el-col>
     </el-row>
     <el-dialog
+      v-model="keyBindingVisible"
       :title="$T('SHORTCUT_CHANGE_UPLOAD')"
-      :visible.sync="keyBindingVisible"
       :modal-append-to-body="false"
     >
       <el-form
@@ -81,101 +88,109 @@
       >
         <el-form-item>
           <el-input
-            class="align-center"
-            @keydown.native.prevent="keyDetect($event)"
             v-model="shortKey"
+            class="align-center"
             :autofocus="true"
-          ></el-input>
+            @keydown.prevent="keyDetect($event as KeyboardEvent)"
+          />
         </el-form-item>
       </el-form>
-      <span slot="footer">
-        <el-button @click="cancelKeyBinding" round>
+      <template #footer>
+        <el-button
+          round
+          @click="cancelKeyBinding"
+        >
           {{ $T('CANCEL') }}
         </el-button>
-        <el-button type="primary" @click="confirmKeyBinding" round>
+        <el-button
+          type="primary"
+          round
+          @click="confirmKeyBinding"
+        >
           {{ $T('CONFIRM') }}
         </el-button>
-      </span>
+      </template>
     </el-dialog>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator'
-import keyDetect from '@/utils/key-binding'
+<script lang="ts" setup>
+import keyBinding from '@/utils/key-binding'
 import { ipcRenderer, IpcRendererEvent } from 'electron'
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
+import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
+import { getConfig, sendToMain } from '@/utils/dataSender'
 
-@Component({
-  name: 'shortkey-page'
+const list = ref<IShortKeyConfig[]>([])
+const keyBindingVisible = ref(false)
+const command = ref('')
+const shortKey = ref('')
+const currentIndex = ref(0)
+
+onBeforeMount(async () => {
+  const shortKeyConfig = (await getConfig<IShortKeyConfigs>('settings.shortKey'))!
+  list.value = Object.keys(shortKeyConfig).map(item => {
+    return {
+      ...shortKeyConfig[item],
+      from: calcOrigin(item)
+    }
+  })
 })
-export default class extends Vue {
-  list: IShortKeyConfig[] = []
-  keyBindingVisible = false
-  command = ''
-  shortKey = ''
-  currentIndex = 0
-  async created () {
-    const shortKeyConfig = (await this.getConfig<IShortKeyConfigs>('settings.shortKey'))!
-    this.list = Object.keys(shortKeyConfig).map(item => {
-      return {
-        ...shortKeyConfig[item],
-        from: this.calcOrigin(item)
-      }
-    })
-  }
 
-  @Watch('keyBindingVisible')
-  onKeyBindingVisibleChange (val: boolean) {
-    ipcRenderer.send(TOGGLE_SHORTKEY_MODIFIED_MODE, val)
-  }
+watch(keyBindingVisible, (val: boolean) => {
+  sendToMain(TOGGLE_SHORTKEY_MODIFIED_MODE, val)
+})
 
-  calcOrigin (item: string) {
-    const [origin] = item.split(':')
-    return origin
-  }
+function calcOrigin (item: string) {
+  const [origin] = item.split(':')
+  return origin
+}
 
-  calcOriginShowName (item: string) {
-    return item.replace('picgo-plugin-', '')
-  }
+function calcOriginShowName (item: string) {
+  return item.replace('picgo-plugin-', '')
+}
 
-  toggleEnable (item: IShortKeyConfig) {
-    const status = !item.enable
-    item.enable = status
-    ipcRenderer.send('bindOrUnbindShortKey', item, item.from)
-  }
+function toggleEnable (item: IShortKeyConfig) {
+  const status = !item.enable
+  item.enable = status
+  sendToMain('bindOrUnbindShortKey', item, item.from)
+}
 
-  keyDetect (event: KeyboardEvent) {
-    this.shortKey = keyDetect(event).join('+')
-  }
+function keyDetect (event: KeyboardEvent) {
+  shortKey.value = keyBinding(event).join('+')
+}
 
-  async openKeyBindingDialog (config: IShortKeyConfig, index: number) {
-    this.command = `${config.from}:${config.name}`
-    this.shortKey = await this.getConfig(`settings.shortKey.${this.command}.key`) || ''
-    this.currentIndex = index
-    this.keyBindingVisible = true
-  }
+async function openKeyBindingDialog (config: IShortKeyConfig, index: number) {
+  command.value = `${config.from}:${config.name}`
+  shortKey.value = await getConfig(`settings.shortKey.${command.value}.key`) || ''
+  currentIndex.value = index
+  keyBindingVisible.value = true
+}
 
-  async cancelKeyBinding () {
-    this.keyBindingVisible = false
-    this.shortKey = await this.getConfig<string>(`settings.shortKey.${this.command}.key`) || ''
-  }
+async function cancelKeyBinding () {
+  keyBindingVisible.value = false
+  shortKey.value = await getConfig<string>(`settings.shortKey.${command.value}.key`) || ''
+}
 
-  async confirmKeyBinding () {
-    const oldKey = await this.getConfig<string>(`settings.shortKey.${this.command}.key`)
-    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
-      }
-    })
-  }
+async function confirmKeyBinding () {
+  const oldKey = await getConfig<string>(`settings.shortKey.${command.value}.key`)
+  const config = Object.assign({}, list.value[currentIndex.value])
+  config.key = shortKey.value
+  sendToMain('updateShortKey', config, oldKey, config.from)
+  ipcRenderer.once('updateShortKeyResponse', (evt: IpcRendererEvent, result) => {
+    if (result) {
+      keyBindingVisible.value = false
+      list.value[currentIndex.value].key = shortKey.value
+    }
+  })
+}
 
-  beforeDestroy () {
-    ipcRenderer.send(TOGGLE_SHORTKEY_MODIFIED_MODE, false)
-  }
+onBeforeUnmount(() => {
+  sendToMain(TOGGLE_SHORTKEY_MODIFIED_MODE, false)
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'ShortkeyPage'
 }
 </script>
 <style lang='stylus'>
@@ -191,6 +206,9 @@ export default class extends Vue {
       color: #F56C6C
     &.edit
       color: #67C23A
+    &--text
+      padding-left 4px
+      padding-right 4px
   .el-table
     background-color: transparent
     color #ddd
@@ -209,4 +227,6 @@ export default class extends Vue {
         tr:hover
           &>td
             background #333
+  .el-button+.el-button
+    margin-left 4px
 </style>