@blocklet/launcher-workflow 1.7.55 → 1.7.58

package/lib/components/instance-operation.js

@@ -31,6 +31,8 @@ var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/
 
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 
+var _progressMessage = _interopRequireDefault(require("@blocklet/launcher-ux/lib/progress-message"));
+
 var _util = require("../util");
 
 var _query = _interopRequireDefault(require("../hooks/query"));
@@ -83,6 +85,8 @@ function OperationPage(_ref) {
   const {
     api
   } = (0, _request.default)();
+  const [progressStepIndex, setProgressStepIndex] = (0, _react.useState)(0);
+  const [isDone, setIsDone] = (0, _react.useState)(false);
   let createServerTime = sessionStorage.getItem("launcher-create-server-".concat(nftId, "-time"));
 
   if (!createServerTime) {
@@ -100,15 +104,18 @@ function OperationPage(_ref) {
 
       if (instance.status >= _constant.INSTANCE_STATUS.running) {
         const url = (0, _util.getLaunchBlockletUrl)(instance.serverUrl, blockletMetaUrl, locale);
-        setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
-          status: STATUS.success,
-          appUrl: url
-        }));
-        (0, _util.loadURL)(url).finally(() => {
-          setTimeout(() => {
-            window.location.href = url;
-          }, 1000);
-        });
+        setIsDone(true);
+        setTimeout(() => {
+          setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
+            status: STATUS.success,
+            appUrl: url
+          }));
+          (0, _util.loadURL)(url).finally(() => {
+            setTimeout(() => {
+              window.location.href = url;
+            }, 1000);
+          });
+        }, 1000);
       }
     } catch (error) {
       sessionStorage.removeItem("launcher-create-server-".concat(nftId, "-time"));
@@ -145,41 +152,31 @@ function OperationPage(_ref) {
   }, [nftId]); // eslint-disable-line
 
   const successful = launchState.status === STATUS.success;
-  const message = [/*#__PURE__*/(0, _jsxRuntime.jsxs)(MessageDiv, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "msg-before",
-      children: "1/5"
-    }), t('launch.waiting.starting')]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(MessageDiv, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "msg-before",
-      children: "2/5"
-    }), t('launch.waiting.securing')]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(MessageDiv, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "msg-before",
-      children: "3/5"
-    }), t('launch.waiting.prepare')]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(MessageDiv, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "msg-before",
-      children: "4/5"
-    }), t('launch.waiting.waiting')]
-  })];
-  const messageDuration = 40000; // 防止用户刷新后message进度重新开始，修正 message 展示的信息
-
-  const nowTime = Date.now();
-  const creatingTime = nowTime - createServerTime;
-  let step = Math.floor(creatingTime / messageDuration);
-
-  if (step > 0) {
-    if (step >= message.length) {
-      step = message.length - 1;
+  const progressSteps = [t('launch.waiting.starting'), t('launch.waiting.securing'), t('launch.waiting.prepare'), t('launch.waiting.waiting'), t('launch.waiting.done')];
+  const messageDuration = 40000;
+
+  const fixStepIndex = () => {
+    // 防止用户刷新后message进度重新开始，修正 message 展示的信息
+    const nowTime = Date.now();
+    const creatingTime = nowTime - createServerTime;
+    let step = Math.floor(creatingTime / messageDuration);
+
+    if (step > 0) {
+      if (step >= progressSteps.length - 1) {
+        step = progressSteps.length - 2;
+      }
     }
 
-    message.splice(0, step);
-  }
+    setProgressStepIndex(step);
+  };
 
+  (0, _react.useEffect)(() => {
+    fixStepIndex();
+    const timer = setInterval(() => {
+      fixStepIndex();
+    }, 1000);
+    return () => clearInterval(timer); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
       title: t("".concat(type, ".title")),
@@ -189,7 +186,16 @@ function OperationPage(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
     }), launchState.status === STATUS.launching && /*#__PURE__*/(0, _jsxRuntime.jsx)(WaiterContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationWaiter.default, {
-        message: message,
+        message: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            textAlign: 'center'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progressMessage.default, {
+            steps: progressSteps,
+            stepIndex: isDone ? 4 : progressStepIndex,
+            autoGrowth: isDone ? 500 : 20000
+          })
+        }),
         increaseSpeed: 0.3,
         messageLoop: false,
         maybeDuration: 180000,
@@ -237,24 +243,19 @@ function OperationPage(_ref) {
   });
 }
 
-const MessageDiv = _styledComponents.default.div.withConfig({
-  displayName: "instance-operation__MessageDiv",
-  componentId: "sc-1fcaixs-0"
-})([".msg-before{display:inline-block;color:#aaa;font-size:14px;margin-right:6px;}"]);
-
 const LinkEle = _styledComponents.default.a.withConfig({
   displayName: "instance-operation__LinkEle",
-  componentId: "sc-1fcaixs-1"
+  componentId: "sc-1fcaixs-0"
 })(["display:flex;justify-content:center;align-items:center;height:36px;color:", ";"], props => props.theme.palette.primary.main);
 
 const WaiterContainer = _styledComponents.default.div.withConfig({
   displayName: "instance-operation__WaiterContainer",
-  componentId: "sc-1fcaixs-2"
+  componentId: "sc-1fcaixs-1"
 })(["color:#1dc1c7;"]);
 
 const Content = _styledComponents.default.div.withConfig({
   displayName: "instance-operation__Content",
-  componentId: "sc-1fcaixs-3"
+  componentId: "sc-1fcaixs-2"
 })(["margin:auto;height:100%;.link{color:", ";}.link:hover{text-decoration:underline !important;}.status{color:", ";display:flex;flex-direction:column;align-items:center;.status-spinner{color:inherit !important;}.status-text{display:inline-block;padding:0 20px;max-width:420px;margin-top:24px;text-align:center;}}.button{min-width:150px;margin-bottom:100px;}.center{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.launch-page-header{transition:all ease 0.3s;&.header-hide{opacity:0;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
 
 OperationPage.propTypes = {

package/lib/locales/en.js

@@ -60,7 +60,8 @@ module.exports = {
       starting: 'Starting Server Instance',
       securing: 'Securing Server Network',
       prepare: 'Prepare Server Storage',
-      waiting: 'Waiting Server Ready'
+      waiting: 'Waiting Server Ready',
+      done: 'Server is Ready'
     },
     dialog: {
       title: 'Launch Blocklet Server',

package/lib/locales/zh.js

@@ -60,7 +60,8 @@ module.exports = {
       starting: '启动节点实例',
       securing: '确保节点的网络安全',
       prepare: '准备好节点存储',
-      waiting: '等待节点就绪'
+      waiting: '等待节点就绪',
+      done: '节点已准备就绪'
     },
     dialog: {
       title: '创建节点',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.7.55",
+  "version": "1.7.58",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -37,12 +37,13 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.57",
-    "@arcblock/icons": "^2.1.57",
-    "@arcblock/license": "^2.1.57",
-    "@arcblock/ux": "^2.1.57",
-    "@blocklet/launcher-layout": "1.7.55",
-    "@blocklet/launcher-util": "1.7.55",
+    "@arcblock/did-connect": "^2.1.58",
+    "@arcblock/icons": "^2.1.58",
+    "@arcblock/license": "^2.1.58",
+    "@arcblock/ux": "^2.1.58",
+    "@blocklet/launcher-layout": "1.7.58",
+    "@blocklet/launcher-util": "1.7.58",
+    "@blocklet/launcher-ux": "1.7.58",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -73,5 +74,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "5e25b133f2d8e816adf07f035bc612d23a440407"
+  "gitHead": "42a3cca652d1f2703a8e43be65014411933d48e1"
 }