【開發】3.4-Layout 組件

Layout 組件 是 Pro v4 中新增的組件，與一般的組件不同，它非常重型，在其中集成了菜單、佈局、頁頭、麪包屑、設置抽屜等多種功能。

1. ProLayout

在 Ant Design Pro 中，默認使用了 pro-layout，打開 Pro 後我們可以看到這樣的界面：

對於標題和 logo，Layout 提供了 title和 logo屬性來自定，如果你有更強的定製需求，可以試試 menuHeaderRender: (logo,title)=>ReactNode 屬性，onMenuHeaderClick 允許你覆蓋默認的點擊事件。

 <BasicLayout
    {...defaultProps}
    title="Remax"
    logo="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*1NHAQYduQiQAAAAAAAAAAABkARQnAQ"
    menuHeaderRender={(logo, title) => (
      <div
        id="customize_menu_header"
        onClick={() => {
          window.open('https://remaxjs.org/');
        }}
      >
        {logo}
        {title}
      </div>
    )}
  />
);

如果你需要自定義的 menu ，siderWidth 屬性可以控制右側菜單的寬度，menuRender 和 menuItemRender 可以讓你完成自定義整個菜單。menuDataRender 可以用於自定義菜單數據，你可以將其替換爲從服務器獲取的數據。

<BasicLayout
  menuDataRender={() => [
    {
      path: '/',
      name: 'welcome',
      icon: 'smile',
      children: [
        {
          path: '/welcome',
          name: 'one',
          children: [
            {
              path: '/welcome/welcome',
              name: 'two',
              icon: 'smile',
              exact: true,
            },
          ],
        },
      ],
    },
  ]}
  menuItemRender={(menuItemProps, defaultDom) =>
    menuItemProps.isUrl ? defaultDom : <a>open {defaultDom}</a>
  }
>
  Hello World
</BasicLayout>

2. PageHeaderWrapper

PageHeaderWrapper 封裝了 ant design 的 PageHeader 組件，增加了 tabList 和 content。 根據當前的路由填入 title 和 breadcrumb。它依賴 Layout 的 route 屬性。當然你可以傳入參數來複寫默認值。 PageHeaderWrapper 支持 Tabs 和 PageHeader 的所有屬性。

PageHeaderWrapper 必須要被 ProLayout 包裹才能自動生成麪包屑和標題。

3. SettingDrawer

因爲 SettingDrawer 過於靈活而且配合 umi-plugin-antd-theme 有嚴重的性能問題。因此我們不建議在正式環境中使用 SettingDrawer，你需要人肉引入一下 SettingDrawer。預覽網站中是通過 fetch:blocks 來添加的。

SettingDrawer 提供了一個圖形界面來設置 layout 的配置，方便在演示環境中展示 Layout 的所有能力。