DATA TABLE
行内编辑Inline Edit
直接点单元格就变输入框，改完回车保存。省掉「打开编辑页 → 改一个字段 → 保存 → 返回」的四步。
效果预览
客户备注金额
Aurora Labs续费优惠 8 折¥ 1,299
Bright Studio—¥ 599
Codecraft—¥ 0
适合用在哪
后台里频繁微调的字段：备注、价格、状态、配额。不适合需要多字段联动校验的场景。
容易踩的坑
- blur 即自动保存，用户只是误点或切换窗口也会触发写入，造成脏数据。
- 可编辑单元格只靠 hover 提示，触屏设备没有 hover，用户根本发现不了。
- 保存失败回滚原值却没有明显提示，用户以为已改成功并离开页面。
设计提示词 · Prompt
行内编辑（Inline Edit）：单元格默认是文本，hover 时显示浅色底暗示可编辑。点击后原地替换为一个带主色描边与柔和外光（box-shadow 0 0 0 2.5px 主色 14%）的输入框，右侧带闪烁光标。Enter 保存、Esc 取消、blur 保存（或按配置放弃）。保存中显示一个小转圈，成功后短暂闪一次浅绿底做确认，失败则回滚原值并给行内错误提示。无障碍上单元格加 aria-label="编辑备注"，并保证 Tab 能进入、Enter 能结束。
Inline Edit: cells show text by default, with a light hover background hinting they're editable. On click, swap in place to an input with a primary-color border and soft glow (box-shadow 0 0 0 2.5px primary at 14%), with a blinking caret on the right. Enter saves, Esc cancels, blur saves (or discards, per configuration). While saving, show a small spinner; on success, briefly flash a light green background as confirmation; on failure, roll back to the original value and show an inline error. For accessibility, add aria-label="Edit note" to the cell and ensure Tab can enter it and Enter can finish editing.
常见搭配
同一页面里经常和「行内编辑」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:1.3fr 1.5fr .8fr"><span>客户</span><span>备注</span><span class="tb__num">金额</span></div>
<div class="tb__row" style="grid-template-columns:1.3fr 1.5fr .8fr"><span class="tb__c">Aurora Labs</span><span class="tb__edit">续费优惠 8 折</span><span class="tb__num">¥ 1,299</span></div>
<div class="tb__row" style="grid-template-columns:1.3fr 1.5fr .8fr"><span class="tb__c">Bright Studio</span><span class="tb__c">—</span><span class="tb__num">¥ 599</span></div>
<div class="tb__row" style="grid-template-columns:1.3fr 1.5fr .8fr"><span class="tb__c">Codecraft</span><span class="tb__c">—</span><span class="tb__num">¥ 0</span></div>
</div>
</div>