@abtnode/ux 1.16.37 → 1.16.38-beta-20250110-003414-d3c1bfbd

package/lib/blocklet/configuration.js

@@ -53,7 +53,8 @@ function BlockletEnvironment({
     rectLogoUrl,
     faviconUrl,
     splashPortraitUrl,
-    splashLandscapeUrl
+    splashLandscapeUrl,
+    ogImageUrl
   } = useAppLogo({
     blocklet
   });
@@ -342,6 +343,37 @@ function BlockletEnvironment({
           minHeight: 900,
           allowSVG: false
         })]
+      }), /*#__PURE__*/_jsxs(Grid, {
+        item: true,
+        xs: 12,
+        lg: 4,
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "config-label",
+          fontSize: 14,
+          mb: 1,
+          sx: {
+            flexGrow: 0,
+            width: 'auto'
+          },
+          children: t('blocklet.config.ogImage')
+        }), /*#__PURE__*/_jsx(Box, {
+          mb: 1.5,
+          className: "config-desc",
+          children: t('blocklet.config.ogImageDesc')
+        }), /*#__PURE__*/_jsx(LogoUploader, {
+          did: blocklet.meta.did,
+          width: 400,
+          height: 210,
+          type: "og-image",
+          prefix: prefix,
+          url: ogImageUrl,
+          enabled: hasPermission,
+          headers: getSessionInHeader,
+          aspectRatio: 40 / 21,
+          minWidth: 1200,
+          minHeight: 630,
+          allowSVG: false
+        })]
       })]
     }), /*#__PURE__*/_jsx(Box, {
       className: "config-form",

package/lib/blocklet/logo-uploader.js

@@ -116,7 +116,7 @@ export default function LogoUploader({
 // infer props for Uploader
 LogoUploader.propTypes = {
   url: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(['square', 'rect', 'favicon', 'splash-portrait', 'splash-landscape']).isRequired,
+  type: PropTypes.oneOf(['square', 'rect', 'favicon', 'splash-portrait', 'splash-landscape', 'og-image']).isRequired,
   did: PropTypes.string.isRequired,
   prefix: PropTypes.string.isRequired,
   headers: PropTypes.func,

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

@@ -163,7 +163,7 @@ function Header({
         });
         return;
       }
-    } else {
+    } else if (!params.blockletDocker?.dockerImage) {
       _params.blockletComponents = [];
     }
     _params.blockletTitle = (_params.blockletTitle || '').trim();
@@ -175,6 +175,13 @@ function Header({
     _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);
+    if (_params.contentType !== 'docker') {
+      _params.blockletDocker = {
+        dockerImage: '',
+        dockerArgs: [],
+        dockerEnvs: []
+      };
+    }
     try {
       await api.createRelease({
         input: {

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

@@ -27,6 +27,7 @@ import ResourceUpload from './resource-upload';
 import StopBox from './stop-box';
 import Version from './version';
 import preserveOriginalStrings from '../utils/preserve-original-strings';
+import ResourceDocker from './resource-docker';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const addComponentTabs = ({
   tabs,
@@ -55,7 +56,7 @@ const addComponentTabs = ({
   });
 };
 const pickParams = (baseParams, app) => {
-  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletVideos', 'blockletScreenshots', 'blockletResourceType', 'blockletSupport', 'blockletHomepage', 'blockletCommunity', 'blockletRepository', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'uploadedResource', 'autoUpload', 'possibleSameStore', 'note']);
+  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletVideos', 'blockletScreenshots', 'blockletResourceType', 'blockletSupport', 'blockletHomepage', 'blockletCommunity', 'blockletRepository', 'blockletDocker', 'contentType', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'uploadedResource', 'autoUpload', 'possibleSameStore', 'note']);
   if (!params.blockletComponents) {
     params.blockletComponents = (app.children || []).map(x => ({
       did: x.meta.did,
@@ -68,7 +69,6 @@ const pickParams = (baseParams, app) => {
       included: true
     }));
   }
-  params.resourceFromSelect = !params.uploadedResource;
   return params;
 };
 const stepsToLabel = {
@@ -107,12 +107,17 @@ export default function CreateRelease({
     publishedStoreIds: [],
     connectedStores: [],
     uploadedResource: '',
+    contentType: 'blocklet',
     blockletResourceType: '',
     blockletSupport: '',
     blockletCommunity: '',
     blockletHomepage: '',
     blockletRepository: '',
-    resourceFromSelect: true
+    blockletDocker: {
+      dockerImage: '',
+      dockerArgs: [],
+      dockerEnvs: []
+    }
   });
   const [paramsErrTip, setParamsErrTip] = useSetState({});
   const [loading, setLoading] = useState(false);
@@ -152,7 +157,8 @@ export default function CreateRelease({
   const setSelectedResourceIds = useCallback((...args) => {
     _setSelectedResourceIds(...args);
     setParamsErrTip({
-      blockletResource: ''
+      blockletResource: '',
+      blockletDocker: ''
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -313,6 +319,21 @@ export default function CreateRelease({
       updateParamsByUrl();
     }
   }, [projectId, initUrl, mode, updateParamsByUrl]);
+  useEffect(() => {
+    if (params.contentType === 'docker') {
+      setParams({
+        resourceFromSelect: false
+      });
+    } else if (params.contentType === 'blocklet') {
+      setParams({
+        resourceFromSelect: true
+      });
+    } else if (params.contentType === 'upload') {
+      setParams({
+        resourceFromSelect: false
+      });
+    }
+  }, [params.contentType, setParams]);
   const hasSelectedResources = useMemo(() => {
     return !!Object.keys(selectedResourceIds).find(key => {
       if (selectedResourceIds[key].length) {
@@ -500,27 +521,35 @@ export default function CreateRelease({
                   flex: 1
                 },
                 children: [/*#__PURE__*/_jsxs(RadioGroup, {
-                  onChange: () => setParams({
-                    resourceFromSelect: !params.resourceFromSelect
+                  onChange: e => setParams({
+                    contentType: e.target.value
                   }),
                   children: [/*#__PURE__*/_jsx(FormControlLabel, {
-                    value: "select",
+                    value: "blocklet",
                     disabled: readOnly,
                     control: /*#__PURE__*/_jsx(Radio, {
                       size: "small",
-                      checked: params.resourceFromSelect
+                      checked: params.contentType === 'blocklet'
                     }),
                     label: t('blocklet.publish.resourceSelect')
                   }), /*#__PURE__*/_jsx(FormControlLabel, {
-                    value: "select",
+                    value: "upload",
                     disabled: readOnly,
                     control: /*#__PURE__*/_jsx(Radio, {
                       size: "small",
-                      checked: !params.resourceFromSelect
+                      checked: params.contentType === 'upload'
                     }),
                     label: t('blocklet.publish.resourceUpload')
+                  }), /*#__PURE__*/_jsx(FormControlLabel, {
+                    value: "docker",
+                    disabled: readOnly,
+                    control: /*#__PURE__*/_jsx(Radio, {
+                      size: "small",
+                      checked: params.contentType === 'docker'
+                    }),
+                    label: t('blocklet.publish.resourceDocker')
                   })]
-                }), params.resourceFromSelect && /*#__PURE__*/_jsxs(_Fragment, {
+                }), params.contentType === 'blocklet' && /*#__PURE__*/_jsxs(_Fragment, {
                   children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
                     tabs: tabs,
                     current: tab,
@@ -552,7 +581,7 @@ export default function CreateRelease({
                       id: releaseId
                     }
                   })]
-                }), !params.resourceFromSelect && /*#__PURE__*/_jsx(ResourceUpload, {
+                }), params.contentType === 'upload' && /*#__PURE__*/_jsx(ResourceUpload, {
                   app: blocklet,
                   readOnly: readOnly,
                   projectId: projectId === UNOWNED_DID ? '' : projectId,
@@ -560,6 +589,15 @@ export default function CreateRelease({
                   error: paramsErrTip.blockletResource,
                   setParams: setParams,
                   setParamsErrTip: setParamsErrTip
+                }), params.contentType === 'docker' && /*#__PURE__*/_jsx(ResourceDocker, {
+                  app: blocklet,
+                  readOnly: readOnly,
+                  projectId: projectId === UNOWNED_DID ? '' : projectId,
+                  params: params,
+                  error: paramsErrTip.blockletResource,
+                  setParams: setParams,
+                  setParamsErrTip: setParamsErrTip,
+                  paramsErrTip: paramsErrTip
                 })]
               })
             })

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

@@ -29,7 +29,7 @@ export default function ReleaseStepper({
       return paramsErrTip?.blockletTitle || paramsErrTip?.projectId || paramsErrTip?.blockletDescription || paramsErrTip?.blockletHomepage || paramsErrTip?.blockletSupport || paramsErrTip?.blockletCommunity || paramsErrTip?.blockletRepository;
     }
     if (step === 2) {
-      return paramsErrTip?.blockletResource;
+      return paramsErrTip?.blockletResource || paramsErrTip?.blockletDocker || paramsErrTip?.dockerImageName;
     }
     if (step >= 4) {
       return paramsErrTip?.blockletVersion || paramsErrTip?.note;
@@ -160,6 +160,8 @@ ReleaseStepper.propTypes = {
     blockletHomepage: PropTypes.string,
     blockletSupport: PropTypes.string,
     blockletCommunity: PropTypes.string,
-    blockletRepository: PropTypes.string
+    blockletRepository: PropTypes.string,
+    blockletDocker: PropTypes.object,
+    dockerImageName: PropTypes.string
   }).isRequired
 };

package/lib/blocklet/publish/create-release/resource-docker-input-item.js

@@ -0,0 +1,442 @@
+import { Box, IconButton, InputAdornment, MenuItem, Select, TextField, Typography } from '@mui/material';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import IOSSwitch from '@arcblock/ux/lib/Switch';
+import { Icon } from '@iconify/react';
+import PropTypes from 'prop-types';
+import { notAllowUseCustomDockerArgs, allowDockerArgs, dockerArgsValidator, dockerArgsToCamelCase } from '@abtnode/docker-utils';
+import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ResourceDockerInputItem({
+  index,
+  item,
+  dockerParams,
+  setDockerParams,
+  dataKey,
+  t,
+  readOnly
+}) {
+  const value = item?.value || '';
+  const [showDialog, setShowDialog] = useState(false);
+  const handleDelete = () => {
+    dockerParams[dataKey]?.splice(index, 1);
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetCustom = (_, checked) => {
+    if (dockerParams[dataKey]?.[index]) {
+      if (!checked) {
+        dockerParams[dataKey][index].value = dockerParams[dataKey][index].custom || '';
+        dockerParams[dataKey][index].custom = '';
+      } else {
+        dockerParams[dataKey][index].custom = dockerParams[dataKey][index].value;
+        dockerParams[dataKey][index].value = `$${dockerArgsToCamelCase(item.key)}`;
+      }
+    }
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetSecure = (_, v) => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      secure: v
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetShared = (_, v) => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      shared: v
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetRequired = (_, v) => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      required: v
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetDescription = e => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      description: e.target.value
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetPath = e => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      path: e.target.value
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetPrefix = e => {
+    dockerParams[dataKey][index] = {
+      ...dockerParams[dataKey][index],
+      prefix: e.target.value
+    };
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleSetType = e => {
+    const type = e.target.value === 'web' ? 'web' : 'docker';
+    if (type === 'web') {
+      dockerParams.dockerArgs.forEach(v => {
+        v.type = 'docker';
+      });
+    }
+    dockerParams.dockerArgs[index] = {
+      ...dockerParams.dockerArgs[index],
+      type,
+      path: '/',
+      protocol: 'http',
+      prefix: '/',
+      name: 'publicUrl',
+      port: 'BLOCKLET_PORT'
+    };
+    setDockerParams({
+      ...dockerParams,
+      dockerArgs: [...dockerParams.dockerArgs]
+    });
+  };
+  const handleSetName = e => {
+    if (dockerParams[dataKey]?.[index]) {
+      dockerParams[dataKey][index].name = e.target.value;
+    }
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const handleChangeValue = e => {
+    if (dockerParams[dataKey]?.[index]) {
+      dockerParams[dataKey][index].value = e.target.value;
+    }
+    setDockerParams({
+      ...dockerParams,
+      [dataKey]: [...dockerParams[dataKey]]
+    });
+  };
+  const isCustomValue = value === `$${dockerArgsToCamelCase(item.key)}` || item.custom;
+  const isNotAllowDockerArgs = dataKey === 'dockerArgs' && !allowDockerArgs[item.key];
+  const isNotAllowUseCustom = notAllowUseCustomDockerArgs[item.key];
+  const isEnv = dataKey === 'dockerEnvs';
+  const isPublish = item.key === '--publish';
+  let title = item.key;
+  if (isPublish && item.type === 'web') {
+    title = '--publish (Web)';
+  } else if (isEnv) {
+    title = `--env ${item.key}`;
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 2,
+      alignItems: 'center'
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        width: 250
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          textOverflow: 'ellipsis',
+          width: '100%',
+          overflow: 'hidden'
+        },
+        children: title
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(TextField, {
+        disabled: readOnly || isCustomValue || isNotAllowDockerArgs,
+        placeholder: "",
+        value: isCustomValue ? `$${dockerArgsToCamelCase(item.key)}` : value,
+        sx: {
+          flex: 1
+        },
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs(InputAdornment, {
+            position: "end",
+            sx: {
+              zoom: 0.9
+            },
+            children: [(!(isNotAllowUseCustom || isNotAllowDockerArgs) || isEnv || isPublish) && /*#__PURE__*/_jsx(IconButton, {
+              onClick: () => setShowDialog(true),
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "icon-park-outline:setting-config"
+              })
+            }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleDelete,
+              color: isNotAllowDockerArgs ? 'error' : 'default',
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "ic:round-delete"
+              })
+            })]
+          })
+        },
+        error: isNotAllowDockerArgs,
+        onChange: handleChangeValue
+      }), isNotAllowDockerArgs && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "error",
+        children: t('blocklet.publish.docker.noAllowTheArg')
+      }), item.key === '--publish' && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "text.secondary",
+        children: t('blocklet.publish.docker.publishTips')
+      }), item.key === '--volume' && dockerArgsValidator[item.key](value) && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        color: "error",
+        children: t('blocklet.publish.docker.volumeTips')
+      })]
+    }), showDialog && /*#__PURE__*/_jsx(Dialog, {
+      open: true,
+      fullWidth: true,
+      maxWidth: "sm",
+      PaperProps: {
+        style: {
+          minHeight: 0
+        }
+      },
+      title: isEnv ? t('blocklet.publish.docker.modifyEnv') : t('blocklet.publish.docker.modifyParam'),
+      onClose: () => setShowDialog(false),
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          paddingBottom: 2
+        },
+        children: [isNotAllowUseCustom || isNotAllowDockerArgs || isEnv ? null : /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: t('blocklet.publish.docker.needCustomInput')
+          }), /*#__PURE__*/_jsx(IOSSwitch, {
+            disabled: readOnly,
+            checked: isCustomValue,
+            onChange: handleSetCustom,
+            sx: {
+              zoom: 0.9
+            }
+          })]
+        }), isEnv && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: t('blocklet.publish.docker.secure')
+          }), /*#__PURE__*/_jsx(IOSSwitch, {
+            disabled: readOnly,
+            checked: item.secure,
+            onChange: handleSetSecure,
+            sx: {
+              zoom: 0.9
+            }
+          })]
+        }), isEnv && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: t('blocklet.publish.docker.shared')
+          }), /*#__PURE__*/_jsx(IOSSwitch, {
+            disabled: readOnly,
+            checked: item.shared,
+            onChange: handleSetShared,
+            sx: {
+              zoom: 0.9
+            }
+          })]
+        }), isEnv && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: t('blocklet.publish.docker.required')
+          }), /*#__PURE__*/_jsx(IOSSwitch, {
+            disabled: readOnly,
+            checked: item.required,
+            onChange: handleSetRequired,
+            sx: {
+              zoom: 0.9
+            }
+          })]
+        }), isEnv && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              flex: 1
+            },
+            children: t('blocklet.publish.docker.description')
+          }), /*#__PURE__*/_jsx(TextField, {
+            disabled: readOnly,
+            value: item.description,
+            onChange: handleSetDescription,
+            sx: {
+              flex: 1
+            },
+            label: t('blocklet.publish.docker.description')
+          })]
+        }), isPublish && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              flex: 1
+            },
+            children: t('blocklet.publish.docker.portType')
+          }), /*#__PURE__*/_jsxs(Select, {
+            value: item.type || 'docker',
+            onChange: handleSetType,
+            children: [/*#__PURE__*/_jsx(MenuItem, {
+              value: "docker",
+              children: "Docker"
+            }), /*#__PURE__*/_jsx(MenuItem, {
+              value: "web",
+              children: "Web"
+            })]
+          })]
+        }), isPublish && item.type === 'web' && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              flex: 1
+            },
+            children: t('blocklet.publish.docker.path')
+          }), /*#__PURE__*/_jsx(TextField, {
+            disabled: readOnly,
+            value: item.path,
+            onChange: handleSetPath,
+            sx: {
+              flex: 1
+            },
+            label: t('blocklet.publish.docker.path')
+          })]
+        }), isPublish && item.type === 'web' && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              flex: 1
+            },
+            children: t('blocklet.publish.docker.name')
+          }), /*#__PURE__*/_jsx(TextField, {
+            disabled: readOnly,
+            value: item.name,
+            onChange: handleSetName,
+            sx: {
+              flex: 1
+            },
+            label: t('blocklet.publish.docker.name')
+          })]
+        }), isPublish && item.type === 'web' && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              flex: 1
+            },
+            children: t('blocklet.publish.docker.prefix')
+          }), /*#__PURE__*/_jsx(TextField, {
+            disabled: readOnly,
+            value: item.prefix,
+            onChange: handleSetPrefix,
+            sx: {
+              flex: 1
+            },
+            label: t('blocklet.publish.docker.prefix')
+          })]
+        })]
+      })
+    })]
+  });
+}
+ResourceDockerInputItem.propTypes = {
+  dockerParams: PropTypes.object.isRequired,
+  setDockerParams: PropTypes.func.isRequired,
+  dataKey: PropTypes.string.isRequired,
+  item: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired
+};
+ResourceDockerInputItem.defaultProps = {};
+export default ResourceDockerInputItem;