DATA TABLE
行选择Row Selection
每行前面一个复选框，表头那个是全选（支持半选态）。选中后通常在上方浮出批量操作条。
效果预览
客户套餐金额
Aurora Labs团队版¥ 1,299
Bright Studio专业版¥ 599
Codecraft免费版¥ 0
适合用在哪
需要批量处理的列表：批量删除、批量导出、批量改状态。
容易踩的坑
- 表头全选只选中当前页，却没提示「是否选择全部 1,280 条」，批量操作范围被误解。
- 翻页或筛选后选中状态静默丢失，用户以为已选的记录没被处理。
- 点击整行也会切换选中，与行内链接和按钮冲突，造成误选。
设计提示词 · Prompt
行选择（Row Selection）：第一列放 12-16px 的圆角复选框（圆角 3.5px）。表头复选框支持三态：全未选、部分选（画一条横线）、全选（画勾）。选中行整行用极浅主色底（#f5f3ff）标注，比只改变选框更醒目。复选框要够大（视觉 14px 但点击热区至少 24px）。无障碍上用 <input type="checkbox"> 或 role="checkbox" + aria-checked="mixed"。键盘需要支持 Space 切换与 Shift+点击范围选择。
Row Selection: put a 12-16px rounded checkbox (3.5px radius) in the first column. The header checkbox supports three states: none selected, partially selected (draw a horizontal dash), and all selected (draw a check). Selected rows get a very light primary background on the whole row (#f5f3ff), which is more noticeable than changing only the checkbox. Checkboxes must be big enough (14px visually but at least a 24px hit area). For accessibility, use <input type="checkbox"> or role="checkbox" + aria-checked="mixed". The keyboard must support Space to toggle and Shift+click for range selection.
常见搭配
同一页面里经常和「行选择」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:16px 1.6fr 1fr .8fr"><span class="tb__cb"></span><span>客户</span><span>套餐</span><span class="tb__num">金额</span></div>
<div class="tb__row tb__row--on" style="grid-template-columns:16px 1.6fr 1fr .8fr"><span class="tb__cb is-on"></span><span class="tb__c">Aurora Labs</span><span class="tb__c">团队版</span><span class="tb__num">¥ 1,299</span></div>
<div class="tb__row tb__row--on" style="grid-template-columns:16px 1.6fr 1fr .8fr"><span class="tb__cb is-on"></span><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:16px 1.6fr 1fr .8fr"><span class="tb__cb"></span><span class="tb__c">Codecraft</span><span class="tb__c">免费版</span><span class="tb__num">¥ 0</span></div>
</div>
</div>