SuperAPI AI 工具集

bulk-select-actions

设计与创作

查看项目

更新于 10-15 17:27

技能介绍

用途:在 React/Next.js 表格或列表中实现多选与批量操作,包括删除、归档、导出、状态变更等,并配套浮动操作工具栏。

主要能力:复选框支持全选、半选(indeterminate)与单选;浮动工具栏固定在底部居中,选中后淡入滑入,未选中时返回 null;工具栏显示选中数量与清除按钮;破坏性操作通过 AlertDialog 二次确认;可根据选中项状态条件显示操作(如仅当全部为 DRAFT 时显示 Publish);提供可复用的选择状态与批量 mutation 钩子模式。

技术栈:@radix-ui/react-checkbox ^1.x、tailwindcss-animate ^1.x、shadcn/ui(AlertDialog、Button、DropdownMenu)、lucide-react ^0.x。

必要用法:选中状态应放在页面组件而非表格组件;表格接收 selectedIds 与 onSelectionChange,工具栏接收 selectedIds 与 onClearSelection。复选框使用 checked={allSelected ? true : someSelected ? "indeterminate" : false},避免手动 ref。工具栏容器使用固定类名:fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-4 duration-200。行复选框单元格需加 onClick={(e) => e.stopPropagation()},防止触发行点击。筛选条件变化时在筛选处理函数内清空选中,不要用 useEffect。批量请求成功后调用 queryClient.invalidateQueries 刷新数据。

适用场景:后台管理、仪表盘等需要表格式数据批量操作的界面。

限制:依赖 Radix、shadcn/ui 与 Tailwind 生态;未提供具体安装命令、接口地址或完整后端实现,需按项目实际补充。