設定頁範本

進入設定後,左側 sidebar 在同一欄做 drill-down(改成「返回 + 設定項」)來取代主 nav,右側只放當前設定項的 H1 與 card。重點是不要在內容區再長出一欄設定 nav,也不要加設定 breadcrumb。當你要排整個設定頁的版型、或猶豫「設定的二級導覽該放哪」時,就翻這頁。

設定頁(Sidebar drill-down)

這是什麼

點主選單「設定」後,左欄改為返回與設定子項(取代主導覽);右側大標題為目前設定項,不加路徑列。

什麼時候用

設定項目多、需要第二層側欄時;左欄寬度與主側欄一致,勿再壓縮。

預覽依本指南規則實作
SAcme
搜尋設定、成員…
TZ

一般

管理你的個人與工作區偏好

工作區名稱

品牌

Logo、主色(選填)

  • 左欄 240px(與 01-layout、topbar 品牌列同寬);drill-down 取代主 nav,勿 flex-1 壓縮側欄。
  • 右側 H1 = 當前設定項;勿 breadcrumb 設定 › …(見 02-navigation)。

規格速查

區塊定稿做法
進入方式點「設定」→ 左 240px 欄改為「返回工作區 + 設定 + 項目」,右側全寬
Topbar維持 global search、通知、頭像,不變
右欄 headerH1 = 左欄當前項(如「一般」)+ 一句副標;無 breadcrumb
右欄內容card sections
Danger zone紅框或淺紅底 card,刪除用 danger button + confirmation
Mobile全螢幕設定清單 → 點項進內容 → 返回

常見做錯

做錯正確
三欄:主 nav + 內容左再長設定 nav左欄同一欄 drill-down 切成設定清單,右側全寬
加「設定 › 一般」breadcrumb不加 breadcrumb,當前項由左欄與右欄 H1 表達
右側內容區再長出一欄設定 nav導覽只在左欄,右側只放 H1 + card
Danger 操作混在一般設定裡Danger zone 獨立紅框 card,並加 confirmation

相關章節

  • 設定頁 — card 分組、儲存模式與各設定主題的逐條規則
  • 導覽 — 設定二級導覽與 breadcrumb 的搭配原則
  • 權限 — 設定區常見的角色與權限設定
  • 角色與帳號 — 設定區內的權限矩陣與帳號管理整頁版型