100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import { useEffect } from 'react';
|
||
import { useLocation } from '@umijs/max';
|
||
import { tabsManager } from './MyPageContainer';
|
||
|
||
export interface UsePageTabsOptions {
|
||
/** 标签页的唯一标识 */
|
||
tabKey: string;
|
||
/** 标签页显示的标题 */
|
||
tabLabel: string;
|
||
/** 是否可关闭，默认为true */
|
||
closable?: boolean;
|
||
/** 是否自动添加到标签页，默认为true */
|
||
autoAdd?: boolean;
|
||
}
|
||
|
||
/**
|
||
* 页面标签页Hook
|
||
* 用于简化页面标签页的管理
|
||
*/
|
||
export function usePageTabs(options: UsePageTabsOptions) {
|
||
const location = useLocation();
|
||
const { tabKey, tabLabel, closable = true, autoAdd = true } = options;
|
||
|
||
useEffect(() => {
|
||
if (autoAdd) {
|
||
tabsManager.addTab({
|
||
key: tabKey,
|
||
label: tabLabel,
|
||
path: location.pathname + location.search,
|
||
closable
|
||
});
|
||
}
|
||
}, [tabKey, tabLabel, closable, autoAdd, location.pathname, location.search]);
|
||
|
||
return {
|
||
/** 添加新标签页 */
|
||
addTab: (tab: { key: string; label: string; path?: string; closable?: boolean }) => {
|
||
tabsManager.addTab({
|
||
...tab,
|
||
path: tab.path || location.pathname + location.search,
|
||
closable: tab.closable ?? true
|
||
});
|
||
},
|
||
|
||
/** 关闭指定标签页 */
|
||
removeTab: (key: string) => {
|
||
tabsManager.removeTab(key);
|
||
},
|
||
|
||
/** 切换到指定标签页 */
|
||
switchTab: (key: string) => {
|
||
tabsManager.setActiveKey(key);
|
||
},
|
||
|
||
/** 关闭其他标签页 */
|
||
closeOtherTabs: (currentKey?: string) => {
|
||
tabsManager.closeOtherTabs(currentKey || tabKey);
|
||
},
|
||
|
||
/** 关闭左侧标签页 */
|
||
closeLeftTabs: (currentKey?: string) => {
|
||
tabsManager.closeLeftTabs(currentKey || tabKey);
|
||
},
|
||
|
||
/** 关闭右侧标签页 */
|
||
closeRightTabs: (currentKey?: string) => {
|
||
tabsManager.closeRightTabs(currentKey || tabKey);
|
||
},
|
||
|
||
/** 刷新标签页 */
|
||
refreshTab: (key?: string) => {
|
||
tabsManager.refreshTab(key || tabKey);
|
||
},
|
||
|
||
/** 获取当前所有标签页 */
|
||
getTabs: () => tabsManager.getTabs(),
|
||
|
||
/** 获取当前激活的标签页key */
|
||
getActiveKey: () => tabsManager.getActiveKey()
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 标签页管理器Hook
|
||
* 用于在组件中监听标签页状态变化
|
||
*/
|
||
export function useTabsManager() {
|
||
return {
|
||
tabsManager,
|
||
addTab: tabsManager.addTab.bind(tabsManager),
|
||
removeTab: tabsManager.removeTab.bind(tabsManager),
|
||
setActiveKey: tabsManager.setActiveKey.bind(tabsManager),
|
||
closeOtherTabs: tabsManager.closeOtherTabs.bind(tabsManager),
|
||
closeLeftTabs: tabsManager.closeLeftTabs.bind(tabsManager),
|
||
closeRightTabs: tabsManager.closeRightTabs.bind(tabsManager),
|
||
refreshTab: tabsManager.refreshTab.bind(tabsManager),
|
||
getTabs: tabsManager.getTabs.bind(tabsManager),
|
||
getActiveKey: tabsManager.getActiveKey.bind(tabsManager)
|
||
};
|
||
} |