---
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=8958-1468&m=dev

# 1. 组件概述

| **组件名称（英文）** | Customer Info                                                                                                                                   |
|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcl\_customerInfon\_V1.0                                                                                                                        |
| **组件类型**     | Plus Components                                                                                                                                 |
| **组件分类**     | Plus Components                                                                                                                                 |
| **依赖组件**     | [ Entity Card](https://m1ed09stz4r.feishu.cn/wiki/ID7qwQrWai0mDFkEIb6c7Ymbnde)                                                                  |
| **简介**       | **Customer Info** 是一个基于 **Entity Card** 的 Plus 组件，用于在界面中展示**客户（Customer）这一业务实体的核心识别信息与客户级属性**。<br />它在 Entity Card 提供的统一实体结构之上，补充了客户领域特有的字段与语义。 |

# 2. 版本

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

# 3. 组件设计目的

* 在多个系统中统一客户信息的展示方式

* 明确区分“客户实体”与“联系人实体”

* 支持客户级标签、等级、状态等业务信息

# 4. 适用场景

### 适用场景

* 客户列表 / 客户搜索结果

* 订单、合同、会员等模块中的客户引用

* 客户详情页的概要区域

### 不适用场景

* 单纯联系人展示（应使用 Contact Info）

* 交易流程中的客户行项目

# 5. UI 设计

## 5.1 展示样式

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

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

### 5.2.1 颜色规范

### 5.2.2 尺寸规范

### 5.2.3 间距规范

# 6. 交互准则

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

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

* Actions 为空：不占位

# 7. 内容模型

## 7.1 核心身份信息

## 7.2 扩展信息

用于 B5 / B9 模式，可配置显示多个字段。

示例字段：

* Email

* Address

* Company

* Date

* Custom attributes

## 7.3 操作区

支持：（透传[ Entity Card](https://m1ed09stz4r.feishu.cn/wiki/ID7qwQrWai0mDFkEIb6c7Ymbnde)组件功能）

* 仅图标操作

* 图标 + 文本操作

* button按钮操作

# 8. 配置项

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

# 9. 示例

