Skip to content
bitzorcas
中EN

Reference

列表与复杂检索

Design System 1.2 的 List Recipe、Simple/Structured/Expert 检索、Saved View、表格密度和 URL 状态。

Last updated

列表与复杂检索

列表页采用 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 构成连续工作面,不做成两张大圆角悬浮卡片。

三档复杂度

级别判断默认呈现
Simple1–4 个普通条件全部放 Quick Query
Structured5–12 个条件2–4 个高频条件 + 400–480px Advanced Sheet
Expert13+、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

属性DenseCompactComfortableSpacious
单行最小高度28px36px48px52px
双行最小高度40px48px60px64px
水平 padding6px12px16px20px
垂直 padding2px6px10px12px
表头高度28px36px44px52px
控件字号13px14px14px16px
  • 主对象列固定在左侧;金额右对齐并使用 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 仍保留查询条件和快速清除入口。

100%

滚轮或按钮缩放 · 放大后拖动画面 · 双击切换 100% / 200%