@blocklet/ui-react 3.4.15 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/common/org-switch/use-org.d.ts +4 -4
- package/package.json +9 -6
- package/.aigne/doc-smith/.local/afs-storage.sqlite3 +0 -0
- package/.aigne/doc-smith/config.yaml +0 -78
- package/.aigne/doc-smith/history.yaml +0 -14
- package/.aigne/doc-smith/media-description.yaml +0 -11
- package/.aigne/doc-smith/output/structure-plan.json +0 -255
- package/.aigne/doc-smith/translation-cache.yaml +0 -11
- package/.aigne/doc-smith/upload-cache.yaml +0 -528
- package/build.config.ts +0 -24
- package/docs/_sidebar.md +0 -19
- package/docs/assets/diagram/component-installer-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/component-installer-diagram-0.jpg +0 -0
- package/docs/assets/diagram/component-installer-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/component-installer-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/component-management-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/component-management-diagram-0.jpg +0 -0
- package/docs/assets/diagram/component-management-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/component-management-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/core-concepts-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/core-concepts-diagram-0.jpg +0 -0
- package/docs/assets/diagram/core-concepts-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/core-concepts-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/dashboard-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/dashboard-diagram-0.jpg +0 -0
- package/docs/assets/diagram/dashboard-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/dashboard-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/header-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/header-diagram-0.jpg +0 -0
- package/docs/assets/diagram/header-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/header-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/layout-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/layout-diagram-0.jpg +0 -0
- package/docs/assets/diagram/layout-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/layout-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/notifications-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/notifications-diagram-0.jpg +0 -0
- package/docs/assets/diagram/notifications-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/notifications-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/overview-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/overview-diagram-0.jpg +0 -0
- package/docs/assets/diagram/overview-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/overview-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/user-center-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/user-center-diagram-0.jpg +0 -0
- package/docs/assets/diagram/user-center-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/user-center-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/user-management-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/user-management-diagram-0.jpg +0 -0
- package/docs/assets/diagram/user-management-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/user-management-diagram-0.zh.jpg +0 -0
- package/docs/assets/diagram/user-sessions-diagram-0.ja.jpg +0 -0
- package/docs/assets/diagram/user-sessions-diagram-0.jpg +0 -0
- package/docs/assets/diagram/user-sessions-diagram-0.zh-TW.jpg +0 -0
- package/docs/assets/diagram/user-sessions-diagram-0.zh.jpg +0 -0
- package/docs/components-component-management-blocklet-studio.ja.md +0 -194
- package/docs/components-component-management-blocklet-studio.md +0 -194
- package/docs/components-component-management-blocklet-studio.zh-TW.md +0 -194
- package/docs/components-component-management-blocklet-studio.zh.md +0 -194
- package/docs/components-component-management-component-installer.ja.md +0 -182
- package/docs/components-component-management-component-installer.md +0 -182
- package/docs/components-component-management-component-installer.zh-TW.md +0 -182
- package/docs/components-component-management-component-installer.zh.md +0 -182
- package/docs/components-component-management.ja.md +0 -30
- package/docs/components-component-management.md +0 -30
- package/docs/components-component-management.zh-TW.md +0 -30
- package/docs/components-component-management.zh.md +0 -30
- package/docs/components-layout-dashboard.ja.md +0 -185
- package/docs/components-layout-dashboard.md +0 -187
- package/docs/components-layout-dashboard.zh-TW.md +0 -185
- package/docs/components-layout-dashboard.zh.md +0 -185
- package/docs/components-layout-footer.ja.md +0 -165
- package/docs/components-layout-footer.md +0 -165
- package/docs/components-layout-footer.zh-TW.md +0 -165
- package/docs/components-layout-footer.zh.md +0 -165
- package/docs/components-layout-header.ja.md +0 -183
- package/docs/components-layout-header.md +0 -183
- package/docs/components-layout-header.zh-TW.md +0 -183
- package/docs/components-layout-header.zh.md +0 -183
- package/docs/components-layout.ja.md +0 -31
- package/docs/components-layout.md +0 -31
- package/docs/components-layout.zh-TW.md +0 -31
- package/docs/components-layout.zh.md +0 -31
- package/docs/components-notifications.ja.md +0 -125
- package/docs/components-notifications.md +0 -125
- package/docs/components-notifications.zh-TW.md +0 -125
- package/docs/components-notifications.zh.md +0 -125
- package/docs/components-user-management-user-center.ja.md +0 -148
- package/docs/components-user-management-user-center.md +0 -147
- package/docs/components-user-management-user-center.zh-TW.md +0 -148
- package/docs/components-user-management-user-center.zh.md +0 -148
- package/docs/components-user-management-user-sessions.ja.md +0 -121
- package/docs/components-user-management-user-sessions.md +0 -123
- package/docs/components-user-management-user-sessions.zh-TW.md +0 -121
- package/docs/components-user-management-user-sessions.zh.md +0 -121
- package/docs/components-user-management.ja.md +0 -49
- package/docs/components-user-management.md +0 -51
- package/docs/components-user-management.zh-TW.md +0 -49
- package/docs/components-user-management.zh.md +0 -49
- package/docs/components-utilities-icon.ja.md +0 -106
- package/docs/components-utilities-icon.md +0 -106
- package/docs/components-utilities-icon.zh-TW.md +0 -106
- package/docs/components-utilities-icon.zh.md +0 -106
- package/docs/components-utilities.ja.md +0 -136
- package/docs/components-utilities.md +0 -136
- package/docs/components-utilities.zh-TW.md +0 -136
- package/docs/components-utilities.zh.md +0 -136
- package/docs/components.ja.md +0 -27
- package/docs/components.md +0 -27
- package/docs/components.zh-TW.md +0 -27
- package/docs/components.zh.md +0 -27
- package/docs/core-concepts.ja.md +0 -134
- package/docs/core-concepts.md +0 -135
- package/docs/core-concepts.zh-TW.md +0 -134
- package/docs/core-concepts.zh.md +0 -134
- package/docs/getting-started.ja.md +0 -132
- package/docs/getting-started.md +0 -132
- package/docs/getting-started.zh-TW.md +0 -132
- package/docs/getting-started.zh.md +0 -132
- package/docs/hooks-api.ja.md +0 -214
- package/docs/hooks-api.md +0 -214
- package/docs/hooks-api.zh-TW.md +0 -214
- package/docs/hooks-api.zh.md +0 -214
- package/docs/how-to-guides.ja.md +0 -413
- package/docs/how-to-guides.md +0 -413
- package/docs/how-to-guides.zh-TW.md +0 -413
- package/docs/how-to-guides.zh.md +0 -413
- package/docs/overview.ja.md +0 -51
- package/docs/overview.md +0 -51
- package/docs/overview.zh-TW.md +0 -51
- package/docs/overview.zh.md +0 -51
- package/glossary.md +0 -12
- package/src/@types/index.ts +0 -230
- package/src/@types/shims.d.ts +0 -18
- package/src/BlockletStudio/README.md +0 -116
- package/src/BlockletStudio/index.tsx +0 -145
- package/src/ComponentInstaller/ComponentInstaller.stories.jsx +0 -16
- package/src/ComponentInstaller/index.jsx +0 -207
- package/src/ComponentInstaller/installer-item.jsx +0 -129
- package/src/ComponentInstaller/locales.js +0 -22
- package/src/ComponentInstaller/use-component-installed.js +0 -88
- package/src/ComponentManager/components/add-component.tsx +0 -136
- package/src/ComponentManager/components/check-component.tsx +0 -3
- package/src/ComponentManager/components/publish-component.tsx +0 -90
- package/src/ComponentManager/components/resource-dialog.tsx +0 -91
- package/src/ComponentManager/index.tsx +0 -3
- package/src/ComponentManager/libs/locales.ts +0 -15
- package/src/Dashboard/Dashboard.stories.jsx +0 -20
- package/src/Dashboard/app-shell/app-badge.stories.tsx +0 -64
- package/src/Dashboard/app-shell/app-badge.tsx +0 -94
- package/src/Dashboard/app-shell/app-header.tsx +0 -104
- package/src/Dashboard/app-shell/app-info-context.tsx +0 -182
- package/src/Dashboard/app-shell/badges/app-badge-default.tsx +0 -130
- package/src/Dashboard/app-shell/badges/app-badge-did.tsx +0 -28
- package/src/Dashboard/app-shell/badges/app-badge-state.tsx +0 -40
- package/src/Dashboard/app-shell/badges/app-badge-switch.tsx +0 -72
- package/src/Dashboard/app-shell/badges/app-badge-version.tsx +0 -60
- package/src/Dashboard/app-shell/index.ts +0 -5
- package/src/Dashboard/index.jsx +0 -184
- package/src/Footer/Footer.stories.jsx +0 -33
- package/src/Footer/brand.jsx +0 -81
- package/src/Footer/copyright.jsx +0 -22
- package/src/Footer/index.jsx +0 -111
- package/src/Footer/internal-footer.jsx +0 -139
- package/src/Footer/layout/plain.jsx +0 -55
- package/src/Footer/layout/row.jsx +0 -43
- package/src/Footer/layout/standard.jsx +0 -114
- package/src/Footer/links.jsx +0 -321
- package/src/Footer/social-media.jsx +0 -55
- package/src/Header/Header.stories.jsx +0 -30
- package/src/Header/index.tsx +0 -259
- package/src/Icon/Icon.stories.jsx +0 -12
- package/src/Icon/index.tsx +0 -87
- package/src/Notifications/Snackbar.tsx +0 -261
- package/src/Notifications/hooks/use-title.tsx +0 -254
- package/src/Notifications/hooks/use-width.tsx +0 -16
- package/src/Notifications/utils.ts +0 -246
- package/src/UserCenter/assets/banner.png +0 -0
- package/src/UserCenter/components/config-inviter.tsx +0 -48
- package/src/UserCenter/components/config-profile.tsx +0 -99
- package/src/UserCenter/components/danger-zone.tsx +0 -82
- package/src/UserCenter/components/editable-field.tsx +0 -273
- package/src/UserCenter/components/fallback.tsx +0 -57
- package/src/UserCenter/components/nft-preview.tsx +0 -84
- package/src/UserCenter/components/nft.tsx +0 -279
- package/src/UserCenter/components/notification.tsx +0 -319
- package/src/UserCenter/components/passport.tsx +0 -107
- package/src/UserCenter/components/privacy.tsx +0 -120
- package/src/UserCenter/components/settings.tsx +0 -170
- package/src/UserCenter/components/status-dialog/date-picker.tsx +0 -77
- package/src/UserCenter/components/status-dialog/index.tsx +0 -293
- package/src/UserCenter/components/status-selector/duration-menu.tsx +0 -90
- package/src/UserCenter/components/status-selector/index.tsx +0 -58
- package/src/UserCenter/components/status-selector/menu-item.tsx +0 -56
- package/src/UserCenter/components/storage/action.tsx +0 -49
- package/src/UserCenter/components/storage/connected.tsx +0 -61
- package/src/UserCenter/components/storage/delete.tsx +0 -72
- package/src/UserCenter/components/storage/disconnect.tsx +0 -40
- package/src/UserCenter/components/storage/icons/empty-spaces-nft.svg +0 -1
- package/src/UserCenter/components/storage/icons/long-arrow.svg +0 -5
- package/src/UserCenter/components/storage/icons/space-connected.svg +0 -3
- package/src/UserCenter/components/storage/icons/space-disconnect.svg +0 -3
- package/src/UserCenter/components/storage/index.tsx +0 -41
- package/src/UserCenter/components/storage/preview-nft.tsx +0 -72
- package/src/UserCenter/components/third-party-login/index.tsx +0 -199
- package/src/UserCenter/components/third-party-login/third-party-item.tsx +0 -296
- package/src/UserCenter/components/user-center.tsx +0 -787
- package/src/UserCenter/components/user-info/address.tsx +0 -143
- package/src/UserCenter/components/user-info/index.tsx +0 -4
- package/src/UserCenter/components/user-info/link-preview-input.tsx +0 -274
- package/src/UserCenter/components/user-info/metadata.tsx +0 -658
- package/src/UserCenter/components/user-info/social-actions/chat.tsx +0 -43
- package/src/UserCenter/components/user-info/social-actions/follow.tsx +0 -23
- package/src/UserCenter/components/user-info/social-actions/index.tsx +0 -17
- package/src/UserCenter/components/user-info/switch-role.tsx +0 -42
- package/src/UserCenter/components/user-info/timezone-select.tsx +0 -119
- package/src/UserCenter/components/user-info/user-basic-info.tsx +0 -292
- package/src/UserCenter/components/user-info/user-info-item.tsx +0 -54
- package/src/UserCenter/components/user-info/user-info.tsx +0 -91
- package/src/UserCenter/components/user-info/user-status.tsx +0 -234
- package/src/UserCenter/components/user-info/utils.ts +0 -320
- package/src/UserCenter/components/webhook-item.tsx +0 -248
- package/src/UserCenter/index.tsx +0 -1
- package/src/UserCenter/libs/locales.ts +0 -378
- package/src/UserCenter/libs/utils.ts +0 -30
- package/src/UserSessions/components/user-session-info.tsx +0 -78
- package/src/UserSessions/components/user-sessions.tsx +0 -545
- package/src/UserSessions/index.tsx +0 -1
- package/src/UserSessions/libs/locales.ts +0 -60
- package/src/UserSessions/libs/utils.ts +0 -82
- package/src/blocklets.js +0 -195
- package/src/common/domain-warning.jsx +0 -178
- package/src/common/header-addons.jsx +0 -119
- package/src/common/link-blocker.jsx +0 -20
- package/src/common/notification-addon.jsx +0 -135
- package/src/common/org-switch/avatar-uploader.jsx +0 -271
- package/src/common/org-switch/create.jsx +0 -267
- package/src/common/org-switch/index.jsx +0 -407
- package/src/common/org-switch/locales.js +0 -52
- package/src/common/org-switch/use-org.jsx +0 -79
- package/src/common/overridable-theme-provider.jsx +0 -17
- package/src/common/wallet-hidden-topbar.js +0 -14
- package/src/common/wizard-modal.jsx +0 -200
- package/src/common/ws.js +0 -68
- package/src/contexts/config-user-space.tsx +0 -88
- package/src/contexts/user-followers.tsx +0 -54
- package/src/hooks/use-follow.tsx +0 -75
- package/src/hooks/use-mobile.tsx +0 -6
- package/src/index.ts +0 -16
- package/src/libs/constant.ts +0 -1
- package/src/libs/spaces.tsx +0 -18
- package/src/libs/with-hide-when-embed.tsx +0 -24
- package/src/types.js +0 -45
- package/src/utils.js +0 -161
- package/vite.config.mjs +0 -34
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
# ComponentInstaller
|
|
2
|
-
|
|
3
|
-
`ComponentInstaller` 是一個實用工具元件,對於依賴其他 blocklet 的功能扮演著守門員的角色。它會驗證指定的元件相依性是否已安裝。如果尚未安裝,它會為管理員(預設為 `owner` 或 `admin` 角色)提供一個使用者友善的介面,讓他們可以直接安裝。如果使用者缺乏必要的權限,它會顯示一則訊息,建議他們聯絡管理員。
|
|
4
|
-
|
|
5
|
-
此元件對於建立穩健的應用程式至關重要,能夠優雅地處理缺失的選用相依性,並透過引導管理員完成安裝過程來改善使用者體驗。
|
|
6
|
-
|
|
7
|
-
## 運作方式
|
|
8
|
-
|
|
9
|
-
該元件的邏輯遵循一個清晰的順序流程,以確保在渲染其子元件之前滿足所有相依性。
|
|
10
|
-
|
|
11
|
-
<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
|
|
12
|
-

|
|
13
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
14
|
-
|
|
15
|
-
1. **相依性檢查**:它會讀取 `did` prop,並對照 blocklet 的元資料(`window.blocklet.optionalComponents`)進行檢查,以確定所需元件是否已安裝。
|
|
16
|
-
2. **權限檢查**:如果有任何元件缺失,它會使用 `SessionPermission` 元件來驗證目前使用者的角色是否與 `roles` prop 中指定的角色相符。
|
|
17
|
-
3. **條件式渲染**:
|
|
18
|
-
* 如果所有相依性都已安裝,它會渲染其 `children`。
|
|
19
|
-
* 如果相依性缺失且使用者擁有權限,它會顯示一個彈出式安裝面板。
|
|
20
|
-
* 如果相依性缺失且使用者缺乏權限,它會顯示聯絡管理員的建議,或者在啟用 `noPermissionMute` 的情況下渲染一個 `fallback` 元件。
|
|
21
|
-
|
|
22
|
-
## 基本用法
|
|
23
|
-
|
|
24
|
-
將任何依賴選用 blocklet 的元件或功能用 `ComponentInstaller` 包裹起來。提供所需元件的 DID。
|
|
25
|
-
|
|
26
|
-
```jsx "MyFeature.jsx" icon=logos:react
|
|
27
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
28
|
-
import MyDependentComponent from './MyDependentComponent';
|
|
29
|
-
|
|
30
|
-
export default function MyFeature() {
|
|
31
|
-
// 請替換為所需元件的實際 DID
|
|
32
|
-
const requiredComponentDid = 'z8ia2427634f1e909a304e2b963715a18';
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<ComponentInstaller did={requiredComponentDid}>
|
|
36
|
-
{/* 只有在滿足相依性條件時,此元件才會被渲染 */}
|
|
37
|
-
<MyDependentComponent />
|
|
38
|
-
</ComponentInstaller>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## 屬性 (Props)
|
|
44
|
-
|
|
45
|
-
`ComponentInstaller` 接受以下屬性 (props) 來自訂其行為。
|
|
46
|
-
|
|
47
|
-
<x-field-group>
|
|
48
|
-
<x-field data-name="did" data-type="string | string[]" data-required="true">
|
|
49
|
-
<x-field-desc markdown>要檢查的元件相依性的 DID (或 DID 陣列)。這是您所需 blocklet 的主要識別碼。</x-field-desc>
|
|
50
|
-
</x-field>
|
|
51
|
-
<x-field data-name="children" data-type="any" data-required="true">
|
|
52
|
-
<x-field-desc markdown>一旦確認所有相依性都已安裝,要渲染的內容。可以是標準的 React 節點或渲染函數。</x-field-desc>
|
|
53
|
-
</x-field>
|
|
54
|
-
<x-field data-name="roles" data-type="string[]" data-default='["owner", "admin"]'>
|
|
55
|
-
<x-field-desc markdown>允許查看安裝 UI 並安裝缺失元件的使用者角色陣列。</x-field-desc>
|
|
56
|
-
</x-field>
|
|
57
|
-
<x-field data-name="fallback" data-type="React.ReactNode" data-required="false">
|
|
58
|
-
<x-field-desc markdown>一個備用元件,用於在檢查相依性期間,或當 `noPermissionMute` 對於沒有安裝權限的使用者啟用時顯示。</x-field-desc>
|
|
59
|
-
</x-field>
|
|
60
|
-
<x-field data-name="noPermissionMute" data-type="boolean" data-default="false">
|
|
61
|
-
<x-field-desc markdown>如果為 `true`,沒有權限的使用者將看到 `fallback` 元件(或什麼都不顯示),而不是「聯絡管理員」的訊息。</x-field-desc>
|
|
62
|
-
</x-field>
|
|
63
|
-
<x-field data-name="disabled" data-type="boolean" data-default="false">
|
|
64
|
-
<x-field-desc markdown>如果為 `true`,該元件會繞過所有檢查並立即渲染其 `children`。</x-field-desc>
|
|
65
|
-
</x-field>
|
|
66
|
-
<x-field data-name="onInstalled" data-type="function" data-required="false">
|
|
67
|
-
<x-field-desc markdown>在相依性檢查完成後觸發的回呼函數。它會接收已安裝元件的列表。</x-field-desc>
|
|
68
|
-
</x-field>
|
|
69
|
-
<x-field data-name="onError" data-type="function" data-required="false">
|
|
70
|
-
<x-field-desc markdown>如果在相依性檢查期間發生錯誤時觸發的回呼函數。它會接收導致錯誤的元件列表。</x-field-desc>
|
|
71
|
-
</x-field>
|
|
72
|
-
<x-field data-name="onClose" data-type="function" data-required="false">
|
|
73
|
-
<x-field-desc markdown>當安裝彈出視窗關閉時調用的回呼函數。</x-field-desc>
|
|
74
|
-
</x-field>
|
|
75
|
-
<x-field data-name="closeByOutSize" data-type="boolean" data-default="false">
|
|
76
|
-
<x-field-desc markdown>如果為 `true`,當使用者點擊安裝彈出視窗外部時,該視窗將會關閉。</x-field-desc>
|
|
77
|
-
</x-field>
|
|
78
|
-
<x-field data-name="warnIcon" data-type="React.ReactNode" data-required="false">
|
|
79
|
-
<x-field-desc markdown>一個自訂的 React 節點,用於替換安裝彈出視窗中的預設警告圖示。</x-field-desc>
|
|
80
|
-
</x-field>
|
|
81
|
-
</x-field-group>
|
|
82
|
-
|
|
83
|
-
## 進階用法
|
|
84
|
-
|
|
85
|
-
### 檢查多個元件
|
|
86
|
-
|
|
87
|
-
您可以將一個 DID 陣列傳遞給 `did` prop,以一次性檢查多個相依性。只有在所有指定的元件都已安裝的情況下,子元件才會被渲染。
|
|
88
|
-
|
|
89
|
-
```jsx "MyDashboard.jsx" icon=logos:react
|
|
90
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
91
|
-
import AnalyticsWidget from './AnalyticsWidget';
|
|
92
|
-
import CmsWidget from './CmsWidget';
|
|
93
|
-
|
|
94
|
-
export default function MyDashboard() {
|
|
95
|
-
const requiredDids = [
|
|
96
|
-
'z8ia2427634f1e909a304e2b963715a18', // 分析服務
|
|
97
|
-
'z8ia3c1f2e4b8e6a1b2c3d4e5f6a7b8c9', // 內容管理系統服務
|
|
98
|
-
];
|
|
99
|
-
|
|
100
|
-
return (
|
|
101
|
-
<ComponentInstaller did={requiredDids}>
|
|
102
|
-
<AnalyticsWidget />
|
|
103
|
-
<CmsWidget />
|
|
104
|
-
</ComponentInstaller>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### 使用備用元件處理載入狀態
|
|
110
|
-
|
|
111
|
-
提供一個 `fallback` 元件,以在相依性檢查進行中時改善使用者體驗。這對於搭配 `noPermissionMute` 為未經授權的使用者顯示佔位符也很有用。
|
|
112
|
-
|
|
113
|
-
```jsx "FeatureWithLoading.jsx" icon=logos:react
|
|
114
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
115
|
-
import CircularProgress from '@mui/material/CircularProgress';
|
|
116
|
-
import Box from '@mui/material/Box';
|
|
117
|
-
import MyDependentComponent from './MyDependentComponent';
|
|
118
|
-
|
|
119
|
-
export default function FeatureWithLoading() {
|
|
120
|
-
const LoadingSpinner = (
|
|
121
|
-
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
|
122
|
-
<CircularProgress />
|
|
123
|
-
</Box>
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<ComponentInstaller
|
|
128
|
-
did="z8ia2427634f1e909a304e2b963715a18"
|
|
129
|
-
fallback={LoadingSpinner}
|
|
130
|
-
noPermissionMute={true}
|
|
131
|
-
>
|
|
132
|
-
<MyDependentComponent />
|
|
133
|
-
</ComponentInstaller>
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### 使用渲染屬性 (Render Props) 自訂 UI
|
|
139
|
-
|
|
140
|
-
為了完全控制 UI,您可以傳遞一個函數作為 `children`。此函數會接收一個包含 `hasPermission`、`optComponents` 和 `installStatus` 的物件,讓您可以建立完全自訂的安裝介面。
|
|
141
|
-
|
|
142
|
-
```jsx "CustomInstallerButton.jsx" icon=logos:react
|
|
143
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
144
|
-
import Button from '@mui/material/Button';
|
|
145
|
-
|
|
146
|
-
export default function CustomInstallerButton() {
|
|
147
|
-
const requiredDid = 'z8ia2427634f1e909a304e2b963715a18';
|
|
148
|
-
|
|
149
|
-
return (
|
|
150
|
-
<ComponentInstaller did={requiredDid}>
|
|
151
|
-
{({ hasPermission, optComponents, installStatus }) => {
|
|
152
|
-
const isMissing = optComponents.length > 0;
|
|
153
|
-
const status = installStatus[requiredDid] || 'not_installed';
|
|
154
|
-
|
|
155
|
-
if (!isMissing) {
|
|
156
|
-
return <p>功能已準備就緒!</p>;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
if (!hasPermission) {
|
|
160
|
-
return <p>請要求管理員安裝所需元件。</p>;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
return (
|
|
164
|
-
<Button
|
|
165
|
-
variant="contained"
|
|
166
|
-
disabled={status !== 'not_installed'}
|
|
167
|
-
onClick={() => window.open(optComponents[0].installUrl, '_blank')}
|
|
168
|
-
>
|
|
169
|
-
{status === 'not_installed' ? `安裝 ${optComponents[0].meta.title}` : `安裝中... (${status})`}
|
|
170
|
-
</Button>
|
|
171
|
-
);
|
|
172
|
-
}}
|
|
173
|
-
</ComponentInstaller>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
## 總結
|
|
179
|
-
|
|
180
|
-
`ComponentInstaller` 是一個強大的元件,用於管理 blocklet 應用程式中的選用相依性。它提供了一種結構化且使用者友善的方式,以確保所需元件可用,並在必要時引導管理員完成安裝過程。透過使用此元件,您可以建立更具彈性、功能更豐富且能適應使用者環境的應用程式。
|
|
181
|
-
|
|
182
|
-
有關管理元件的更多詳細資訊,您可能也會對 [BlockletStudio](./components-component-management-blocklet-studio.md) 元件感興趣,它為資源和元件管理提供了更全面的介面。
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
# ComponentInstaller
|
|
2
|
-
|
|
3
|
-
`ComponentInstaller` 是一个实用工具组件,为依赖其他 blocklet 的功能充当网关。它会验证指定的组件依赖项是否已安装。如果未安装,它会为管理员(默认为 `owner` 或 `admin` 角色)提供一个用户友好的界面,以便直接进行安装。如果用户缺少必要的权限,它会显示一条消息,建议他们联系管理员。
|
|
4
|
-
|
|
5
|
-
该组件对于创建能够优雅处理可选依赖项缺失的稳健应用程序至关重要,通过引导管理员完成安装过程来改善用户体验。
|
|
6
|
-
|
|
7
|
-
## 工作原理
|
|
8
|
-
|
|
9
|
-
该组件的逻辑遵循一个清晰的顺序流程,以确保在渲染其子组件之前满足依赖关系。
|
|
10
|
-
|
|
11
|
-
<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
|
|
12
|
-

|
|
13
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
14
|
-
|
|
15
|
-
1. **依赖检查**:它读取 `did` prop,并与 blocklet 的元数据(`window.blocklet.optionalComponents`)进行核对,以确定所需的组件是否已安装。
|
|
16
|
-
2. **权限检查**:如果缺少任何组件,它会使用 `SessionPermission` 组件来验证当前用户的角色是否与 `roles` prop 中指定的角色匹配。
|
|
17
|
-
3. **条件渲染**:
|
|
18
|
-
* 如果所有依赖项都已安装,它将渲染其 `children`。
|
|
19
|
-
* 如果依赖项缺失且用户拥有权限,它将显示一个弹出式安装面板。
|
|
20
|
-
* 如果依赖项缺失且用户缺乏权限,它将显示联系管理员的建议,或者如果启用了 `noPermissionMute`,则渲染一个 `fallback` 组件。
|
|
21
|
-
|
|
22
|
-
## 基本用法
|
|
23
|
-
|
|
24
|
-
使用 `ComponentInstaller` 包裹任何依赖于可选 blocklet 的组件或功能。提供所需组件的 DID。
|
|
25
|
-
|
|
26
|
-
```jsx "MyFeature.jsx" icon=logos:react
|
|
27
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
28
|
-
import MyDependentComponent from './MyDependentComponent';
|
|
29
|
-
|
|
30
|
-
export default function MyFeature() {
|
|
31
|
-
// 替换为所需组件的实际 DID
|
|
32
|
-
const requiredComponentDid = 'z8ia2427634f1e909a304e2b963715a18';
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<ComponentInstaller did={requiredComponentDid}>
|
|
36
|
-
{/* 只有在满足依赖关系时,此组件才会被渲染 */}
|
|
37
|
-
<MyDependentComponent />
|
|
38
|
-
</ComponentInstaller>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Props
|
|
44
|
-
|
|
45
|
-
`ComponentInstaller` 接受以下 props 来自定义其行为。
|
|
46
|
-
|
|
47
|
-
<x-field-group>
|
|
48
|
-
<x-field data-name="did" data-type="string | string[]" data-required="true">
|
|
49
|
-
<x-field-desc markdown>要检查的组件依赖项的 DID(或 DID 数组)。这是您需要的 blocklet 的主要标识符。</x-field-desc>
|
|
50
|
-
</x-field>
|
|
51
|
-
<x-field data-name="children" data-type="any" data-required="true">
|
|
52
|
-
<x-field-desc markdown>确认所有依赖项都已安装后要渲染的内容。可以是标准的 React 节点或渲染函数。</x-field-desc>
|
|
53
|
-
</x-field>
|
|
54
|
-
<x-field data-name="roles" data-type="string[]" data-default='["owner", "admin"]'>
|
|
55
|
-
<x-field-desc markdown>允许查看安装界面并安装缺失组件的用户角色数组。</x-field-desc>
|
|
56
|
-
</x-field>
|
|
57
|
-
<x-field data-name="fallback" data-type="React.ReactNode" data-required="false">
|
|
58
|
-
<x-field-desc markdown>一个回退组件,用于在检查依赖项时或当 `noPermissionMute` 对没有安装权限的用户激活时显示。</x-field-desc>
|
|
59
|
-
</x-field>
|
|
60
|
-
<x-field data-name="noPermissionMute" data-type="boolean" data-default="false">
|
|
61
|
-
<x-field-desc markdown>如果为 `true`,没有权限的用户将看到 `fallback` 组件(或什么也不显示),而不是“联系管理员”的消息。</x-field-desc>
|
|
62
|
-
</x-field>
|
|
63
|
-
<x-field data-name="disabled" data-type="boolean" data-default="false">
|
|
64
|
-
<x-field-desc markdown>如果为 `true`,该组件将绕过所有检查并立即渲染其 `children`。</x-field-desc>
|
|
65
|
-
</x-field>
|
|
66
|
-
<x-field data-name="onInstalled" data-type="function" data-required="false">
|
|
67
|
-
<x-field-desc markdown>依赖项检查完成后触发的回调函数。它接收已安装组件的列表。</x-field-desc>
|
|
68
|
-
</x-field>
|
|
69
|
-
<x-field data-name="onError" data-type="function" data-required="false">
|
|
70
|
-
<x-field-desc markdown>如果在依赖项检查期间发生错误,则触发的回调函数。它接收导致错误的组件列表。</x-field-desc>
|
|
71
|
-
</x-field>
|
|
72
|
-
<x-field data-name="onClose" data-type="function" data-required="false">
|
|
73
|
-
<x-field-desc markdown>当安装弹出窗口关闭时调用的回调函数。</x-field-desc>
|
|
74
|
-
</x-field>
|
|
75
|
-
<x-field data-name="closeByOutSize" data-type="boolean" data-default="false">
|
|
76
|
-
<x-field-desc markdown>如果为 `true`,当用户点击安装弹出窗口外部时,该窗口将关闭。</x-field-desc>
|
|
77
|
-
</x-field>
|
|
78
|
-
<x-field data-name="warnIcon" data-type="React.ReactNode" data-required="false">
|
|
79
|
-
<x-field-desc markdown>一个自定义的 React 节点,用于替换安装弹出窗口中的默认警告图标。</x-field-desc>
|
|
80
|
-
</x-field>
|
|
81
|
-
</x-field-group>
|
|
82
|
-
|
|
83
|
-
## 高级用法
|
|
84
|
-
|
|
85
|
-
### 检查多个组件
|
|
86
|
-
|
|
87
|
-
您可以向 `did` prop 传递一个 DID 数组,以一次性检查多个依赖项。只有在所有指定的组件都已安装的情况下,子组件才会渲染。
|
|
88
|
-
|
|
89
|
-
```jsx "MyDashboard.jsx" icon=logos:react
|
|
90
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
91
|
-
import AnalyticsWidget from './AnalyticsWidget';
|
|
92
|
-
import CmsWidget from './CmsWidget';
|
|
93
|
-
|
|
94
|
-
export default function MyDashboard() {
|
|
95
|
-
const requiredDids = [
|
|
96
|
-
'z8ia2427634f1e909a304e2b963715a18', // Analytics Service
|
|
97
|
-
'z8ia3c1f2e4b8e6a1b2c3d4e5f6a7b8c9', // CMS Service
|
|
98
|
-
];
|
|
99
|
-
|
|
100
|
-
return (
|
|
101
|
-
<ComponentInstaller did={requiredDids}>
|
|
102
|
-
<AnalyticsWidget />
|
|
103
|
-
<CmsWidget />
|
|
104
|
-
</ComponentInstaller>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### 为加载状态使用回退组件
|
|
110
|
-
|
|
111
|
-
提供一个 `fallback` 组件,以在依赖项检查进行中时改善用户体验。这对于与 `noPermissionMute` 一起使用,为未经授权的用户显示占位符也很有用。
|
|
112
|
-
|
|
113
|
-
```jsx "FeatureWithLoading.jsx" icon=logos:react
|
|
114
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
115
|
-
import CircularProgress from '@mui/material/CircularProgress';
|
|
116
|
-
import Box from '@mui/material/Box';
|
|
117
|
-
import MyDependentComponent from './MyDependentComponent';
|
|
118
|
-
|
|
119
|
-
export default function FeatureWithLoading() {
|
|
120
|
-
const LoadingSpinner = (
|
|
121
|
-
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
|
122
|
-
<CircularProgress />
|
|
123
|
-
</Box>
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<ComponentInstaller
|
|
128
|
-
did="z8ia2427634f1e909a304e2b963715a18"
|
|
129
|
-
fallback={LoadingSpinner}
|
|
130
|
-
noPermissionMute={true}
|
|
131
|
-
>
|
|
132
|
-
<MyDependentComponent />
|
|
133
|
-
</ComponentInstaller>
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### 使用渲染 Props 自定义 UI
|
|
139
|
-
|
|
140
|
-
为了完全控制 UI,您可以将一个函数作为 `children` 传递。该函数接收一个包含 `hasPermission`、`optComponents` 和 `installStatus` 的对象,允许您构建一个完全自定义的安装界面。
|
|
141
|
-
|
|
142
|
-
```jsx "CustomInstallerButton.jsx" icon=logos:react
|
|
143
|
-
import ComponentInstaller from '@arcblock/blocklet-ui-react/lib/ComponentInstaller';
|
|
144
|
-
import Button from '@mui/material/Button';
|
|
145
|
-
|
|
146
|
-
export default function CustomInstallerButton() {
|
|
147
|
-
const requiredDid = 'z8ia2427634f1e909a304e2b963715a18';
|
|
148
|
-
|
|
149
|
-
return (
|
|
150
|
-
<ComponentInstaller did={requiredDid}>
|
|
151
|
-
{({ hasPermission, optComponents, installStatus }) => {
|
|
152
|
-
const isMissing = optComponents.length > 0;
|
|
153
|
-
const status = installStatus[requiredDid] || 'not_installed';
|
|
154
|
-
|
|
155
|
-
if (!isMissing) {
|
|
156
|
-
return <p>功能已准备就绪!</p>;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
if (!hasPermission) {
|
|
160
|
-
return <p>请请求管理员安装所需组件。</p>;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
return (
|
|
164
|
-
<Button
|
|
165
|
-
variant="contained"
|
|
166
|
-
disabled={status !== 'not_installed'}
|
|
167
|
-
onClick={() => window.open(optComponents[0].installUrl, '_blank')}
|
|
168
|
-
>
|
|
169
|
-
{status === 'not_installed' ? `安装 ${optComponents[0].meta.title}` : `正在安装... (${status})`}
|
|
170
|
-
</Button>
|
|
171
|
-
);
|
|
172
|
-
}}
|
|
173
|
-
</ComponentInstaller>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
## 总结
|
|
179
|
-
|
|
180
|
-
`ComponentInstaller` 是一个功能强大的组件,用于管理 blocklet 应用程序中的可选依赖项。它提供了一种结构化且用户友好的方式,以确保所需组件可用,并在必要时引导管理员完成安装过程。通过使用此组件,您可以构建更具弹性和功能丰富的应用程序,以适应用户的环境。
|
|
181
|
-
|
|
182
|
-
有关管理组件的更多详细信息,您可能还对 [BlockletStudio](./components-component-management-blocklet-studio.md) 组件感兴趣,它为资源和组件管理提供了更全面的界面。
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
# コンポーネント管理
|
|
2
|
-
|
|
3
|
-
コンポーネント管理は、実行中のアプリケーション内でブロックレットコンポーネントを動的にインストール、公開、管理するための一連のツールを提供します。この機能により、アプリケーションはモジュール式で拡張可能になり、管理者や開発者はコアアプリケーションの完全な再デプロイを必要とせずに機能を追加または更新できます。
|
|
4
|
-
|
|
5
|
-
これらのツールは、機能をその場で構成・更新できる柔軟なシステムを構築するために不可欠です。例えば、アプリケーションが必要な依存関係をすべて実行時に持つことを保証したり、開発者が新しいリソースを公開するための統合インターフェースを提供したりすることができます。
|
|
6
|
-
|
|
7
|
-
このライフサイクルを管理するための主要なコンポーネントは `ComponentInstaller` と `BlockletStudio` です。
|
|
8
|
-
|
|
9
|
-
<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
|
|
10
|
-

|
|
11
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
12
|
-
|
|
13
|
-
## コアツール
|
|
14
|
-
|
|
15
|
-
このセクションでは、利用可能なコンポーネント管理ツールの簡単な概要を説明します。詳細なドキュメントと使用例については、各サブページを参照してください。
|
|
16
|
-
|
|
17
|
-
<x-cards data-columns="2">
|
|
18
|
-
<x-card data-title="ComponentInstaller" data-icon="lucide:package-check" data-href="/components/component-management/component-installer">
|
|
19
|
-
必要なすべての依存コンポーネントがインストールされているかを確認し、管理者が不足しているコンポーネントをインストールするための、ロールで保護されたシンプルなインターフェースを提供するユーティリティコンポーネントです。
|
|
20
|
-
</x-card>
|
|
21
|
-
<x-card data-title="BlockletStudio" data-icon="lucide:box" data-href="/components/component-management/blocklet-studio">
|
|
22
|
-
アプリケーション内で直接、コンポーネントおよび関連リソースの公開、バージョン管理、管理を行うための包括的なスタジオを提供する、埋め込み可能な iframe ベースのインターフェースです。
|
|
23
|
-
</x-card>
|
|
24
|
-
</x-cards>
|
|
25
|
-
|
|
26
|
-
## 概要
|
|
27
|
-
|
|
28
|
-
`ComponentInstaller` と `BlockletStudio` を活用することで、開発者は保守と拡張が容易な堅牢なアプリケーションを構築できます。`ComponentInstaller` は依存関係を管理することでアプリケーションの健全性を保証し、`BlockletStudio` はコンテンツと機能の管理のための強力なインターフェースを提供します。
|
|
29
|
-
|
|
30
|
-
基本的な原則に関する詳細については、[コアコンセプト](./core-concepts.md) のドキュメントを参照してください。
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
# Component Management
|
|
2
|
-
|
|
3
|
-
Component management provides a suite of tools for dynamically installing, publishing, and managing blocklet components within a running application. This capability allows applications to be modular and extensible, enabling administrators and developers to add or update features without requiring a full redeployment of the core application.
|
|
4
|
-
|
|
5
|
-
These tools are essential for creating flexible systems where functionality can be composed and updated on the fly. For example, you can ensure that an application has all its necessary dependencies at runtime or provide an integrated interface for developers to publish new resources.
|
|
6
|
-
|
|
7
|
-
The primary components for managing this lifecycle are `ComponentInstaller` and `BlockletStudio`.
|
|
8
|
-
|
|
9
|
-
<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
|
|
10
|
-

|
|
11
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
12
|
-
|
|
13
|
-
## Core Tools
|
|
14
|
-
|
|
15
|
-
This section provides a brief overview of the available component management tools. For detailed documentation and usage examples, please refer to the specific sub-pages.
|
|
16
|
-
|
|
17
|
-
<x-cards data-columns="2">
|
|
18
|
-
<x-card data-title="ComponentInstaller" data-icon="lucide:package-check" data-href="/components/component-management/component-installer">
|
|
19
|
-
A utility component that verifies if all required dependent components are installed and provides a simple, role-protected interface for administrators to install any missing ones.
|
|
20
|
-
</x-card>
|
|
21
|
-
<x-card data-title="BlockletStudio" data-icon="lucide:box" data-href="/components/component-management/blocklet-studio">
|
|
22
|
-
An embeddable iframe-based interface that provides a comprehensive studio for publishing, versioning, and managing components and their associated resources directly within your application.
|
|
23
|
-
</x-card>
|
|
24
|
-
</x-cards>
|
|
25
|
-
|
|
26
|
-
## Summary
|
|
27
|
-
|
|
28
|
-
By leveraging `ComponentInstaller` and `BlockletStudio`, developers can build robust applications that are easy to maintain and extend. `ComponentInstaller` ensures application health by managing dependencies, while `BlockletStudio` provides a powerful interface for content and feature management.
|
|
29
|
-
|
|
30
|
-
For more information on the underlying principles, see the [Core Concepts](./core-concepts.md) documentation.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
# 組件管理
|
|
2
|
-
|
|
3
|
-
組件管理提供了一套工具,用於在執行中的應用程式內動態安裝、發布和管理 blocklet 組件。此功能使應用程式得以模組化和擴充,讓管理員和開發人員能夠新增或更新功能,而無需對核心應用程式進行完整的重新部署。
|
|
4
|
-
|
|
5
|
-
這些工具對於創建功能可以即時組合和更新的靈活系統至關重要。例如,您可以確保應用程式在執行階段擁有所有必要的依賴項,或為開發人員提供一個整合式介面來發布新資源。
|
|
6
|
-
|
|
7
|
-
管理此生命週期的主要組件是 `ComponentInstaller` 和 `BlockletStudio`。
|
|
8
|
-
|
|
9
|
-
<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
|
|
10
|
-

|
|
11
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
12
|
-
|
|
13
|
-
## 核心工具
|
|
14
|
-
|
|
15
|
-
本節簡要概述了可用的組件管理工具。有關詳細文件和使用範例,請參閱特定的子頁面。
|
|
16
|
-
|
|
17
|
-
<x-cards data-columns="2">
|
|
18
|
-
<x-card data-title="ComponentInstaller" data-icon="lucide:package-check" data-href="/components/component-management/component-installer">
|
|
19
|
-
一個實用組件,用於驗證是否已安裝所有必要的相依組件,並為管理員提供一個簡單、受角色保護的介面來安裝任何缺少的組件。
|
|
20
|
-
</x-card>
|
|
21
|
-
<x-card data-title="BlockletStudio" data-icon="lucide:box" data-href="/components/component-management/blocklet-studio">
|
|
22
|
-
一個可嵌入的、基於 iframe 的介面,提供一個全面的工作室,用於直接在您的應用程式內發布、版本控制和管理組件及其相關資源。
|
|
23
|
-
</x-card>
|
|
24
|
-
</x-cards>
|
|
25
|
-
|
|
26
|
-
## 總結
|
|
27
|
-
|
|
28
|
-
透過利用 `ComponentInstaller` 和 `BlockletStudio`,開發人員可以建立易於維護和擴展的穩健應用程式。`ComponentInstaller` 透過管理依賴項來確保應用程式的健康狀態,而 `BlockletStudio` 則為內容和功能管理提供強大的介面。
|
|
29
|
-
|
|
30
|
-
欲了解更多關於其基本原理的資訊,請參閱 [核心概念](./core-concepts.md) 文件。
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
# 组件管理
|
|
2
|
-
|
|
3
|
-
组件管理提供了一套工具,用于在正在运行的应用程序中动态安装、发布和管理 blocklet 组件。此功能使应用程序能够模块化和可扩展,允许管理员和开发人员添加或更新功能,而无需对核心应用程序进行完全重新部署。
|
|
4
|
-
|
|
5
|
-
这些工具对于创建可以动态组合和更新功能的灵活系统至关重要。例如,您可以确保应用程序在运行时拥有所有必需的依赖项,或为开发人员提供一个集成的界面来发布新资源。
|
|
6
|
-
|
|
7
|
-
管理此生命周期的主要组件是 `ComponentInstaller` 和 `BlockletStudio`。
|
|
8
|
-
|
|
9
|
-
<!-- DIAGRAM_IMAGE_START:intro:16:9:1765962229 -->
|
|
10
|
-

|
|
11
|
-
<!-- DIAGRAM_IMAGE_END -->
|
|
12
|
-
|
|
13
|
-
## 核心工具
|
|
14
|
-
|
|
15
|
-
本节简要概述了可用的组件管理工具。有关详细文档和使用示例,请参阅具体子页面。
|
|
16
|
-
|
|
17
|
-
<x-cards data-columns="2">
|
|
18
|
-
<x-card data-title="ComponentInstaller" data-icon="lucide:package-check" data-href="/components/component-management/component-installer">
|
|
19
|
-
一个实用程序组件,用于验证是否所有必需的依赖组件都已安装,并为管理员提供一个简单的、受角色保护的界面来安装任何缺失的组件。
|
|
20
|
-
</x-card>
|
|
21
|
-
<x-card data-title="BlockletStudio" data-icon="lucide:box" data-href="/components/component-management/blocklet-studio">
|
|
22
|
-
一个可嵌入的、基于 iframe 的界面,提供了一个全面的工作室,用于在您的应用程序内直接发布、版本化和管理组件及其相关资源。
|
|
23
|
-
</x-card>
|
|
24
|
-
</x-cards>
|
|
25
|
-
|
|
26
|
-
## 摘要
|
|
27
|
-
|
|
28
|
-
通过利用 `ComponentInstaller` 和 `BlockletStudio`,开发人员可以构建易于维护和扩展的健壮应用程序。`ComponentInstaller` 通过管理依赖关系来确保应用程序的健康,而 `BlockletStudio` 则为内容和功能管理提供了强大的界面。
|
|
29
|
-
|
|
30
|
-
有关基本原理的更多信息,请参阅 [核心概念](./core-concepts.md) 文档。
|