替貓老闆做管理後台 · 第 03 章
新增與編輯不容易出錯
把標籤、驗證、儲存狀態與未儲存提醒補齊，避免資料沒存到卻讓人以為已完成。
貓老闆的簡報
改了半天，按返回才發現沒存？先讓我知道現在有沒有改過、存好了沒。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
完成商品名稱與顯示狀態的新增、編輯流程，包含驗證、失敗重試與離開提醒。
動手做
- 欄位依工作分組，每格有持續顯示的標籤與限制。商品介紹與交易價格分開，避免改介紹時意外改到付款規則。
- 必填驗證出錯時，頁內摘要指向有問題的欄位，欄位旁也顯示相同訊息；輸入保留，焦點能到錯誤位置。
- 按儲存後顯示處理中並避免重複送出；正式版必須等後端儲存成功才回報完成，失敗保留輸入並可重試。
- 修改後按返回或切換區域，要提醒尚未儲存。取消離開時保留輸入，確認捨棄才返回。正式實作另需規劃整頁導覽與關閉分頁的保護。
- 本站示範只儲存記憶體，重新整理會重設；以自己的專案驗收時，要重新讀取後端確認資料真的儲存。
親手試試
貓掌櫃管理後台 · 操作練習
所有資料均為虛構；變更只留在此頁記憶體，重新整理就重設。這是介面示範，沒有真實登入、訂單或後端。
商品管理
已選 0 筆（僅此頁）
| 名稱與編號 | 狀態 | 操作 |
|---|
找不到符合條件的資料，請清除搜尋或調整篩選。
編輯商品介紹
可試：搜尋、切換狀態、編輯未儲存就返回、勾選停用與還原。唯讀角色只模擬操作限制；正式權限仍須由後端檢查。
這樣對 AI 說
中文就可以
請做商品名稱與顯示狀態的新增、編輯介面，標籤清楚，必填錯誤同時出現在摘要及欄位旁，摘要可跳到欄位。儲存中禁止重複送出，成功與失敗分別回饋，失敗保留輸入可重試。內容改過後，返回或切換區域前提醒未儲存；取消則繼續編輯，確認捨棄才離開。原型明確標示資料只在記憶體，正式版需串後端並重新查詢驗證，不把交易價格混進介紹表單。
本章驗收清單
依序試空白、儲存失敗、取消離開與正常儲存。
- 錯誤摘要能帶到對應欄位
- 儲存失敗不清空輸入也不改資料
- 未儲存提醒可取消並繼續編輯
- 儲存中不能再次送出或切換區域
- 模擬儲存與後端真正儲存能分辨
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
官方參考資料
進度只存在這台瀏覽器，不上傳、不追蹤。