@blocklet/ui-react 3.2.18 → 3.3.0

package/.aigne/doc-smith/history.yaml

@@ -1,4 +1,9 @@
 entries:
+  - timestamp: 2025-12-05T01:32:41.364Z
+    operation: document_update
+    feedback: 使用手绘风格的图表
+    docPaths:
+      - /overview
   - timestamp: 2025-10-10T07:34:02.876Z
     operation: document_update
     feedback: d2 图表的效果不好，请重新生成

package/.aigne/doc-smith/media-description.yaml

@@ -0,0 +1,11 @@
+descriptions:
+  b64f0212be4c7f38dcd4cf260d4af6d23d7f9a011a091361e80b96ddda29e433:
+    path: ../src/UserCenter/assets/banner.png
+    description: This wide, abstract banner image features a dynamic arrangement of
+      numerous 3D cubes, rendered in soft pastel shades of blue, purple, pink,
+      and white, with subtle orange accents. The geometric forms are positioned
+      at varying heights and angles, creating a layered composition with gentle
+      light and shadow effects. This clean, modern graphic is ideal for use as a
+      header, banner, or decorative background in documentation.
+    generatedAt: 2025-12-05T01:26:47.959Z
+lastUpdated: 2025-12-05T01:26:47.963Z

package/docs/components-component-management-component-installer.ja.md

@@ -8,83 +8,9 @@
 
 このコンポーネントのロジックは、子コンポーネントをレンダリングする前に依存関係が満たされていることを確認するため、明確で順次的なプロセスに従います。
 
-```d2
-direction: down
-
-start: {
-  label: "開始"
-  shape: oval
-}
-
-check_dependencies: {
-  label: "'did' プロパティで定義された依存関係を確認"
-  shape: rectangle
-}
-
-is_installed: {
-  label: "すべての依存関係はインストール済みか？"
-  shape: diamond
-}
-
-render_children: {
-  label: "子コンポーネントをレンダリング"
-  shape: rectangle
-  style.fill: "#d4edda"
-}
-
-check_permission: {
-  label: "'roles' プロパティに対してユーザーのロールを確認"
-  shape: rectangle
-}
-
-has_permission: {
-  label: "ユーザーに権限があるか？"
-  shape: diamond
-}
-
-display_installer: {
-  label: "インストーラーUIを表示"
-  shape: rectangle
-  style.fill: "#cce5ff"
-}
-
-is_mute: {
-  label: "'noPermissionMute' プロパティは true か？"
-  shape: diamond
-}
-
-display_suggestion: {
-  label: "'管理者に連絡' の提案を表示"
-  shape: rectangle
-  style.fill: "#f8d7da"
-}
-
-render_fallback: {
-  label: "フォールバックコンポーネントまたは null をレンダリング"
-  shape: rectangle
-}
-
-end: {
-  label: "終了"
-  shape: oval
-}
-
-start -> check_dependencies
-check_dependencies -> is_installed
-is_installed -> render_children: "はい"
-is_installed -> check_permission: "いいえ"
-render_children -> end
-
-check_permission -> has_permission
-has_permission -> display_installer: "はい"
-has_permission -> is_mute: "いいえ"
-display_installer -> end
-
-is_mute -> render_fallback: "はい"
-is_mute -> display_suggestion: "いいえ"
-render_fallback -> end
-display_suggestion -> end
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![ComponentInstaller](assets/diagram/component-installer-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 1.  **依存関係のチェック**: `did` プロパティを読み取り、Blocklet のメタデータ（`window.blocklet.optionalComponents`）と照合して、必要なコンポーネントがインストールされているかどうかを判断します。
 2.  **権限チェック**: 不足しているコンポーネントがある場合、`SessionPermission` コンポーネントを使用して、現在のユーザーのロールが `roles` プロパティで指定されたものと一致するかどうかを検証します。

package/docs/components-component-management-component-installer.md

@@ -8,83 +8,9 @@ This component is essential for creating robust applications that can gracefully
 
 The component's logic follows a clear, sequential process to ensure dependencies are met before rendering its child components.
 
-```d2
-direction: down
-
-start: {
-  label: "Start"
-  shape: oval
-}
-
-check_dependencies: {
-  label: "Check dependencies defined in 'did' prop"
-  shape: rectangle
-}
-
-is_installed: {
-  label: "Are all dependencies installed?"
-  shape: diamond
-}
-
-render_children: {
-  label: "Render child components"
-  shape: rectangle
-  style.fill: "#d4edda"
-}
-
-check_permission: {
-  label: "Check user's role against 'roles' prop"
-  shape: rectangle
-}
-
-has_permission: {
-  label: "Does user have permission?"
-  shape: diamond
-}
-
-display_installer: {
-  label: "Display Installer UI"
-  shape: rectangle
-  style.fill: "#cce5ff"
-}
-
-is_mute: {
-  label: "Is 'noPermissionMute' prop true?"
-  shape: diamond
-}
-
-display_suggestion: {
-  label: "Display 'Contact Admin' suggestion"
-  shape: rectangle
-  style.fill: "#f8d7da"
-}
-
-render_fallback: {
-  label: "Render fallback component or null"
-  shape: rectangle
-}
-
-end: {
-  label: "End"
-  shape: oval
-}
-
-start -> check_dependencies
-check_dependencies -> is_installed
-is_installed -> render_children: "Yes"
-is_installed -> check_permission: "No"
-render_children -> end
-
-check_permission -> has_permission
-has_permission -> display_installer: "Yes"
-has_permission -> is_mute: "No"
-display_installer -> end
-
-is_mute -> render_fallback: "Yes"
-is_mute -> display_suggestion: "No"
-render_fallback -> end
-display_suggestion -> end
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![ComponentInstaller](assets/diagram/component-installer-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 1.  **Dependency Check**: It reads the `did` prop and checks against the blocklet's metadata (`window.blocklet.optionalComponents`) to determine if the required components are installed.
 2.  **Permission Check**: If any components are missing, it uses the `SessionPermission` component to verify if the current user's role matches those specified in the `roles` prop.
@@ -253,4 +179,4 @@ export default function CustomInstallerButton() {
 
 The `ComponentInstaller` is a powerful component for managing optional dependencies within a blocklet application. It provides a structured and user-friendly way to ensure that required components are available, guiding administrators through the installation process when necessary. By using this component, you can build more resilient and feature-rich applications that adapt to the user's environment.
 
-For further details on managing components, you may also be interested in the [BlockletStudio](./components-component-management-blocklet-studio.md) component, which offers a more comprehensive interface for resource and component management.
+For further details on managing components, you may also be interested in the [BlockletStudio](./components-component-management-blocklet-studio.md) component, which offers a more comprehensive interface for resource and component management.

package/docs/components-component-management-component-installer.zh-TW.md

@@ -8,83 +8,9 @@
 
 該元件的邏輯遵循一個清晰的順序流程，以確保在渲染其子元件之前滿足所有相依性。
 
-```d2
-direction: down
-
-start: {
-  label: "開始"
-  shape: oval
-}
-
-check_dependencies: {
-  label: "檢查 'did' prop 中定義的相依性"
-  shape: rectangle
-}
-
-is_installed: {
-  label: "是否所有相依性都已安裝？"
-  shape: diamond
-}
-
-render_children: {
-  label: "渲染子元件"
-  shape: rectangle
-  style.fill: "#d4edda"
-}
-
-check_permission: {
-  label: "根據 'roles' prop 檢查使用者角色"
-  shape: rectangle
-}
-
-has_permission: {
-  label: "使用者是否有權限？"
-  shape: diamond
-}
-
-display_installer: {
-  label: "顯示安裝程式 UI"
-  shape: rectangle
-  style.fill: "#cce5ff"
-}
-
-is_mute: {
-  label: "'noPermissionMute' prop 是否為 true？"
-  shape: diamond
-}
-
-display_suggestion: {
-  label: "顯示『聯絡管理員』建議"
-  shape: rectangle
-  style.fill: "#f8d7da"
-}
-
-render_fallback: {
-  label: "渲染備用元件或 null"
-  shape: rectangle
-}
-
-end: {
-  label: "結束"
-  shape: oval
-}
-
-start -> check_dependencies
-check_dependencies -> is_installed
-is_installed -> render_children: "是"
-is_installed -> check_permission: "否"
-render_children -> end
-
-check_permission -> has_permission
-has_permission -> display_installer: "是"
-has_permission -> is_mute: "否"
-display_installer -> end
-
-is_mute -> render_fallback: "是"
-is_mute -> display_suggestion: "否"
-render_fallback -> end
-display_suggestion -> end
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![ComponentInstaller](assets/diagram/component-installer-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 1.  **相依性檢查**：它會讀取 `did` prop，並對照 blocklet 的元資料（`window.blocklet.optionalComponents`）進行檢查，以確定所需元件是否已安裝。
 2.  **權限檢查**：如果有任何元件缺失，它會使用 `SessionPermission` 元件來驗證目前使用者的角色是否與 `roles` prop 中指定的角色相符。

package/docs/components-component-management-component-installer.zh.md

@@ -8,83 +8,9 @@
 
 该组件的逻辑遵循一个清晰的顺序流程，以确保在渲染其子组件之前满足依赖关系。
 
-```d2
-direction: down
-
-start: {
-  label: "开始"
-  shape: oval
-}
-
-check_dependencies: {
-  label: "检查在 'did' prop 中定义的依赖项"
-  shape: rectangle
-}
-
-is_installed: {
-  label: "所有依赖项都已安装吗？"
-  shape: diamond
-}
-
-render_children: {
-  label: "渲染子组件"
-  shape: rectangle
-  style.fill: "#d4edda"
-}
-
-check_permission: {
-  label: "根据 'roles' prop 检查用户角色"
-  shape: rectangle
-}
-
-has_permission: {
-  label: "用户有权限吗？"
-  shape: diamond
-}
-
-display_installer: {
-  label: "显示安装器界面"
-  shape: rectangle
-  style.fill: "#cce5ff"
-}
-
-is_mute: {
-  label: "'noPermissionMute' prop 是否为 true？"
-  shape: diamond
-}
-
-display_suggestion: {
-  label: "显示“联系管理员”建议"
-  shape: rectangle
-  style.fill: "#f8d7da"
-}
-
-render_fallback: {
-  label: "渲染回退组件或 null"
-  shape: rectangle
-}
-
-end: {
-  label: "结束"
-  shape: oval
-}
-
-start -> check_dependencies
-check_dependencies -> is_installed
-is_installed -> render_children: "是"
-is_installed -> check_permission: "否"
-render_children -> end
-
-check_permission -> has_permission
-has_permission -> display_installer: "是"
-has_permission -> is_mute: "否"
-display_installer -> end
-
-is_mute -> render_fallback: "是"
-is_mute -> display_suggestion: "否"
-render_fallback -> end
-display_suggestion -> end
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![ComponentInstaller](assets/diagram/component-installer-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 1.  **依赖检查**：它读取 `did` prop，并与 blocklet 的元数据（`window.blocklet.optionalComponents`）进行核对，以确定所需的组件是否已安装。
 2.  **权限检查**：如果缺少任何组件，它会使用 `SessionPermission` 组件来验证当前用户的角色是否与 `roles` prop 中指定的角色匹配。

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

@@ -6,38 +6,9 @@
 
 このライフサイクルを管理するための主要なコンポーネントは `ComponentInstaller` と `BlockletStudio` です。
 
-```d2
-direction: down
-
-Application: {
-  label: "メインアプリケーション"
-  shape: rectangle
-  style.fill: "#f0f7ff"
-}
-
-Blocklet-Components: {
-  label: "Blocklet コンポーネント"
-  shape: rectangle
-  style.fill: "#f6ffed"
-  style.stroke-dash: 2
-}
-
-ComponentInstaller: {
-  label: "ComponentInstaller"
-  shape: rectangle
-  style.fill: "#fff7e6"
-}
-
-BlockletStudio: {
-  label: "BlockletStudio"
-  shape: rectangle
-  style.fill: "#fff1f0"
-}
-
-Application -> Blocklet-Components: "依存/使用"
-ComponentInstaller -> Blocklet-Components: "インストール & 検証"
-BlockletStudio -> Blocklet-Components: "公開 & 管理"
-```
+<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
+![Component Management](assets/diagram/component-management-diagram-0.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## コアツール
 

package/docs/components-component-management.md

@@ -6,38 +6,9 @@ These tools are essential for creating flexible systems where functionality can
 
 The primary components for managing this lifecycle are `ComponentInstaller` and `BlockletStudio`.
 
-```d2
-direction: down
-
-Application: {
-  label: "Main Application"
-  shape: rectangle
-  style.fill: "#f0f7ff"
-}
-
-Blocklet-Components: {
-  label: "Blocklet Components"
-  shape: rectangle
-  style.fill: "#f6ffed"
-  style.stroke-dash: 2
-}
-
-ComponentInstaller: {
-  label: "ComponentInstaller"
-  shape: rectangle
-  style.fill: "#fff7e6"
-}
-
-BlockletStudio: {
-  label: "BlockletStudio"
-  shape: rectangle
-  style.fill: "#fff1f0"
-}
-
-Application -> Blocklet-Components: "Depends on / Uses"
-ComponentInstaller -> Blocklet-Components: "Installs & Verifies"
-BlockletStudio -> Blocklet-Components: "Publishes & Manages"
-```
+<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
+![Component Management](assets/diagram/component-management-diagram-0.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Core Tools
 

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

@@ -6,38 +6,9 @@
 
 管理此生命週期的主要組件是 `ComponentInstaller` 和 `BlockletStudio`。
 
-```d2
-direction: down
-
-Application: {
-  label: "主應用程式"
-  shape: rectangle
-  style.fill: "#f0f7ff"
-}
-
-Blocklet-Components: {
-  label: "Blocklet 組件"
-  shape: rectangle
-  style.fill: "#f6ffed"
-  style.stroke-dash: 2
-}
-
-ComponentInstaller: {
-  label: "ComponentInstaller"
-  shape: rectangle
-  style.fill: "#fff7e6"
-}
-
-BlockletStudio: {
-  label: "BlockletStudio"
-  shape: rectangle
-  style.fill: "#fff1f0"
-}
-
-Application -> Blocklet-Components: "依賴 / 使用"
-ComponentInstaller -> Blocklet-Components: "安裝與驗證"
-BlockletStudio -> Blocklet-Components: "發布與管理"
-```
+<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
+![Component Management](assets/diagram/component-management-diagram-0.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心工具
 

package/docs/components-component-management.zh.md

@@ -6,38 +6,9 @@
 
 管理此生命周期的主要组件是 `ComponentInstaller` 和 `BlockletStudio`。
 
-```d2
-direction: down
-
-Application: {
-  label: "主应用程序"
-  shape: rectangle
-  style.fill: "#f0f7ff"
-}
-
-Blocklet-Components: {
-  label: "Blocklet 组件"
-  shape: rectangle
-  style.fill: "#f6ffed"
-  style.stroke-dash: 2
-}
-
-ComponentInstaller: {
-  label: "ComponentInstaller"
-  shape: rectangle
-  style.fill: "#fff7e6"
-}
-
-BlockletStudio: {
-  label: "BlockletStudio"
-  shape: rectangle
-  style.fill: "#fff1f0"
-}
-
-Application -> Blocklet-Components: "依赖/使用"
-ComponentInstaller -> Blocklet-Components: "安装与验证"
-BlockletStudio -> Blocklet-Components: "发布与管理"
-```
+<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
+![Component Management](assets/diagram/component-management-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 核心工具