模板 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–3 项操作直接显示；4–5 项保留高频操作，低频操作收纳至“更多操作”。操作总数包含菜单内操作，不包含“更多操作”入口及查询按钮。
设置预览容器宽度。控件按扣除边框、内边距后的可用宽度排列，固定宽度不超过当前页面空间。
当前布局
正在计算布局…
布局判断规则
01 · 空间足够：同排
业务操作靠左，筛选项与搜索、重置整组靠右，中间留出弹性空白。
业务操作
筛选 筛选 筛选搜索 / 重置
02 · 空间不足：分区
顶部左侧放置业务操作，右侧放置查询操作。筛选项从下一行左侧排列；一行能放下时全部显示。
业务操作搜索 / 重置
筛选 筛选 筛选
03 · 筛选超过一行：折叠
查询操作固定在顶部右侧。下方默认保留首行筛选，点击“更多筛选”查看全部条件；收起保留已选值。
业务操作搜索 / 重置 / 更多筛选
常用筛选
当前采用同排布局：业务操作靠左，筛选与查询操作整组靠右。
查看布局尺寸与规则
标签规则：输入框不使用内置标签，以提示文字说明输入内容；下拉框保留内置标签，未选择时显示“请选择”。标签颜色为 #606266，提示文字为 #A8ABB2；输入内容和已选值为 #303133。重置清空输入内容，下拉框恢复“请选择”。
筛选框宽度为 192–320px（含标签），容器不足 192px 时随容器缩小。同排时业务操作靠左，筛选与查询操作整组靠右；业务组与筛选组至少间隔 24px，筛选项间隔 12px。
分区时查询操作置于顶部右侧，筛选网格最多 4 列，以 240px 为目标宽度，单列不超过 320px。筛选项超过一行时默认保留首行，提供“更多筛选 / 收起筛选”；只有一项条件时不设置折叠入口。
展开与收起仅改变显示范围，保留已选值。调整参数后，当前适用的布局规则会自动高亮。
04
展开、收起与异常处理
折叠规则
| 高频平铺筛选 ≤ 2 行 | 默认全部显示，不设置折叠入口。 |
| 普通筛选超过 1 行 | 默认显示首行条件，提供“更多筛选 / 收起筛选”；保留已选值。 |
| 平铺筛选 3 行及以上或组合复杂 | 可提供折叠入口，收起后统一保留首行筛选项。 |
| 模板 1、2、3 收起后 | 保留最上面一行筛选，仅隐藏其余筛选项，并保留已选值；Tab、搜索及业务操作继续显示。 |
| 折叠入口 | 放在搜索、重置之后，与查询操作同组。 |
异常与边界场景
| 选项过多 | 优先让选项自然换行，避免压缩文字或点击区域。 |
| 按钮过多 | 优先显示高频操作，低频操作收纳至“更多操作”。 |
| 隐藏条件已生效 | 保留筛选值，展开后可查看或修改；重置恢复默认值。 |
| Tab / 权限变化 | 按当前视图和权限展示可用功能，不保留空占位。 |
重要：“更多筛选”用于展开条件，“更多操作”用于查看业务操作。收起筛选保留已选值，重置恢复默认条件。
05
响应式布局
以下视口区间仅作参考。实际列数与换行方式以内容区可用宽度为准，并受侧栏、内边距和操作数量影响。
≥ 1600px · 宽屏
可用空间充足时优先同排；普通筛选通常可排 3–4 列。
1280–1599px · 常规 PC
空间不足时分区排列，保持查询操作完整；普通筛选通常可排 2–3 列。
< 1280px · 窄窗口
业务操作与查询操作可整组换行，筛选项按可用宽度排列，优先保证可读性。
06
设计与开发验收清单
组件与视觉
交互与边界
建议先统一基础组件，各页面按实际内容和可用宽度应用规则。