数据页

一张订单列表：搜索、状态、时间粒度三道筛选收窄同一份数据，表格排序与勾选各管各的，筛没了换空态，取数时换加载态。

订单列表

共 6 条，筛选后 6 条

关键词

全部状态状态

单号

客户

金额

状态

SO-2041

远岫科技

1,280

已付款

SO-2042

青川物流

640

配送中

SO-2043

海塘制造

3,990

退款中

SO-2044

远岫科技

210

已付款

1-4 of 6

主题跟随站点浅色深色密度宽松紧凑对比度基线高对比方向从左到右从右到左

这一屏定了什么

• 筛选条是一行，不是一堆。 文本框、下拉、分段控件与按钮同高对齐，靠的是同一组控件高度令牌；它们之间那道竖线是分隔线组件。
• 三种状态各有其位。 表体有行时渲行，取数中露加载槽，筛完没有行露空态槽——空态槽里放的就是空态组件，表格不必自己再造一套。
• 状态列是标签不是色块。 每种状态对应一档语气，颜色由语气派生，页面里一个色值都没写。
• 筛选一动就退回第一页。 页码是一份独立状态，条件变了不复位就会停在一页不存在的页码上；这条在示例里是三行 watch，在你的项目里同样要有。
• 排序链与勾选互不相干。 排序链是有序数组，下标即优先级；勾选是另一份值，换页与重排都不动它。

换成你的项目

• 这里的筛选与分页都在内存里算。换成服务端时，把 filtered 换成请求结果、把 count 换成后端给的总数即可，其余接线一行不改。
• 列宽与列序的唯一事实源是 columns，行序与行号的唯一事实源是 rows；标记只管长相，改了标记不会串位。
• 条目上万时把表体换成虚拟滚动，或者用无限滚动换掉分页——两者不要同时上：一个给确定位置，一个给「再来一些」。