---
title: 开发文档
order: 3
category: pro
---

# PisellCustomerBrief 开发文档

## 1. 基础信息

- **组件名称**：PisellCustomerBrief（Customer Info）
- **组件版本**：1.0
- **组件分类**：Data Display / Plus Components
- **依赖**：基于 PisellEntityCard 封装，无额外业务弹窗。

## 2. 需求点罗列

1. **客户身份信息**：客户名称（主文案）、副标题（电话/编号）、头像（无则默认占位）。
2. **扩展信息**：Email、Address、Company、Date、自定义属性，映射为 Entity Card 的 secondaryTexts，顺序固定为 email → address →
   company → date → extendedFields。
3. **标签**：客户级等级、状态等，透传 Entity Card tags。
4. **操作区**：透传 Entity Card actions（仅图标 / 图标+文本 / 按钮）；Actions 为空时不占位。
5. **密度与布局**：透传 density（B1/B2/B5/B9）、layout（horizontal/vertical）、width。
6. **左滑删除**：透传 swipeToDelete、onDelete。
7. **显隐**：showAvatar、showPrimaryText、showSubtitle、showExtended、showTags、showActions。
8. **插槽**：透传 renderMedia、renderPrimary、renderSubtitle、renderSecondary、renderTags、renderActions。

## 3. 组件描述

PisellCustomerBrief 是基于 PisellEntityCard
的客户简要卡片，用于统一展示客户实体的核心识别信息与客户级属性。将客户领域字段（name、subtitle、email、address、company、date、extendedFields、tags）映射为
Entity Card 的结构化配置，无头像时由 Entity Card 显示默认占位 Avatar。

## 4. 组件 API 罗列

- **继承 BaseCard 能力**：className, style, hoverStyle, activeStyle, disabledStyle, clickable, disabled, onClick。
- **核心身份**：name, subtitle, avatar。
- **扩展信息**：email, address, company, date, extendedFields；showExtended。
- **标签与操作**：tags, actions；showTags, showActions。
- **显隐**：showAvatar, showPrimaryText, showSubtitle。
- **密度与布局**：density, layout, width；tagPosition, contentGap, primaryLineClamp, secondaryLineClamp。
- **左滑删除**：swipeToDelete, onDelete。
- **插槽**：renderMedia, renderPrimary, renderSubtitle, renderSecondary, renderTags, renderActions。

## 5. 模块拆解与实现方案

### 5.1 组成与引用

- **PisellEntityCard**：唯一子组件，接收映射后的 props。
- **PisellCustomerBrief**：负责将客户语义 Props 映射为 Entity Card 的
  media、primaryText、subtitleText、secondaryTexts、tags、actions 及显隐/密度/布局/插槽。

### 5.2 数据映射

- `name` → primaryText
- `subtitle` → subtitleText
- `avatar`（或 undefined）→ media: { type: 'avatar', src, alt: name, size: 40, shape: 'circle' }
- `email`、`address`、`company`、`date`、`extendedFields` 按顺序合并为 secondaryTexts
- `tags`、`actions` 透传
- showAvatar → showMedia，showExtended → showSecondaryText，其余 show* 一一对应

### 5.3 结构图

```
PisellCustomerBrief（根：PisellEntityCard + 类名 pisell-customer-brief-root）
└── 内部即 PisellEntityCard 结构（媒体区 + 文案区 + 标签 + 操作区）
```

### 5.4 实现要点

- 无 avatar 时仍传 media（src 为 undefined），由 Entity Card / Avatar 显示默认占位。
- 扩展信息顺序固定，便于 B5/B9 等多行展示时语义一致。
- 样式仅增加 .pisell-customer-brief-root 作用域，具体样式由 Entity Card 提供。
