nunjucks模板引擎yaml配置语法
mock.js模拟数据
roading
umi配置静态和动态路由
权限和动画
nmi实现原理
dva创建应用
集成AntdPro
定义路由和UI组件
链接仓库
使用effects和reducers
企业级后台系统 AntdPro

umi主应用

iceStark主应用接入 https://micro-frontends.ice.work/docs/guide/use-layout/react

  1. pnpm add @ice/stark

Prolayout 主应用布局

layout.childrenRender: (dom, props) => ,

  1. /**
  2.  * 运行时配置
  3.  * https://umijs.org/docs/api/runtime-config#dva
  4.  */
  6. import { useState } from 'react';
  7. import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
  8. import dayjs from 'dayjs'
  9. import 'dayjs/locale/zh-cn';
  10. // import type { RunTimeLayoutConfig } from '@umijs/max';
  12. import { DEFAULT_NAME } from '@/constants';
  13. import Settings from '../config/defaultSettings';
  14. import MicroApp from './MicroApp'
  16. dayjs.locale('zh-cn')
  18. const purePath = [
  19.   '/uicomponent',
  20.   '/designer',
  21.   'publish'
  22. ]
  24. /**
  25.  * 全局初始化数据配置，用于 Layout 用户信息和权限初始化
  26.  * 文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
  27.  */
  28. export async function getInitialState(): Promise<{ name: string }> {
  29.   return { name: DEFAULT_NAME };
  30. }
  32. export const layout = ({ initialState }: any) => {
  33.   // eslint-disable-next-line react-hooks/rules-of-hooks
  34.   const [collapsed, setCollapsed] = useState(false);
  36.   return {
  37.     ...Settings,
  38.     pure: !!purePath.find(it => window.location.pathname.includes(it)),
  39.     logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
  40.     menu: {
  41.       locale: false,
  42.       type: 'group', // 菜单分组
  43.     },
  44.     avatarProps: {
  45.       src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
  46.       size: 'small',
  47.       title: 'lulongwen',
  48.     },
  49.     breakpoint: false,
  50.     // 关闭默认的折叠按钮
  51.     collapsedButtonRender: false,
  52.     collapsed,
  53.     onCollapse: (flag: boolean) => setCollapsed(flag),
  54.     headerContentRender: () => {
  55.       return (
  56.         <div className="header-render">
  57.           {collapsed
  58.             ? <MenuUnfoldOutlined onClick={() => setCollapsed(!collapsed)} />
  59.             : <MenuFoldOutlined onClick={() => setCollapsed(!collapsed)} />}
  60.         </div>
  61.       );
  62.     },
  63.     menuFooterRender: (props: any) => {
  64.       if (props?.collapsed) return undefined;
  65.       return (
  66.         <p
  67.           style={{
  68.             textAlign: 'center',
  69.             paddingBlockStart: 12,
  70.           }}
  71.         >
  72.           Power by {DEFAULT_NAME}
  73.         </p>
  74.       );
  75.     },
  76.     bgLayoutImgList: [
  77.       {
  78.         src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
  79.         left: 85,
  80.         bottom: 100,
  81.         height: '303px',
  82.       },
  83.       {
  84.         src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
  85.         bottom: -68,
  86.         right: -45,
  87.         height: '303px',
  88.       },
  89.       {
  90.         src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
  91.         bottom: 0,
  92.         left: 0,
  93.         width: '331px',
  94.       },
  95.     ],
  96.     childrenRender: (dom, props) => <MicroApp {...props} />,
  97.   };
  98. };
  100. // export function onRouteChange({ location, clientRoutes, routes, action, basename }: any) {
  101. //   console.log(800, location, clientRoutes, routes, action, basename);
  102. // }

childrenRender

�src/.umi/plugin-layout/Layout.tsx
umijs的文档中没有自定义 pageContainer的说明，需要自己看 plugin-layout插件
image.png

rootContainer

rootContainer 可以渲染子应用，但是没有主应用的布局

  1. export function rootContainer(container) {
  2.     return React.createElement(MicroApp, null, container);
  3. }