@arcblock/ux 2.2.3 → 2.4.0

package/lib/Layout/dashboard/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = DashboardWrapper;
 
 var _react = require("react");
 
@@ -13,7 +13,7 @@ var _reactRouterDom = require("react-router-dom");
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -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,14 +35,20 @@ var _Footer = _interopRequireDefault(require("../../Footer"));
 
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
+var _withExternalLink = require("./with-external-link");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 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 }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 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; }
@@ -67,30 +75,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)({
+        path: link.url,
+        end: false
+      }, location.pathname)
+    });
+  });
+}
+
 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 +131,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 +148,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 +169,25 @@ 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;}"]);
+const Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-sidebar {\n      width: auto;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), 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
+const StyledUxHeader = (0, _styled.default)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {
   let {
@@ -179,8 +207,4 @@ DashboardWrapper.propTypes = _objectSpread(_objectSpread({}, Dashboard.propTypes
 });
 DashboardWrapper.defaultProps = _objectSpread(_objectSpread({}, Dashboard.defaultProps), {}, {
   legacy: true
-});
-
-var _default = (0, _reactRouterDom.withRouter)(DashboardWrapper);
-
-exports.default = _default;
+});

package/lib/Layout/dashboard/sidebar.js

@@ -7,20 +7,26 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _reactRouterDom = require("react-router-dom");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 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"];
+var _templateObject;
+
+const _excluded = ["links", "addons", "dense"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function 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; }
@@ -31,38 +37,71 @@ 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; }
 
-function Sidebar(_ref) {
+// 渲染 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: _ref => {
+        let {
+          isActive
+        } = _ref;
+        return isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link';
+      },
+      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(_ref2) {
   let {
     links,
-    addons
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+    addons,
+    dense
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _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 +112,16 @@ 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);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .layout-sidebar-link {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 22px 24px;\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &.layout-sidebar-link--active {\n      color: ", ";\n      background: ", ";\n      border-left-color: ", ";\n    }\n  }\n  .layout-sidebar-icon {\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    > img,\n    > svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .layout-sidebar-badge {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 10px;\n      height: 10px;\n      border-radius: 10px;\n      background-color: #fe4e44;\n      right: -2px;\n      top: 0;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n    }\n  }\n  .layout-sidebar-link-text {\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    text-align: center;\n    text-transform: capitalize;\n    letter-spacing: normal;\n  }\n  .layout-sidebar-divider {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &::after {\n      content: '';\n      display: inline-block;\n      width: 80px;\n      max-width: 100%;\n      border-bottom: 1px solid #ddd;\n    }\n  }\n  &.layout-sidebar-dense {\n    box-sizing: border-box;\n    height: 100%;\n    padding-top: 28px;\n    border-right: 1px solid #ddd;\n    .layout-sidebar-link {\n      flex-direction: row;\n      align-items: center;\n      padding: 10px 36px 10px 24px;\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 12px;\n      > img,\n      > svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n    .layout-sidebar-badge {\n      &:after {\n        width: 6px;\n        height: 6px;\n        border-radius: 6px;\n        right: -2px;\n        top: 0;\n      }\n    }\n    .layout-sidebar-link-text {\n      margin-top: 0;\n      font-size: 14px;\n    }\n    .layout-sidebar-divider {\n      &::after {\n        content: '';\n        display: inline-block;\n        width: 100%;\n        margin: 12px 0;\n      }\n    }\n  }\n"])), 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/Layout/dashboard-legacy/header.js

@@ -7,7 +7,7 @@ exports.default = Header;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
@@ -31,6 +31,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -43,10 +45,9 @@ 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; }
 
-const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
-  displayName: "header__StyledAppBar",
-  componentId: "sc-9jjwz7-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledAppBar = (0, _styled.default)(_AppBar.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    z-index: ", ";\n    background: ", ";\n    box-shadow: none;\n    top: 0;\n    height: auto;\n  }\n  .header-toolbar {\n    background: ", ";\n    color: ", ";\n    margin: ", "px 0;\n  }\n  .header-link {\n    display: flex;\n    text-decoration: none;\n    flex-shrink: 1;\n    overflow: hidden;\n  }\n  .header-logo {\n    margin-right: 20px;\n  }\n  .header-title {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n  }\n  .header-title__primary {\n    font-size: 24px;\n    font-weight: 800;\n    color: ", ";\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n  }\n  .header-title__secondary {\n    font-size: 14px;\n    line-height: 1.71;\n    color: ", ";\n  }\n\n  .header-addons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 9999999;\n\n    .user-addon {\n      .header-avatar {\n        width: 32px;\n        border-radius: 16px;\n        height: auto;\n      }\n    }\n  }\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-title {\n      display: none;\n    }\n    .header-title__primary {\n      font-size: 20px;\n    }\n    .header-menu {\n      display: block;\n    }\n  }\n"])), props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
 /*
   自定义 logo 相关:
   如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),

package/lib/Layout/dashboard-legacy/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
@@ -31,6 +31,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -43,10 +45,9 @@ 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; }
 
-const Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "dashboard-legacy__Wrapper",
-  componentId: "sc-z8z10v-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard__body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard__main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard__content {\n    flex: 1;\n  }\n\n  .drawerPaper {\n    position: relative;\n    white-space: nowrap;\n    width: 120px;\n    background: ", ";\n    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ", ");\n    border: 0;\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
 
 function Dashboard(_ref) {
   let {

package/lib/Layout/dashboard-legacy/sidebar.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Sidebar;
 
 var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -27,10 +27,14 @@ var _Logo = _interopRequireDefault(require("../../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["location", "images", "links", "prefix", "addons", "logo"];
+var _templateObject, _templateObject2;
+
+const _excluded = ["images", "links", "prefix", "addons", "logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function 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; }
@@ -43,7 +47,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function Sidebar(_ref) {
   let {
-    location,
     images,
     links,
     prefix,
@@ -53,6 +56,7 @@ function Sidebar(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _styles.useTheme)();
+  const location = (0, _reactRouterDom.useLocation)();
 
   const isSelected = (url, name) => {
     const pattern = new RegExp("/".concat(name));
@@ -100,7 +104,6 @@ function Sidebar(_ref) {
 }
 
 Sidebar.propTypes = {
-  location: _propTypes.default.object.isRequired,
   images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
   prefix: _propTypes.default.string,
@@ -112,16 +115,6 @@ Sidebar.defaultProps = {
   addons: null,
   logo: null
 };
-const MenuItems = /*#__PURE__*/(0, _react.memo)(_styledComponents.default.div.withConfig({
-  displayName: "sidebar__MenuItems",
-  componentId: "sc-gtwxx4-0"
-})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
+const MenuItems = /*#__PURE__*/(0, _react.memo)(_styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n\n  && .sidebar-logo {\n    display: none;\n    border-bottom: 1px solid #eee;\n    background: ", ";\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    padding: 10px 0;\n    text-align: center;\n    font-size: 0;\n  }\n  ", " {\n    && .sidebar-logo {\n      display: block;\n    }\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "sidebar__MenuItem",
-  componentId: "sc-gtwxx4-1"
-})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
-
-var _default = (0, _reactRouterDom.withRouter)(Sidebar);
-
-exports.default = _default;
+const MenuItem = (0, _styled.default)(_Button.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    transition: all 200ms ease-in-out;\n    background: ", ";\n    padding: 24px 0;\n    border-left: 2px solid ", ";\n    border-radius: 0;\n\n    &:hover {\n      background: ", ";\n      border-left-color: ", ";\n    }\n\n    .menu-title {\n      margin-top: 8px;\n      font-size: 12px;\n      font-weight: 500;\n      text-align: center;\n      text-transform: capitalize;\n      letter-spacing: normal;\n      width: 80%;\n      color: ", ";\n    }\n  }\n"])), props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);

package/lib/Layout/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
@@ -47,10 +47,14 @@ var _Logo = _interopRequireDefault(require("../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["title", "brand", "description", "links", "logo", "showLogo", "addons", "footer", "baseUrl", "homeUrl", "children", "variant", "contentOnly"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function 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; }
@@ -268,12 +272,6 @@ Layout.defaultProps = {
   })
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "Layout__Div",
-  componentId: "sc-12bllvc-0"
-})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  .appbar {\n    &.appbar--border {\n      box-shadow: none;\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        bottom: -1px;\n        display: block;\n        background-color: rgba(0, 0, 0, 0.12);\n      }\n    }\n  }\n\n  .toolbar {\n    min-height: 56px;\n    background: inherit;\n    white-space: nowrap;\n    .menu-logo {\n      font-size: 0;\n      margin-right: 8px;\n    }\n\n    .nav-links {\n      display: flex;\n      align-items: center;\n      .nav-link {\n        margin: 8px 12px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n      }\n\n      .highlight-nav {\n        font-weight: bolder;\n      }\n    }\n    .brand {\n      cursor: pointer;\n      text-decoration: none;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      flex-shrink: 1;\n    }\n    .description {\n      color: #999;\n      font-size: 15px;\n      margin-left: 10px;\n      font-weight: normal;\n      flex-shrink: 999999;\n    }\n  }\n\n  ", " {\n    .toolbar {\n      .menu-button {\n        display: none;\n      }\n      .menu-logo {\n        & + .brand {\n          padding-left: 45px;\n          margin-left: -45px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    .toolbar {\n      .nav-links,\n      .menu-logo,\n      .description {\n        display: none;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
 
-const DrawerDiv = _styledComponents.default.nav.withConfig({
-  displayName: "Layout__DrawerDiv",
-  componentId: "sc-12bllvc-1"
-})(["width:240px;.drawer-paper{width:240px;}.toolbar{min-height:56px;}a:hover,a:active,a:visited,a:focus{text-decoration:none;}.drawer-highlight-nav{background-color:#eee;}.toolbar--drawer{font-size:18px;.menu-logo{display:inline-flex;}}"]);
+const DrawerDiv = _styled.default.nav(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 240px;\n  .drawer-paper {\n    width: 240px;\n  }\n  .toolbar {\n    min-height: 56px;\n  }\n\n  a:hover,\n  a:active,\n  a:visited,\n  a:focus {\n    text-decoration: none;\n  }\n\n  .drawer-highlight-nav {\n    background-color: #eee;\n  }\n\n  .toolbar--drawer {\n    font-size: 18px;\n    .menu-logo {\n      display: inline-flex;\n    }\n  }\n"])));

package/lib/Locale/selector.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -39,10 +39,14 @@ var _context = require("./context");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["showText", "popperProps", "popperType", "icon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function 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; }
@@ -182,7 +186,4 @@ LocaleSelector.defaultProps = {
 var _default = LocaleSelector;
 exports.default = _default;
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "selector__Div",
-  componentId: "sc-wfz3sf-0"
-})(["display:inline-block;.trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;color:", ";}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-image {\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));