@blocklet/ui-react/docs/components-user-management-user-center.zh.md

Some useful front-end web components that can be used in Blocklets.

# UserCenter

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

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

<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
![UserCenter](assets/diagram/user-center-diagram-0.zh.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 基本用法

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

```javascript UserCenter Example icon=logos:react
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` 组件接受多个属性来自定义其行为和外观。

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

## 核心功能

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

### 默认标签页

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

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

### 用户个人资料 (`UserBasicInfo`)

`UserBasicInfo` 组件是一个专用部分（在桌面上通常是侧边栏），用于显示用户的基本详细信息：
- **头像和姓名**：显示用户的个人资料图片和全名。所有者可以点击头像打开个人资料切换器。
- **DID**：显示用户的去中心化标识符，并提供复制或查看其二维码的选项。
- **社交操作**：对于公开的个人资料，显示“关注”或“取消关注”按钮。
- **元数据**：显示用户提供的信息，如简介、位置和社交链接。
- **私密信息**：对于所有者，显示电子邮件和电话号码等私密详细信息。

### 通行证管理

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

### 设置

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

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

## 自定义

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

1. **在 `blocklet.yml` 中定义自定义标签页**

   在您的 `blocklet.yml` 文件中，向 `navigation.userCenter` 数组添加条目。每个条目代表一个新的标签页。

    ```yaml blocklet.yml icon=mdi:code-block-tags
    navigation:
      - title: User Center
        role: guest
        userCenter:
          - title: My Activity
            link: /profile/activity
            icon: 'material-symbols:history'
            # 如果此标签页应仅对个人资料所有者可见，则设置为 true
            private: false
    ```

2. **为自定义标签页渲染内容**

   在您的组件中，传递一个子元素，当 `currentTab` 属性与您定义的 `link` 匹配时，该子元素将被渲染。

    ```javascript MyActivity.js icon=logos:react
    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` 布局中。