From f0c9b745456cdce2af3d94ecf172904432855b3f Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 18 May 2024 23:23:48 +0800
Subject: [PATCH] perf: support close tab by shortcut `Command+W`/`Control+W`
 (#258)

---
 frontend/src/AppContent.vue                     | 17 ++++++++++++++++-
 .../src/components/content/ContentValueTab.vue  | 10 +---------
 frontend/src/stores/tab.js                      | 13 +++++++++++++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index fe665d1..dba16a3 100644
--- a/frontend/src/AppContent.vue
+++ b/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"
diff --git a/frontend/src/components/content/ContentValueTab.vue b/frontend/src/components/content/ContentValueTab.vue
index c4a0857..61babf3 100644
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/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) {
-        $dialog.warning(i18n.t('dialogue.close_confirm', { name: tab.name }), () => {
-            browserStore.closeConnection(tab.name)
-        })
-    }
+    tabStore.closeTab(tab.name)
 }
 
 const tabMarkColor = computed(() => {
diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js
index 58f0f7a..7441bc6 100644
--- a/frontend/src/stores/tab.js
+++ b/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