2024-05-19 21:20:42 +08:00
|
|
|
import type { IContextMenuItem } from '@vben-core/tabs-ui';
|
|
|
|
import type { TabItem } from '@vben-core/typings';
|
2024-06-08 19:49:06 +08:00
|
|
|
import type {
|
|
|
|
RouteLocationNormalized,
|
2024-07-05 11:12:38 +08:00
|
|
|
RouteLocationNormalizedGeneric,
|
2024-06-08 19:49:06 +08:00
|
|
|
} from 'vue-router';
|
2024-05-19 21:20:42 +08:00
|
|
|
|
2024-07-05 10:04:16 +08:00
|
|
|
import { computed, ref, watch } from 'vue';
|
2024-06-08 19:49:06 +08:00
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
2024-05-19 21:20:42 +08:00
|
|
|
import {
|
|
|
|
IcRoundClose,
|
2024-07-12 23:43:47 +08:00
|
|
|
IcRoundFitScreen,
|
2024-05-19 21:20:42 +08:00
|
|
|
IcRoundMultipleStop,
|
|
|
|
IcRoundRefresh,
|
2024-07-12 23:43:47 +08:00
|
|
|
IcRoundTableView,
|
|
|
|
IcTwotoneFitScreen,
|
2024-05-19 21:20:42 +08:00
|
|
|
MdiArrowExpandHorizontal,
|
|
|
|
MdiFormatHorizontalAlignLeft,
|
|
|
|
MdiFormatHorizontalAlignRight,
|
|
|
|
MdiPin,
|
|
|
|
MdiPinOff,
|
|
|
|
} from '@vben-core/iconify';
|
2024-07-07 00:17:44 +08:00
|
|
|
import { $t, useI18n } from '@vben-core/locales';
|
2024-07-12 23:43:47 +08:00
|
|
|
import { updatePreferences, usePreferences } from '@vben-core/preferences';
|
2024-07-05 23:15:46 +08:00
|
|
|
import {
|
|
|
|
storeToRefs,
|
|
|
|
useCoreAccessStore,
|
|
|
|
useCoreTabbarStore,
|
|
|
|
} from '@vben-core/stores';
|
2024-07-12 23:43:47 +08:00
|
|
|
import { filterTree, openWindow } from '@vben-core/toolkit';
|
|
|
|
|
|
|
|
function updateContentScreen(screen: boolean) {
|
|
|
|
updatePreferences({
|
|
|
|
header: {
|
|
|
|
hidden: !!screen,
|
|
|
|
},
|
|
|
|
sidebar: {
|
|
|
|
hidden: !!screen,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2024-05-19 21:20:42 +08:00
|
|
|
|
|
|
|
function useTabs() {
|
|
|
|
const router = useRouter();
|
|
|
|
const route = useRoute();
|
2024-07-05 23:15:46 +08:00
|
|
|
const accessStore = useCoreAccessStore();
|
2024-07-12 23:43:47 +08:00
|
|
|
const { contentIsMaximize } = usePreferences();
|
2024-07-10 00:50:41 +08:00
|
|
|
const coreTabbarStore = useCoreTabbarStore();
|
2024-05-19 21:20:42 +08:00
|
|
|
const { accessMenus } = storeToRefs(accessStore);
|
|
|
|
|
|
|
|
const currentActive = computed(() => {
|
|
|
|
return route.path;
|
|
|
|
});
|
|
|
|
|
2024-07-05 10:04:16 +08:00
|
|
|
const { locale } = useI18n();
|
2024-07-05 11:12:38 +08:00
|
|
|
const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
|
2024-07-10 00:50:41 +08:00
|
|
|
watch([() => coreTabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
|
2024-07-05 10:04:16 +08:00
|
|
|
currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
|
2024-05-19 21:20:42 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 初始化固定标签页
|
|
|
|
*/
|
|
|
|
const initAffixTabs = () => {
|
|
|
|
const affixTabs = filterTree(router.getRoutes(), (route) => {
|
|
|
|
return !!route.meta?.affixTab;
|
|
|
|
});
|
2024-07-10 00:50:41 +08:00
|
|
|
coreTabbarStore.setAffixTabs(affixTabs);
|
2024-05-19 21:20:42 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
// 点击tab,跳转路由
|
|
|
|
const handleClick = (key: string) => {
|
|
|
|
router.push(key);
|
|
|
|
};
|
|
|
|
|
|
|
|
// 关闭tab
|
|
|
|
const handleClose = async (key: string) => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeTabByKey(key, router);
|
2024-05-19 21:20:42 +08:00
|
|
|
};
|
|
|
|
|
2024-07-05 11:12:38 +08:00
|
|
|
function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
|
2024-05-21 21:45:48 +08:00
|
|
|
return {
|
|
|
|
...tab,
|
|
|
|
meta: {
|
|
|
|
...tab.meta,
|
|
|
|
title: $t(tab.meta.title as string),
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-05-19 21:20:42 +08:00
|
|
|
watch(
|
|
|
|
() => accessMenus.value,
|
|
|
|
() => {
|
|
|
|
initAffixTabs();
|
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
);
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => route.path,
|
|
|
|
() => {
|
2024-07-10 00:50:41 +08:00
|
|
|
coreTabbarStore.addTab(route as RouteLocationNormalized);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
);
|
|
|
|
|
|
|
|
const createContextMenus = (tab: TabItem) => {
|
2024-07-10 00:50:41 +08:00
|
|
|
const tabs = coreTabbarStore.getTabs;
|
|
|
|
const affixTabs = coreTabbarStore.affixTabs;
|
2024-05-19 21:20:42 +08:00
|
|
|
const index = tabs.findIndex((item) => item.path === tab.path);
|
|
|
|
|
|
|
|
const disabled = tabs.length <= 1;
|
|
|
|
|
|
|
|
const { meta } = tab;
|
|
|
|
const affixTab = meta?.affixTab ?? false;
|
|
|
|
const isCurrentTab = route.path === tab.path;
|
|
|
|
|
|
|
|
// 当前处于最左侧或者减去固定标签页的数量等于0
|
|
|
|
const closeLeftDisabled =
|
|
|
|
index === 0 || index - affixTabs.length <= 0 || !isCurrentTab;
|
|
|
|
|
|
|
|
const closeRightDisabled = !isCurrentTab || index === tabs.length - 1;
|
|
|
|
|
|
|
|
const closeOtherDisabled =
|
|
|
|
disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
|
|
|
|
|
|
|
|
const menus: IContextMenuItem[] = [
|
2024-07-13 16:35:47 +08:00
|
|
|
{
|
|
|
|
handler: async () => {
|
|
|
|
if (!contentIsMaximize.value) {
|
|
|
|
await router.push(tab.fullPath);
|
|
|
|
}
|
|
|
|
updateContentScreen(!contentIsMaximize.value);
|
|
|
|
},
|
|
|
|
icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
|
|
|
|
key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
|
|
|
|
text: contentIsMaximize.value
|
|
|
|
? $t('preferences.tabbar.contextMenu.restoreMaximize')
|
|
|
|
: $t('preferences.tabbar.contextMenu.maximize'),
|
|
|
|
},
|
2024-05-19 21:20:42 +08:00
|
|
|
{
|
|
|
|
disabled: !isCurrentTab,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.refresh(router);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: IcRoundRefresh,
|
|
|
|
key: 'reload',
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.reload'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
disabled: !!affixTab || disabled,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeTab(tab, router);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: IcRoundClose,
|
|
|
|
key: 'close',
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.close'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
handler: async () => {
|
|
|
|
await (affixTab
|
2024-07-10 00:50:41 +08:00
|
|
|
? coreTabbarStore.unpinTab(tab)
|
|
|
|
: coreTabbarStore.pinTab(tab));
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: affixTab ? MdiPinOff : MdiPin,
|
|
|
|
key: 'affix',
|
2024-07-05 10:49:39 +08:00
|
|
|
text: affixTab
|
2024-07-10 21:55:16 +08:00
|
|
|
? $t('preferences.tabbar.contextMenu.unpin')
|
|
|
|
: $t('preferences.tabbar.contextMenu.pin'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
2024-07-12 23:43:47 +08:00
|
|
|
{
|
|
|
|
handler: async () => {
|
|
|
|
const { hash, origin } = location;
|
|
|
|
const path = tab.fullPath;
|
|
|
|
const fullPath = path.startsWith('/') ? path : `/${path}`;
|
|
|
|
const url = `${origin}${hash ? '/#' : ''}${fullPath}`;
|
|
|
|
openWindow(url, { target: '_blank' });
|
|
|
|
},
|
|
|
|
icon: IcRoundTableView,
|
|
|
|
key: 'open-in-new-window',
|
|
|
|
separator: true,
|
2024-07-13 16:35:47 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
|
2024-07-12 23:43:47 +08:00
|
|
|
},
|
2024-07-13 16:35:47 +08:00
|
|
|
|
2024-05-19 21:20:42 +08:00
|
|
|
{
|
|
|
|
disabled: closeLeftDisabled,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeLeftTabs(tab);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: MdiFormatHorizontalAlignLeft,
|
|
|
|
key: 'close-left',
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.closeLeft'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
disabled: closeRightDisabled,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeRightTabs(tab);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: MdiFormatHorizontalAlignRight,
|
|
|
|
key: 'close-right',
|
|
|
|
separator: true,
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.closeRight'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
disabled: closeOtherDisabled,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeOtherTabs(tab);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: MdiArrowExpandHorizontal,
|
|
|
|
key: 'close-other',
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.closeOther'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
disabled,
|
|
|
|
handler: async () => {
|
2024-07-10 00:50:41 +08:00
|
|
|
await coreTabbarStore.closeAllTabs(router);
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
icon: IcRoundMultipleStop,
|
|
|
|
key: 'close-all',
|
2024-07-10 21:55:16 +08:00
|
|
|
text: $t('preferences.tabbar.contextMenu.closeAll'),
|
2024-05-19 21:20:42 +08:00
|
|
|
},
|
|
|
|
];
|
|
|
|
return menus;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 取消固定标签页
|
|
|
|
*/
|
2024-07-10 00:50:41 +08:00
|
|
|
const handleUnpinTab = async (tab: TabItem) => {
|
|
|
|
await coreTabbarStore.unpinTab(tab);
|
2024-05-19 21:20:42 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
|
|
|
createContextMenus,
|
|
|
|
currentActive,
|
|
|
|
currentTabs,
|
|
|
|
handleClick,
|
|
|
|
handleClose,
|
2024-07-10 00:50:41 +08:00
|
|
|
handleUnpinTab,
|
2024-05-19 21:20:42 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2024-07-12 23:43:47 +08:00
|
|
|
export { updateContentScreen, useTabs };
|