@arcblock/ux 2.4.38 → 2.4.40

package/lib/Header/header.js

@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align", "maxWidth"];
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align", "maxWidth", "homeLink"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -49,23 +49,21 @@ function Header(_ref) {
     addons,
     prepend,
     align,
-    maxWidth
+    maxWidth,
+    homeLink
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
-      maxWidth: maxWidth,
-      className: "header-container",
-      children: [prepend, logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  const renderBrand = () => {
+    const brandContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-logo",
         children: logo
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoHidden.default, {
+      }), brand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoHidden.default, {
         height: 44,
         sx: {
           flexShrink: {
-            xs: 1,
-            md: 0
+            xs: 1
           }
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -80,6 +78,26 @@ function Header(_ref) {
             children: description
           })]
         })
+      })]
+    });
+
+    if (typeof homeLink === 'function') {
+      return homeLink(brandContent);
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: homeLink,
+      children: brandContent
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
+      maxWidth: maxWidth,
+      className: "header-container",
+      children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "header-brand-wrapper",
+        children: renderBrand()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "header-brand-addon",
         children: brandAddon
@@ -110,7 +128,8 @@ Header.propTypes = {
   // logo 左侧内容
   prepend: _propTypes.default.node,
   align: _propTypes.default.oneOf(['left', 'right']),
-  maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])])
+  maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
+  homeLink: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
 };
 Header.defaultProps = {
   logo: null,
@@ -121,8 +140,9 @@ Header.defaultProps = {
   addons: null,
   prepend: null,
   align: 'left',
-  maxWidth: undefined
+  maxWidth: undefined,
+  homeLink: '/'
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n  .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n    > a {\n      height: 100%;\n      line-height: 1;\n    }\n    > a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n\n  .header-brand-wrapper {\n    flex-shrink: 1;\n    min-width: 0;\n    > a {\n      display: flex;\n      align-items: center;\n      height: 100%;\n      line-height: 1;\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  .header-brand-wrapper .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n  }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
 var _default = Header;
 exports.default = _default;

package/lib/Layout/dashboard/index.js

@@ -124,11 +124,25 @@ function Dashboard(_ref2) {
   const classes = (0, _clsx.default)('dashboard', {
     'dashboard-dense': _dense
   }, rest.className);
+
+  const defaultHomeLink = content => {
+    var _window$blocklet;
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_externalLink.Link, {
+      to: ((_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.prefix) || '/',
+      children: content
+    });
+  };
+
+  const _headerProps = _objectSpread({
+    homeLink: defaultHomeLink
+  }, headerProps);
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
     className: classes,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
       title: title
-    }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
+    }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, _headerProps), {}, {
       className: "dashboard-header",
       children: links !== null && links !== void 0 && links.length ? _ref3 => {
         let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.38",
+  "version": "2.4.40",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "d5db89486d5c862c2f11c26991ac515e701ac7d3",
+  "gitHead": "c26da2c4ed0c311c2dceab75db245f0290344860",
   "dependencies": {
-    "@arcblock/icons": "^2.4.38",
-    "@arcblock/react-hooks": "^2.4.38",
+    "@arcblock/icons": "^2.4.40",
+    "@arcblock/react-hooks": "^2.4.40",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Header/header.js

@@ -8,20 +8,45 @@ import { styled } from '../Theme';
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, maxWidth, ...rest }) {
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  prepend,
+  align,
+  maxWidth,
+  homeLink,
+  ...rest
+}) {
+  const renderBrand = () => {
+    const brandContent = (
+      <>
+        {logo && <div className="header-logo">{logo}</div>}
+        {brand && (
+          <AutoHidden height={44} sx={{ flexShrink: { xs: 1 } }}>
+            <div className="header-brand">
+              <div className="header-brand-title">
+                <h2>{brand}</h2>
+              </div>
+              <div className="header-brand-desc">{description}</div>
+            </div>
+          </AutoHidden>
+        )}
+      </>
+    );
+    if (typeof homeLink === 'function') {
+      return homeLink(brandContent);
+    }
+    return <a href={homeLink}>{brandContent}</a>;
+  };
   return (
     <Root {...rest}>
       <Container maxWidth={maxWidth} className="header-container">
         {prepend}
-        {logo && <div className="header-logo">{logo}</div>}
-        <AutoHidden height={44} sx={{ flexShrink: { xs: 1, md: 0 } }}>
-          <div className="header-brand">
-            <div className="header-brand-title">
-              <h2>{brand}</h2>
-            </div>
-            <div className="header-brand-desc">{description}</div>
-          </div>
-        </AutoHidden>
+        <div className="header-brand-wrapper">{renderBrand()}</div>
         <div className="header-brand-addon">{brandAddon}</div>
         {align === 'right' && <Box flexGrow={1} />}
         {children}
@@ -48,6 +73,7 @@ Header.propTypes = {
   prepend: PropTypes.node,
   align: PropTypes.oneOf(['left', 'right']),
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
+  homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 };
 
 Header.defaultProps = {
@@ -60,6 +86,7 @@ Header.defaultProps = {
   prepend: null,
   align: 'left',
   maxWidth: undefined,
+  homeLink: '/',
 };
 
 const Root = styled('div')`
@@ -72,7 +99,20 @@ const Root = styled('div')`
     align-items: center;
     height: 64px;
   }
-  .header-logo {
+
+  .header-brand-wrapper {
+    flex-shrink: 1;
+    min-width: 0;
+    > a {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      line-height: 1;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  .header-brand-wrapper .header-logo {
     display: inline-flex;
     position: relative;
     height: 44px;
@@ -83,19 +123,6 @@ const Root = styled('div')`
       height: 100%;
       max-height: 100%;
     }
-    > a {
-      height: 100%;
-      line-height: 1;
-    }
-    > a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
   }
   .header-brand {
     display: flex;
@@ -137,6 +164,9 @@ const Root = styled('div')`
         }
       }
     }
+    .header-brand-addon {
+      display: none;
+    }
   }
   ${(props) => props.theme.breakpoints.down('md')} {
     .header-menu {
@@ -155,9 +185,6 @@ const Root = styled('div')`
         font-size: 12px;
       }
     }
-    .header-brand-addon {
-      display: none;
-    }
   }
 `;
 

package/src/Layout/dashboard/index.js

@@ -56,12 +56,17 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
   // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
   const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
   const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
+  const defaultHomeLink = (content) => <Link to={window.blocklet?.prefix || '/'}>{content}</Link>;
+  const _headerProps = {
+    homeLink: defaultHomeLink,
+    ...headerProps,
+  };
 
   return (
     <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />
 
-      <StyledUxHeader {...headerProps} className="dashboard-header">
+      <StyledUxHeader {..._headerProps} className="dashboard-header">
         {links?.length
           ? ({ isMobile, closeMenu }) => {
               if (isMobile) {