@blocklet/ui-react 3.4.15 → 3.5.0

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

@@ -1,121 +0,0 @@
-# UserSessions
-
-`UserSessions` コンポーネントは、ユーザーのログインセッションを表示および管理するための包括的なデータテーブルをレンダリングします。さまざまなデバイスにわたるすべてのアクティブ、期限切れ、オフラインのセッションの明確な概要を提供し、ユーザーがアカウントのセキュリティを管理できるようにします。
-
-このコンポーネントは、セッション管理機能を実装する必要がある開発者向けのプラグアンドプレイソリューションとして設計されています。データの取得、ページネーション、UIのレンダリング、および特定のセッションからのログアウトなどのアクションを処理します。
-
-## 機能
-
-- **セッションのフィルタリング:** ユーザーはセッションをステータス（`online`、`expired`、または `offline`）で簡単にフィルタリングできます。
-- **詳細情報:** 各セッションエントリには、オペレーティングシステム、デバイスタイプ（ブラウザ）、ウォレットOSなど、解析されたユーザーエージェントデータが表示されます。
-- **IPジオロケーション:** 最終ログインIPアドレスに基づいて地理的な地域を自動的に解決し、表示します。
-- **セッションの終了:** ユーザーは現在のセッションを除く任意のセッションを終了させることができます。
-- **一括操作:** 特定のステータスのすべてのセッションを終了させる「すべてログアウト」機能が含まれています。
-- **レスポンシブデザイン:** さまざまな画面サイズに適応し、デスクトップとモバイルデバイスの両方で一貫したユーザーエクスペリエンスを保証します。
-
-## 仕組み
-
-`UserSessions` コンポーネントは、開発者が提供する関数からセッションデータを要求することによって動作します。この設計により、コンポーネントは特定のバックエンド実装から切り離され、より大きな柔軟性が提供されます。
-
-<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
-![UserSessions](assets/diagram/user-sessions-diagram-0.ja.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 使用方法
-
-`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` コンポーネントを使用することを検討してください。

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

@@ -1,123 +0,0 @@
-# UserSessions
-
-The `UserSessions` component renders a comprehensive data table for displaying and managing a user's login sessions. It provides a clear overview of all active, expired, and offline sessions across various devices, giving users control over their account security.
-
-The component is designed to be a plug-and-play solution for developers needing to implement session management features. It handles data fetching, pagination, UI rendering, and actions like logging out of specific sessions.
-
-## Features
-
-- **Session Filtering:** Users can easily filter sessions by their status: `online`, `expired`, or `offline`.
-- **Detailed Information:** Each session entry displays parsed user-agent data, including the operating system, device type (browser), and wallet OS.
-- **IP Geolocation:** Automatically resolves and displays the geographical region based on the last login IP address.
-- **Session Termination:** Allows users to terminate any session except the current one.
-- **Bulk Actions:** Includes a "Logout All" feature to terminate all sessions of a specific status.
-- **Responsive Design:** Adapts to different screen sizes, ensuring a consistent user experience on both desktop and mobile devices.
-
-## How It Works
-
-The `UserSessions` component operates by requesting session data from a developer-provided function. This design decouples the component from any specific backend implementation, offering greater flexibility.
-
-The following diagram illustrates the interaction between the user, the component, and the application backend:
-
-<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
-![UserSessions](assets/diagram/user-sessions-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## Usage
-
-To use the `UserSessions` component, you must provide a `user` object and a `getUserSessions` function. The `getUserSessions` function is responsible for fetching the session data from your backend service.
-
-```javascript Integration Example icon=lucide:code
-import { UserSessions } from '@arcblock/blocklet-ui-react';
-import { client } from './libs/client'; // Your API client instance
-
-// The user object for whom sessions are being displayed.
-const currentUser = {
-  did: 'z1...',
-  name: 'Alice',
-  // other user properties
-};
-
-/**
- * This function fetches session data from your backend.
- * The UserSessions component will call this function whenever it needs new data.
- *
- * @param {object} params - The query parameters.
- * @param {number} params.page - The current page number.
- * @param {number} params.pageSize - The number of items per page.
- * @param {string} params.status - The session status to filter by ('online', 'expired', 'offline').
- * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} A promise that resolves to the session data.
- */
-const fetchUserSessions = async ({ page, pageSize, status }) => {
-  const response = await client.user.getSessions({
-    page,
-    pageSize,
-    status,
-  });
-
-  // Ensure the return format matches the component's requirements
-  return {
-    list: response?.list || [],
-    paging: {
-      total: response?.paging?.total || 0,
-    },
-  };
-};
-
-export default function MyAccountSessionsPage() {
-  return (
-    <div>
-      <h2>Manage Your Login Sessions</h2>
-      <UserSessions
-        user={currentUser}
-        getUserSessions={fetchUserSessions}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-The `UserSessions` component accepts the following props to customize its behavior and appearance.
-
-<x-field-group>
-  <x-field data-name="user" data-type="User" data-required="true">
-    <x-field-desc markdown>The user object for whom the sessions are being displayed. The component requires this to provide context for the session list.</x-field-desc>
-  </x-field>
-  <x-field data-name="getUserSessions" data-type="function" data-required="true">
-    <x-field-desc markdown>An asynchronous function responsible for fetching paginated session data from your backend. It receives an object with `page`, `pageSize`, and `status` and must return a `Promise` that resolves to an object with the shape `{ list: UserSession[], paging: { total: number } }`.</x-field-desc>
-  </x-field>
-  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
-    <x-field-desc markdown>Controls the visibility of the "Actions" column, which contains the logout buttons. Set to `false` to create a read-only view.</x-field-desc>
-  </x-field>
-  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
-    <x-field-desc markdown>Controls the visibility of the "User" column. This is useful in multi-user or administrative contexts where identifying the user for each session is necessary.</x-field-desc>
-  </x-field>
-  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>Determines whether the "Offline" filter option is available in the UI. Offline sessions typically represent long-lived sessions that are not currently active.</x-field-desc>
-  </x-field>
-  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>Controls the visibility of the "App Pid" column, which can display a Blocklet's Program ID associated with the session.</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## Displayed Information
-
-The component renders the following information for each session in the data table:
-
-| Column | Description |
-| :--- | :--- |
-| **Platform** | The operating system and version derived from the session's user-agent string (e.g., `Windows/10`). |
-| **Device Type** | The browser or application used for the session (e.g., `Chrome/108.0.0`). |
-| **Wallet OS** | The operating system of the connected DID wallet, if available. |
-| **App Pid** | The Program ID of the Blocklet that created the session. (Visible if `showAppPid` is `true`). |
-| **User** | The user associated with the session. (Visible if `showUser` is `true`). |
-| **Created At** | The timestamp when the session was initially created. |
-| **Last Active** | The timestamp of the last activity. For expired sessions, this column shows "Expired". |
-| **Last Login IP** | The last known IP address for the session, along with its resolved geographical region. |
-| **Actions** | Provides a button to log out of the session. (Visible if `showAction` is `true`). |
-
----
-
-For a complete user management interface, consider using the `UserSessions` component within the [UserCenter](./components-user-management-user-center.md) component.

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

@@ -1,121 +0,0 @@
-# UserSessions
-
-`UserSessions` 元件會渲染一個全面的資料表，用於顯示和管理使用者的登入會話。它清晰地概覽了所有在各種裝置上的活躍、過期和離線會話，讓使用者能夠掌控其帳戶安全。
-
-此元件被設計為一個隨插即用的解決方案，供需要實作會話管理功能的開發人員使用。它處理資料擷取、分頁、UI 渲染以及登出特定會話等操作。
-
-## 功能
-
-- **會話篩選：** 使用者可以輕鬆地按會話狀態篩選：`online`、`expired` 或 `offline`。
-- **詳細資訊：** 每個會話條目都會顯示解析後的使用者代理資料，包括作業系統、裝置類型（瀏覽器）和錢包作業系統。
-- **IP 地理位置：** 根據上次登入的 IP 位址自動解析並顯示地理區域。
-- **終止會話：** 允許使用者終止除了當前會話以外的任何會話。
-- **批次操作：** 包含「全部登出」功能，以終止特定狀態下的所有會話。
-- **響應式設計：** 適應不同螢幕尺寸，確保在桌面和行動裝置上擁有一致的使用者體驗。
-
-## 運作方式
-
-`UserSessions` 元件透過向開發人員提供的函式請求會話資料來運作。這種設計將元件與任何特定的後端實作解耦，提供了更大的靈活性。
-
-<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
-![UserSessions](assets/diagram/user-sessions-diagram-0.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 使用方式
-
-要使用 `UserSessions` 元件，您必須提供一個 `user` 物件和一個 `getUserSessions` 函式。`getUserSessions` 函式負責從您的後端服務中擷取會話資料。
-
-```javascript 整合範例 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>
-  );
-}
-```
-
-## 屬性
-
-`UserSessions` 元件接受以下屬性以自訂其行為和外觀。
-
-<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>控制「App Pid」欄位的可見性，該欄位可以顯示與會話關聯的 Blocklet 的程式 ID。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## 顯示資訊
-
-此元件在資料表中為每個會話渲染以下資訊：
-
-| 欄位 | 說明 |
-| :--- | :--- |
-| **Platform** | 從會話的使用者代理字串中解析出的作業系統和版本（例如 `Windows/10`）。 |
-| **Device Type** | 用於此會話的瀏覽器或應用程式（例如 `Chrome/108.0.0`）。 |
-| **Wallet OS** | 已連接的 DID 錢包的作業系統（如果有的話）。 |
-| **App Pid** | 建立此會話的 Blocklet 的程式 ID。（如果 `showAppPid` 為 `true` 則可見）。 |
-| **User** | 與此會話關聯的使用者。（如果 `showUser` 為 `true` 則可見）。 |
-| **Created At** | 會話最初建立的時間戳。 |
-| **Last Active** | 上次活動的時間戳。對於已過期的會話，此欄位顯示「已過期」。 |
-| **Last Login IP** | 此會話的最後已知 IP 位址，及其解析出的地理區域。 |
-| **Actions** | 提供一個登出此會話的按鈕。（如果 `showAction` 為 `true` 則可見）。 |
-
----
-
-若要獲得一個完整的使用者管理介面，請考慮在 [UserCenter](./components-user-management-user-center.md) 元件中使用 `UserSessions` 元件。

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

@@ -1,121 +0,0 @@
-# UserSessions
-
-`UserSessions` 组件渲染一个全面的数据表格，用于显示和管理用户的登录会话。它清晰地概览了用户在各种设备上的所有活跃、已过期和离线会话，让用户能够控制其账户安全。
-
-该组件被设计成一个即插即用的解决方案，供需要实现会话管理功能的开发者使用。它负责处理数据获取、分页、UI 渲染以及登出特定会话等操作。
-
-## 功能
-
-- **会话筛选：** 用户可以轻松按状态（`online`、`expired` 或 `offline`）筛选会话。
-- **详细信息：** 每个会话条目都会显示解析后的 user-agent 数据，包括操作系统、设备类型（浏览器）和钱包操作系统。
-- **IP 地理位置：** 根据上次登录的 IP 地址自动解析并显示地理区域。
-- **会话终止：** 允许用户终止除当前会话之外的任何会话。
-- **批量操作：** 包含“全部登出”功能，可终止特定状态下的所有会話。
-- **响应式设计：** 适应不同屏幕尺寸，确保在桌面和移动设备上提供一致的用户体验。
-
-## 工作原理
-
-`UserSessions` 组件通过调用开发者提供的函数来请求会话数据。这种设计将组件与任何特定的后端实现解耦，从而提供了更大的灵活性。
-
-<!-- DIAGRAM_IMAGE_START:sequence:16:9:1765962229 -->
-![UserSessions](assets/diagram/user-sessions-diagram-0.zh.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 用法
-
-要使用 `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',
-  // other user properties
-};
-
-/**
- * 此函数从您的后端获取会话数据。
- * 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>
-  );
-}
-```
-
-## 属性
-
-`UserSessions` 组件接受以下属性以自定义其行为和外观。
-
-<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>控制“应用 Pid”列的可见性，该列可以显示与会话关联的 Blocklet 的程序 ID。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## 显示信息
-
-该组件在数据表格中为每个会话渲染以下信息：
-
-| 列 | 描述 |
-| :--- | :--- |
-| **平台** | 从会话的 user-agent 字符串派生的操作系统和版本（例如 `Windows/10`）。 |
-| **设备类型** | 用于会话的浏览器或应用程序（例如 `Chrome/108.0.0`）。 |
-| **钱包操作系统** | 连接的 DID 钱包的操作系统（如果可用）。 |
-| **应用 Pid** | 创建会话的 Blocklet 的程序 ID。（`showAppPid` 为 `true` 时可见）。 |
-| **用户** | 与会话关联的用户。（`showUser` 为 `true` 时可见）。 |
-| **创建于** | 会话最初创建时的时间戳。 |
-| **上次活跃** | 上次活动的时间戳。对于已过期的会话，此列显示“已过期”。 |
-| **上次登录 IP** | 会话的最后已知 IP 地址及其解析的地理区域。 |
-| **操作** | 提供一个用于登出该会话的按钮。（`showAction` 为 `true` 时可见）。 |
-
----
-
-要获得完整的用户管理界面，请考虑在 [UserCenter](./components-user-management-user-center.md) 组件中使用 `UserSessions` 组件。

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

@@ -1,49 +0,0 @@
-# ユーザー管理
-
-ユーザー管理スイートは、ユーザー関連の重要な機能を取り扱うために設計された、事前構築済みのReactコンポーネントのコレクションを提供します。これらのコンポーネントは、アプリケーション内でのユーザープロファイル、セッション管理、組織切り替えの実装を簡素化し、一貫性のある信頼性の高いユーザーエクスペリエンスを保証します。
-
-このセクションでは、スイートで利用可能な主要コンポーネントの概要を説明します。詳細な実装ガイドとAPIリファレンスについては、以下にリンクされている特定のコンポーネントのドキュメントを参照してください。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![User Management](assets/diagram/user-management-diagram-0.ja.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## コアコンポーネント
-
-このスイートは、それぞれがユーザー管理の特定の側面に対応する、いくつかの主要なコンポーネントで構成されています。
-
-<x-cards>
-  <x-card data-title="UserCenter" data-icon="lucide:user-cog" data-href="/components/user-management/user-center">
-    ユーザープロファイルの表示と管理を行うための包括的なコンポーネントです。ユーザー設定、パスポート管理、他のユーザーをフォローするなどのソーシャルインタラクションを処理する機能が含まれています。
-  </x-card>
-  <x-card data-title="UserSessions" data-icon="lucide:smartphone-nfc" data-href="/components/user-management/user-sessions">
-    ユーザーがさまざまなデバイスでのアクティブおよび過去のログインセッションを表示・管理できるようにする、セキュリティに重点を置いたコンポーネントで、アカウントのセキュリティを強化します。
-  </x-card>
-</x-cards>
-
-### 組織の切り替え
-
-`OrgsSwitch` コンポーネントは、複数の組織に所属するユーザー向けにドロップダウンメニューインターフェースを提供します。これにより、チームベースまたはマルチテナント機能を持つアプリケーションにとって重要な、シームレスなコンテキスト切り替えが可能になります。
-
-**主な機能：**
-
-*   **現在の組織の表示：** ユーザーの現在の組織コンテキストを明確に表示します。
-*   **組織リスト：** ユーザーが切り替え可能なすべての組織を一覧表示し、パフォーマンス向上のための無限スクロール機能を備えています。
-*   **検索機能：** 特定の組織を素早くフィルタリングして見つけるための検索バーが含まれています。
-*   **作成とナビゲーション：** 新しい組織を作成するオプションと、すべての組織を管理するための専用ページへのリンクを提供します。
-
-### ユーザーインタラクション用のフック
-
-ソーシャル機能の開発を容易にするため、このライブラリには複雑なロジックを抽象化するカスタムフックとコンテキストも含まれています。
-
-*   **`useFollow` フック**: このフックは、他のユーザーをフォローおよびアンフォローするための完全なロジックを管理します。APIリクエストと状態変更を処理し、現在のフォロー状態 (`followed`) と、`followUser` および `unfollowUser` 関数を返します。
-*   **`UserFollowersProvider` コンテキスト**: フォロー状態が複数のコンポーネント間でアクセス可能である必要があるアプリケーションの場合、このプロバイダーはコンポーネントツリーの一部をラップし、`useUserFollowersContext` フックを介してフォローの状態とアクションを利用可能にします。
-
-## まとめ
-
-このコンポーネントスイートは、ライブラリで構築されたあらゆるアプリケーションにおける堅牢なユーザー管理のために必要なビルディングブロックを提供します。これらのコンポーネントを使用することで、開発を加速し、アプリケーションがユーザーアカウント管理とセキュリティのベストプラクティスに従うことを保証できます。
-
-詳細な実装ガイドについては、特定のコンポーネントのドキュメントに進んでください。
-
-*   **次へ：** [UserCenter](./components-user-management-user-center.md)
-*   **関連項目：** [UserSessions](./components-user-management-user-sessions.md)

package/docs/components-user-management.md

@@ -1,51 +0,0 @@
-# User Management
-
-The User Management suite provides a collection of pre-built React components designed to handle essential user-related functionalities. These components simplify the implementation of user profiles, session management, and organization switching within your application, ensuring a consistent and reliable user experience.
-
-This section provides an overview of the main components available in the suite. The following diagram illustrates how a user interacts with the different components of the application:
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![User Management](assets/diagram/user-management-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-For detailed implementation guides and API references, please refer to the specific component documentation linked below.
-
-## Core Components
-
-The suite is composed of several key components, each addressing a specific aspect of user management.
-
-<x-cards>
-  <x-card data-title="UserCenter" data-icon="lucide:user-cog" data-href="/components/user-management/user-center">
-    A comprehensive component for displaying and managing user profiles. It includes features for handling user settings, passport management, and social interactions like following other users.
-  </x-card>
-  <x-card data-title="UserSessions" data-icon="lucide:smartphone-nfc" data-href="/components/user-management/user-sessions">
-    A security-focused component that allows users to view and manage their active and past login sessions across different devices, enhancing account security.
-  </x-card>
-</x-cards>
-
-### Organization Switching
-
-The `OrgsSwitch` component provides a dropdown menu interface for users who belong to multiple organizations. It allows for seamless context switching, which is critical for applications with team-based or multi-tenant features.
-
-**Key Features:**
-
-*   **Current Organization Display:** Clearly shows the user's current organizational context.
-*   **Organization List:** Lists all available organizations a user can switch to, complete with infinite scrolling for performance.
-*   **Search Functionality:** Includes a search bar to quickly filter and find a specific organization.
-*   **Creation and Navigation:** Provides options to create a new organization and a link to a dedicated page for managing all organizations.
-
-### Hooks for User Interaction
-
-To facilitate the development of social features, the library also includes custom hooks and contexts that abstract away complex logic.
-
-*   **`useFollow` hook**: This hook manages the complete logic for following and unfollowing other users. It handles the API requests and state changes, returning the current follow status (`followed`) and functions to `followUser` and `unfollowUser`.
-*   **`UserFollowersProvider` context**: For applications where follow status needs to be accessible across multiple components, this provider wraps a section of your component tree and makes the follow state and actions available via the `useUserFollowersContext` hook.
-
-## Summary
-
-This suite of components provides the necessary building blocks for robust user management in any application built with the library. By using these components, you can accelerate development and ensure your application follows best practices for user account management and security.
-
-For detailed implementation guides, please proceed to the specific component documentation.
-
-*   **Next:** [UserCenter](./components-user-management-user-center.md)
-*   **See Also:** [UserSessions](./components-user-management-user-sessions.md)

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

@@ -1,49 +0,0 @@
-# 使用者管理
-
-使用者管理套件提供了一系列預先建置的 React 元件，專為處理基本的使用者相關功能而設計。這些元件簡化了在您的應用程式中實現使用者個人資料、會話管理和組織切換的過程，確保提供一致且可靠的使用者體驗。
-
-本節概述了此套件中可用的主要元件。有關詳細的實作指南和 API 參考，請參閱下方連結的特定元件文件。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![User Management](assets/diagram/user-management-diagram-0.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 核心元件
-
-此套件由幾個關鍵元件組成，每個元件都處理使用者管理的特定方面。
-
-<x-cards>
-  <x-card data-title="UserCenter" data-icon="lucide:user-cog" data-href="/components/user-management/user-center">
-    一個用於顯示和管理使用者個人資料的全面元件。它包含處理使用者設定、通行證管理以及如追蹤其他使用者等社交互動的功能。
-  </x-card>
-  <x-card data-title="UserSessions" data-icon="lucide:smartphone-nfc" data-href="/components/user-management/user-sessions">
-    一個注重安全性的元件，允許使用者查看和管理他們在不同裝置上的有效和過去的登入會話，從而增強帳戶安全性。
-  </x-card>
-</x-cards>
-
-### 組織切換
-
-`OrgsSwitch` 元件為屬於多個組織的使用者提供了一個下拉式選單介面。它允許無縫的情境切換，這對於具有團隊或多租戶功能的應用程式至關重要。
-
-**主要功能：**
-
-*   **目前組織顯示：**清楚地顯示使用者目前的組織情境。
-*   **組織列表：**列出使用者可以切換的所有可用組織，並具備無限滾動功能以提升效能。
-*   **搜尋功能：**包含一個搜尋欄，可快速篩選和尋找特定組織。
-*   **建立與導覽：**提供建立新組織的選項，以及一個連結到管理所有組織的專屬頁面。
-
-### 用於使用者互動的 Hooks
-
-為方便開發社交功能，此函式庫還包含自訂的 hooks 和 contexts，用以抽象化複雜的邏輯。
-
-*   **`useFollow` hook**：此 hook 管理追蹤和取消追蹤其他使用者的完整邏輯。它處理 API 請求和狀態變更，並返回目前的追蹤狀態（`followed`）以及 `followUser` 和 `unfollowUser` 函式。
-*   **`UserFollowersProvider` context**：對於需要在多個元件中存取追蹤狀態的應用程式，此提供者會包覆您的元件樹的一部分，並透過 `useUserFollowersContext` hook 提供追蹤狀態和操作。
-
-## 總結
-
-這套元件為任何使用此函式庫建置的應用程式提供了強健使用者管理的必要建構區塊。透過使用這些元件，您可以加速開發，並確保您的應用程式遵循使用者帳戶管理和安全性的最佳實踐。
-
-有關詳細的實作指南，請繼續參閱特定元件的文件。
-
-*   **下一步：** [UserCenter](./components-user-management-user-center.md)
-*   **另請參閱：** [UserSessions](./components-user-management-user-sessions.md)