| 提交 | 用户 | age | ||
| c303ec | 1 | import type { TabContentProps } from './types'; |
| 2f6253 | 2 | import type { DropMenu } from '/@/components/Dropdown'; |
| 陈 | 3 | |
| c303ec | 4 | import { computed, unref, reactive } from 'vue'; |
| V | 5 | import { TabContentEnum, MenuEventEnum } from './types'; |
| 2f6253 | 6 | import { tabStore } from '/@/store/modules/tab'; |
| 陈 | 7 | import router from '/@/router'; |
| c303ec | 8 | import { RouteLocationNormalized } from 'vue-router'; |
| V | 9 | import { useTabs } from '/@/hooks/web/useTabs'; |
| 10 | import { useI18n } from '/@/hooks/web/useI18n'; | |
| 2f6253 | 11 | |
| c303ec | 12 | const { t } = useI18n(); |
| cedba3 | 13 | |
| 2f6253 | 14 | export function useTabDropdown(tabContentProps: TabContentProps) { |
| c303ec | 15 | const state = reactive({ |
| V | 16 | current: null as Nullable<RouteLocationNormalized>, |
| 17 | currentIndex: 0, | |
| 2f6253 | 18 | }); |
| 陈 | 19 | |
| c303ec | 20 | const { currentRoute } = router; |
| V | 21 | |
| a65ad9 | 22 | const isTabs = computed(() => tabContentProps.type === TabContentEnum.TAB_TYPE); |
| c303ec | 23 | |
| V | 24 | const getCurrentTab = computed( |
| 25 | (): RouteLocationNormalized => { | |
| 26 | return unref(isTabs) ? tabContentProps.tabItem : unref(currentRoute); | |
| 27 | } | |
| 28 | ); | |
| 2f6253 | 29 | |
| 陈 | 30 | /** |
| cedba3 | 31 | * @description: drop-down list |
| 2f6253 | 32 | */ |
| 陈 | 33 | const getDropMenuList = computed(() => { |
| cedba3 | 34 | if (!unref(getCurrentTab)) return; |
| c303ec | 35 | const { meta } = unref(getCurrentTab); |
| V | 36 | const { path } = unref(currentRoute); |
| 2f6253 | 37 | |
| cedba3 | 38 | // Refresh button |
| c303ec | 39 | const curItem = state.current; |
| V | 40 | const index = state.currentIndex; |
| 2f6253 | 41 | const refreshDisabled = curItem ? curItem.path !== path : true; |
| cedba3 | 42 | // Close left |
| 2f6253 | 43 | const closeLeftDisabled = index === 0; |
| 陈 | 44 | |
| c303ec | 45 | const disabled = tabStore.getTabsState.length === 1; |
| V | 46 | |
| cedba3 | 47 | // Close right |
| c303ec | 48 | const closeRightDisabled = |
| V | 49 | index === tabStore.getTabsState.length - 1 && tabStore.getLastDragEndIndexState >= 0; |
| 50 | const dropMenuList: DropMenu[] = [ | |
| 51 | { | |
| 5dc822 | 52 | icon: 'ion:reload-sharp', |
| c303ec | 53 | event: MenuEventEnum.REFRESH_PAGE, |
| V | 54 | text: t('layout.multipleTab.redo'), |
| 55 | disabled: refreshDisabled, | |
| 56 | }, | |
| 57 | { | |
| 5dc822 | 58 | icon: 'clarity:close-line', |
| c303ec | 59 | event: MenuEventEnum.CLOSE_CURRENT, |
| V | 60 | text: t('layout.multipleTab.close'), |
| 61 | disabled: meta?.affix || disabled, | |
| 62 | divider: true, | |
| 63 | }, | |
| 64 | { | |
| 5dc822 | 65 | icon: 'line-md:arrow-close-left', |
| c303ec | 66 | event: MenuEventEnum.CLOSE_LEFT, |
| V | 67 | text: t('layout.multipleTab.closeLeft'), |
| 68 | disabled: closeLeftDisabled, | |
| 69 | divider: false, | |
| 70 | }, | |
| 71 | { | |
| 5dc822 | 72 | icon: 'line-md:arrow-close-right', |
| c303ec | 73 | event: MenuEventEnum.CLOSE_RIGHT, |
| V | 74 | text: t('layout.multipleTab.closeRight'), |
| 75 | disabled: closeRightDisabled, | |
| 76 | divider: true, | |
| 77 | }, | |
| 78 | { | |
| 5dc822 | 79 | icon: 'dashicons:align-center', |
| c303ec | 80 | event: MenuEventEnum.CLOSE_OTHER, |
| V | 81 | text: t('layout.multipleTab.closeOther'), |
| 82 | disabled: disabled, | |
| 83 | }, | |
| 84 | { | |
| 5dc822 | 85 | icon: 'clarity:minus-line', |
| c303ec | 86 | event: MenuEventEnum.CLOSE_ALL, |
| V | 87 | text: t('layout.multipleTab.closeAll'), |
| 88 | disabled: disabled, | |
| 89 | }, | |
| 90 | ]; | |
| 91 | ||
| 2f6253 | 92 | return dropMenuList; |
| 陈 | 93 | }); |
| 94 | ||
| c303ec | 95 | const getTrigger = computed(() => { |
| V | 96 | return unref(isTabs) ? ['contextmenu'] : ['click']; |
| 97 | }); | |
| 2f6253 | 98 | |
| c303ec | 99 | function handleContextMenu(tabItem: RouteLocationNormalized) { |
| V | 100 | return (e: Event) => { |
| 101 | if (!tabItem) return; | |
| 102 | e?.preventDefault(); | |
| 103 | const index = tabStore.getTabsState.findIndex((tab) => tab.path === tabItem.path); | |
| 104 | state.current = tabItem; | |
| 105 | state.currentIndex = index; | |
| 106 | }; | |
| 2f6253 | 107 | } |
| cedba3 | 108 | |
| V | 109 | // Handle right click event |
| 2f6253 | 110 | function handleMenuEvent(menu: DropMenu): void { |
| 0e7c57 | 111 | const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs(); |
| 2f6253 | 112 | const { event } = menu; |
| 陈 | 113 | switch (event) { |
| 114 | case MenuEventEnum.SCALE: | |
| 115 | scaleScreen(); | |
| 116 | break; | |
| 117 | case MenuEventEnum.REFRESH_PAGE: | |
| cedba3 | 118 | // refresh page |
| 2f6253 | 119 | refreshPage(); |
| 陈 | 120 | break; |
| cedba3 | 121 | // Close current |
| 2f6253 | 122 | case MenuEventEnum.CLOSE_CURRENT: |
| 0e7c57 | 123 | close(tabContentProps.tabItem); |
| 2f6253 | 124 | break; |
| cedba3 | 125 | // Close left |
| 2f6253 | 126 | case MenuEventEnum.CLOSE_LEFT: |
| 陈 | 127 | closeLeft(); |
| 128 | break; | |
| cedba3 | 129 | // Close right |
| 2f6253 | 130 | case MenuEventEnum.CLOSE_RIGHT: |
| 陈 | 131 | closeRight(); |
| 132 | break; | |
| cedba3 | 133 | // Close other |
| 2f6253 | 134 | case MenuEventEnum.CLOSE_OTHER: |
| 陈 | 135 | closeOther(); |
| 136 | break; | |
| cedba3 | 137 | // Close all |
| 2f6253 | 138 | case MenuEventEnum.CLOSE_ALL: |
| 陈 | 139 | closeAll(); |
| 140 | break; | |
| 141 | } | |
| 142 | } | |
| c303ec | 143 | return { getDropMenuList, handleMenuEvent, handleContextMenu, getTrigger, isTabs }; |
| 2f6253 | 144 | } |
