筛选条件构建器（Filter Builder）是什么：效果预览与 AI 设计提示词

效果预览

金额>¥ 500✕

并且

状态等于试用中✕

并且

创建时间最近30 天✕

适合用在哪

分析型后台、CRM、日志检索。简单场景用筛选芯片（Filter Chips）更轻。

容易踩的坑

同一组条件混用与/或却没有括号分组，用户无法确认最终逻辑，结果与预期不符。
每改一个条件就立即请求查询，大数据量下频繁卡顿，应改为点击「应用」后再查。
筛选条件不写入 URL，刷新或分享链接后条件全部丢失。

设计提示词 · Prompt

筛选条件构建器（Filter Builder）：每行是一个 flex：字段选择器（浅色底胶囊）+ 运算符选择器 + 值输入框，右侧一个圆形删除按钮。行与行之间显示一个小号大写的与/或（AND/OR）连接词，用户可切换。第一行左侧可加一个「当」引导字。底部给「添加条件」的虚线按钮与「应用」主按钮。字段名要用业务语言（「金额」而不是「amount」），运算符按字段类型动态变化（数字给 >、<、介于；文本给包含、等于）。条件行数超过 5 条时考虑折叠为摘要。

Filter Builder: each row is a flex: a field selector (light pill) + an operator selector + a value input, with a circular delete button on the right. Between rows, show a small uppercase AND/OR connector that users can toggle. The first row can have a leading "Where" label on the left. At the bottom, provide a dashed "Add condition" button and an "Apply" primary button. Field names should use business language ("Amount" rather than "amount"), and operators change dynamically by field type (numbers get >, <, between; text gets contains, equals). When there are more than 5 condition rows, consider collapsing them into a summary.

常见搭配

同一页面里经常和「筛选条件构建器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

筛选标签Filter Chips 数据表格Data Table 表格空状态Table Empty State 气泡浮层Popover

演示 HTML 结构

<div class="s" style="width:100%">
  <div class="tb-filter">
    <div class="tb-filter__r"><i class="is-f">金额</i><i>&gt;</i><i>¥ 500</i><em>✕</em></div>
    <div class="tb-filter__join">并且</div>
    <div class="tb-filter__r"><i class="is-f">状态</i><i>等于</i><i>试用中</i><em>✕</em></div>
    <div class="tb-filter__join">并且</div>
    <div class="tb-filter__r"><i class="is-f">创建时间</i><i>最近</i><i>30 天</i><em>✕</em></div>
  </div>
</div>