背景

在B端系统中的一个重要功能是提供对数据的显示。但随着系统的膨胀以及业务方的增多，对数据显示的方式也不断增加。但业务方之间缺少直接交流，就会设计成具有不同细节的相同显示方案，增加了开发成本和使用成本。

目标

针对相同类型的数据，使用相同的显示方式。

核心设计

根据一个类型（type）和其他关联配置（data），实现对数据的显示。

则有：
type StandardDisplayData = { type: string [otherOptions: string]: any }

边缘设计

插件系统

在核心设计中，根据 type 的不同有不同的显示逻辑，但其 data 都是相同结构的，因此非常适合插件系统。

则有：
type StandardDisplayPlugin = FC

使用时：
const Plugin = Plugins[type] return

依赖数据

依赖数据（deps）常见用于 id 与 name 的对应关系。例如后端传 id = 1，前端显示这个 id 对应的 name 为 name1，在这种情况下，就需要在前端保存一个 id -> name 的映射关系。

依赖数据要考虑 2 种情况：

1. 异步依赖数据
2. 标准依赖数据

异步依赖数据
很多时候这个 id -> name 的映射关系并非直接存储在前端，而是存在后端，然后通过接口拉取的，那么就可以抽象为一个异步函数。

标准依赖数据
要对依赖数据进行映射查找，就要建立一个标准化的依赖数据。
则有：
const Deps = Record

实现

插件实现

special

特殊显示。

type Data = {
    specialRender: (record: any) => ReactElement
}

null

返回 null。
无额外配置。

text

返回字符串显示。

type Data = {
  text: string
}

time

返回时间显示，接收一个时间戳（number 类型，精度到毫秒）。

type Data = {
    time: number
}

username

返回一个名字的显示。接收一个字符串。

type Data = {
    username: string
}

link

返回一个超链接。接收两个值，一个显示的字符串，一个链接地址。

type Data = {
    text: string
  link: string
}

id

返回 id 映射的 name。接收一个字符串。

type Data = {
  id: string
  deps: Deps
}

list

返回相同的一组数据的显示。

type Data = {
    list: {
      items: any[]
    itemRender: (item: any) => Data
    limitCount: number 
  }
}

group

返回一组不同的数据显示。

type Data = {
    group: {
      items: Data[]
    limitCount: number 
    direction: 'horizontal' | 'vertical'
  }
}

textList

text list 的快捷类型。与 list 的配置一致

idList

id list 的快捷类型。与 list 的配置一致。