admin-vben5/packages/business/layouts/src/basic/tabbar/use-tabs.ts

244 lines
6.5 KiB
TypeScript
Raw Normal View History

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,
RouteLocationNormalizedGeneric,
2024-06-08 19:49:06 +08:00
} from 'vue-router';
2024-05-19 21:20:42 +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,
IcRoundFitScreen,
2024-05-19 21:20:42 +08:00
IcRoundMultipleStop,
IcRoundRefresh,
IcRoundTableView,
IcTwotoneFitScreen,
2024-05-19 21:20:42 +08:00
MdiArrowExpandHorizontal,
MdiFormatHorizontalAlignLeft,
MdiFormatHorizontalAlignRight,
MdiPin,
MdiPinOff,
} from '@vben-core/iconify';
import { $t, useI18n } from '@vben-core/locales';
import { updatePreferences, usePreferences } from '@vben-core/preferences';
import {
storeToRefs,
useCoreAccessStore,
useCoreTabbarStore,
} from '@vben-core/stores';
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();
const accessStore = useCoreAccessStore();
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;
});
const { locale } = useI18n();
const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
2024-07-10 00:50:41 +08:00
watch([() => coreTabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
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
};
function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
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[] = [
{
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',
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',
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',
text: affixTab
? $t('preferences.tabbar.contextMenu.unpin')
: $t('preferences.tabbar.contextMenu.pin'),
2024-05-19 21:20:42 +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',
text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
},
{
handler: async () => {
if (!contentIsMaximize.value) {
await router.push(tab.fullPath);
}
updateContentScreen(!contentIsMaximize.value);
},
icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
separator: true,
text: contentIsMaximize.value
? $t('preferences.tabbar.contextMenu.restoreMaximize')
: $t('preferences.tabbar.contextMenu.maximize'),
},
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',
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,
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',
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',
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
};
}
export { updateContentScreen, useTabs };