Blame view

src/layouts/default/tabs/useTabDropdown.ts 4.96 KB
vben authored
1
import type { TabContentProps } from './types';
陈文彬 authored
2
3
import type { DropMenu } from '/@/components/Dropdown';
vben authored
4
5
import { computed, unref, reactive } from 'vue';
import { TabContentEnum, MenuEventEnum } from './types';
陈文彬 authored
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';
陈文彬 authored
13
vben authored
14
const { t } = useI18n();
15
陈文彬 authored
16
export function useTabDropdown(tabContentProps: TabContentProps) {
vben authored
17
18
19
  const state = reactive({
    current: null as Nullable<RouteLocationNormalized>,
    currentIndex: 0,
陈文彬 authored
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);
  });
陈文彬 authored
38
39

  /**
40
   * @description: drop-down list
陈文彬 authored
41
42
   */
  const getDropMenuList = computed(() => {
43
    if (!unref(getCurrentTab)) return;
vben authored
44
45
    const { meta } = unref(getCurrentTab);
    const { path } = unref(currentRoute);
陈文彬 authored
46
47
    // Refresh button
vben authored
48
49
    const curItem = state.current;
    const index = state.currentIndex;
陈文彬 authored
50
    const refreshDisabled = curItem ? curItem.path !== path : true;
51
    // Close left
陈文彬 authored
52
53
    const closeLeftDisabled = index === 0;
vben authored
54
55
    const disabled = tabStore.getTabsState.length === 1;
56
    // Close right
vben authored
57
58
59
60
    const closeRightDisabled =
      index === tabStore.getTabsState.length - 1 && tabStore.getLastDragEndIndexState >= 0;
    const dropMenuList: DropMenu[] = [
      {
陈小婷 authored
61
        icon: 'ion:reload-sharp',
vben authored
62
63
64
65
66
        event: MenuEventEnum.REFRESH_PAGE,
        text: t('layout.multipleTab.redo'),
        disabled: refreshDisabled,
      },
      {
陈小婷 authored
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,
      },
      {
陈小婷 authored
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,
      },
      {
陈小婷 authored
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,
      },
      {
陈小婷 authored
88
        icon: 'dashicons:align-center',
vben authored
89
90
91
92
93
        event: MenuEventEnum.CLOSE_OTHER,
        text: t('layout.multipleTab.closeOther'),
        disabled: disabled,
      },
      {
陈小婷 authored
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,
      });
陈文彬 authored
109
110
111
112
113
    }

    return dropMenuList;
  });
vben authored
114
115
116
  const getTrigger = computed(() => {
    return unref(isTabs) ? ['contextmenu'] : ['click'];
  });
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;
    };
陈文彬 authored
126
  }
127
陈文彬 authored
128
  function scaleScreen() {
vben authored
129
130
131
    const isScale = !unref(getShowMenu) && !unref(getShowHeader);
    setMenuSetting({
      show: isScale,
陈文彬 authored
132
    });
vben authored
133
134
    setHeaderSetting({
      show: isScale,
陈文彬 authored
135
136
137
    });
  }
138
  // Handle right click event
陈文彬 authored
139
  function handleMenuEvent(menu: DropMenu): void {
vben authored
140
    const { refreshPage, closeAll, closeCurrent, closeLeft, closeOther, closeRight } = useTabs();
陈文彬 authored
141
142
143
144
145
146
    const { event } = menu;
    switch (event) {
      case MenuEventEnum.SCALE:
        scaleScreen();
        break;
      case MenuEventEnum.REFRESH_PAGE:
147
        // refresh page
陈文彬 authored
148
149
        refreshPage();
        break;
150
      // Close current
陈文彬 authored
151
152
153
      case MenuEventEnum.CLOSE_CURRENT:
        closeCurrent();
        break;
154
      // Close left
陈文彬 authored
155
156
157
      case MenuEventEnum.CLOSE_LEFT:
        closeLeft();
        break;
158
      // Close right
陈文彬 authored
159
160
161
      case MenuEventEnum.CLOSE_RIGHT:
        closeRight();
        break;
162
      // Close other
陈文彬 authored
163
164
165
      case MenuEventEnum.CLOSE_OTHER:
        closeOther();
        break;
166
      // Close all
陈文彬 authored
167
168
169
170
171
      case MenuEventEnum.CLOSE_ALL:
        closeAll();
        break;
    }
  }
vben authored
172
  return { getDropMenuList, handleMenuEvent, handleContextMenu, getTrigger, isTabs };
陈文彬 authored
173
}