模板 1｜有 Tab + 平铺筛选 + 搜索 + 业务操作
适用于报表准入申请、数据项管理等多视图页面。通过 Tab 切换业务视图，并展示对应的筛选条件。
报表状态
报表来源
报表层级
填报频率
PC 端筛选、搜索与操作区
布局设计规范
统一 PC 管理后台的筛选、搜索与业务操作布局。高频条件便于选择，查询操作集中呈现，布局随内容宽度调整。
01
组件分类与职责
01业务 Tab
切换业务视图，明确区分一级与二级 Tab。
02业务操作
集中放置新增、导入等操作，低频操作收纳至“更多操作”。
03平铺筛选
使用频繁、单选、选项较少，平铺便于快速筛选。
04表单筛选
输入框与下拉框均用提示文字说明字段，如“请输入用户名称”“请选择角色”。
05搜索与重置
关键词输入与搜索、重置组合展示。
02
组件使用场景与规则
| 使用场景 | 推荐组件 | 使用规则 |
|---|---|---|
| 业务模块 / 列表视图 | 一级 Tab / 二级 Tab | 用于切换业务视图；二级 Tab 的视觉层级低于一级 Tab。 |
| 高频、选项较少 | 选项直接平铺 | 优先平铺，便于快速切换；空间不足时先考虑换行。 |
| 低频、固定选项 | 下拉框 | 适用于低频或较长选项；未选择时提示具体字段。 |
| 机构、角色等较多选项 | 可搜索下拉框 | 选项较多时支持搜索和清空，避免平铺长列表。 |
| 关键词和日期 | 输入框 / 日期范围 | 与搜索、重置组成查询区；日期条件使用日期选择器。 |
| 新增、删除、导入、导出 | 独立业务操作组 | 主操作直接显示，低频操作收纳至“更多操作”。 |
03
四类标准布局模板
以下示例支持切换 Tab、选择筛选项、展开或收起筛选，以及打开“更多操作”菜单。
筛选布局模板选择流程
判断顺序：先判断筛选展示方式，再判断业务视图，最后判断操作需求。布局按可用宽度调整，空间不足时整组换行。
判断说明
01 不适合平铺时优先选择模板 4；日期区间、多选和复杂输入使用表单筛选。
02 适合平铺且需要业务 Tab，选择模板 1；业务操作按需配置。
03 适合平铺且不需要业务 Tab：有业务操作选择模板 2，仅查询选择模板 3。
有 Tab 版
模板 2｜无 Tab + 平铺筛选 + 搜索 + 业务操作
适用于任务下发、常态报表申请等页面。顶部集中放置业务操作和搜索，下方展示平铺筛选。
填报频率
任务状态
任务类型
模板 3｜无 Tab + 平铺筛选 + 搜索
适用于已办任务、业务审核管理等页面。展开时显示五组条件，收起时显示已选条件摘要。
填报频率
来源层级
任务状态
接收单位类型
模板 4｜表单筛选 + 搜索 + 业务操作
适用于用户管理、系统管理等表单查询页面。根据筛选数量、业务操作数量和容器宽度自动调整布局。
调整参数，预览布局
调整下方参数，查看同排、分区和折叠效果。空间足够时同排；空间不足时分区；筛选项超过一行时默认收起。
设置 1–10 项筛选条件，默认 4 项。搜索、重置和“展开”不计入筛选数量。
本例中，1–4 项操作直接显示；5 项时前三项直接显示，后两项收纳至“更多操作”。操作总数包含菜单内操作，不包含“更多操作”入口及查询按钮。
设置预览容器宽度。控件按扣除边框、内边距后的可用宽度排列，固定宽度不超过当前页面空间。
当前布局
正在计算布局…
布局判断规则
01 · 空间足够：同排
业务操作靠左，筛选项与搜索、重置整组靠右，中间留出弹性空白。
业务操作
筛选 筛选 筛选搜索 / 重置
02 · 空间不足：分区
顶部左侧放置业务操作，右侧放置查询操作。筛选项从下一行左侧排列；一行能放下时全部显示。
业务操作搜索 / 重置
筛选 筛选 筛选
03 · 筛选超过一行：折叠
查询操作固定在顶部右侧。下方默认保留首行筛选，点击“展开”查看全部条件；收起保留已选值。
业务操作搜索 / 重置 / 展开
常用筛选
当前采用同排布局：业务操作靠左，筛选与查询操作整组靠右。
查看布局尺寸与规则
输入框和下拉框均使用字段提示，如“请输入用户名称”和“请选择角色”。重置清空输入内容，下拉框恢复对应字段的提示文字。
筛选框宽度为 200–300px。同排时业务操作靠左，筛选与查询操作整组靠右；业务组与筛选组至少间隔 24px，筛选项间隔 12px。
分区时查询操作置于顶部右侧，筛选网格最多 6 列，每列宽 200–300px，列间距 12px。筛选项超过一行时默认保留首行，提供“展开 / 收起”；只有一项条件时不设置折叠入口。
展开与收起仅改变显示范围，保留已选值。调整参数后，当前适用的布局规则会自动高亮。
04
展开、收起与异常处理
折叠规则
| 平铺筛选不超过 2 组 | 默认全部显示，不设置折叠入口。 |
| 表单筛选超过 1 行 | 默认显示首行条件，提供“展开 / 收起”；保留已选值。 |
| 平铺筛选达到 3 组或条件较复杂 | 可提供折叠入口，收起后展示各组当前选值，点击摘要即可展开。 |
| 模板 1、2、3 收起后 | 显示全部已选条件摘要，点击摘要即可展开；Tab、搜索及业务操作继续显示。 |
| 折叠入口 | 放在搜索、重置之后，与查询操作同组。 |
异常与边界场景
| 选项过多 | 优先让选项自然换行，避免压缩文字或点击区域。 |
| 按钮过多 | 优先显示高频操作，低频操作收纳至“更多操作”。 |
| 隐藏条件已生效 | 保留筛选值，展开后可查看或修改；重置恢复默认值。 |
| Tab / 权限变化 | 按当前视图和权限展示可用功能，不保留空占位。 |
重要：“展开”用于展开条件，“更多操作”用于查看业务操作。收起保留已选值，重置恢复默认条件。
05
响应式布局
按筛选容器的可用宽度判断布局。测量时取容器边框和内边距以内、可用于排列控件的宽度。
模板 1、模板 3
首组筛选或已选摘要与搜索组能同排时，搜索组靠右。两组实际宽度加上间距超过容器可用宽度时，搜索组移到筛选或摘要上方，靠左独占一行。
模板 2
按全部业务按钮、搜索组及组间距的实际宽度判断。放得下时业务按钮居左、搜索组居右；放不下时搜索组整体换到下一行并靠左。筛选项或已选摘要始终排在工具栏下方。
模板 4
业务按钮、筛选框和查询按钮能放入一行时同排，否则筛选框移至工具栏下方。每列宽 200–300px，列间距 12px，最多 6 列。筛选项超过一行时，默认仅显示首行。
06
设计与开发验收清单
组件与视觉
交互与边界
建议先统一基础组件，各页面按实际内容和可用宽度应用规则。