跳到主要内容

# 插件扩展 - 编排扩展

## 场景一：扩展选中节点操作项​

### 增加节点操作项​

选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：

    import { plugins } from '@felce/lowcode-engine';
    import { IPublicModelPluginContext, IPublicModelNode } from '@felce/lowcode-types';
    import { Icon, Message } from '@alifd/next';

    const addHelloAction = (ctx: IPublicModelPluginContext) => {
      return {
        async init() {
          ctx.material.addBuiltinComponentAction({
            name: 'hello',
            content: {
              icon: <Icon type="atm" />,
              title: 'hello',
              action(node: IPublicModelNode) {
                Message.show('Welcome to Low-Code engine');
              },
            },
            condition: (node: IPublicModelNode) => {
              return node.componentMeta.componentName === 'NextTable';
            },
            important: true,
          });
        },
      };
    };
    addHelloAction.pluginName = 'addHelloAction';
    await plugins.register(addHelloAction);

效果如下：

具体 API 参考：API 文档

### 删除节点操作项​

    import { plugins } from '@felce/lowcode-engine';
    import { IPublicModelPluginContext } from '@felce/lowcode-types';

    const removeCopyAction = (ctx: IPublicModelPluginContext) => {
      return {
        async init() {
          ctx.material.removeBuiltinComponentAction('copy');
        },
      };
    };
    removeCopyAction.pluginName = 'removeCopyAction';
    await plugins.register(removeCopyAction);

效果如下：

具体 API 参考：API 文档

## 实际案例​

### 区块管理​

- 仓库地址：https://github.com/fe-lce/lowcode-plugins
- 具体代码：https://github.com/fe-lce/lowcode-plugins/tree/main/packages/action-block
- 直播回放：
  - 低代码引擎项目实战 (9)-区块管理 (1)-保存为区块
  - 低代码引擎项目实战 (10)-区块管理 - 区块面板
  - 阿里巴巴低代码引擎项目实战 (11)-区块管理 - ICON 优化
  - 阿里巴巴低代码引擎项目实战 (11)-区块管理 - 自动截图
  - 阿里巴巴低代码引擎项目实战 (11)-区块管理 - 样式优化
  - 阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR