perf: support close tab by shortcut `Command+W`/`Control+W` (#258)

frontend/src/AppContent.vue

@@ -110,12 +110,27 @@ onMounted(async () => {
     const maximised = await WindowIsMaximised()
     onToggleMaximize(maximised)
 })
+
+const onKeyShortcut = (e) => {
+    switch (e.key) {
+        case 'w':
+            if (e.metaKey) {
+                // close current tab
+                const tabStore = useTabStore()
+                const currentTab = tabStore.currentTab
+                if (currentTab != null) {
+                    tabStore.closeTab(currentTab.name)
+                }
+            }
+            break
+    }
+}
 </script>
 
 <template>
     <!-- app content-->
     <n-spin :show="props.loading" :style="spinStyle" :theme-overrides="{ opacitySpinning: 0 }">
-        <div id="app-content-wrapper" :style="wrapperStyle" class="flex-box-v">
+        <div id="app-content-wrapper" :style="wrapperStyle" class="flex-box-v" tabindex="0" @keydown="onKeyShortcut">
             <!-- title bar -->
             <div
                 id="app-toolbar"

frontend/src/components/content/ContentValueTab.vue

@@ -2,32 +2,24 @@
 import Server from '@/components/icons/Server.vue'
 import useTabStore from 'stores/tab.js'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { get, map } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import useConnectionStore from 'stores/connections.js'
 import { extraTheme } from '@/utils/extra_theme.js'
 import usePreferencesStore from 'stores/preferences.js'
-import useBrowserStore from 'stores/browser.js'
 
 /**
  * Value content tab on head
  */
 
 const themeVars = useThemeVars()
-const i18n = useI18n()
 const tabStore = useTabStore()
 const connectionStore = useConnectionStore()
-const browserStore = useBrowserStore()
 const prefStore = usePreferencesStore()
 
 const onCloseTab = (tabIndex) => {
     const tab = get(tabStore.tabs, tabIndex)
-    if (tab != null) {
+    tabStore.closeTab(tab.name)
-        $dialog.warning(i18n.t('dialogue.close_confirm', { name: tab.name }), () => {
-            browserStore.closeConnection(tab.name)
-        })
-    }
 }
 
 const tabMarkColor = computed(() => {

frontend/src/stores/tab.js

@@ -1,6 +1,8 @@
 import { assign, find, findIndex, get, includes, indexOf, isEmpty, pullAt, remove, set, size } from 'lodash'
 import { defineStore } from 'pinia'
 import { TabItem } from '@/objects/tabItem.js'
+import useBrowserStore from 'stores/browser.js'
+import { i18nGlobal } from '@/utils/i18n.js'
 
 const useTabStore = defineStore('tab', {
     /**
@@ -132,6 +134,17 @@ const useTabStore = defineStore('tab', {
             this.upsertTab({ server, clearValue: true })
         },
 
+        /**
+         *
+         * @param {string} tabName
+         */
+        closeTab(tabName) {
+            $dialog.warning(i18nGlobal.t('dialogue.close_confirm', { name: tabName }), () => {
+                const browserStore = useBrowserStore()
+                browserStore.closeConnection(tabName)
+            })
+        },
+
         /**
          * update or insert a new tab if not exists with the same name
          * @param {string} subTab