@abtnode/ux 1.16.17-beta-a8cf4b25 → 1.16.17-beta-8903a652

package/es/locales/en.js

@@ -231,6 +231,7 @@ module.exports = {
     port: 'Port',
     pre: 'Previous',
     preferences: 'Preferences',
+    preview: 'Preview',
     protected: 'Protected',
     protocol: 'Protocol',
     publish: 'Publish',
@@ -1430,9 +1431,14 @@ module.exports = {
       hide: 'Hide navigation',
       show: 'Show navigation',
       del: 'Delete navigation',
+      new: 'New',
       noAddSub: "Uninstalled component can't add sub navigation",
       noEdit: "Uninstalled component can't edit",
-      noDel: 'Not allowed delete built-in navigation'
+      noDel: 'Not allowed delete built-in navigation',
+      reset: 'Reset',
+      restConfirmTitle: 'Do you want to clear all custom navigation?',
+      restConfirmDesc: "After clearing, the navigation will be restored to Blocklet's original default configuration.",
+      resetSuccessful: 'Reset successful'
     }
   },
   storage: {

package/es/locales/zh.js

@@ -236,6 +236,7 @@ module.exports = {
     port: '端口',
     pre: '上一步',
     preferences: '偏好',
+    preview: '预览',
     protected: '受保护',
     protocol: '协议',
     publish: '发布',
@@ -1407,8 +1408,8 @@ module.exports = {
     }
   },
   navigation: {
-    navigation: '导航',
     actionFailed: '操作失败',
+    navigation: '导航',
     form: {
       title: '标题',
       titlePlaceholder: '请输入导航标题',
@@ -1435,9 +1436,14 @@ module.exports = {
       hide: '隐藏导航',
       show: '显示导航',
       del: '删除导航',
+      new: '新建',
       noAddSub: '未安装组件无法添加子导航',
       noEdit: '未安装组件的导航无法编辑',
-      noDel: '内置的导航无法删除'
+      noDel: '内置的导航无法删除',
+      reset: '重置',
+      restConfirmTitle: '是否清空所有自定义导航?',
+      restConfirmDesc: '清空后，导航会恢复到 Blocklet 原有默认的配置.',
+      resetSuccessful: '重置成功'
     }
   },
   storage: {

package/es/team/passports/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import AddIcon from '@mui/icons-material/Add';
 import Box from '@mui/material/Box';
+import Toast from '@arcblock/ux/lib/Toast';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Button from '@arcblock/ux/lib/Button';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
@@ -10,7 +11,7 @@ import Spinner from '@mui/material/CircularProgress';
 import EditIcon from '@arcblock/icons/lib/EditIcon';
 import LockIcon from '@arcblock/icons/lib/LockIcon';
 import ExternalIssuerIcon from '@arcblock/icons/lib/ExternalIssuerIcon';
-import Toast from '@arcblock/ux/lib/Toast';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { useNodeContext } from '../../contexts/node';
 import { useTeamContext } from '../../contexts/team';
 import { sleep, isProtectedRole, BlockletAdminRoles } from '../../util';
@@ -52,6 +53,7 @@ export default function PassportList({
   const [showTrustedFactories, setShowTrustedFactories] = useState(false);
   const [search, setSearch] = useState('');
   const [loading, setLoading] = useState(false);
+  const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
   const toggleShowIssue = async e => {
     e.stopPropagation();
     if (loading) {
@@ -176,6 +178,10 @@ export default function PassportList({
       className: "list",
       children: filteredRoles.map(role => /*#__PURE__*/_jsxs(Box, {
         "data-cy": `passport-${role.name}`,
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        },
         className: "item",
         display: "flex",
         alignItems: "center",
@@ -205,7 +211,7 @@ export default function PassportList({
             className: "title",
             children: role.title
           })]
-        }), /*#__PURE__*/_jsx(Box, {
+        }), !isMobile && /*#__PURE__*/_jsx(Box, {
           className: "description",
           children: role.description
         }), /*#__PURE__*/_jsx(Permission, {

package/lib/blocklet/component/domain-list.js

@@ -21,6 +21,7 @@ var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _base = require("@abtnode/util/lib/base32");
 var _urlEvaluation = require("@abtnode/util/lib/url-evaluation");
 var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
@@ -28,9 +29,9 @@ var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _util = require("@blocklet/meta/lib/util");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _blocklet = require("../../contexts/blocklet");
 var _node = require("../../contexts/node");
+var _didAddress = _interopRequireDefault(require("../../did-address"));
 var _permission = require("../../permission");
 var _util2 = require("../../util");
 var _addCert = _interopRequireDefault(require("../add-cert"));
@@ -41,10 +42,13 @@ var _types = require("../types");
 var _util3 = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+const _excluded = ["domain", "children"];
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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 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; }
@@ -81,9 +85,8 @@ function DomainList(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = (0, _react.useState)(null);
   const [showAllDomains, setShowAllDomains] = (0, _react.useState)(false);
-  const theme = (0, _useTheme.default)();
+  const isMobile = (0, _useMediaQuery.default)(x => x.breakpoints.down('md'));
   const hasMutatePermission = (0, _react.useMemo)(() => {
     let res = hasPermission;
     if ((0, _util3.isServerless)(blocklet)) {
@@ -91,12 +94,6 @@ function DomainList(_ref) {
     }
     return res;
   }, [hasPermission, inService, blocklet]);
-  const handlePopoverOpen = event => {
-    setDomainInfoAnchorEl(event.currentTarget);
-  };
-  const handlePopoverClose = () => {
-    setDomainInfoAnchorEl(null);
-  };
   const {
     site
   } = blocklet;
@@ -161,157 +158,100 @@ function DomainList(_ref) {
         severity: "warning",
         children: t('blocklet.router.noRunning')
       })
-    }), (showAllDomains ? domains : displayDomains).map((domain, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      mt: index ? 0 : 1,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
-          domain: domain,
-          filters: ['domain']
-        }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          sx: {
-            ml: 2,
-            mr: 0.5
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DomainLink, {
-            domain: domain,
-            target: "_blank",
-            children: domain.value
-          })
-        }), domain.type === 'nft-domain' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
-            onMouseEnter: handlePopoverOpen,
-            onMouseLeave: handlePopoverClose,
-            style: {
-              cursor: 'pointer',
-              fill: theme.palette.primary.main
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
-            id: "mouse-over-popover",
-            style: {
-              pointerEvents: 'none'
-            },
-            open: Boolean(domainInfoAnchorEl),
-            anchorEl: domainInfoAnchorEl,
-            anchorOrigin: {
-              vertical: 'bottom',
-              horizontal: 'left'
-            },
-            transformOrigin: {
-              vertical: 'top',
-              horizontal: 'left'
-            },
-            onClose: handlePopoverClose,
-            disableRestoreFocus: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
-                style: {
-                  display: 'flex',
-                  flexDirection: 'column'
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-                  component: "div",
-                  style: {
-                    display: 'flex',
-                    alignItems: 'center'
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
-                    style: {
-                      fill: theme.palette.primary.main
-                    }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    component: "span",
-                    style: {
-                      marginLeft: '8px',
-                      fontSize: '18px',
-                      fontWeight: 'bolder'
-                    },
-                    children: t('router.domainAlias.nftDomain')
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-                  component: "div",
-                  style: {
-                    display: 'flex',
-                    marginTop: '12px'
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    component: "span",
-                    style: {
-                      width: '80px',
-                      marginRight: '8px'
-                    },
-                    children: t('common.domain')
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    component: "span",
-                    children: domain.value
-                  })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
-                  component: "div",
-                  style: {
-                    display: 'flex'
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                    component: "span",
-                    style: {
-                      width: '80px',
-                      marginRight: '8px'
-                    },
-                    children: "NFT"
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
-                    did: domain.nftDid
-                  })]
-                })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1
+      },
+      children: (showAllDomains ? domains : displayDomains).map(domain => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          flexDirection: "column",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DomainLink, {
+              domain: domain,
+              target: "_blank",
+              children: domain.value
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                gap: 1
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+                domain: domain,
+                filters: ['domain']
+              }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerAddDomain, {
+                domain: domain,
+                blocklet: blocklet,
+                hasMutatePermission: hasMutatePermission
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                button: {
+                  padding: 0
+                }
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerAction, {
+                hasMutatePermission: hasMutatePermission,
+                site: site,
+                domain: domain,
+                blocklet: blocklet
+              })
+            })]
+          })]
+        }, domain.value), !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+              domain: domain,
+              filters: ['domain']
+            }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              sx: {
+                ml: 2,
+                mr: 0.5
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DomainLink, {
+                domain: domain,
+                target: "_blank",
+                children: domain.value
               })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerAddDomain, {
+              domain: domain,
+              blocklet: blocklet,
+              hasMutatePermission: hasMutatePermission
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            sx: {
+              button: {
+                padding: 0
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerAction, {
+              hasMutatePermission: hasMutatePermission,
+              site: site,
+              domain: domain,
+              blocklet: blocklet
             })
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
-          domain: domain,
-          filters: ['http']
-        }, "".concat(domain.value, "-http")), hasMutatePermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_addCert.default, {
-          domain: domain.value,
-          domainStatus: domain.domainStatus,
-          did: blocklet.meta.did,
-          children: _ref3 => {
-            let {
-              open
-            } = _ref3;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-              size: "small",
-              onClick: e => open(e),
-              children: t('router.cert.genLetsEncryptCert.title')
-            });
-          }
-        })]
-      }), hasMutatePermission && !domain.isProtected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainActions.default, {
-        site: site,
-        domain: domain,
-        blocklet: blocklet
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        title: t('blocklet.router.domainLockTooltip'),
-        placement: "top",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-          disabled: true,
-          size: "large",
-          style: {
-            pointerEvents: 'auto',
-            // padding replace to margin, fix the tooltip position
-            paddingTop: 0,
-            paddingBottom: 0,
-            margin: '12px 0'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {
-            style: {
-              fill: theme.palette.text.disabled
-            }
-          })
-        })
-      })]
-    }, domain.value)), hiddenDomains.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }, domain.value)]
+      }))
+    }), hiddenDomains.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         marginLeft: '20px',
         marginTop: '12px'
@@ -338,11 +278,12 @@ DomainList.defaultProps = {
   hasPermission: false,
   loadingRuntimeInfo: false
 };
-function DomainLink(_ref4) {
+function DomainLink(_ref3) {
   let {
-    domain,
-    children
-  } = _ref4;
+      domain,
+      children
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -351,7 +292,7 @@ function DomainLink(_ref4) {
     accessibility
   } = domain;
   if (!accessibility || accessibility.loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkDiv, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkDiv, _objectSpread(_objectSpread({}, rest), {}, {
       children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
         title: t('blocklet.router.checkUrlAccessible'),
         placement: "top-end",
@@ -362,10 +303,10 @@ function DomainLink(_ref4) {
           })
         })
       })]
-    });
+    }));
   }
   if (!accessibility.accessible) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, _objectSpread(_objectSpread({}, rest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
         title: t('blocklet.router.urlInaccessible'),
         placement: "top-end",
@@ -373,19 +314,201 @@ function DomainLink(_ref4) {
           children: children
         })
       })
-    });
+    }));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       href: href,
       target: "_blank",
       rel: "noopener noreferrer",
       children: children
     })
-  });
+  }));
 }
 DomainLink.propTypes = {
   domain: _types.DomainType.isRequired,
   children: _propTypes.default.any.isRequired
 };
-const LinkDiv = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &,\n  & > * {\n    color: #222;\n    font-size: 18px;\n  }\n\n  .status {\n    margin-left: 8px;\n  }\n"])));
+const LinkDiv = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &,\n  & > * {\n    color: #222;\n    font-size: 18px;\n    word-break: break-all;\n  }\n\n  .status {\n    margin-left: 8px;\n  }\n"])));
+function InnerAction(_ref4) {
+  let {
+    hasMutatePermission,
+    site,
+    domain,
+    blocklet
+  } = _ref4;
+  const theme = (0, _useTheme.default)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  if (hasMutatePermission && !domain.isProtected) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainActions.default, {
+      site: site,
+      domain: domain,
+      blocklet: blocklet
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+    title: t('blocklet.router.domainLockTooltip'),
+    placement: "top",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      disabled: true,
+      size: "large",
+      style: {
+        pointerEvents: 'auto',
+        // padding replace to margin, fix the tooltip position
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {
+        style: {
+          fill: theme.palette.text.disabled
+        }
+      })
+    })
+  });
+}
+InnerAction.propTypes = {
+  hasMutatePermission: _propTypes.default.bool.isRequired,
+  site: _propTypes.default.object.isRequired,
+  domain: _types.DomainType.isRequired,
+  blocklet: _propTypes.default.object.isRequired
+};
+function InnerAddDomain(_ref5) {
+  let {
+    domain,
+    blocklet,
+    hasMutatePermission
+  } = _ref5;
+  const theme = (0, _useTheme.default)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = (0, _react.useState)(null);
+  const handlePopoverOpen = event => {
+    setDomainInfoAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setDomainInfoAnchorEl(null);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [domain.type === 'nft-domain' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        style: {
+          cursor: 'pointer',
+          fill: theme.palette.primary.main
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+        id: "mouse-over-popover",
+        style: {
+          pointerEvents: 'none'
+        },
+        open: Boolean(domainInfoAnchorEl),
+        anchorEl: domainInfoAnchorEl,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        },
+        onClose: handlePopoverClose,
+        disableRestoreFocus: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
+            style: {
+              display: 'flex',
+              flexDirection: 'column'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              component: "div",
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Diamond.default, {
+                style: {
+                  fill: theme.palette.primary.main
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                component: "span",
+                style: {
+                  marginLeft: '8px',
+                  fontSize: '18px',
+                  fontWeight: 'bolder'
+                },
+                children: t('router.domainAlias.nftDomain')
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              component: "div",
+              style: {
+                display: 'flex',
+                marginTop: '12px'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                component: "span",
+                style: {
+                  width: '80px',
+                  marginRight: '8px'
+                },
+                children: t('common.domain')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                component: "span",
+                children: domain.value
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+              component: "div",
+              style: {
+                display: 'flex'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                component: "span",
+                style: {
+                  width: '80px',
+                  marginRight: '8px'
+                },
+                children: "NFT"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, {
+                did: domain.nftDid
+              })]
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+      domain: domain,
+      filters: ['http']
+    }, "".concat(domain.value, "-http")), hasMutatePermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_addCert.default, {
+      domain: domain.value,
+      domainStatus: domain.domainStatus,
+      did: blocklet.meta.did,
+      children: _ref6 => {
+        let {
+          open
+        } = _ref6;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          sx: {
+            padding: 0
+          },
+          size: "small",
+          onClick: e => open(e),
+          children: t('router.cert.genLetsEncryptCert.title')
+        });
+      }
+    })]
+  });
+}
+InnerAddDomain.propTypes = {
+  domain: _types.DomainType.isRequired,
+  blocklet: _propTypes.default.object.isRequired,
+  hasMutatePermission: _propTypes.default.bool.isRequired
+};

package/lib/blocklet/component/index.js

@@ -984,4 +984,4 @@ BlockletComponent.defaultProps = {
   onUpdate: () => {},
   getComponentUrl: () => window.location.origin
 };
-const Div = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-bottom: ", ";\n  }\n\n  @keyframes showDelay {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .component-item {\n    animation: showDelay 0.75s ease 1;\n  }\n"])), props => props.theme.spacing(1));
+const Div = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n  }\n\n  @keyframes showDelay {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  .component-item {\n    animation: showDelay 0.75s ease 1;\n  }\n"])));