@blocklet/launcher-workflow 2.4.3 → 2.4.5

package/es/components/launch-serverless/shared/common-components.js

@@ -0,0 +1,605 @@
+import { getBaseURL, getSubscriptionLink } from '@blocklet/launcher-util/es/util';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import InfoIcon from '@mui/icons-material/Info';
+import InventoryIcon from '@mui/icons-material/Inventory2';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TaskAltIcon from '@mui/icons-material/TaskAlt';
+import { Alert, AlertTitle, alpha, Box, LinearProgress, Typography, useTheme } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { joinURL } from 'ufo';
+import Img from '@arcblock/ux/lib/Img';
+import { useLocaleContext } from '../../../contexts/locale';
+import { checkUrlAccessible } from '../../../util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function proxyUrl(url) {
+  if (url.startsWith('/')) {
+    return joinURL(window.location.origin, url);
+  }
+  return `${window.location.origin}/.well-known/service/proxy?url=${url}`;
+}
+const COMPONENT_BASE_TIME = 2; // 每个组件基础处理时间 4s
+const SIZE_TIME_RATIO = 0.2; // 每 1MB 增加 1s
+// 计算预估安装时间
+export const calculateEstimatedTime = (components = []) => {
+  if (!Array.isArray(components) || components.length === 0) {
+    return 0;
+  }
+
+  // 计算所有组件的总大小（MB）
+  const totalSizeMB = components.reduce((acc, comp) => {
+    const sizeInMB = (comp?.meta?.dist?.size || 0) / (1024 * 1024);
+    return acc + sizeInMB;
+  }, 0);
+
+  // 计算总时间
+  const totalTime = components.length * COMPONENT_BASE_TIME + totalSizeMB * SIZE_TIME_RATIO;
+  return Math.ceil(totalTime);
+};
+export function LoadingContainer({
+  children
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      padding: '32px 16px 16px 16px',
+      maxWidth: 'sm',
+      width: '100%',
+      margin: '0 auto',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: children
+  });
+}
+LoadingContainer.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export function StyledProgress({
+  value
+}) {
+  return /*#__PURE__*/_jsx(LinearProgress, {
+    variant: "determinate",
+    value: value,
+    sx: {
+      height: 8,
+      borderRadius: 4,
+      background: '#f5f5f5',
+      '& .MuiLinearProgress-bar': {
+        borderRadius: 4,
+        background: 'linear-gradient(90deg, #1976d2, #42a5f5)'
+      }
+    }
+  });
+}
+StyledProgress.propTypes = {
+  value: PropTypes.number.isRequired
+};
+export function TimeText({
+  children
+}) {
+  return /*#__PURE__*/_jsx(Typography, {
+    sx: {
+      fontSize: 14,
+      color: '#888',
+      marginLeft: 8,
+      minWidth: 90,
+      textAlign: 'right',
+      display: 'inline-block'
+    },
+    children: children
+  });
+}
+TimeText.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export function ActionCardBox({
+  children,
+  tipFlag = null
+}) {
+  const childrenRef = useRef(children);
+  childrenRef.current = children;
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [currentContent, setCurrentContent] = useState(children);
+  useEffect(() => {
+    if (tipFlag !== null) {
+      // 开始动画：透明度 1 -> 0
+      setIsTransitioning(true);
+
+      // 400ms 后替换内容并开始显示：透明度 0 -> 1
+      const timer = setTimeout(() => {
+        setCurrentContent(childrenRef.current);
+        setIsTransitioning(false);
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [tipFlag]);
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body1",
+    sx: {
+      textAlign: 'center',
+      opacity: isTransitioning ? 0 : 0.5,
+      transition: 'opacity 0.4s ease-in-out'
+    },
+    children: currentContent
+  });
+}
+ActionCardBox.propTypes = {
+  children: PropTypes.node.isRequired,
+  tipFlag: PropTypes.any // 可以是任何类型，用于触发动画
+};
+
+// 公共 Hook：格式化时间
+export const useFormatTime = () => {
+  const formatTime = seconds => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+  return formatTime;
+};
+
+// 公共 Hook：时间递增
+export const useElapsedTime = (elapsedSeconds = 0) => {
+  const [time, setTime] = useState(elapsedSeconds);
+  const timerRef = useRef();
+  useEffect(() => {
+    timerRef.current = setInterval(() => {
+      setTime(t => t + 1);
+    }, 1000);
+    return () => clearInterval(timerRef.current);
+  }, []);
+  return time;
+};
+
+// 公共 Hook：动态进度
+export function useDisplayProgress(start, duration = 5) {
+  const [progress, setProgress] = useState(start);
+  useEffect(() => {
+    setProgress(prev => Math.max(prev, start));
+  }, [start]);
+  useEffect(() => {
+    const timerDuration = Math.round((duration || 1) * 1000 / 99);
+    const interval = setInterval(() => {
+      setProgress(prev => Math.min(prev + 1, 99));
+    }, timerDuration);
+    return () => clearInterval(interval);
+  }, [duration]);
+  return progress;
+}
+
+// 公共组件：产品介绍轮播
+export function ProductIntroCarousel({
+  tips
+}) {
+  const [slideIndex, setSlideIndex] = useState(Math.floor(Math.random() * tips.length));
+  const [slideIn, setSlideIn] = useState(true);
+  const usedIndicesRef = useRef(new Set([0]));
+  useEffect(() => {
+    // 获取下一个随机索引（排除已使用的）
+    const getNextRandomIndex = () => {
+      const availableIndices = tips.map((_, index) => index).filter(index => !usedIndicesRef.current.has(index));
+
+      // 如果所有索引都用过了，重置并重新开始
+      if (availableIndices.length === 0) {
+        usedIndicesRef.current = new Set();
+        return Math.floor(Math.random() * tips.length);
+      }
+
+      // 从可用索引中随机选择一个
+      const randomIndex = Math.floor(Math.random() * availableIndices.length);
+      return availableIndices[randomIndex];
+    };
+    const timer = setInterval(() => {
+      setSlideIn(false);
+      setTimeout(() => {
+        const nextIndex = getNextRandomIndex();
+        setSlideIndex(nextIndex);
+        usedIndicesRef.current = new Set([...usedIndicesRef.current, nextIndex]);
+        setSlideIn(true);
+      }, 400);
+    }, 6000);
+    return () => clearInterval(timer);
+  }, [tips]);
+  if (!tips[slideIndex]) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Alert, {
+    severity: "info",
+    sx: {
+      mt: 8,
+      p: 1.5,
+      opacity: slideIn ? 0.8 : 0,
+      transform: slideIn ? 'translateY(0)' : 'translateY(6px)',
+      transition: 'all 0.4s ease-in-out'
+    },
+    children: [/*#__PURE__*/_jsx(AlertTitle, {
+      sx: {
+        textAlign: 'left'
+      },
+      children: tips[slideIndex].title
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      sx: {
+        textAlign: 'left'
+      },
+      children: tips[slideIndex].desc
+    })]
+  });
+}
+ProductIntroCarousel.propTypes = {
+  tips: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    desc: PropTypes.string.isRequired
+  })).isRequired
+};
+
+// 公共组件：错误处理
+export function ErrorDisplay({
+  error = null,
+  onRetry = null
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  if (!error) return null;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      mt: 3,
+      p: 2,
+      bgcolor: 'error.light',
+      borderRadius: 1
+    },
+    children: [/*#__PURE__*/_jsx(Typography, {
+      color: "error",
+      variant: "body2",
+      children: error
+    }), onRetry && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        mt: 1
+      },
+      children: /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: onRetry,
+        style: {
+          background: 'none',
+          border: '1px solid #f44336',
+          color: '#f44336',
+          padding: '4px 8px',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        children: t('loading.retry')
+      })
+    })]
+  });
+}
+ErrorDisplay.propTypes = {
+  error: PropTypes.string,
+  onRetry: PropTypes.func
+};
+export function AppSuccessDisplay({
+  accessibleUrl,
+  sessionId,
+  blockletInfo,
+  urls,
+  launchSession
+}) {
+  const theme = useTheme();
+  const {
+    t
+  } = useLocaleContext();
+
+  // 获取应用基本信息
+  const appName = blockletInfo?.appName || t('startApp.unknownApp');
+  const appVersion = blockletInfo?.appVersion || '';
+  const appLogo = blockletInfo?.appLogo || '';
+  useEffect(() => {
+    const stepActive = document.querySelector('.step-active');
+    if (stepActive) {
+      stepActive.classList.add('step-checked');
+    }
+  }, []);
+  const [accessibleUrls, setAccessibleUrls] = useState([accessibleUrl]);
+  useEffect(() => {
+    const checkUrls = urls.filter(url => !accessibleUrls.includes(url));
+    checkUrls.forEach(url => {
+      checkUrlAccessible(url, 10 * 60 * 1000).then(res => {
+        if (res) {
+          setAccessibleUrls(prev => {
+            const accessible = [...prev, url];
+            return urls.filter(item => accessible.includes(item));
+          });
+        }
+      });
+    });
+  }, [accessibleUrls, urls]);
+  const appUrl = accessibleUrls[0] || urls[0];
+
+  // 功能卡片数据 - 2x2 网格布局
+  const featureCards = [{
+    id: 'visit-app',
+    icon: /*#__PURE__*/_jsx(OpenInNewIcon, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.visitApp'),
+    description: t('startApp.visitAppDesc'),
+    onClick: () => window.open(joinURL(getBaseURL(), `/api/launches/${sessionId}/redirect/app?appUrl=${appUrl}`), '_blank')
+  }, {
+    id: 'dashboard',
+    icon: /*#__PURE__*/_jsx(DashboardIcon, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.dashboard'),
+    description: t('startApp.dashboardDesc'),
+    onClick: () => window.open(joinURL(getBaseURL(), `/api/launches/${sessionId}/redirect/dashboard?appUrl=${appUrl}`), '_blank')
+  }, {
+    id: 'subscription',
+    icon: /*#__PURE__*/_jsx(InfoIcon, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.subscription'),
+    description: t('startApp.subscriptionDesc'),
+    onClick: () => window.open(getSubscriptionLink(launchSession.subscriptionId), '_blank'),
+    show: !!launchSession.subscriptionId
+  }, {
+    id: 'my-orders',
+    icon: /*#__PURE__*/_jsx(InventoryIcon, {
+      sx: {
+        fontSize: 24,
+        color: 'primary.main'
+      }
+    }),
+    title: t('startApp.myOrders'),
+    description: t('startApp.myOrdersDesc'),
+    onClick: () => window.open(joinURL(getBaseURL(), '/u/orders'), '_blank')
+  }];
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      width: '100%',
+      maxWidth: 800,
+      margin: '0 auto',
+      p: {
+        xs: 2,
+        sm: 3
+      }
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      textAlign: "center",
+      mb: 4,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          width: 80,
+          height: 80,
+          borderRadius: '50%',
+          backgroundColor: alpha(theme.palette.success.main, 0.2),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto 16px'
+        },
+        children: /*#__PURE__*/_jsx(TaskAltIcon, {
+          sx: {
+            fontSize: 40,
+            color: 'success.main'
+          }
+        })
+      }), /*#__PURE__*/_jsxs(Typography, {
+        variant: "h3",
+        component: "h1",
+        fontWeight: "bold",
+        gutterBottom: true,
+        children: ["\uD83C\uDF89 ", t('startApp.started')]
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "body1",
+        color: "text.secondary",
+        children: t('startApp.startedDescription')
+      })]
+    }), /*#__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')
+            }), /*#__PURE__*/_jsx(Chip, {
+              label: t('startApp.running'),
+              size: "small",
+              color: "success"
+            })]
+          })]
+        })]
+      }), /*#__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: 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__*/_jsx(Box, {
+      display: "grid",
+      gridTemplateColumns: {
+        xs: '1fr',
+        sm: '1fr 1fr'
+      },
+      gap: 2,
+      children: featureCards.filter(card => card.show !== false).map(card => /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          p: 3,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          cursor: 'pointer',
+          gap: 1,
+          borderRadius: 2,
+          border: '1px solid',
+          borderColor: 'divider',
+          backgroundColor: 'background.paper',
+          transition: 'all 0.2s ease',
+          '&:hover': {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+          }
+        },
+        onClick: card.onClick,
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            width: 48,
+            height: 48,
+            borderRadius: 2,
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: card.icon
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            fontWeight: "bold",
+            textAlign: "left",
+            gutterBottom: true,
+            children: card.title
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: "text.secondary",
+            textAlign: "center",
+            sx: {
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              fontSize: '0.75rem'
+            },
+            children: card.description
+          })]
+        })]
+      }, card.id))
+    }, appUrl)]
+  });
+}
+AppSuccessDisplay.propTypes = {
+  launchSession: PropTypes.object.isRequired,
+  urls: PropTypes.arrayOf(PropTypes.string).isRequired,
+  accessibleUrl: PropTypes.string.isRequired,
+  sessionId: PropTypes.string.isRequired,
+  blockletInfo: PropTypes.object.isRequired
+};