@blocklet/launcher-workflow 2.5.0 → 2.5.2

package/es/components/launch-serverless/shared/success-display.js

@@ -0,0 +1,429 @@
+import Img from '@arcblock/ux/lib/Img';
+import { getBaseURL, getSubscriptionLink } from '@blocklet/launcher-util/es/util';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
+import { alpha, Box, Button, CircularProgress, Typography, useTheme } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import { useSetState } from 'ahooks';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo } from 'react';
+import { joinURL } from 'ufo';
+import { useLocaleContext } from '../../../contexts/locale';
+import useRequest from '../../../contexts/request';
+import useSerialPolling from '../../../hooks/use-serial-polling';
+import { checkBlockletAccessible, checkUrlAccessible } from '../../../util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function AppSuccessDisplay({
+  accessibleUrl,
+  sessionId,
+  blockletInfo,
+  urls,
+  launchSession
+}) {
+  const theme = useTheme();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const [state, setState] = useSetState({
+    accessibleUrls: [accessibleUrl],
+    checkingBlockletStatus: true,
+    blockletInfo,
+    accessibleUrl,
+    hasTryStart: false,
+    error: null
+  });
+  const showUrl = useMemo(() => {
+    return localStorage.getItem('show-url') === 'true';
+  }, []);
+  const checkLaunchSession = async () => {
+    try {
+      const newBlockletInfo = await checkBlockletAccessible(state.accessibleUrl);
+      if (!newBlockletInfo) {
+        console.warn('the blocklet is not ready or accessible url is not correct, retry getting accessible url');
+        return;
+      }
+      setState({
+        blockletInfo: newBlockletInfo
+      });
+      if (newBlockletInfo.status === 'running') {
+        setState({
+          blockletInfo: newBlockletInfo,
+          checkingBlockletStatus: false
+        });
+      } else if (newBlockletInfo.status === 'starting') {
+        if (!state.hasTryStart) {
+          setState(prev => {
+            if (Date.now() - prev.startTime > 30 * 1000) {
+              api.post(`/launches/${sessionId}/start`);
+              return {
+                ...prev,
+                hasTryStart: true
+              };
+            }
+            return prev;
+          });
+        }
+      } else if (newBlockletInfo.status === 'stopped') {
+        api.post(`/launches/${sessionId}/start`);
+        setState({
+          hasTryStart: true
+        });
+      } else {
+        console.warn('the blocklet is not installed!', newBlockletInfo.status, newBlockletInfo);
+        setState({
+          error: 'installFailed',
+          checkingBlockletStatus: false
+        });
+      }
+      setState({
+        retryRequestCount: 0
+      });
+    } catch (error) {
+      setState(prev => {
+        if (prev.retryRequestCount < 5) {
+          console.warn('check launch session occurred error, retry', prev.retryRequestCount, error);
+          return {
+            ...prev,
+            retryRequestCount: prev.retryRequestCount + 1
+          };
+        }
+        return {
+          ...prev,
+          error: 'installFailed',
+          retryRequestCount: 0
+        };
+      });
+      console.error(error);
+    }
+  };
+
+  // 串行检查，确保前一个请求完成后等待指定时间再发起下一个
+  useSerialPolling({
+    isEnabled: state.checkingBlockletStatus,
+    interval: 3000,
+    onPoll: checkLaunchSession
+  });
+
+  // 获取应用基本信息
+  const appName = blockletInfo?.appName || t('startApp.unknownApp');
+  const appVersion = blockletInfo?.version || launchSession.appInfo?.version || launchSession.blockletMeta?.version || '';
+  const appLogo = blockletInfo?.appLogo || launchSession.appInfo?.appLogo || '';
+  const description = blockletInfo?.appDescription || launchSession.metadata?.description;
+  useEffect(() => {
+    const stepActive = document.querySelector('.step-active');
+    if (stepActive) {
+      stepActive.classList.add('step-checked');
+    }
+  }, []);
+  useEffect(() => {
+    const checkUrls = urls.filter(url => !state.accessibleUrls.includes(url));
+    checkUrls.forEach(url => {
+      checkUrlAccessible(url, 10 * 60 * 1000).then(res => {
+        if (res) {
+          setState(prev => {
+            const accessible = [...prev.accessibleUrls, url];
+            return {
+              ...prev,
+              accessibleUrls: accessible
+            };
+          });
+        }
+      });
+    });
+  }, [state.accessibleUrls, urls, setState]);
+  const appUrl = state.accessibleUrls[0] || urls[0];
+  const started = state.blockletInfo?.status === 'running';
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: '100%',
+      maxWidth: 800,
+      margin: '0 auto',
+      p: {
+        xs: 0,
+        sm: 3
+      }
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      textAlign: "center",
+      mb: 4,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          width: 80,
+          height: 80,
+          borderRadius: '50%',
+          backgroundColor: started ? alpha(theme.palette.success.main, 0.2) : alpha(theme.palette.warning.main, 0.1),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto 16px',
+          transition: 'all 0.3s ease'
+        },
+        children: started ? /*#__PURE__*/_jsx(TaskAltIcon, {
+          sx: {
+            fontSize: 40,
+            color: 'success.main'
+          }
+        }) : /*#__PURE__*/_jsx(CircularProgress, {
+          sx: {
+            color: alpha(theme.palette.warning.main, 0.8)
+          },
+          size: 40
+        })
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h3",
+        component: "h1",
+        fontWeight: "bold",
+        gutterBottom: true,
+        children: started ? `🎉 ${t('startApp.started')}` : `🚀 ${t('startApp.starting')}`
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "text.secondary",
+        children: started ? t('startApp.startedDescription') : t('startApp.startingDescription')
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        p: 3,
+        mb: 3,
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'background.paper'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        mb: 2,
+        flexWrap: "wrap",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          children: [appLogo ? /*#__PURE__*/_jsx(Img, {
+            src: joinURL(appUrl, appLogo),
+            alt: appName,
+            width: 48,
+            height: 48,
+            style: {
+              borderRadius: 10,
+              overflow: 'hidden'
+            }
+          }, appUrl) : null, /*#__PURE__*/_jsxs(Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.projectName')
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "body1",
+              fontWeight: "medium",
+              children: appName
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          minWidth: {
+            xs: '100%',
+            sm: 'auto'
+          },
+          children: [appVersion ? /*#__PURE__*/_jsxs(Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.version')
+            }), /*#__PURE__*/_jsx(Chip, {
+              label: `v${appVersion}`,
+              size: "small",
+              color: "primary",
+              variant: "outlined"
+            })]
+          }) : null, /*#__PURE__*/_jsxs(Box, {
+            flex: 1,
+            textAlign: "left",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              color: "text.hint",
+              mb: 1,
+              children: t('startApp.status')
+            }), started ? /*#__PURE__*/_jsx(Chip, {
+              label: t('startApp.running'),
+              size: "small",
+              color: "success"
+            }) : /*#__PURE__*/_jsx(Chip, {
+              label: t('startApp.startingText'),
+              size: "small",
+              color: "warning",
+              sx: {
+                animation: 'pulse 2s infinite',
+                '@keyframes pulse': {
+                  '0%': {
+                    opacity: 0.85
+                  },
+                  '50%': {
+                    opacity: 0.7
+                  },
+                  '100%': {
+                    opacity: 0.85
+                  }
+                }
+              }
+            })]
+          })]
+        })]
+      }), description && /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        textAlign: "left",
+        children: description
+      }), showUrl && /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          color: "text.hint",
+          textAlign: "left",
+          children: t('startApp.visitUrl')
+        }), urls.map(url => /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          mt: 1,
+          gap: 1,
+          sx: {
+            backgroundColor: 'divider',
+            borderRadius: 1,
+            py: 0.5,
+            px: 1.5,
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(Box, {
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              backgroundColor: state.accessibleUrls.includes(url) ? 'success.main' : 'error.main'
+            }
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            textAlign: "left",
+            sx: {
+              flex: 1,
+              fontSize: '0.875rem',
+              wordBreak: 'break-all'
+            },
+            children: url
+          }), /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: () => navigator.clipboard.writeText(url),
+            children: /*#__PURE__*/_jsx(ContentCopyIcon, {
+              sx: {
+                fontSize: 16
+              }
+            })
+          })]
+        }, url))]
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      mt: 4,
+      children: [/*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        alignItems: "center",
+        children: /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          gap: 2,
+          margin: "0 auto",
+          flexDirection: {
+            xs: 'column-reverse',
+            md: 'row'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "outlined",
+            sx: {
+              minWidth: 220
+            },
+            color: "primary",
+            onClick: () => window.open(joinURL(getBaseURL(), `/api/launches/${sessionId}/redirect/dashboard?appUrl=${appUrl}&appDid=${blockletInfo.appPid}&ownerDid=${blockletInfo.ownerDid}`), '_blank'),
+            startIcon: /*#__PURE__*/_jsx(DashboardIcon, {
+              sx: {
+                fontSize: 24,
+                color: 'primary.main'
+              }
+            }),
+            children: t('startApp.dashboard')
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: started ? 'primary' : 'inherit',
+            disabled: !started,
+            sx: {
+              minWidth: 220,
+              opacity: started ? 1 : 0.7,
+              transform: started ? 'scale(1)' : 'scale(0.98)',
+              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+              background: started ? undefined : `linear-gradient(45deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.primary.main, 0.2)})`,
+              '&:disabled': {
+                color: theme.palette.text.secondary
+              }
+            },
+            onClick: () => started && window.open(joinURL(getBaseURL(), `/api/launches/${sessionId}/redirect/app?appUrl=${appUrl}&appDid=${blockletInfo.appPid}&ownerDid=${blockletInfo.ownerDid}`), '_blank'),
+            startIcon: started ? /*#__PURE__*/_jsx(OpenInNewIcon, {
+              sx: {
+                fontSize: 24,
+                color: 'inherit'
+              }
+            }) : /*#__PURE__*/_jsx(OpenInNewIcon, {
+              sx: {
+                fontSize: 24,
+                color: 'inherit',
+                opacity: 0.5
+              }
+            }),
+            children: started ? t('startApp.visitApp') : t('startApp.preparing')
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        sx: {
+          margin: '0 auto',
+          fontWeight: 400,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          opacity: 0.8
+        },
+        onClick: () => window.open(getSubscriptionLink(launchSession.subscriptionId), '_blank'),
+        children: [/*#__PURE__*/_jsx(OpenInNewIcon, {
+          sx: {
+            fontSize: 14,
+            color: 'inherit'
+          }
+        }), t('startApp.subscription')]
+      })]
+    })]
+  });
+}
+AppSuccessDisplay.propTypes = {
+  launchSession: PropTypes.object.isRequired,
+  urls: PropTypes.arrayOf(PropTypes.string).isRequired,
+  accessibleUrl: PropTypes.string.isRequired,
+  sessionId: PropTypes.string.isRequired,
+  blockletInfo: PropTypes.object.isRequired
+};

package/es/components/launch-serverless/start-app.js

@@ -6,9 +6,10 @@ import { LAUNCH_STATUS } from '@blocklet/launcher-util/es/constant';
 import { useLocaleContext } from '../../contexts/locale';
 import useRequest from '../../contexts/request';
 import useSerialPolling from '../../hooks/use-serial-polling';
-import { checkBlockletAccessible, getBlockletUrls, sortUrls, waitingForRaceAccessible } from '../../util';
+import { getBlockletUrls, sortUrls, waitingForRaceAccessible } from '../../util';
 import BaseServerlessLayout from './shared/base-serverless-layout';
-import { AppSuccessDisplay, calculateEstimatedTime, useFormatTime } from './shared/common-components';
+import { calculateEstimatedTime, useFormatTime } from './shared/common-components';
+import AppSuccessDisplay from './shared/success-display';
 import LoadingDisplayLayout from './shared/loading-display-layout';
 import RetryErrorMessage from './shared/retry-error-message';
 import useWorkflowProgress from './shared/use-workflow-progress';
@@ -44,26 +45,20 @@ export default function StartApp({
   const actions = useMemo(() => {
     // 基础步骤时间
     const steps = [{
-      message: t('startApp.waiting.starting'),
-      time: 5
-    }, {
-      message: t('startApp.waiting.parsing'),
-      time: 1
-    }, {
       message: t('startApp.waiting.initializing'),
-      time: 3
+      time: 1
     }, {
       message: t('startApp.waiting.initializingOwner'),
-      time: 2
+      time: 1
     }, {
       message: t('startApp.waiting.creatingSecurityRules'),
-      time: 2
+      time: 1
     }, {
       message: t('startApp.waiting.assigningDomain'),
-      time: 2
+      time: 1
     }, {
       message: t('startApp.waiting.waitingForDomain'),
-      time: 10
+      time: 1
     }];
 
     // 计算总时间
@@ -84,7 +79,7 @@ export default function StartApp({
   const estimatedTime = useMemo(() => {
     const components = window.blockletMeta?.components || [];
     const additionalTime = calculateEstimatedTime(components);
-    return actions.reduce((acc, action) => acc + action.time, 0) + additionalTime;
+    return actions.reduce((acc, action) => acc + action.time, 0) + Math.ceil(additionalTime * 0.4);
   }, [actions]);
   const {
     time,
@@ -107,8 +102,11 @@ export default function StartApp({
   };
   const checkOneAccessibleUrl = async urls => {
     try {
-      const [accessibleUrl] = await waitingForRaceAccessible(urls);
-      return accessibleUrl;
+      const [accessibleUrl, blockletInfo] = await waitingForRaceAccessible(urls);
+      return {
+        accessibleUrl,
+        blockletInfo
+      };
     } catch (error) {
       console.error(error);
       return null;
@@ -136,88 +134,6 @@ export default function StartApp({
     }
     return urls;
   }, [state, setState]);
-  const checkLaunchSession = async () => {
-    try {
-      const {
-        accessibleUrl
-      } = state;
-      if (!accessibleUrl) {
-        console.warn('the accessible url is not ready, retry getting accessible url');
-        setState({
-          checkingAccessible: true,
-          checkingBlockletStatus: false
-        });
-        return;
-      }
-      const blockletInfo = await checkBlockletAccessible(accessibleUrl);
-      if (!blockletInfo) {
-        console.warn('the blocklet is not ready or accessible url is not correct, retry getting accessible url');
-        return;
-      }
-      setState({
-        blockletInfo
-      });
-      if (blockletInfo.status === 'running') {
-        setState({
-          blockletInfo,
-          starting: false,
-          started: true,
-          checkingBlockletStatus: false,
-          checkingAccessible: false,
-          isLoading: false
-        });
-      } else if (blockletInfo.status === 'starting') {
-        if (!state.hasTryStart) {
-          setState(prev => {
-            if (Date.now() - prev.startTime > estimatedTime * 1000) {
-              api.post(`/launches/${sessionId}/start`);
-              return {
-                ...prev,
-                hasTryStart: true
-              };
-            }
-            return prev;
-          });
-        }
-      } else if (blockletInfo.status === 'stopped') {
-        api.post(`/launches/${sessionId}/start`);
-      } else {
-        console.warn('the blocklet is not installed!', blockletInfo.status, blockletInfo);
-        setState({
-          error: 'installFailed',
-          starting: false,
-          checkingBlockletStatus: false
-        });
-      }
-      setState({
-        retryRequestCount: 0
-      });
-    } catch (error) {
-      setState(prev => {
-        if (prev.retryRequestCount < 5) {
-          console.warn('check launch session occurred error, retry', prev.retryRequestCount, error);
-          return {
-            ...prev,
-            retryRequestCount: prev.retryRequestCount + 1
-          };
-        }
-        return {
-          ...prev,
-          error: 'installFailed',
-          starting: false,
-          retryRequestCount: 0
-        };
-      });
-      console.error(error);
-    }
-  };
-
-  // 串行检查，确保前一个请求完成后等待指定时间再发起下一个
-  useSerialPolling({
-    isEnabled: state.checkingBlockletStatus,
-    interval: CHECK_INTERVAL,
-    onPoll: checkLaunchSession
-  });
 
   // 检查可用性 url
   const checkAccessibleUrls = async () => {
@@ -233,13 +149,20 @@ export default function StartApp({
         });
         return;
       }
-      const accessibleUrl = await checkOneAccessibleUrl(urls);
+      const {
+        accessibleUrl,
+        blockletInfo
+      } = await checkOneAccessibleUrl(urls);
       setState(prev => {
         const obj = accessibleUrl ? {
           ...prev,
+          starting: false,
+          started: true,
+          isLoading: false,
           checkingAccessible: false,
-          checkingBlockletStatus: true,
-          accessibleUrl
+          checkingBlockletStatus: false,
+          accessibleUrl,
+          blockletInfo
         } : prev;
         if (Date.now() - prev.startTime > estimatedTime * 1000 && !prev.hasTryStart) {
           api.post(`/launches/${sessionId}/start`);
@@ -256,7 +179,7 @@ export default function StartApp({
   };
   useSerialPolling({
     isEnabled: state.checkingAccessible,
-    interval: 10000,
+    interval: CHECK_INTERVAL,
     onPoll: checkAccessibleUrls
   });
   useEffect(() => {

package/es/locales/en.js

@@ -91,13 +91,17 @@ export default {
   },
   startApp: {
     pageTitle: 'Start Blocklet',
-    starting: 'Starting Blocklet...',
     started: 'Blocklet is ready to use!',
     startedDescription: 'Your blocklet has been successfully started and is now ready to use.',
+    starting: 'Blocklet is starting up',
+    startingDescription: 'Your blocklet is starting up and will be ready shortly. Please wait a moment.',
+    startingTitle: 'Almost there!',
+    startingWaitMessage: 'Your blocklet is starting and will be accessible in a moment. You can access the management panel to monitor the progress.',
     startFailed: 'Start Blocklet Failed',
     installFailed: 'Install Blocklet Failed',
     visit: 'Visit Blocklet',
     dashboard: 'View Blocklet Dashboard',
+    managementPanel: 'Management Panel',
     subscription: 'Manage Subscription',
     unknownApp: 'Unknown Blocklet',
     appInfo: 'Blocklet Information',
@@ -106,9 +110,11 @@ export default {
     status: 'Status',
     version: 'Version',
     running: 'Running',
+    startingText: 'Starting',
     projectName: 'Project Name',
     visitUrl: 'Visit URL',
     visitApp: 'Visit Blocklet',
+    preparing: 'Preparing...',
     waiting: {
       starting: 'Starting blocklet...',
       parsing: 'Parsing blocklet metadata...',

package/es/locales/zh.js

@@ -90,13 +90,17 @@ export default {
   },
   startApp: {
     pageTitle: '启动 Blocklet',
-    starting: '正在启动 Blocklet...',
     started: 'Blocklet 启动成功',
     startedDescription: '您的 Blocklet 已成功启动并准备就绪，现在可以开始使用了。',
+    starting: 'Blocklet 正在启动',
+    startingDescription: '您的 Blocklet 正在启动中，很快就可以使用了，请稍等片刻。',
+    startingTitle: '即将完成！',
+    startingWaitMessage: '您的 Blocklet 正在启动中，稍后即可访问。您可以先进入管理面板查看启动进度。',
     startFailed: '启动 Blocklet 失败',
     installFailed: '安装 Blocklet 失败',
     visit: '访问 Blocklet',
     dashboard: '查看 Blocklet 仪表盘',
+    managementPanel: '管理面板',
     subscription: '管理订阅',
     unknownApp: '未知 Blocklet',
     appInfo: 'Blocklet 信息',
@@ -105,9 +109,11 @@ export default {
     status: '状态',
     version: '版本',
     running: '运行中',
+    startingText: '启动中',
     projectName: '项目名称',
     visitUrl: '访问地址',
     visitApp: '访问 Blocklet',
+    preparing: '准备中...',
     waiting: {
       starting: '正在启动 Blocklet...',
       parsing: '正在解析 Blocklet 元数据...',

package/es/util.js

@@ -178,7 +178,7 @@ export const checkBlockletAccessible = async (url, timeout = 5000, controller =
   try {
     const urlObj = new URL(url);
     urlObj.protocol = 'https';
-    const res = await axios.get(joinURL(urlObj.toString(), '/api/__blocklet__.js?type=json'), {
+    const res = await axios.get(joinURL(urlObj.toString(), '/api/__blocklet__.js?type=json&owner=1&force=1&nocache=1'), {
       timeout,
       signal: controller?.signal,
       validateStatus: status => {