move the magic key dialog into a component

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -9,7 +9,7 @@ import {
     Guide,
     DataAnalysis, Help, Setting
 } from '@element-plus/icons-vue'
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch } from 'vue'
 import { API } from './views/net'
 import { Cache } from './views/cache'
 import TestingPanel from './views/TestingPanel.vue'
@@ -19,6 +19,7 @@ import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
 import DataManager from './views/DataManager.vue'
+import MagicKey from './components/MagicKey.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t, locale: i18nLocale } = useI18n()
@@ -98,21 +99,6 @@ const theme = ref(getTheme())
 watch(theme, (e) => {
     setTheme(e)
 })
-
-const keyBindingsDialogVisible = ref(false)
-const keyBindings = ref([])
-const showKeyBindingsDialog = (keys: any) => {
-  keyBindingsDialogVisible.value = true
-  keyBindings.value = keys.detail || []
-}
-
-onMounted(() => {
-  window.addEventListener('show-key-bindings-dialog', showKeyBindingsDialog)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('show-key-bindings-dialog', showKeyBindingsDialog)
-})
 </script>
 
 <template>
@@ -228,17 +214,7 @@ onBeforeUnmount(() => {
         </el-row>
     </el-dialog>
 
-    <el-drawer v-model="keyBindingsDialogVisible" size="50%">
-      <template #header>
-        <h4>{{ t('title.keyBindings') }}</h4>
-      </template>
-      <template #default>
-        <el-table :data="keyBindings">
-          <el-table-column prop="keys" label="Key" />
-          <el-table-column prop="description" label="Description" />
-        </el-table>
-      </template>
-    </el-drawer>
+    <MagicKey />
 </template>
 
 <style>

console/atest-ui/src/components/MagicKey.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Magic } from '@/views/magicKeys'
+
+const { t } = useI18n()
+const keyBindingsDialogVisible = ref(false)
+const keyBindings = ref([])
+const showKeyBindingsDialog = (keys: any) => {
+  keyBindingsDialogVisible.value = true
+  keyBindings.value = keys.detail || []
+}
+
+onMounted(() => {
+  window.addEventListener(Magic.MagicKeyEventName, showKeyBindingsDialog)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener(Magic.MagicKeyEventName, showKeyBindingsDialog)
+})
+</script>
+
+<template>
+    <el-drawer v-model="keyBindingsDialogVisible" size="50%">
+      <template #header>
+        <h4>{{ t('title.keyBindings') }}</h4>
+      </template>
+      <template #default>
+        <el-table :data="keyBindings">
+          <el-table-column prop="keys" :label="t('field.shortcut')" />
+          <el-table-column prop="description" :label="t('field.description')" />
+        </el-table>
+      </template>
+    </el-drawer>
+</template>

console/atest-ui/src/locales/en.json

@@ -80,6 +80,8 @@
         "key": "Key",
         "value": "Value",
         "proxy": "Proxy",
+        "shortcut": "Shortcut",
+        "description": "Description",
         "insecure": "Insecure"
     },
     "proxy": {

console/atest-ui/src/locales/zh.json

@@ -75,6 +75,8 @@
         "key": "键",
         "value": "值",
         "proxy": "代理",
+        "shortcut": "快捷键",
+        "description": "描述",
         "insecure": "忽略证书验证"
     },
     "proxy": {

console/atest-ui/src/views/magicKeys.ts

@@ -33,11 +33,12 @@ interface MagicKey {
     Description?: string
 }
 
+const MagicKeyEventName = 'show-key-bindings-dialog'
 const AdvancedKeys = (keys: MagicKey[]) => {
     keys.push({
         Keys: ['ctrl+/'],
         Func: () => {
-            const event = new CustomEvent('show-key-bindings-dialog', {
+            const event = new CustomEvent(MagicKeyEventName, {
                 detail: keys.map((k) => ({
                     keys: k.Keys.join(', '),
                     description: k.Description ?? 'No description',
@@ -54,5 +55,5 @@ const AdvancedKeys = (keys: MagicKey[]) => {
 }
 
 export const Magic = {
-    Keys, AdvancedKeys
+    Keys, AdvancedKeys, MagicKeyEventName
 }