【開發】3.2-佈局

頁面整體佈局是一個產品最外層的框架結構，往往會包含導航、頁腳、側邊欄、通知欄以及內容等。在頁面之中，也有很多區塊的佈局結構。在真實項目中，頁面佈局通常統領整個應用的界面，有非常重要的作用。

1. Ant Design Pro 的佈局

在 Ant Design Pro 中，我們抽離了使用過程中的通用佈局，都放在 layouts 目錄中，分別爲：

• BasicLayout：基礎頁面佈局，包含了頭部導航，側邊欄和通知欄：

• UserLayout：抽離出用於登錄註冊頁面的通用佈局

• BlankLayout：空白的佈局

1.1 如何使用 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' },
        ],
      },
    ],
  },
];

映射路由和頁面佈局（組件）的關係如代碼所示，完整映射轉換實現可以參看 config.ts。更多 Umi 的路由配置方式可以參考：Umi 配置式路由。

1.2 Pro 擴展配置

我們在 config.ts 擴展了一些關於 pro 全局菜單的配置。

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

• name: 當前路由在菜單和麪包屑中的名稱，注意這裏是國際化配置的 key，具體展示菜單名可以在 /src/locales/zh-CN.ts 進行配置。
• icon: 當前路由在菜單下的圖標名。
• hideInMenu: 當前路由在菜單中不展現，默認 false。
• hideChildrenInMenu: 當前路由的子級在菜單中不展現，默認 false。
• hideInBreadcrumb: 當前路由在麪包屑中不展現，默認 false。
• authority: 允許展示的權限，不設則都可見，詳見：權限管理。

2. Ant Design 佈局組件

除了 Pro 裏的內建佈局以外，在一些頁面中需要進行佈局，可以使用 Ant Design 目前提供的兩套佈局組件工具：Layout 和 Grid。

2.1 Grid 組件

柵格佈局是網頁中最常用的佈局，其特點就是按照一定比例劃分頁面，能夠隨着屏幕的變化依舊保持比例，從而具有彈性佈局的特點。

而 Ant Design 的柵格組件提供的功能更爲強大，能夠設置間距、具有支持響應式的比例設置，以及支持 flex 模式，基本上涵蓋了大部分的佈局場景，詳情參看：Grid。

2.2 Layout 組件

如果你需要輔助頁面框架級別的佈局設計，那麼 Layout 則是你最佳的選擇，它抽象了大部分框架佈局結構，使得只需要填空就可以開發規範專業的頁面整體佈局，詳情參看：Layout。

2.3 根據不同場景區分抽離佈局組件

在大部分場景下，我們需要基於上面兩個組件封裝一些適用於當下具體業務的組件，包含了通用的導航、側邊欄、頂部通知、頁面標題等元素。例如 Ant Design Pro 的 BasicLayout。

通常，我們會把抽象出來的佈局組件，放到跟 pages、 components 平行的 layouts 文件夾中方便管理。需要注意的是，這些佈局組件和我們平時使用的其它組件並沒有什麼不同，只不過功能性上是爲了處理佈局問題。

除了 Ant Design 官方提供的佈局組件，也可以試試社區精選裏推薦的佈局組件。