perf: support close tab by shortcut `Command+W`/`Control+W` (#258)
This commit is contained in:
parent
e5fed29427
commit
f0c9b74545
|
@ -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"
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue