列表与复杂检索
列表页采用 Quick Query + Applied Summary + Advanced Filter + Saved View 的渐进披露。首屏优先展示结果、当前查询上下文和主要行动;既不永久铺满全部条件,也不把条件全部藏进不可见弹窗。
List Recipe
Page Header -> Query Toolbar -> Applied Summary -> Data Toolbar -> Server Data Table -> Pagination -> Selection Action Bar(有选择时)Page Header 和 Query Toolbar 构成连续工作面,不做成两张大圆角悬浮卡片。
三档复杂度
| 级别 | 判断 | 默认呈现 |
|---|---|---|
| Simple | 1–4 个普通条件 | 全部放 Quick Query |
| Structured | 5–12 个条件 | 2–4 个高频条件 + 400–480px Advanced Sheet |
| Expert | 13+、OR/AND、跨实体或需共享 | Quick Query + 560–720px Query Studio |
条件数量不是唯一判断。出现条件分组、OR、嵌套关系、跨实体或团队共享,就进入 Expert。
Quick Query
- 一行内保留一个主关键字和最多三个高频条件。
- 宽度不足时低频条件折入 Advanced Filter,不扩成三行表单。
- Advanced Filter 始终显示已应用隐藏条件数。
- 服务端查询默认显式 Apply;轻量建议可 250–400ms debounce。
- 引用选择器在自身 Popover 内完成搜索,不在每个字段旁重复放按钮。
Applied Summary
应用复杂条件后,用户无需重新打开 Sheet 就能知道结果为何出现:
当前查询:在办案件 · 华东区域 · 本月有期限 · 负责人为我[状态:在办 ×] [区域:华东 ×] [期限:本月 ×] [+ 4 个高级条件]结果为空时仍保留 Summary。Clear all 只清除当前条件,不删除 Saved View。
Advanced Filter
Structured 使用右侧 Sheet:
- Header 显示标题和已选数量;
- Body 按业务语言分组并独立滚动;
- Footer 固定“清除 / 另存为视图 / 应用”;
- 关闭未应用编辑不能悄悄改变结果;
- 应用后关闭 Sheet,并在列表保留 Summary。

Query Studio
Expert 模式支持一层清晰的 全部满足 / 任一满足 分组、字段/操作符/值、自然语言摘要和保存视图。默认不暴露任意表达式树。

Saved View
Saved View 保存查询、排序、列显隐和可选密度,不保存截图或授权事实。
- 产品默认视图不可被普通用户覆盖。
- 个人视图可复制、重命名和设为个人默认。
- 团队视图需要权限和所有者。
- 当前查询必须能由 URL 表达和分享。
- 租户切换不得复用可能泄露数据范围的缓存。
Data Table
| 属性 | Dense | Compact | Comfortable | Spacious |
|---|---|---|---|---|
| 单行最小高度 | 28px | 36px | 48px | 52px |
| 双行最小高度 | 40px | 48px | 60px | 64px |
| 水平 padding | 6px | 12px | 16px | 20px |
| 垂直 padding | 2px | 6px | 10px | 12px |
| 表头高度 | 28px | 36px | 44px | 52px |
| 控件字号 | 13px | 14px | 14px | 16px |
- 主对象列固定在左侧;金额右对齐并使用 tabular numbers。
- 状态使用文字加形状/图标,不只用颜色。
- 横向溢出必须有边界或阴影提示。
- 表头可 Sticky,但避免页面与表格两个含混的纵向滚动区。
- 选中行后出现 Selection Action Bar,明确“已选 N 项”。
- 导出必须说明当前页、当前查询还是已选项,以及是否包含隐藏列。
URL 与错误状态
稳定、非敏感条件进入 URL:
/matters?view=my-active&status=open&owner=me&deadline=30d&sort=deadline.asc实现必须覆盖 Loading、Empty、Filter-empty、Error、Unauthorized 和 Stale。Filter-empty 仍保留查询条件和快速清除入口。