---
nav:
  title: 组件
  order: 1
group:
  title: Data Display
  order: 1
title: PisellContactBrief
order: 1
category: pro
---

# PisellContactBrief 联系人简要卡片

基于 **PisellEntityCard** 的 Plus 组件，用于展示**与某个客户或组织关联的联系人（Contact）实体信息**
。强调“可联系性”，提供姓名、电话、邮箱及扩展字段，内置编辑弹窗；另提供 CreateButton 用于新建联系人。

## 设计文档

详见 [设计文档](./PisellContactBrief.$tab-design.md)。

## 何时使用

- 客户详情、订单等模块中的联系人引用
- 表单选择联系人
- 沟通/协作模块中的联系人展示

## 代码示例

### 基础用法

```tsx
import React from 'react';
import { PisellContactBrief } from '@pisell/materials';

export default function Demo() {
  return (
    <PisellContactBrief
      name="张三"
      phone="+86 138 0000 0000"
      email="zhangsan@example.com"
    />
  );
}
```

### 带扩展字段与编辑回调

```tsx
import React from 'react';
import { PisellContactBrief } from '@pisell/materials';

export default function Demo() {
  return (
    <PisellContactBrief
      name="李四"
      phone="+86 139 0000 0000"
      email="lisi@example.com"
      extraFields={[{ key: 'department', label: '部门' }]}
      extraData={{ department: '产品部' }}
      onSubmit={(values) => console.log('提交', values)}
    />
  );
}
```

### 新建联系人按钮（CreateButton）

```tsx
import React from 'react';
import { PisellContactBrief } from '@pisell/materials';

export default function Demo() {
  return (
    <PisellContactBrief.CreateButton
      extraFields={[{ key: 'department', label: '部门' }]}
      onCreate={(values) => console.log('新建', values)}
    />
  );
}
```

### 左滑删除

```tsx
import React from 'react';
import { PisellContactBrief } from '@pisell/materials';

export default function Demo() {
  return (
    <PisellContactBrief
      name="王五"
      phone="+86 137 0000 0000"
      swipeToDelete
      onDelete={() => console.log('删除')}
    />
  );
}
```

## API

### PisellContactBrief（卡片）

| 属性            | 说明                      | 类型                                  | 默认值          |
|---------------|-------------------------|-------------------------------------|--------------|
| name          | 联系人姓名（主文案）              | string                              | -            |
| phone         | 电话（副标题）                 | string                              | -            |
| email         | 邮箱（次级文案）                | string                              | -            |
| avatar        | 头像地址，不传则默认占位            | string                              | -            |
| extraData     | 扩展字段值                   | Record<string, string>              | -            |
| extraFields   | 扩展字段配置 [{ key, label }] | ContactBriefExtraField[]            | []           |
| onSubmit      | 编辑弹窗提交回调                | (values: ContactFormValues) => void | -            |
| onDelete      | 左滑删除回调                  | () => void                          | -            |
| swipeToDelete | 是否开启左滑删除                | boolean                             | false        |
| layout        | 布局方向                    | 'horizontal' \| 'vertical'          | 'horizontal' |
| showAvatar    | 是否显示头像                  | boolean                             | true         |
| showPhone     | 是否显示电话                  | boolean                             | true         |
| showEmail     | 是否显示邮箱                  | boolean                             | true         |

### PisellContactBrief.CreateButton

| 属性          | 说明           | 类型                                            | 默认值 |
|-------------|--------------|-----------------------------------------------|-----|
| extraFields | 扩展字段配置，与卡片一致 | ContactBriefExtraField[]                      | []  |
| onCreate    | 新建弹窗提交回调     | (values: ContactFormValues) => void           | -   |
| onClick     | 自定义点击行为      | `(e: React.MouseEvent) => void` | -   |

更多见 [types.ts](../types.ts)。
