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)
|
|||
|
|
};
|
|||
|
|
}
|