@blocklet/ui-react 2.9.86 → 2.9.88

package/es/BlockletStudio/index.d.ts

@@ -17,9 +17,12 @@ interface BlockletStudioProps {
     onConnected?: (data: unknown) => void;
     components?: Record<string, unknown>[];
     resources?: Record<string, unknown>;
+    componentsTitle?: string;
+    resourcesTitle?: string;
     style?: React.CSSProperties;
     zIndex?: number;
+    dependentComponentsMode?: 'auto' | 'readonly';
     [key: string]: any;
 }
-declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, onUploaded, onReleased, onConnected, components, resources, style, zIndex, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
+declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, componentsTitle, resourcesTitle, onUploaded, onReleased, onConnected, components, resources, style, zIndex, dependentComponentsMode, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
 export default BlockletStudio;

package/es/BlockletStudio/index.js

@@ -25,6 +25,8 @@ function BlockletStudio({
   description,
   introduction,
   note,
+  componentsTitle,
+  resourcesTitle,
   onUploaded,
   onReleased,
   onConnected,
@@ -32,6 +34,7 @@ function BlockletStudio({
   resources = {},
   style = {},
   zIndex = 9999,
+  dependentComponentsMode,
   ...rest
 }) {
   const [opened, setOpened] = useState(false);
@@ -79,7 +82,10 @@ function BlockletStudio({
       mode,
       resourcesParams,
       resources,
-      components
+      components,
+      resourcesTitle,
+      componentsTitle,
+      dependentComponentsMode
     }
   );
   return /* @__PURE__ */ jsx(
@@ -97,7 +103,8 @@ function BlockletStudio({
         border: 0,
         padding: 0,
         margin: 0,
-        opacity: opened ? 1 : 0,
+        pointerEvents: opened ? "auto" : "none",
+        opacity: opened ? 1 : 0.5,
         ...style
       },
       ...rest

package/es/ComponentManager/components/add-component.d.ts

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
-export default function AddComponent({ componentDid, resourceType, resourceDid, autoClose, onComplete, onClose, render, }: {
+export default function AddComponent({ componentDid, resourceType, resourceDid, grantedRoles, autoClose, selectedMeta, storeUrl, onComplete, onClose, render, }: {
     componentDid: string;
-    resourceType: string;
-    resourceDid: string;
+    resourceType?: string;
+    resourceDid?: string;
     autoClose: boolean;
+    selectedMeta?: any;
+    storeUrl?: string;
+    grantedRoles?: string[];
     onComplete: () => void;
     onClose: () => void;
     render?: ({ onClick, loading }: {

package/es/ComponentManager/components/add-component.js

@@ -1,26 +1,33 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useRef, useContext } from "react";
 import Button from "@arcblock/ux/lib/Button";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { joinURL, withQuery } from "ufo";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Toast from "@arcblock/ux/lib/Toast";
 import ResourceDialog from "./resource-dialog.js";
 import { translations } from "../libs/locales.js";
 export default function AddComponent({
   componentDid,
   resourceType,
   resourceDid,
+  grantedRoles = ["admin", "owner"],
   autoClose = true,
+  selectedMeta,
+  storeUrl,
   onComplete,
   onClose,
   render
 }) {
+  const { session } = useContext(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
+  const refIframe = useRef(null);
   const currentState = useReactive({
     loading: false,
     showDialog: false
@@ -43,11 +50,22 @@ export default function AddComponent({
     onComplete?.();
   });
   const handleOpen = useMemoizedFn(() => {
+    if (!session.user) {
+      Toast.warning(t("needLogin"));
+      return;
+    }
+    if (!grantedRoles.includes(session.user?.role)) {
+      Toast.warning(t("noPermission"));
+      return;
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
   const handleLoad = useMemoizedFn(() => {
     currentState.loading = false;
+    if (refIframe.current) {
+      refIframe.current?.selectBlocklet(selectedMeta);
+    }
   });
   const handleIframeMessage = useMemoizedFn((event) => {
     if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
@@ -81,8 +99,11 @@ export default function AddComponent({
     currentState.showDialog && /* @__PURE__ */ jsx(
       ResourceDialog,
       {
+        ref: refIframe,
         src: importUrl,
+        storeUrl,
         open: true,
+        componentDid,
         loading: currentState.loading,
         onClose: handleClose,
         onComplete: handleComplete,

package/es/ComponentManager/components/publish-component.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-export default function PublishComponent({ componentDid, onClose, render, }: {
-    componentDid: String;
+export default function PublishComponent({ componentDid, grantedRoles, onClose, render, }: {
+    componentDid: string;
+    grantedRoles?: string[];
     onClose: () => void;
     render?: ({ onClick, loading }: {
         onClick: () => void;

package/es/ComponentManager/components/publish-component.js

@@ -1,16 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import Button from "@arcblock/ux/lib/Button";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
 import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Toast from "@arcblock/ux/lib/Toast";
 import ResourceDialog from "./resource-dialog.js";
 import { translations } from "../libs/locales.js";
 export default function PublishComponent({
   componentDid,
+  grantedRoles,
   onClose,
   render
 }) {
+  const { session } = useContext(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -28,6 +33,16 @@ export default function PublishComponent({
     currentState.loading = false;
   });
   const handleOpen = useMemoizedFn(() => {
+    if (!session.user) {
+      Toast.warning(t("needLogin"));
+      return;
+    }
+    if (grantedRoles && grantedRoles.length > 0) {
+      if (!grantedRoles?.includes(session.user?.role)) {
+        Toast.warning(t("noPermission"));
+        return;
+      }
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
@@ -46,6 +61,16 @@ export default function PublishComponent({
       },
       "button"
     ),
-    currentState.showDialog && /* @__PURE__ */ jsx(ResourceDialog, { src: exportUrl, open: true, onClose: handleClose, onLoad: handleLoad, loading: currentState.loading })
+    currentState.showDialog && /* @__PURE__ */ jsx(
+      ResourceDialog,
+      {
+        src: exportUrl,
+        open: true,
+        onClose: handleClose,
+        onLoad: handleLoad,
+        componentDid,
+        loading: currentState.loading
+      }
+    )
   ] });
 }

package/es/ComponentManager/components/resource-dialog.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
-export default function ResourceDialog({ src, open, loading, onClose, onComplete, onLoad, }: {
+declare const _default: import("react").ForwardRefExoticComponent<{
     src: string;
-    open?: boolean;
-    loading?: boolean;
-    onLoad?: () => void;
-    onClose?: () => void;
-    onComplete?: () => void;
-}): import("react").JSX.Element | null;
+    componentDid: string;
+    open?: boolean | undefined;
+    loading?: boolean | undefined;
+    storeUrl?: string | undefined;
+    onLoad?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    onComplete?: (() => void) | undefined;
+} & import("react").RefAttributes<{
+    selectBlocklet: (blockletMeta: any) => void;
+}>>;
+export default _default;

package/es/ComponentManager/components/resource-dialog.js

@@ -1,17 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemoizedFn, useMount, useUnmount } from "ahooks";
-import { useRef } from "react";
-export default function ResourceDialog({
+import { useRef, forwardRef, useImperativeHandle } from "react";
+function ResourceDialog({
   src,
   open = false,
+  componentDid,
   loading = true,
+  storeUrl,
   onClose = () => {
   },
   onComplete = () => {
   },
   onLoad = () => {
   }
-}) {
+}, ref) {
   const iframeRef = useRef(null);
   const listener = useMemoizedFn((event) => {
     if (open) {
@@ -32,6 +34,21 @@ export default function ResourceDialog({
   useUnmount(() => {
     window.removeEventListener("message", listener);
   });
+  useImperativeHandle(ref, () => ({
+    selectBlocklet: (blockletMeta) => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          {
+            event: "resourceDialog.select",
+            data: blockletMeta,
+            componentDid,
+            storeUrl
+          },
+          "*"
+        );
+      }
+    }
+  }));
   if (!open) {
     return null;
   }
@@ -54,3 +71,4 @@ export default function ResourceDialog({
     }
   );
 }
+export default forwardRef(ResourceDialog);

package/es/ComponentManager/libs/locales.d.ts

@@ -2,9 +2,13 @@ export declare const translations: {
     zh: {
         importResource: string;
         exportResource: string;
+        noPermission: string;
+        needLogin: string;
     };
     en: {
         importResource: string;
         exportResource: string;
+        noPermission: string;
+        needLogin: string;
     };
 };

package/es/ComponentManager/libs/locales.js

@@ -1,10 +1,14 @@
 export const translations = {
   zh: {
     importResource: "\u5BFC\u5165",
-    exportResource: "\u5BFC\u51FA"
+    exportResource: "\u5BFC\u51FA",
+    noPermission: "\u4F60\u6CA1\u6709\u6743\u9650\u6267\u884C\u8BE5\u64CD\u4F5C\uFF0C\u8BF7\u5207\u6362\u7BA1\u7406\u5458\u901A\u884C\u8BC1\u6216\u8054\u7CFB\u7BA1\u7406\u5458\u8FDB\u884C\u5B89\u88C5",
+    needLogin: "\u767B\u5F55\u540E\u624D\u53EF\u64CD\u4F5C"
   },
   en: {
     importResource: "Import",
-    exportResource: "Export"
+    exportResource: "Export",
+    noPermission: "You do not have permission to perform this operation. Please switch your passport as admin or contact the administrator to install the blocklet",
+    needLogin: "Please login first"
   }
 };

package/lib/BlockletStudio/index.d.ts

@@ -17,9 +17,12 @@ interface BlockletStudioProps {
     onConnected?: (data: unknown) => void;
     components?: Record<string, unknown>[];
     resources?: Record<string, unknown>;
+    componentsTitle?: string;
+    resourcesTitle?: string;
     style?: React.CSSProperties;
     zIndex?: number;
+    dependentComponentsMode?: 'auto' | 'readonly';
     [key: string]: any;
 }
-declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, onUploaded, onReleased, onConnected, components, resources, style, zIndex, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
+declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, componentsTitle, resourcesTitle, onUploaded, onReleased, onConnected, components, resources, style, zIndex, dependentComponentsMode, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
 export default BlockletStudio;

package/lib/BlockletStudio/index.js

@@ -31,6 +31,8 @@ function BlockletStudio({
   description,
   introduction,
   note,
+  componentsTitle,
+  resourcesTitle,
   onUploaded,
   onReleased,
   onConnected,
@@ -38,6 +40,7 @@ function BlockletStudio({
   resources = {},
   style = {},
   zIndex = 9999,
+  dependentComponentsMode,
   ...rest
 }) {
   const [opened, setOpened] = (0, _react.useState)(false);
@@ -83,7 +86,10 @@ function BlockletStudio({
     mode,
     resourcesParams,
     resources,
-    components
+    components,
+    resourcesTitle,
+    componentsTitle,
+    dependentComponentsMode
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
     src,
@@ -98,7 +104,8 @@ function BlockletStudio({
       border: 0,
       padding: 0,
       margin: 0,
-      opacity: opened ? 1 : 0,
+      pointerEvents: opened ? "auto" : "none",
+      opacity: opened ? 1 : 0.5,
       ...style
     },
     ...rest

package/lib/ComponentManager/components/add-component.d.ts

@@ -1,9 +1,12 @@
 import { ReactElement } from 'react';
-export default function AddComponent({ componentDid, resourceType, resourceDid, autoClose, onComplete, onClose, render, }: {
+export default function AddComponent({ componentDid, resourceType, resourceDid, grantedRoles, autoClose, selectedMeta, storeUrl, onComplete, onClose, render, }: {
     componentDid: string;
-    resourceType: string;
-    resourceDid: string;
+    resourceType?: string;
+    resourceDid?: string;
     autoClose: boolean;
+    selectedMeta?: any;
+    storeUrl?: string;
+    grantedRoles?: string[];
     onComplete: () => void;
     onClose: () => void;
     render?: ({ onClick, loading }: {

package/lib/ComponentManager/components/add-component.js

@@ -12,6 +12,8 @@ var _constant = require("@arcblock/ux/lib/Util/constant");
 var _ahooks = require("ahooks");
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _ufo = require("ufo");
+var _Session = require("@arcblock/did-connect/lib/Session");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _resourceDialog = _interopRequireDefault(require("./resource-dialog"));
 var _locales = require("../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,17 +21,24 @@ function AddComponent({
   componentDid,
   resourceType,
   resourceDid,
+  grantedRoles = ["admin", "owner"],
   autoClose = true,
+  selectedMeta,
+  storeUrl,
   onComplete,
   onClose,
   render
 }) {
+  const {
+    session
+  } = (0, _react.useContext)(_Session.SessionContext);
   const {
     locale
   } = (0, _context.useLocaleContext)();
   const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
     return (0, _util.translate)(_locales.translations, key, locale, "en", data);
   });
+  const refIframe = (0, _react.useRef)(null);
   const currentState = (0, _ahooks.useReactive)({
     loading: false,
     showDialog: false
@@ -52,11 +61,22 @@ function AddComponent({
     onComplete?.();
   });
   const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+    if (!session.user) {
+      _Toast.default.warning(t("needLogin"));
+      return;
+    }
+    if (!grantedRoles.includes(session.user?.role)) {
+      _Toast.default.warning(t("noPermission"));
+      return;
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
   const handleLoad = (0, _ahooks.useMemoizedFn)(() => {
     currentState.loading = false;
+    if (refIframe.current) {
+      refIframe.current?.selectBlocklet(selectedMeta);
+    }
   });
   const handleIframeMessage = (0, _ahooks.useMemoizedFn)(event => {
     if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
@@ -89,8 +109,11 @@ function AddComponent({
       },
       children: t("importResource")
     }, "button"), currentState.showDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_resourceDialog.default, {
+      ref: refIframe,
       src: importUrl,
+      storeUrl,
       open: true,
+      componentDid,
       loading: currentState.loading,
       onClose: handleClose,
       onComplete: handleComplete,

package/lib/ComponentManager/components/publish-component.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-export default function PublishComponent({ componentDid, onClose, render, }: {
-    componentDid: String;
+export default function PublishComponent({ componentDid, grantedRoles, onClose, render, }: {
+    componentDid: string;
+    grantedRoles?: string[];
     onClose: () => void;
     render?: ({ onClick, loading }: {
         onClick: () => void;

package/lib/ComponentManager/components/publish-component.js

@@ -5,19 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = PublishComponent;
 var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _constant = require("@arcblock/ux/lib/Util/constant");
 var _ahooks = require("ahooks");
 var _util = require("@arcblock/ux/lib/Locale/util");
+var _Session = require("@arcblock/did-connect/lib/Session");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _resourceDialog = _interopRequireDefault(require("./resource-dialog"));
 var _locales = require("../libs/locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PublishComponent({
   componentDid,
+  grantedRoles,
   onClose,
   render
 }) {
+  const {
+    session
+  } = (0, _react.useContext)(_Session.SessionContext);
   const {
     locale
   } = (0, _context.useLocaleContext)();
@@ -37,6 +44,16 @@ function PublishComponent({
     currentState.loading = false;
   });
   const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+    if (!session.user) {
+      _Toast.default.warning(t("needLogin"));
+      return;
+    }
+    if (grantedRoles && grantedRoles.length > 0) {
+      if (!grantedRoles?.includes(session.user?.role)) {
+        _Toast.default.warning(t("noPermission"));
+        return;
+      }
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
@@ -61,6 +78,7 @@ function PublishComponent({
       open: true,
       onClose: handleClose,
       onLoad: handleLoad,
+      componentDid,
       loading: currentState.loading
     })]
   });

package/lib/ComponentManager/components/resource-dialog.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
-export default function ResourceDialog({ src, open, loading, onClose, onComplete, onLoad, }: {
+declare const _default: import("react").ForwardRefExoticComponent<{
     src: string;
-    open?: boolean;
-    loading?: boolean;
-    onLoad?: () => void;
-    onClose?: () => void;
-    onComplete?: () => void;
-}): import("react").JSX.Element | null;
+    componentDid: string;
+    open?: boolean | undefined;
+    loading?: boolean | undefined;
+    storeUrl?: string | undefined;
+    onLoad?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    onComplete?: (() => void) | undefined;
+} & import("react").RefAttributes<{
+    selectBlocklet: (blockletMeta: any) => void;
+}>>;
+export default _default;

package/lib/ComponentManager/components/resource-dialog.js

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = ResourceDialog;
+
 var _jsxRuntime = require("react/jsx-runtime");
 var _ahooks = require("ahooks");
 var _react = require("react");
 function ResourceDialog({
   src,
   open = false,
+  componentDid,
   loading = true,
+  storeUrl,
   onClose = () => {},
   onComplete = () => {},
   onLoad = () => {}
-}) {
+}, ref) {
   const iframeRef = (0, _react.useRef)(null);
   const listener = (0, _ahooks.useMemoizedFn)(event => {
     if (open) {
@@ -35,6 +37,18 @@ function ResourceDialog({
   (0, _ahooks.useUnmount)(() => {
     window.removeEventListener("message", listener);
   });
+  (0, _react.useImperativeHandle)(ref, () => ({
+    selectBlocklet: blockletMeta => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage({
+          event: "resourceDialog.select",
+          data: blockletMeta,
+          componentDid,
+          storeUrl
+        }, "*");
+      }
+    }
+  }));
   if (!open) {
     return null;
   }
@@ -53,4 +67,5 @@ function ResourceDialog({
       border: "none"
     }
   });
-}
+}
+module.exports = (0, _react.forwardRef)(ResourceDialog);

package/lib/ComponentManager/libs/locales.d.ts

@@ -2,9 +2,13 @@ export declare const translations: {
     zh: {
         importResource: string;
         exportResource: string;
+        noPermission: string;
+        needLogin: string;
     };
     en: {
         importResource: string;
         exportResource: string;
+        noPermission: string;
+        needLogin: string;
     };
 };

package/lib/ComponentManager/libs/locales.js

@@ -7,10 +7,14 @@ exports.translations = void 0;
 const translations = exports.translations = {
   zh: {
     importResource: "\u5BFC\u5165",
-    exportResource: "\u5BFC\u51FA"
+    exportResource: "\u5BFC\u51FA",
+    noPermission: "\u4F60\u6CA1\u6709\u6743\u9650\u6267\u884C\u8BE5\u64CD\u4F5C\uFF0C\u8BF7\u5207\u6362\u7BA1\u7406\u5458\u901A\u884C\u8BC1\u6216\u8054\u7CFB\u7BA1\u7406\u5458\u8FDB\u884C\u5B89\u88C5",
+    needLogin: "\u767B\u5F55\u540E\u624D\u53EF\u64CD\u4F5C"
   },
   en: {
     importResource: "Import",
-    exportResource: "Export"
+    exportResource: "Export",
+    noPermission: "You do not have permission to perform this operation. Please switch your passport as admin or contact the administrator to install the blocklet",
+    needLogin: "Please login first"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.86",
+  "version": "2.9.88",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,8 +62,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.9.86",
-    "@arcblock/react-hooks": "^2.9.86",
+    "@arcblock/bridge": "^2.9.88",
+    "@arcblock/react-hooks": "^2.9.88",
     "@blocklet/js-sdk": "1.16.27-beta-c450492a",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -108,5 +108,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "608ebcab820c61f400bf2829cf2430191e9b1082"
+  "gitHead": "4b25a950bb1e6486a5e955385e727a675b44a3a7"
 }

package/src/BlockletStudio/README.md

@@ -1,3 +1,44 @@
+## Blocklet export api 改动
+
+新约定， 如果 blocklet 的 export api 返回数据中，包含了 `dependentComponents`, 在用户选中了这个资源时， 会自动选中这些依赖的组件。
+
+example：
+
+```js
+res.json({
+  resources: [
+    ...list.map((x) => ({
+      ...x,
+      id: `application-${x._id}`,
+      name: `${x.name} (as Application)`,
+      dependentComponents: [
+        'error-did',
+        'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9',
+        'z2qZyjnsRffFtn2PDnDwDHTRbAu53RpKqDtFZ',
+        'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk',
+      ],
+    })),
+    ...list.map((x) => ({
+      ...x,
+      id: `tool-${x._id}`,
+      name: `${x.name} (as Tool)`,
+      dependentComponents: ['error-did', 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk'],
+    })),
+    ...list.map((x) => ({
+      ...x,
+      id: `template-${x._id}`,
+      name: `${x.name} (as Template)`,
+    })),
+    ...list.map((x) => ({
+      ...x,
+      id: `example-${x._id}`,
+      name: `${x.name} (as Example)`,
+    })),
+  ],
+});
+return;
+```
+
 ## BlockletStudio Component example
 
 因为 iframe 的加载会有过程, 推荐在点击按钮让渲染 loading, 在 onOpened 取消 loading:
@@ -42,6 +83,10 @@ export default function Exporter() {
         note='This is a demo project for "aigne" blocklet.'
         introduction="the introduction."
         componentDid={AI_STUDIO_COMPONENT_DID}
+        // 新增的参数，用于禁用选择组件
+        dependentComponentsMode="readonly"
+        componentsTitle="Components"
+        resourcesTitle="Add Files"
         // 透传到 get blocklet resource 的参数
         resourcesParams={{ name: 'test-project', ok: true }}
         open={showCreateResource}

package/src/BlockletStudio/index.tsx

@@ -32,8 +32,11 @@ interface BlockletStudioProps {
   onConnected?: (data: unknown) => void; // 连接后的回调函数
   components?: Record<string, unknown>[]; // 默认组件列表
   resources?: Record<string, unknown>; // 默认资源
+  componentsTitle?: string;
+  resourcesTitle?: string;
   style?: React.CSSProperties;
   zIndex?: number;
+  dependentComponentsMode?: 'auto' | 'readonly'; // 禁用选择组件
   [key: string]: any;
 }
 
@@ -50,6 +53,8 @@ function BlockletStudio({
   description,
   introduction,
   note,
+  componentsTitle,
+  resourcesTitle,
   onUploaded,
   onReleased,
   onConnected,
@@ -57,6 +62,7 @@ function BlockletStudio({
   resources = {},
   style = {},
   zIndex = 9999,
+  dependentComponentsMode,
   ...rest
 }: BlockletStudioProps) {
   const [opened, setOpened] = useState(false);
@@ -108,6 +114,9 @@ function BlockletStudio({
       resourcesParams,
       resources,
       components,
+      resourcesTitle,
+      componentsTitle,
+      dependentComponentsMode,
     }
   );
 
@@ -125,7 +134,8 @@ function BlockletStudio({
         border: 0,
         padding: 0,
         margin: 0,
-        opacity: opened ? 1 : 0,
+        pointerEvents: opened ? 'auto' : 'none',
+        opacity: opened ? 1 : 0.5,
         ...style,
       }}
       {...rest}

package/src/ComponentManager/components/add-component.tsx

@@ -1,35 +1,46 @@
-import { useEffect, ReactElement } from 'react';
+import { useEffect, ReactElement, useRef, useContext } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { joinURL, withQuery } from 'ufo';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import Toast from '@arcblock/ux/lib/Toast';
 
 import ResourceDialog from './resource-dialog';
 import { translations } from '../libs/locales';
+import type { SessionContext as TSessionContext } from '../../@types';
 
 export default function AddComponent({
   componentDid,
   resourceType,
   resourceDid,
+  grantedRoles = ['admin', 'owner'],
   autoClose = true,
+  selectedMeta,
+  storeUrl,
   onComplete,
   onClose,
   render,
 }: {
   componentDid: string;
-  resourceType: string;
-  resourceDid: string;
+  resourceType?: string;
+  resourceDid?: string;
   autoClose: boolean;
+  selectedMeta?: any;
+  storeUrl?: string;
+  grantedRoles?: string[];
   onComplete: () => void;
   onClose: () => void;
   render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
 }) {
+  const { session } = useContext<TSessionContext>(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const refIframe = useRef<{ selectBlocklet: (meta: any) => void }>(null);
 
   const currentState = useReactive({
     loading: false,
@@ -54,11 +65,22 @@ export default function AddComponent({
     onComplete?.();
   });
   const handleOpen = useMemoizedFn(() => {
+    if (!session.user) {
+      Toast.warning(t('needLogin'));
+      return;
+    }
+    if (!grantedRoles.includes(session.user?.role as string)) {
+      Toast.warning(t('noPermission'));
+      return;
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
   const handleLoad = useMemoizedFn(() => {
     currentState.loading = false;
+    if (refIframe.current) {
+      refIframe.current?.selectBlocklet(selectedMeta);
+    }
   });
 
   const handleIframeMessage = useMemoizedFn((event: MessageEvent) => {
@@ -98,8 +120,11 @@ export default function AddComponent({
 
       {currentState.showDialog && (
         <ResourceDialog
+          ref={refIframe}
           src={importUrl}
+          storeUrl={storeUrl}
           open
+          componentDid={componentDid}
           loading={currentState.loading}
           onClose={handleClose}
           onComplete={handleComplete}

package/src/ComponentManager/components/publish-component.tsx

@@ -1,22 +1,28 @@
-import { ReactElement } from 'react';
+import { ReactElement, useContext } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import Toast from '@arcblock/ux/lib/Toast';
 
+import type { SessionContext as TSessionContext } from '../../@types';
 import ResourceDialog from './resource-dialog';
 import { translations } from '../libs/locales';
 
 export default function PublishComponent({
   componentDid,
+  grantedRoles,
   onClose,
   render,
 }: {
-  componentDid: String;
+  componentDid: string;
+  grantedRoles?: string[];
   onClose: () => void;
   render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
 }) {
+  const { session } = useContext<TSessionContext>(SessionContext);
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -36,6 +42,17 @@ export default function PublishComponent({
     currentState.loading = false;
   });
   const handleOpen = useMemoizedFn(() => {
+    if (!session.user) {
+      Toast.warning(t('needLogin'));
+      return;
+    }
+
+    if (grantedRoles && grantedRoles.length > 0) {
+      if (!grantedRoles?.includes(session.user?.role)) {
+        Toast.warning(t('noPermission'));
+        return;
+      }
+    }
     currentState.loading = true;
     currentState.showDialog = true;
   });
@@ -59,7 +76,14 @@ export default function PublishComponent({
       )}
 
       {currentState.showDialog && (
-        <ResourceDialog src={exportUrl} open onClose={handleClose} onLoad={handleLoad} loading={currentState.loading} />
+        <ResourceDialog
+          src={exportUrl}
+          open
+          onClose={handleClose}
+          onLoad={handleLoad}
+          componentDid={componentDid}
+          loading={currentState.loading}
+        />
       )}
     </>
   );

package/src/ComponentManager/components/resource-dialog.tsx

@@ -1,22 +1,31 @@
 import { useMemoizedFn, useMount, useUnmount } from 'ahooks';
-import { useRef } from 'react';
+import { useRef, forwardRef, useImperativeHandle, Ref } from 'react';
 
-export default function ResourceDialog({
-  src,
-  open = false,
-  loading = true,
-  onClose = () => {},
-  onComplete = () => {},
-  onLoad = () => {},
-}: {
-  src: string;
-  open?: boolean;
-  loading?: boolean;
-  onLoad?: () => void;
-  onClose?: () => void;
-  onComplete?: () => void;
-}) {
-  const iframeRef = useRef(null);
+function ResourceDialog(
+  {
+    src,
+    open = false,
+    componentDid,
+    loading = true,
+    storeUrl,
+    onClose = () => {},
+    onComplete = () => {},
+    onLoad = () => {},
+  }: {
+    src: string;
+    componentDid: string;
+    open?: boolean;
+    loading?: boolean;
+    storeUrl?: string;
+    onLoad?: () => void;
+    onClose?: () => void;
+    onComplete?: () => void;
+  },
+  ref: Ref<{
+    selectBlocklet: (blockletMeta: any) => void;
+  }>
+) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const listener = useMemoizedFn((event: MessageEvent) => {
     if (open) {
@@ -40,6 +49,22 @@ export default function ResourceDialog({
     window.removeEventListener('message', listener);
   });
 
+  useImperativeHandle(ref, () => ({
+    selectBlocklet: (blockletMeta: any) => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          {
+            event: 'resourceDialog.select',
+            data: blockletMeta,
+            componentDid,
+            storeUrl,
+          },
+          '*'
+        );
+      }
+    },
+  }));
+
   if (!open) {
     return null;
   }
@@ -62,3 +87,5 @@ export default function ResourceDialog({
     />
   );
 }
+
+export default forwardRef(ResourceDialog);

package/src/ComponentManager/libs/locales.ts

@@ -2,9 +2,14 @@ export const translations = {
   zh: {
     importResource: '导入',
     exportResource: '导出',
+    noPermission: '你没有权限执行该操作，请切换管理员通行证或联系管理员进行安装',
+    needLogin: '登录后才可操作',
   },
   en: {
     importResource: 'Import',
     exportResource: 'Export',
+    noPermission:
+      'You do not have permission to perform this operation. Please switch your passport as admin or contact the administrator to install the blocklet',
+    needLogin: 'Please login first',
   },
 };