跳到主要内容

UserCenter

UserCenter 组件是一个全面的、预构建的界面，提供完整的用户个人资料和设置管理页面。它集成了多种功能，包括用户信息显示、通行证管理、隐私控制、通知设置和 DID 存储管理，为用户提供了一个集中的枢纽。

该组件被设计为高度可扩展，允许开发者通过 blocklet 的元数据添加自定义标签页和内容，从而确保在不同应用中提供一致的用户体验。

UserCenter

基本用法

要使用 UserCenter，您需要提供 currentTab 属性，它决定了哪个部分是活动的。该值通常从应用的路由器中获取。

UserCenter Example

javascript
import React from 'react';
import { UserCenter } from '@blocklet/ui-react';

export default function ProfilePage() {
  // 在实际应用中，您会从路由器中获取此值。
  // 例如，如果 URL 是 /profile/settings，currentTab 的值将是 '/profile/settings'。
  const currentTab = '/profile/nfts';

  return <UserCenter currentTab={currentTab} />;
}

属性

UserCenter 组件接受多个属性来自定义其行为和外观。

  • children React.ReactNode — 用于为 blocklet 导航设置中定义的自定义标签页渲染内容。当 currentTab 与自定义标签页的 URL 匹配时，UserCenter 将显示子组件。
  • currentTab string (required) — 当前活动标签页的值。该值应与可用标签页之一（默认或自定义）的 value 属性匹配。它用于高亮显示正确的标签页并展示其对应的内容。
  • userDid string — 要显示其个人资料的用户的 DID。如果省略，组件将尝试从 URL 查询参数（?did=...）中获取 DID，或默认使用当前登录的用户。
  • embed boolean (default: false) — 如果设置为 true，组件将以嵌入模式渲染，不包含主要的 Header 和 Footer，使其适合集成到其他布局或页面中。
  • onlyProfile boolean (default: false) — 如果设置为 true，则仅显示 UserBasicInfo 个人资料卡片，不包含任何标签页或内容部分。这在仅需要紧凑型用户个人资料的场景下非常有用。
  • hideFooter boolean (default: false) — 如果设置为 true，Footer 组件将不会被渲染。
  • headerProps object — 传递给底层 Header 组件以进行自定义的属性。
  • footerProps object — 传递给底层 Footer 组件以进行自定义的属性。
  • onDestroySelf () => void — 当非所有者用户从设置中的“危险区域”发起账户删除流程时触发的回调函数。
  • notLoginContent React.ReactNode — 当没有用户登录且未提供 userDid 时显示的自定义内容。如果未设置，则显示默认的登录提示。

核心功能

UserCenter 由几个关键部分和组件组成，提供开箱即用的丰富用户体验。

默认标签页

默认情况下，UserCenter 为每个用户包含以下标签页：

标签页描述可见性
NFT显示用户的 NFT 收藏。公开
社交动态如果启用了社交功能，则显示用户的关注者和正在关注列表。公开
设置访问个人资料、隐私、通知和会话管理。仅所有者可见
存储用于管理与 DID Spaces 的连接以进行去中心化存储的界面。仅所有者可见

用户个人资料 (UserBasicInfo)

UserBasicInfo 组件是一个专用部分（在桌面上通常是侧边栏），用于显示用户的基本详细信息：

  • 头像和姓名：显示用户的个人资料图片和全名。所有者可以点击头像打开个人资料切换器。
  • DID：显示用户的去中心化标识符，并提供复制或查看其二维码的选项。
  • 社交操作：对于公开的个人资料，显示“关注”或“取消关注”按钮。
  • 元数据：显示用户提供的信息，如简介、位置和社交链接。
  • 私密信息：对于所有者，显示电子邮件和电话号码等私密详细信息。

通行证管理

在主个人资料标签页（NFT）上，当前登录的用户会看到一个专门用于其 DID 通行证的部分。该区域列出了所有关联的通行证，标明其状态（例如，活动、已吊销），并高亮显示当前正在使用的通行证。

设置

“设置”标签页是一个综合面板，仅对拥有该个人资料的用户可见。它分为几个子部分：

  • 通用设置：允许用户更新其公开的个人资料信息，如姓名、简介和社交链接。
  • 通知管理：配置接收通知的方式（钱包、电子邮件、推送）并管理 Webhook。
  • 第三方登录：管理与其他身份提供商（如 Google、GitHub 或 Passkeys）的连接。
  • 隐私管理：控制用户个人资料上不同标签页的可见性，将其设置为公开或私密。
  • 会话管理：查看并撤销不同设备上的活动登录会话。
  • 危险区域：为非所有者角色提供删除自己账户的选项。

自定义

您可以通过 blocklet 的配置添加新的标签页来扩展 UserCenter。

  1. 在 blocklet.yml 中定义自定义标签页 在您的 blocklet.yml 文件中，向 navigation.userCenter 数组添加条目。每个条目代表一个新的标签页。 blocklet.yml yaml navigation: - title: User Center role: guest userCenter: - title: My Activity link: /profile/activity icon: 'material-symbols:history' # 如果此标签页应仅对个人资料所有者可见，则设置为 true private: false
  2. 为自定义标签页渲染内容 在您的组件中，传递一个子元素，当 currentTab 属性与您定义的 link 匹配时，该子元素将被渲染。 MyActivity.js javascript import React from 'react'; import { UserCenter } from '@blocklet/ui-react'; function MyActivityComponent() { return <div>This is the custom activity content.</div>; } export default function ProfilePageWithActivity() { // 此值将来自您的路由器，例如 '/profile/activity' const currentTab = '/profile/activity'; return ( <UserCenter currentTab={currentTab}> {currentTab === '/profile/activity' && <MyActivityComponent />} </UserCenter> ); }

这种方法允许您将特定于应用的页面无缝集成到标准的 UserCenter 布局中。