app.jsx

import Footer from '@/components/Footer';
import RightContent from '@/components/RightContent';
import { SettingDrawer } from '@ant-design/pro-components';
import { history, Link, matchRoutes } from '@umijs/max';
import defaultSettings from '../config/defaultSettings';
import { queryCurrentUser, getMenu } from './services/login';
import TagView from '@/components/TagView';
import SiderMenu from '@/components/SiderMenu';
import * as Ant4Icons from '@ant-design/icons';
import { createElement } from 'react';

const { LinkOutlined } = Ant4Icons;
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
function strToHump(str) {
  let strArr = str.split('-');
  for (let i = 0; i < strArr.length; i++) {
    strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substr(1);
  }
  let res = strArr.join('');
  return res + 'Outlined';
}

export async function getInitialState() {
  let token = localStorage.getItem('TOKENES');
  const fetchUserInfo = async () => {
    try {
      const msg = await queryCurrentUser();
      return msg.data;
    } catch (error) {
      // history.push(loginPath);
    }
    return undefined;
  }; // 如果是登录页面，不执行
  const getmenuData = async () => {
    try {
      const res = await getMenu();
      return res.data;
    } catch (error) {
      message.error(res.msg);
    }
    return undefined;
  }; // 如果是登录页面，不执行

  if (history.location.pathname !== loginPath && token) {
    const currentUserData = await fetchUserInfo();
    let menuData;
    if (currentUserData?.data?.username) {
      menuData = await getmenuData();
    }
    return {
      fetchUserInfo,
      currentUser: currentUserData?.data,
      settings: defaultSettings,
      newMenu: menuData,
      getmenuData,
      collapsed: false,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings,
    getmenuData,
    collapsed: false,
    tagList: [],
  };
}

// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout = ({ initialState, setInitialState }) => {
  let token = localStorage.getItem('TOKENES');
  return {
    disableContentMargin: false,
    waterMarkProps: {
      content: initialState?.currentUser?.name,
    },
    collapsed: initialState.collapsed,
    onCollapse: (cols) => {
      setInitialState((s) => ({ ...s, collapsed: cols }));
    },
    footerRender: () => <Footer />,
    onPageChange: async () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        let userInfo = await initialState.fetchUserInfo();
        let menuData = await initialState.getmenuData();
        setInitialState((s) => ({
          ...s,
          currentUser: userInfo?.data,
          newMenu: menuData,
        }));
      }
    },
    links: isDev
      ? [
          <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
            <LinkOutlined />
            <span>OpenAPI 文档</span>
          </Link>,
        ]
      : [],
    //接口获取菜单数据
    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.id,
      },
      request: (params, defaultMenuData) => {
        let lastArr = initialState?.newMenu?.userHavePermList
            ? JSON.parse(JSON.stringify(initialState?.newMenu?.userHavePermList))
            : [],
          newArr = [
            {
              path: '/welcome',
              name: '首页',
              icon: 'smile',
              component: './Welcome',
              haveChildren: false,
              key: '000000',
              parentKey: '0',
              routes: [],
              children: null,
              title: null,
            },
          ].concat(lastArr);

        return newArr.map((item, index) => {
          if (item.icon) {
            const icon = strToHump(item.icon),
              ItemIcon = Ant4Icons[icon];
            item.icon = createElement(ItemIcon);
          }
          return item;
        });
      },
      locale: false,
    },
    menuRender: (props, defaultDom) => {
      if (props.isMobile) {
        return defaultDom;
      } else {
        return <SiderMenu {...props} />;
      }
    },
    // 自定义 403 页面
    unAccessible: <div>unAccessible</div>,
    noFound: <div>noFound</div>,
    // 增加一个 loading 的状态
    childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <>
          {initialState?.currentUser && location.pathname !== loginPath ? (
            <TagView home="/welcome">{children}</TagView>
          ) : (
            children
          )}
        </>
      );
    },
    ...initialState?.settings,
    layout: false,
    headerContentRender: () => <RightContent />,
    rightContentRender: () => null,
  };
};