---
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=11133-8737&m=dev

# 1. 组件概述

| **组件名称（英文）** | PisellContactBrief                                                                                              |
|--------------|-----------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcl\_contactInfo\_V1.0                                                                                          |
| **组件类型**     | Plus Components                                                                                                 |
| **组件分类**     | Plus Components                                                                                                 |
| **依赖组件**     | [ Entity Card](https://m1ed09stz4r.feishu.cn/wiki/ID7qwQrWai0mDFkEIb6c7Ymbnde)                                  |
| **简介**       | **Contact Info** 是一个基于 **Entity Card** 的 Plus 组件，用于展示**与某个客户或组织关联的联系人（Contact）实体信息**。<br />它强调“可联系性”，而非客户级业务属性。 |

# 2. 版本

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

# 3. 组件设计目的

* 统一联系人信息展示规范

* 区分联系人与客户实体

* 支持多联系人并列展示

# 4. 适用场景

### 适用场景

* 客户详情页中的联系人列表

* 表单中的联系人选择

* 沟通 / 通知相关模块

### 不适用场景

* 客户主体展示（应使用 Customer Info）

* 人员（内部员工）展示

# 5. UI 设计

## 5.1 展示样式

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

## 5.2 新建流程

点击弹出弹窗

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

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

保存后展示联系人信息

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

## 5.3 文本换行

宽度变小时，文本空间不够，自动换行，始终与右侧保持8px间距

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

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

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

### 5.4.1 颜色规范

### 5.4.2 尺寸规范

### 5.4.3 间距规范

# 6. 交互准则

* 无头像：显示默认占位 Avatar

* 文本过长：按配置进行省略

# 7. 配置项

## 7.1 可增加字段

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

对应的弹窗里也需要

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

# 8. 示例

