筛选栏
Filter Bar
UI 组件也叫：查询栏、搜索表单、筛选条件区、Query Filter
一句话：放在列表或表格上方的一排查询条件，如关键字、状态、日期范围，用来缩小要看的数据范围。
详细解释
筛选栏是后台列表页的标准配置：表格上方一两行输入框和下拉框（「订单号」「状态」「下单时间」），最右边是「查询」「重置」按钮，条件多时只露出前几项，其余收进「展开」。电商和内容网站常见另一种形态：一排带下拉箭头的筛选按钮（「价格」「品牌」），选中后立即生效，下方显示「已选：华为 ×」这样可删除的标签。
它和 搜索框 的区别：搜索框只有一个关键字输入，筛选栏是多个条件的组合。和 工具栏 的区别：筛选栏决定「看哪些数据」，工具栏决定「对数据做什么」。条件很多又不常用时，可以把完整条件放进 抽屉，筛选栏只保留最常用的两三项。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
订单列表的表格上方加一个筛选栏：一行放「订单号」输入框、「状态」下拉、「下单时间」日期范围，右侧是「查询」「重置」按钮；条件超过一行时折叠并显示「展开」链接；已选条件同步到网址参数，刷新页面后保留，点重置恢复默认。
结构与适用场景
结构描述
由一组横向排列的查询条件（输入框、下拉选择、日期范围）和「查询」「重置」按钮组成，可带展开收起和已选条件标签。
适用场景
- 后台表格或列表数据较多，需要按多个条件组合查询
- 商品、内容列表需要按价格、品牌、分类等维度快速缩小范围
- 查询条件在三到八个之间，常用条件需要一直露在外面
不适用场景
- 只需要按一个关键字搜索，用搜索框就够
- 数据只有十几条，一眼就能看完，不需要筛选
- 放的是新建、导出这类动作按钮，那是工具栏
常见坏用法
- 十几个筛选条件全部平铺，占掉半屏，表格被挤到下面
- 筛选条件没有同步到网址，刷新或分享链接后条件全丢
- 只有「查询」没有「重置」，也看不出当前生效了哪些条件
识别特征
- 表格或列表上方一排带标签的输入框和下拉框
- 最右侧是「查询」「重置」按钮，可能有「展开」链接
- 或者是一排带下拉箭头的筛选按钮，下方跟着可删除的已选标签
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
.ant-pro-query-filter.ant-form-inline.el-form--inline.arco-form-layout-inline.n-form--inline[class*="filter-bar" i][class*="filterbar" i][role="search"]:has(select, [role="combobox"])