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

# PisellActionPanel 开发文档

## 1. 基础信息

- **组件名称**：PisellActionPanel（Action Panel）
- **组件版本**：1.0
- **组件分类**：Pro Components / General
- **依赖**：Ant Design Button、Space；无业务数据绑定。

## 2. 需求点罗列

1. **分组**：支持多组 Action Group，每组内多条 Action Item；顺序即展示顺序。
2. **布局**：layout 支持 horizontal / vertical / grid；align 支持 left / center / right / space-between。
3. **层级**：单条 item 支持 priority：primary / secondary / danger / default，映射为 Button type 与 danger。
4. **条件显隐**：Group 与 Item 均支持 visible，过滤后仅渲染可见项。
5. **溢出**：overflowStrategy 支持 wrap（换行）、scroll（横向滚动）、moreMenu（后续可扩展收纳到「更多」）。
6. **间距**：groupGap（组间）、itemGap（组内项间）可配置。

## 3. 组件描述

PisellActionPanel 是行为编排容器，通过 groups 配置多组、每组多条操作项，统一处理布局、对齐、主/次/危险样式与显隐，适用于表单底部、详情页、弹窗等操作区。

## 4. 组件 API 罗列

- **groups**：PisellActionPanelGroup[]，必填；每组含 items: PisellActionPanelItem[]。
- **layout**：horizontal | vertical | grid，默认 horizontal。
- **align**：left | center | right | space-between，默认 left。
- **overflowStrategy**：wrap | scroll | moreMenu，默认 wrap。
- **groupGap**、**itemGap**：间距；itemGap 默认 8。
- **className**、**style**：根节点扩展。

## 5. 模块拆解与实现方案

### 5.1 组成

- 根节点：.pisell-action-panel-root，flex/grid，根据 layout/align 设置 direction 与 justify-content。
- 每组：.pisell-action-panel-group，内嵌 antd Space，Space 的 size=itemGap，direction 随 layout。
- 每条操作：antd Button，type/danger 由 item.priority 映射；icon + label。

### 5.2 数据流

- groups 先过滤 visible !== false 的 group，再过滤每组内 visible !== false 的 item，得到 effectiveGroups。
- effectiveGroups 映射为若干 .pisell-action-panel-group，每组内 items 映射为 Button。

### 5.3 样式约定

- 类名前缀 pisell-action-panel-；不设置 font-family；覆盖 antd 时使用 pisell-lowcode-xxx。
