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

# PisellExport 开发文档

## 1. 基本信息

| 项目     | 内容                      |
| -------- | ------------------------- |
| 组件名称 | PisellExport              |
| 组件版本 | 1.0.0                     |
| 组件分类 | 原子组件 (atom) / Data Entry |
| 技术栈   | React + TypeScript + Less |
| 依赖组件 | 无（可选复用 antd Button 或仅用原生语义） |

## 2. 组件描述

PisellExport 是导出功能的 UI 触发器组件，提供「仅图标」与「图标+文案」两种展示形态，支持小/中/大三种尺寸与默认、主色、禁用等状态。**阶段一仅做 UI 与回调**：不内置导出逻辑，点击后通过 `onExport` 回调由调用方完成导出请求、轮询、下载等。

**核心特点**：

- 两种展示形态：Icon 样式、Button 样式（icon + 文案）
- 六种交互状态样式：默认、hover、focused、激活、禁用、激活态禁用
- 三种尺寸：small / medium / large
- 样式与设计稿一致（Figma），支持 className / style 扩展

## 3. 需求点罗列

### 3.1 UI 展示

- [x] 支持 Icon 样式（仅图标）
- [x] 支持 Button 样式（图标 + 文案）
- [x] 支持小、中、大三种尺寸
- [x] 六种状态样式：默认、悬浮、focused、激活、禁用、激活禁用
- [x] 默认图标为 download-cloud-02 语义（可由 icon 覆盖）

### 3.2 功能（阶段一）

- [x] 点击触发回调 `onExport`，不内置导出逻辑
- [x] 支持 `disabled` 禁用
- [x] 支持自定义文案 `label`（Button 形态）
- [x] 支持自定义图标 `icon`

### 3.3 扩展

- [x] 支持 `className`、`style`
- [ ] 六态样式深度自定义（预留，后续可加）

## 4. 组件 API

### 4.1 Props 定义

| 属性       | 类型        | 默认值    | 必填 | 说明 |
| ---------- | ----------- | --------- | ---- | ---- |
| variant    | VariantType | 'button'  | 否   | 展示形态：icon / button |
| size       | SizeType    | 'medium'  | 否   | 尺寸：small / medium / large |
| type       | ExportButtonType | 'default' | 否 | 视觉类型：default / primary |
| disabled   | boolean     | false     | 否   | 是否禁用 |
| label      | ReactNode   | getText 或 'Export' | 否 | Button 形态文案 |
| icon       | ReactNode   | 内置下载图标 | 否 | 自定义图标 |
| onExport   | (e: MouseEvent) => void | - | 否 | 点击触发导出，由调用方实现 |
| className  | string      | -         | 否   | 自定义类名 |
| style      | CSSProperties | -       | 否   | 自定义样式 |

### 4.2 类型定义

```
type VariantType = 'icon' | 'button';
type SizeType = 'small' | 'medium' | 'large';
type ExportButtonType = 'default' | 'primary';
```

## 5. 组件模块拆解

```
pisellExport/
├── index.tsx                      # 组件导出入口
├── PisellExport.tsx               # 组件核心实现
├── PisellExport.less              # 组件样式（六态、三尺寸）
├── types.ts                       # TypeScript 类型定义
└── docs/
    ├── pisellExport.$tab-design.md
    └── pisellExport.$tab-dev.md
```

### 5.1 模块职责

| 模块             | 职责 |
| ---------------- | ---- |
| PisellExport.tsx | 根据 variant 渲染 icon 或 icon+label，绑定 onExport，应用 size/type/disabled 类名与样式 |
| PisellExport.less| 小/中/大尺寸 padding、gap；default/primary 及 hover/focus/active/disabled 状态样式 |
| types.ts         | VariantType、SizeType、ExportButtonType、PisellExportProps |

## 6. 实现方案

### 6.1 结构

- 根节点为 `button` 或 `span`（可访问性用 button），避免在禁用时触发点击。
- Icon 形态：单图标容器，尺寸由 size 控制 padding（设计稿 Icon 小 10px、中 10px、大 14px）。
- Button 形态：图标 + label，gap 8px，padding 随 size（小 14×8、中 16×10、大 20×12）。

### 6.2 样式

- 使用 Less，类名前缀 `.pisell-export-`。
- 尺寸与设计稿一致：small 14px/8px，medium 16px/10px，large 20px/12px；图标 24px。
- 颜色：default 边框 #D0D5DD、文案 #344054；primary 主色 #7F56D9、背景 #F9F5FF 等；禁用灰化。
- 阴影：0px 1px 2px rgba(16,24,40,0.05)；圆角 8px。

### 6.3 图标

- 若无 `icon` 传入，使用项目内已有下载图标或占位 SVG（download-cloud-02 语义）；若有则渲染 `icon`。

### 6.4 回调

- 点击时调用 `onExport?.(e)`，不阻止默认、不内置下载/请求逻辑。

## 7. 组成部分与引用关系

```
PisellExport
├── 根节点 (button/span)
│   ├── 图标区域 (传入 icon 或默认图标)
│   └── [Button 形态] 文案 (label)
└── 无子组件引用，仅使用项目 locales（getText）与样式
```

---

**阶段一不包含**：导出格式选择、轮询间隔、预览能力、内置请求逻辑；均由调用方在 `onExport` 中实现。
