列表页的异形过滤器如何拆解?

欧雷 发表于

0 条评论

问题描述

在做中后台应用时,设计师时不时会甩给你带有下图那种交互的设计图:

中后台的表格页
中后台的表格页

一眼望去,有两个很「突兀」的东西——表示审核状态的选项卡标签和代表知识库类型的药丸标签。

相对于其他过滤器来说,这俩货绝壁是异形!那么这个页面该如何设计实现呢?

问题分析

问题的实际情况当然不会像一张静态的设计图所能完全表达的,它背后隐藏着个疑问——几个列表。

稍微懂点 UI 设计的人都知道,展示在 UI 中的信息是有层次的,这些信息的层次主要就是靠具有布局语义的 UI 组件来体现——视觉上的选项卡就是其一。

由于选项卡标签所代表的层次比较高,那么切换它之后,其他过滤器和表格字段是不是一致的需要打个问号。并且,切换后列表的形态也许不是表格而是其他类型的列表也说不定!

解决方案

若选项卡标签的切换不会造成其他过滤器或列表展示发生变化,那它就仅仅是单纯的异形过滤器——就像那个药丸标签一样。

用 Handie 来配置的话,只用一个视图描述器:

const KNOWLEDGE_TITLE_FIELD = { name: 'knowledgeTitle', label: '知识标题', dataType: 'string' };

const OPERATION_TYPE_FIELD = {
  name: 'operationType',
  label: '操作类型',
  dataType: 'enum',
  options: [
    { name: 'add', value: 'add', label: '新增' },
    { name: 'modify', value: 'modify', label: '修改' },
    { name: 'delete', value: 'delete', label: '删除' },
  ],
};

createView(moduleContext, {
  name: 'ReviewListView',
  category: 'list',
  renderType: 'table',
  config: { operationColumnWidth: 300 },
  fields: [
    KNOWLEDGE_TITLE_FIELD,
    OPERATION_TYPE_FIELD,
    {
      name: 'status',
      label: '审核状态',
      dataType: 'enum',
      options: [
        { name: 'untreated', value: 'untreated', label: '待审核' },
        { name: 'passed', value: 'passed', label: '通过' },
        { name: 'rejected', value: 'rejected', label: '不通过' },
      ],
    },
  ],
  actions: [
    { text: '对比', execute: compare },
    { text: '通过', execute: pass, confirm: true },
    { text: '不通过', execute: reject, confirm: true },
  ],
  search: {
    filters: [
      {
        name: 'status',
        label: '审核状态',
        dataType: 'enum',
        options: [
          { name: 'untreated', value: 'untreated', label: '待审核清单' },
          { name: 'treated', value: 'treated', label: '已审核记录' },
        ],
        renderType: 'tab-bar'
      },
      {
        name: 'status',
        label: '知识库类型',
        dataType: 'enum',
        options: [
          { name: 'article', value: 'article', label: '文章知识库' },
          { name: 'assistant', value: 'assistant', label: '助手知识库' },
        ],
        renderType: 'pill'
      },
      OPERATION_TYPE_FIELD,
      KNOWLEDGE_TITLE_FIELD,
      ...
    ],
  },
});

但如果切换选项卡标签后过滤器或列表展示发生了变化,甚至数据源都不一样了,那它就不能按照异形过滤器来看了,而是符合它原本的功能定位——导航。

这时,就需要两个用视图描述器创建的组件,并用另外一个作为容器的组件去包装它们——

const UntreatedListView = createView(moduleContext, {
  name: 'UntreatedListView',
  category: 'list',
  renderType: 'table',
  ...
});

const TreatedListView = createView(moduleContext, {
  name: 'TreatedListView',
  category: 'list',
  renderType: 'table',
  ...
});

function ReviewListView() {
  return (
    <Tabs>
      <TabPane flag="untreated" label="待审核清单">
        <UntreatedListView />
      </TabPane>
      <TabPane flag="treated" label="已审核记录">
        <TreatedListView />
      </TabPane>
    </Tabs>
  );
}