# 概覽

`@blocklet/ui-react` 程式庫提供了一系列必要的 React 元件，旨在加速應用程式（稱為 Blocklet）的開發。它透過智慧地使用 blocklet 的元資料，簡化了通用使用者介面元素的建立過程，讓開發者能以最少的精力建構出一致且功能豐富的使用者介面。

此程式庫建構於 `@arcblock/ux` 之上，後者是 Material-UI 的主題化擴充。這個基礎確保了所有元件都堅固、易於存取且易於自訂，以符合您應用程式的品牌形象。

## 解決的問題

現代 Web 應用程式通常需要一套標準的 UI 元件來進行佈局、使用者管理和通知。為每個專案從頭開始實作這些元件既耗時又可能導致不一致。Blocklet UI React 程式庫透過提供預先建構的元件來解決此問題，這些元件會根據您的 blocklet 元資料（`blocklet.yml`）自動進行設定。

這種由元資料驅動的方法意味著，諸如您應用程式的名稱、標誌、導覽連結和主題顏色等元素會自動應用於所有元件，從而大幅減少樣板程式碼並確保品牌一致性。

## 核心架構

此程式庫的架構設計旨在簡潔與自動化。當 `Header` 或 `Footer` 等元件被渲染時，它會從 `window.blocklet` 物件中讀取設定資料，該物件由 Blocklet Server 從您的 `blocklet.yml` 檔案中填入。這讓您可以在一個中央設定檔中定義 UI 的結構和品牌，而元件會相應地進行調整。

<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
![Overview](assets/diagram/overview-diagram-0.zh-TW.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 主要特色

-   **元資料驅動：** 使用您在 `blocklet.yml` 中定義的 blocklet 名稱、標誌和導覽結構，自動設定 `Header` 和 `Footer` 等元件。
-   **整合式階段作業管理：** 元件與 DID Connect 階段作業無縫整合，自動顯示使用者個人資料資訊、階段作業控制，以及基於角色的導覽連結存取權限。
-   **響應式佈局：** 包含強大的佈局元件，如 `Dashboard`，可立即為管理介面提供響應式結構。
-   **元件管理：** 提供 `ComponentInstaller` 和 `BlockletStudio` 等工具，以協助在 Blocklet 生態系統中管理相依性和資源。

## 核心元件

此程式庫分為幾個關鍵模組，每個模組處理應用程式 UI 的特定領域。

<x-cards data-columns="2">
  <x-card data-title="佈局" data-icon="lucide:layout-template" data-href="/components/layout">
    構成 blocklet 應用程式主要結構的核心元件，如 Header、Footer 和 Dashboard。
  </x-card>
  <x-card data-title="使用者管理" data-icon="lucide:users" data-href="/components/user-management">
    一套用於處理使用者個人資料、階段作業管理和組織切換的元件。
  </x-card>
  <x-card data-title="元件管理" data-icon="lucide:box" data-href="/components/component-management">
    用於在應用程式內動態安裝、發布和管理 blocklet 元件的工具。
  </x-card>
  <x-card data-title="公用程式" data-icon="lucide:wrench" data-href="/components/utilities">
    一系列輔助元件和公用程式，例如多功能的圖示元件和主題提供者。
  </x-card>
</x-cards>

## 總結

透過利用 `@blocklet/ui-react` 程式庫，您可以大幅縮短開發時間，並專注於應用程式的獨特功能。由元資料驅動的方法確保了一致性，並簡化了通用 UI 元素的管理。

要開始建構您的應用程式，請參閱 [入門指南](./getting-started.md)，以取得安裝程式庫和渲染第一個元件的逐步教學。