# Umbraco 用户配置文件应用程序 ## 这是什么？用户配置文件应用程序是显示在当前用户的配置文件部分中的自定义视图/选项卡。它们允许您向用户配置文件区域添加自定义功能，例如首选项、活动日志、连接的帐户或任何特定于用户的设置。 ## 文档在实施之前始终获取最新文档： * **扩展类型** : * **基础** ： * **扩展注册表**： ## 相关基础技能 * **Umbraco Element** ：用于实现配置文件应用程序元素 * 参考技能：`umbraco-umbraco-element` * **Context API** ：用于访问用户上下文 * 参考技能：`umbraco-context-api` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 有什么功能？显示什么数据？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestUserProfileApp}； const 清单：ManifestUserProfileApp = { 类型：'userProfileApp'，别名： 'My.UserProfileApp.Preferences', name: '用户偏好', 元素：() => import('./preferences-app.element.js'), 元：{ 标签：“偏好设置”，路径名：'首选项'， }, }; 导出常量清单 = [清单]; ### 配置文件应用程序元素 (preferences-app.element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/current-user' 导入 { UMB_CURRENT_USER_CONTEXT }； @customElement('我的首选项应用程序') 导出类 MyPreferencesAppElement 扩展 UmbLitElement { @状态（）私人_用户名？：字符串； @状态（）私人_emailNotifications = true; @状态（）私人_darkMode = false; 构造函数（）{ 超级（）； this.consumeContext(UMB_CURRENT_USER_CONTEXT, (上下文) => { this.observe(context.currentUser, (用户) => { this._userName = 用户？.name; }); }); } #handleEmailToggle() { this._emailNotifications = !this._emailNotifications; this.#savePreferences(); } #handleDarkModeToggle() { this._darkMode = !this._darkMode; this.#savePreferences(); } 异步 #savePreferences() { // 保存到本地存储或API localStorage.setItem('myPreferences', JSON.stringify({ 电子邮件通知：this._emailNotifications，黑暗模式：this._darkMode， })); } 渲染（）{ 返回 html`

接收内容更新的电子邮件通知

在后台使用深色主题

`; } 静态样式= css` ：主机{ 显示：块；填充：var(--uui-size-space-5); } .首选项{ 显示：柔性；对齐项目：居中；间隙：var(--uui-size-space-4); 填充：var(--uui-size-space-4) 0; 边框底部：1px 实心 var(--uui-color-border); } .preference-item:last-child { 底部边框：无； } `; } 导出默认的 MyPreferencesAppElement；声明全局{ 接口 HTMLElementTagNameMap { '我的首选项应用程序'：MyPreferencesAppElement； } } ### 活动日志应用程序 @customElement('我的活动日志应用程序') 导出类 MyActivityLogAppElement 扩展 UmbLitElement { @状态（）私有_活动：数组<{操作：字符串；日期：字符串 }> = []; 异步连接回调() { super.connectedCallback(); 等待这个。#loadActivities(); } 异步#loadActivities() { // 从API获取用户活动 const 响应 =等待 fetch('/api/user/activities'); this._activities = 等待response.json(); } 渲染（）{ 返回 html`

操作

日期

${这个._activities.map( （活动）=> html`

${activity.action}

${activity.date}

` )}

`; } } ### 连接帐户应用程序 const 清单：ManifestUserProfileApp = { 类型：'userProfileApp'，别名： 'My.UserProfileApp.ConnectedAccounts', name: '关联账户', 元素：() => import('./connected-accounts.element.js'), 元：{ 标签：“关联帐户”，路径名：'连接帐户'， }, }; ## 元属性物业 |描述 ---|--- `标签` |配置文件中显示的选项卡标签 `路径名` |用于深度链接的 URL 路径段 ## 访问用户上下文从 '@umbraco-cms/backoffice/current-user' 导入 { UMB_CURRENT_USER_CONTEXT }； this.consumeContext(UMB_CURRENT_USER_CONTEXT, (上下文) => { this.observe(context.currentUser, (用户) => { // 访问用户属性 console.log(用户?.名称, 用户?.电子邮件, 用户?.唯一); }); }); 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 用户配置文件应用程序

包含技能