@blocklet/ui-react 3.1.48 → 3.1.49

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

@@ -0,0 +1,183 @@
+# UserCenter
+
+`UserCenter` 元件是一個全面的預建介面，提供完整的用戶個人檔案和設定管理頁面。它整合了多種功能，包括使用者資訊顯示、通行證管理、隱私控制、通知設定和 DID 儲存管理，為使用者提供了一個集中式的中心。
+
+此元件設計為高度可擴展，允許開發者透過 blocklet 的元資料新增自訂分頁和內容，確保在不同應用程式中提供一致的使用者體驗。
+
+```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` 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

@@ -0,0 +1,183 @@
+# UserCenter
+
+`UserCenter` 组件是一个全面的、预构建的界面，提供完整的用户个人资料和设置管理页面。它集成了多种功能，包括用户信息显示、通行证管理、隐私控制、通知设置和 DID 存储管理，为用户提供了一个集中的枢纽。
+
+该组件被设计为高度可扩展，允许开发者通过 blocklet 的元数据添加自定义标签页和内容，从而确保在不同应用中提供一致的用户体验。
+
+```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>用于为 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` 布局中。

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

@@ -0,0 +1,164 @@
+# UserSessions
+
+`UserSessions` コンポーネントは、ユーザーのログインセッションを表示および管理するための包括的なデータテーブルをレンダリングします。さまざまなデバイスにわたるすべてのアクティブ、期限切れ、オフラインのセッションの明確な概要を提供し、ユーザーがアカウントのセキュリティを管理できるようにします。
+
+このコンポーネントは、セッション管理機能を実装する必要がある開発者向けのプラグアンドプレイソリューションとして設計されています。データの取得、ページネーション、UIのレンダリング、および特定のセッションからのログアウトなどのアクションを処理します。
+
+## 機能
+
+- **セッションのフィルタリング:** ユーザーはセッションをステータス（`online`、`expired`、または `offline`）で簡単にフィルタリングできます。
+- **詳細情報:** 各セッションエントリには、オペレーティングシステム、デバイスタイプ（ブラウザ）、ウォレットOSなど、解析されたユーザーエージェントデータが表示されます。
+- **IPジオロケーション:** 最終ログインIPアドレスに基づいて地理的な地域を自動的に解決し、表示します。
+- **セッションの終了:** ユーザーは現在のセッションを除く任意のセッションを終了させることができます。
+- **一括操作:** 特定のステータスのすべてのセッションを終了させる「すべてログアウト」機能が含まれています。
+- **レスポンシブデザイン:** さまざまな画面サイズに適応し、デスクトップとモバイルデバイスの両方で一貫したユーザーエクスペリエンスを保証します。
+
+## 仕組み
+
+`UserSessions` コンポーネントは、開発者が提供する関数からセッションデータを要求することによって動作します。この設計により、コンポーネントは特定のバックエンド実装から切り離され、より大きな柔軟性が提供されます。
+
+```d2
+direction: down
+
+User-Interaction: {
+  shape: c4-person
+  label: "ユーザー"
+}
+
+UserSessions-Component: {
+  label: "UserSessions コンポーネント"
+  shape: rectangle
+
+  Datatable: {
+    label: "データテーブル"
+  }
+
+  Actions: {
+    label: "ログアウト / すべてログアウト"
+  }
+}
+
+Application-Backend: {
+  label: "アプリケーションバックエンド"
+  shape: rectangle
+
+  API-Endpoint: {
+    label: "API エンドポイント\n(例: /api/sessions)"
+  }
+
+  Database: {
+    shape: cylinder
+    label: "セッションストレージ"
+  }
+}
+
+User-Interaction -> UserSessions-Component.Datatable: "1. セッションを表示"
+UserSessions-Component -> Application-Backend.API-Endpoint: "2. getUserSessions prop を呼び出し"
+Application-Backend.API-Endpoint -> Database: "3. セッションデータを取得"
+Database -> Application-Backend.API-Endpoint: "4. データを返す"
+Application-Backend.API-Endpoint -> UserSessions-Component: "5. list と paging で promise を解決"
+UserSessions-Component.Datatable -> User-Interaction: "6. セッションをレンダリング"
+User-Interaction -> UserSessions-Component.Actions: "7. 「ログアウト」をクリック"
+UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. ログアウトリクエストを送信"
+Application-Backend.API-Endpoint -> Database: "9. セッションを削除"
+UserSessions-Component -> Application-Backend.API-Endpoint: "10. データを更新"
+```
+
+## 使用方法
+
+`UserSessions` コンポーネントを使用するには、`user` オブジェクトと `getUserSessions` 関数を提供する必要があります。`getUserSessions` 関数は、バックエンドサービスからセッションデータを取得する役割を担います。
+
+```javascript Integration Example icon=lucide:code
+import { UserSessions } from '@arcblock/blocklet-ui-react';
+import { client } from './libs/client'; // API クライアントインスタンス
+
+// セッションが表示される対象のユーザーオブジェクト。
+const currentUser = {
+  did: 'z1...',
+  name: 'Alice',
+  // 他のユーザープロパティ
+};
+
+/**
+ * この関数はバックエンドからセッションデータを取得します。
+ * UserSessions コンポーネントは、新しいデータが必要になるたびにこの関数を呼び出します。
+ *
+ * @param {object} params - クエリパラメータ。
+ * @param {number} params.page - 現在のページ番号。
+ * @param {number} params.pageSize - ページごとのアイテム数。
+ * @param {string} params.status - フィルタリングするセッションのステータス（'online'、'expired'、'offline'）。
+ * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} セッションデータに解決される Promise。
+ */
+const fetchUserSessions = async ({ page, pageSize, status }) => {
+  const response = await client.user.getSessions({
+    page,
+    pageSize,
+    status,
+  });
+
+  // 返り値の形式がコンポーネントの要件と一致することを確認
+  return {
+    list: response?.list || [],
+    paging: {
+      total: response?.paging?.total || 0,
+    },
+  };
+};
+
+export default function MyAccountSessionsPage() {
+  return (
+    <div>
+      <h2>ログインセッションの管理</h2>
+      <UserSessions
+        user={currentUser}
+        getUserSessions={fetchUserSessions}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+`UserSessions` コンポーネントは、その動作と外観をカスタマイズするために以下の props を受け入れます。
+
+<x-field-group>
+  <x-field data-name="user" data-type="User" data-required="true">
+    <x-field-desc markdown>セッションが表示される対象のユーザーオブジェクト。コンポーネントは、セッションリストにコンテキストを提供するためにこれを必要とします。</x-field-desc>
+  </x-field>
+  <x-field data-name="getUserSessions" data-type="function" data-required="true">
+    <x-field-desc markdown>バックエンドからページ分割されたセッションデータを取得する役割を担う非同期関数。`page`、`pageSize`、`status` を含むオブジェクトを受け取り、`{ list: UserSession[], paging: { total: number } }` という形式のオブジェクトに解決される `Promise` を返す必要があります。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>ログアウトボタンを含む「アクション」列の表示を制御します。`false` に設定すると、読み取り専用のビューが作成されます。</x-field-desc>
+  </x-field>
+  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>「ユーザー」列の表示を制御します。これは、各セッションのユーザーを識別する必要があるマルチユーザーまたは管理コンテキストで役立ちます。</x-field-desc>
+  </x-field>
+  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>UIで「オフライン」フィルターオプションが利用可能かどうかを決定します。オフラインセッションは通常、現在アクティブではない長期間有効なセッションを表します。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>セッションに関連付けられた Blocklet のプログラム ID を表示できる「App Pid」列の表示を制御します。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 表示情報
+
+このコンポーネントは、データテーブル内の各セッションについて以下の情報をレンダリングします。
+
+| 列 | 説明 |
+| :--- | :--- |
+| **プラットフォーム** | セッションのユーザーエージェント文字列から派生したオペレーティングシステムとバージョン（例：`Windows/10`）。 |
+| **デバイスタイプ** | セッションに使用されたブラウザまたはアプリケーション（例：`Chrome/108.0.0`）。 |
+| **ウォレットOS** | 接続されたDIDウォレットのオペレーティングシステム（利用可能な場合）。 |
+| **App Pid** | セッションを作成した Blocklet のプログラム ID。（`showAppPid` が `true` の場合に表示）。 |
+| **ユーザー** | セッションに関連付けられたユーザー。（`showUser` が `true` の場合に表示）。 |
+| **作成日時** | セッションが最初に作成されたときのタイムスタンプ。 |
+| **最終アクティブ** | 最後のアクティビティのタイムスタンプ。期限切れのセッションの場合、この列には「期限切れ」と表示されます。 |
+| **最終ログインIP** | セッションの最後に確認されたIPアドレスと、その解決された地理的な地域。 |
+| **アクション** | セッションからログアウトするためのボタンを提供します。（`showAction` が `true` の場合に表示）。 |
+
+---
+
+完全なユーザー管理インターフェースには、[UserCenter](./components-user-management-user-center.md) コンポーネント内で `UserSessions` コンポーネントを使用することを検討してください。