umbraco-user-profile-app by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-user-profile-app用户个人资料应用是显示在当前用户个人资料部分的自定义视图/选项卡。它们允许您向用户个人资料区域添加自定义功能,例如偏好设置、活动日志、关联账户或任何用户特定的设置。
在实施前请务必获取最新文档:
Umbraco 元素 : 用于实现个人资料应用元素
umbraco-umbraco-element上下文 API : 用于访问用户上下文
umbraco-context-api广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
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];
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() {
// 保存到本地存储或 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() {
// 从 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) => {
// 访问用户属性
console.log(user?.name, user?.email, user?.unique);
});
});
就是这样!请务必获取最新文档,保持示例简洁,生成完整可运行的代码。
每周安装数
77
代码仓库
GitHub 星标数
17
首次出现
2026年2月4日
安全审计
安装于
github-copilot56
cursor26
opencode24
codex24
gemini-cli22
amp22
User Profile Apps are custom views/tabs that appear in the current user's profile section. They allow you to add custom functionality to the user profile area, such as preferences, activity logs, connected accounts, or any user-specific settings.
Always fetch the latest docs before implementing:
Umbraco Element : For implementing the profile app element
umbraco-umbraco-elementContext API : For accessing user context
umbraco-context-apiimport 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];
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',
},
};
| Property | Description |
|---|---|
label | Tab label displayed in profile |
pathname | URL path segment for deep linking |
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);
});
});
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
77
Repository
GitHub Stars
17
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykWarn
Installed on
github-copilot56
cursor26
opencode24
codex24
gemini-cli22
amp22
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装