ProLayout全局布局探索

import React, { useRef, useState } from 'react';
import { Link, useHistory } from 'umi';
import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { MenuDataItem, ProSettings } from '@ant-design/pro-layout';
import ProLayout from '@ant-design/pro-layout';
const LayoutPage = (props: any) => {
  const { children } = props;
  const history = useHistory();
  // ProLayout配置
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    // 是否固定导航
    fixSiderbar: true,
    // layout 的菜单模式,side：右侧导航，top：顶部导航
    layout: 'top',
    // 是否固定 header 到顶部
    fixedHeader: true,
  });
  // 当前的匹配的页面
  const [pathname, setPathname] = useState('/');
  // 路由列表
  const routers = props.route.routes || [];
  // menuDataRender
  const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
    // 过滤权限路由
    return menuList.map((item) => {
      const localItem = {
        ...item,
        routes: item.routes ? menuDataRender(item.routes) : undefined,
      };
      return localItem;
    });
  };
  const menuDataRef = useRef<MenuDataItem[]>([]);
  return (
    <div
      id="test-pro-layout"
      style={{
        height: '100vh',
      }}
    >
      <ProLayout
        // 当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性
        location={{pathname}}
        // menu 菜单的头部点击事件
        onMenuHeaderClick={() => history.push('/')}
        // 自定义菜单项的 render 方法
        menuItemRender={(menuItemProps, defaultDom) => {
          if (
            menuItemProps.isUrl ||
            !menuItemProps.path ||
            location.pathname === menuItemProps.path
          ) {
            return defaultDom;
          }
          return <Link to={menuItemProps.path}>{defaultDom}</Link>;
        }}
        // 在显示前对菜单数据进行查看，修改不会触发重新渲染
        postMenuData={(menuData) => {
          menuDataRef.current = menuData || [];
          return menuData || [];
        }}
        // menuData 的 render 方法，用来自定义 menuData
        menuDataRender={menuDataRender}
        // layout 的内容模式,Fluid：自适应，Fixed：定宽 1200px
        contentWidth={'Fluid'}
        // 顶部当前用户
        rightContentRender={() => (
          <div>
            <Avatar shape="square" size="small" icon={<UserOutlined />} />
          </div>
        )}
        // layout 的内容区 style
        contentStyle={{}}
        // layout 的设置
        {...settings}
        {...props}
      >
        {children}
      </ProLayout>
    </div>
  );
};
export default LayoutPage;