@arcblock/ux 2.2.3 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "8fe2ac5bc92d997e2df3547237e3fa44b76c91aa",
+  "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963",
   "dependencies": {
-    "@arcblock/icons": "^2.2.3",
-    "@arcblock/react-hooks": "^2.2.3",
+    "@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",

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);