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