跳到主要內容

UserCenter

UserCenter 元件是一個全面的預建介面，提供完整的用戶個人檔案和設定管理頁面。它整合了多種功能，包括使用者資訊顯示、通行證管理、隱私控制、通知設定和 DID 儲存管理，為使用者提供了一個集中式的中心。

此元件設計為高度可擴展，允許開發者透過 blocklet 的元資料新增自訂分頁和內容，確保在不同應用程式中提供一致的使用者體驗。

UserCenter

基本用法

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

UserCenter 範例

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} />;
}

Props

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

  • children React.ReactNode — 用於呈現 blocklet 導覽設定中定義的自訂分頁內容。當 currentTab 符合自訂分頁的 URL 時，UserCenter 將顯示 children。
  • 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 元件以進行自訂的 props。
  • footerProps object — 要傳遞給底層 Footer 元件以進行自訂的 props。
  • onDestroySelf () => void — 當非擁有者使用者從設定中的「危險區域」啟動帳號刪除程序時觸發的回呼函式。
  • notLoginContent React.ReactNode — 當沒有使用者登入且未提供 userDid 時顯示的自訂內容。如果未設定，則顯示預設的登入提示。

核心功能

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 陣列。每個條目代表一個新的分頁。 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 prop 符合您定義的 link 時，該子元素將被呈現。 MyActivity.js javascript 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 佈局中。