列表页开发指南
列表页设计的核心目标是为了让用户能方便的筛选定位目标数据、查看目标数据关键信息、对目标数据进行操作。设计要点如下：
- 要尽可能减少定位到目标数据所需的操作次数；
- 列表页中仅展示关键信息，更多信息折叠或放在详情页；
列表页按照区域可划分为 5 个区域，本指南围绕这 5 个区域进行详细的描述。
检索过滤区
搜索区
一个搜索框
多个搜索框
过滤区
操作区
列表区
表头
列宽
对齐方式
列表项说明
批量操作区
分页区
搜索区
搜索过滤的目标是让用户能方便的定位目标数据。
- 搜索过滤条件需要保持状态，即与路由 Query Parameter 保持一致
//搜索 18012345678 账号下 5 月份的订单，浏览器地址栏应出现如下路由
http://example.com/#/orders?pageNo=1&startDate=2020-05-01&endDate=2020-05-31&keyword=18012345678
- 空条件搜索恢复列表初始状态
一个搜索框
- 显示搜索图标
- 搜索框中回车即发起搜索
- 支持同时多项搜索，搜索项用 placeholder 提示，如：“ID/作者名/标题”
多个搜索框
- 点击搜索发起搜索
- 点击重置恢复默认搜索条件
- 一行最多显示个3个搜索框，搜索项过多时采用展开/收起机制节省空间
- 搜索项过多时可增加搜索项标题
筛选区域
- 显示列表的所有筛选条件
- 筛选的结果也会在这里显示，支持清除操作，清除已选筛选条件
- 可以同时支持多个筛选条件
- 点击筛选条件，显示选择面板
- 选项过多的情况，在下拉列表框中增加搜索控件。比如按班级名称过滤。
- 多选的情况，面板中有“确定”和“重置”按钮；点击选项，不关闭面板；点击确定，关闭面板执行筛选操纵。点击重置，清空选择状态。
操作区域
操作可分为业务型操作、通用型操作、批量操作：
- 业务操作，如：
新建、提现等 - 通用操作，如：
导出、自定义列、刷新 - 批量操作，如：
批量删除、批量上架、批量审批等
批量操作
- 批量操作默认不显示，当勾选任意一第一列 checkbox 之后，显示批量操作区域
- 批量操作区包括：
已选中 X 项、批量操作按钮、取消按钮 - 数据选中状态不受翻页操作影响
- 点击取消按钮，取消所有的选择，隐藏批量操作区域
列表区域
- 没有数据时，显示表头+没有数据的占位图片。
- 列表区域的高度，不超过页面高度，如果页面高度不足以完全展示列表的内容时，展示纵向滚动条
表头
- 支持排序的表头，点击排序刷新整个列表，已生效的排序方式高亮。
- 同时只支持一个排序方式
- 内容不折行
- 表头和列表项居左或者居右是一致的。
列宽
- 可预测内容长度，设置固定列宽，不折行。
- 不可预测内容长度，设置自动列宽，有最小宽度和最大宽度；超过两行，显示省略号
默认情况下，表格会根据列中的数据长度动态分配尺寸。 我们在进行翻页、筛选、排序等操作时，会导致因数据长度不同，列的位置也同时在变化，体验不友好。
常见问题：所有列设置固定宽度
当所有列宽之和大于或小于容器宽度时，已设置的宽度会失效，表格会均匀分配列宽。
下图中容器宽度为1000px，每个列的宽度为100px：
预期
实际
所以，需要保留一个不可预测长度的列，不设置其宽度，其余设置为固定宽度。
常见的可预测长度的类型：
* 订单编号： 通常是有固定规则
* 手机号码： 固定11位数字
* 日期： 格式通常为 `年-月-日` 或 `年-月-日 时:分:秒`，长度也是可预测的
不可预测长度的类型：
* 地址
* 公司名称
对齐方式
- 数字类型及操作列：居右显示，方便快速比对数值大小
- 其他：居左显示
列表项
- 列表项目为空时显示【--】
列表项说明
checkbox
- 勾选checkbox，显示批量操作区域，更改当前页面全选状态。
编号（ID）
- 为了节约按钮，编号为超链接，点击在当前窗口打开详情页
- 居左显示
短文本（姓名）
- 居左显示
长文本（简介）
- 居左显示
- 当内容超出列宽时，显示省略号
- 鼠标悬浮，tooltip显示完整内容
数字（年龄）
- 居右显示
- 数字支持排序
金额（¥10,000.00）
- 居右显示
- 显示货币种类符合
- 最多保留小数点2位
- 金额支持排序
状态（启用状态）
- 居左显示
- 支持筛选
- 正常状态用绿色
- 异常状态用红色
- 等待处理状态用黄色
- 关闭状态用灰色
日期&时间
- 居左显示
- YYYY-MM-DD HH:mm:ss
- 为了方便比对时间，日期和时间都有时也在一行显示
- 支持排序
操作
- 居右显示
- 最多显示4个按钮
- 超过4个按钮，第四个按钮显示【...】点击显示下拉列表
- 原则上不要超过4个按钮，更多的按钮可以放到详情页中实现。
- 按钮文字为2-4个字
- 按钮是超链接的形式
- 不能执行该操作时，按钮显示灰色，比如创建者查看一条待审核的数据时不能执行删除操作
分页区域
- 在数据相对稳定的时候，翻页才是有意义的
- 从列表页，跳转到详情页，再返回，列表还要保持在当前的页面
- 中后台的列表都采用分页
- 没有数据时，不显示分页
- 分页按钮包括以下内容
- 跳转首页：点击返回首页
- 上一页：点击返回上一页，当前页为第一页时不显示
- 前5页：当前页大于5时显示，点击跳转到当前页-5
- 页码：最多显示5个，如果前后都大于2的时候，当前页显示在最中间，并且高亮显示。点击跳转到指定页
- 后5页：当前页小于最大页书减5时显示，点击跳转到当前页+5
- 下一页：点击跳转下一页，当前页为最后一页时不显示
- 跳转末页：点击返回末页
- 总记录数：共XX条
按钮样式
业务操作
- 主色调背景，有边框
通用操作
- 按钮样式：左侧图标，中间文字，右侧向下箭头;
- 带有向下箭头的图标，鼠标悬浮会显示下拉列表
- 按钮不可点击时，显示灰色，鼠标悬浮时，默认提示“不能执行次操作”
导入导出&通用操作
- 无边框
- 有多个导入或导出功能时，按钮文案后方增加下箭头图标，鼠标浮动到按钮上，显示所有操作项