@blocklet/ui-react/docs/components-user-management-user-center.zh-TW.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-TW.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 基本用法

要使用 `UserCenter`，您需要提供 `currentTab` prop，它決定了哪個區塊是作用中的。這通常來自應用程式的路由器。

```javascript UserCenter 範例 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} />;
}
```

## Props

`UserCenter` 元件接受多個 props 來客製化其行為和外觀。

<x-field-group>
  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
    <x-field-desc markdown>用於呈現 blocklet 導覽設定中定義的自訂分頁內容。當 `currentTab` 符合自訂分頁的 URL 時，`UserCenter` 將顯示 children。</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` 元件以進行自訂的 props。</x-field-desc>
  </x-field>
  <x-field data-name="footerProps" data-type="object" data-required="false">
    <x-field-desc markdown>要傳遞給底層 `Footer` 元件以進行自訂的 props。</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` 為每位使用者包含以下分頁：

| 分頁 | 說明 | 可見性 |
| ------------------- | ------------------------------------------------------------------------------ | --------------- |
| **NFTs** | 顯示使用者的 NFT 收藏。 | 公開 |
| **社交動態** | 如果啟用社交功能，則顯示使用者的追蹤者和追蹤中清單。 | 公開 |
| **設定** | 存取個人檔案、隱私、通知和會話管理。 | 僅限擁有者 |
| **儲存空間** | 用於管理與 DID Spaces 連接以進行去中心化儲存的介面。 | 僅限擁有者 |

### 使用者個人檔案 (`UserBasicInfo`)

`UserBasicInfo` 元件是一個專用區塊（在桌面上通常是側邊欄），顯示必要的使用者詳細資訊：
- **頭像和姓名**：顯示使用者的個人資料圖片和全名。擁有者可以點擊頭像來打開個人檔案切換器。
- **DID**：顯示使用者的去中心化識別碼，並提供複製或查看其 QR 碼的選項。
- **社交操作**：對於公開的個人檔案，它會顯示「追蹤」或「取消追蹤」按鈕。
- **元資料**：顯示使用者提供的資訊，如個人簡介、地點和社交連結。
- **私人資訊**：對於擁有者，它會顯示私人詳細資訊，如電子郵件和電話號碼。

### 通行證管理

在主要的個人檔案分頁（NFTs）上，當前登入的使用者會看到一個專門用於其 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` prop 符合您定義的 `link` 時，該子元素將被呈現。

    ```javascript MyActivity.js icon=logos:react
    import React from 'react';
    import { UserCenter } from '@blocklet/ui-react';

    function MyActivityComponent() {
      return <div>這是自訂的活動內容。</div>;
    }

    export default function ProfilePageWithActivity() {
      // 此值將來自您的路由器，例如 '/profile/activity'
      const currentTab = '/profile/activity';

      return (
        <UserCenter currentTab={currentTab}>
          {currentTab === '/profile/activity' && <MyActivityComponent />}
        </UserCenter>
      );
    }
    ```

這種方法讓您能夠將特定於應用程式的頁面無縫整合到標準的 `UserCenter` 佈局中。