# 资源链接

## 任务链接

&#x20;

## Figma链接

Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-97136&m=dev
Implement this design from Figma.
@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-97155&m=dev

# 1. 组件概述

| **组件名称（英文）** | Export                                                                        |
|--------------|-------------------------------------------------------------------------------|
| **组件编号**     | pca\_de\_export\_V1.0                                                         |
| **组件类型**     | Atom Components                                                               |
| **组件分类**     | Data Entry                                                                    |
| **简介**       | 提供数据导出能力，将结构化数据转换为多种格式（如Excel、CSV、PDF）的文件，支持同步和异步两种导出模式，满足从简单报表到大数据量导出的各类业务场景 |

# 2. 版本

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

# 3. 组件设计目的

* 简化数据输出流程

* 保障导出性能与可靠性

* 提升用户体验

# 4. 适用场景

<table>
<thead>
<tr>
<th><h4>场景</h4></th>
<th><h4>示例</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>销售管理</strong></td>
<td>本季度销售业绩报表导出为Excel，包含多Sheet页和复杂样式</td>
</tr>
<tr>
<td><strong>用户管理</strong></td>
<td>将筛选后的用户列表导出为CSV文件，用于邮件群发或数据分析</td>
</tr>
</tbody>
</table>

# 5. UI 设计

## 5.1 展示样式

Export 目前分为两种样式：

* Icon 样式​​：显示样式只有一个icon

* Button 样式​​：显示内容为icon加文本

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

* 给到此组件的六个状态（默认样式、鼠标悬浮、focused、激活、禁用、激活禁用）样式，支持更改六个状态下的样式

* 同时组件有小、中、大三中大小可供选择

Implement this design from Figma.

@https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12671-96989\&m=dev

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

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

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

### 5.2.1 颜色规范

### 5.2.2 尺寸规范

### 5.2.3 间距规范

# 6. 配置项

## 6.1 样式自定义

* 按钮的外观可以自定义样式，包括背景色、边框、padding、gap、阴影

* 按钮内的icon可以自定义样式，包括icon的切换、icon大小、颜色

* 按钮内文本的样式可自定义，包括文本内容、文本大小、颜色、粗细

* 按钮的六种不同状态的样式也可自定义

## 6.2 功能配置

* 可以选择按钮的大小

* 可以切换按钮的样式

* 可控制导出的格式

* 可控制轮询间隔

* 是否支持预览，默认不支持

# 7. 示例

