@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
148 lines (113 loc) • 10.6 kB
Markdown
# UserCenter
`UserCenter`コンポーネントは、完全なユーザープロファイルと設定管理ページを提供する、包括的な構築済みインターフェースです。ユーザー情報の表示、パスポート管理、プライバシー制御、通知設定、DIDストレージ管理など、さまざまな機能を統合し、ユーザーに一元化されたハブを提供します。
このコンポーネントは高度に拡張可能に設計されており、開発者はブロックレットのメタデータを通じてカスタムタブやコンテンツを追加でき、異なるアプリケーション間で一貫したユーザーエクスペリエンスを保証します。
<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
<!-- 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`レイアウトにシームレスに統合できます。