@blocklet/ui-react 3.4.14 → 3.5.0

package/docs/components-user-management-user-center.ja.md

@@ -1,148 +0,0 @@
-# UserCenter
-
-`UserCenter`コンポーネントは、完全なユーザープロファイルと設定管理ページを提供する、包括的な構築済みインターフェースです。ユーザー情報の表示、パスポート管理、プライバシー制御、通知設定、DIDストレージ管理など、さまざまな機能を統合し、ユーザーに一元化されたハブを提供します。
-
-このコンポーネントは高度に拡張可能に設計されており、開発者はブロックレットのメタデータを通じてカスタムタブやコンテンツを追加でき、異なるアプリケーション間で一貫したユーザーエクスペリエンスを保証します。
-
-<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
-![UserCenter](assets/diagram/user-center-diagram-0.ja.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>ブロックレットのナビゲーション設定で定義されたカスタムタブのコンテンツをレンダリングするために使用されます。`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`にはすべてのユーザーに対して以下のタブが含まれています：
-
-| タブ | 説明 | 可視性 |
-| ------------------- | ------------------------------------------------------------------------------ | --------------- |
-| **NFTs** | ユーザーのNFTコレクションを表示します。 | 公開 |
-| **ソーシャルアクティビティ** | ソーシャル機能が有効な場合、ユーザーのフォロワーとフォロー中のリストを表示します。 | 公開 |
-| **設定** | プロファイル、プライバシー、通知、セッション管理へのアクセス。 | 所有者のみ |
-| **ストレージ** | 分散ストレージのためのDID Spacesへの接続を管理するインターフェース。 | 所有者のみ |
-
-### ユーザープロファイル (`UserBasicInfo`)
-
-`UserBasicInfo`コンポーネントは、ユーザーの基本情報を表示する専用のセクション（デスクトップでは通常サイドバー）です：
-- **アバターと名前**：ユーザーのプロフィール写真と氏名を表示します。所有者はアバターをクリックしてプロファイルスイッチャーを開くことができます。
-- **DID**：ユーザーの分散型識別子を表示し、コピーしたりQRコードを表示したりするオプションがあります。
-- **ソーシャルアクション**：公開プロファイルの場合、「フォロー」または「フォロー解除」ボタンが表示されます。
-- **メタデータ**：自己紹介、場所、ソーシャルリンクなど、ユーザーが提供した情報を表示します。
-- **個人情報**：所有者には、メールアドレスや電話番号などの個人情報が表示されます。
-
-### パスポート管理
-
-メインのプロファイルタブ（NFTs）では、現在ログインしているユーザーは自身のDIDパスポート専用のセクションを見ることができます。このエリアには、関連付けられたすべてのパスポートがリスト表示され、そのステータス（例：アクティブ、失効済み）が示され、現在使用中のものが強調表示されます。
-
-### 設定
-
-「設定」タブは、プロファイルを所有するユーザーのみが利用できる包括的なパネルです。いくつかのサブセクションに分かれています：
-
-- **共通設定**：ユーザーが名前、自己紹介、ソーシャルリンクなどの公開プロファイル情報を更新できます。
-- **通知管理**：通知の受信方法（ウォレット、メール、プッシュ）を設定し、Webhookを管理します。
-- **サードパーティログイン**：Google、GitHub、Passkeysなどの他のIDプロバイダーとの接続を管理します。
-- **プライバシー管理**：ユーザープロファイル上のさまざまなタブの可視性を制御し、公開または非公開に設定します。
-- **セッション管理**：さまざまなデバイスでのアクティブなログインセッションを表示し、取り消します。
-- **危険ゾーン**：非所有者ロールの場合、自身のアカウントを削除するオプションを提供します。
-
-## カスタマイズ
-
-ブロックレットの設定を通じて新しいタブを追加することで、`UserCenter`を拡張できます。
-
-1. **`blocklet.yml` でカスタムタブを定義する**
-
-    `blocklet.yml`ファイルの`navigation.userCenter`配列にエントリを追加します。各エントリは新しいタブを表します。
-
-    ```yaml blocklet.yml icon=mdi:code-block-tags
-    navigation:
-      - title: ユーザーセンター
-        role: guest
-        userCenter:
-          - title: マイアクティビティ
-            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>これはカスタムアクティビティのコンテンツです。</div>;
-    }
-
-    export default function ProfilePageWithActivity() {
-      // この値はルーターから取得されます。例：'/profile/activity'
-      const currentTab = '/profile/activity';
-
-      return (
-        <UserCenter currentTab={currentTab}>
-          {currentTab === '/profile/activity' && <MyActivityComponent />}
-        </UserCenter>
-      );
-    }
-    ```
-
-このアプローチにより、アプリケーション固有のページを標準の`UserCenter`レイアウトにシームレスに統合できます。

package/docs/components-user-management-user-center.md

@@ -1,147 +0,0 @@
-# UserCenter
-
-The `UserCenter` component is a comprehensive, pre-built interface that provides a complete user profile and settings management page. It integrates various functionalities, including user information display, passport management, privacy controls, notification settings, and DID storage management, offering a centralized hub for users.
-
-This component is designed to be highly extensible, allowing developers to add custom tabs and content through the blocklet's metadata, ensuring a consistent user experience across different applications.
-
-<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
-![UserCenter](assets/diagram/user-center-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## Basic Usage
-
-To use the `UserCenter`, you need to provide the `currentTab` prop, which determines which section is active. This is typically derived from the application's router.
-
-```javascript UserCenter Example icon=logos:react
-import React from 'react';
-import { UserCenter } from '@blocklet/ui-react';
-
-export default function ProfilePage() {
-  // In a real application, you would get this value from your router.
-  // For example, if the URL is /profile/settings, currentTab would be '/profile/settings'.
-  const currentTab = '/profile/nfts';
-
-  return <UserCenter currentTab={currentTab} />;
-}
-```
-
-## Props
-
-The `UserCenter` component accepts several props to customize its behavior and appearance.
-
-<x-field-group>
-  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
-    <x-field-desc markdown>Used to render content for custom tabs defined in the blocklet's navigation settings. The `UserCenter` will display the children when `currentTab` matches a custom tab's URL.</x-field-desc>
-  </x-field>
-  <x-field data-name="currentTab" data-type="string" data-required="true">
-    <x-field-desc markdown>The value of the currently active tab. This should match the `value` property of one of the available tabs (either default or custom). It is used to highlight the correct tab and display its corresponding content.</x-field-desc>
-  </x-field>
-  <x-field data-name="userDid" data-type="string" data-required="false">
-    <x-field-desc markdown>The DID of the user whose profile is to be displayed. If omitted, the component will attempt to get the DID from the URL query parameter (`?did=...`) or default to the currently logged-in user.</x-field-desc>
-  </x-field>
-  <x-field data-name="embed" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>If set to `true`, the component renders in an embedded mode without the main `Header` and `Footer`, making it suitable for integration within other layouts or pages.</x-field-desc>
-  </x-field>
-  <x-field data-name="onlyProfile" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>If set to `true`, only the `UserBasicInfo` profile card is displayed, without any tabs or content sections. This is useful for contexts where only a compact user profile is needed.</x-field-desc>
-  </x-field>
-  <x-field data-name="hideFooter" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>If set to `true`, the `Footer` component will not be rendered.</x-field-desc>
-  </x-field>
-  <x-field data-name="headerProps" data-type="object" data-required="false">
-    <x-field-desc markdown>Props to be passed down to the underlying `Header` component for customization.</x-field-desc>
-  </x-field>
-  <x-field data-name="footerProps" data-type="object" data-required="false">
-    <x-field-desc markdown>Props to be passed down to the underlying `Footer` component for customization.</x-field-desc>
-  </x-field>
-  <x-field data-name="onDestroySelf" data-type="() => void" data-required="false">
-    <x-field-desc markdown>A callback function that is triggered when a non-owner user initiates the account deletion process from the "Danger Zone" in the settings.</x-field-desc>
-  </x-field>
-  <x-field data-name="notLoginContent" data-type="React.ReactNode" data-required="false">
-    <x-field-desc markdown>Custom content to display when no user is logged in and no `userDid` is provided. If not set, a default login prompt is shown.</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## Core Features
-
-The `UserCenter` is composed of several key sections and components that provide a rich user experience out of the box.
-
-### Default Tabs
-
-By default, the `UserCenter` includes the following tabs for every user:
-
-| Tab                 | Description                                                                    | Visibility |
-| ------------------- | ------------------------------------------------------------------------------ | ---------- |
-| **NFTs**            | Displays the user's NFT collections.                                           | Public     |
-| **Social Activity** | Shows the user's followers and following lists if social features are enabled. | Public     |
-| **Settings**        | Access to profile, privacy, notification, and session management.              | Owner Only |
-| **Storage**         | Interface for managing connections to DID Spaces for decentralized storage.    | Owner Only |
-
-### User Profile (`UserBasicInfo`)
-
-The `UserBasicInfo` component is a dedicated section (typically a sidebar on desktop) that displays essential user details:
-
-- **Avatar and Name**: Shows the user's profile picture and full name. The owner can click the avatar to open the profile switcher.
-- **DID**: Displays the user's Decentralized Identifier, with options to copy it or view its QR code.
-- **Social Actions**: For public profiles, it shows "Follow" or "Unfollow" buttons.
-- **Metadata**: Displays user-provided information such as bio, location, and social links.
-- **Private Information**: For the owner, it shows private details like email and phone number.
-
-### Passport Management
-
-On the main profile tab (NFTs), the currently logged-in user will see a section dedicated to their DID Passports. This area lists all associated passports, indicating their status (e.g., active, revoked) and highlighting the one currently in use.
-
-### Settings
-
-The "Settings" tab is a comprehensive panel available only to the user who owns the profile. It is organized into several sub-sections:
-
-- **Common Settings**: Allows users to update their public profile information like name, bio, and social links.
-- **Notification Management**: Configure how to receive notifications (Wallet, Email, Push) and manage webhooks.
-- **Third-Party Login**: Manage connections to other identity providers like Google, GitHub, or Passkeys.
-- **Privacy Management**: Control the visibility of different tabs on the user profile, making them public or private.
-- **Session Management**: View and revoke active login sessions across different devices.
-- **Danger Zone**: For non-owner roles, provides an option to delete their own account.
-
-## Customization
-
-You can extend the `UserCenter` by adding new tabs through your blocklet's configuration.
-
-1.  **Define Custom Tabs in `blocklet.yml`**
-
-    Add entries to the `navigation.userCenter` array in your `blocklet.yml` file. Each entry represents a new tab.
-
-    ```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'
-            # Set to true if this tab should only be visible to the profile owner
-            private: false
-    ```
-
-2.  **Render Content for the Custom Tab**
-
-    In your component, pass a child element that will be rendered when the `currentTab` prop matches the `link` you defined.
-
-    ```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() {
-      // This value would come from your router, e.g., '/profile/activity'
-      const currentTab = '/profile/activity';
-
-      return (
-        <UserCenter currentTab={currentTab}>{currentTab === '/profile/activity' && <MyActivityComponent />}</UserCenter>
-      );
-    }
-    ```
-
-This approach allows you to seamlessly integrate application-specific pages into the standard `UserCenter` layout.

package/docs/components-user-management-user-center.zh-TW.md

@@ -1,148 +0,0 @@
-# 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` 佈局中。

package/docs/components-user-management-user-center.zh.md

@@ -1,148 +0,0 @@
-# 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` 布局中。