refs #3300 Handle shortcut keys in Settings

src/renderer/components/Settings.vue

@@ -13,7 +13,6 @@
       </el-row>
     </el-header>
     <el-container>
-      <div></div>
       <el-aside width="240px" class="menu">
         <el-menu
           :default-active="activeRoute"
@@ -45,6 +44,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import { MUTATION_TYPES } from '@/store/Settings'
@@ -56,6 +56,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
+    const { escape } = useMagicKeys()
 
     const primaryColor = computed(() => store.state.App.theme.primary_color)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
@@ -67,6 +68,10 @@ export default defineComponent({
       router.push(`/${id.value}/settings/general`)
     })
 
+    whenever(escape, () => {
+      close()
+    })
+
     const close = () => {
       router.push(`/${id.value}/home`)
     }