@abtnode/ux 1.16.17-beta-952ef53d → 1.16.17-beta-d81014f4

package/es/blocklet/actions.js

@@ -23,7 +23,6 @@ import Button from '@arcblock/ux/lib/Button';
 import { getAppMissingConfigs, isDeletableBlocklet, hasRunnableComponent, getDisplayName, isInProgress } from '@blocklet/meta/lib/util';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { BLOCKLET_CONTROLLER_STATUS, BLOCKLET_MODES, SUSPENDED_REASON } from '@blocklet/constant';
-import { APP_STRUCT_VERSION } from '@abtnode/constant';
 import Toast from '@arcblock/ux/lib/Toast';
 import { sleep, formatError, isDownloading } from '../util';
 import { getServerUrl } from './util';
@@ -271,7 +270,7 @@ export default function BlockletActions({
       }
     }
   };
-  const removeAction = !inService && isDeletableBlocklet(blocklet) && blocklet.structVersion === APP_STRUCT_VERSION ? {
+  const removeAction = !inService && isDeletableBlocklet(blocklet) ? {
     action: 'remove',
     icon: Icons.Remove,
     name: t('common.remove'),

package/es/blocklet/component/add.js

@@ -579,7 +579,7 @@ export default function AddComponent({
     } else {
       doc = {
         ...doc,
-        pathPrefix: hasRootPath ? `/${urlPathFriendly(name)}` : '/',
+        pathPrefix: hasRootPath ? `/${urlPathFriendly(title) || urlPathFriendly(name)}` : '/',
         title: title || '',
         componentName: '',
         hasEnvironmentsStep: component.current.meta?.environments?.length > 0

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

@@ -15,16 +15,17 @@ import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useTheme from '@mui/material/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { encode as encodeBase32 } from '@abtnode/util/lib/base32';
 import { isDidDomain } from '@abtnode/util/lib/url-evaluation';
 import LockIcon from '@arcblock/icons/lib/LockIcon';
 import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { isInProgress } from '@blocklet/meta/lib/util';
+import { isAccessible, isInProgress } from '@blocklet/meta/lib/util';
 import Spinner from '@mui/material/CircularProgress';
-import DidAddress from '../../did-address';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
+import DidAddress from '../../did-address';
 import { withPermission } from '../../permission';
 import { BlockletAdminRoles, getSystemDomains, sortDomains } from '../../util';
 import AddCert from '../add-cert';
@@ -66,9 +67,8 @@ function DomainList({
   const {
     t
   } = useLocaleContext();
-  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = useState(null);
   const [showAllDomains, setShowAllDomains] = useState(false);
-  const theme = useTheme();
+  const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
   const hasMutatePermission = useMemo(() => {
     let res = hasPermission;
     if (isServerless(blocklet)) {
@@ -76,12 +76,6 @@ function DomainList({
     }
     return res;
   }, [hasPermission, inService, blocklet]);
-  const handlePopoverOpen = event => {
-    setDomainInfoAnchorEl(event.currentTarget);
-  };
-  const handlePopoverClose = () => {
-    setDomainInfoAnchorEl(null);
-  };
   const {
     site
   } = blocklet;
@@ -133,161 +127,107 @@ function DomainList({
           }), t('common.add')]
         })
       })]
-    }), blocklet.status !== 'running' && /*#__PURE__*/_jsx(Box, {
+    }), isAccessible(blocklet.status) === false && /*#__PURE__*/_jsx(Box, {
       mt: 1.5,
       mb: 1.5,
       children: /*#__PURE__*/_jsx(Alert, {
         severity: "warning",
         children: t('blocklet.router.noRunning')
       })
-    }), (showAllDomains ? domains : displayDomains).map((domain, index) => /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      mt: index ? 0 : 1,
-      children: [/*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        children: [/*#__PURE__*/_jsx(DomainStatus, {
-          domain: domain,
-          filters: ['domain']
-        }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            ml: 2,
-            mr: 0.5
-          },
-          children: /*#__PURE__*/_jsx(DomainLink, {
-            domain: domain,
-            target: "_blank",
-            children: domain.value
-          })
-        }), domain.type === 'nft-domain' && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(DiamondIcon, {
-            onMouseEnter: handlePopoverOpen,
-            onMouseLeave: handlePopoverClose,
-            style: {
-              cursor: 'pointer',
-              fill: theme.palette.primary.main
-            }
-          }), /*#__PURE__*/_jsx(Popover, {
-            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__*/_jsx(Card, {
-              children: /*#__PURE__*/_jsxs(CardContent, {
-                style: {
-                  display: 'flex',
-                  flexDirection: 'column'
-                },
-                children: [/*#__PURE__*/_jsxs(Typography, {
-                  component: "div",
-                  style: {
-                    display: 'flex',
-                    alignItems: 'center'
-                  },
-                  children: [/*#__PURE__*/_jsx(DiamondIcon, {
-                    style: {
-                      fill: theme.palette.primary.main
-                    }
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    component: "span",
-                    style: {
-                      marginLeft: '8px',
-                      fontSize: '18px',
-                      fontWeight: 'bolder'
-                    },
-                    children: t('router.domainAlias.nftDomain')
-                  })]
-                }), /*#__PURE__*/_jsxs(Typography, {
-                  component: "div",
-                  style: {
-                    display: 'flex',
-                    marginTop: '12px'
-                  },
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    component: "span",
-                    style: {
-                      width: '80px',
-                      marginRight: '8px'
-                    },
-                    children: t('common.domain')
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    component: "span",
-                    children: domain.value
-                  })]
-                }), /*#__PURE__*/_jsxs(Typography, {
-                  component: "div",
-                  style: {
-                    display: 'flex'
-                  },
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    component: "span",
-                    style: {
-                      width: '80px',
-                      marginRight: '8px'
-                    },
-                    children: "NFT"
-                  }), /*#__PURE__*/_jsx(DidAddress, {
-                    did: domain.nftDid
-                  })]
-                })]
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1
+      },
+      children: (showAllDomains ? domains : displayDomains).map(domain => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [isMobile && /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          flexDirection: "column",
+          children: [/*#__PURE__*/_jsx(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            children: /*#__PURE__*/_jsx(DomainLink, {
+              domain: domain,
+              target: "_blank",
+              children: domain.value
+            })
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [/*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                gap: 1
+              },
+              children: [/*#__PURE__*/_jsx(DomainStatus, {
+                domain: domain,
+                filters: ['domain']
+              }, `${domain.value}-domain`), /*#__PURE__*/_jsx(InnerAddDomain, {
+                domain: domain,
+                blocklet: blocklet,
+                hasMutatePermission: hasMutatePermission
+              })]
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                button: {
+                  padding: 0
+                }
+              },
+              children: /*#__PURE__*/_jsx(InnerAction, {
+                hasMutatePermission: hasMutatePermission,
+                site: site,
+                domain: domain,
+                blocklet: blocklet
+              })
+            })]
+          })]
+        }, domain.value), !isMobile && /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            children: [/*#__PURE__*/_jsx(DomainStatus, {
+              domain: domain,
+              filters: ['domain']
+            }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                ml: 2,
+                mr: 0.5
+              },
+              children: /*#__PURE__*/_jsx(DomainLink, {
+                domain: domain,
+                target: "_blank",
+                children: domain.value
               })
+            }), /*#__PURE__*/_jsx(InnerAddDomain, {
+              domain: domain,
+              blocklet: blocklet,
+              hasMutatePermission: hasMutatePermission
+            })]
+          }), /*#__PURE__*/_jsx(Box, {
+            sx: {
+              button: {
+                padding: 0
+              }
+            },
+            children: /*#__PURE__*/_jsx(InnerAction, {
+              hasMutatePermission: hasMutatePermission,
+              site: site,
+              domain: domain,
+              blocklet: blocklet
             })
           })]
-        }), /*#__PURE__*/_jsx(DomainStatus, {
-          domain: domain,
-          filters: ['http']
-        }, `${domain.value}-http`), hasMutatePermission && /*#__PURE__*/_jsx(AddCert, {
-          domain: domain.value,
-          domainStatus: domain.domainStatus,
-          did: blocklet.meta.did,
-          children: ({
-            open
-          }) => /*#__PURE__*/_jsx(Button, {
-            size: "small",
-            onClick: e => open(e),
-            children: t('router.cert.genLetsEncryptCert.title')
-          })
-        })]
-      }), hasMutatePermission && !domain.isProtected ? /*#__PURE__*/_jsx(DomainActions, {
-        site: site,
-        domain: domain,
-        blocklet: blocklet
-      }) : /*#__PURE__*/_jsx(Tooltip, {
-        title: t('blocklet.router.domainLockTooltip'),
-        placement: "top",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          disabled: true,
-          size: "large",
-          style: {
-            pointerEvents: 'auto',
-            // padding replace to margin, fix the tooltip position
-            paddingTop: 0,
-            paddingBottom: 0,
-            margin: '12px 0'
-          },
-          children: /*#__PURE__*/_jsx(LockIcon, {
-            style: {
-              fill: theme.palette.text.disabled
-            }
-          })
-        })
-      })]
-    }, domain.value)), hiddenDomains.length > 0 && /*#__PURE__*/_jsx("div", {
+        }, domain.value)]
+      }))
+    }), hiddenDomains.length > 0 && /*#__PURE__*/_jsx("div", {
       style: {
         marginLeft: '20px',
         marginTop: '12px'
@@ -316,7 +256,8 @@ DomainList.defaultProps = {
 };
 function DomainLink({
   domain,
-  children
+  children,
+  ...rest
 }) {
   const {
     t
@@ -327,6 +268,7 @@ function DomainLink({
   } = domain;
   if (!accessibility || accessibility.loading) {
     return /*#__PURE__*/_jsxs(LinkDiv, {
+      ...rest,
       children: [children, /*#__PURE__*/_jsx(Tooltip, {
         title: t('blocklet.router.checkUrlAccessible'),
         placement: "top-end",
@@ -341,6 +283,7 @@ function DomainLink({
   }
   if (!accessibility.accessible) {
     return /*#__PURE__*/_jsx(LinkDiv, {
+      ...rest,
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: t('blocklet.router.urlInaccessible'),
         placement: "top-end",
@@ -351,6 +294,7 @@ function DomainLink({
     });
   }
   return /*#__PURE__*/_jsx(LinkDiv, {
+    ...rest,
     children: /*#__PURE__*/_jsx("a", {
       href: href,
       target: "_blank",
@@ -368,9 +312,187 @@ const LinkDiv = styled.span`
   & > * {
     color: #222;
     font-size: 18px;
+    word-break: break-all;
   }
 
   .status {
     margin-left: 8px;
   }
-`;
+`;
+function InnerAction({
+  hasMutatePermission,
+  site,
+  domain,
+  blocklet
+}) {
+  const theme = useTheme();
+  const {
+    t
+  } = useLocaleContext();
+  if (hasMutatePermission && !domain.isProtected) {
+    return /*#__PURE__*/_jsx(DomainActions, {
+      site: site,
+      domain: domain,
+      blocklet: blocklet
+    });
+  }
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: t('blocklet.router.domainLockTooltip'),
+    placement: "top",
+    children: /*#__PURE__*/_jsx(IconButton, {
+      disabled: true,
+      size: "large",
+      style: {
+        pointerEvents: 'auto',
+        // padding replace to margin, fix the tooltip position
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      children: /*#__PURE__*/_jsx(LockIcon, {
+        style: {
+          fill: theme.palette.text.disabled
+        }
+      })
+    })
+  });
+}
+InnerAction.propTypes = {
+  hasMutatePermission: PropTypes.bool.isRequired,
+  site: PropTypes.object.isRequired,
+  domain: DomainType.isRequired,
+  blocklet: PropTypes.object.isRequired
+};
+function InnerAddDomain({
+  domain,
+  blocklet,
+  hasMutatePermission
+}) {
+  const theme = useTheme();
+  const {
+    t
+  } = useLocaleContext();
+  const [domainInfoAnchorEl, setDomainInfoAnchorEl] = useState(null);
+  const handlePopoverOpen = event => {
+    setDomainInfoAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setDomainInfoAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [domain.type === 'nft-domain' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(DiamondIcon, {
+        onMouseEnter: handlePopoverOpen,
+        onMouseLeave: handlePopoverClose,
+        style: {
+          cursor: 'pointer',
+          fill: theme.palette.primary.main
+        }
+      }), /*#__PURE__*/_jsx(Popover, {
+        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__*/_jsx(Card, {
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            style: {
+              display: 'flex',
+              flexDirection: 'column'
+            },
+            children: [/*#__PURE__*/_jsxs(Typography, {
+              component: "div",
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              children: [/*#__PURE__*/_jsx(DiamondIcon, {
+                style: {
+                  fill: theme.palette.primary.main
+                }
+              }), /*#__PURE__*/_jsx(Typography, {
+                component: "span",
+                style: {
+                  marginLeft: '8px',
+                  fontSize: '18px',
+                  fontWeight: 'bolder'
+                },
+                children: t('router.domainAlias.nftDomain')
+              })]
+            }), /*#__PURE__*/_jsxs(Typography, {
+              component: "div",
+              style: {
+                display: 'flex',
+                marginTop: '12px'
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                component: "span",
+                style: {
+                  width: '80px',
+                  marginRight: '8px'
+                },
+                children: t('common.domain')
+              }), /*#__PURE__*/_jsx(Typography, {
+                component: "span",
+                children: domain.value
+              })]
+            }), /*#__PURE__*/_jsxs(Typography, {
+              component: "div",
+              style: {
+                display: 'flex'
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                component: "span",
+                style: {
+                  width: '80px',
+                  marginRight: '8px'
+                },
+                children: "NFT"
+              }), /*#__PURE__*/_jsx(DidAddress, {
+                did: domain.nftDid
+              })]
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DomainStatus, {
+      domain: domain,
+      filters: ['http']
+    }, `${domain.value}-http`), hasMutatePermission && /*#__PURE__*/_jsx(AddCert, {
+      domain: domain.value,
+      domainStatus: domain.domainStatus,
+      did: blocklet.meta.did,
+      children: ({
+        open
+      }) => /*#__PURE__*/_jsx(Button, {
+        sx: {
+          padding: 0
+        },
+        size: "small",
+        onClick: e => open(e),
+        children: t('router.cert.genLetsEncryptCert.title')
+      })
+    })]
+  });
+}
+InnerAddDomain.propTypes = {
+  domain: DomainType.isRequired,
+  blocklet: PropTypes.object.isRequired,
+  hasMutatePermission: PropTypes.bool.isRequired
+};

package/es/blocklet/component/index.js

@@ -962,7 +962,6 @@ const Div = styled.div`
   .title {
     font-size: 1.2rem;
     font-weight: bold;
-    margin-bottom: ${props => props.theme.spacing(1)};
   }
 
   @keyframes showDelay {

package/es/blocklet/config-navigation.js

@@ -5,6 +5,7 @@ import ButtonGroup from '@mui/material/ButtonGroup';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import Paper from '@mui/material/Paper';
 import Select from '@mui/material/Select';
 import Toolbar from '@mui/material/Toolbar';
@@ -70,6 +71,7 @@ function ConfigNavigation() {
   const {
     roles
   } = useTeamContext();
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const pageState = useReactive({
     saveLoading: false,
     resetLoading: false,
@@ -139,7 +141,7 @@ function ConfigNavigation() {
     try {
       pageState.resetLoading = true;
       await resetNavigation();
-      Toast.success('重置成功', {
+      Toast.success(t('navigation.action.resetSuccessful'), {
         variant: 'success'
       });
     } catch (e) {
@@ -169,7 +171,16 @@ function ConfigNavigation() {
     };
   }, [blocklet.appDid, pageState.mockRole]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonGroup, {
+    children: [isMobile && /*#__PURE__*/_jsx(Select, {
+      fullWidth: true,
+      size: "small",
+      value: navigationState.activeSection,
+      onChange: event => updateActiveSection(event.target.value),
+      children: Object.keys(navigationTypeMap).map(key => /*#__PURE__*/_jsxs(MenuItem, {
+        value: key,
+        children: [navigationTypeMap[key], ` (${getNavigation(key).length})`]
+      }))
+    }), !isMobile && /*#__PURE__*/_jsx(ButtonGroup, {
       variant: "outlined",
       children: Object.keys(navigationTypeMap).map(key => {
         return /*#__PURE__*/_jsxs(Button, {
@@ -191,7 +202,7 @@ function ConfigNavigation() {
         sx: {
           flexGrow: 1
         },
-        children: "Config"
+        children: t('common.config')
       }), /*#__PURE__*/_jsx(ButtonGroup, {
         variant: "outlined",
         children: /*#__PURE__*/_jsx(LoadingButton, {
@@ -209,7 +220,7 @@ function ConfigNavigation() {
           onClick: () => {
             pageState.showResetConfirm = true;
           },
-          children: "\u91CD\u7F6E"
+          children: t('navigation.action.reset')
         })
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
         variant: "outlined",
@@ -220,7 +231,7 @@ function ConfigNavigation() {
             icon: "mdi:plus"
           }),
           onClick: () => handleAddNavigation(),
-          children: "\u65B0\u5EFA"
+          children: t('navigation.action.new')
         }), /*#__PURE__*/_jsx(LoadingButton, {
           size: "small",
           variant: "contained",
@@ -230,7 +241,7 @@ function ConfigNavigation() {
           loading: pageState.saveLoading,
           loadingPosition: "start",
           onClick: handleSaveNavigation,
-          children: "\u4FDD\u5B58"
+          children: t('common.save')
         })]
       })]
     }), /*#__PURE__*/_jsx(Paper, {
@@ -278,7 +289,7 @@ function ConfigNavigation() {
         sx: {
           flexGrow: 1
         },
-        children: "Preview"
+        children: t('common.preview')
       }), /*#__PURE__*/_jsxs(FormControl, {
         sx: {
           m: 1,
@@ -286,7 +297,7 @@ function ConfigNavigation() {
         },
         size: "small",
         children: [/*#__PURE__*/_jsx(InputLabel, {
-          children: "Role"
+          children: t('common.role')
         }), /*#__PURE__*/_jsx(Select, {
           value: pageState.mockRole,
           label: "Role",
@@ -313,8 +324,21 @@ function ConfigNavigation() {
       components: navigationState.components,
       rawNavigations: navigationState.rawNavigation
     }), /*#__PURE__*/_jsx(Confirm, {
+      confirmButton: {
+        text: t('common.confirm'),
+        props: {
+          variant: 'contained',
+          color: 'error'
+        }
+      },
+      cancelButton: {
+        text: t('common.cancel'),
+        props: {
+          color: 'primary'
+        }
+      },
       open: pageState.showResetConfirm,
-      title: "\u662F\u5426\u6E05\u7A7A\u6240\u6709\u81EA\u5B9A\u4E49\u5BFC\u822A",
+      title: t('navigation.action.restConfirmTitle'),
       onConfirm: async () => {
         await handleResetNavigation();
         pageState.showResetConfirm = false;
@@ -323,7 +347,7 @@ function ConfigNavigation() {
         pageState.showResetConfirm = false;
       },
       children: /*#__PURE__*/_jsx("p", {
-        children: "\u6E05\u7A7A\u540E\uFF0C\u5BFC\u822A\u4F1A\u6062\u590D\u5230 Blocklet \u539F\u6709\u9ED8\u8BA4\u7684\u914D\u7F6E"
+        children: t('navigation.action.restConfirmDesc')
       })
     })]
   });