卡片筛选重排
灵感：能力工具箱 isotope（isotope-layout 筛选重排卡片墙）。
> 小四原创：卡片墙 → Isotope → arrange({ filter })。
> 用 data-filter / class 标记阶段；卸载 destroy。
何时使用
- 按阶段/标签筛客户卡片
- 素材墙分类切换
- Demo 筛选动画重排
硬约束
- 依赖：
isotope-layout。 - 筛选条件变更调
arrange。 - 实现要点注释标 小四原创。
- 不做完整 CRM 看板业务。
推荐实现
import Isotope from 'isotope-layout'
// 小四原创：卡片筛选重排
export function bindFilterWall(grid: HTMLElement) {
const iso = new Isotope(grid, {
itemSelector: '.customer-card',
layoutMode: 'fitRows',
percentPosition: true,
})
return {
filter: (selector: string) => iso.arrange({ filter: selector }),
destroy: () => iso.destroy?.(),
}
}
// 例：全部 / 高意向 / 跟进中
// wall.filter('*') | wall.filter('.stage-hot')
Agent 步骤
npm i isotope-layout。- 卡片加 class（如
stage-hot）；按钮调filter。 - 自测：筛选后只显示匹配项并重排。
不要做
- 仅隐藏 DOM 却声称 Isotope 动画布局。
- 忘记 destroy。
附加
- README.md · reference.md · templates/usage.md
