DATA TABLE
批量操作条Bulk Action Bar
选中若干行后在表格上方（或底部吸底）浮出一条深色操作栏，显示「已选 N 项」与可用动作。
效果预览
已选 3 项导出改状态删除
客户套餐金额
Aurora Labs团队版¥ 1,299
Bright Studio专业版¥ 599
适合用在哪
配合行选择使用。危险操作（删除）用红色区分并二次确认。
容易踩的坑
- 吸底操作条遮住表格最后一两行，又没给容器补底部内边距，用户选不到末行。
- 操作条出现时不通知读屏，键盘用户不知道已有批量动作可用。
- 批量删除后不提供撤销，误删 50 条只能找管理员恢复。
设计提示词 · Prompt
批量操作条（Bulk Action Bar）：深色底（#17171b）、白字、圆角 9px、内边距 7-11px，可用绝对定位悬浮在表格上方或吸在底部。左侧是「已选 3 项」加粗文案，中间可有次级操作（如「移动到…」用半透明白底的小胶囊），最右是危险操作（红色底 #ef4444）与关闭按钮。选中数量为 0 时整条淡出（opacity + translateY 过渡）。删除类操作必须弹确认对话框并写明影响条数。键盘上支持 Esc 清空选择。
Bulk Action Bar: dark background (#17171b), white text, 9px radius, 7-11px padding; it can float above the table via absolute positioning or stick to the bottom. On the left, bold "3 selected" copy; in the middle, optional secondary actions (e.g. "Move to…" as small pills with semi-transparent white backgrounds); at the far right, the destructive action (red background #ef4444) and a close button. When the selection count reaches 0, fade the bar out (opacity + translateY transition). Delete actions must open a confirmation dialog stating how many items are affected. Support Esc on the keyboard to clear the selection.
常见搭配
同一页面里经常和「批量操作条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-col" style="width:100%;gap:7px">
<div class="tb-bulk"><b>已选 3 项</b><span class="tb-bulk__sp"></span><em>导出</em><em>改状态</em><em class="is-dg">删除</em></div>
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:16px 1.6fr 1fr .8fr"><span class="tb__cb is-on"></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>
</div>