多页签开发记录

{
  ...,
  multipleTabs: true, // 开启多页签模式
}

{
  ...
  {
    path: '/templates/step-form',
    name: '分步表单',
    // group: '应用',
    component: './Templates/StepForm',
    menuKey: 'step',
    access: 'normalRouteFilter',
    // 多页签相关配置
    tabProps: {
      closeTip: true, // 关闭页签/刷新浏览器时的提示，默认为false
    },
  },
  ...
}

import { useGoBack } from '@/utils/hooks';

const { goBack } = useGoBack(); // 引入自定义hooks中的返回上一页方法

goBack(); // 解决因多页签切换导致返回的上一页面不正确的问题

import { useModel } from '@umijs/max';

const { closeTab } = useModel('tabs');

closeTab(); // 关闭当前页签

// /./ 表示全匹配，也就是全部的路由都保持
keepalive: [/./],
// hasDropdown 表示是否使用默认的右侧功能，关闭左侧，右侧其它等
tabsLayout: {
	hasDropdown: true,
}

const tabTitles = {};   // 各路由对应页签名称map
const tabContents = {}; // 各路由对应页面内容map
const allMenuObj = {};  // 所有路由相关信息

const getTabObj = useMemoizedFn((arr = [], parent = {}) => {
  arr.forEach((item) => {
    tabContents[item.id] = item.element;

    if (!tabTitles[item.id]) {
      tabTitles[item.id] = item?.name || parent?.name;
    }

    if (item?.path && !allMenuObj[item?.path]) {
      allMenuObj[item?.path] = item;
    }

    if (!isEmptyArray(item?.children)) {
      getTabObj(item.children, item);
    }
  });
});
getTabObj(menuData);

const oldScrollTop = useRef(); // 记录上一个页面的滚动高度

// 切换 Tab
const switchTab = useMemoizedFn((newActiveTab) => {
  const currTab = getCurrTab(newActiveTab);
  if (currTab) {
    // 切换页签前记录上个tab页的滚动高度
    oldScrollTop.current = document.documentElement.scrollTop;
    history.push(currTab.pathname);
    setActiveTab(newActiveTab);
  }
});


// 监听路由变化，更新页签列表信息，激活页签
useEffect(() => {
  if (location.pathname && initialState?.settings?.multipleTabs) {
    ...

    // tabItems中的具体信息
    const currTabItem = {
      id: pathRouteProps?.id,
      title: tabTitles[pathRouteProps?.id],
      pathname: pathname + search,
      tabProps: pathRouteProps?.tabProps, // 相关自定义页签配置
      scrollTop: 0, // 对应页签滚动高度
    };
    
    ...
    
    // 若存在历史激活的页签，保存/更新其scrollTop
    if (lastIndex !== -1) {
      next[lastIndex].scrollTop = oldScrollTop.current || document.documentElement.scrollTop;
    }

    // 若新页签已在页签列表，更新scrollTop
    if (currIndex !== -1) {
      currTabItem.scrollTop = next[currIndex]?.scrollTop || 0;
    }
    
    setTimeout(() => {
      // 激活新页签同时设置新页签的滚动高度
      document.documentElement.scrollTop = currTab?.scrollTop || 0;
      activateTab();
    }, 200);
  }
}, [location.pathname, location.search]);

// 拦截判断是否离开当前页面
const beforeunload = (e) => {
  let confirmationMessage = '请注意，刷新页签将丢失您当前输入的内容，是否继续？';
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;
};

// 监听路由变化时通过tabProps配置项closeTip判断对应页面是否需要绑定onbeforeunload事件
useEffect(() => {
  if (location.pathname && initialState?.settings?.multipleTabs) {
    const { pathname, search } = location;

    const pathRouteProps = getPathRouteProps(
      location.pathname,
      Object.keys(allMenuObj)
      ?.map((key) => allMenuObj[key])
      ?.filter((item) => !item?.path?.includes('*')),
    );

    // 刷新前提示
    if (pathRouteProps?.tabProps?.closeTip) {
      window.onbeforeunload = beforeunload;
    } else {
      window.onbeforeunload = null;
    }
  }
}, [location.pathname, location.search]);


// 销毁时清空事件
useEffect(() => {
  return () => {
    window.onbeforeunload = null;
  };
}, []);

// 移除 Tab removeTab 在上面第3小点

// 关闭其他tab页
const removeOtherTabs = useMemoizedFn((tabKey) => {
  const newTabItems = tabItems.filter(
    (item) => item.id === tabKey || String(item?.tabProps?.closable) === 'false',
  );

  setTabItems(newTabItems);
  switchTab(tabKey);
});

// 关闭右侧tab页
const removeRightTabs = useMemoizedFn((tabKey) => {
  const prevTabs = [...tabItems];
  const findIndex = tabItems?.findIndex((item) => item?.id === tabKey);
  const newTabs = prevTabs.slice(0, findIndex + 1);

  setTabItems(
    newTabs.concat(prevTabs?.filter((item) => String(item?.tabProps?.closable) === 'false')),
  );
  switchTab(tabKey);
});

const RIGHT_MENU_CONFIG = {
  CURRENT: {
    code: 'CURRENT',
    desc: '关闭标签页',
  },
  OTHER: {
    code: 'OTHER',
    desc: '关闭其他标签页',
  },
  RIGHT: {
    code: 'RIGHT',
    desc: '关闭右侧标签页',
  },
};

const handleTabsMenuClick = useMemoizedFn((tabKey) => (event) => {
  const { key, domEvent } = event;
  domEvent.stopPropagation();

  switch (key) {
    case RIGHT_MENU_CONFIG.CURRENT.code:
      removeTab(tabKey);
      break;
    case RIGHT_MENU_CONFIG.OTHER.code:
      removeOtherTabs(tabKey);
      break;
    case RIGHT_MENU_CONFIG.RIGHT.code:
      removeRightTabs(tabKey);
      break;
  }
});

const setMenu = useMemoizedFn((tabKey, index) => {
  const currTab = getCurrTab(tabKey);
  return (
    <Menu onClick={handleTabsMenuClick(tabKey)}>
       <Menu.Item
          disabled={tabItems.length === 1 || String(currTab?.tabProps?.closable) === 'false'}
          key={RIGHT_MENU_CONFIG.CURRENT.code}
				>
          {RIGHT_MENU_CONFIG.CURRENT.desc}
        </Menu.Item>
        <Menu.Item disabled={tabItems.length === 1} key={RIGHT_MENU_CONFIG.OTHER.code}>
          {RIGHT_MENU_CONFIG.OTHER.desc}
        </Menu.Item>
        <Menu.Item disabled={tabItems.length === index + 1} key={RIGHT_MENU_CONFIG.RIGHT.code}>
          {RIGHT_MENU_CONFIG.RIGHT.desc}
        </Menu.Item>
    </Menu>
	);
});

// 定义右键菜单组件
const setTab = useMemoizedFn((tabTitle, tabKey, index) => (
  <span onContextMenu={(event) => event.preventDefault()}>
      <Dropdown overlay={setMenu(tabKey, index)} trigger={['contextMenu']}>
        <span className={styles.tabTitle}>{tabTitle}</span>
      </Dropdown>
	</span>
));

/**
 * 返回上一页
 */
export function useGoBack() {
  const { location } = usePageProps();
  const [lastPathObj, setLastPathObj] = useState(
    JSON.parse(sessionStorage.getItem(`${PROJECT_KEY}-lastPathMap`)) || {},
  );
  const routeHistory = localStorage.getItem(`${window.projectKey}-route-history`);

  useMount(() => {
    const routePathArr =
      routeHistory && JSON.parse(routeHistory) instanceof Array ? JSON.parse(routeHistory) : [];

    const newLastPathObj = { ...lastPathObj };

    if (!newLastPathObj[location.pathname] && routePathArr?.length !== 0) {
      newLastPathObj[location.pathname] = routePathArr[routePathArr?.length - 1];
    }

    setLastPathObj(newLastPathObj);
    sessionStorage.setItem(`${PROJECT_KEY}-lastPathMap`, JSON.stringify(newLastPathObj));
  });

  return {
    goBack: () => {
      if (lastPathObj[location.pathname]) {
        history.replace(lastPathObj[location.pathname]);

        const newLastPathObj = { ...lastPathObj };
        delete newLastPathObj[location.pathname];
        sessionStorage.setItem(`${PROJECT_KEY}-lastPathMap`, JSON.stringify(newLastPathObj));
      } else {
        history.go(-1);
      }
    },
  };
}

import { useState } from 'react';

export default () => {
  const [tabObj, setTabObj] = useState();

  const closeTab = () => tabObj?.removeTab(tabObj?.activeTab);
  const removePageCache = () => tabObj?.removePageCache();

  return {
    tabObj,
    setTabObj,
    closeTab,
    removePageCache,
  };
};

import defaultSettings from './defaultSettings';
...

export default defineConfig({
  ...
  // keep-alive插件
  plugins: ['umi-plugin-keep-alive'],
});

import KeepAlive, { useAliveController } from 'react-activation';

// KeepAlive包裹内容
<KeepAlive name={item?.id}>{tabContents[item?.id]}</KeepAlive>

// 更新或移除tab时删除对应缓存
const aliveController = useAliveController();
aliveController.drop(tabKey); // 删除对应缓存

import { defineConfig } from '@umijs/max';

export default defineConfig({
  ...
  define: {
    ...
    // 定义常量
    MULTIPLE_TABS: defaultSettings.multipleTabs,
  },
});

import { useAliveController } from 'react-activation';

const aliveController = useAliveController();

// 登录前/退出登录前
MULTIPLE_TABS && aliveController.clear(); // 多页签模式-清空页面缓存