筛选面板
Filter Panel
别名:筛选面板过滤器筛选器过滤面板条件筛选侧边筛选左边勾选条件的那种面板
这是什么
集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
交互实验室
试一试，再决定怎么用组合筛选条件，再重置，观察结果数量如何变化。
正在加载实验室…
使用时关注什么
- 01已应用条件与结果数量应一起更新。
- 02无匹配结果时，应提供清除或放宽条件的路径。
✓ 适用场景
- 电商、检索结果等多维度数据浏览
- 后台列表需要组合条件定位记录
- 需要展示各选项的结果数（facet count）
✕ 不适用场景
- 维度极少（1~2 个，用下拉或搜索框即可）
- 筛选计算很慢（需要防抖与加载态）
- 移动端直接堆砌（收进底部抽屉承载）
常见形式
侧边常驻
Sidebar
桌面列表页左侧常驻
抽屉唤起
Drawer
移动端以底部抽屉承载
条件胶囊
Chips
已选条件以可删除胶囊回显在列表上方
实现要点
flexgridoverflow-y: autoposition: sticky左筛选 + 右结果的双栏布局（lg 以下收进抽屉）。多选状态用 Set<string> 管理， 过滤结果用 useMemo 派生；面板顶部常驻结果数与「清除全部」；已选条件回显为可删胶囊。 选项旁标注 facet 数量帮助用户预估结果规模；重筛选时防抖并给列表 loading 态。
平台 API
<fieldset><form>相关概念
搜索筛选Search Filtering
用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式搭配使用复选框Checkbox
用方形勾选框表示一组可多选的独立开关项，点击在选中与未选中间切换。 父级项可呈现半选态（部分子项选中），常用于批量选择、筛选与同意条款。
组件相似概念抽屉Drawer
从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件相似概念搜索页Search Page
承接查询意图并返回结果的内容发现页面：顶部常驻搜索框（保留查询词、可修改重搜）， 一侧是类型与筛选器，主体按相关度排列结果条目（标题 + 摘要 + 高亮命中词）， 底部用分页或无限滚动续接。空结果和无结果关键词是必须设计好的两个状态。
页面搭配使用