@blocklet/ui-react
Version:
Some useful front-end web components that can be used in Blocklets.
51 lines (35 loc) • 3.64 kB
Markdown
# 概覽
`@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 -->
<!-- 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)，以取得安裝程式庫和渲染第一個元件的逐步教學。