@abtnode/ux 1.16.29-next-680cf137 → 1.16.30-beta-00e8bdd1

package/lib/blocklet/publish/create-release/header.js

@@ -1,29 +1,31 @@
 import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Breadcrumbs, Button, Typography, Dialog as MaterialDialog, IconButton, useMediaQuery } from '@mui/material';
-import styled from '@emotion/styled';
-import { Link, useNavigate } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { joinURL } from 'ufo';
+import Toast from '@arcblock/ux/lib/Toast/index';
 import { PROJECT } from '@blocklet/constant';
-import Spinner from '@mui/material/CircularProgress';
+import styled from '@emotion/styled';
+import { Icon } from '@iconify/react';
 import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
-import semver from 'semver';
-import { useState } from 'react';
-import Toast from '@arcblock/ux/lib/Toast/index';
-import pAll from 'p-all';
-import Dialog from '@arcblock/ux/lib/Dialog';
+import { Box, Breadcrumbs, Button, ButtonGroup, IconButton, Dialog as MaterialDialog, Typography, useMediaQuery } from '@mui/material';
+import Spinner from '@mui/material/CircularProgress';
 import pick from 'lodash/pick';
-import { Icon } from '@iconify/react';
-import ConnectStoreList from './connect-store-list';
-import { validateParams } from '../utils/validate-params';
-import { waitGetConnectedStore } from '../utils/wait-connect';
-import uploadImageToProject from '../utils/upload-image-to-project';
-import { uploadResource } from './resource-select';
+import pAll from 'p-all';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import semver from 'semver';
+import { joinURL } from 'ufo';
 import ClickToCopy from '../../../click-to-copy';
-import { formatError } from '../../../util';
 import { useNodeContext } from '../../../contexts/node';
+import { formatError } from '../../../util';
 import ShortenLabel from '../../component/shorten-label';
+import parseResourceRelateComponents from '../utils/parse-resource-relate-components';
+import uploadImageToProject from '../utils/upload-image-to-project';
+import { validateParams } from '../utils/validate-params';
+import { waitGetConnectedStore } from '../utils/wait-connect';
+import ConnectStoreList from './connect-store-list';
+import ProjectSetting from './project-setting';
+import { uploadResource } from './resource-select';
 import UploadedToast from './uploaded-toast';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const serverEndpoint = window.env?.serverEndpoint;
@@ -61,6 +63,7 @@ function Header({
   } = useNodeContext();
   const navigate = useNavigate();
   const [showStoreDialog, setShowStoreDialog] = useState(false);
+  const [showSetting, setShowSetting] = useState(false);
   const [installResourceTip, setInstallResourceTip] = useState();
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const releaseType = params?.blockletComponents?.length > 0 ? 'pack' : 'resource';
@@ -90,32 +93,7 @@ function Header({
     const _params = {
       ...params
     };
-    const componentMaps = (blocklet?.children || []).reduce((acc, curr) => {
-      acc[curr.meta.did] = true;
-      return acc;
-    }, {});
-    Object.keys(resourceRelateComponents).forEach(blockletDid => {
-      if (!componentMaps[blockletDid]) {
-        return;
-      }
-      let included = false;
-      if (!disabledSelectComponents) {
-        _params.blockletComponents.forEach(item => {
-          if (item.did === blockletDid) {
-            item.included = true;
-            item.required = true;
-            included = true;
-          }
-        });
-      }
-      if (!included) {
-        _params.blockletComponents.push({
-          did: blockletDid,
-          included: true,
-          required: true
-        });
-      }
-    });
+    _params.blockletComponents = parseResourceRelateComponents(_params.blockletComponents, blocklet, resourceRelateComponents, disabledSelectComponents);
     _params.blockletVersion = semver.valid(_params.blockletVersion);
     if (!_params.blockletVersion) {
       Toast.error('Invalid Blocklet Version');
@@ -222,35 +200,37 @@ function Header({
       }
     });
     const newReleased = lastProject.project.lastReleaseId;
-    await pAll(lastProject.project.connectedStores.map(store => {
-      return async () => {
-        try {
-          // eslint-disable-next-line no-await-in-loop
-          const res = await api.publishToStore({
-            input: {
-              did: blocklet.meta.did,
-              storeId: store.storeId,
+    if (params.autoUpload) {
+      await pAll(lastProject.project.connectedStores.map(store => {
+        return async () => {
+          try {
+            // eslint-disable-next-line no-await-in-loop
+            const res = await api.publishToStore({
+              input: {
+                did: blocklet.meta.did,
+                storeId: store.storeId,
+                storeName: store.storeName,
+                projectId,
+                releaseId: newReleased,
+                type: releaseType
+              }
+            });
+            Toast.success( /*#__PURE__*/_jsx(UploadedToast, {
               storeName: store.storeName,
-              projectId,
-              releaseId: newReleased,
-              type: releaseType
-            }
-          });
-          Toast.success( /*#__PURE__*/_jsx(UploadedToast, {
-            storeName: store.storeName,
-            storeUrl: store.storeUrl,
-            developerDid: store.developerDid,
-            published: res.url === 'published'
-          }), {
-            duration: 10000
-          });
-        } catch (err) {
-          Toast.error(formatError(err));
-        }
-      };
-    }), {
-      concurrency: 4
-    });
+              storeUrl: store.storeUrl,
+              developerDid: store.developerDid,
+              published: res.url === 'published'
+            }), {
+              duration: 10000
+            });
+          } catch (err) {
+            Toast.error(formatError(err));
+          }
+        };
+      }), {
+        concurrency: 4
+      });
+    }
     onPublish?.();
     navigate(`../${projectId}/view/${newReleased}`, {
       replace: true
@@ -266,6 +246,9 @@ function Header({
     await waitGetConnectedStore(api, param);
     getData();
   };
+  const handleShowSetting = () => {
+    setShowSetting(true);
+  };
   let installButton = null;
   if (isPublished && serverEndpoint) {
     const blockletMetaUrl = joinURL(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
@@ -273,31 +256,36 @@ function Header({
       const url = new URL(serverEndpoint);
       url.pathname = joinURL(url.pathname, '/launch-blocklet/agreement');
       url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
-      installButton = /*#__PURE__*/_jsx("a", {
+      installButton = isMobile ? /*#__PURE__*/_jsx(IconButton, {
+        component: "a",
+        disabled: loading,
         href: url.href,
         target: "_blank",
         rel: "noreferrer",
-        children: isMobile ? /*#__PURE__*/_jsx(IconButton, {
-          color: "primary",
-          sx: {
-            mr: 1
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "ic:baseline-install-desktop"
-          })
-        }) : /*#__PURE__*/_jsx(Button, {
-          variant: "outlined",
-          sx: {
-            mr: 1
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('common.install')
+        color: "primary",
+        sx: {
+          mr: 1
+        },
+        onClick: () => setInstallResourceTip(blockletMetaUrl),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "ic:baseline-install-desktop"
         })
+      }) : /*#__PURE__*/_jsx(Button, {
+        href: url.href,
+        disabled: loading,
+        target: "_blank",
+        rel: "noreferrer",
+        variant: "outlined",
+        sx: {
+          mr: 1
+        },
+        onClick: () => setInstallResourceTip(blockletMetaUrl),
+        children: t('common.install')
       });
     } else {
       installButton = /*#__PURE__*/_jsxs(_Fragment, {
         children: [isMobile ? /*#__PURE__*/_jsx(IconButton, {
+          disabled: loading,
           color: "primary",
           sx: {
             mr: 1
@@ -307,6 +295,7 @@ function Header({
             icon: "ic:baseline-install-desktop"
           })
         }) : /*#__PURE__*/_jsx(Button, {
+          disabled: loading,
           variant: "outlined",
           sx: {
             mr: 1
@@ -382,46 +371,63 @@ function Header({
           })]
         }), /*#__PURE__*/_jsx(Box, {
           flex: "1"
-        }), !isPublished && /*#__PURE__*/_jsxs(Button, {
-          variant: "contained",
+        }), !isPublished && /*#__PURE__*/_jsxs(ButtonGroup, {
           disabled: loading,
-          style: {
-            marginRight: 12
-          },
-          onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
-          children: [loading && /*#__PURE__*/_jsx(Spinner, {
-            size: 14,
-            sx: {
-              mr: 0.5
-            },
-            color: "inherit"
-          }), t('blocklet.publish.createRelease')]
-        }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [installButton, /*#__PURE__*/_jsx("a", {
-            href: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
-            children: isMobile ? null : /*#__PURE__*/_jsx(Button, {
-              variant: "outlined",
-              sx: {
-                mr: 1
-              },
-              children: t('common.download')
-            })
-          }), /*#__PURE__*/_jsxs(Button, {
-            disabled: loading,
+          variant: "contained",
+          children: [/*#__PURE__*/_jsxs(Button, {
             variant: "contained",
-            onClick: () => setShowStoreDialog(true),
-            children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+            onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
+            children: [loading && /*#__PURE__*/_jsx(Spinner, {
               size: 14,
               sx: {
-                mr: 1
+                mr: 0.5
               },
               color: "inherit"
-            }) : /*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
-              sx: {
-                fontSize: '1.3em',
-                mr: 1
-              }
-            }), isMobile ? t('common.upload') : t('blocklet.publish.connectOrUpload')]
+            }), t('blocklet.publish.createRelease')]
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            onClick: handleShowSetting,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "mage:settings-fill",
+              fontSize: "16px"
+            })
+          })]
+        }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [installButton, isMobile ? null : /*#__PURE__*/_jsx(Button, {
+            component: "a",
+            disabled: loading,
+            href: joinURL(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
+            variant: "outlined",
+            sx: {
+              mr: 1
+            },
+            children: t('common.download')
+          }), /*#__PURE__*/_jsxs(ButtonGroup, {
+            disabled: loading,
+            variant: "contained",
+            children: [/*#__PURE__*/_jsxs(Button, {
+              variant: "contained",
+              onClick: () => setShowStoreDialog(true),
+              children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+                size: 14,
+                sx: {
+                  mr: 1
+                },
+                color: "inherit"
+              }) : /*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
+                sx: {
+                  fontSize: '1.3em',
+                  mr: 1
+                }
+              }), isMobile ? t('common.upload') : t('blocklet.publish.connectOrUpload')]
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "contained",
+              onClick: handleShowSetting,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "mage:settings-fill",
+                fontSize: "16px"
+              })
+            })]
           })]
         })]
       })
@@ -445,6 +451,13 @@ function Header({
         connectedStores: params.connectedStores || [],
         publishedStoreIds: release?.publishedStoreIds
       })
+    }), /*#__PURE__*/_jsx(ProjectSetting, {
+      did: blocklet?.meta?.did,
+      params: params,
+      projectId: projectId,
+      open: showSetting,
+      setParams: setParams,
+      onClose: () => setShowSetting(false)
     })]
   });
 }

package/lib/blocklet/publish/create-release/index.js

@@ -54,7 +54,7 @@ const addComponentTabs = ({
   });
 };
 const pickParams = (baseParams, app) => {
-  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'uploadedResource', 'note']);
+  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'uploadedResource', 'autoUpload', 'possibleSameStore', 'note']);
   if (!params.blockletComponents) {
     params.blockletComponents = (app.children || []).map(x => ({
       did: x.meta.did,
@@ -122,6 +122,18 @@ export default function CreateRelease({
   const [resourceComponentsMap, _setResourceComponentsMap] = useSetState({});
   const dependentComponentsMode = initUrl?.searchParams.get('dependentComponentsMode');
   const disabledSelectComponents = dependentComponentsMode === 'readonly';
+  const resourceRelateComponents = useMemo(() => {
+    const result = {};
+    Object.keys(resourceComponentsMap).forEach(key => {
+      const item = resourceComponentsMap[key];
+      if (item) {
+        item.forEach(k => {
+          result[k] = true;
+        });
+      }
+    });
+    return result;
+  }, [resourceComponentsMap]);
   const setResourceComponentsMap = useCallback(setter => {
     if (disabledSelectComponents) {
       setParams({
@@ -146,7 +158,7 @@ export default function CreateRelease({
       });
     }
   }, [projectId, setParamsErrTip]);
-  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) || params?.uploadedResource ? 'pack' : 'resource', [params?.blockletComponents, params?.uploadedResource]);
+  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) || Object.keys(resourceRelateComponents).length || params?.uploadedResource ? 'pack' : 'resource', [params?.blockletComponents, params?.uploadedResource, resourceRelateComponents]);
   const tabs = [];
   const resourceComponents = (blocklet?.children || []).filter(x => x.meta.resource?.exportApi).filter(x => !componentDid || x.meta.did === componentDid);
   resourceComponents.forEach(item => {
@@ -160,18 +172,6 @@ export default function CreateRelease({
   const [tab, setTab] = useState(tabs[0]?.value);
   const isPublished = !releaseUsedLast && release?.status === 'published';
   const readOnly = isPublished;
-  const resourceRelateComponents = useMemo(() => {
-    const result = {};
-    Object.keys(resourceComponentsMap).forEach(key => {
-      const item = resourceComponentsMap[key];
-      if (item) {
-        item.forEach(k => {
-          result[k] = true;
-        });
-      }
-    });
-    return result;
-  }, [resourceComponentsMap]);
   const updateParamsByUrl = useMemoizedFn(() => {
     if (!initUrl) {
       return;
@@ -183,7 +183,7 @@ export default function CreateRelease({
         blockletTitle: old?.blockletTitle || initUrl.searchParams.get('title'),
         blockletDescription: old?.blockletDescription || initUrl.searchParams.get('description'),
         blockletIntroduction: old?.blockletIntroduction || initUrl.searchParams.get('introduction') || initUrl.searchParams.get('description'),
-        blockletComponents: old?.blockletComponents || JSON.parse(initUrl.searchParams.get('components') || '[]'),
+        blockletComponents: old?.blockletComponents?.length ? old?.blockletComponents : JSON.parse(initUrl.searchParams.get('components') || '[]'),
         note: old?.note || initUrl.searchParams.get('note') || 'No note'
       };
     });
@@ -308,7 +308,7 @@ export default function CreateRelease({
   }
   const resourceItem = resourceComponents.find(x => x.meta.did === tab);
   const allResourceComponentsStop = resourceComponents.every(x => x.status !== 'running');
-  if (allResourceComponentsStop) {
+  if (allResourceComponentsStop && resourceComponents?.length) {
     return /*#__PURE__*/_jsx(StopBox, {
       children: t('blocklet.publish.allComponentsNotRunning')
     });

package/lib/blocklet/publish/create-release/project-setting.js

@@ -0,0 +1,182 @@
+import { UNOWNED_DID } from '@abtnode/constant';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import IOSSwitch from '@arcblock/ux/lib/Switch';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import { Icon } from '@iconify/react';
+import { Box, Button, Typography } from '@mui/material';
+import Spinner from '@mui/material/CircularProgress';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useNodeContext } from '../../../contexts/node';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function ProjectSetting({
+  did,
+  params,
+  setParams,
+  projectId,
+  open,
+  onClose
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  const {
+    api
+  } = useNodeContext();
+  const [autoUpload, setAutoUpload] = useState(false);
+  const [possibleSameStore, setPossibleSameStore] = useState(false);
+  const handleClose = () => {
+    setAutoUpload(params.autoUpload);
+    setPossibleSameStore(params.possibleSameStore);
+    setLoading(false);
+    onClose(false);
+  };
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      await api.updateProject({
+        input: {
+          did,
+          projectId,
+          blockletTitle: params.blockletTitle,
+          blockletDescription: params.blockletDescription,
+          blockletIntroduction: params.blockletIntroduction,
+          autoUpload: !!autoUpload,
+          possibleSameStore: !!possibleSameStore
+        }
+      });
+      setParams({
+        autoUpload,
+        possibleSameStore
+      });
+      onClose(false);
+    } catch (err) {
+      Toast.error(err.message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    setAutoUpload(params.autoUpload);
+    setPossibleSameStore(params.possibleSameStore);
+  }, [params]);
+  const hasProject = !!(projectId && projectId !== UNOWNED_DID);
+  return /*#__PURE__*/_jsx(Dialog, {
+    title: t('blocklet.publish.projectSettings'),
+    disableEscapeKeyDown: true,
+    disablePortal: false,
+    fullWidth: true,
+    open: open,
+    onClose: handleClose,
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: e => {
+          e.stopPropagation();
+          onClose();
+        },
+        color: "inherit",
+        children: t('common.cancel')
+      }), hasProject && /*#__PURE__*/_jsxs(Button, {
+        onClick: e => {
+          e.stopPropagation();
+          handleSubmit();
+        },
+        color: "primary",
+        "data-cy": "install-blocklet-next-step",
+        disabled: loading,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.confirm')]
+      })]
+    }),
+    children: !hasProject ? /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: "ph:empty",
+        sx: {
+          fontSize: 40,
+          mb: 3,
+          opacity: 0.6
+        }
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        sx: {
+          flex: 1
+        },
+        children: t('blocklet.publish.needProjectId')
+      })]
+    }) : /*#__PURE__*/_jsxs(Box, {
+      component: "label",
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: Icon,
+          icon: "ph:upload",
+          sx: {
+            fontSize: 24,
+            mr: 2
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          sx: {
+            flex: 1
+          },
+          children: t('blocklet.publish.autoUploadTip')
+        }), /*#__PURE__*/_jsx(IOSSwitch, {
+          checked: autoUpload,
+          onChange: (_, x) => setAutoUpload(x)
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        component: "label",
+        sx: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: Icon,
+          icon: "fluent-mdl2:merge-duplicate",
+          sx: {
+            fontSize: 24,
+            mr: 2
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          sx: {
+            flex: 1
+          },
+          children: t('blocklet.publish.possibleSameStoreTip')
+        }), /*#__PURE__*/_jsx(IOSSwitch, {
+          checked: possibleSameStore,
+          onChange: (_, x) => setPossibleSameStore(x)
+        })]
+      })]
+    })
+  });
+}
+ProjectSetting.propTypes = {
+  did: PropTypes.string.isRequired,
+  params: PropTypes.object.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  setParams: PropTypes.func.isRequired,
+  projectId: PropTypes.string.isRequired
+};
+export default ProjectSetting;

package/lib/blocklet/publish/create-release/resource-select.js

@@ -1,20 +1,21 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { hasStartEngine } from '@blocklet/meta/lib/engine';
 import styled from '@emotion/styled';
+import { Box } from '@mui/material';
 import classnames from 'classnames';
+import pAll from 'p-all';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import useSetState from 'react-use/lib/useSetState';
 import { joinURL } from 'ufo';
-import { Box } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { hasStartEngine } from '@blocklet/meta/lib/engine';
-import pAll from 'p-all';
-import Toast from '@arcblock/ux/lib/Toast/index';
 import { EmptyIcon } from '@arcblock/icons';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import { getDisplayName } from '@blocklet/meta/lib/util';
 import { useNodeContext } from '../../../contexts/node';
 import { axios } from '../../../util/api';
+import keepNowResources from './keep-now-resources';
 import StopBox from './stop-box';
 import Tree from './tree';
-import keepNowResources from './keep-now-resources';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const fillParent = (nodes, parentId) => {
   nodes.forEach(node => {
@@ -32,7 +33,7 @@ const parseUrl = (component, projectId, releaseId, locale, initUrl) => {
   const {
     exportApi = '/'
   } = component?.meta.resource || {};
-  const urlObj = new URL(joinURL('http://127.0.0.1', component.mountPoint, exportApi || '/').replace(/\/+/g, '/'));
+  const urlObj = new URL(joinURL('http://127.0.0.1', component?.mountPoint, exportApi || '/').replace(/\/+/g, '/'));
   urlObj.searchParams.set('projectId', projectId);
   urlObj.searchParams.set('releaseId', releaseId);
   urlObj.searchParams.set('local', locale);
@@ -159,7 +160,7 @@ export default function ResourceSelect({
             return;
           }
           // If the component does not have a mount point or does not start the engine, the resource is not requested
-          if (!child?.mountPoint || !hasStartEngine(child?.meta)) {
+          if (!child?.mountPoint || !hasStartEngine(child?.meta) || !child?.meta?.resource?.exportApi) {
             return;
           }
           try {
@@ -203,12 +204,15 @@ export default function ResourceSelect({
   }, [releaseId, projectId, readOnly, locale, initUrl, setResources]);
   useEffect(() => {
     if (initialResources && Object.keys(initialResources).length) {
-      app.children.forEach(child => {
+      pAll(app.children.map(async child => {
         const list = initialResources[child.meta.did];
         if (list?.length) {
+          const resTree = await axios.get(parseUrl(child, projectId, releaseId, locale, initUrl));
+          const tree = fillParent(resTree?.data?.resources || []);
           setSelectedResourceIds({
             [child.meta.did]: list
           });
+          setSelectedComponentsMapByIds(child.meta.did, tree, list);
           if (!readOnly) {
             saveSelectedEventsRef.current[child?.meta.did] = {
               resources: list,
@@ -216,7 +220,7 @@ export default function ResourceSelect({
             };
           }
         }
-      });
+      }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [app, initialResources, readOnly]);
@@ -225,14 +229,14 @@ export default function ResourceSelect({
     Empty = /*#__PURE__*/_jsx(StopBox, {
       Icon: EmptyIcon,
       children: t('blocklet.publish.resourceEmptyTip', {
-        name: component.meta.title
+        name: getDisplayName(component)
       })
     });
   }
   if (component?.status !== 'running') {
     Empty = /*#__PURE__*/_jsx(StopBox, {
       children: t('blocklet.publish.componentNotRunning', {
-        name: component.meta.title
+        name: getDisplayName(component)
       })
     });
   }