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

This commit is contained in:
Lykin 2024-05-18 23:23:48 +08:00
parent e5fed29427
commit f0c9b74545
3 changed files with 30 additions and 10 deletions

View File

@ -110,12 +110,27 @@ onMounted(async () => {
const maximised = await WindowIsMaximised() const maximised = await WindowIsMaximised()
onToggleMaximize(maximised) 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> </script>
<template> <template>
<!-- app content--> <!-- app content-->
<n-spin :show="props.loading" :style="spinStyle" :theme-overrides="{ opacitySpinning: 0 }"> <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 --> <!-- title bar -->
<div <div
id="app-toolbar" id="app-toolbar"

View File

@ -2,32 +2,24 @@
import Server from '@/components/icons/Server.vue' import Server from '@/components/icons/Server.vue'
import useTabStore from 'stores/tab.js' import useTabStore from 'stores/tab.js'
import { computed } from 'vue' import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { get, map } from 'lodash' import { get, map } from 'lodash'
import { useThemeVars } from 'naive-ui' import { useThemeVars } from 'naive-ui'
import useConnectionStore from 'stores/connections.js' import useConnectionStore from 'stores/connections.js'
import { extraTheme } from '@/utils/extra_theme.js' import { extraTheme } from '@/utils/extra_theme.js'
import usePreferencesStore from 'stores/preferences.js' import usePreferencesStore from 'stores/preferences.js'
import useBrowserStore from 'stores/browser.js'
/** /**
* Value content tab on head * Value content tab on head
*/ */
const themeVars = useThemeVars() const themeVars = useThemeVars()
const i18n = useI18n()
const tabStore = useTabStore() const tabStore = useTabStore()
const connectionStore = useConnectionStore() const connectionStore = useConnectionStore()
const browserStore = useBrowserStore()
const prefStore = usePreferencesStore() const prefStore = usePreferencesStore()
const onCloseTab = (tabIndex) => { const onCloseTab = (tabIndex) => {
const tab = get(tabStore.tabs, 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(() => { const tabMarkColor = computed(() => {

View File

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