@arcblock/ux 2.1.15 → 2.1.18

package/lib/Datatable/TableSearch.js

@@ -37,6 +37,9 @@ function TableSearch(_ref) {
     onSearchOpen
   } = _ref;
   const [inputMode, setInputMode] = (0, _react.useState)(false);
+  const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
+  const inputTimer = (0, _react.useRef)(null);
+  const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
     setInputMode(true);
@@ -44,7 +47,19 @@ function TableSearch(_ref) {
   };
 
   const onChange = event => {
-    searchTextUpdate(event.currentTarget.value);
+    const {
+      value
+    } = event.currentTarget;
+
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
   };
 
   const clickClose = () => {
@@ -69,7 +84,7 @@ function TableSearch(_ref) {
     variant: "standard",
     spacing: 2,
     onChange: onChange,
-    value: searchText || '',
+    value: searchDebounceTime ? innerSearchText : searchText || '',
     autoFocus: true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : '')

package/lib/Datatable/index.js

@@ -17,6 +17,8 @@ var _isObject = _interopRequireDefault(require("lodash/isObject"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _Empty = _interopRequireDefault(require("../Empty"));
+
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
@@ -140,7 +142,7 @@ function ReDatatable(_ref2) {
   (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
   let textLabels = {
     body: {
-      noMatch: 'Sorry, no matching records found',
+      noMatch: /*#__PURE__*/_react.default.createElement(_Empty.default, null, "Sorry, no matching records found"),
       toolTip: 'Sort'
     },
     pagination: {
@@ -176,7 +178,7 @@ function ReDatatable(_ref2) {
   if (locale === 'zh') {
     textLabels = {
       body: {
-        noMatch: '对不起，没有找到匹配的记录',
+        noMatch: /*#__PURE__*/_react.default.createElement(_Empty.default, null, "\u5BF9\u4E0D\u8D77\uFF0C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"),
         toolTip: '排序'
       },
       pagination: {

package/lib/Header/header.js

@@ -64,9 +64,10 @@ function Header(_ref) {
 }
 
 Header.propTypes = {
+  // logo img/svg, 可以包裹一个 a 标签
   logo: _propTypes.default.node,
-  // 相当于 Title
-  brand: _propTypes.default.string,
+  // 相当于 Title, 可以包裹一个 a 标签
+  brand: _propTypes.default.node,
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
   brandAddon: _propTypes.default.node,
   // brand 下方的描述
@@ -90,7 +91,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;> *:last-child{padding-right:0;}}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;> *:last-child{padding-right:0;}}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Header/responsive-header.js

@@ -92,7 +92,7 @@ function ResponsiveHeader(_ref) {
     open: drawerOpen,
     onClose: () => setDrawerOpen(false),
     ModalProps: {
-      disablePortal: true,
+      disablePortal: false,
       keepMounted: true
     }
   }, /*#__PURE__*/_react.default.createElement(Sidebar, null, /*#__PURE__*/_react.default.createElement("div", {

package/lib/Layout/dashboard/index.js

@@ -3,31 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Dashboard;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactRouterDom = require("react-router-dom");
+
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
 
-var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
-var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
+var _dashboardLegacy = _interopRequireDefault(require("../dashboard-legacy"));
 
-var _sidebar = _interopRequireDefault(require("./sidebar"));
+var _Header = require("../../Header");
 
-var _header = _interopRequireDefault(require("./header"));
+var _NavMenu = _interopRequireDefault(require("../../NavMenu"));
 
 var _Footer = _interopRequireDefault(require("../../Footer"));
 
-const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
+var _sidebar = _interopRequireDefault(require("./sidebar"));
+
+const _excluded = ["closeMenu"],
+      _excluded2 = ["children", "title", "headerProps", "links"],
+      _excluded3 = ["legacy"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,120 +43,133 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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; }
 
-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__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.dashboard__footer{padding-left:30px;}.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 Dashboard(_ref) {
+// 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
+// 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
+// eslint-disable-next-line react/prop-types
+function NavMenuWrapper(_ref) {
   let {
-    children,
-    title,
-    brand,
-    description,
-    brandAddon,
-    headerAddon,
-    images,
-    links,
-    prefix,
-    fullWidth,
-    contentLayout,
-    className,
-    homeUrl,
-    logo
+    closeMenu
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const breakpoint = 960;
-  const {
-    width
-  } = (0, _useWindowSize.default)();
-  const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
-  const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
+  const location = (0, _reactRouterDom.useLocation)();
   (0, _react.useEffect)(() => {
-    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
-    setDrawerMode(newMode);
-    setDrawerOpen(newMode !== 'temporary');
-  }, [width]);
-
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
-
-  const isFullWidth = fullWidth || contentLayout === 'row';
-  return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
-    className: "dashboard ".concat(className)
-  }, rest), /*#__PURE__*/_react.default.createElement(_reactHelmet.default, {
-    title: "".concat(title, "-").concat(brand)
-  }), /*#__PURE__*/_react.default.createElement(_header.default, {
-    className: "dashboard__header",
-    onToggleMenu: onToggleDrawer,
-    brand: brand,
-    brandAddon: brandAddon,
-    description: description,
-    addons: headerAddon,
-    homeUrl: homeUrl,
-    logo: logo
+    closeMenu();
+  }, [location]);
+  return /*#__PURE__*/_react.default.createElement(_NavMenu.default, rest);
+}
+
+function Dashboard(_ref2) {
+  let {
+    children,
+    title,
+    headerProps,
+    links
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  const theme = (0, _useTheme.default)();
+  const location = (0, _reactRouterDom.useLocation)();
+  const navItems = (0, _react.useMemo)(() => links.map(link => _objectSpread(_objectSpread({}, link), {}, {
+    label: /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+      to: link.url
+    }, link.title),
+    active: !!(0, _reactRouterDom.matchPath)(location.pathname, {
+      path: link.url,
+      exact: false
+    })
+  })), [location, links]);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({}, rest, {
+    className: "dashboard ".concat(rest.className)
+  }), /*#__PURE__*/_react.default.createElement(_reactHelmet.default, {
+    title: title,
+    key: title
+  }), /*#__PURE__*/_react.default.createElement(StyledUxHeader, headerProps, _ref3 => {
+    let {
+      isMobile,
+      closeMenu
+    } = _ref3;
+
+    if (isMobile) {
+      return /*#__PURE__*/_react.default.createElement(NavMenuWrapper, {
+        mode: "inline",
+        items: navItems,
+        closeMenu: closeMenu,
+        bgColor: "transparent",
+        activeTextColor: theme.palette.primary.main
+      });
+    }
+
+    return null;
   }), /*#__PURE__*/_react.default.createElement(_Box.default, {
     display: "flex",
-    className: "dashboard__body"
-  }, /*#__PURE__*/_react.default.createElement(_Drawer.default, {
-    variant: drawerMode,
-    className: "drawer",
-    classes: {
-      paper: 'drawerPaper'
-    },
-    open: drawerOpen,
-    onClose: onToggleDrawer,
-    ModalProps: {
-      disablePortal: true,
-      keepMounted: true
-    }
+    className: "dashboard-body"
+  }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
+    mdDown: true
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: "dashboard-sidebar"
   }, /*#__PURE__*/_react.default.createElement(_sidebar.default, {
-    className: "dashboard__sidebar",
-    images: images,
-    links: links,
-    prefix: prefix,
-    logo: logo
-  })), /*#__PURE__*/_react.default.createElement(_Box.default, {
-    className: "dashboard__main"
+    links: links
+  }))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: "dashboard-main"
   }, /*#__PURE__*/_react.default.createElement(_Container.default, {
-    maxWidth: isFullWidth ? false : 'lg',
-    className: "dashboard__content"
+    className: "dashboard-content"
   }, children), /*#__PURE__*/_react.default.createElement(_Footer.default, {
-    className: "dashboard__footer"
+    className: "dashboard-footer"
   }))));
 }
 
 Dashboard.propTypes = {
   children: _propTypes.default.any.isRequired,
   title: _propTypes.default.string,
-  brand: _propTypes.default.string.isRequired,
   links: _propTypes.default.array.isRequired,
-  images: _propTypes.default.object.isRequired,
-  brandAddon: _propTypes.default.object,
-  description: _propTypes.default.any.isRequired,
-  headerAddon: _propTypes.default.any,
-  prefix: _propTypes.default.string,
-  // 兼容旧版的设置，新版使用 fullWidth 进行设置
-  contentLayout: _propTypes.default.oneOf(['row', 'column']),
-  fullWidth: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  homeUrl: _propTypes.default.string,
-  logo: _propTypes.default.any
+  headerProps: _propTypes.default.object
 };
 Dashboard.defaultProps = {
   title: 'Home',
-  contentLayout: 'column',
-  headerAddon: null,
-  brandAddon: null,
-  prefix: '/images',
-  fullWidth: false,
-  className: '',
-  homeUrl: '/',
-  logo: null
-};
+  headerProps: {}
+};
+
+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;padding:0 24px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}.dashboard-footer{padding-left:30px;}"]);
+
+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;}"]); // 兼容旧版 dashboard
+
+function DashboardWrapper(_ref4) {
+  let {
+    legacy
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded3);
+
+  if (legacy) {
+    return /*#__PURE__*/_react.default.createElement(_dashboardLegacy.default, rest);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Dashboard, rest);
+}
+
+DashboardWrapper.propTypes = _objectSpread(_objectSpread({}, Dashboard.propTypes), {}, {
+  legacy: _propTypes.default.bool
+});
+DashboardWrapper.defaultProps = _objectSpread(_objectSpread({}, Dashboard.defaultProps), {}, {
+  legacy: true
+});
+
+var _default = (0, _reactRouterDom.withRouter)(DashboardWrapper);
+
+exports.default = _default;

package/lib/Layout/dashboard/sidebar.js

@@ -11,21 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _withTheme = _interopRequireDefault(require("@mui/styles/withTheme"));
-
 var _reactRouterDom = require("react-router-dom");
 
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _colors = require("@mui/material/colors");
 
-var _image = _interopRequireDefault(require("../../Icon/image"));
-
-var _Logo = _interopRequireDefault(require("../../Logo"));
-
-const _excluded = ["location", "theme", "images", "links", "prefix", "addons", "logo"];
+const _excluded = ["links", "addons"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,51 +27,31 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function Sidebar(_ref) {
   let {
-    location,
-    theme,
-    images,
     links,
-    prefix,
-    addons,
-    logo
+    addons
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const isSelected = (url, name) => {
-    const pattern = new RegExp("/".concat(name));
-    return pattern.test(location.pathname);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(MenuItems, rest, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-    to: "/",
-    className: "sidebar-logo"
-  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
-    showText: false,
-    size: 20
-  })), links.map(_ref2 => {
+  return /*#__PURE__*/_react.default.createElement(Root, rest, /*#__PURE__*/_react.default.createElement("ul", null, links.map(_ref2 => {
     let {
       url,
-      name,
+      icon,
       title,
       showBadge
     } = _ref2;
-    const selected = isSelected(url, name);
-    return /*#__PURE__*/_react.default.createElement(MenuItem, {
-      component: _reactRouterDom.Link,
-      key: url,
-      selected: selected,
-      to: url
-    }, /*#__PURE__*/_react.default.createElement(_image.default, {
-      name: images[name],
-      size: 36,
-      color: selected ? '#00c2c4' : theme.typography.color.main,
-      prefix: prefix,
-      showBadge: showBadge
-    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: url
+    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, {
+      to: url,
+      className: "layout-sidebar-link",
+      activeClassName: "layout-sidebar-link--active"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : '')
+    }, icon), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       component: "span",
-      className: "menu-title"
-    }, title));
-  }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "layout-sidebar-link-text"
+    }, title)));
+  })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1
     }
@@ -87,31 +59,18 @@ function Sidebar(_ref) {
 }
 
 Sidebar.propTypes = {
-  location: _propTypes.default.object.isRequired,
-  theme: _propTypes.default.object.isRequired,
-  images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
-  prefix: _propTypes.default.string,
-  addons: _propTypes.default.any,
-  logo: _propTypes.default.any
+  addons: _propTypes.default.any
 };
 Sidebar.defaultProps = {
-  prefix: '/images',
-  addons: null,
-  logo: null
+  addons: null
 };
-
-const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
-  displayName: "sidebar__MenuItems",
-  componentId: "sc-gaosgy-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 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-gaosgy-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)((0, _withTheme.default)(Sidebar));
+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:16px 0;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);
 
+var _default = Sidebar;
 exports.default = _default;

package/lib/Layout/{dashboard → dashboard-legacy}/header.js

@@ -39,7 +39,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
   displayName: "header__StyledAppBar",
-  componentId: "sc-yt81c4-0"
+  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'));
 /*
   自定义 logo 相关: