---
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=1624-526&m=dev

# 1. 组件概述

| **组件名称（英文）** | Action Panel                                                                                                                                                     |
|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **组件编号**     | pcp\_ge\_actionPanel\_V1.0                                                                                                                                       |
| **组件类型**     | Pro Components                                                                                                                                                   |
| **组件分类**     | General                                                                                                                                                          |
| **简介**<br /> | Action Panel 是一个用于统一承载、编排和呈现一组用户可执行操作（Actions）的Pro组件。<br />它不直接绑定业务数据，而是通过标准化 Action 结构，处理操作的布局、分组、层级、状态、权限以及多终端自适应。<br />Action Panel 是行为编排容器，而不是 Button 的简单集合。 |

# 2. 版本

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

# 3. 组件设计目的

* 统一页面操作区范式，避免按钮随意堆叠&#x20;

* 解耦“行为语义”与“视觉表现”

* 支持复杂业务（权限/条件显隐 /危险操作）

* 适配低代码/无代码配置体系

# 4. 适用场景

* 表单页底部操作区

* 详情页主/次操作区

* 列表页批量操作区

* 弹窗 / Drawer 操作区

* Kiosk /POS 大按钮操作区

# 5. 组件能力说明

### 核心能力

* Action 分组与对齐

* 主/次/危险操作层级

* 条件显隐与权限控制

* 二次确认（Confirm）

* 响应式与终端策略

* 操作溢出自动收纳

# 6. UI 设计

## 6.1 组件结构

* Action Panel（Pro）

  * Action Group （1..n）

    * Action Item （1..n）

      * Button / IconButton / MenuItem（Atom）

## 6.2 展示样式

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

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

### 6.3.1 颜色规范

### 6.3.2 尺寸规范

### 6.3.3 间距规范

# 7. 配置项

## 7.1 低代码配置项

### 7.1.1 Panel级

* 布局方式layout：horizontal / vertical /grid

* 对齐方式align：left / center / right /space-between

* 溢出策略overflowStrategy：wrap / scroll / moreMenu

* 响应策略responsiveStrategy：PC/ Mobile / Kiosk 策略

* 组间距自定义

* 操作间距自定义

* 背景边框圆角阴影样式自定义

### 7.1.2 Action Group

* 组内对齐方式

* 优先级priority：primary / secondary / danger

* 条件显隐visible

* 是否进入更多collapseToMore

* 背景边框圆角阴影样式自定义

### 7.1.3 Action Item

* 文案自定义

* 图标更换自定义

* button样式自定义

## 7.2 无代码配置项

* 操作显隐开关

* 操作排序

* 移动到「更多」

* 设置默认主操作

* 保存为个人/ 页面 / 商家 View

# 8. 示例

