mcpField
U
umbraco-user-profile-app

umbraco-user-profile-app

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

关于 umbraco-user-profile-app

Umbraco User Profile App 指导开发者为 Umbraco 用户资料区域添加自定义视图或标签页，例如偏好设置、活动记录和关联账户。它提供工作步骤与代码示例，并强调实现前查阅最新文档。

主要功能

  1. 01定义用户资料应用 manifest
  2. 02构建自定义资料视图与标签页
  3. 03通过 Context API 读取当前用户
  4. 04提供偏好设置、活动记录等示例
  5. 05指导先查阅最新文档

适用场景

  1. 01在资料页展示用户偏好设置
  2. 02为用户资料添加活动记录视图
  3. 03显示用户关联账户

安装

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

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-user-profile-app

安装后在 Claude Code 中输入/umbraco-user-profile-app确认已加载。

详细介绍

Umbraco 用户个人资料应用

这是什么？

用户个人资料应用是显示在当前用户个人资料区域中的自定义视图／标签页。它们允许你在用户个人资料区域添加自定义功能，例如偏好设置、活动日志、已连接的帐户或任何特定于用户的设置。

文档

实施前始终获取最新文档：

相关基础技能

  • Umbraco 元素：用于实现个人资料应用元素

    • 参考技能：umbraco-umbraco-element

  • 上下文 API：用于访问用户上下文

    • 参考技能：umbraco-context-api

工作流

  1. 获取文档 - 对上述 URL 使用 WebFetch
  2. 提问 - 需要什么功能？要显示什么数据？
  3. 生成文件 - 根据最新文档创建清单和元素
  4. 说明 - 展示创建的内容及测试方法

最小示例

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

const manifest: ManifestUserProfileApp = {
  type: 'userProfileApp',
  alias: 'My.UserProfileApp.Preferences',
  name: 'User Preferences',
  element: () => import('./preferences-app.element.js'),
  meta: {
    label: 'Preferences',
    pathname: 'preferences',
  },
};

export const manifests = [manifest];
个人资料应用元素（preferences-app.element.ts）
import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

@customElement('my-preferences-app')
export class MyPreferencesAppElement extends UmbLitElement {
  @state()
  private _userName?: string;

  @state()
  private _emailNotifications = true;

  @state()
  private _darkMode = false;

  constructor() {
    super();

    this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
      this.observe(context.currentUser, (user) => {
        this._userName = user?.name;
      });
    });
  }

  #handleEmailToggle() {
    this._emailNotifications = !this._emailNotifications;
    this.#savePreferences();
  }

  #handleDarkModeToggle() {
    this._darkMode = !this._darkMode;
    this.#savePreferences();
  }

  async #savePreferences() {
    // Save to local storage or API
    localStorage.setItem('myPreferences', JSON.stringify({
      emailNotifications: this._emailNotifications,
      darkMode: this._darkMode,
    }));
  }

  render() {
    return html`
      <uui-box headline="Preferences for ${this._userName}">
        <div class="preference-item">
          <uui-toggle
            label="Email Notifications"
            ?checked=${this._emailNotifications}
            @change=${this.#handleEmailToggle}
          ></uui-toggle>
          <span>Receive email notifications for content updates</span>
        </div>

        <div class="preference-item">
          <uui-toggle
            label="Dark Mode"
            ?checked=${this._darkMode}
            @change=${this.#handleDarkModeToggle}
          ></uui-toggle>
          <span>Use dark theme in the backoffice</span>
        </div>
      </uui-box>
    `;
  }

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

    .preference-item {
      display: flex;
      align-items: center;
      gap: var(--uui-size-space-4);
      padding: var(--uui-size-space-4) 0;
      border-bottom: 1px solid var(--uui-color-border);
    }

    .preference-item:last-child {
      border-bottom: none;
    }
  `;
}

export default MyPreferencesAppElement;

declare global {
  interface HTMLElementTagNameMap {
    'my-preferences-app': MyPreferencesAppElement;
  }
}
活动日志应用
@customElement('my-activity-log-app')
export class MyActivityLogAppElement extends UmbLitElement {
  @state()
  private _activities: Array<{ action: string; date: string }> = [];

  async connectedCallback() {
    super.connectedCallback();
    await this.#loadActivities();
  }

  async #loadActivities() {
    // Fetch user activities from API
    const response = await fetch('/api/user/activities');
    this._activities = await response.json();
  }

  render() {
    return html`
      <uui-box headline="Recent Activity">
        <uui-table>
          <uui-table-head>
            <uui-table-head-cell>Action</uui-table-head-cell>
            <uui-table-head-cell>Date</uui-table-head-cell>
          </uui-table-head>
          ${this._activities.map(
            (activity) => html`
              <uui-table-row>
                <uui-table-cell>${activity.action}</uui-table-cell>
                <uui-table-cell>${activity.date}</uui-table-cell>
              </uui-table-row>
            `
          )}
        </uui-table>
      </uui-box>
    `;
  }
}
已连接帐户应用
const manifest: ManifestUserProfileApp = {
  type: 'userProfileApp',
  alias: 'My.UserProfileApp.ConnectedAccounts',
  name: 'Connected Accounts',
  element: () => import('./connected-accounts.element.js'),
  meta: {
    label: 'Connected Accounts',
    pathname: 'connected-accounts',
  },
};

元属性

属性说明
label在个人资料中显示的标签页名称
pathname用于深层链接的 URL 路径段

访问用户上下文

import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';

this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
  this.observe(context.currentUser, (user) => {
    // Access user properties
    console.log(user?.name, user?.email, user?.unique);
  });
});

就这些！始终获取最新文档，保持示例简洁，并生成完整可用的代码。

评论

支持 Markdown