umbraco-dashboard

Umbraco 仪表板

这是什么？

仪表板是可自定义的组件，会显示在 Umbraco 的后台部分中，用于展示信息和功能。选中树中的项目时，仪表板会显示该项目的“编辑器”；未选中任何项目时，则显示默认的部分信息。仪表板使用条件来控制其在后台中的显示位置和时机。

文档

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

• 主要文档：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/dashboard
• 基础：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 扩展注册表：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• 教程：https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-custom-dashboard

参考示例

Umbraco 源代码中包含一个可运行的示例：

位置：/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/

此示例演示了如何使用属性数据集进行数据绑定的仪表板。请参考此示例了解生产环境中的实践模式。

相关基础技能

如果实现仪表板时需要说明以下基础概念，请参考这些技能：

• Umbraco 元素 / UmbElementMixin：实现仪表板元素，或说明 UmbElementMixin、UmbLitElement 或基类模式时

  • 参考技能：umbraco-umbraco-element

• 上下文 API：实现上下文使用（consumeContext）、提供上下文，或访问 UMB_NOTIFICATION_CONTEXT 等服务时

  • 参考技能：umbraco-context-api

• 本地化：实现翻译、使用 localize.term() 或添加多语言支持时

  • 参考技能：umbraco-localization

• 状态管理：实现响应式状态、使用 observables、UmbState 或 @state() 装饰器时

  • 参考技能：umbraco-state-management

• 条件：实现可见性控制、部分限制或条件渲染时

  • 参考技能：umbraco-conditions

工作流

1. 获取文档 - 对上述 URL 使用 WebFetch
2. 提出问题 - 属于哪个部分？需要什么功能？谁可以访问？
3. 生成文件 - 根据最新文档创建清单和实现
4. 说明 - 展示创建的内容以及测试方法

最小示例

清单 (umbraco-package.json)

{
  "type": "dashboard",
  "alias": "my.dashboard",
  "name": "My Dashboard",
  "element": "/App_Plugins/MyDashboard/dashboard.js",
  "meta": {
    "label": "My Dashboard",
    "pathname": "my-dashboard"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "Umb.Section.Content"
    }
  ]
}

实现 (dashboard.js)

import { LitElement, html, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

export default class MyDashboardElement extends UmbElementMixin(LitElement) {
  render() {
    return html`
      <uui-box headline="My Dashboard">
        <p>Dashboard content goes here</p>
      </uui-box>
    `;
  }

  static styles = css`
    :host {
      display: block;
      padding: var(--uui-size-space-4);
    }
  `;
}

customElements.define('my-dashboard', MyDashboardElement);

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