SuperAPI AI 工具集

table-filters

设计与创作

查看项目

更新于 10-16 08:08

技能介绍

用途:当用户要构建带筛选功能的数据表格时,该技能会分析表格各列并设计筛选交互方案。

主要能力:第一步按数据模式为每列分配筛选类型——自由文本/名称/描述用“包含”筛选;固定取值且少于 20 项用复选框;数值用范围;日期用日期范围;布尔值用开关。第二步给出筛选布局:筛选栏横跨表格宽度,内含筛选标签(chip)、搜索输入框和清除按钮;排序为下拉框而非表头图标;表头可点击打开对应筛选菜单。第三步给出各筛选组件的结构示意,包括文本包含、复选框、数值范围(可选滑块)、日期范围(含 Today/This week/This month 快捷项),以及标签的显示规则(最多显示 2 个值,超出显示 +N,点击标签可重新打开菜单)和空状态(无结果提示与“清除全部筛选”操作)。

使用方式:技能输出带类名的语义化 HTML,类名包括 .filter-bar、.filter-chips、.chip、.chip-remove、.filter-search、.filter-clear、.sort-control、.filter-menu、.empty-state,数据属性包括 data-column 与 data-filter-type。视觉样式需在生成筛选 HTML 后调用 html-style 技能处理。

限制:资料未提供具体安装命令、依赖、平台支持、收费或效果数据;内容为设计规范与结构示意,不含可直接运行的完整代码。