mcpField
U
umbraco-collection-action

umbraco-collection-action

github.com/umbraco开发27387 次安装6 周前更新
代码仓库

关于 umbraco-collection-action

umbraco-collection-action 是用于实现 Umbraco 集合工具栏操作的技能。它帮助开发者创建执行代码或跳转 URL 的操作，并指导编写清单、操作类及可选的模态流程。

主要功能

  1. 01创建集合操作清单
  2. 02实现工具栏代码操作
  3. 03跳转到静态或动态 URL
  4. 04打开模态对话框
  5. 05显示更多选项指示符

适用场景

  1. 01为集合添加创建操作
  2. 02通过操作导出集合数据
  3. 03从集合工具栏跳转页面
  4. 04从操作打开模态框

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-collection-action

安装后在 Claude Code 中输入/umbraco-collection-action确认已加载。

详细介绍

Umbraco 集合操作

这是什么？

集合操作是在集合工具栏中显示的按钮，可对整个集合执行操作（而非针对单个项目的操作；后者属于实体批量操作）。常见示例包括“新建”按钮或导出功能。操作可以执行代码，也可以导航到 URL。

文档

实现前务必获取最新文档：

相关基础功能技能

  • 上下文 API：用于访问集合上下文

    • 参考技能：umbraco-context-api

  • 模态框：用于在操作打开模态对话框时

    • 参考技能：umbraco-modals

  • 条件：用于控制操作的显示时机

    • 参考技能：umbraco-conditions

工作流

  1. 获取文档——对上述 URL 使用 WebFetch
  2. 提问——要操作哪个集合？要执行什么操作？是导航还是执行代码？
  3. 生成文件——根据最新文档创建清单和操作类
  4. 说明——展示创建的内容以及测试方法

最小示例

清单（manifests.ts）
import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestCollectionAction = {
  type: 'collectionAction',
  alias: 'My.CollectionAction.Create',
  name: 'Create Item Action',
  api: () => import('./create-action.js'),
  meta: {
    label: 'Create New',
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'My.Collection',
    },
  ],
};

export const manifests = [manifest];
操作实现（create-action.ts）
import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

export class CreateAction extends UmbCollectionActionBase {
  constructor(host: UmbControllerHost) {
    super(host);
  }

  async execute() {
    // Perform the action
    console.log('Create action executed');
  }
}

export default CreateAction;
基于链接的操作（使用 getHref）
import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';

export class CreateLinkAction extends UmbCollectionActionBase {
  async getHref() {
    // Return URL to navigate to
    return '/section/my-section/workspace/my-workspace/create';
  }

  async execute() {
    // Not called when getHref returns a value
  }
}

export default CreateLinkAction;
带模态框的操作
import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';

export class ExportAction extends UmbCollectionActionBase {
  async execute() {
    const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);

    const modal = modalManager.open(this, MY_EXPORT_MODAL, {
      data: {
        collectionAlias: 'My.Collection',
      },
    });

    await modal.onSubmit();
  }
}

export default ExportAction;
带有其他选项指示器的操作
const manifest: ManifestCollectionAction = {
  type: 'collectionAction',
  alias: 'My.CollectionAction.CreateWithOptions',
  name: 'Create With Options',
  api: () => import('./create-options-action.js'),
  meta: {
    label: 'Create',
    additionalOptions: true, // Shows indicator that more options are available
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'Umb.Collection.Document',
    },
  ],
};
带其他选项的操作类
import { UmbCollectionActionBase } from '@umbraco-cms/backoffice/collection';

export class CreateWithOptionsAction extends UmbCollectionActionBase {
  async hasAdditionalOptions() {
    return true;
  }

  async execute() {
    // Show options menu or modal
  }
}

export default CreateWithOptionsAction;

元属性

属性描述
label必填。按钮文本
href可选的静态 URL（动态 URL 请使用 getHref()）
additionalOptions为 true 时显示下拉指示器

条件中常用的集合别名

  • Umb.Collection.Document
  • Umb.Collection.Media
  • Umb.Collection.Member
  • Umb.Collection.User
  • Umb.Collection.DataType

就是这样！务必获取最新文档，保持示例精简，并生成完整可运行的代码。

评论

支持 Markdown