@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 的結構和品牌，而元件會相應地進行調整。
主要特色
- 元資料驅動： 使用您在
blocklet.yml中定義的 blocklet 名稱、標誌和導覽結構，自動設定Header和Footer等元件。 - 整合式階段作業管理： 元件與 DID Connect 階段作業無縫整合，自動顯示使用者個人資料資訊、階段作業控制，以及基於角色的導覽連結存取權限。
- 響應式佈局： 包含強大的佈局元件，如
Dashboard，可立即為管理介面提供響應式結構。 - 元件管理： 提供
ComponentInstaller和BlockletStudio等工具，以協助在 Blocklet 生態系統中管理相依性和資源。
核心元件
此程式庫分為幾個關鍵模組，每個模組處理應用程式 UI 的特定領域。
佈局
構成 blocklet 應用程式主要結構的核心元件，如 Header、Footer 和 Dashboard。
使用者管理
一套用於處理使用者個人資料、階段作業管理和組織切換的元件。
元件管理
用於在應用程式內動態安裝、發布和管理 blocklet 元件的工具。
公用程式
一系列輔助元件和公用程式，例如多功能的圖示元件和主題提供者。
總結
透過利用 @blocklet/ui-react 程式庫，您可以大幅縮短開發時間，並專注於應用程式的獨特功能。由元資料驅動的方法確保了一致性，並簡化了通用 UI 元素的管理。
要開始建構您的應用程式，請參閱 入門指南，以取得安裝程式庫和渲染第一個元件的逐步教學。