@arcblock/ux 2.2.1 → 2.2.4

package/lib/Layout/dashboard/index.js

@@ -23,6 +23,8 @@ var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _dashboardLegacy = _interopRequireDefault(require("../dashboard-legacy"));
 
 var _Header = require("../../Header");
@@ -33,10 +35,12 @@ var _Footer = _interopRequireDefault(require("../../Footer"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
+var _withExternalLink = require("./with-external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["closeMenu"],
-      _excluded2 = ["children", "title", "headerProps", "links", "fullWidth"],
+      _excluded2 = ["children", "title", "headerProps", "links", "fullWidth", "dense"],
       _excluded3 = ["legacy"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,30 +71,49 @@ function NavMenuWrapper(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavMenu.default, _objectSpread({}, rest));
 }
 
+function formatLinks(links, location) {
+  return links.map(link => {
+    if (Array.isArray(link)) {
+      return formatLinks(link, location);
+    }
+
+    return _objectSpread(_objectSpread({}, link), {}, {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_withExternalLink.Link, {
+        external: link.external,
+        to: link.url,
+        children: link.title
+      }),
+      active: !!(0, _reactRouterDom.matchPath)(location.pathname, {
+        path: link.url,
+        exact: false
+      })
+    });
+  });
+}
+
 function Dashboard(_ref2) {
   let {
     children,
     title,
     headerProps,
     links,
-    fullWidth
+    fullWidth,
+    dense
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
   const theme = (0, _styles.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
-  const navItems = (0, _react.useMemo)(() => links.map(link => _objectSpread(_objectSpread({}, link), {}, {
-    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
-      to: link.url,
-      children: link.title
-    }),
-    active: !!(0, _reactRouterDom.matchPath)(location.pathname, {
-      path: link.url,
-      exact: false
-    })
-  })), [location, links]);
+  const navItems = (0, _react.useMemo)(() => formatLinks(links, location), [location, links]);
+  const flattendNavItems = navItems.flat();
+
+  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+
+  const classes = (0, _clsx.default)('dashboard', {
+    'dashboard-dense': _dense
+  }, rest.className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    className: "dashboard ".concat(rest.className),
+    className: classes,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
       title: title
     }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
@@ -104,7 +127,7 @@ function Dashboard(_ref2) {
         if (isMobile) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavMenuWrapper, {
             mode: "inline",
-            items: navItems,
+            items: flattendNavItems,
             closeMenu: closeMenu,
             bgColor: "transparent",
             activeTextColor: theme.palette.primary.main
@@ -121,7 +144,8 @@ function Dashboard(_ref2) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           className: "dashboard-sidebar",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
-            links: links
+            links: links,
+            dense: _dense
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -141,25 +165,31 @@ function Dashboard(_ref2) {
 Dashboard.propTypes = {
   children: _propTypes.default.any.isRequired,
   title: _propTypes.default.string,
+  // 支持分组, links item 如果是数组, 则视为一个 group
   links: _propTypes.default.array.isRequired,
   headerProps: _propTypes.default.object,
-  fullWidth: _propTypes.default.bool
+  fullWidth: _propTypes.default.bool,
+  sidebarWidth: _propTypes.default.number,
+  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
+  dense: _propTypes.default.oneOf([true, false, 'auto'])
 };
 Dashboard.defaultProps = {
   title: 'Home',
   headerProps: {},
-  fullWidth: false
+  fullWidth: false,
+  sidebarWidth: 120,
+  dense: 'auto'
 };
 
 const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "dashboard__Wrapper",
   componentId: "sc-arvc7q-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}"]);
+})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:", "px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}&.dashboard-dense{.dashboard-sidebar{width:auto;}}", "{.header-logo{display:flex;justify-content:center;width:", "px;}&.dashboard-dense{.header-logo{width:auto;}}}"], props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
 
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "dashboard__StyledUxHeader",
   componentId: "sc-arvc7q-1"
-})([".header-container{max-width:100%;}", "{.header-logo{display:flex;justify-content:center;width:56px;}}"], props => props.$theme.breakpoints.up('md')); // 兼容旧版 dashboard
+})([".header-container{max-width:100%;}"]); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {
   let {

package/lib/Layout/dashboard/sidebar.js

@@ -9,15 +9,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _colors = require("@mui/material/colors");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _withExternalLink = require("./with-external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["links", "addons"];
+const _excluded = ["links", "addons", "dense"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,38 +33,67 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+// 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
+function renderLinks(links) {
+  const result = [];
+  links.forEach((item, index) => {
+    const prev = links[index - 1]; // 当当前元素和前一个元素仅有一个为 group (array) 时, 在当前元素前面位置添加一个分隔线元素
+
+    if (index > 0 && (Array.isArray(prev) && !Array.isArray(item) || Array.isArray(item) && !Array.isArray(prev))) {
+      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        className: "layout-sidebar-divider"
+      }, "divider-after-".concat(index)));
+    }
+
+    result.push(renderLinksItem(item));
+  });
+  return result.flat();
+}
+
+function renderLinksItem(item) {
+  if (Array.isArray(item)) {
+    return item.map(renderLinksItem);
+  }
+
+  const {
+    url,
+    icon,
+    title,
+    showBadge,
+    external
+  } = item;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_withExternalLink.NavLink, {
+      to: url,
+      external: external,
+      className: "layout-sidebar-link",
+      activeClassName: "layout-sidebar-link--active",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
+        children: icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "span",
+        className: "layout-sidebar-link-text",
+        children: title
+      })]
+    })
+  }, url);
+}
+
 function Sidebar(_ref) {
   let {
     links,
-    addons
+    addons,
+    dense
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    className: (0, _clsx.default)({
+      'layout-sidebar-dense': dense
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: links.map(_ref2 => {
-        let {
-          url,
-          icon,
-          title,
-          showBadge
-        } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
-            to: url,
-            className: "layout-sidebar-link",
-            activeClassName: "layout-sidebar-link--active",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
-              children: icon
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              component: "span",
-              className: "layout-sidebar-link-text",
-              children: title
-            })]
-          })
-        }, url);
-      })
+      children: renderLinks(links)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         flex: 1
@@ -73,17 +104,19 @@ function Sidebar(_ref) {
 
 Sidebar.propTypes = {
   links: _propTypes.default.array.isRequired,
-  addons: _propTypes.default.any
+  addons: _propTypes.default.any,
+  dense: _propTypes.default.bool
 };
 Sidebar.defaultProps = {
-  addons: null
+  addons: null,
+  dense: false
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
 const Root = _styledComponents.default.div.withConfig({
   displayName: "sidebar__Root",
   componentId: "sc-gaosgy-0"
-})(["display:flex;flex-direction:column;ul{list-style:none;margin:0;padding:0;}.layout-sidebar-link{display:flex;flex-direction:column;align-items:center;padding:22px 24px;color:", ";text-decoration:none;&:hover,&.layout-sidebar-link--active{color:", ";background:", ";border-left-color:", ";}}.layout-sidebar-icon{display:inline-block;width:32px;height:32px;> img,> svg{width:32px;height:32px;}}.layout-sidebar-badge{position:relative;&:after{content:'';position:absolute;width:10px;height:10px;border-radius:10px;background-color:#fe4e44;right:-2px;top:0;box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1);}}.layout-sidebar-link-text{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;}"], props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
+})(["display:flex;flex-direction:column;ul{list-style:none;margin:0;padding:0;}.layout-sidebar-link{display:flex;flex-direction:column;align-items:center;padding:22px 24px;color:", ";text-decoration:none;&:hover,&.layout-sidebar-link--active{color:", ";background:", ";border-left-color:", ";}}.layout-sidebar-icon{display:inline-block;width:32px;height:32px;> img,> svg{width:32px;height:32px;}}.layout-sidebar-badge{position:relative;&:after{content:'';position:absolute;width:10px;height:10px;border-radius:10px;background-color:#fe4e44;right:-2px;top:0;box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1);}}.layout-sidebar-link-text{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;}.layout-sidebar-divider{display:flex;justify-content:center;align-items:center;&::after{content:'';display:inline-block;width:80px;max-width:100%;border-bottom:1px solid #ddd;}}&.layout-sidebar-dense{box-sizing:border-box;height:100%;padding-top:28px;border-right:1px solid #ddd;.layout-sidebar-link{flex-direction:row;align-items:center;padding:10px 36px 10px 24px;}.layout-sidebar-icon{display:inline-block;width:20px;height:20px;margin-right:12px;> img,> svg{width:20px;height:20px;}}.layout-sidebar-badge{&:after{width:6px;height:6px;border-radius:6px;right:-2px;top:0;}}.layout-sidebar-link-text{margin-top:0;font-size:14px;}.layout-sidebar-divider{&::after{content:'';display:inline-block;width:100%;margin:12px 0;}}}"], props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
 
 var _default = Sidebar;
 exports.default = _default;

package/lib/Layout/dashboard/with-external-link.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavLink = exports.Link = void 0;
+exports.withExternalLink = withExternalLink;
+
+var _reactRouterDom = require("react-router-dom");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["to", "external"];
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
+function withExternalLink(RouterLinkComponent) {
+  // eslint-disable-next-line react/prop-types
+  return function WithExternalLink(_ref) {
+    let {
+      to,
+      external
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    const handleClick = e => {
+      e.preventDefault();
+      window.location.href = to;
+    };
+
+    if (external) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
+        onClick: handleClick,
+        to: to
+      }, rest));
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread({
+      to: to
+    }, rest));
+  };
+}
+
+const Link = withExternalLink(_reactRouterDom.Link);
+exports.Link = Link;
+const NavLink = withExternalLink(_reactRouterDom.NavLink);
+exports.NavLink = NavLink;

package/lib/Result/demo/fixtures/result-image-404.svg

@@ -0,0 +1 @@
+<svg width="252" height="294"><defs><path d="M0 .387h251.772v251.772H0z"></path></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 .012)"><mask fill="#fff"></mask><path d="M0 127.32v-2.095C0 56.279 55.892.387 124.838.387h2.096c68.946 0 124.838 55.892 124.838 124.838v2.096c0 68.946-55.892 124.838-124.838 124.838h-2.096C55.892 252.16 0 196.267 0 127.321" fill="#E4EBF7" mask="url(#b)"></path></g><path d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66" fill="#FFF"></path><path d="M36.975 134.297l10.482 5.943M48.373 146.508l-12.648 10.788" stroke="#FFF" stroke-width="2"></path><path d="M39.875 159.352a5.667 5.667 0 1 1-11.277-1.136 5.667 5.667 0 0 1 11.277 1.136M57.588 143.247a5.708 5.708 0 1 1-11.358-1.145 5.708 5.708 0 0 1 11.358 1.145M99.018 26.875l29.82-.014a4.587 4.587 0 1 0-.003-9.175l-29.82.013a4.587 4.587 0 1 0 .003 9.176M110.424 45.211l29.82-.013a4.588 4.588 0 0 0-.004-9.175l-29.82.013a4.587 4.587 0 1 0 .004 9.175" fill="#FFF"></path><path d="M112.798 26.861v-.002l15.784-.006a4.588 4.588 0 1 0 .003 9.175l-15.783.007v-.002a4.586 4.586 0 0 0-.004-9.172M184.523 135.668c-.553 5.485-5.447 9.483-10.931 8.93-5.485-.553-9.483-5.448-8.93-10.932.552-5.485 5.447-9.483 10.932-8.93 5.485.553 9.483 5.447 8.93 10.932" fill="#FFF"></path><path d="M179.26 141.75l12.64 7.167M193.006 156.477l-15.255 13.011" stroke="#FFF" stroke-width="2"></path><path d="M184.668 170.057a6.835 6.835 0 1 1-13.6-1.372 6.835 6.835 0 0 1 13.6 1.372M203.34 153.325a6.885 6.885 0 1 1-13.7-1.382 6.885 6.885 0 0 1 13.7 1.382" fill="#FFF"></path><path d="M151.931 192.324a2.222 2.222 0 1 1-4.444 0 2.222 2.222 0 0 1 4.444 0zM225.27 116.056a2.222 2.222 0 1 1-4.445 0 2.222 2.222 0 0 1 4.444 0zM216.38 151.08a2.223 2.223 0 1 1-4.446-.001 2.223 2.223 0 0 1 4.446 0zM176.917 107.636a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM195.291 92.165a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM202.058 180.711a2.223 2.223 0 1 1-4.446 0 2.223 2.223 0 0 1 4.446 0z" stroke="#FFF" stroke-width="2"></path><path stroke="#FFF" stroke-width="2" d="M214.404 153.302l-1.912 20.184-10.928 5.99M173.661 174.792l-6.356 9.814h-11.36l-4.508 6.484M174.941 125.168v-15.804M220.824 117.25l-12.84 7.901-15.31-7.902V94.39"></path><path d="M166.588 65.936h-3.951a4.756 4.756 0 0 1-4.743-4.742 4.756 4.756 0 0 1 4.743-4.743h3.951a4.756 4.756 0 0 1 4.743 4.743 4.756 4.756 0 0 1-4.743 4.742" fill="#FFF"></path><path d="M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48 0 16.28-13.2 29.48-29.48 29.48-16.282 0-29.48-13.2-29.48-29.48" fill="#1890FF"></path><path d="M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894" fill="#FFF"></path><path d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88" fill="#FFB594"></path><path d="M90.483 67.504l-.449 2.893c-.753.49-4.748-2.663-4.748-2.663l-1.645.748-1.346-5.684s6.815-4.589 8.917-5.018c2.452-.501 9.884.94 10.7 2.278 0 0 1.32.486-2.227.69-3.548.203-5.043.447-6.79 3.132-1.747 2.686-2.412 3.624-2.412 3.624" fill="#FFC6A0"></path><path d="M128.055 111.367c-2.627-7.724-6.15-13.18-8.917-15.478-3.5-2.906-9.34-2.225-11.366-4.187-1.27-1.231-3.215-1.197-3.215-1.197s-14.98-3.158-16.828-3.479c-2.37-.41-2.124-.714-6.054-1.405-1.57-1.907-2.917-1.122-2.917-1.122l-7.11-1.383c-.853-1.472-2.423-1.023-2.423-1.023l-2.468-.897c-1.645 9.976-7.74 13.796-7.74 13.796 1.795 1.122 15.703 8.3 15.703 8.3l5.107 37.11s-3.321 5.694 1.346 9.109c0 0 19.883-3.743 34.921-.329 0 0 3.047-2.546.972-8.806.523-3.01 1.394-8.263 1.736-11.622.385.772 2.019 1.918 3.14 3.477 0 0 9.407-7.365 11.052-14.012-.832-.723-1.598-1.585-2.267-2.453-.567-.736-.358-2.056-.765-2.717-.669-1.084-1.804-1.378-1.907-1.682" fill="#FFF"></path><path d="M101.09 289.998s4.295 2.041 7.354 1.021c2.821-.94 4.53.668 7.08 1.178 2.55.51 6.874 1.1 11.686-1.26-.103-5.51-6.889-3.98-11.96-6.713-2.563-1.38-3.784-4.722-3.598-8.799h-9.402s-1.392 10.52-1.16 14.573" fill="#CBD1D1"></path><path d="M101.067 289.826s2.428 1.271 6.759.653c3.058-.437 3.712.481 7.423 1.031 3.712.55 10.724-.069 11.823-.894.413 1.1-.343 2.063-.343 2.063s-1.512.603-4.812.824c-2.03.136-5.8.291-7.607-.503-1.787-1.375-5.247-1.903-5.728-.241-3.918.95-7.355-.286-7.355-.286l-.16-2.647z" fill="#2B0849"></path><path d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558" fill="#A4AABA"></path><path d="M57.542 272.401s-2.107 7.416-4.485 12.306c-1.798 3.695-4.225 7.492 5.465 7.492 6.648 0 8.953-.48 7.423-6.599-1.53-6.12.266-13.199.266-13.199h-8.669z" fill="#CBD1D1"></path><path d="M51.476 289.793s2.097 1.169 6.633 1.169c6.083 0 8.249-1.65 8.249-1.65s.602 1.114-.619 2.165c-.993.855-3.597 1.591-7.39 1.546-4.145-.048-5.832-.566-6.736-1.168-.825-.55-.687-1.58-.137-2.062" fill="#2B0849"></path><path d="M58.419 274.304s.033 1.519-.314 2.93c-.349 1.42-1.078 3.104-1.13 4.139-.058 1.151 4.537 1.58 5.155.034.62-1.547 1.294-6.427 1.913-7.252.619-.825-4.903-2.119-5.624.15" fill="#A4AABA"></path><path d="M99.66 278.514l13.378.092s1.298-54.52 1.853-64.403c.554-9.882 3.776-43.364 1.002-63.128l-12.547-.644-22.849.78s-.434 3.966-1.195 9.976c-.063.496-.682.843-.749 1.365-.075.585.423 1.354.32 1.966-2.364 14.08-6.377 33.104-8.744 46.677-.116.666-1.234 1.009-1.458 2.691-.04.302.211 1.525.112 1.795-6.873 18.744-10.949 47.842-14.277 61.885l14.607-.014s2.197-8.57 4.03-16.97c2.811-12.886 23.111-85.01 23.111-85.01l3.016-.521 1.043 46.35s-.224 1.234.337 2.02c.56.785-.56 1.123-.392 2.244l.392 1.794s-.449 7.178-.898 11.89c-.448 4.71-.092 39.165-.092 39.165" fill="#7BB2F9"></path><path d="M76.085 221.626c1.153.094 4.038-2.019 6.955-4.935M106.36 225.142s2.774-1.11 6.103-3.883" stroke="#648BD8" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M107.275 222.1s2.773-1.11 6.102-3.884" stroke="#648BD8" stroke-linecap="round" stroke-linejoin="round"></path><path d="M74.74 224.767s2.622-.591 6.505-3.365M86.03 151.634c-.27 3.106.3 8.525-4.336 9.123M103.625 149.88s.11 14.012-1.293 15.065c-2.219 1.664-2.99 1.944-2.99 1.944M99.79 150.438s.035 12.88-1.196 24.377M93.673 175.911s7.212-1.664 9.431-1.664M74.31 205.861a212.013 212.013 0 0 1-.979 4.56s-1.458 1.832-1.009 3.776c.449 1.944-.947 2.045-4.985 15.355-1.696 5.59-4.49 18.591-6.348 27.597l-.231 1.12M75.689 197.807a320.934 320.934 0 0 1-.882 4.754M82.591 152.233L81.395 162.7s-1.097.15-.5 2.244c.113 1.346-2.674 15.775-5.18 30.43M56.12 274.418h13.31" stroke="#648BD8" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M116.241 148.22s-17.047-3.104-35.893.2c.158 2.514-.003 4.15-.003 4.15s14.687-2.818 35.67-.312c.252-2.355.226-4.038.226-4.038" fill="#192064"></path><path d="M106.322 151.165l.003-4.911a.81.81 0 0 0-.778-.815c-2.44-.091-5.066-.108-7.836-.014a.818.818 0 0 0-.789.815l-.003 4.906a.81.81 0 0 0 .831.813c2.385-.06 4.973-.064 7.73.017a.815.815 0 0 0 .842-.81" fill="#FFF"></path><path d="M105.207 150.233l.002-3.076a.642.642 0 0 0-.619-.646 94.321 94.321 0 0 0-5.866-.01.65.65 0 0 0-.63.647v3.072a.64.64 0 0 0 .654.644 121.12 121.12 0 0 1 5.794.011c.362.01.665-.28.665-.642" fill="#192064"></path><path d="M100.263 275.415h12.338M101.436 270.53c.006 3.387.042 5.79.111 6.506M101.451 264.548a915.75 915.75 0 0 0-.015 4.337M100.986 174.965l.898 44.642s.673 1.57-.225 2.692c-.897 1.122 2.468.673.898 2.243-1.57 1.57.897 1.122 0 3.365-.596 1.489-.994 21.1-1.096 35.146" stroke="#648BD8" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.876 83.427s-.516 6.045 7.223 5.552c11.2-.712 9.218-9.345 31.54-21.655-.786-2.708-2.447-4.744-2.447-4.744s-11.068 3.11-22.584 8.046c-6.766 2.9-13.395 6.352-13.732 12.801M104.46 91.057l.941-5.372-8.884-11.43-5.037 5.372-1.74 7.834a.321.321 0 0 0 .108.32c.965.8 6.5 5.013 14.347 3.544a.332.332 0 0 0 .264-.268" fill="#FFC6A0"></path><path d="M93.942 79.387s-4.533-2.853-2.432-6.855c1.623-3.09 4.513 1.133 4.513 1.133s.52-3.642 3.121-3.642c.52-1.04 1.561-4.162 1.561-4.162s11.445 2.601 13.526 3.121c0 5.203-2.304 19.424-7.84 19.861-8.892.703-12.449-9.456-12.449-9.456" fill="#FFC6A0"></path><path d="M113.874 73.446c2.601-2.081 3.47-9.722 3.47-9.722s-2.479-.49-6.64-2.05c-4.683-2.081-12.798-4.747-17.48.976-9.668 3.223-2.05 19.823-2.05 19.823l2.713-3.021s-3.935-3.287-2.08-6.243c2.17-3.462 3.92 1.073 3.92 1.073s.637-2.387 3.581-3.342c.355-.71 1.036-2.674 1.432-3.85a1.073 1.073 0 0 1 1.263-.704c2.4.558 8.677 2.019 11.356 2.662.522.125.871.615.82 1.15l-.305 3.248z" fill="#520038"></path><path d="M104.977 76.064c-.103.61-.582 1.038-1.07.956-.489-.083-.801-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.644.698 1.254M112.132 77.694c-.103.61-.582 1.038-1.07.956-.488-.083-.8-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.643.698 1.254" fill="#552950"></path><path stroke="#DB836E" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round" d="M110.13 74.84l-.896 1.61-.298 4.357h-2.228"></path><path d="M110.846 74.481s1.79-.716 2.506.537" stroke="#5C2552" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path><path d="M92.386 74.282s.477-1.114 1.113-.716c.637.398 1.274 1.433.558 1.99-.717.556.159 1.67.159 1.67" stroke="#DB836E" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path><path d="M103.287 72.93s1.83 1.113 4.137.954" stroke="#5C2552" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path><path d="M103.685 81.762s2.227 1.193 4.376 1.193M104.64 84.308s.954.398 1.511.318M94.693 81.205s2.308 7.4 10.424 7.639" stroke="#DB836E" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path><path d="M81.45 89.384s.45 5.647-4.935 12.787M69 82.654s-.726 9.282-8.204 14.206" stroke="#E4EBF7" stroke-width="1.101" stroke-linecap="round" stroke-linejoin="round"></path><path d="M129.405 122.865s-5.272 7.403-9.422 10.768" stroke="#E4EBF7" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M119.306 107.329s.452 4.366-2.127 32.062" stroke="#E4EBF7" stroke-width="1.101" stroke-linecap="round" stroke-linejoin="round"></path><path d="M150.028 151.232h-49.837a1.01 1.01 0 0 1-1.01-1.01v-31.688c0-.557.452-1.01 1.01-1.01h49.837c.558 0 1.01.453 1.01 1.01v31.688a1.01 1.01 0 0 1-1.01 1.01" fill="#F2D7AD"></path><path d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92" fill="#F4D19D"></path><path d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092l-7.26 10.371z" fill="#F2D7AD"></path><path fill="#CC9B6E" d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"></path><path d="M158.298 127.896h-18.669a2.073 2.073 0 0 1-1.659-.83l-7.156-9.541h19.965c.49 0 .95.23 1.244.622l6.69 8.92a.519.519 0 0 1-.415.83" fill="#F4D19D"></path><path fill="#CC9B6E" d="M157.847 128.479h-19.384l-7.857-10.475.415-.31 7.7 10.266h19.126zM130.554 150.685l-.032-8.177.519-.002.032 8.177z"></path><path fill="#CC9B6E" d="M130.511 139.783l-.08-21.414.519-.002.08 21.414zM111.876 140.932l-.498-.143 1.479-5.167.498.143zM108.437 141.06l-2.679-2.935 2.665-3.434.41.318-2.397 3.089 2.384 2.612zM116.607 141.06l-.383-.35 2.383-2.612-2.397-3.089.41-.318 2.665 3.434z"></path><path d="M154.316 131.892l-3.114-1.96.038 3.514-1.043.092c-1.682.115-3.634.23-4.789.23-1.902 0-2.693 2.258 2.23 2.648l-2.645-.596s-2.168 1.317.504 2.3c0 0-1.58 1.217.561 2.58-.584 3.504 5.247 4.058 7.122 3.59 1.876-.47 4.233-2.359 4.487-5.16.28-3.085-.89-5.432-3.35-7.238" fill="#FFC6A0"></path><path d="M153.686 133.577s-6.522.47-8.36.372c-1.836-.098-1.904 2.19 2.359 2.264 3.739.15 5.451-.044 5.451-.044" stroke="#DB836E" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M145.16 135.877c-1.85 1.346.561 2.355.561 2.355s3.478.898 6.73.617" stroke="#DB836E" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M151.89 141.71s-6.28.111-6.73-2.132c-.223-1.346.45-1.402.45-1.402M146.114 140.868s-1.103 3.16 5.44 3.533M151.202 129.932v3.477M52.838 89.286c3.533-.337 8.423-1.248 13.582-7.754" stroke="#DB836E" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path><path d="M168.567 248.318a6.647 6.647 0 0 1-6.647-6.647v-66.466a6.647 6.647 0 1 1 13.294 0v66.466a6.647 6.647 0 0 1-6.647 6.647" fill="#5BA02E"></path><path d="M176.543 247.653a6.647 6.647 0 0 1-6.646-6.647v-33.232a6.647 6.647 0 1 1 13.293 0v33.232a6.647 6.647 0 0 1-6.647 6.647" fill="#92C110"></path><path d="M186.443 293.613H158.92a3.187 3.187 0 0 1-3.187-3.187v-46.134a3.187 3.187 0 0 1 3.187-3.187h27.524a3.187 3.187 0 0 1 3.187 3.187v46.134a3.187 3.187 0 0 1-3.187 3.187" fill="#F2D7AD"></path><path d="M88.979 89.48s7.776 5.384 16.6 2.842" stroke="#E4EBF7" stroke-width="1.101" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.2.1",
+  "version": "2.2.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src stories tests",
+    "lint": "eslint src tests",
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
     "precommit": "CI=1 yarn test",
@@ -48,20 +48,20 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "7fd063875d78f056aadea005b21b48c8c3bfb6c7",
+  "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963",
   "dependencies": {
-    "@arcblock/icons": "^2.2.1",
-    "@arcblock/react-hooks": "^2.2.1",
+    "@arcblock/icons": "^2.2.4",
+    "@arcblock/react-hooks": "^2.2.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fontsource/lato": "^4.5.8",
+    "@fontsource/lato": "^4.5.9",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.3",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.4",
     "base64-url": "^2.3.3",
-    "copy-to-clipboard": "^3.3.1",
+    "copy-to-clipboard": "^3.3.2",
     "core-js": "^3.24.1",
     "d3-geo": "^1.12.1",
     "dayjs": "^1.11.4",
@@ -70,7 +70,7 @@
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^7.4.0",
+    "mdi-material-ui": "^7.5.0",
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",

package/src/Layout/dashboard/index.js

@@ -1,17 +1,19 @@
 import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter, Link, useLocation, matchPath } from 'react-router-dom';
+import { withRouter, useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 import { useTheme } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
+import clsx from 'clsx';
 import DashboardLegacy from '../dashboard-legacy';
 import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
 import Footer from '../../Footer';
 import Sidebar from './sidebar';
+import { Link } from './with-external-link';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
@@ -25,21 +27,33 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
   return <NavMenu {...rest} />;
 }
 
-function Dashboard({ children, title, headerProps, links, fullWidth, ...rest }) {
+function formatLinks(links, location) {
+  return links.map((link) => {
+    if (Array.isArray(link)) {
+      return formatLinks(link, location);
+    }
+    return {
+      ...link,
+      label: (
+        <Link external={link.external} to={link.url}>
+          {link.title}
+        </Link>
+      ),
+      active: !!matchPath(location.pathname, { path: link.url, exact: false }),
+    };
+  });
+}
+
+function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...rest }) {
   const theme = useTheme();
   const location = useLocation();
-  const navItems = useMemo(
-    () =>
-      links.map((link) => ({
-        ...link,
-        label: <Link to={link.url}>{link.title}</Link>,
-        active: !!matchPath(location.pathname, { path: link.url, exact: false }),
-      })),
-    [location, links]
-  );
+  const navItems = useMemo(() => formatLinks(links, location), [location, links]);
+  const flattendNavItems = navItems.flat();
+  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
 
   return (
-    <Wrapper {...rest} className={`dashboard ${rest.className}`}>
+    <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />
 
       <StyledUxHeader {...headerProps} $theme={theme}>
@@ -48,7 +62,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
             return (
               <NavMenuWrapper
                 mode="inline"
-                items={navItems}
+                items={flattendNavItems}
                 closeMenu={closeMenu}
                 bgColor="transparent"
                 activeTextColor={theme.palette.primary.main}
@@ -62,7 +76,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
       <Box display="flex" className="dashboard-body">
         <Hidden mdDown>
           <Box className="dashboard-sidebar">
-            <Sidebar links={links} />
+            <Sidebar links={links} dense={_dense} />
           </Box>
         </Hidden>
         <Box className="dashboard-main">
@@ -79,15 +93,21 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
 Dashboard.propTypes = {
   children: PropTypes.any.isRequired,
   title: PropTypes.string,
+  // 支持分组, links item 如果是数组, 则视为一个 group
   links: PropTypes.array.isRequired,
   headerProps: PropTypes.object,
   fullWidth: PropTypes.bool,
+  sidebarWidth: PropTypes.number,
+  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
+  dense: PropTypes.oneOf([true, false, 'auto']),
 };
 
 Dashboard.defaultProps = {
   title: 'Home',
   headerProps: {},
   fullWidth: false,
+  sidebarWidth: 120,
+  dense: 'auto',
 };
 
 const Wrapper = styled.div`
@@ -103,7 +123,7 @@ const Wrapper = styled.div`
   .dashboard-sidebar {
     box-sizing: border-box;
     flex: 0 0 auto;
-    width: 104px;
+    width: ${(props) => props.sidebarWidth}px;
     &:hover {
       overflow-y: auto;
     }
@@ -117,22 +137,33 @@ const Wrapper = styled.div`
   .dashboard-content {
     flex: 1;
   }
-`;
-
-const StyledUxHeader = styled(ResponsiveHeader)`
-  .header-container {
-    max-width: 100%;
+  &.dashboard-dense {
+    .dashboard-sidebar {
+      width: auto;
+    }
   }
-  ${(props) => props.$theme.breakpoints.up('md')} {
+  ${(props) => props.theme.breakpoints.up('md')} {
     .header-logo {
       display: flex;
       justify-content: center;
-      /* logo 与 sidebar 中的 icon 垂直对齐, 104 - 24 * 2 = 56 */
-      width: 56px;
+      /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
+      width: ${(props) => props.sidebarWidth - 24 * 2}px;
+    }
+    &.dashboard-dense {
+      .header-logo {
+        /* dense = true 时 logo 与 sidenav icons 不需要对齐 */
+        width: auto;
+      }
     }
   }
 `;
 
+const StyledUxHeader = styled(ResponsiveHeader)`
+  .header-container {
+    max-width: 100%;
+  }
+`;
+
 // 兼容旧版 dashboard
 function DashboardWrapper({ legacy, ...rest }) {
   if (legacy) {

package/src/Layout/dashboard/sidebar.js

@@ -1,27 +1,51 @@
+/* eslint-disable react/no-array-index-key */
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { NavLink } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
+import clsx from 'clsx';
+import { NavLink } from './with-external-link';
 
-function Sidebar({ links, addons, ...rest }) {
+// 渲染 links, 为 group links 添加分隔线, 返回展平后的、包含分隔线元素的 links 数组
+function renderLinks(links) {
+  const result = [];
+  links.forEach((item, index) => {
+    const prev = links[index - 1];
+    // 当当前元素和前一个元素仅有一个为 group (array) 时, 在当前元素前面位置添加一个分隔线元素
+    if (index > 0 && ((Array.isArray(prev) && !Array.isArray(item)) || (Array.isArray(item) && !Array.isArray(prev)))) {
+      result.push(<li className="layout-sidebar-divider" key={`divider-after-${index}`} />);
+    }
+    result.push(renderLinksItem(item));
+  });
+  return result.flat();
+}
+
+function renderLinksItem(item) {
+  if (Array.isArray(item)) {
+    return item.map(renderLinksItem);
+  }
+  const { url, icon, title, showBadge, external } = item;
+  return (
+    <li key={url}>
+      <NavLink
+        to={url}
+        external={external}
+        className="layout-sidebar-link"
+        activeClassName="layout-sidebar-link--active">
+        <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
+        <Typography component="span" className="layout-sidebar-link-text">
+          {title}
+        </Typography>
+      </NavLink>
+    </li>
+  );
+}
+
+function Sidebar({ links, addons, dense, ...rest }) {
   return (
-    <Root {...rest}>
-      <ul>
-        {links.map(({ url, icon, title, showBadge }) => {
-          return (
-            <li key={url}>
-              <NavLink to={url} className="layout-sidebar-link" activeClassName="layout-sidebar-link--active">
-                <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
-                <Typography component="span" className="layout-sidebar-link-text">
-                  {title}
-                </Typography>
-              </NavLink>
-            </li>
-          );
-        })}
-      </ul>
+    <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
+      <ul>{renderLinks(links)}</ul>
       <div style={{ flex: 1 }} />
       {addons}
     </Root>
@@ -31,10 +55,12 @@ function Sidebar({ links, addons, ...rest }) {
 Sidebar.propTypes = {
   links: PropTypes.array.isRequired,
   addons: PropTypes.any,
+  dense: PropTypes.bool,
 };
 
 Sidebar.defaultProps = {
   addons: null,
+  dense: false,
 };
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
@@ -94,6 +120,61 @@ const Root = styled.div`
     text-transform: capitalize;
     letter-spacing: normal;
   }
+  .layout-sidebar-divider {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 80px;
+      max-width: 100%;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+  &.layout-sidebar-dense {
+    box-sizing: border-box;
+    height: 100%;
+    padding-top: 28px;
+    border-right: 1px solid #ddd;
+    .layout-sidebar-link {
+      flex-direction: row;
+      align-items: center;
+      padding: 10px 36px 10px 24px;
+    }
+    .layout-sidebar-icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 12px;
+      > img,
+      > svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .layout-sidebar-badge {
+      &:after {
+        width: 6px;
+        height: 6px;
+        border-radius: 6px;
+        right: -2px;
+        top: 0;
+      }
+    }
+    .layout-sidebar-link-text {
+      margin-top: 0;
+      font-size: 14px;
+    }
+    .layout-sidebar-divider {
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 100%;
+        margin: 12px 0;
+      }
+    }
+  }
 `;
 
 export default Sidebar;

package/src/Layout/dashboard/with-external-link.js

@@ -0,0 +1,20 @@
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时通过 click 事件跳转)
+export function withExternalLink(RouterLinkComponent) {
+  // eslint-disable-next-line react/prop-types
+  return function WithExternalLink({ to, external, ...rest }) {
+    const handleClick = (e) => {
+      e.preventDefault();
+      window.location.href = to;
+    };
+    if (external) {
+      return <RouterLinkComponent onClick={handleClick} to={to} {...rest} />;
+    }
+    return <RouterLinkComponent to={to} {...rest} />;
+  };
+}
+
+export const Link = withExternalLink(RouterLink);
+
+export const NavLink = withExternalLink(RouterNavLink);