antd pro笔记6——布局

页面整体布局是一个产品最外层的框架结构，往往包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中，也有很多区块的布局结构。在真实项目中，页面布局通常同龄整个应用的界面，有非常重要的作用。
布局也是component或者说是page，只是包含了props.children，用于构建页面整体结构。

如何使用Ant Design Pro布局

通常布局是和路由系统紧密结合的，Ant Design Pro 的路由使用了Umi的方案，我们将配置信息统一抽离到config/config.ts下，通过如下配置定义每个页面的布局：

routers: [
  {
    path: '/',
    component: '../layouts/BasicLayout', // 指定以下页面的布局
    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      {
        path: '/dashboard',
        name: 'dashboard',
        icon: 'dashboard',
        routes: [
          { path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
          { path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
          { path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
        ],
      },
    ],
  },
];

Pro扩展配置

{
  name: 'dashboard',
  icon: 'dashboard',
  hideInMenu: true,
  hideChildrenInMenu: true,
  hideInBreadcrumb: true,
  authority: ['admin'],
}

• name: 当前路由在菜单和面包屑中的名称，注意这里是国际化配置的key，具体展示菜单名可以在/src/locale/zh-CN.ts进行配置；
• icon: 当前路由菜单下的图标明；
• hideInMenu: 当前路由在菜单中不展示，默认false；
• hideInBreadcrumb: 当前路由在面包屑中不展示，默认false；
• authority: 允许展示的权限，不设则都可见，详见权限管理;

Ant Design Pro Layout组件

ProLayout组件是Pro v4中新增的组件，与一般组件不同，它非常重型，集成了菜单、布局、页头、面包屑、设置抽屉等多种功能。 在Ant Design Pro中，默认使用了ProLayout。
对于标题和logo，Layout提供title和logo属性来自定义，如果你有更强的定制需求，可以试试menuHeaderRender:(logo,title)=>ReactNode属性，onMenuHeaderClick允许覆盖默认的点击事件。
如果需要自定义menu，siderWidth属性可以控制右侧菜单的宽度，menuRender和menuItemRender可以让你完成自定义整个菜单。menuDataRender用于自定义菜单数据，可以替换为从服务器获取的数据。

PageHeaderWrapper

PageHeaderWrapper封装了ant design的PageHeader组件，增加了tablist和content。

SettingDrawer

嵌套布局

ProLayout提供了足够的api来支持嵌套。