ci4sManagement-cloud/react-ui/src/app.tsx

import RightContent from '@/components/RightContent';
import themes from '@/styles/theme.less';
import { type GlobalInitialState } from '@/types';
import { menuItemRender } from '@/utils/menuRender';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { RuntimeConfig, history } from '@umijs/max';
import { useState } from 'react';
import { RuntimeAntdConfig } from 'umi';
import defaultSettings from '../config/defaultSettings';
import '../public/fonts/font.css';
import { getAccessToken } from './access';
import ErrorBoundary from './components/ErrorBoundary';
import './dayjsConfig';
import { removeAllPageCacheState } from './hooks/useCacheState';
import { globalGetSeverTime } from './hooks/useServerTime';
import {
  getRemoteMenu,
  getRoutersInfo,
  getUserInfo,
  patchRouteWithRemoteMenus,
  setRemoteMenu,
} from './services/session';
import './styles/menu.less';
import { isLoginPage, needAuth } from './utils';
import { HomeUrl } from './utils/constant';
import { closeAllModals } from './utils/modal';
import { gotoHomePage } from './utils/ui';
export { requestConfig as request } from './requestConfig';

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 */
export async function getInitialState(): Promise<GlobalInitialState> {
  const fetchUserInfo = async () => {
    globalGetSeverTime();
    try {
      const response = await getUserInfo();
      return {
        ...response.user,
        avatar: response.user.avatar || require('@/assets/img/avatar-default.png'),
        permissions: response.permissions,
        roleNames: response.roles,
      } as API.CurrentUser;
    } catch (error) {
      console.error('getInitialState', error);
      // gotoLoginPage(true);
      gotoHomePage();
    }
    return undefined;
  };

  const token = getAccessToken();
  if (token) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings as Partial<LayoutSettings>,
      collapsed: false,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings as Partial<LayoutSettings>,
    collapsed: false,
  };
}

// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
  return {
    ErrorBoundary: ErrorBoundary,
    rightContentRender: false,
    menu: {
      locale: false,
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.userId,
      },
      request: async () => {
        if (!initialState?.currentUser?.userId) {
          return [];
        }
        return getRemoteMenu();
      },
    },
    childrenRender: (children) => {
      // 增加一个 loading 的状态
      // if (initialState?.loading) return <PageLoading />;
      return (
        <div className="kf-page-container">
          <RightContent></RightContent>
          <div className="kf-page-container__content">{children}</div>
        </div>
      );
    },
    collapsedButtonRender: false,
    collapsed: initialState?.collapsed,
    menuProps: {
      onClick: () => {
        // 点击菜单项，删除所有的页面 state 缓存
        removeAllPageCacheState();
      },
    },
    ...initialState?.settings,
    logo: require('@/assets/img/logo.png'),
    token: {
      sider: {
        colorTextMenu: themes['textColor'],
        colorTextMenuSelected: themes['primaryColor'],
        colorTextMenuActive: themes['primaryColor'],
        colorTextMenuItemHover: themes['primaryColor'],
        colorBgMenuItemSelected: 'rgba(197, 232, 255, 0.8)',
        colorMenuBackground: themes['siderBGColor'],
      },
    },
    menuItemRender: menuItemRender(false),
    subMenuItemRender: menuItemRender(true),
  };
};

export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
  // console.log('onRouteChange');

  // 路由切换时，尤其是回退时，关闭打开的弹框
  closeAllModals();

  const { location } = e;
  const pathname = location.pathname;
  const token = getAccessToken();
  // 没有 token，跳转到登录页面
  if (!token && needAuth(pathname)) {
    gotoHomePage();
    return;
  }

  // 有 token， 登录页面直接跳转到首页
  if (token && isLoginPage(pathname)) {
    history.push(HomeUrl);
  }

  const menus = getRemoteMenu();
  // 没有菜单，刷新页面
  if (menus === null && needAuth(pathname)) {
    history.go(0);
  }
};

export const patchRoutes: RuntimeConfig['patchRoutes'] = () => {
  //console.log('patchRoutes', e);
};

export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
  // console.log('patchClientRoutes', e);
  patchRouteWithRemoteMenus(e.routes);
};

export function render(oldRender: () => void) {
  // console.log('render');
  const token = getAccessToken();
  if (!token) {
    oldRender();
    return;
  }

  // 有 token，获取路由
  getRoutersInfo()
    .then((res) => {
      setRemoteMenu(res);
      oldRender();
    })
    .catch(() => {
      oldRender();
    });
}

export const useQiankunStateForSlave = () => {
  const [globalState, setGlobalState] = useState<any>({
    slogan: 'Hello MicroFrontend',
  });

  return {
    globalState,
    setGlobalState,
  };
};

// 主题修改
export const antd: RuntimeAntdConfig = (memo) => {
  memo.theme ??= {};
  memo.theme.token = {
    colorPrimary: themes['primaryColor'],
    colorSuccess: themes['successColor'],
    colorError: themes['errorColor'],
    colorWarning: themes['warningColor'],
    colorLink: themes['primaryColor'],
    colorText: themes['textColor'],
    controlHeightLG: 46,
  };
  memo.theme.components ??= {};
  memo.theme.components.Tabs = {};
  memo.theme.components.Button = {
    defaultBg: 'rgba(22, 100, 255, 0.06)',
    defaultBorderColor: 'rgba(22, 100, 255, 0.11)',
    defaultColor: themes['textColor'],
    defaultHoverBg: 'rgba(22, 100, 255, 0.06)',
    defaultHoverBorderColor: 'rgba(22, 100, 255, 0.5)',
    defaultHoverColor: '#3F7FFF',
    defaultActiveBg: 'rgba(22, 100, 255, 0.12)',
    defaultActiveBorderColor: 'rgba(22, 100, 255, 0.75)',
    defaultActiveColor: themes['primaryColor'],
    contentFontSize: parseInt(themes['fontSize']),
  };
  memo.theme.components.Input = {
    inputFontSize: parseInt(themes['fontSizeInput']),
    inputFontSizeLG: parseInt(themes['fontSizeInputLg']),
    paddingBlockLG: 10,
  };
  memo.theme.components.Select = {
    singleItemHeightLG: 46,
    optionSelectedColor: themes['primaryColor'],
  };
  memo.theme.components.Table = {
    headerBg: 'rgba(242, 244, 247, 0.36)',
    headerBorderRadius: 4,
    // rowSelectedBg: 'rgba(22, 100, 255, 0.05)', 固定列时，横向滑动导致重叠
  };
  memo.theme.components.Tabs = {
    titleFontSize: 16,
  };
  memo.theme.components.Form = {
    labelColor: 'rgba(29, 29, 32, 0.8);',
  };
  memo.theme.components.Breadcrumb = {
    iconFontSize: parseInt(themes['fontSize']),
    linkColor: 'rgba(29, 29, 32, 0.7)',
    separatorColor: 'rgba(29, 29, 32, 0.7)',
  };
  memo.theme.components.Tree = {
    directoryNodeSelectedBg: 'rgba(22, 100, 255, 0.7)',
  };

  memo.theme.cssVar = true;
  memo.theme.hashed = false;

  memo.appConfig = {
    message: {
      // 配置 message 最大显示数，超过限制时，最早的消息会被自动关闭
      maxCount: 3,
    },
  };

  return memo;
};