@abtnode/ux 1.16.14-beta-963cb583 → 1.16.14-beta-a2de000a

package/es/blocklet/component/add.js

@@ -1115,6 +1115,7 @@ const DialogWrapper = styled(Dialog)`
     padding-right: 0;
     padding-bottom: 0;
   }
+
   .MuiDialogActions-root {
     padding: 16px 24px;
   }
@@ -1127,8 +1128,8 @@ const TypographyWrapper = styled(Typography)`
   height: 100%;
 `;
 const RightContent = styled.div`
-  padding: 34px 24px 24px;
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -1158,6 +1159,8 @@ const DialogContentWrapper = styled(DialogContentText)`
   // mobile extra style
   if (className === 'mobileStyle') {
     return `
+      height: 100%;
+
       & > div{
         height: 100%;
       }
@@ -1167,6 +1170,8 @@ const DialogContentWrapper = styled(DialogContentText)`
         }
       }
 
+
+
       // content-panel
       .root-header + div{
         padding-top: 0;
@@ -1176,6 +1181,19 @@ const DialogContentWrapper = styled(DialogContentText)`
         }
       }
 
+      header + div {
+        padding-top: 0;
+      }
+
+      header {
+        .header-title {
+          margin-left: 0;
+        }
+
+        .header-title-name  {
+          max-width: 100% !important;
+        }
+      }
       `;
   }
   return `

package/es/blocklet/storage/backups.js

@@ -2,52 +2,12 @@ import Tag from '@arcblock/ux/lib/Tag';
 import Datatable from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, CircularProgress, Icon, Link, Tooltip, Typography } from '@mui/material';
-import React, { useCallback, useState } from 'react';
-import { isEmpty, isNull, throttle } from 'lodash';
-import { useAsyncEffect } from 'ahooks';
+import React from 'react';
+import { isEmpty, isNull } from 'lodash';
 import dayjs from '@abtnode/util/lib/dayjs';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import { array, object } from 'prop-types';
-import { useNodeContext } from '../../contexts/node';
-import { useBlockletContext } from '../../contexts/blocklet';
-
-/**
- * @description
- * @param {{ blocklet: import('@abtnode/client').BlockletState }} { blocklet }
- * @return {{backups: import('@abtnode/client').Backup[]}}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-function useBackups({
-  blocklet,
-  loading,
-  progress
-}) {
-  const [backups, setBackups] = useState([]);
-  const {
-    api
-  } = useNodeContext();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const fetchBackups = useCallback(throttle(async () => {
-    const {
-      backups: data
-    } = await api.getBlockletBackups({
-      input: {
-        did: blocklet?.meta?.did
-      }
-    });
-    setBackups(data ?? []);
-  }, 2000), []);
-
-  // eslint-disable-next-line require-await
-  useAsyncEffect(async () => {
-    fetchBackups();
-  }, [blocklet?.meta?.did, progress, loading]);
-  return {
-    backups
-  };
-}
+import useBackups from '../../hooks/use-backups';
 
 /**
  * @description
@@ -57,6 +17,9 @@ function useBackups({
  * }} { progress, spaceGateways, ...rest }
  * @return {*}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function SpacesBackupRecords({
   progress,
   spaceGateways,
@@ -66,13 +29,9 @@ function SpacesBackupRecords({
     t,
     locale
   } = useLocaleContext();
-  const {
-    blocklet
-  } = useBlockletContext();
   const {
     backups
   } = useBackups({
-    blocklet,
     progress
   });
   const columns = [{
@@ -152,9 +111,14 @@ function SpacesBackupRecords({
       customBodyRenderLite: index => {
         const {
           status,
-          message
+          message,
+          createdAt
         } = backups?.[index] ?? {};
-        if (isNull(status)) {
+        const timeoutError = isNull(status) && dayjs().diff(createdAt, 'hours') > 6;
+        const timeoutErrorMessage = timeoutError && t('common.timeoutError');
+        const pending = isNull(status) && !timeoutError;
+        const success = status === 0 && !timeoutError;
+        if (pending) {
           return /*#__PURE__*/_jsxs(Typography, {
             display: "inline-flex",
             alignItems: "center",
@@ -167,10 +131,13 @@ function SpacesBackupRecords({
             }), t('common.progress')]
           });
         }
-        const node = !status ? /*#__PURE__*/_jsx(Tag, {
-          type: "success",
-          children: t('common.succeeded')
-        }) : /*#__PURE__*/_jsxs(Box, {
+        if (success) {
+          return /*#__PURE__*/_jsx(Tag, {
+            type: "success",
+            children: t('common.succeeded')
+          });
+        }
+        return /*#__PURE__*/_jsxs(Box, {
           display: "inline-flex",
           alignItems: "center",
           children: [/*#__PURE__*/_jsx(Tag, {
@@ -182,7 +149,7 @@ function SpacesBackupRecords({
               alignItems: 'center',
               flexShrink: 0
             },
-            title: message,
+            title: message || timeoutErrorMessage,
             children: /*#__PURE__*/_jsx(Icon, {
               children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
                 style: {
@@ -194,7 +161,6 @@ function SpacesBackupRecords({
             })
           })]
         });
-        return node;
       }
     }
   }];

package/es/hooks/use-backup-progress.js

@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BlockletEvents } from '@blocklet/constant';
+import { isNull } from 'lodash';
 import { useNodeContext } from '../contexts/node';
+import useBackups from './use-backups';
 
 /**
  * @description 实时显示备份的进度
@@ -10,6 +12,9 @@ import { useNodeContext } from '../contexts/node';
 function useBackupProgress({
   appDid
 }) {
+  const {
+    backups
+  } = useBackups();
   const [progress, setProgress] = useState({
     message: '',
     progress: 0,
@@ -26,6 +31,18 @@ function useBackupProgress({
       ...data
     }));
   }, [appDid]);
+  useEffect(() => {
+    // @note: isNull(backups[0]?.status) 表示正在备份中...
+    if (backups?.length && isNull(backups[0]?.status)) {
+      const [backup] = backups;
+      setProgress(() => ({
+        message: backup.message,
+        progress: backup.progress,
+        // @note: backup.progress 可能是一个浮点型
+        completed: Boolean(backup.progress >= 100)
+      }));
+    }
+  }, [backups]);
   return progress;
 }
 export default useBackupProgress;

package/es/hooks/use-backups.js

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react';
+import { throttle } from 'lodash';
+import { useAsyncEffect } from 'ahooks';
+import { useNodeContext } from '../contexts/node';
+import { useBlockletContext } from '../contexts/blocklet';
+
+/**
+ * @description
+ * @param {{ blocklet: import('@abtnode/client').BlockletState, progress: Object, loading: boolean, }} { blocklet, progress, loading }
+ * @return {{backups: import('@abtnode/client').Backup[]}}
+ */
+export default function useBackups({
+  loading,
+  progress
+} = {}) {
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [backups, setBackups] = useState([]);
+  const {
+    api
+  } = useNodeContext();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const fetchBackups = useCallback(throttle(async () => {
+    const {
+      backups: data
+    } = await api.getBlockletBackups({
+      input: {
+        did: blocklet?.meta?.did
+      }
+    });
+    setBackups(data ?? []);
+  }, 2000), []);
+
+  // eslint-disable-next-line require-await
+  useAsyncEffect(async () => {
+    fetchBackups();
+  }, [blocklet?.meta?.did, progress, loading]);
+  return {
+    backups
+  };
+}

package/es/locales/en.js

@@ -160,7 +160,7 @@ module.exports = {
     expires: 'Expires',
     export: 'Export',
     externalIp: 'External IP',
-    failed: 'failed',
+    failed: 'Failed',
     filter: 'Log Filter',
     fingerprint: 'Fingerprint',
     finish: 'Finish',
@@ -311,7 +311,8 @@ module.exports = {
     progress: 'In progress',
     startTime: 'Start time',
     endTime: 'End time',
-    selected: 'Selected'
+    selected: 'Selected',
+    timeoutError: 'Timeout error'
   },
   blocklet: {
     external: 'External',

package/es/locales/zh.js

@@ -316,7 +316,8 @@ module.exports = {
     progress: '进行中',
     startTime: '开始时间',
     endTime: '结束时间',
-    selected: '已选中'
+    selected: '已选中',
+    timeoutError: '超时错误'
   },
   blocklet: {
     external: '外部',

package/lib/blocklet/component/add.js

@@ -1117,9 +1117,9 @@ AddComponent.defaultProps = {
 };
 
 // FIXME: @zhanghan 下面代码中的 header:empty 用于修复 e2e-test 中的问题 core/webapp/cypress/e2e/3-blocklet-lifecycle.cy.js L70
-const DialogWrapper = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n    padding-left: 0;\n    padding-right: 0;\n    padding-bottom: 0;\n  }\n  .MuiDialogActions-root {\n    padding: 16px 24px;\n  }\n  header:empty {\n    display: none;\n  }\n"])));
+const DialogWrapper = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialogContent-root {\n    padding-left: 0;\n    padding-right: 0;\n    padding-bottom: 0;\n  }\n\n  .MuiDialogActions-root {\n    padding: 16px 24px;\n  }\n  header:empty {\n    display: none;\n  }\n"])));
 const TypographyWrapper = (0, _styled.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
-const RightContent = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 34px 24px 24px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  .bottom-button {\n    min-width: 200px;\n  }\n\n  // blocklet-select-side\n  aside {\n    width: 140px;\n  }\n"])));
+const RightContent = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  .bottom-button {\n    min-width: 200px;\n  }\n\n  // blocklet-select-side\n  aside {\n    width: 140px;\n  }\n"])));
 const isMobileDialogContent = props => {
   if (props.isMobile) {
     return "\n          height: calc(100vh - 56px - 64px - 48px);\n        ";
@@ -1132,7 +1132,7 @@ const DialogContentWrapper = (0, _styled.default)(_DialogContentText.default)(_t
   } = _ref9;
   // mobile extra style
   if (className === 'mobileStyle') {
-    return "\n      & > div{\n        height: 100%;\n      }\n      .root-header {\n        .app-name-content {\n          display: none;\n        }\n      }\n\n      // content-panel\n      .root-header + div{\n        padding-top: 0;\n        position: relative;\n        & > div {\n          padding-top: 0;\n        }\n      }\n\n      ";
+    return "\n      height: 100%;\n\n      & > div{\n        height: 100%;\n      }\n      .root-header {\n        .app-name-content {\n          display: none;\n        }\n      }\n\n\n\n      // content-panel\n      .root-header + div{\n        padding-top: 0;\n        position: relative;\n        & > div {\n          padding-top: 0;\n        }\n      }\n\n      header + div {\n        padding-top: 0;\n      }\n\n      header {\n        .header-title {\n          margin-left: 0;\n        }\n\n        .header-title-name  {\n          max-width: 100% !important;\n        }\n      }\n      ";
   }
   return "\n      height: 72vh;\n      position: relative;\n      .root-header {\n        z-index: auto !important;\n        position: fixed !important;\n      }\n      & > div {\n        height: 100%;\n        width: 100%;\n        max-width: 100%;\n        & > div {\n          max-height: unset !important;\n          max-width: 100%;\n          & > div {\n            // left-panel\n            &:first-child {\n              padding-top: 0;\n              // padding-left: 0;\n              width: 25%;\n              min-width: 240px;\n              & > div:first-child {\n                display: none;\n              }\n              // step\n              & > div:last-child {\n                // margin-top: 32px;\n                margin-top: 0;\n              }\n            }\n            // right-panel\n            &:last-child {\n              padding-top: 0;\n              padding-right: 24px;\n              overflow-y: auto;\n              .app-content {\n                padding: 0 0 24px 0;\n              }\n              .button-container {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n\n    ";
 }, props => isMobileDialogContent(props), props => isMobileDialogContent(props));

package/lib/blocklet/storage/backups.js

@@ -8,23 +8,22 @@ var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
 var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _lodash = require("lodash");
-var _ahooks = require("ahooks");
 var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 var _propTypes = require("prop-types");
-var _node = require("../../contexts/node");
-var _blocklet = require("../../contexts/blocklet");
+var _useBackups = _interopRequireDefault(require("../../hooks/use-backups"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["progress", "spaceGateways"];
 /**
  * @description
- * @param {{ blocklet: import('@abtnode/client').BlockletState }} { blocklet }
- * @return {{backups: import('@abtnode/client').Backup[]}}
+ * @param {{
+ *  progress: any,
+ *  spaceGateways: Array<import('./connected').SpaceGateway>
+ * }} { progress, spaceGateways, ...rest }
+ * @return {*}
  */
-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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -33,64 +32,19 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function useBackups(_ref) {
-  var _blocklet$meta2;
-  let {
-    blocklet,
-    loading,
-    progress
-  } = _ref;
-  const [backups, setBackups] = (0, _react.useState)([]);
-  const {
-    api
-  } = (0, _node.useNodeContext)();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const fetchBackups = (0, _react.useCallback)((0, _lodash.throttle)(async () => {
-    var _blocklet$meta;
-    const {
-      backups: data
-    } = await api.getBlockletBackups({
-      input: {
-        did: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did
-      }
-    });
-    setBackups(data !== null && data !== void 0 ? data : []);
-  }, 2000), []);
-
-  // eslint-disable-next-line require-await
-  (0, _ahooks.useAsyncEffect)(async () => {
-    fetchBackups();
-  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, progress, loading]);
-  return {
-    backups
-  };
-}
-
-/**
- * @description
- * @param {{
- *  progress: any,
- *  spaceGateways: Array<import('./connected').SpaceGateway>
- * }} { progress, spaceGateways, ...rest }
- * @return {*}
- */
-function SpacesBackupRecords(_ref2) {
+function SpacesBackupRecords(_ref) {
   let {
       progress,
       spaceGateways
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const {
-    blocklet
-  } = (0, _blocklet.useBlockletContext)();
   const {
     backups
-  } = useBackups({
-    blocklet,
+  } = (0, _useBackups.default)({
     progress
   });
   const columns = [{
@@ -172,9 +126,14 @@ function SpacesBackupRecords(_ref2) {
         var _backups$index;
         const {
           status,
-          message
+          message,
+          createdAt
         } = (_backups$index = backups === null || backups === void 0 ? void 0 : backups[index]) !== null && _backups$index !== void 0 ? _backups$index : {};
-        if ((0, _lodash.isNull)(status)) {
+        const timeoutError = (0, _lodash.isNull)(status) && (0, _dayjs.default)().diff(createdAt, 'hours') > 6;
+        const timeoutErrorMessage = timeoutError && t('common.timeoutError');
+        const pending = (0, _lodash.isNull)(status) && !timeoutError;
+        const success = status === 0 && !timeoutError;
+        if (pending) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
             display: "inline-flex",
             alignItems: "center",
@@ -187,10 +146,13 @@ function SpacesBackupRecords(_ref2) {
             }), t('common.progress')]
           });
         }
-        const node = !status ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
-          type: "success",
-          children: t('common.succeeded')
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        if (success) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
+            type: "success",
+            children: t('common.succeeded')
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           display: "inline-flex",
           alignItems: "center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
@@ -202,7 +164,7 @@ function SpacesBackupRecords(_ref2) {
               alignItems: 'center',
               flexShrink: 0
             },
-            title: message,
+            title: message || timeoutErrorMessage,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Icon, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelpOutline.default, {
                 style: {
@@ -214,7 +176,6 @@ function SpacesBackupRecords(_ref2) {
             })
           })]
         });
-        return node;
       }
     }
   }];

package/lib/hooks/use-backup-progress.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _constant = require("@blocklet/constant");
+var _lodash = require("lodash");
 var _node = require("../contexts/node");
+var _useBackups = _interopRequireDefault(require("./use-backups"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -21,6 +24,9 @@ function useBackupProgress(_ref) {
   let {
     appDid
   } = _ref;
+  const {
+    backups
+  } = (0, _useBackups.default)();
   const [progress, setProgress] = (0, _react.useState)({
     message: '',
     progress: 0,
@@ -35,6 +41,19 @@ function useBackupProgress(_ref) {
   useSubscription(_constant.BlockletEvents.backupProgress, data => {
     setProgress(() => _objectSpread({}, data));
   }, [appDid]);
+  (0, _react.useEffect)(() => {
+    var _backups$;
+    // @note: isNull(backups[0]?.status) 表示正在备份中...
+    if (backups !== null && backups !== void 0 && backups.length && (0, _lodash.isNull)((_backups$ = backups[0]) === null || _backups$ === void 0 ? void 0 : _backups$.status)) {
+      const [backup] = backups;
+      setProgress(() => ({
+        message: backup.message,
+        progress: backup.progress,
+        // @note: backup.progress 可能是一个浮点型
+        completed: Boolean(backup.progress >= 100)
+      }));
+    }
+  }, [backups]);
   return progress;
 }
 var _default = useBackupProgress;

package/lib/hooks/use-backups.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useBackups;
+var _react = require("react");
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _node = require("../contexts/node");
+var _blocklet = require("../contexts/blocklet");
+/**
+ * @description
+ * @param {{ blocklet: import('@abtnode/client').BlockletState, progress: Object, loading: boolean, }} { blocklet, progress, loading }
+ * @return {{backups: import('@abtnode/client').Backup[]}}
+ */
+function useBackups() {
+  var _blocklet$meta2;
+  let {
+    loading,
+    progress
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
+  const [backups, setBackups] = (0, _react.useState)([]);
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const fetchBackups = (0, _react.useCallback)((0, _lodash.throttle)(async () => {
+    var _blocklet$meta;
+    const {
+      backups: data
+    } = await api.getBlockletBackups({
+      input: {
+        did: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did
+      }
+    });
+    setBackups(data !== null && data !== void 0 ? data : []);
+  }, 2000), []);
+
+  // eslint-disable-next-line require-await
+  (0, _ahooks.useAsyncEffect)(async () => {
+    fetchBackups();
+  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, progress, loading]);
+  return {
+    backups
+  };
+}

package/lib/locales/en.js

@@ -162,7 +162,7 @@ module.exports = {
     expires: 'Expires',
     export: 'Export',
     externalIp: 'External IP',
-    failed: 'failed',
+    failed: 'Failed',
     filter: 'Log Filter',
     fingerprint: 'Fingerprint',
     finish: 'Finish',
@@ -313,7 +313,8 @@ module.exports = {
     progress: 'In progress',
     startTime: 'Start time',
     endTime: 'End time',
-    selected: 'Selected'
+    selected: 'Selected',
+    timeoutError: 'Timeout error'
   },
   blocklet: {
     external: 'External',

package/lib/locales/zh.js

@@ -318,7 +318,8 @@ module.exports = {
     progress: '进行中',
     startTime: '开始时间',
     endTime: '结束时间',
-    selected: '已选中'
+    selected: '已选中',
+    timeoutError: '超时错误'
   },
   blocklet: {
     external: '外部',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.14-beta-963cb583",
+  "version": "1.16.14-beta-a2de000a",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -27,23 +27,23 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.14-beta-963cb583",
-    "@abtnode/constant": "1.16.14-beta-963cb583",
-    "@abtnode/util": "1.16.14-beta-963cb583",
+    "@abtnode/auth": "1.16.14-beta-a2de000a",
+    "@abtnode/constant": "1.16.14-beta-a2de000a",
+    "@abtnode/util": "1.16.14-beta-a2de000a",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.89",
-    "@arcblock/did-connect": "^2.7.5",
+    "@arcblock/did-connect": "^2.7.6",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.5",
-    "@arcblock/nft-display": "2.7.5",
-    "@arcblock/react-hooks": "^2.7.5",
-    "@arcblock/terminal": "^2.7.5",
-    "@arcblock/ux": "^2.7.5",
-    "@blocklet/constant": "1.16.14-beta-963cb583",
-    "@blocklet/launcher-layout": "2.1.90",
+    "@arcblock/icons": "^2.7.6",
+    "@arcblock/nft-display": "2.7.6",
+    "@arcblock/react-hooks": "^2.7.6",
+    "@arcblock/terminal": "^2.7.6",
+    "@arcblock/ux": "^2.7.6",
+    "@blocklet/constant": "1.16.14-beta-a2de000a",
+    "@blocklet/launcher-layout": "2.1.93",
     "@blocklet/list": "^0.12.25",
-    "@blocklet/meta": "1.16.14-beta-963cb583",
-    "@blocklet/ui-react": "^2.7.5",
+    "@blocklet/meta": "1.16.14-beta-a2de000a",
+    "@blocklet/ui-react": "^2.7.6",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -98,7 +98,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "82bae80cd584a096719d6985740e13f15b4f46bf",
+  "gitHead": "ed1336f2b7d3e6a4d5eeafd3816e6573c53ad543",
   "exports": {
     ".": {
       "import": "./es/index.js",