mcpField
U
umbraco-collection-view

umbraco-collection-view

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

关于 umbraco-collection-view

umbraco-collection-view 是用于开发 Umbraco 集合自定义数据视图的技能，面向扩展开发者。它指导创建清单和视图元素，可构建表格、网格或卡片布局，并支持用户切换视图。

主要功能

  1. 01自定义集合视图开发指导
  2. 02表格、网格与卡片布局
  3. 03清单和视图元素示例
  4. 04访问集合上下文与项目
  5. 05读取用户定义的列

适用场景

  1. 01为现有集合添加自定义布局
  2. 02为集合项目构建表格或卡片视图
  3. 03为媒体或其他集合创建可切换视图

安装

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

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

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

详细介绍

Umbraco 集合视图

这是什么？

集合视图定义了集合中数据的显示方式。你可以借此为实体列表创建自定义可视化表示形式，例如表格、网格、卡片或任意自定义布局。集合视图可以添加到现有集合或自定义集合中，用户也可以在可用视图之间切换。

文档

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

相关基础技能

  • 上下文 API：用于访问集合上下文和项目数据

    • 参考技能：umbraco-context-api

  • 状态管理：用于订阅集合数据变更

    • 参考技能：umbraco-state-management

  • Umbraco Element：用于实现视图元素

    • 参考技能：umbraco-umbraco-element

工作流

  1. 获取文档 - 对上方 URL 使用 WebFetch
  2. 提出问题 - 要针对哪个集合？使用表格、网格还是自定义布局？需要哪些列/字段？
  3. 生成文件 - 根据最新文档创建清单和视图元素
  4. 说明 - 展示创建的内容以及测试方法

最简示例

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

const manifest: ManifestCollectionView = {
  type: 'collectionView',
  alias: 'My.CollectionView.Cards',
  name: 'Card View',
  element: () => import('./card-view.element.js'),
  meta: {
    label: 'Cards',
    icon: 'icon-grid',
    pathName: 'cards',
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'My.Collection',
    },
  ],
};

export const manifests = [manifest];
视图元素（card-view.element.ts）
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-card-view')
export class MyCardViewElement extends UmbLitElement {
  @state()
  private _items: Array<any> = [];

  constructor() {
    super();

    this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
      this.observe(context.items, (items) => {
        this._items = items;
      });
    });
  }

  render() {
    return html`
      <div class="card-grid">
        ${this._items.map(
          (item) => html`
            <div class="card">
              <h3>${item.name}</h3>
              <p>${item.description || 'No description'}</p>
            </div>
          `
        )}
      </div>
    `;
  }

  static styles = css`
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--uui-size-space-4);
      padding: var(--uui-size-space-4);
    }

    .card {
      background: var(--uui-color-surface);
      border: 1px solid var(--uui-color-border);
      border-radius: var(--uui-border-radius);
      padding: var(--uui-size-space-4);
    }
  `;
}

export default MyCardViewElement;

declare global {
  interface HTMLElementTagNameMap {
    'my-card-view': MyCardViewElement;
  }
}
表格视图示例
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-table-view')
export class MyTableViewElement extends UmbLitElement {
  @state()
  private _items: Array<any> = [];

  constructor() {
    super();

    this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
      this.observe(context.items, (items) => {
        this._items = items;
      });
    });
  }

  render() {
    return html`
      <uui-table>
        <uui-table-head>
          <uui-table-head-cell>Name</uui-table-head-cell>
          <uui-table-head-cell>Status</uui-table-head-cell>
          <uui-table-head-cell>Updated</uui-table-head-cell>
        </uui-table-head>
        ${this._items.map(
          (item) => html`
            <uui-table-row>
              <uui-table-cell>${item.name}</uui-table-cell>
              <uui-table-cell>${item.status}</uui-table-cell>
              <uui-table-cell>${item.updateDate}</uui-table-cell>
            </uui-table-row>
          `
        )}
      </uui-table>
    `;
  }
}

export default MyTableViewElement;
内置集合的视图（例如 Media）
const manifest: ManifestCollectionView = {
  type: 'collectionView',
  alias: 'My.CollectionView.MediaThumbnails',
  name: 'Thumbnail View',
  element: () => import('./thumbnail-view.element.js'),
  weight: 100, // Higher weight = appears first in view switcher
  meta: {
    label: 'Thumbnails',
    icon: 'icon-picture',
    pathName: 'thumbnails',
  },
  conditions: [
    {
      alias: 'Umb.Condition.CollectionAlias',
      match: 'Umb.Collection.Media',
    },
  ],
};
访问用户定义的列
this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
  // Get configured columns/properties
  this.observe(context.userDefinedProperties, (properties) => {
    this._columns = properties;
  });

  // Get items
  this.observe(context.items, (items) => {
    this._items = items;
  });
});

元属性

属性描述
label视图切换器中的显示名称
icon视图切换器中的图标
pathName用于深层链接的 URL 路径片段

常见的用于条件判断的集合别名

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

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

评论

支持 Markdown