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

# PisellCustomerBrief 客户简要卡片

基于 **PisellEntityCard** 的 Plus 组件，用于在界面中展示**客户（Customer）实体的核心识别信息与客户级属性**。在 Entity Card
提供的统一实体结构之上，补充客户领域特有的字段与语义。

## 设计文档

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

## 何时使用

- 客户列表 / 客户搜索结果
- 订单、合同、会员等模块中的客户引用
- 客户详情页的概要区域

## 代码示例

### 基础用法

```tsx
import {PisellCustomerBrief} from '@pisell/materials';

export default function Demo() {
    return (
        <PisellCustomerBrief
            name="某某公司"
            subtitle="+86 138 0000 0000"
            email="contact@company.com"
            company="某某科技有限公司"
            tags={[{text: 'VIP'}, {text: '已签约'}]}
        />
    );
}
```

### 带扩展信息与操作

```tsx
import {PisellCustomerBrief} from '@pisell/materials';
import {EditOutlined} from '@ant-design/icons';

export default function Demo() {
    return (
        <PisellCustomerBrief
            name="某某公司"
            subtitle="客户编号 C001"
            email="contact@company.com"
            address="浙江省杭州市余杭区"
            company="某某科技有限公司"
            date="2024-01-15 创建"
            tags={[{text: 'VIP'}, {text: '已签约'}]}
            showActions
            actions={[
                {type: 'icon', icon: <EditOutlined/>, onClick: () => console.log('编辑')},
                {type: 'text', label: '查看详情', onClick: () => console.log('详情')},
            ]}
            density="B5"
        />
    );
}
```

### 无头像（默认占位）

不传 `avatar` 时显示默认占位 Avatar。

```tsx
import {PisellCustomerBrief} from '@pisell/materials';

export default function Demo() {
    return <PisellCustomerBrief name="新客户" subtitle="待完善"/>;
}
```

### 密度与布局

- `density`: B1（一行）/ B2（两行）/ B5（五行）/ B9（全部）
- `layout`: horizontal（横向）/ vertical（竖向）

```tsx
import {PisellCustomerBrief} from '@pisell/materials';

export default function Demo() {
    return (
        <PisellCustomerBrief
            name="客户名称"
            email="a@b.com"
            company="公司名"
            density="B5"
            layout="vertical"
        />
    );
}
```

## API

| 属性             | 说明               | 类型                            | 默认值          |
|----------------|------------------|-------------------------------|--------------|
| name           | 客户名称（主文案）        | string                        | -            |
| subtitle       | 副标题，与主标题同行       | string                        | -            |
| avatar         | 头像地址，不传则默认占位     | string                        | -            |
| email          | 邮箱（扩展信息）         | string                        | -            |
| address        | 地址（扩展信息）         | string                        | -            |
| company        | 公司（扩展信息）         | string                        | -            |
| date           | 日期类信息（扩展信息）      | string                        | -            |
| extendedFields | 自定义扩展字段列表        | CustomerBriefExtendedField[]  | []           |
| tags           | 标签（如等级、状态）       | EntityCardTagItem[]           | []           |
| actions        | 操作项              | EntityCardActionItem[]        | []           |
| showActions    | 是否显示操作区          | boolean                       | false        |
| showAvatar     | 是否显示头像           | boolean                       | true         |
| showExtended   | 是否显示扩展信息         | boolean                       | true         |
| showTags       | 是否显示标签           | boolean                       | true         |
| density        | 信息密度 B1/B2/B5/B9 | EntityCardDensity             | 'B2'         |
| layout         | 布局方向             | 'horizontal' \| 'vertical'    | 'horizontal' |
| width          | 卡片宽度             | 'content' \| 'full' \| number | 'content'    |
| swipeToDelete  | 是否开启左滑删除         | boolean                       | false        |
| onDelete       | 左滑删除回调           | () => void                    | -            |

更多样式与插槽见 [types.ts](../types.ts)。
