---
title: 设计文档
order: 2
category: atom
---

# 资源链接

## 任务链接

&#x20;

## Figma链接

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

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

# 1. 组件概述

| **组件名称（英文）** | Import                       |
|--------------|------------------------------|
| **组件编号**     | pca\_de\_import\_V1.0        |
| **组件类型**     | Atom Components              |
| **组件分类**     | Data Entry                   |
| **简介**       | Import 用于向数据源写入批量数据，但不关心业务校验 |

# 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模板批量导入商品信息（名称、价格、库存等）</td>
</tr>
<tr>
<td><strong>用户管理</strong></td>
<td>从HR系统导出的CSV文件中批量导入员工账号信息</td>
</tr>
</tbody>
</table>

# 5. UI 设计

## 5.1 展示样式

Import 目前分为两种样式：

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

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

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

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

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

Implement this design from Figma.

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

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

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

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

### 5.2.1 颜色规范

### 5.2.2 尺寸规范

### 5.2.3 间距规范

# 6. 配置项

## 6.1 样式自定义

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

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

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

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

## 6.2 功能配置

* 可以选择按钮的大小

* 可以切换按钮的样式

* 可控制接受的文件类型

* 可控制导入的文件最大文件大小（MB）

# 7. 示例

