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

package/lib/blocklet/component/add-component/add-component-core.js

@@ -1050,12 +1050,11 @@ export default function AddComponentCore({
     return null;
   }
   return /*#__PURE__*/_jsxs(Wrapper, {
-    sx: isMobile ? {
+    sx: {
       width: '100%',
-      height: window.innerHeight
-    } : {
-      width: '100%',
-      height: inDialog ? '72vh' : '100vh'
+      // FIXME: @zhanghan 在移动端中，会产生一个纵向的滚动条，需要整体修改来实现高度自适应
+      // eslint-disable-next-line no-nested-ternary
+      height: isMobile ? window.innerHeight : inDialog ? '72vh' : '100vh'
     },
     children: [/*#__PURE__*/_jsx(StepProvider, {
       steps: steps,

package/lib/blocklet/component/add-component/step-connect.js

@@ -53,6 +53,7 @@ const StepContent = /*#__PURE__*/forwardRef(({
       pcHeight: "100%",
       logoUrl: meta && meta.logo && meta.registryUrl ? getBlockletLogoUrl({
         did: meta.did,
+        version: meta.version,
         baseUrl: meta.registryUrl,
         logoPath: meta.logo
       }) : null,
@@ -136,6 +137,9 @@ const ContentWrapper = styled(Box)`
           max-width: 100% !important;
         }
       }
+      .app-content {
+        padding: 0!important;
+      }
       `;
   }
   return `
@@ -191,6 +195,10 @@ const ContentWrapper = styled(Box)`
     `;
 }}
 
+  & .app-overview {
+    margin-left: 0 !important;
+  }
+
   & .flex-justify-center {
     display: flex;
     justify-content: center;

package/lib/blocklet/publish/{select-components.js → create-release/blocklets.js}

@@ -7,14 +7,18 @@ import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import BlockletBundleAvatar from '../bundle-avatar';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function SelectComponents({
+import { Alert } from '@mui/material';
+import { EmptyIcon } from '@arcblock/icons';
+import BlockletBundleAvatar from '../../bundle-avatar';
+import StopBox from './stop-box';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function Blocklets({
   value,
   app,
   onChange,
   disabled,
   resourceRelateComponents,
+  projectType,
   dependentComponentsMode
 }) {
   const {
@@ -135,24 +139,40 @@ export default function SelectComponents({
     }
   }];
   return /*#__PURE__*/_jsx(Root, {
-    children: /*#__PURE__*/_jsx(Datatable, {
-      className: "main-table",
-      verticalKeyWidth: 100,
-      locale: locale,
-      data: components,
-      columns: columns,
-      options: {
-        sort: false,
-        download: false,
-        filter: false,
-        print: false,
-        search: false,
-        rowsPerPage: 100
-      }
+    children: components?.length ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Datatable, {
+        className: "main-table",
+        verticalKeyWidth: 100,
+        locale: locale,
+        data: components,
+        columns: columns,
+        options: {
+          sort: false,
+          download: false,
+          filter: false,
+          print: false,
+          search: false,
+          rowsPerPage: 50
+        }
+      }), /*#__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(StopBox, {
+      Icon: EmptyIcon,
+      children: t('blocklet.publish.blockletEmptyTip')
     })
   });
 }
-SelectComponents.propTypes = {
+Blocklets.propTypes = {
   app: PropTypes.object.isRequired,
   value: PropTypes.arrayOf(PropTypes.shape({
     did: PropTypes.string.isRequired,
@@ -162,9 +182,10 @@ SelectComponents.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   dependentComponentsMode: PropTypes.string,
-  resourceRelateComponents: PropTypes.object
+  resourceRelateComponents: PropTypes.object,
+  projectType: PropTypes.string.isRequired
 };
-SelectComponents.defaultProps = {
+Blocklets.defaultProps = {
   value: [],
   onChange: () => {},
   disabled: false,

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

@@ -0,0 +1,390 @@
+import { UNOWNED_DID, WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { Box, InputAdornment, TextField, Typography, Avatar, IconButton } from '@mui/material';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast/index';
+import { useNavigate } from 'react-router-dom';
+import { Suspense, lazy, useRef } from 'react';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import ConnectStoreButton from './connect-store-button';
+import { createMessageId, waitGetConnectedByStudio } from '../utils/wait-connect';
+import usePromiseWindowOpen from '../../../hooks/use-promise-window-open';
+import { formatError } from '../../../util';
+import { useNodeContext } from '../../../contexts/node';
+import useWantToConnectStore from '../hooks/use-want-to-connect-store';
+import EmptySpinner from '../../../empty-spinner';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const allowedFileTypes = ['image/*', '.jpg', '.jpeg', '.png', '.gif', '.svg'];
+const maxFileSize = 1024 * 1024 * 10; // 10 MB
+
+// eslint-disable-next-line import/no-unresolved
+const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+function Branding({
+  projectId,
+  readOnly,
+  loading,
+  blocklet,
+  params,
+  setParams,
+  paramsErrTip,
+  setParamsErrTip,
+  setLoading,
+  initUrl,
+  initLogoUrl,
+  setInitLogoUrl,
+  componentDid
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const navigate = useNavigate();
+  const uploaderLogoRef = useRef(null);
+  const uploaderScreenshotRef = useRef(null);
+  const [wantToConnectStore, setWantToConnectStore] = useWantToConnectStore(blocklet);
+  const openWindow = usePromiseWindowOpen({
+    onOpen: () => setLoading(true),
+    onClose: () => setLoading(false)
+  });
+  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 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}`);
+  return /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      mt: 3,
+      className: "section full-width",
+      children: [/*#__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__*/_jsx(Box, {
+      display: "flex",
+      className: "section",
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(TextField, {
+          disabled: loading || 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
+              })
+            })
+          },
+          error: !!paramsErrTip.projectId,
+          helperText: paramsErrTip.projectId || '',
+          value: projectId === UNOWNED_DID ? '' : projectId,
+          sx: {
+            mt: 3
+          }
+        }), /*#__PURE__*/_jsx(TextField, {
+          disabled: loading || 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
+          }
+        })]
+      })
+    })]
+  });
+}
+Branding.propTypes = {
+  projectId: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  params: PropTypes.object.isRequired,
+  setParams: PropTypes.func.isRequired,
+  paramsErrTip: PropTypes.object.isRequired,
+  setParamsErrTip: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  blocklet: PropTypes.object.isRequired,
+  setLoading: PropTypes.func.isRequired,
+  initUrl: PropTypes.object.isRequired,
+  componentDid: PropTypes.isRequired,
+  initLogoUrl: PropTypes.string.isRequired,
+  setInitLogoUrl: PropTypes.func.isRequired
+};
+const Content = styled.div`
+  margin-top: 24px;
+  .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; /* 图像高度自适应 */
+  }
+`;
+export default Branding;

package/lib/blocklet/publish/{connect-store-list.js → create-release/connect-store-list.js}

@@ -6,8 +6,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { blueGrey } from '@mui/material/colors';
 import { BLOCKLET_TENANT_MODES } from '@blocklet/constant';
-import AddStore from '../../store/add';
-import StoreItem from '../../store/item';
+import AddStore from '../../../store/add';
+import StoreItem from '../../../store/item';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function ConnectStoreList({
   blocklet,