---
nav:
  title: 组件
  order: 1
group:
  title: General
  order: 1
title: PisellActionPanel
order: 1
category: atom
---

# PisellActionPanel 操作面板

用于统一承载、编排和呈现一组用户可执行操作（Actions）的 Pro 组件。不直接绑定业务数据，通过标准化 Action 结构处理操作的布局、分组、层级、状态与条件显隐。

## 设计文档

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

## 何时使用

- 表单页底部操作区
- 详情页主/次操作区
- 列表页批量操作区
- 弹窗 / Drawer 操作区

## 代码示例

### 基础用法（单组）

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

export default function Demo() {
  return (
    <PisellActionPanel
      groups={[
        {
          items: [
            { label: '取消', onClick: () => console.log('取消') },
            { label: '提交', priority: 'primary', onClick: () => console.log('提交') },
          ],
        },
      ]}
    />
  );
}
```

### 分组与主/次/危险

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

export default function Demo() {
  return (
    <PisellActionPanel
      groups={[
        {
          items: [
            { label: '编辑', icon: <EditOutlined />, onClick: () => console.log('编辑') },
            { label: '删除', icon: <DeleteOutlined />, priority: 'danger', onClick: () => console.log('删除') },
          ],
        },
        {
          items: [
            { label: '取消', onClick: () => console.log('取消') },
            { label: '确定', priority: 'primary', onClick: () => console.log('确定') },
          ],
        },
      ]}
      align="right"
      groupGap={16}
      itemGap={8}
    />
  );
}
```

### 竖向布局

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

export default function Demo() {
  return (
    <PisellActionPanel
      layout="vertical"
      groups={[
        {
          items: [
            { label: '主操作', priority: 'primary', onClick: () => {} },
            { label: '次操作', onClick: () => {} },
          ],
        },
      ]}
    />
  );
}
```

### 条件显隐

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

export default function Demo() {
  const showDanger = true;
  return (
    <PisellActionPanel
      groups={[
        {
          items: [
            { label: '保存', priority: 'primary', onClick: () => {}, visible: true },
            { label: '删除', priority: 'danger', onClick: () => {}, visible: showDanger },
          ],
        },
      ]}
    />
  );
}
```

## API

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| groups | 操作分组列表 | PisellActionPanelGroup[] | - |
| layout | 布局方式 | 'horizontal' \| 'vertical' \| 'grid' | 'horizontal' |
| align | 整体对齐方式 | 'left' \| 'center' \| 'right' \| 'space-between' | 'left' |
| overflowStrategy | 溢出策略 | 'wrap' \| 'scroll' \| 'moreMenu' | 'wrap' |
| groupGap | 组间距 | number \| string | - |
| itemGap | 组内项间距 | number \| string | 8 |
| className | 根节点类名 | string | - |
| style | 根节点样式 | CSSProperties | - |

### PisellActionPanelGroup

| 属性 | 说明 | 类型 |
|------|------|------|
| items | 本组操作项 | PisellActionPanelItem[] |
| key | 唯一 key | string |
| priority | 组内默认层级 | ActionPanelItemPriority |
| visible | 是否显示该组 | boolean |
| align | 组内对齐 | 'start' \| 'center' \| 'end' |

### PisellActionPanelItem

| 属性 | 说明 | 类型 |
|------|------|------|
| label | 文案 | string |
| icon | 图标 | ReactNode |
| onClick | 点击回调 | () => void |
| disabled | 是否禁用 | boolean |
| visible | 是否显示 | boolean |
| priority | 主/次/危险 | 'primary' \| 'secondary' \| 'danger' \| 'default' |

更多见 [types.ts](../types.ts)。
