3

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

 2 years ago
source link: https://ourai.ws/notes/1fop1bpfo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

欧雷 发表于 9 天之前

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>
  );
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK