@arcblock/ux 1.17.7 → 1.17.10

package/lib/Header/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "mobile", "onToggleMenu"];
+
+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; }
+
+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; }
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+function Header(_ref) {
+  let {
+    logo,
+    brand,
+    brandAddon,
+    description,
+    children,
+    addons,
+    mobile,
+    onToggleMenu
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+
+  const _mobile = _objectSpread(_objectSpread({}, Header.defaultProps.mobile), mobile); // 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+
+
+  const hideLogo = isMobile && _mobile.hideLogo;
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    $theme: theme
+  }), _mobile.enableMenu && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: "inherit",
+    edge: "start",
+    className: "header-menu",
+    onClick: onToggleMenu
+  }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), !hideLogo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-logo"
+  }, logo), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-title"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, brand), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-addon"
+  }, brandAddon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-brand-desc"
+  }, description)), children, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexGrow: 1
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-addons"
+  }, addons));
+}
+
+Header.propTypes = {
+  logo: _propTypes.default.any,
+  // 相当于 Title
+  brand: _propTypes.default.string,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: _propTypes.default.any,
+  // brand 下方的描述
+  description: _propTypes.default.string,
+  children: _propTypes.default.any,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: _propTypes.default.any,
+  // 窄屏下配置
+  mobile: _propTypes.default.shape({
+    enableMenu: _propTypes.default.bool,
+    hideLogo: _propTypes.default.bool
+  }),
+  onToggleMenu: _propTypes.default.func
+};
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  mobile: {
+    enableMenu: true,
+    hideLogo: true
+  },
+  onToggleMenu: () => {}
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "Header__Root",
+  componentId: "sc-ea5eli-0"
+})(["display:flex;align-items:center;position:relative;z-index:", ";height:64px;padding:12px 24px;font-size:14px;background:#fff;.header-menu{display:none;}.header-logo{display:inline-flex;justify-content:center;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;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;}", "{height:56px;padding:8px 16px;.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.breakpoints.down('sm'));
+
+var _default = Header;
+exports.default = _default;

package/lib/NavMenu/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _navMenu.default;
+  }
+});
+
+var _navMenu = _interopRequireDefault(require("./nav-menu"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/NavMenu/nav-menu.js

@@ -0,0 +1,286 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+require("./style.css");
+
+const _excluded = ["items", "orientation", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor"],
+      _excluded2 = ["id", "icon", "label", "active", "onClick"],
+      _excluded3 = ["id", "icon", "label", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 NavMenuContext = /*#__PURE__*/(0, _react.createContext)(); // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
+
+function filterItems(children) {
+  if (children) {
+    return _react.default.Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
+  }
+
+  return null;
+}
+
+function useUniqueId(id) {
+  const _id = (0, _react.useRef)(id || "navmenu-item-id-".concat(Math.random().toString(36).slice(2)));
+
+  return _id.current;
+}
+/**
+ * NavMenu, 导航组件, 可用于 header/footer/sidebar
+ */
+
+
+function NavMenu(_ref) {
+  var _children;
+
+  let {
+    items,
+    orientation,
+    children,
+    defaultActiveId,
+    textColor,
+    activeTextColor,
+    bgColor
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // eslint-disable-next-line no-param-reassign
+  children = filterItems(children);
+
+  if (!(items !== null && items !== void 0 && items.length) && !((_children = children) !== null && _children !== void 0 && _children.length)) {
+    return new Error("One of 'items' or 'children' is required by NavMenu component.");
+  }
+
+  const [state, setState] = (0, _react.useState)({
+    activeId: defaultActiveId,
+    openedIds: []
+  });
+  const contextValue = (0, _react.useMemo)(() => {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      activate: id => {
+        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+          activeId: id
+        }));
+      },
+      open: id => {
+        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+          openedIds: [...prev.openedIds, id]
+        }));
+      },
+      close: id => {
+        setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
+          openedIds: prev.openedIds.filter(item => item !== id)
+        }));
+      }
+    });
+  }, [state]);
+  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(orientation), rest.className);
+
+  const renderItem = (item, index) => {
+    if (item.children) {
+      return /*#__PURE__*/_react.default.createElement(Sub, {
+        key: index,
+        id: item.id,
+        icon: item.icon,
+        label: item.label
+      }, item.children.map(renderItem));
+    }
+
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(Item, {
+        key: index,
+        id: item.id,
+        icon: item.icon,
+        label: item.label,
+        active: item.active
+      })
+    );
+  };
+
+  return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    className: classes,
+    $textColor: textColor,
+    $activeTextColor: activeTextColor,
+    $bgColor: bgColor
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "navmenu-root"
+  }, items ? items.map(renderItem) : children)));
+}
+
+NavMenu.propTypes = {
+  items: _propTypes.default.array,
+  // 默认水平方向布局
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  children: _propTypes.default.array,
+  defaultActiveId: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  activeTextColor: _propTypes.default.string,
+  bgColor: _propTypes.default.string
+};
+NavMenu.defaultProps = {
+  items: null,
+  orientation: 'horizontal',
+  children: null,
+  defaultActiveId: null,
+  textColor: '#9397a1',
+  activeTextColor: '#25292f',
+  bgColor: '#fff'
+};
+
+const Root = _styledComponents.default.nav.withConfig({
+  displayName: "nav-menu__Root",
+  componentId: "sc-1atwjw0-0"
+})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";padding:8px 16px;background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
+/**
+ * Item
+ */
+
+
+function Item(_ref2) {
+  let {
+    id: _id,
+    icon,
+    label,
+    active,
+    onClick
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  const id = useUniqueId(_id);
+  const {
+    activeId,
+    activate
+  } = (0, _react.useContext)(NavMenuContext);
+  const classes = (0, _clsx.default)('navmenu-item', {
+    'navmenu-item--active': activeId === id
+  }, rest.className);
+
+  _react.default.useEffect(() => {
+    if (active) {
+      activate(id);
+    }
+  }, []);
+
+  const handleClick = () => {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+    activate(id);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(ItemRoot, Object.assign({}, rest, {
+    className: classes,
+    onClick: handleClick
+  }), icon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-item-icon"
+  }, icon), /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-item-content"
+  }, label));
+}
+
+Item.propTypes = {
+  id: _propTypes.default.string,
+  icon: _propTypes.default.element,
+  label: _propTypes.default.node,
+  // 未显式指定各个 item#id 时, 不方便设置 NavMenu#defaultActiveId, 此时可以给 item 指定 active, 表示 nav menu 默认激活该 item
+  // (仅在初始化时有效, 后续更新无效)
+  active: _propTypes.default.bool,
+  onClick: _propTypes.default.func
+};
+Item.defaultProps = {
+  id: null,
+  icon: null,
+  label: '',
+  active: false,
+  onClick: null
+};
+
+const ItemRoot = _styledComponents.default.li.withConfig({
+  displayName: "nav-menu__ItemRoot",
+  componentId: "sc-1atwjw0-1"
+})(["position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}"]);
+/**
+ * Sub
+ */
+
+
+function Sub(_ref3) {
+  let {
+    id: _id,
+    icon,
+    label,
+    children
+  } = _ref3,
+      rest = _objectWithoutProperties(_ref3, _excluded3);
+
+  const id = useUniqueId(_id);
+  const {
+    openedIds,
+    open,
+    close
+  } = (0, _react.useContext)(NavMenuContext);
+  const classes = (0, _clsx.default)('navmenu-sub', {
+    'navmenu-sub--opened': openedIds.includes(id)
+  }, rest.className);
+  return /*#__PURE__*/_react.default.createElement(SubRoot, Object.assign({}, rest, {
+    className: classes,
+    onMouseEnter: () => open(id),
+    onMouseLeave: () => close(id)
+  }), icon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-sub-icon"
+  }, icon), /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-sub-content"
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "navmenu-sub-container"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "navmenu-sub-list"
+  }, filterItems(children))));
+}
+
+Sub.propTypes = {
+  id: _propTypes.default.string,
+  icon: _propTypes.default.element,
+  label: _propTypes.default.node.isRequired,
+  children: _propTypes.default.array.isRequired
+};
+Sub.defaultProps = {
+  id: null,
+  icon: null
+};
+
+const SubRoot = _styledComponents.default.li.withConfig({
+  displayName: "nav-menu__SubRoot",
+  componentId: "sc-1atwjw0-2"
+})(["position:relative;cursor:pointer;.navmenu-sub-container{display:none;position:absolute;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;top:100%;}"]);
+
+NavMenu.Item = Item;
+NavMenu.Sub = Sub;
+var _default = NavMenu;
+exports.default = _default;

package/lib/NavMenu/style.css

@@ -0,0 +1,48 @@
+.navmenu .navmenu-root {
+  display: flex;
+  align-items: center;
+}
+.navmenu-item,
+.navmenu-sub {
+  display: flex;
+  align-items: center;
+}
+.navmenu-root > .navmenu-item,
+.navmenu-root > .navmenu-sub {
+  margin-left: 24px;
+}
+.navmenu-root > .navmenu-item:first-child,
+.navmenu-root > .navmenu-sub:first-child {
+  margin-left: 0;
+}
+.navmenu-item-icon,
+.navmenu-sub-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  line-height: 1;
+}
+.navmenu-item-icon > *,
+.navmenu-sub-icon > * {
+  width: auto !important;
+  height: 100% !important;
+}
+.navmenu-item-icon {
+  margin-right: 4px;
+}
+
+/* 二级列表 */
+.navmenu-root > .navmenu-sub > .navmenu-sub-container {
+  left: 50%;
+  transform: translateX(-50%);
+  padding-top: 16px;
+}
+.navmenu-root .navmenu-sub-list {
+  padding: 16px;
+  border-radius: 4px;
+  background: #fff;
+}
+.navmenu-sub-list > .navmenu-item + .navmenu-item {
+  margin-top: 8px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.7",
+  "version": "1.17.10",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "df7dc8e912096fb066271f0e185dfed5ec3d4127",
+  "gitHead": "5be9cb0f8aa802a2c7d198f3258f74e4bcc65c64",
   "dependencies": {
-    "@arcblock/icons": "^1.17.7",
-    "@arcblock/react-hooks": "^1.17.7",
+    "@arcblock/icons": "^1.17.10",
+    "@arcblock/react-hooks": "^1.17.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/Header/index.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@material-ui/core/Box';
+import useTheme from '@material-ui/core/styles/useTheme';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import MenuIcon from '@material-ui/icons/Menu';
+import Button from '@material-ui/core/IconButton';
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  mobile,
+  onToggleMenu,
+  ...rest
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const _mobile = { ...Header.defaultProps.mobile, ...mobile };
+  // 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+  const hideLogo = isMobile && _mobile.hideLogo;
+  return (
+    <Root {...rest} $theme={theme}>
+      {_mobile.enableMenu && (
+        <Button color="inherit" edge="start" className="header-menu" onClick={onToggleMenu}>
+          <MenuIcon />
+        </Button>
+      )}
+      {!hideLogo && <div className="header-logo">{logo}</div>}
+      <div className="header-brand">
+        <div className="header-brand-title">
+          <h2>{brand}</h2>
+          <div className="header-brand-addon">{brandAddon}</div>
+        </div>
+        <div className="header-brand-desc">{description}</div>
+      </div>
+      {children}
+      <Box flexGrow={1} />
+      <div className="header-addons">{addons}</div>
+    </Root>
+  );
+}
+
+Header.propTypes = {
+  logo: PropTypes.any,
+  // 相当于 Title
+  brand: PropTypes.string,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: PropTypes.any,
+  // brand 下方的描述
+  description: PropTypes.string,
+  children: PropTypes.any,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: PropTypes.any,
+  // 窄屏下配置
+  mobile: PropTypes.shape({
+    enableMenu: PropTypes.bool,
+    hideLogo: PropTypes.bool,
+  }),
+  onToggleMenu: PropTypes.func,
+};
+
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  mobile: { enableMenu: true, hideLogo: true },
+  onToggleMenu: () => {},
+};
+
+const Root = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: ${props => props.$theme.zIndex.drawer + 1};
+  height: 64px;
+  padding: 12px 24px;
+  font-size: 14px;
+  background: #fff;
+  .header-menu {
+    display: none;
+  }
+  .header-logo {
+    display: inline-flex;
+    justify-content: center;
+    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;
+    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;
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    height: 56px;
+    padding: 8px 16px;
+    .header-menu {
+      display: inline-block;
+    }
+    .header-logo {
+      height: 32px;
+    }
+    .header-brand {
+      display: none;
+    }
+  }
+`;
+
+export default Header;

package/src/NavMenu/index.js

@@ -0,0 +1 @@
+export { default } from './nav-menu';

package/src/NavMenu/nav-menu.js

@@ -0,0 +1,246 @@
+import React, { createContext, useContext, useMemo, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import clsx from 'clsx';
+import './style.css';
+
+const NavMenuContext = createContext();
+
+// 过滤 children 中的 Item/Sub, 忽略其它类型的 element
+function filterItems(children) {
+  if (children) {
+    return React.Children.toArray(children).filter(
+      child => child.type === Item || child.type === Sub
+    );
+  }
+  return null;
+}
+
+function useUniqueId(id) {
+  const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
+  return _id.current;
+}
+
+/**
+ * NavMenu, 导航组件, 可用于 header/footer/sidebar
+ */
+function NavMenu({
+  items,
+  orientation,
+  children,
+  defaultActiveId,
+  textColor,
+  activeTextColor,
+  bgColor,
+  ...rest
+}) {
+  // eslint-disable-next-line no-param-reassign
+  children = filterItems(children);
+  if (!items?.length && !children?.length) {
+    return new Error("One of 'items' or 'children' is required by NavMenu component.");
+  }
+  const [state, setState] = useState({ activeId: defaultActiveId, openedIds: [] });
+  const contextValue = useMemo(() => {
+    return {
+      ...state,
+      activate: id => {
+        setState(prev => ({ ...prev, activeId: id }));
+      },
+      open: id => {
+        setState(prev => ({ ...prev, openedIds: [...prev.openedIds, id] }));
+      },
+      close: id => {
+        setState(prev => ({ ...prev, openedIds: prev.openedIds.filter(item => item !== id) }));
+      },
+    };
+  }, [state]);
+  const classes = clsx('navmenu', `navmenu--${orientation}`, rest.className);
+  const renderItem = (item, index) => {
+    if (item.children) {
+      return (
+        <Sub key={index} id={item.id} icon={item.icon} label={item.label}>
+          {item.children.map(renderItem)}
+        </Sub>
+      );
+    }
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Item key={index} id={item.id} icon={item.icon} label={item.label} active={item.active} />
+    );
+  };
+  return (
+    <NavMenuContext.Provider value={contextValue}>
+      <Root
+        {...rest}
+        className={classes}
+        $textColor={textColor}
+        $activeTextColor={activeTextColor}
+        $bgColor={bgColor}>
+        <ul className="navmenu-root">{items ? items.map(renderItem) : children}</ul>
+      </Root>
+    </NavMenuContext.Provider>
+  );
+}
+
+NavMenu.propTypes = {
+  items: PropTypes.array,
+  // 默认水平方向布局
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  children: PropTypes.array,
+  defaultActiveId: PropTypes.string,
+  textColor: PropTypes.string,
+  activeTextColor: PropTypes.string,
+  bgColor: PropTypes.string,
+};
+NavMenu.defaultProps = {
+  items: null,
+  orientation: 'horizontal',
+  children: null,
+  defaultActiveId: null,
+  textColor: '#9397a1',
+  activeTextColor: '#25292f',
+  bgColor: '#fff',
+};
+
+const Root = styled.nav`
+  --text-color: ${props => props.$textColor};
+  --active-text-color: ${props => props.$activeTextColor};
+  --bg-color: ${props => props.$bgColor};
+
+  padding: 8px 16px;
+  background-color: var(--bg-color);
+  font-size: 14px;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .navmenu-item,
+  .navmenu-item a,
+  .navmenu-sub {
+    color: var(--text-color);
+  }
+  .navmenu-item--active,
+  .navmenu-item:hover,
+  .navmenu-item:hover a,
+  .navmenu-item--active a,
+  .navmenu-sub--opened {
+    color: var(--active-text-color);
+  }
+`;
+
+/**
+ * Item
+ */
+function Item({ id: _id, icon, label, active, onClick, ...rest }) {
+  const id = useUniqueId(_id);
+  const { activeId, activate } = useContext(NavMenuContext);
+  const classes = clsx('navmenu-item', { 'navmenu-item--active': activeId === id }, rest.className);
+  React.useEffect(() => {
+    if (active) {
+      activate(id);
+    }
+  }, []);
+  const handleClick = () => {
+    onClick?.();
+    activate(id);
+  };
+  return (
+    <ItemRoot {...rest} className={classes} onClick={handleClick}>
+      {icon && <span className="navmenu-item-icon">{icon}</span>}
+      <span className="navmenu-item-content">{label}</span>
+    </ItemRoot>
+  );
+}
+
+Item.propTypes = {
+  id: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.node,
+  // 未显式指定各个 item#id 时, 不方便设置 NavMenu#defaultActiveId, 此时可以给 item 指定 active, 表示 nav menu 默认激活该 item
+  // (仅在初始化时有效, 后续更新无效)
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+Item.defaultProps = {
+  id: null,
+  icon: null,
+  label: '',
+  active: false,
+  onClick: null,
+};
+
+const ItemRoot = styled.li`
+  position: relative;
+  cursor: pointer;
+  a {
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  a::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: transparent;
+    content: '';
+  }
+`;
+
+/**
+ * Sub
+ */
+function Sub({ id: _id, icon, label, children, ...rest }) {
+  const id = useUniqueId(_id);
+  const { openedIds, open, close } = useContext(NavMenuContext);
+  const classes = clsx(
+    'navmenu-sub',
+    { 'navmenu-sub--opened': openedIds.includes(id) },
+    rest.className
+  );
+  return (
+    <SubRoot
+      {...rest}
+      className={classes}
+      onMouseEnter={() => open(id)}
+      onMouseLeave={() => close(id)}>
+      {icon && <span className="navmenu-sub-icon">{icon}</span>}
+      <span className="navmenu-sub-content">{label}</span>
+      <div className="navmenu-sub-container">
+        <ul className="navmenu-sub-list">{filterItems(children)}</ul>
+      </div>
+    </SubRoot>
+  );
+}
+
+Sub.propTypes = {
+  id: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.node.isRequired,
+  children: PropTypes.array.isRequired,
+};
+
+Sub.defaultProps = {
+  id: null,
+  icon: null,
+};
+
+const SubRoot = styled.li`
+  position: relative;
+  cursor: pointer;
+  .navmenu-sub-container {
+    display: none;
+    position: absolute;
+  }
+  &.navmenu-sub--opened > .navmenu-sub-container {
+    display: block;
+    top: 100%;
+  }
+`;
+
+NavMenu.Item = Item;
+NavMenu.Sub = Sub;
+
+export default NavMenu;

package/src/NavMenu/style.css

@@ -0,0 +1,48 @@
+.navmenu .navmenu-root {
+  display: flex;
+  align-items: center;
+}
+.navmenu-item,
+.navmenu-sub {
+  display: flex;
+  align-items: center;
+}
+.navmenu-root > .navmenu-item,
+.navmenu-root > .navmenu-sub {
+  margin-left: 24px;
+}
+.navmenu-root > .navmenu-item:first-child,
+.navmenu-root > .navmenu-sub:first-child {
+  margin-left: 0;
+}
+.navmenu-item-icon,
+.navmenu-sub-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
+  line-height: 1;
+}
+.navmenu-item-icon > *,
+.navmenu-sub-icon > * {
+  width: auto !important;
+  height: 100% !important;
+}
+.navmenu-item-icon {
+  margin-right: 4px;
+}
+
+/* 二级列表 */
+.navmenu-root > .navmenu-sub > .navmenu-sub-container {
+  left: 50%;
+  transform: translateX(-50%);
+  padding-top: 16px;
+}
+.navmenu-root .navmenu-sub-list {
+  padding: 16px;
+  border-radius: 4px;
+  background: #fff;
+}
+.navmenu-sub-list > .navmenu-item + .navmenu-item {
+  margin-top: 8px;
+}