@abtnode/ux 1.16.16 → 1.16.17-beta-7ec31a60

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

@@ -0,0 +1,582 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CreateRelease;
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _semver = _interopRequireDefault(require("semver"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Breadcrumbs = _interopRequireDefault(require("@mui/material/Breadcrumbs"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _DeleteOutline = _interopRequireDefault(require("@mui/icons-material/DeleteOutline"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _constant = require("@blocklet/constant");
+var _constant2 = require("@abtnode/constant");
+var _bundleAvatar = _interopRequireDefault(require("../bundle-avatar"));
+var _node = require("../../contexts/node");
+var _blocklet = require("../../contexts/blocklet");
+var _emptySpinner = _interopRequireDefault(require("../../empty-spinner"));
+var _resource = _interopRequireDefault(require("./resource"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } // eslint-disable-next-line import/no-unresolved
+const UploaderComponent = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('@blocklet/uploader/react'))).then(res => ({
+  default: res.Uploader
+})));
+const addComponentTabs = _ref => {
+  let {
+    tabs,
+    blocklet,
+    ancestors = []
+  } = _ref;
+  const key = blocklet.meta.did;
+  tabs.push({
+    label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      ml: -4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
+        size: 24,
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        ml: "16px",
+        className: "text",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          children: blocklet.meta.title
+        })
+      })]
+    }, key),
+    value: key
+  });
+};
+const pickParams = release => (0, _pick.default)(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+function CreateRelease(_ref2) {
+  var _tabs$;
+  let rest = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    projectId,
+    releaseId: inputReleaseId
+  } = (0, _reactRouterDom.useParams)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [params, setParams] = (0, _useSetState.default)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [release, setRelease] = (0, _react.useState)(null);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const uploaderLogoRef = (0, _react.useRef)(null);
+  const uploaderScreenshotRef = (0, _react.useRef)(null);
+  const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
+  const mode = inputReleaseId === 'create' ? 'create' : 'edit';
+  const tabs = [];
+  const resourceComponents = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.children) || []).filter(x => x.meta.capabilities.resourceExportPage);
+  resourceComponents.forEach(item => {
+    addComponentTabs({
+      tabs,
+      blocklet: item,
+      t,
+      ancestors: [blocklet]
+    });
+  });
+  const [tab, setTab] = (0, _react.useState)((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.value);
+  const isPublished = (release === null || release === void 0 ? void 0 : release.status) === 'published';
+  const readOnly = isPublished;
+  const getProject = () => {
+    api.getProject({
+      input: {
+        did: blocklet.meta.did,
+        projectId
+      }
+    }).then(res => {
+      setLoading(false);
+      const data = res.project || {};
+      if (!data.blockletVersion) {
+        data.blockletVersion = '1.0.0';
+      } else if (_semver.default.valid(data.blockletVersion)) {
+        data.blockletVersion = _semver.default.inc(data.blockletVersion, 'patch');
+      }
+      setParams(pickParams(data));
+    }).catch(err => {
+      setLoading(false);
+      _Toast.default.error(err.message);
+    });
+  };
+  const getRelease = () => {
+    api.getRelease({
+      input: {
+        did: blocklet.meta.did,
+        projectId,
+        releaseId
+      }
+    }).then(res => {
+      setLoading(false);
+      setParams(pickParams(res === null || res === void 0 ? void 0 : res.release));
+      setRelease(res === null || res === void 0 ? void 0 : res.release);
+    }).catch(err => {
+      setLoading(false);
+      _Toast.default.error(err.message);
+    });
+  };
+  const getData = () => {
+    if (mode === 'edit') {
+      if (!releaseId) {
+        _Toast.default.error('Empty release id');
+        return;
+      }
+      getRelease();
+    }
+    if (mode === 'create') {
+      getProject();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    getData();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onRelease = status => {
+    if (!params.blockletTitle) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
+    if (!params.blockletVersion) {
+      _Toast.default.error(t('blocklet.publish.errorTip.noVersion'));
+      return;
+    }
+    if (status === _constant.PROJECT.RELEASE_STATUS.published) {
+      if (!params.blockletDescription) {
+        _Toast.default.error(t('blocklet.publish.errorTip.noDescription'));
+        return;
+      }
+      if (!params.note) {
+        _Toast.default.error(t('blocklet.publish.errorTip.noNote'));
+        return;
+      }
+    }
+    const _params = _objectSpread({}, params);
+    _params.blockletVersion = _semver.default.valid(_params.blockletVersion);
+    if (!_params.blockletVersion) {
+      _Toast.default.error('Invalid Blocklet Version');
+      return;
+    }
+    _params.blockletTitle = (_params.blockletTitle || '').trim();
+    _params.blockletDescription = (_params.blockletDescription || '').trim();
+    _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
+    _params.note = (_params.note || '').trim();
+    api.createRelease({
+      input: _objectSpread(_objectSpread({}, _params), {}, {
+        did: blocklet.meta.did,
+        projectId,
+        releaseId,
+        status
+      })
+    }).then(() => {
+      if (status === 'draft') {
+        _Toast.default.success('Save draft success');
+        if (mode === 'create') {
+          navigate("../".concat(projectId), {
+            replace: true
+          });
+        }
+      } else {
+        _Toast.default.success('Create Release success');
+        navigate("../".concat(projectId), {
+          replace: true
+        });
+      }
+    }).catch(err => {
+      _Toast.default.error(err.message);
+    });
+  };
+  if (!params && loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_emptySpinner.default, {});
+  }
+  if (!params) {
+    return null;
+  }
+  const uploadLogoPrefix = "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/logo/upload");
+  const uploadScreenshotPrefix = "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/screenshot/upload");
+  const logoUrl = params !== null && params !== void 0 && params.blockletLogo ? "".concat(uploadLogoPrefix, "/").concat(params.blockletLogo) : "".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/static/images/logo.png");
+  const screenshotUrls = ((params === null || params === void 0 ? void 0 : params.blockletScreenshots) || []).filter(Boolean).map(x => "".concat(uploadScreenshotPrefix, "/").concat(x));
+  const item = resourceComponents.find(x => x.meta.did === tab);
+  const resourceContent = item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resource.default, {
+      app: blocklet,
+      component: item,
+      projectId: projectId,
+      release: _objectSpread(_objectSpread({}, release), {}, {
+        id: releaseId
+      })
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    display: "flex",
+    mt: -3,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: t('common.empty')
+    })
+  });
+  const onTabChange = x => {
+    setTab(x);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Main, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "sticky-header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Breadcrumbs.default, {
+        className: "breadcrumbs",
+        "aria-label": "breadcrumb",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: "../",
+          children: t('common.publish')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: "../".concat(projectId),
+          children: (params === null || params === void 0 ? void 0 : params.blockletTitle) || 'Blocklet'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          color: "text.primary",
+          children: mode === 'create' ? t('common.create') : (params === null || params === void 0 ? void 0 : params.blockletVersion) || t('common.edit')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        children: [!isPublished && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outlined",
+            disabled: loading,
+            onClick: () => onRelease(_constant.PROJECT.RELEASE_STATUS.draft),
+            style: {
+              marginRight: 12
+            },
+            children: t('blocklet.publish.saveDraft')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            disabled: loading,
+            onClick: () => onRelease(_constant.PROJECT.RELEASE_STATUS.published),
+            children: t('common.release')
+          })]
+        }), isPublished && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          variant: "contained",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: (0, _urlJoin.default)("".concat(_constant2.WELLKNOWN_SERVICE_PATH_PREFIX, "/api/project/").concat(blocklet.meta.did, "/").concat(projectId, "/").concat(releaseId, "/download/").concat((release.files || [])[0])),
+            children: t('common.download')
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      pt: 3,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        className: "section",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.productTitle')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: "Blocklet ".concat(t('common.title')),
+            placeholder: "Blocklet ".concat(t('common.title')),
+            inputProps: {
+              'data-cy': 'blocklet-title',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletTitle || '',
+            onChange: e => {
+              setParams({
+                blockletTitle: e.target.value
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: "Blocklet ".concat(t('common.description')),
+            placeholder: "Blocklet ".concat(t('common.description')),
+            inputProps: {
+              'data-cy': 'blocklet-description',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletDescription || '',
+            onChange: e => {
+              setParams({
+                blockletDescription: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: "Blocklet ".concat(t('common.introduction')),
+            placeholder: "Blocklet ".concat(t('common.introduction')),
+            inputProps: {
+              'data-cy': 'export-blocklet-introduction',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            multiline: true,
+            rows: 4,
+            value: params.blockletIntroduction || '',
+            onChange: e => {
+              setParams({
+                blockletIntroduction: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        mt: 3,
+        className: "section",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.versionTitle')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: "Blocklet ".concat(t('common.version')),
+            placeholder: "Blocklet ".concat(t('common.version')),
+            inputProps: {
+              'data-cy': 'blocklet-version',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletVersion,
+            onChange: e => {
+              setParams({
+                blockletVersion: e.target.value
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+            label: t('blocklet.publish.releaseNote'),
+            autoComplete: "off",
+            variant: "outlined",
+            inputProps: {
+              'data-cy': 'release-note',
+              readOnly
+            },
+            fullWidth: true,
+            multiline: true,
+            rows: 4,
+            value: params.note,
+            onChange: e => {
+              setParams({
+                note: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.imgTitle')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "subtitle1",
+              sx: {
+                mr: 2
+              },
+              children: t('common.logo')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                flex: 1,
+                cursor: readOnly ? 'default' : 'pointer'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                variant: "square",
+                sx: {
+                  width: 80,
+                  height: 80
+                },
+                alt: "Blocklet Logo",
+                src: logoUrl,
+                onClick: () => !readOnly && uploaderLogoRef.current.open()
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            mt: 3,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              variant: "subtitle1",
+              sx: {
+                mr: 2
+              },
+              children: t('common.screenshot')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              display: "flex",
+              alignItems: "center",
+              sx: {
+                flex: 1,
+                flexWrap: 'wrap'
+              },
+              children: [screenshotUrls.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                className: "screenshot",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  alt: "screenshot",
+                  src: x
+                }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+                  className: "action",
+                  onClick: () => {
+                    const arr = [...params.blockletScreenshots];
+                    arr.splice(index, 1);
+                    setParams({
+                      blockletScreenshots: arr
+                    });
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteOutline.default, {})
+                })]
+              })), screenshotUrls.length < 5 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                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__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
+          id: "\u200Buploader-logo",
+          ref: uploaderLogoRef,
+          popup: true,
+          onUploadFinish: result => {
+            setParams({
+              blockletLogo: result.data.filename
+            });
+          },
+          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          apiPathProps: {
+            uploader: uploadLogoPrefix,
+            disableMediaKitPrefix: true
+          }
+        }, "uploader-screenshot"), /*#__PURE__*/(0, _jsxRuntime.jsx)(UploaderComponent, {
+          id: "\u200Buploader-screenshot",
+          ref: uploaderScreenshotRef,
+          popup: true,
+          onUploadFinish: result => {
+            var _result$data;
+            const blockletScreenshots = params.blockletScreenshots || [];
+            blockletScreenshots.push((_result$data = result.data) === null || _result$data === void 0 ? void 0 : _result$data.filename);
+            setParams({
+              blockletScreenshots
+            });
+          },
+          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          apiPathProps: {
+            uploader: uploadScreenshotPrefix,
+            disableMediaKitPrefix: true
+          }
+        }, "uploader-screenshot")]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "left",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: "h3",
+            children: t('blocklet.publish.resourceTitle')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+            tabs: tabs,
+            current: tab,
+            orientation: "vertical",
+            onChange: onTabChange,
+            sx: {
+              width: '100%'
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          sx: {
+            flex: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: resourceContent
+          })
+        })]
+      })]
+    })]
+  }));
+}
+CreateRelease.propTypes = {};
+CreateRelease.defaultProps = {};
+const Main = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .sticky-header {\n    margin-top: -12px;\n    padding: 12px 0;\n    position: sticky;\n    top: 0;\n    z-index: 99;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: #fff;\n    padding-bottom: 12px;\n    border-bottom: ", ";\n  }\n  .screenshot {\n    margin-bottom: 16px;\n    max-width: 200px;\n    max-height: 140px;\n    width: 200px;\n    height: 140px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #eee;\n    margin-right: 16px;\n    position: relative;\n    .action {\n      visibility: hidden;\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      background-color: rgba(0, 0, 0, 0.2);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    &:hover .action {\n      visibility: visible;\n    }\n  }\n  .screenshot img {\n    width: 100%; /* \u56FE\u50CF\u5BBD\u5EA6\u586B\u5145\u5BB9\u5668 */\n    height: auto; /* \u56FE\u50CF\u9AD8\u5EA6\u81EA\u9002\u5E94 */\n  }\n  .section {\n    max-width: 800px;\n    &.full-width {\n      max-width: 100%;\n    }\n    .MuiTypography-h3 {\n      font-size: 1.1rem;\n      font-weight: 700;\n    }\n    .left {\n      flex-shrink: 0;\n      width: 140px;\n    }\n    .MuiTabs-root {\n      margin-top: 8px;\n      transform: translateX(-16px);\n      .MuiButtonBase-root .text {\n        color: ", ";\n      }\n      .MuiButtonBase-root.Mui-selected .text {\n        color: ", ";\n      }\n    }\n    .MuiTabs-indicator {\n      display: none;\n    }\n    .MuiTypography-subtitle1 {\n      width: 120px;\n      font-weight: 700;\n      font-size: 1rem;\n      ", " {\n        width: 80px;\n      }\n    }\n  }\n  .MuiButtonBase-root {\n    a {\n      color: inherit;\n    }\n  }\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return "1px solid ".concat(theme.palette.divider);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.palette.text.primary;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.palette.primary.main;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints.down('sm');
+});

package/lib/blocklet/publish/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletPublish;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _projectList = _interopRequireDefault(require("./project-list"));
+var _createProject = _interopRequireDefault(require("./create-project"));
+var _releaseList = _interopRequireDefault(require("./release-list"));
+var _createRelease = _interopRequireDefault(require("./create-release"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function BlockletPublish() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Main, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Routes, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+        path: "/",
+        element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_projectList.default, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+        path: "/create",
+        element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createProject.default, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+        path: "/:projectId",
+        element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_releaseList.default, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+        path: "/:projectId/:releaseId",
+        element: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createRelease.default, {})
+      })]
+    })
+  });
+}
+BlockletPublish.propTypes = {};
+const Main = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  a {\n    color: ", ";\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.palette.primary.main;
+});