---
title: 设计文档
order: 2
category: pro
---

# 资源链接

## 任务链接

&#x20;

## Figma链接

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13355-110579&m=dev
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13355-110786&m=dev

# 1. 组件概述

| **组件名称（英文）**                                                                                 | Entity Card                                                                                                                          |
|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|
| **组件编号**                                                                                     | pcp\_dd\_entityCard\_V1.0                                                                                                            |
| **组件类型**                                                                                     | Pro Components                                                                                                                       |
| **组件分类**                                                                                     | Data Display                                                                                                                         |
| **<span style="color: rgb(216,57,49); background-color: rgba(254,212,164,0.8)">依赖组件</span>** | 基于[ Base Card](https://m1ed09stz4r.feishu.cn/wiki/A0MHwnavCi3CSek3nX6c3Uw2nCb)封装，在Base Card的基础上确定了内容以及展示的样式                          |
| **简介**                                                                                       | **Entity Card** 是一个基于 **Base Card** 的中间层组件，用于在界面中**统一展示、识别和理解一个稳定存在的实体（Entity）**。<br />它并不承载具体业务流程，而是为上层 Plus 组件提供**一致、可复用的实体展示骨架**。 |

# 2. 版本

| **版本**   | 1.0  |
|----------|------|
| **更新简介** | 首次发布 |

# 3. 组件设计目的

* 建立统一的 **实体信息展示范式**

* 解耦实体展示与具体业务逻辑

* 为多个领域 Plus 组件提供稳定的中间层依赖

* 支持不同信息密度下的实体识别需求

# 4. 适用场景

* 人员 / 联系人 / 用户列表

* 实体搜索结果

* 实体选择器、引用卡片

* 轻量级实体信息预览

# 5. UI 设计

## 5.1 组件结构

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NmM4YTlmZTBjMTVhOWZmOGJhZTAwMzUxYmI5ODIxY2VfN0NxU1BDNUNveVhJTFBPSjdGcEpwWkFzZllxdGZKZ3FfVG9rZW46UDczemI0T1plbzBzeE94Zms5U2N2b08ybnpmXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* Entity Card

  * Object Summary（实体识别区）

    * Avatar / Thumbnail / Icon

    * &#x20;Primary Text（Name / Title）

    * Secondary Text（Meta / Description）

    * Tags / Badges

  * Optional Footer / Actions

    * View Detail

    * Select / Link

    * Contextual Action

  **Object Summary 是 Entity Card 的核心结构，不可缺省。**

## 5.2 信息密度等级

Entity Card 通过信息密度等级，控制实体在不同场景下的**展示深度**。

> 密度等级仅影响**信息量与布局**，不改变实体语义与职责。

## 5.3 展示样式

组件展示样式分为Horizontal和Vertical

### 5.3.1 B1-Line

* 展示的最小单位，可以为一个标题文本或者图片、头像、缩略图

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=YjFmMzdmZmI4N2QxNjM3NDU0NTVkNzNjZjBjMjJlZWNfY1NRS08zMzF2QnlmbnVJNGRUcThHM0JRNldENElWTEdfVG9rZW46TTNZRmJKTzRjb0VJUnh4OUhIT2NYVnB2bmFlXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 一行展示，字段可以并列，但也是最多展示一行信息

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZmUwMmQxMDg5MDE4ODM2N2ExNGUyOWNjNzM4OGIwN2VfUjVQT01FVmJLdFoxcXpvVDRkM01ldGNkSVhiWnljQjhfVG9rZW46VHB4cmJVa3BOb0ZkRTd4Nm1PZ2NkRUQ4blBrXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

### 5.3.2 B2-Mini

* 文本信息两行展示，第二行文本字数显示可以为多行

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NmRlMTljMDMyYzEwN2ZiM2RmY2E0NTI4MDQ5NTA2OWNfWWZaWFBPTkpwaTZpTXJwZW5sdjYyTlhpR05lTUdmNGZfVG9rZW46WXdVRWI5d2Fjb0NkTFF4Z3M3M2NlM0Z3bjFjXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 当缺少其他信息时，默认不展示

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NmQ1YjlkYjQwMTRkODBmNDY0OGMxMDBjMTk3NzFkMmJfWjNYVEVRbExqM1Z6U3RaT1hiNmprOEVwWEdmMUZiY0lfVG9rZW46S21McmJjUlhDb01hOGR4a1pqT2NmUElEbkpmXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 竖向展示

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZTlkOTVjYTc1Y2NjODk1ZTg4N2ZhMDg2NDE2NWIzYWFfM1J0cmtLalZybzVERlpZcHhGR1BIZFhUZEhCeDBVUWRfVG9rZW46T2xMZ2JjU1ZXbzBZMkp4YzBnM2NVU3JPbktmXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=OTMxYTE1NWYxM2UwYWZkMWQwOGUzODUxOTllYjM5ZGVfV0JkUjNYblJ2eWVBWm5WVnU1SE1zTU9sbU1FWmh2ZWlfVG9rZW46VlFJbGJnVkplbzZuc2t4T3o2QmN6Vm1ybldiXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

### 5.3.3 B5-Standard

* 文本信息展示最多为5行，超出不显示

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MzExMTBhMjI0NzY2M2RlYjY2MDE3ZGJkMTQ1Zjc0NWVfSmZZdEE1b1VXTWJSY3ZidWhwUGJaQjJRbGFadHRzTGlfVG9rZW46VTRwWGJ6bXNWbzM2d2Z4VzZoTGN4RHVsbm9jXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 竖向展示

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NzM2Mjc5NGU5NzA1ZGY3YzljY2VjOWRjNWIyZDgyMGFfWHdZWkxTZHNycWVjM1BWdERLY3RFTVl1ZjZmNGY3VlBfVG9rZW46S24yZmJjVGJ3bzNPa1V4MnJlRmNzaHBSbkNjXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

### 5.3.4 B9-Extended

* 所有字段全部显示

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MGI3NzAzNzBiNGQwZWU5ZmNlYjhiN2QwMDQ3OTVlOTJfSVM5cTNmZUlVTk5TTlNDTlFIVFBFaEJEVGZ4dU9idnVfVG9rZW46TU8xbWJmRzVEb1pVVXp4RzJZZGNHeVMwbktjXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

## 5.4 自适应规则

* 宽度默认为跟随内容撑满，内容文本区域超出时显示省略

* 当字段处于同一行时，优先省略后面的信息，当省略到最后一个字母还不能满足时，全部省略此字段，以此类推

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=OWRhNTc2NWQ5N2JjZWM2Y2M0NGVmODhkNWFmMDQxNmVfc3pjVU5FdWxUckR2ZmhWaHdhNkJLRHJFYWpPckxqblFfVG9rZW46SXpPb2JKY3JKb2FaWUl4OFR6SWNNRVFjbmhDXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MDE2NmEyODU2NGI4ZTc3MzYwZDA3MDJhY2IzMWM2OGVfb244ZUY2T2ZSQnoyOEtIY25QbkQ5ZnQ0UXZ1Tm9MUHZfVG9rZW46V0VGd2J1aUFCbzJJS0Z4aTZoUGM2aW5XbjFlXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=ZWIxNGVhMmYwOTFhMTYzNTU1NmYyOWNjY2NmYTY0NzdfTzI2RzNwZWVHY1RlandVZFdadzlKNmN2Wlg2aThmVWRfVG9rZW46RjZhQ2J4Sk11b0JpUWJ4WEdRU2NwN1lIbk1nXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 竖向放置时内容的排列方式默认为左右居中对齐

## 5.5 **视觉设计规范（需要主题模块完成）**

### 5.5.1 颜色规范

### 5.5.2 尺寸规范

### 5.5.3 间距规范

# 6. 交互准则

* 当信息字段缺少时，不显示，例如选择了B5，但字段只有两个，那跟B2长得一样

* 当字段超出规范时，不展示，例如选择了B2，但是字段有5个，默认只展示排列在前面的两个

# 7. 配置项

## 7.1 样式自定义

* 可以切换选择Horizontal和Vertical

* Card 的背景、圆角、边框、阴影、padding、gap都可以在默认的基础上去的自定义

* 内容的文本，包括标题文本和次级文本信息，可以自定义大小、粗细、颜色、显示行数、宽度

* card的宽度默认为内容撑满也可更改为固定宽度、撑满父容器

* 内容区域的icon可以更改大小、颜色

* 图片、头像、缩略图可以更改大小和圆角

* 可控制自定义标签的展示位置

## 7.2 功能配置

* 可以自定义字段信息的数据源

* 可以对字段进行显隐和排序，默认展示规则为从上往下展示

* 是否显示图片、头像、缩略图，默认显示

* 是否显示主标题文本，默认显示

* 是否显示次级文本信息，默认显示

* 可以手动添加次级文本信息，并可开启提示icon

* 可以控制显隐tag标签，并能添加和自定义样式

* 可以控制是否开启左滑删除，默认关闭

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=YzEzMjNhMzU2Nzc0MmQxMzA3MzgzMDZkNzc3YTViNzhfWFoySWVDVXcxU1NkdTY2OWs2OVZtSEN5QmZSZ2p1ZGdfVG9rZW46RzlXb2JLYWNOb05ndUh4ZkFyMGNyOFFabkNjXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 可以控制是否开启Action区域，默认关闭

* 可以控制Action内的操作为文本、按钮、icon，并能各自更改样式

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=YjdlOTUxZjM4OTU1ZTc4NTNkNzlkZjUxOWIxMzNhZTVfRmZ6Q2xyYU1IY2drTFA0VElwRFNid0VwQVYzdnF0TkVfVG9rZW46VEVObWJjd2xWb2VadXl4Y29KVWNERWhlbldmXzE3NzI2OTAzOTc6MTc3MjY5Mzk5N19WNA)

* 可开启插槽

