mcpField
U
umbraco-package-view

umbraco-package-view

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

关于 umbraco-package-view

umbraco-package-view 是面向 Umbraco 包开发者的技能，用于在“Packages”区域创建自定义界面面板。它说明如何将视图关联到对应包，并以模态框或面板实现。

主要功能

  1. 01创建自定义包界面面板
  2. 02通过清单注册视图
  3. 03按包名称关联视图
  4. 04使用 Lit 或原生 JavaScript 实现

适用场景

  1. 01展示包的配置选项
  2. 02提供已安装包的相关信息

安装

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

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-package-view

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

详细介绍

Umbraco 软件包视图

这是什么？

软件包视图为 Umbraco 中已安装的软件包提供自定义 UI 面板。它们会显示在软件包部分，供软件包开发者为其软件包创建专属的配置或信息页面。用户点击已安装的软件包时，软件包视图会以模态框或面板的形式显示。

文档

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

相关 Foundation 技能

  • Umbraco Element：用于创建 UI 组件的基类

    • 参考技能：umbraco-umbraco-element

  • Modals：软件包视图会在模态框上下文中显示

    • 参考技能：umbraco-modals

工作流

  1. 获取文档 - 使用 WebFetch 获取上述 URL 的内容
  2. 询问问题 - 使用什么软件包？有哪些配置选项？
  3. 生成文件 - 根据最新文档创建清单 + 元素
  4. 说明 - 展示创建的内容以及测试方法

最简示例

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

export const manifests: Array<ManifestPackageView> = [
  {
    type: 'packageView',
    alias: 'My.PackageView',
    name: 'My Package View',
    element: () => import('./my-package-view.element.js'),
    meta: {
      packageName: 'My Package',
    },
  },
];
使用 Lit 实现元素（my-package-view.element.ts）
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';

@customElement('my-package-view')
export class MyPackageViewElement extends UmbModalBaseElement {
  override render() {
    return html`
      <umb-body-layout headline="My Package">
        <uui-box>
          <h2>Package Configuration</h2>
          <p>Configure your package settings here.</p>

          <uui-form>
            <uui-form-layout-item>
              <uui-label slot="label">Setting 1</uui-label>
              <uui-input></uui-input>
            </uui-form-layout-item>
          </uui-form>
        </uui-box>

        <div slot="actions">
          <uui-button @click=${this.#onClose} label="Close"></uui-button>
          <uui-button look="primary" @click=${this.#onSave} label="Save"></uui-button>
        </div>
      </umb-body-layout>
    `;
  }

  #onClose() {
    this.modalContext?.reject();
  }

  #onSave() {
    // Save logic here
    this.modalContext?.submit();
  }
}

export default MyPackageViewElement;
原生 JS 元素（my-package-view.js）
const template = document.createElement('template');
template.innerHTML = `
  <umb-body-layout>
    <h1 slot="header">My Package</h1>

    <uui-box>
      <p>Package information and settings</p>
    </uui-box>

    <uui-action-bar slot="footer-info">
      <uui-button look="primary" type="button">Close</uui-button>
    </uui-action-bar>
  </umb-body-layout>
`;

export default class MyPackageViewElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.shadowRoot.querySelector('uui-button').addEventListener('click', this.onClick.bind(this));
  }

  onClick() {
    this.modalContext.close();
  }
}

customElements.define('my-package-view', MyPackageViewElement);

接口参考

interface ManifestPackageView extends ManifestElement {
  type: 'packageView';
  meta: MetaPackageView;
}

interface MetaPackageView {
  packageName: string;  // Must match the package name in umbraco-package.json
}

软件包集成

软件包视图通过将 meta.packageName 与软件包在 umbraco-package.json 中的名称相匹配来关联：

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Package",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "packageView",
      "alias": "My.PackageView",
      "name": "My Package View",
      "element": "/App_Plugins/MyPackage/my-package-view.js",
      "meta": {
        "packageName": "My Package"
      }
    }
  ]
}

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

评论

支持 Markdown