生产力
table-filters avatar

table-filters

为数据表格设计并实现专业、交互式的筛选用户界面,并能根据列数据类型自动调整。

简介

table-filters 技能旨在协助软件代理程序为数据密集型应用程序创建直观且功能强大的筛选系统。当任务涉及建立数据表格时,此技能会分析各个数据列,以确定最有效的筛选机制,无论是自由文本搜索、基于复选框的分类筛选、数值范围滑块,还是日期范围选择器。通过实现一个位于表格上方的统一筛选栏,它确保用户可以在不干扰用户界面或标题行的情况下执行复杂查询。输出内容包含结构化的语义化 HTML,并具有与 html-style 技能完全兼容的特定类名,使开发流程能从功能布局无缝过渡到精致的 UI 设计。

  • 自动将列数据模式(文本、布尔值、数字、日期)映射到最优化的筛选组件。

  • 实现统一的筛选布局,包含基于标签 (Chip) 的状态管理、清除全部功能以及排序控件。

  • 支持复杂的用户交互,如多选复选框筛选、日期范围输入以及数值范围滑块。

  • 输出遵循既定组件模式的干净、语义化 HTML,随时可进行样式设计或直接集成到 Web 代理程序中。

  • 提供响应式的无结果状态 UI,通过明确的重置动作来妥善处理数据为空的场景。

  • 在进行前端生成时,请先识别表格结构,以便此技能准确映射各个列。

  • 使用提供的类名(如 .filter-bar、.filter-chips 和 .filter-menu),以保持跨应用程序的样式一致性。

  • 将此技能与 html-style 技能结合使用作为最后步骤,以确保生成的组件符合项目的设计系统。

  • 此技能将筛选菜单视为浮动组件,显示在表格上方以确保最佳的可视性和布局完整性。

  • 适用于用户需要在基于浏览器的代理界面内操作大型数据集的场景,从而提升整体数据访问能力与开发效率。

仓库统计

Star 数
20
Fork 数
1
Open Issue 数
0
主要语言
TypeScript
默认分支
main
同步状态
空闲
最近同步时间
2026年5月3日 15:10
在 GitHub 查看