Container 佈局容器

用來搭出整頁的外框架構(頁首、側邊選單、主內容、頁尾)。使用 Element Plus 的 el-container 系列:el-header、el-aside、el-main、el-footer。

設計準則

• 這是給「整頁版型」用的;內容區塊內部的分欄請用 Layout 佈局柵格
• 排列方向會自動判斷:子元素含 el-header 或 el-footer 時為垂直,否則為水平
• 側邊選單寬度用 el-aside 的 width;頁首 / 頁尾高度用 el-header / el-footer 的 height
• 後台標準版型 = 頁首 +(側邊選單 + 主內容),巢狀組合即可
• 主內容 el-main 會自動撐滿剩餘空間,長內容在它自己內部捲動

頁首 + 主內容

含 el-header 時自動垂直排列:

loading

頁首 + 主內容 + 頁尾

loading

側邊選單 + 主內容

沒有 header/footer 時為水平排列;el-aside 用 width 指定寬度:

loading

頁首 +(側邊 + 主內容)

外層放頁首,內層再放側邊 + 主內容——這是最常見的後台版型:

loading

完整後台版型

頁首 + 側邊選單 +(主內容 + 頁尾):

loading

Do / Don't

✅ Do	❌ Don't
整頁外框用 Container	用柵格硬兜 header/aside
內容分欄用 Layout 柵格	用 Container 排內容細節
el-aside 用 width 定寬	在 aside 內加一堆 margin 湊寬
巢狀組出後台標準版型	一層塞滿所有區塊

給工程師

• 元件:el-container(外框,direction 可強制方向)、el-header(height,預設 60px)、el-aside(width,預設 300px)、el-main、el-footer(height,預設 60px)
• 方向自動判斷:含 el-header/el-footer → 垂直,否則水平;要巢狀時內層再包一個 el-container
• 完整 API 見 Element Plus Container 文件。本站規範優先於 EP 文件中的視覺建議。