@abtnode/ux 1.16.27-beta-74c4e335 → 1.16.27-beta-4022dde0

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

@@ -1,1207 +0,0 @@
-import { useState, useEffect, lazy, useRef, useCallback, useMemo, Suspense } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import useSetState from 'react-use/lib/useSetState';
-import pick from 'lodash/pick';
-import joinUrl from 'url-join';
-import semver from 'semver';
-import pAll from 'p-all';
-import Avatar from '@mui/material/Avatar';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
-import InputAdornment from '@mui/material/InputAdornment';
-import Spinner from '@mui/material/CircularProgress';
-import MaterialDialog from '@mui/material/Dialog';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Button from '@arcblock/ux/lib/Button';
-import Toast from '@arcblock/ux/lib/Toast';
-import Empty from '@arcblock/ux/lib/Empty';
-import Tabs from '@arcblock/ux/lib/Tabs';
-import Dialog from '@arcblock/ux/lib/Dialog';
-import Alert from '@arcblock/ux/lib/Alert';
-import { PROJECT } from '@blocklet/constant';
-import { WELLKNOWN_SERVICE_PATH_PREFIX, UNOWNED_DID } from '@abtnode/constant';
-import BlockletBundleAvatar from '../bundle-avatar';
-import { useNodeContext } from '../../contexts/node';
-import { useBlockletContext } from '../../contexts/blocklet';
-import EmptySpinner from '../../empty-spinner';
-import ClickToCopy from '../../click-to-copy';
-import { formatError } from '../../util';
-import Resource, { uploadResource } from './resource';
-import SelectComponents from './select-components';
-import ConnectStoreList from './connect-store-list';
-import { createMessageId, waitGetConnectedByStudio, waitGetConnectedStore } from './utils/wait-connect';
-import ConnectStoreButton from './connect-store-button';
-import uploadImageToProject from './utils/upload-image-to-project';
-import useWantToConnectStore from './hooks/use-want-to-connect-store';
-import usePromiseWindowOpen from '../../hooks/use-promise-window-open';
-import StopBox from './stop-box';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const allowedFileTypes = ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
-const maxFileSize = 1024 * 1024 * 10; // 10 MB
-
-const serverEndpoint = window.env?.serverEndpoint;
-
-// eslint-disable-next-line import/no-unresolved
-const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
-  default: res.Uploader
-})));
-const validateParams = (params, status, t) => {
-  const errors = [];
-  if (!params.blockletTitle) {
-    errors.push({
-      param: 'blockletTitle',
-      message: t('blocklet.publish.errorTip.noTitle')
-    });
-  }
-  if (!params.blockletVersion) {
-    errors.push({
-      param: 'blockletVersion',
-      message: t('blocklet.publish.errorTip.noVersion')
-    });
-  } else if (!semver.valid(params.blockletVersion)) {
-    errors.push({
-      param: 'blockletVersion',
-      message: 'Invalid Blocklet Version'
-    });
-  }
-  if (status === PROJECT.RELEASE_STATUS.published) {
-    if (!params.blockletDescription) {
-      errors.push({
-        param: 'blockletDescription',
-        message: t('blocklet.publish.errorTip.noDescription')
-      });
-    }
-    if (!params.note) {
-      errors.push({
-        param: 'note',
-        message: t('blocklet.publish.errorTip.noNote')
-      });
-    }
-  }
-  return errors.length ? errors : null;
-};
-const addComponentTabs = ({
-  tabs,
-  blocklet,
-  ancestors = []
-}) => {
-  const key = blocklet.meta.did;
-  tabs.push({
-    label: /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
-        size: 24,
-        blocklet: blocklet,
-        ancestors: ancestors
-      }), /*#__PURE__*/_jsx(Box, {
-        ml: "4px",
-        className: "text",
-        children: /*#__PURE__*/_jsx(Box, {
-          children: blocklet.meta.title
-        })
-      })]
-    }, key),
-    value: key
-  });
-};
-const pickParams = (baseParams, app) => {
-  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'note']);
-  if (!params.blockletComponents) {
-    params.blockletComponents = (app.children || []).map(x => ({
-      did: x.meta.did,
-      included: false,
-      required: false
-    }));
-  } else {
-    params.blockletComponents = params.blockletComponents.map(x => ({
-      ...x,
-      included: true
-    }));
-  }
-  return params;
-};
-export default function CreateRelease({
-  initUrl,
-  ...rest
-}) {
-  const navigate = useNavigate();
-  const {
-    projectId,
-    releaseId: inputReleaseId,
-    componentDid = ''
-  } = useParams();
-  const {
-    t,
-    locale
-  } = useLocaleContext();
-  const {
-    blocklet
-  } = useBlockletContext();
-  const [params, setParams] = useSetState({
-    blockletScreenshots: [],
-    publishedStoreIds: [],
-    connectedStores: []
-  });
-  const [paramsErrTip, setParamsErrTip] = useState({});
-  const [loading, setLoading] = useState(false);
-  const [createLoading, setCreateLoading] = useState(false);
-  const [release, setRelease] = useSetState(null);
-  const {
-    api
-  } = useNodeContext();
-  const uploaderLogoRef = useRef(null);
-  const uploaderScreenshotRef = useRef(null);
-  const [installResourceTip, setInstallResourceTip] = useState();
-  const [showStoreDialog, setShowStoreDialog] = useState(false);
-  const [initialResources, setInitialResources] = useState({});
-  const [releaseUsedLast, setReleaseUsedLast] = useState(false);
-  const saveSelectedEventsRef = useRef({});
-  const [initLogoUrl, setInitLogoUrl] = useState('');
-  const [wantToConnectStore, setWantToConnectStore] = useWantToConnectStore(blocklet);
-  const [resourceComponentsMap, _setResourceComponentsMap] = useSetState({});
-  const dependentComponentsMode = initUrl?.searchParams.get('dependentComponentsMode');
-  const disabledSelectComponents = dependentComponentsMode === 'readonly';
-  const setResourceComponentsMap = useCallback(setter => {
-    if (disabledSelectComponents) {
-      setParams({
-        blockletComponents: []
-      });
-    }
-    _setResourceComponentsMap(setter);
-  }, [disabledSelectComponents, _setResourceComponentsMap, setParams]);
-  const openWindow = usePromiseWindowOpen({
-    onOpen: () => setLoading(true),
-    onClose: () => setLoading(false)
-  });
-  const releaseId = inputReleaseId === 'create' ? params?.lastReleaseId || '' : inputReleaseId;
-  const mode = inputReleaseId === 'create' ? 'create' : 'edit';
-  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) ? 'pack' : 'resource', [params?.blockletComponents]);
-  const tabs = [];
-  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.resource?.exportApi).filter(x => !componentDid || x.meta.did === componentDid);
-  resourceComponents.forEach(item => {
-    addComponentTabs({
-      tabs,
-      blocklet: item,
-      t,
-      ancestors: [blocklet]
-    });
-  });
-  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 getRelease = async () => {
-    try {
-      const res = await api.getRelease({
-        input: {
-          did: blocklet.meta.did,
-          projectId,
-          releaseId
-        }
-      });
-      setLoading(false);
-      if (!res.release) {
-        Toast.error('Release not found');
-        return;
-      }
-      setParams(lastParams => pickParams({
-        ...lastParams,
-        ...res.release,
-        blockletVersion: mode === 'create' ? semver.inc(res.release.blockletVersion, 'patch') : res.release.blockletVersion
-      }, blocklet));
-      setRelease(res.release);
-    } catch (err) {
-      setLoading(false);
-      Toast.error(formatError(err));
-    }
-  };
-  const getProject = async () => {
-    if (projectId === UNOWNED_DID) {
-      setParams({
-        blockletVersion: '1.0.0',
-        blockletTitle: ''
-      });
-      return;
-    }
-    if (!projectId) {
-      Toast.error(t('blocklet.publish.errorTip.noDid'));
-      return;
-    }
-    try {
-      const res = await api.getProject({
-        input: {
-          did: blocklet.meta.did,
-          projectId
-        }
-      });
-      setLoading(false);
-      const data = res.project || {};
-      if (!data.blockletVersion) {
-        data.blockletVersion = '1.0.0';
-      } else if (mode === 'create' && semver.valid(data.blockletVersion)) {
-        data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
-      }
-      const theParams = pickParams(data, blocklet);
-      setParams(theParams);
-    } catch (err) {
-      setLoading(false);
-      Toast.error(formatError(err));
-    }
-  };
-  const getData = useCallback(async () => {
-    if (mode === 'edit') {
-      if (!releaseId) {
-        Toast.error('Empty release id');
-        return;
-      }
-      await getProject();
-      await getRelease();
-      return;
-    }
-    await getProject();
-    if (releaseId) {
-      setReleaseUsedLast(true);
-      await getRelease();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, releaseId]);
-  const onPublish = () => {
-    window.parent.postMessage({
-      event: 'studioDialog.uploaded',
-      componentDid
-    }, '*');
-    getRelease();
-  };
-  const onRelease = async status => {
-    if (!projectId || projectId === UNOWNED_DID) {
-      Toast.error(t('blocklet.publish.errorTip.noDid'));
-      return;
-    }
-    const errors = validateParams(params, status, t);
-    if (errors) {
-      Toast.error(errors.map(x => x.message).join('; '));
-      setParamsErrTip(errors.reduce((acc, x) => ({
-        ...acc,
-        [x.param]: x.message
-      }), {}));
-      return;
-    }
-    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.blockletVersion = semver.valid(_params.blockletVersion);
-    if (!_params.blockletVersion) {
-      Toast.error('Invalid Blocklet Version');
-      setParamsErrTip({
-        blockletVersion: 'Invalid Blocklet Version'
-      });
-      return;
-    }
-    if (initLogoUrl) {
-      try {
-        const filename = await uploadImageToProject({
-          did: blocklet.meta.did,
-          projectId,
-          imageUrl: initLogoUrl
-        });
-        _params.blockletLogo = filename;
-        setParams({
-          blockletLogo: filename
-        });
-      } catch (err) {
-        Toast.error(err.message);
-        return;
-      }
-    }
-    const saveKeys = Object.keys(saveSelectedEventsRef.current);
-    if (!saveKeys.length) {
-      Toast.error('No resource selected');
-      return;
-    }
-    setLoading(true);
-    try {
-      await pAll(saveKeys.map(x => {
-        return () => {
-          const item = saveSelectedEventsRef.current[x];
-          return uploadResource({
-            api,
-            locale,
-            projectId,
-            releaseId: releaseUsedLast ? '' : releaseId,
-            appDid: blocklet.meta.did,
-            component: item.component,
-            resources: item.resources,
-            initUrl
-          });
-        };
-      }), {
-        concurrency: 2
-      });
-    } catch (err) {
-      Toast.error(err.message);
-      setLoading(false);
-      setParamsErrTip({
-        resources: 'Invalid save the resource'
-      });
-      return;
-    }
-    _params.blockletTitle = (_params.blockletTitle || '').trim();
-    _params.blockletDescription = (_params.blockletDescription || '').trim();
-    _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
-    _params.note = (_params.note || '').trim();
-    _params.blockletComponents = (_params?.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
-    setCreateLoading(status);
-    api.createRelease({
-      input: {
-        ..._params,
-        did: blocklet.meta.did,
-        projectId,
-        releaseId: releaseUsedLast ? '' : releaseId,
-        status
-      }
-    }).then(res => {
-      if (status === 'draft') {
-        Toast.success(t('blocklet.publish.saveDraftSuccess'));
-      } else {
-        setReleaseUsedLast(false);
-        Toast.success(t('blocklet.publish.createReleaseSuccess'));
-        window.parent.postMessage({
-          event: 'studioDialog.released',
-          componentDid
-        }, '*');
-      }
-      if (mode === 'create') {
-        const id = res?.release?.id;
-        navigate(`../${projectId}/${id}`, {
-          replace: true
-        });
-      } else {
-        getRelease();
-      }
-    }).catch(err => {
-      const msg = formatError(err);
-      Toast.error(msg);
-      if (/resource.*empty/.test(msg)) {
-        setParamsErrTip({
-          blockletResource: msg
-        });
-      }
-    }).finally(() => {
-      setCreateLoading(false);
-      setLoading(false);
-    });
-  };
-  const onOpenConnectStore = async param => {
-    await waitGetConnectedStore(api, param);
-    getData();
-  };
-  const onOpenConnectByStudio = async param => {
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 20000);
-    const nextBlockletDid = await waitGetConnectedByStudio(api, param);
-    setLoading(false);
-    clearTimeout(timer);
-    window.parent.postMessage({
-      event: 'studioDialog.connected',
-      componentDid
-    }, '*');
-    navigate(window.location.pathname.replace(`${UNOWNED_DID}/create`, `${nextBlockletDid}/create`), {
-      replace: true
-    });
-  };
-  const handleConnectByStudio = () => {
-    if (!params.blockletTitle) {
-      Toast.error(t('blocklet.publish.errorTip.noTitle'));
-      return;
-    }
-    if (!wantToConnectStore) {
-      Toast.error('No store found');
-      return;
-    }
-    const messageId = createMessageId();
-    openWindow(async (newWindow, open) => {
-      try {
-        const res = await api.connectByStudio({
-          input: {
-            did: blocklet?.meta?.did,
-            blockletTitle: params?.blockletTitle,
-            storeUrl: wantToConnectStore.url,
-            storeId: wantToConnectStore.id,
-            storeName: wantToConnectStore.name,
-            type: params?.blockletComponents?.length > 0 ? 'pack' : 'resource',
-            componentDid,
-            messageId,
-            tenantScope: initUrl?.searchParams.get('tenantScope') || ''
-          }
-        });
-        if (!res?.url) {
-          Toast.error('failed to connect to store');
-          return;
-        }
-        open(res.url);
-        onOpenConnectByStudio({
-          did: blocklet?.meta?.did,
-          projectId: '',
-          messageId
-        });
-      } catch (err) {
-        const error = formatError(err);
-        Toast.error(error);
-        newWindow.document.write(error);
-        setLoading(false);
-      }
-    });
-  };
-  const handleChangeSelectedComponents = data => {
-    setParams({
-      blockletComponents: data
-    });
-  };
-  useEffect(() => {
-    getData();
-  }, [getData]);
-  useEffect(() => {
-    if (projectId === UNOWNED_DID && mode === 'create' && initUrl) {
-      setInitLogoUrl(initUrl.searchParams.get('logo'));
-      setParams({
-        blockletTitle: initUrl.searchParams.get('title'),
-        // blockletLogo: initUrl.searchParams.get('logo'),
-        blockletDescription: initUrl.searchParams.get('description'),
-        blockletIntroduction: initUrl.searchParams.get('introduction'),
-        blockletComponents: JSON.parse(initUrl.searchParams.get('components') || '[]'),
-        note: initUrl.searchParams.get('note') || 'No note'
-      });
-      const resourcesString = initUrl.searchParams.get('resources');
-      try {
-        const resources = JSON.parse(resourcesString);
-        setInitialResources(resources);
-      } catch (_) {
-        //
-      }
-    }
-  }, [setParams, projectId, initUrl, mode]);
-  if (!params && loading) {
-    return /*#__PURE__*/_jsx(EmptySpinner, {});
-  }
-  if (!params) {
-    return null;
-  }
-  const uploadLogoPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/logo/upload`;
-  const uploadScreenshotPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/screenshot/upload`;
-  const logoUrl = params?.blockletLogo ? `${uploadLogoPrefix}/${params.blockletLogo}` : `${WELLKNOWN_SERVICE_PATH_PREFIX}/static/images/logo.png`;
-  const screenshotUrls = (params?.blockletScreenshots || []).filter(Boolean).map(x => `${uploadScreenshotPrefix}/${x}`);
-  const resourceItem = resourceComponents.find(x => x.meta.did === tab);
-  const allResourceComponentsStop = resourceComponents.every(x => x.status !== 'running');
-  if (allResourceComponentsStop) {
-    return /*#__PURE__*/_jsx(StopBox, {
-      children: t('blocklet.publish.allComponentsNotRunning')
-    });
-  }
-  const resourceContent = resourceItem ? /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(Resource, {
-      initialResources: initialResources,
-      saveSelectedEventsRef: saveSelectedEventsRef,
-      setResourceComponentsMap: setResourceComponentsMap,
-      error: paramsErrTip.blockletResource,
-      app: blocklet,
-      readOnly: readOnly,
-      component: resourceItem,
-      componentDid: componentDid,
-      initUrl: initUrl,
-      projectId: projectId === UNOWNED_DID ? '' : projectId,
-      releaseUsedLast: releaseUsedLast,
-      release: {
-        ...release,
-        id: releaseId
-      }
-    })
-  }) : /*#__PURE__*/_jsx(Box, {
-    display: "flex",
-    mt: -3,
-    children: /*#__PURE__*/_jsx(Empty, {
-      children: t('common.empty')
-    })
-  });
-  const onTabChange = x => {
-    setTab(x);
-  };
-  let installButton = null;
-  if (isPublished && serverEndpoint) {
-    const blockletMetaUrl = joinUrl(serverEndpoint, `/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/release/blocklet.json`);
-    if (projectType === 'pack') {
-      const url = new URL(serverEndpoint);
-      url.pathname = joinUrl(url.pathname, '/launch-blocklet/agreement');
-      url.searchParams.set('blocklet_meta_url', blockletMetaUrl);
-      installButton = /*#__PURE__*/_jsx(Button, {
-        variant: "outlined",
-        style: {
-          marginRight: 8
-        },
-        children: /*#__PURE__*/_jsx("a", {
-          href: url.href,
-          target: "_blank",
-          rel: "noreferrer",
-          children: t('common.install')
-        })
-      });
-    } else {
-      installButton = /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          variant: "outlined",
-          style: {
-            marginRight: 8
-          },
-          onClick: () => setInstallResourceTip(blockletMetaUrl),
-          children: t('blocklet.publish.copyInstallUrl')
-        }), /*#__PURE__*/_jsx(MaterialDialog, {
-          fullWidth: true,
-          maxWidth: "sm",
-          open: installResourceTip,
-          onClose: () => setInstallResourceTip(''),
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              py: 5,
-              px: 4,
-              wordBreak: 'break-all'
-            },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              sx: {
-                mb: 2
-              },
-              children: t('blocklet.publish.installResourceTip')
-            }), /*#__PURE__*/_jsx(ClickToCopy, {
-              children: installResourceTip
-            }), /*#__PURE__*/_jsxs(Typography, {
-              sx: {
-                mt: 2
-              },
-              children: [t('blocklet.publish.installResourceTip2'), /*#__PURE__*/_jsx("a", {
-                style: {
-                  marginLeft: 4
-                },
-                href: "https://www.arcblock.io/docs/blocklet-developer/R3weqCy7WPI8ggudt0C2alWv",
-                target: "_blank",
-                rel: "noreferrer",
-                children: t('blocklet.publish.installResourceHelp')
-              })]
-            })]
-          })
-        })]
-      });
-    }
-  }
-  const resourcesUrlTitle = initUrl?.searchParams.get('resourcesTitle');
-  const componentsUrlTitle = initUrl?.searchParams.get('componentsTitle');
-  return /*#__PURE__*/_jsxs(Main, {
-    ...rest,
-    children: [/*#__PURE__*/_jsxs(Box, {
-      className: "sticky-header",
-      children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
-        className: "breadcrumbs",
-        "aria-label": "breadcrumb",
-        children: [/*#__PURE__*/_jsx(Link, {
-          to: "../",
-          children: t('common.blockletStudio')
-        }), projectId === UNOWNED_DID ? /*#__PURE__*/_jsx(Typography, {
-          color: "text.primary",
-          children: params?.blockletTitle || 'Blocklet'
-        }) : /*#__PURE__*/_jsx(Link, {
-          to: `../${projectId}`,
-          children: params?.blockletTitle
-        }), /*#__PURE__*/_jsx(Typography, {
-          color: "text.primary",
-          children: mode === 'create' ? t('common.create') : params?.blockletVersion || t('common.edit')
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        children: [!isPublished && /*#__PURE__*/_jsxs(Button, {
-          variant: "contained",
-          disabled: loading || createLoading,
-          style: {
-            marginRight: 12
-          },
-          onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
-          children: [createLoading === PROJECT.RELEASE_STATUS.published && /*#__PURE__*/_jsx(Spinner, {
-            size: 14,
-            sx: {
-              mr: 0.5
-            },
-            color: "inherit"
-          }), t('common.release')]
-        }), isPublished && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [installButton, /*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            style: {
-              marginRight: 12
-            },
-            children: /*#__PURE__*/_jsx("a", {
-              href: joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
-              children: t('common.download')
-            })
-          }), /*#__PURE__*/_jsxs(Button, {
-            variant: "contained",
-            onClick: () => setShowStoreDialog(true),
-            children: [/*#__PURE__*/_jsx(CloudUploadRoundedIcon, {
-              style: {
-                fontSize: '1.3em',
-                marginRight: 4
-              }
-            }), t('common.uploadToStore')]
-          })]
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsx(Box, {
-        pt: 5
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        className: "section",
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h3",
-          className: "left",
-          children: t('blocklet.publish.productTitle')
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsx(TextField, {
-            disabled: readOnly,
-            label: `Blocklet ${t('common.title')}`,
-            placeholder: `Blocklet ${t('common.title')}`,
-            InputProps: {
-              'data-cy': 'blocklet-title',
-              readOnly
-            },
-            autoComplete: "off",
-            variant: "outlined",
-            fullWidth: true,
-            required: true,
-            value: params.blockletTitle || '',
-            onChange: e => {
-              setParamsErrTip({
-                blockletTitle: ''
-              });
-              setParams({
-                blockletTitle: e.target.value
-              });
-            },
-            error: !!paramsErrTip.blockletTitle,
-            helperText: paramsErrTip.blockletTitle || ''
-          }), /*#__PURE__*/_jsx(TextField, {
-            required: true,
-            label: "Blocklet DID",
-            fullWidth: true,
-            readonly: true,
-            disabled: true,
-            autoComplete: "off",
-            variant: "outlined",
-            InputProps: {
-              'data-cy': 'export-blocklet-did',
-              endAdornment: projectId === UNOWNED_DID && /*#__PURE__*/_jsx(InputAdornment, {
-                position: "end",
-                children: /*#__PURE__*/_jsx(ConnectStoreButton, {
-                  blocklet: blocklet,
-                  store: wantToConnectStore,
-                  onChangeStore: setWantToConnectStore,
-                  disabled: !params.blockletTitle || readOnly || loading,
-                  loading: loading,
-                  onClick: handleConnectByStudio
-                })
-              })
-            },
-            helperText: "",
-            value: projectId === UNOWNED_DID ? '' : projectId,
-            sx: {
-              mt: 3
-            }
-          }), /*#__PURE__*/_jsx(TextField, {
-            disabled: readOnly,
-            label: `Blocklet ${t('common.description')}`,
-            placeholder: `Blocklet ${t('common.description')}`,
-            InputProps: {
-              'data-cy': 'blocklet-description',
-              readOnly
-            },
-            required: true,
-            autoComplete: "off",
-            variant: "outlined",
-            fullWidth: true,
-            value: params.blockletDescription || '',
-            onChange: e => {
-              setParamsErrTip({
-                blockletDescription: ''
-              });
-              setParams({
-                blockletDescription: e.target.value
-              });
-            },
-            error: !!paramsErrTip.blockletDescription,
-            helperText: paramsErrTip.blockletDescription || '',
-            sx: {
-              mt: 3
-            }
-          }), /*#__PURE__*/_jsx(TextField, {
-            disabled: readOnly,
-            label: `Blocklet ${t('common.introduction')}`,
-            placeholder: `Blocklet ${t('common.introduction')}`,
-            InputProps: {
-              'data-cy': 'export-blocklet-introduction',
-              readOnly,
-              endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
-                position: "end",
-                children: [params?.blockletIntroduction?.length || 0, " / ", PROJECT.MAX_INTRO_LENGTH]
-              })
-            },
-            autoComplete: "off",
-            variant: "outlined",
-            fullWidth: true,
-            multiline: true,
-            minRows: 4,
-            value: params.blockletIntroduction || '',
-            onChange: e => {
-              setParamsErrTip({
-                blockletIntroduction: ''
-              });
-              setParams({
-                blockletIntroduction: e.target.value.slice(0, PROJECT.MAX_INTRO_LENGTH)
-              });
-            },
-            error: !!paramsErrTip.blockletIntroduction,
-            helperText: paramsErrTip.blockletIntroduction || '',
-            sx: {
-              mt: 3
-            }
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        mt: 3,
-        className: "section",
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h3",
-          className: "left",
-          children: t('blocklet.publish.versionTitle')
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsx(TextField, {
-            required: true,
-            disabled: readOnly,
-            label: `Blocklet ${t('common.version')}`,
-            placeholder: `Blocklet ${t('common.version')}`,
-            InputProps: {
-              'data-cy': 'blocklet-version',
-              readOnly
-            },
-            autoComplete: "off",
-            variant: "outlined",
-            fullWidth: true,
-            value: params.blockletVersion || '',
-            onChange: e => {
-              setParamsErrTip({
-                blockletVersion: ''
-              });
-              setParams({
-                blockletVersion: e.target.value
-              });
-            },
-            error: !!paramsErrTip.blockletVersion,
-            helperText: paramsErrTip.blockletVersion || ''
-          }), /*#__PURE__*/_jsx(TextField, {
-            label: t('blocklet.publish.releaseNote'),
-            autoComplete: "off",
-            disabled: readOnly,
-            variant: "outlined",
-            InputProps: {
-              'data-cy': 'release-note',
-              readOnly,
-              endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
-                position: "end",
-                children: [params?.note?.length || 0, " / ", PROJECT.MAX_NOTE_LENGTH]
-              })
-            },
-            fullWidth: true,
-            multiline: true,
-            minRows: 4,
-            required: true,
-            value: params.note || '',
-            onChange: e => {
-              setParamsErrTip({
-                note: ''
-              });
-              setParams({
-                note: e.target.value.slice(0, PROJECT.MAX_NOTE_LENGTH)
-              });
-            },
-            error: !!paramsErrTip.note,
-            helperText: paramsErrTip.note || '',
-            sx: {
-              mt: 3
-            }
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        mt: 3,
-        className: "section full-width",
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "h3",
-          className: "left",
-          children: t('blocklet.publish.imgTitle')
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsxs(Box, {
-            display: "flex",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              sx: {
-                mr: 2
-              },
-              children: t('common.logo')
-            }), /*#__PURE__*/_jsx(Box, {
-              sx: {
-                flex: 1,
-                cursor: readOnly ? 'default' : 'pointer'
-              },
-              children: /*#__PURE__*/_jsx(Avatar, {
-                variant: "square",
-                sx: {
-                  width: 80,
-                  height: 80
-                },
-                alt: "Blocklet Logo",
-                src: initLogoUrl || logoUrl,
-                onClick: () => !readOnly && uploaderLogoRef.current.open()
-              })
-            })]
-          }), /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
-            mt: 3,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "subtitle1",
-              sx: {
-                mr: 2
-              },
-              children: t('common.screenshot')
-            }), /*#__PURE__*/_jsxs(Box, {
-              display: "flex",
-              alignItems: "center",
-              sx: {
-                flex: 1,
-                flexWrap: 'wrap'
-              },
-              children: [screenshotUrls.map((x, index) => /*#__PURE__*/_jsxs(Box, {
-                className: "screenshot",
-                children: [/*#__PURE__*/_jsx("img", {
-                  alt: "screenshot",
-                  src: x
-                }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
-                  className: "action",
-                  onClick: () => {
-                    const arr = [...params.blockletScreenshots];
-                    arr.splice(index, 1);
-                    setParams({
-                      blockletScreenshots: arr
-                    });
-                  },
-                  children: /*#__PURE__*/_jsx(DeleteOutlineIcon, {})
-                })]
-              })), screenshotUrls.length < 5 && /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  width: 200,
-                  height: 140,
-                  background: '#eee',
-                  cursor: readOnly ? 'default' : 'pointer',
-                  color: '#999',
-                  mb: 2
-                },
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                fontSize: 40,
-                onClick: () => !readOnly && uploaderScreenshotRef.current.open(),
-                children: "+"
-              })]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(Suspense, {
-          fallback: /*#__PURE__*/_jsx(EmptySpinner, {}),
-          children: /*#__PURE__*/_jsx(UploaderComponent, {
-            ref: uploaderLogoRef,
-            popup: true,
-            onUploadFinish: result => {
-              setParams({
-                blockletLogo: result.data.filename
-              });
-              setInitLogoUrl('');
-              uploaderLogoRef.current.close();
-            },
-            plugins: ['ImageEditor'],
-            installerProps: {
-              disabled: true
-            },
-            apiPathProps: {
-              uploader: uploadLogoPrefix,
-              disableMediaKitPrefix: true
-            },
-            coreProps: {
-              restrictions: {
-                allowedFileTypes,
-                maxFileSize,
-                maxNumberOfFiles: 1
-              }
-            }
-          }, "uploader-logo")
-        }), /*#__PURE__*/_jsx(Suspense, {
-          fallback: /*#__PURE__*/_jsx(EmptySpinner, {}),
-          children: /*#__PURE__*/_jsx(UploaderComponent, {
-            ref: uploaderScreenshotRef,
-            popup: true,
-            onUploadFinish: result => {
-              const blockletScreenshots = params.blockletScreenshots || [];
-              blockletScreenshots.push(result.data?.filename);
-              setParams({
-                blockletScreenshots
-              });
-              uploaderScreenshotRef.current.close();
-            },
-            plugins: ['ImageEditor'],
-            apiPathProps: {
-              uploader: uploadScreenshotPrefix,
-              disableMediaKitPrefix: true
-            },
-            coreProps: {
-              restrictions: {
-                allowedFileTypes,
-                maxFileSize,
-                maxNumberOfFiles: 5 - screenshotUrls.length
-              }
-            }
-          }, "uploader-screenshot")
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        mt: 3,
-        className: "section full-width",
-        children: [/*#__PURE__*/_jsx(Box, {
-          className: "left",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            children: resourcesUrlTitle || t('blocklet.publish.resourceTitle')
-          })
-        }), /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            flex: 1
-          },
-          children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
-            tabs: tabs,
-            current: tab,
-            onChange: onTabChange,
-            sx: {
-              ml: -2,
-              mt: -1.5
-            }
-          }), /*#__PURE__*/_jsx(Box, {
-            children: resourceContent
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        mt: 3,
-        className: "section full-width",
-        children: [/*#__PURE__*/_jsx(Box, {
-          className: "left",
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            children: componentsUrlTitle || t('common.components')
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            flex: 1
-          },
-          children: /*#__PURE__*/_jsx(SelectComponents, {
-            disabled: loading || readOnly,
-            app: blocklet,
-            value: params?.blockletComponents || [],
-            onChange: handleChangeSelectedComponents,
-            resourceRelateComponents: resourceRelateComponents,
-            dependentComponentsMode: dependentComponentsMode
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Alert, {
-        type: "info",
-        style: {
-          width: '100%'
-        },
-        children: /*#__PURE__*/_jsx(Box, {
-          display: "flex",
-          alignItems: "center",
-          rel: "noreferrer",
-          children: projectType === 'pack' ? t('blocklet.publish.packTip') : t('blocklet.publish.resourceTip')
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      title: t('common.connectToStore'),
-      disableEscapeKeyDown: true,
-      disablePortal: false,
-      fullWidth: true,
-      open: showStoreDialog,
-      onClose: () => setShowStoreDialog(false),
-      children: /*#__PURE__*/_jsx(ConnectStoreList, {
-        projectType: projectType,
-        blocklet: blocklet,
-        releaseType: params?.blockletComponents?.length > 0 ? 'pack' : 'resource',
-        projectId: projectId,
-        releaseId: releaseId,
-        componentDid: componentDid,
-        onPublish: onPublish,
-        onOpenConnectStore: onOpenConnectStore,
-        onDelete: getData,
-        connectedStores: params.connectedStores || [],
-        publishedStoreIds: release?.publishedStoreIds
-      })
-    })]
-  });
-}
-CreateRelease.propTypes = {
-  initUrl: PropTypes.object
-};
-CreateRelease.defaultProps = {
-  initUrl: null
-};
-const Main = styled.div`
-  .sticky-header {
-    margin-top: -12px;
-    padding: 12px 0;
-    position: sticky;
-    top: 0;
-    z-index: 99;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #fff;
-    padding-bottom: 12px;
-    border-bottom: ${({
-  theme
-}) => `1px solid ${theme.palette.divider}`};
-  }
-  .screenshot {
-    margin-bottom: 16px;
-    max-width: 200px;
-    max-height: 140px;
-    width: 200px;
-    height: 140px;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #eee;
-    margin-right: 16px;
-    position: relative;
-    .action {
-      visibility: hidden;
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      background-color: rgba(0, 0, 0, 0.2);
-      color: rgba(255, 255, 255, 0.8);
-    }
-    &:hover .action {
-      visibility: visible;
-    }
-  }
-  .screenshot img {
-    width: 100%; /* 图像宽度填充容器 */
-    height: auto; /* 图像高度自适应 */
-  }
-  .section {
-    max-width: 800px;
-    &.full-width {
-      max-width: 100%;
-    }
-    .MuiTypography-h3 {
-      font-size: 1.1rem;
-      font-weight: 700;
-    }
-    .left {
-      flex-shrink: 0;
-      width: 140px;
-    }
-    .MuiTabs-indicator {
-      display: none;
-    }
-    .MuiTypography-subtitle1 {
-      width: 120px;
-      font-weight: 700;
-      font-size: 1rem;
-      ${({
-  theme
-}) => theme.breakpoints.down('sm')} {
-        width: 80px;
-      }
-    }
-  }
-  .MuiButtonBase-root {
-    a {
-      color: inherit;
-    }
-  }
-  .MuiInputBase-multiline .MuiInputAdornment-positionEnd {
-    align-self: flex-end;
-    .MuiTypography-root {
-      font-size: 0.8rem;
-    }
-    font-size: 0.8rem;
-  }
-`;