@arcblock/ux 2.4.15 → 2.4.18

package/lib/Empty/index.js

@@ -7,13 +7,13 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _EmptyIcon = _interopRequireDefault(require("@arcblock/icons/lib/EmptyIcon"));
 
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["name", "color", "size", "children"];
+const _excluded = ["color", "size", "children"];
 
 var _templateObject;
 
@@ -35,7 +35,6 @@ const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject =
 
 function Empty(_ref) {
   let {
-    name,
     color,
     size,
     children
@@ -43,11 +42,13 @@ function Empty(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: name,
-      size: size,
-      className: "empty-icon",
-      color: color
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyIcon.default, {
+      style: {
+        width: size,
+        height: size,
+        color
+      },
+      className: "empty-icon"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "empty-content",
       children: children
@@ -57,13 +58,11 @@ function Empty(_ref) {
 
 Empty.propTypes = {
   color: _propTypes.default.string,
-  name: _propTypes.default.string,
   size: _propTypes.default.number,
   children: _propTypes.default.any
 };
 Empty.defaultProps = {
   color: 'inherit',
-  name: 'inbox',
   size: 36,
   children: null
 };

package/lib/Layout/dashboard/index.js

@@ -75,8 +75,13 @@ function NavMenuWrapper(_ref) {
 
 function formatLinks(links, location) {
   return links.map(link => {
-    if (Array.isArray(link)) {
-      return formatLinks(link, location);
+    var _link$children;
+
+    if ((_link$children = link.children) !== null && _link$children !== void 0 && _link$children.length) {
+      return _objectSpread(_objectSpread({}, link), {}, {
+        label: link.title,
+        children: formatLinks(link.children, location)
+      });
     }
 
     return _objectSpread(_objectSpread({}, link), {}, {
@@ -108,9 +113,13 @@ function Dashboard(_ref2) {
   const theme = (0, _Theme.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
   const navItems = (0, _react.useMemo)(() => formatLinks(links, location), [location, links]);
-  const flattendNavItems = navItems.flat();
+  const isGroupedMode = navItems.some(item => {
+    var _item$children;
+
+    return !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length);
+  }); // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
 
-  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
 
   const classes = (0, _clsx.default)('dashboard', {
     'dashboard-dense': _dense
@@ -120,7 +129,7 @@ function Dashboard(_ref2) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmet.default, {
       title: title
     }, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
-      $theme: theme,
+      className: "dashboard-header",
       children: _ref3 => {
         let {
           isMobile,
@@ -130,7 +139,7 @@ function Dashboard(_ref2) {
         if (isMobile) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavMenuWrapper, {
             mode: "inline",
-            items: flattendNavItems,
+            items: navItems,
             closeMenu: closeMenu,
             bgColor: "transparent",
             activeTextColor: theme.palette.primary.main
@@ -183,7 +192,7 @@ Dashboard.defaultProps = {
   sidebarWidth: 120,
   dense: 'auto'
 };
-const Wrapper = (0, _Theme.styled)('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 Wrapper = (0, _Theme.styled)('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    overflow: hidden;\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-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\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, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {

package/lib/Layout/dashboard/sidebar.js

@@ -37,26 +37,23 @@ 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 renderGroup(item) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: "layout-sidebar-group",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "layout-sidebar-group-title",
+      children: item.title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      children: item.children.map(renderItem)
+    })]
+  }, "group-".concat(item.title));
 }
 
-function renderLinksItem(item) {
-  if (Array.isArray(item)) {
-    return item.map(renderLinksItem);
+function renderItem(item) {
+  var _item$children;
+
+  if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+    return renderGroup(item);
   }
 
   const {
@@ -69,6 +66,7 @@ function renderLinksItem(item) {
   } = item; // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    className: "layout-sidebar-item",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_externalLink.NavLink, {
       external: external,
       to: url,
@@ -80,7 +78,7 @@ function renderLinksItem(item) {
           'layout-sidebar-link--active': external ? active : isActive
         });
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
         children: icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -105,7 +103,7 @@ function Sidebar(_ref2) {
       'layout-sidebar-dense': dense
     }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: renderLinks(links)
+      children: links.map(renderItem)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         flex: 1
@@ -124,6 +122,6 @@ Sidebar.defaultProps = {
   dense: false
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const Root = (0, _Theme.styled)('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);
+const Root = (0, _Theme.styled)('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-dense {\n    box-sizing: border-box;\n    padding: 20px 0;\n    font-weight: bold;\n    .layout-sidebar-item {\n      padding: 0 16px;\n    }\n    .layout-sidebar-item + .layout-sidebar-item {\n      margin-top: 1px;\n    }\n    .layout-sidebar-link {\n      box-sizing: border-box;\n      flex-direction: row;\n      align-items: center;\n      width: 100%;\n      padding: 8px;\n      &:hover,\n      &.layout-sidebar-link--active {\n        color: ", ";\n        background: ", ";\n        border: 0;\n        border-radius: 4px;\n      }\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 8px;\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-group {\n      color: ", ";\n      .layout-sidebar-group-title {\n        display: inline-block;\n        padding: 8px 0 8px 24px;\n        font-size: 13px;\n        text-transform: uppercase;\n      }\n    }\n    .layout-sidebar-group + .layout-sidebar-group,\n    .layout-sidebar-group + .layout-sidebar-item,\n    .layout-sidebar-item + .layout-sidebar-group {\n      margin-top: 16px;\n    }\n  }\n"])), props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700, props => props.theme.palette.grey[900], props => props.theme.palette.grey[100], props => props.theme.palette.text.hint);
 var _default = Sidebar;
 exports.default = _default;

package/lib/Locale/selector.js

@@ -39,7 +39,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["showText", "popperProps", "popperType", "icon"];
+const _excluded = ["showText", "popperProps", "popperType", "icon", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -62,7 +62,8 @@ function LocaleSelector(props) {
     showText,
     popperProps,
     popperType,
-    icon: Icon
+    icon: Icon,
+    size
   } = props,
         rest = _objectWithoutProperties(props, _excluded);
 
@@ -111,12 +112,12 @@ function LocaleSelector(props) {
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Globe.default, {
       style: {
-        width: 26,
-        height: 24.76,
+        width: 'auto',
+        height: size,
         color: theme.palette.text.secondary
       }
     });
-  }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary]);
+  }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary, size]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
     component: "div",
     dark: dark,
@@ -183,4 +184,4 @@ LocaleSelector.defaultProps = {
 };
 var _default = LocaleSelector;
 exports.default = _default;
-const Div = (0, _Theme.styled)('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));
+const Div = (0, _Theme.styled)('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-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 => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/NavMenu/style.js

@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      text-decoration: none;\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 const HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n  }\n  .navmenu-root > .navmenu-item:first-child,\n  .navmenu-root > .navmenu-sub:first-child {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
 /* inline mode */
 

package/package.json

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

package/src/Empty/index.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-
-import Icon from '../Icon';
+import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
 import { styled } from '../Theme';
 
 const Wrapper = styled('div')`
@@ -16,10 +15,10 @@ const Wrapper = styled('div')`
   }
 `;
 
-function Empty({ name, color, size, children, ...rest }) {
+function Empty({ color, size, children, ...rest }) {
   return (
     <Wrapper {...rest}>
-      <Icon name={name} size={size} className="empty-icon" color={color} />
+      <EmptyIcon style={{ width: size, height: size, color }} className="empty-icon" />
       <div className="empty-content">{children}</div>
     </Wrapper>
   );
@@ -27,13 +26,11 @@ function Empty({ name, color, size, children, ...rest }) {
 
 Empty.propTypes = {
   color: PropTypes.string,
-  name: PropTypes.string,
   size: PropTypes.number,
   children: PropTypes.any,
 };
 Empty.defaultProps = {
   color: 'inherit',
-  name: 'inbox',
   size: 36,
   children: null,
 };

package/src/Layout/dashboard/index.js

@@ -28,8 +28,12 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
 
 function formatLinks(links, location) {
   return links.map((link) => {
-    if (Array.isArray(link)) {
-      return formatLinks(link, location);
+    if (link.children?.length) {
+      return {
+        ...link,
+        label: link.title,
+        children: formatLinks(link.children, location),
+      };
     }
     return {
       ...link,
@@ -48,21 +52,22 @@ function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...r
   const theme = useTheme();
   const location = useLocation();
   const navItems = useMemo(() => formatLinks(links, location), [location, links]);
-  const flattendNavItems = navItems.flat();
-  const _dense = dense === 'auto' ? flattendNavItems.length >= 8 : dense;
+  const isGroupedMode = navItems.some((item) => !!item.children?.length);
+  // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
+  const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
   const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
 
   return (
     <Wrapper {...rest} className={classes}>
       <Helmet title={title} key={title} />
 
-      <StyledUxHeader {...headerProps} $theme={theme}>
+      <StyledUxHeader {...headerProps} className="dashboard-header">
         {({ isMobile, closeMenu }) => {
           if (isMobile) {
             return (
               <NavMenuWrapper
                 mode="inline"
-                items={flattendNavItems}
+                items={navItems}
                 closeMenu={closeMenu}
                 bgColor="transparent"
                 activeTextColor={theme.palette.primary.main}
@@ -124,6 +129,7 @@ const Wrapper = styled('div')`
     box-sizing: border-box;
     flex: 0 0 auto;
     width: ${(props) => props.sidebarWidth}px;
+    overflow: hidden;
     &:hover {
       overflow-y: auto;
     }
@@ -138,8 +144,12 @@ const Wrapper = styled('div')`
     flex: 1;
   }
   &.dashboard-dense {
+    .dashboard-header {
+      border-bottom: 1px solid #eee;
+    }
     .dashboard-sidebar {
-      width: auto;
+      width: 256px;
+      border-right: 1px solid #eee;
     }
   }
   ${(props) => props.theme.breakpoints.up('md')} {

package/src/Layout/dashboard/sidebar.js

@@ -6,35 +6,30 @@ import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 
-// 渲染 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 renderGroup(item) {
+  return (
+    <li key={`group-${item.title}`} className="layout-sidebar-group">
+      <span className="layout-sidebar-group-title">{item.title}</span>
+      <ul>{item.children.map(renderItem)}</ul>
+    </li>
+  );
 }
 
-function renderLinksItem(item) {
-  if (Array.isArray(item)) {
-    return item.map(renderLinksItem);
+function renderItem(item) {
+  if (item.children?.length) {
+    return renderGroup(item);
   }
   const { url, icon, title, showBadge, external, active } = item;
   // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
   return (
-    <li key={url}>
+    <li key={url} className="layout-sidebar-item">
       <NavLink
         external={external}
         to={url}
         className={({ isActive }) =>
           clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
         }>
-        <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
+        {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
         <Typography component="span" className="layout-sidebar-link-text">
           {title}
         </Typography>
@@ -46,7 +41,7 @@ function renderLinksItem(item) {
 function Sidebar({ links, addons, dense, ...rest }) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
-      <ul>{renderLinks(links)}</ul>
+      <ul>{links.map(renderItem)}</ul>
       <div style={{ flex: 1 }} />
       {addons}
     </Root>
@@ -121,33 +116,35 @@ 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;
+    padding: 20px 0;
+    font-weight: bold;
+    .layout-sidebar-item {
+      padding: 0 16px;
+    }
+    .layout-sidebar-item + .layout-sidebar-item {
+      margin-top: 1px;
+    }
     .layout-sidebar-link {
+      box-sizing: border-box;
       flex-direction: row;
       align-items: center;
-      padding: 10px 36px 10px 24px;
+      width: 100%;
+      padding: 8px;
+      &:hover,
+      &.layout-sidebar-link--active {
+        color: ${(props) => props.theme.palette.grey[900]};
+        background: ${(props) => props.theme.palette.grey[100]};
+        border: 0;
+        border-radius: 4px;
+      }
     }
     .layout-sidebar-icon {
       display: inline-block;
       width: 20px;
       height: 20px;
-      margin-right: 12px;
+      margin-right: 8px;
       > img,
       > svg {
         width: 20px;
@@ -167,14 +164,20 @@ const Root = styled('div')`
       margin-top: 0;
       font-size: 14px;
     }
-    .layout-sidebar-divider {
-      &::after {
-        content: '';
+    .layout-sidebar-group {
+      color: ${(props) => props.theme.palette.text.hint};
+      .layout-sidebar-group-title {
         display: inline-block;
-        width: 100%;
-        margin: 12px 0;
+        padding: 8px 0 8px 24px;
+        font-size: 13px;
+        text-transform: uppercase;
       }
     }
+    .layout-sidebar-group + .layout-sidebar-group,
+    .layout-sidebar-group + .layout-sidebar-item,
+    .layout-sidebar-item + .layout-sidebar-group {
+      margin-top: 16px;
+    }
   }
 `;
 

package/src/Locale/selector.js

@@ -18,7 +18,7 @@ import { LocaleContext, languages } from './context';
 import { styled, useTheme } from '../Theme';
 
 function LocaleSelector(props) {
-  const { showText, popperProps, popperType, icon: Icon, ...rest } = props;
+  const { showText, popperProps, popperType, icon: Icon, size, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
@@ -61,8 +61,8 @@ function LocaleSelector(props) {
       return <Icon />;
     }
 
-    return <GlobeIcon style={{ width: 26, height: 24.76, color: theme.palette.text.secondary }} />;
-  }, [Icon, theme?.palette?.text?.secondary]);
+    return <GlobeIcon style={{ width: 'auto', height: size, color: theme.palette.text.secondary }} />;
+  }, [Icon, theme?.palette?.text?.secondary, size]);
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
@@ -130,11 +130,6 @@ const Div = styled('div')`
     justify-content: center;
     font-size: 14px;
 
-    .trigger-image {
-      width: ${(props) => props.size}px;
-      height: ${(props) => props.size}px;
-    }
-
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;

package/src/NavMenu/style.js

@@ -15,6 +15,7 @@ const NavMenuBase = styled('nav')`
   }
   a {
     color: inherit;
+    text-decoration: none;
   }
   /* active/hover */
   .navmenu-item,
@@ -32,7 +33,6 @@ const NavMenuBase = styled('nav')`
     cursor: pointer;
     transition: color 0.2s ease-in-out;
     a {
-      text-decoration: none;
       white-space: nowrap;
     }
     a::before {