新增/編輯頁

當編輯的欄位多、有多個區塊、需要可分享的連結時,就該用全頁表單而不是塞進 modal。這章講清楚 full page 編輯的結構、置底儲存列與離開警告。當你要做「新增/編輯一筆資源」的畫面、或表單長到 modal 裝不下時,就翻這頁對一下。

新增/編輯內容頁

這是什麼

整頁表單:上方路徑、內容用卡片分組、底部全寬固定按鈕列(不在表單內用 sticky)。

什麼時候用

新增或編輯欄位較多、需要分區填寫時;按鈕列固定在主內容欄最底,捲動時不跟著浮上來。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
首頁專案行銷 Q2編輯

編輯專案

基本資訊

成員

至少一位 Editor

進階

標籤

捲動時僅上方表單移動,底部按鈕列固定不浮動。

  • 置底 action bar:在 scroll 區、主內容欄最底;全寬貼齊左/右/下(無 content p-6 留白)。
  • 用表單內 sticky(捲到底會跟著內容往上浮)。
  • 按鈕列本身可用 px-4 py-3 避免按鈕貼死邊線;外層容器零 margin。

規格速查

項目定稿值
何時用 full page欄位 > 8、有多 section、需 SEO/分享連結(長表單硬塞 modal)
結構full page 編輯 + card section 分組 + 置底 action bar
Breadcrumb首頁 › 列表 › 項目名 › 編輯;H1 與最後一項一致或「編輯 {名稱}」
分段內容拆成 card section(基本資訊、成員、進階…),在 scroll 區內
置底儲存列Cancel + Save,放 scroll 區外、主內容欄底部 shrink-0、頂線 border-t
儲存列做法全寬貼齊左/右/下;勿用表單內 position: sticky
欄位驗證欄位 error inline、整表錯誤 form 上方 alert
離開未儲存跳 confirmation 警告(見確認與破壞性操作)

常見做錯

做錯正確
長表單硬塞進 modal欄位多、多 section、需分享連結時用 full page
沒有置底儲存列,Save 按鈕捲到看不到Cancel + Save 置底固定於主內容欄底,全寬貼齊
離開未儲存沒有任何警告,資料直接遺失偵測未儲存變更,離開時跳 confirmation
所有欄位擠成一大塊、沒分 section用 card section 分組,每段一個主題

相關章節

  • 表單 — 欄位、驗證與短表單該用 modal/drawer 的判斷
  • Modal 與覆層 — 欄位少時改用的彈出表單規則
  • 詳情檢視 — 編輯頁的上一站,read-only 的查看頁
  • 按鈕 — 儲存列 primary/secondary 按鈕的擺放