@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
49 lines (32 loc) • 3.09 kB
Markdown
# 使用者管理
使用者管理套件提供了一系列預先建置的 React 元件，專為處理基本的使用者相關功能而設計。這些元件簡化了在您的應用程式中實現使用者個人資料、會話管理和組織切換的過程，確保提供一致且可靠的使用者體驗。
本節概述了此套件中可用的主要元件。有關詳細的實作指南和 API 參考，請參閱下方連結的特定元件文件。
<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
<!-- 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)