唯讀逐欄編輯
問題
主檔表單有 30 個欄位。使用者打開它，通常只是要改其中一個。
一整片輸入框帶來三個問題：
- 分不清改了哪些 —— 所有欄位長得一模一樣，送出前無從確認
- 容易誤改 —— 滑鼠滾輪掃過數字欄就改掉值，而且不會發現
- 看起來像草稿 —— 明明是已生效的正式資料，卻長得像還沒填完的表單
做法
預設唯讀，逐欄點開。
唯讀態（像值，帶淡鉛筆）
↓ 點擊
編輯態（真正的輸入框，自動聚焦）
↓ 改值
已變更態（整欄琥珀 ＋「已變更」標籤 ＋ 還原鈕）
↓ Esc / blur
唯讀態（保留琥珀）
四個要素缺一不可：
| 要素 | 為什麼 |
|---|---|
| 唯讀態要有可發現線索（淡鉛筆） | 否則使用者不知道能點 |
| 改動要整欄標色 | 掃一眼就知道改了哪些 |
| 要有逐欄還原 | 改錯一格不必整頁重來 |
| undo/redo 先確認舊值→新值 | 還原本身也是一次資料變更 |
搭配送出前變更摘要，形成完整迴路。
四種狀態並列（第二欄是已變更態）
唯讀態：值的樣子，右側有淡鉛筆。
已變更
已變更態：整欄琥珀＋還原鈕。改了什麼掃一眼就知道。
select 欄位：點擊即展開，不必多按一次。
U-1042
鎖定態：顯示鎖頭與原因，而不是直接不給點。
這是真元件
上面不是截圖——文件站直接編譯 packages/react 的原始碼。
元件改了，這裡當場跟著改。互動細節請到
EditableField 元件頁試。
取捨
代價：多一次點擊。 這在「主要是看、偶爾才改」的主檔表單划算， 在「每次都要全部填一遍」的建立表單不划算。
所以新增模式要關掉這個行為（alwaysEdit ＋ trackChanges={false}）——
新增時每個欄位都「不同於原值」，不關掉的話整張表都是琥珀色，訊號完全失效。
反例
✅ 這樣做
編輯／檢視是同一個畫面，只是欄位個別切換態。 使用者的心智模型是「我在改這一格」。
🚫 不要這樣
「檢視模式 / 編輯模式」全頁切換。使用者要先按「編輯」， 改完按「儲存」，中途想看別的欄位還得先取消。這是把資料庫的交易邊界 直接搬到介面上。
✅ 這樣做
改動用保留色（琥珀）標記，全站只有這一個意思。
🚫 不要這樣
不要用「儲存按鈕變亮」當唯一線索。使用者知道有東西改了， 但不知道是哪一格——尤其在他被電話打斷五分鐘之後。
實作
EditableField ＋ ChangeSummary
＋ useRecordDiff。核心是一份 FieldSpec[] 宣告，同時驅動比對、顯示格式化與稽核記錄。