diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue index 69cdc290..4917358f 100644 --- a/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue +++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue @@ -33,7 +33,7 @@ interface Props { y: number; } -type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-all'; +type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all'; type Option = DropdownOption & { key: DropdownKey; }; @@ -49,7 +49,7 @@ const emit = defineEmits<{ }>(); const app = useAppStore(); -const { removeMultiTab, clearMultiTab } = useAppStore(); +const { removeMultiTab, clearMultiTab, clearLeftMultiTab, clearRightMultiTab } = useAppStore(); const { handleReload } = useReloadInject(); const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible); @@ -71,6 +71,16 @@ const options = computed(() => [ key: 'close-other', icon: iconifyRender('ant-design:column-width-outlined') }, + { + label: '关闭左边标签页', + key: 'close-left', + icon: iconifyRender('mdi:format-horizontal-align-left') + }, + { + label: '关闭右边标签页', + key: 'close-right', + icon: iconifyRender('mdi:format-horizontal-align-right') + }, { label: '关闭全部标签页', key: 'close-all', @@ -88,7 +98,7 @@ const actionMap = new Map void>([ [ 'close-current', () => { - removeMultiTab(app.multiTab.activeRoute); + removeMultiTab(props.currentPath); } ], [ @@ -97,6 +107,18 @@ const actionMap = new Map void>([ clearMultiTab([props.currentPath]); } ], + [ + 'close-left', + () => { + clearLeftMultiTab(props.currentPath); + } + ], + [ + 'close-right', + () => { + clearRightMultiTab(props.currentPath); + } + ], [ 'close-all', () => { diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts index acf78598..45a484c4 100644 --- a/src/store/modules/app/index.ts +++ b/src/store/modules/app/index.ts @@ -110,6 +110,37 @@ const appStore = defineStore({ router.push(activePath); this.setActiveMultiTab(activePath); }, + /** 删除左边多页签 */ + clearLeftMultiTab(fullPath: string) { + const { routes } = this.multiTab; + const currentIndex = routes.findIndex(route => route.fullPath === fullPath); + const activeIndex = this.activeMultiTabIndex; + if (currentIndex > -1) { + const remain = [ROUTE_HOME.path, ...routes.slice(currentIndex).map(v => v.fullPath)]; + const updateRoutes = routes.filter(v => remain.includes(v.fullPath)); + this.multiTab.routes = updateRoutes; + if (activeIndex < currentIndex) { + const activePath = updateRoutes[updateRoutes.length - 1].fullPath; + router.push(activePath); + this.setActiveMultiTab(activePath); + } + } + }, + /** 删除右边多页签 */ + clearRightMultiTab(fullPath: string) { + const { routes } = this.multiTab; + const currentIndex = routes.findIndex(route => route.fullPath === fullPath); + const activeIndex = this.activeMultiTabIndex; + if (currentIndex > -1) { + const remain = [ROUTE_HOME.path, ...routes.slice(0, currentIndex + 1).map(v => v.fullPath)]; + const updateRoutes = routes.filter(v => remain.includes(v.fullPath)); + this.multiTab.routes = updateRoutes; + if (activeIndex > currentIndex) { + router.push(fullPath); + this.setActiveMultiTab(fullPath); + } + } + }, /** 点击单个页签tab */ handleClickTab(fullPath: string) { if (this.multiTab.activeRoute !== fullPath) {