@blocklet/ui-react 3.1.47 → 3.1.49

package/docs/components-notifications.zh.md

@@ -0,0 +1,173 @@
+# 通知
+
+本节详细介绍了可用于实现实时用户通知系统的组件和实用工具。该系统旨在通过专用的 UI 组件和浮动提示消息向用户及时传递更新。
+
+通知系统的核心是围绕 WebSocket 连接构建的，使服务器能够即时向客户端推送更新。这确保用户无需刷新应用程序即可随时了解重要事件。
+
+## 架构概述
+
+通知系统遵循一个简单、事件驱动的架构。当后端发生值得注意的事件时，会生成一个通知并通过 WebSocket 通道广播。前端客户端监听此通道，接收通知，并相应地更新 UI。
+
+```d2
+direction: down
+
+User: {
+  shape: c4-person
+}
+
+Backend: {
+  label: "Blocklet 后端"
+  shape: rectangle
+
+  Event-Trigger: {
+    label: "事件发生"
+    shape: oval
+  }
+
+  Notification-Service: {
+    label: "通知服务"
+  }
+}
+
+WebSocket-Server: {
+  label: "WebSocket 服务器"
+}
+
+Frontend: {
+  label: "前端应用"
+  shape: rectangle
+
+  WebSocket-Client: {
+    label: "WebSocket 客户端"
+  }
+
+  NotificationAddon: {
+    label: "NotificationAddon"
+  }
+
+  SnackbarProvider: {
+    label: "SnackbarProvider"
+  }
+}
+
+# 定义通知流程
+Backend.Event-Trigger -> Backend.Notification-Service: "1. 触发通知"
+Backend.Notification-Service -> WebSocket-Server: "2. 推送消息"
+WebSocket-Server -> Frontend.WebSocket-Client: "3. 广播到客户端"
+Frontend.WebSocket-Client -> Frontend.NotificationAddon: "4. 转发消息"
+Frontend.NotificationAddon -> Frontend.NotificationAddon: "5a. 更新未读计数"
+Frontend.NotificationAddon -> Frontend.SnackbarProvider: "5b. 显示浮动提示通知"
+Frontend.SnackbarProvider -> User: "6. 显示给用户"
+```
+
+## 核心组件
+
+通知系统主要由两个 React 组件组成：`NotificationAddon` 和 `NotificationSnackbar`。
+
+### NotificationAddon
+
+`NotificationAddon` 组件是通知的主要用户界面元素。它渲染一个铃铛图标，上面带有一个徽章，显示未读通知的数量。
+
+#### 功能
+
+-   **未读计数**：实时显示未读通知的数量。
+-   **WebSocket 集成**：自动连接到通知 WebSocket 通道并监听传入消息。
+-   **浮动提示通知**：为新的组件级通知触发浮动提示消息。
+-   **直接导航**：作为指向主通知页面的链接。
+
+#### 用法
+
+要使用此组件，请将其导入并放置在布局组件（如应用头部）中。它需要一个 `session` 对象才能正常工作，该对象通常从会话上下文中获取。
+
+```javascript "title=示例：集成 NotificationAddon" icon=logos:javascript
+import NotificationAddon from '@arcblock/ux/lib/common/notification-addon';
+import { useSessionContext } from '@arcblock/did-connect-react';
+
+export default function AppHeader() {
+  const { session } = useSessionContext();
+
+  return (
+    <header>
+      {/* Other header content */}
+      <NotificationAddon session={session} />
+    </header>
+  );
+}
+```
+
+**重要提示**：为使浮动提示通知正常工作，您的应用程序必须被 `notistack` 库中的 `SnackbarProvider` 包裹。
+
+```javascript "title=示例：应用被 SnackbarProvider 包裹" icon=logos:javascript
+import { SnackbarProvider } from 'notistack';
+import App from './App';
+
+function Root() {
+  return (
+    <SnackbarProvider maxSnack={3}>
+      <App />
+    </SnackbarProvider>
+  );
+}
+```
+
+#### Props
+
+<x-field-group>
+  <x-field data-name="session" data-type="object" data-required="true">
+    <x-field-desc markdown>包含用户和通知数据的会话对象。该组件依赖于 `session.user`、`session.unReadCount` 和 `session.setUnReadCount`。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+### NotificationSnackbar
+
+该组件为浮动提示通知提供了一个丰富、标准化的 UI。它由 `NotificationAddon` 通过 `notistack` 的 `enqueueSnackbar` 函数在内部使用，不建议直接使用。
+
+#### 功能
+
+-   **基于严重级别的样式**：浮动提示的外观会根据通知的严重级别（`success`、`info`、`warning`、`error`）而变化。
+-   **丰富内容显示**：除了简单的标题和描述外，还能显示结构化的活动通知（例如，“用户 X 赞了你的帖子”）。
+-   **交互式链接**：自动将描述中可识别的模式（如用户 DID 或 DApp 地址）转换为可点击的链接。
+-   **点击打开**：点击浮动提示会将用户导航到详细的通知视图。
+
+## WebSocket 集成
+
+实时功能由 `useListenWsClient` 钩子管理的 WebSocket 客户端提供支持。该钩子为已登录的用户建立连接并监听特定事件。
+
+### `useListenWsClient` 钩子
+
+该钩子抽象了创建和管理 WebSocket 连接的复杂性。它检索当前用户会话并初始化一个连接到指定端点的客户端。
+
+```javascript "title=钩子用法" icon=logos:javascript
+const wsClient = useListenWsClient('user');
+```
+
+### 事件
+
+`NotificationAddon` 组件在 `user` 通道上订阅以下事件：
+
+| 事件名称 | 描述 |
+| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `notification:blocklet:create` | 当为用户创建新通知时触发。该组件会增加未读计数，并可能显示一条浮动提示消息。 |
+| `notification:blocklet:read` | 当一个或多个通知被阅读时触发。该组件会将未读计数减去已读通知的数量。 |
+
+完整的事件名称是使用 blocklet 的 DID 和用户的 DID 动态构建的，例如：`{blocklet.did}/{user.did}/notification:blocklet:create`。
+
+## 关键实用工具
+
+几个实用工具函数通过处理和格式化通知数据来支持通知系统。
+
+### `mergeAdjacentNotifications`
+
+此函数将连续的相似通知分组为一个聚合条目。例如，如果一个用户连续收到来自不同用户的多个“赞”通知，此函数可以将它们合并为一条通知，如“Alice、Bob 和另外 2 人赞了你的帖子”。
+
+### `toClickableSpan`
+
+此实用工具负责通过将纯文本转换为丰富的交互式内容来增强通知描述。它解析输入字符串，识别特殊实体（如用户 DID 或 DApp 地址），并将它们转换为可点击的 HTML `<a>` 标签。这允许用户从通知内部直接导航到用户个人资料或 DApp 页面。
+
+### `sanitize`
+
+`DOMPurify` 的一个包装器，用于在渲染 HTML 内容之前对其进行清理和净化。这是一种安全措施，用于在显示可能包含用户生成数据的通知内容时防止跨站脚本（XSS）攻击。
+
+## 总结
+
+通知系统为保持用户知情提供了一个稳健的实时解决方案。通过利用 `NotificationAddon` 组件并确保您的应用程序配置了 `SnackbarProvider`，您可以轻松地将一个功能齐全的通知中心集成到您的 blocklet 中。底层的 WebSocket 架构确保更新能够即时传递，从而创造出动态且响应迅速的用户体验。

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

@@ -0,0 +1,183 @@
+# UserCenter
+
+`UserCenter`コンポーネントは、完全なユーザープロファイルと設定管理ページを提供する、包括的な構築済みインターフェースです。ユーザー情報の表示、パスポート管理、プライバシー制御、通知設定、DIDストレージ管理など、さまざまな機能を統合し、ユーザーに一元化されたハブを提供します。
+
+このコンポーネントは高度に拡張可能に設計されており、開発者はブロックレットのメタデータを通じてカスタムタブやコンテンツを追加でき、異なるアプリケーション間で一貫したユーザーエクスペリエンスを保証します。
+
+```d2
+direction: down
+
+UserCenter: {
+  label: "UserCenter コンポーネントのレイアウト"
+  shape: rectangle
+
+  Header: { shape: rectangle }
+
+  Main: {
+    direction: right
+    shape: rectangle
+
+    Sidebar: {
+      label: "UserBasicInfo\n(プロファイルサイドバー)"
+      shape: rectangle
+    }
+
+    Content: {
+      label: "コンテンツエリア"
+      shape: rectangle
+
+      Tabs: {
+        label: "タブナビゲーション"
+        shape: rectangle
+      }
+      TabPanel: {
+        label: "アクティブなタブのコンテンツ"
+        shape: rectangle
+      }
+    }
+  }
+
+  Footer: { shape: rectangle }
+}
+
+UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "コンテンツを制御"
+```
+
+## 基本的な使用法
+
+`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

@@ -0,0 +1,183 @@
+# 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.
+
+```d2
+direction: down
+
+UserCenter: {
+  label: "UserCenter Component Layout"
+  shape: rectangle
+
+  Header: { shape: rectangle }
+
+  Main: {
+    direction: right
+    shape: rectangle
+
+    Sidebar: {
+      label: "UserBasicInfo\n(Profile Sidebar)"
+      shape: rectangle
+    }
+
+    Content: {
+      label: "Content Area"
+      shape: rectangle
+
+      Tabs: {
+        label: "Tabs Navigation"
+        shape: rectangle
+      }
+      TabPanel: {
+        label: "Active Tab Content"
+        shape: rectangle
+      }
+    }
+  }
+
+  Footer: { shape: rectangle }
+}
+
+UserCenter.Main.Content.Tabs -> UserCenter.Main.Content.TabPanel: "Controls Content"
+```
+
+## 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.