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

208 lines
5.3 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,
IcRoundMultipleStop,
IcRoundRefresh,
MdiArrowExpandHorizontal,
MdiFormatHorizontalAlignLeft,
MdiFormatHorizontalAlignRight,
MdiPin,
MdiPinOff,
} from '@vben-core/iconify';
import { $t, useI18n } from '@vben-core/locales';
import {
storeToRefs,
useCoreAccessStore,
useCoreTabbarStore,
} from '@vben-core/stores';
2024-05-19 21:20:42 +08:00
import { filterTree } from '@vben-core/toolkit';
function useTabs() {
const router = useRouter();
const route = useRoute();
const accessStore = useCoreAccessStore();
const tabbarStore = 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[]>();
watch([() => tabbarStore.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;
});
tabbarStore.setAffixTabs(affixTabs);
2024-05-19 21:20:42 +08:00
};
// 点击tab,跳转路由
const handleClick = (key: string) => {
router.push(key);
};
// 关闭tab
const handleClose = async (key: string) => {
await tabbarStore.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,
() => {
tabbarStore.addTab(route as RouteLocationNormalized);
2024-05-19 21:20:42 +08:00
},
{ immediate: true },
);
const createContextMenus = (tab: TabItem) => {
const tabs = tabbarStore.getTabs;
const affixTabs = tabbarStore.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 () => {
await tabbarStore.refresh(router);
2024-05-19 21:20:42 +08:00
},
icon: IcRoundRefresh,
key: 'reload',
text: $t('preferences.tabbar.context-menu.reload'),
2024-05-19 21:20:42 +08:00
},
{
disabled: !!affixTab || disabled,
handler: async () => {
await tabbarStore.closeTab(tab, router);
2024-05-19 21:20:42 +08:00
},
icon: IcRoundClose,
key: 'close',
text: $t('preferences.tabbar.context-menu.close'),
2024-05-19 21:20:42 +08:00
},
{
handler: async () => {
await (affixTab
? tabbarStore.unPushPinTab(tab)
: tabbarStore.pushPinTab(tab));
2024-05-19 21:20:42 +08:00
},
icon: affixTab ? MdiPinOff : MdiPin,
key: 'affix',
separator: true,
text: affixTab
? $t('preferences.tabbar.context-menu.unpin')
: $t('preferences.tabbar.context-menu.pin'),
2024-05-19 21:20:42 +08:00
},
{
disabled: closeLeftDisabled,
handler: async () => {
await tabbarStore.closeLeftTabs(tab);
2024-05-19 21:20:42 +08:00
},
icon: MdiFormatHorizontalAlignLeft,
key: 'close-left',
text: $t('preferences.tabbar.context-menu.close-left'),
2024-05-19 21:20:42 +08:00
},
{
disabled: closeRightDisabled,
handler: async () => {
await tabbarStore.closeRightTabs(tab);
2024-05-19 21:20:42 +08:00
},
icon: MdiFormatHorizontalAlignRight,
key: 'close-right',
separator: true,
text: $t('preferences.tabbar.context-menu.close-right'),
2024-05-19 21:20:42 +08:00
},
{
disabled: closeOtherDisabled,
handler: async () => {
await tabbarStore.closeOtherTabs(tab);
2024-05-19 21:20:42 +08:00
},
icon: MdiArrowExpandHorizontal,
key: 'close-other',
text: $t('preferences.tabbar.context-menu.close-other'),
2024-05-19 21:20:42 +08:00
},
{
disabled,
handler: async () => {
await tabbarStore.closeAllTabs(router);
2024-05-19 21:20:42 +08:00
},
icon: IcRoundMultipleStop,
key: 'close-all',
text: $t('preferences.tabbar.context-menu.close-all'),
2024-05-19 21:20:42 +08:00
},
// {
// icon: 'icon-[material-symbols--back-to-tab-sharp]',
// key: 'close-all',
// text: '新窗口打开',
// },
];
return menus;
};
/**
*
*/
const handleUnPushPin = async (tab: TabItem) => {
await tabbarStore.unPushPinTab(tab);
2024-05-19 21:20:42 +08:00
};
return {
createContextMenus,
currentActive,
currentTabs,
handleClick,
handleClose,
handleUnPushPin,
};
}
export { useTabs };