@blocklet/ui-react 2.4.23 → 2.4.26

package/lib/Dashboard/index.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Session = require("@arcblock/did-connect/lib/Session");
+
 var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
@@ -21,9 +25,11 @@ var _utils = require("../utils");
 
 var _blocklets = require("../blocklets");
 
+var _headerAddons2 = _interopRequireDefault(require("../common/header-addons"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["meta"];
+const _excluded = ["meta", "fallbackUrl", "invalidPathFallback", "headerAddons", "sessionManagerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,14 +46,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
+// eslint-disable-next-line no-shadow
 function Dashboard(_ref) {
-  var _formattedBlocklet$na;
+  var _sessionCtx$session;
 
   let {
-    meta
+    meta,
+    fallbackUrl,
+    invalidPathFallback,
+    headerAddons,
+    sessionManagerProps
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
+  const user = sessionCtx === null || sessionCtx === void 0 ? void 0 : (_sessionCtx$session = sessionCtx.session) === null || _sessionCtx$session === void 0 ? void 0 : _sessionCtx$session.user;
+  const userRole = user === null || user === void 0 ? void 0 : user.role;
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -60,6 +74,63 @@ function Dashboard(_ref) {
       return blocklet;
     }
   }, [blocklet]);
+  const {
+    localizedNav,
+    flattened,
+    matchedIndex
+  } = (0, _react.useMemo)(() => {
+    var _formattedBlocklet$na;
+
+    let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || []; // 根据 role 筛选 nav 数据
+
+    localizedNav = (0, _blocklets.filterNavByRole)(localizedNav, userRole); // 将 nav 数据处理成 ux dashboard 需要的格式
+
+    localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
+      title: item.title,
+      url: item.link,
+      icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "iconify",
+        "data-icon": item.icon
+      }) : null,
+      // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+      external: true,
+      children: item.items
+    }), 'items'); // 展平后使用 matchPaths 检测 link#active 状态
+
+    const flattened = (0, _utils.flatRecursive)(localizedNav).filter(item => !!item.url);
+    const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.url));
+
+    if (flattened !== null && flattened !== void 0 && flattened.length) {
+      flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+    }
+
+    return {
+      localizedNav,
+      flattened,
+      matchedIndex
+    };
+  }, [formattedBlocklet, locale, userRole]); // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 VC 导致无权限), 则跳转到 fallbackUrl
+  // 未认证 (user 为空) 时不做处理, 这种情况的页面跳转逻辑一般由应用自行处理
+
+  (0, _react.useLayoutEffect)(() => {
+    if (!!user && !(flattened !== null && flattened !== void 0 && flattened.length) && fallbackUrl) {
+      window.location.href = fallbackUrl;
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [fallbackUrl]); // 导航菜单变动且存在可用菜单但无匹配项时 (如切换 passport), 跳转到首个菜单项
+
+  (0, _react.useLayoutEffect)(() => {
+    if (!!user && !!(flattened !== null && flattened !== void 0 && flattened.length) && matchedIndex === -1) {
+      if (invalidPathFallback) {
+        invalidPathFallback();
+      } else {
+        var _flattened$;
+
+        window.location.href = ((_flattened$ = flattened[0]) === null || _flattened$ === void 0 ? void 0 : _flattened$.url) || _blocklets.publicPath;
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [invalidPathFallback]);
 
   if (!blocklet.appName) {
     return null;
@@ -70,25 +141,12 @@ function Dashboard(_ref) {
     appLogo,
     appName
   } = formattedBlocklet;
-  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.dashboard, locale) || [];
-  localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
-    title: item.title,
-    url: item.link,
-    icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "iconify",
-      "data-icon": item.icon
-    }) : null,
-    // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-    external: true,
-    children: item.items
-  }), 'items'); // 展平后使用 matchPaths 检测 link#active 状态
-
-  const flattened = (0, _utils.flatRecursive)(localizedNav).filter(item => !!item.url);
-  const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.url));
-
-  if (flattened !== null && flattened !== void 0 && flattened.length) {
-    flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
-  }
+
+  const _headerAddons = /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerAddons2.default, {
+    formattedBlocklet: formattedBlocklet,
+    addons: headerAddons,
+    sessionManagerProps: sessionManagerProps
+  });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashboard.default, _objectSpread(_objectSpread({
     title: appName,
@@ -118,17 +176,34 @@ function Dashboard(_ref) {
           src: appLogo,
           alt: "logo"
         })
-      })
+      }),
+      addons: _headerAddons
     }, rest.headerProps),
     links: localizedNav
   }));
 }
 
 Dashboard.propTypes = {
-  meta: _types.blockletMetaProps
+  meta: _types.blockletMetaProps,
+  // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
+  fallbackUrl: _propTypes.default.string,
+  // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
+  invalidPathFallback: _propTypes.default.func,
+  headerAddons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  sessionManagerProps: _types.sessionManagerProps
 };
 Dashboard.defaultProps = {
-  meta: {}
+  meta: {},
+  fallbackUrl: _blocklets.publicPath,
+  invalidPathFallback: null,
+  headerAddons: undefined,
+  sessionManagerProps: {
+    showRole: true,
+    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
+    onLogout: () => {
+      window.location.href = _blocklets.publicPath;
+    }
+  }
 };
 var _default = Dashboard;
 exports.default = _default;

package/lib/Header/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactErrorBoundary = require("react-error-boundary");
@@ -21,12 +19,6 @@ var _Header = require("@arcblock/ux/lib/Header");
 
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
 
-var _Session = require("@arcblock/did-connect/lib/Session");
-
-var _SessionManager = _interopRequireDefault(require("@arcblock/did-connect/lib/SessionManager"));
-
-var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
-
 var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
@@ -43,6 +35,10 @@ var _utils = require("../utils");
 
 var _blocklets = require("../blocklets");
 
+var _headerAddons = _interopRequireDefault(require("../common/header-addons"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject;
 
 const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink", "theme"];
@@ -135,7 +131,6 @@ function Header(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const sessionInfo = (0, _react.useContext)(_Session.SessionContext);
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -157,9 +152,7 @@ function Header(_ref) {
     did,
     appLogo,
     appName,
-    theme,
-    enableConnect = true,
-    enableLocale = true
+    theme
   } = formattedBlocklet;
   const navigation = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.header, locale);
   const parsedNavigation = parseNavigation(navigation);
@@ -168,39 +161,15 @@ function Header(_ref) {
     activeId
   } = parsedNavigation;
 
-  const renderAddons = () => {
-    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
-    if (addons && typeof addons !== 'function') {
-      return Array.isArray(addons) ? addons : [addons];
-    }
-
-    let addonsArray = []; // 启用了多语言并且检测到了 locale context
+  const _addons = typeof addons === 'function' ? builtInAddons => addons(builtInAddons, {
+    navigation: parsedNavigation
+  }) : addons;
 
-    if (enableLocale && locale) {
-      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selector.default, {
-        showText: false
-      }, "locale-selector"));
-    } // 启用了连接钱包并且检测到了 session context
-
-
-    if (enableConnect && sessionInfo) {
-      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionManager.default, _objectSpread({
-        session: sessionInfo.session
-      }, sessionManagerProps), "session-manager"));
-    } // 在内置 addons 基础上定制 addons
-
-
-    if (typeof addons === 'function') {
-      addonsArray = addons(addonsArray, {
-        navigation: parsedNavigation
-      }) || [];
-    }
-
-    return addonsArray;
-  };
-
-  const renderedAddons = renderAddons();
-  const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
+  const headerAddons = /*#__PURE__*/(0, _jsxRuntime.jsx)(_headerAddons.default, {
+    formattedBlocklet: formattedBlocklet,
+    addons: _addons,
+    sessionManagerProps: sessionManagerProps
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
     theme: themeOverrides,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
@@ -226,7 +195,7 @@ function Header(_ref) {
         }),
         children: did
       }) : null,
-      addons: addonList
+      addons: headerAddons
     }, rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.header,
       children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {

package/lib/blocklets.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatBlockletInfo = void 0;
+exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatNavigation = exports.formatBlockletInfo = exports.filterNavByRole = void 0;
 
 var _utils = require("./utils");
 
@@ -93,20 +93,44 @@ const getLocalizedNavigation = function getLocalizedNavigation(navigation) {
   };
 
   return (0, _utils.mapRecursive)(navigation, item => {
+    var _item$items;
+
     return _objectSpread(_objectSpread({}, item), {}, {
       title: getTitle(item.title, locale),
-      link: getLink(item.link, locale)
+      // 仅对叶结点进行处理
+      link: !((_item$items = item.items) !== null && _item$items !== void 0 && _item$items.length) ? getLink(item.link, locale) : item.link
     });
   }, 'items');
 };
+/**
+ * 格式化 navigation
+ *
+ * - role 统一为数组形式
+ */
+
 
 exports.getLocalizedNavigation = getLocalizedNavigation;
 
+const formatNavigation = navigation => {
+  return (0, _utils.mapRecursive)(navigation, item => {
+    if (item.role) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        role: Array.isArray(item.role) ? item.role : [item.role]
+      });
+    }
+
+    return item;
+  }, 'items');
+};
+
+exports.formatNavigation = formatNavigation;
+
 const parseNavigation = navigation => {
   if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
     return null;
   }
 
+  const formattedNav = formatNavigation(navigation);
   const sections = {
     header: [],
     footer: [],
@@ -115,10 +139,12 @@ const parseNavigation = navigation => {
     // 对应 footer 底部 links
     bottom: [],
     // 对应 dashboard#sidenav 导航
-    dashboard: []
+    dashboard: [],
+    // session manager menus
+    sessionManager: []
   }; // 对 navigation 顶层元素按 section 分组
 
-  navigation.forEach(item => {
+  formattedNav.forEach(item => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item); // item 出现在指定几个 section 中 (array)
@@ -156,5 +182,32 @@ const formatBlockletInfo = blockletInfo => {
   formatted.navigation = parseNavigation(formatted.navigation);
   return formatted;
 };
+/**
+ * 根据 role 筛选 nav, 规则:
+ * - 如果是枝结点, 必须至少存在一个符合条件的子结点
+ * - role 未定义, 符合条件
+ * - role 定义且包括当前的 userRole, 符合条件
+ *
+ * @param {object[]} nav 导航菜单数据
+ * @param {string} userRole 当前用户 role
+ * @returns 符合 role 权限的导航菜单数据
+ */
+
+
+exports.formatBlockletInfo = formatBlockletInfo;
+
+const filterNavByRole = (nav, userRole) => {
+  return (0, _utils.filterRecursive)(nav, (item, context) => {
+    const isRoleMatched = !item.role || userRole && item.role.includes(userRole);
+
+    if (!context.isLeaf) {
+      var _context$filteredChil;
+
+      return isRoleMatched && ((_context$filteredChil = context.filteredChildren) === null || _context$filteredChil === void 0 ? void 0 : _context$filteredChil.length);
+    }
+
+    return isRoleMatched;
+  }, 'items');
+};
 
-exports.formatBlockletInfo = formatBlockletInfo;
+exports.filterNavByRole = filterNavByRole;

package/lib/common/header-addons.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeaderAddons;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _Session = require("@arcblock/did-connect/lib/Session");
+
+var _SessionManager = _interopRequireDefault(require("@arcblock/did-connect/lib/SessionManager"));
+
+var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _types = require("../types");
+
+var _blocklets = require("../blocklets");
+
+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; }
+
+// eslint-disable-next-line no-shadow
+function HeaderAddons(_ref) {
+  var _sessionCtx$session, _formattedBlocklet$na, _sessionCtx$session2, _sessionCtx$session2$;
+
+  let {
+    formattedBlocklet,
+    addons,
+    sessionManagerProps
+  } = _ref;
+  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
+  const {
+    locale
+  } = (0, _context.useLocaleContext)() || {};
+  const {
+    enableConnect = true,
+    enableLocale = true
+  } = formattedBlocklet;
+  const authenticated = !!(sessionCtx !== null && sessionCtx !== void 0 && (_sessionCtx$session = sessionCtx.session) !== null && _sessionCtx$session !== void 0 && _sessionCtx$session.user);
+  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.sessionManager, locale) || []; // 根据 role 筛选 nav 数据
+
+  localizedNav = (0, _blocklets.filterNavByRole)(localizedNav, sessionCtx === null || sessionCtx === void 0 ? void 0 : (_sessionCtx$session2 = sessionCtx.session) === null || _sessionCtx$session2 === void 0 ? void 0 : (_sessionCtx$session2$ = _sessionCtx$session2.user) === null || _sessionCtx$session2$ === void 0 ? void 0 : _sessionCtx$session2$.role);
+
+  const renderAddons = () => {
+    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
+    if (addons && typeof addons !== 'function') {
+      return Array.isArray(addons) ? addons : [addons];
+    }
+
+    let addonsArray = []; // 启用了多语言并且检测到了 locale context
+
+    if (enableLocale && locale) {
+      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selector.default, {
+        showText: false
+      }, "locale-selector"));
+    } // 启用了连接钱包并且检测到了 session context
+
+
+    if (enableConnect && sessionCtx) {
+      var _localizedNav;
+
+      const menu = [];
+
+      if (authenticated && (_localizedNav = localizedNav) !== null && _localizedNav !== void 0 && _localizedNav.length) {
+        localizedNav.forEach(item => {
+          menu.push({
+            label: item.title,
+            icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "iconify",
+              "data-icon": item.icon,
+              "data-height": "24",
+              style: {
+                marginRight: 16
+              }
+            }) : null,
+            component: 'a',
+            href: item.link,
+            key: item.link
+          });
+        });
+      }
+
+      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionManager.default, _objectSpread({
+        session: sessionCtx.session,
+        locale: locale,
+        menu: menu
+      }, sessionManagerProps), "session-manager"));
+    } // 在内置 addons 基础上定制 addons
+
+
+    if (typeof addons === 'function') {
+      addonsArray = addons(addonsArray) || [];
+    }
+
+    return addonsArray;
+  };
+
+  const renderedAddons = renderAddons();
+  const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
+  return addonList;
+}
+
+HeaderAddons.propTypes = {
+  formattedBlocklet: _propTypes.default.object.isRequired,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  sessionManagerProps: _types.sessionManagerProps
+};
+HeaderAddons.defaultProps = {
+  addons: null,
+  sessionManagerProps: {
+    showRole: true
+  }
+};

package/lib/types.js

@@ -20,11 +20,11 @@ const blockletMetaProps = _propTypes.default.shape({
   enableLocale: _propTypes.default.bool,
   navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
     title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-    link: _propTypes.default.string,
+    link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
     icon: _propTypes.default.string,
     items: _propTypes.default.arrayOf(_propTypes.default.shape({
       title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-      link: _propTypes.default.string
+      link: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
     }))
   }))
 });

package/lib/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.countRecursive = void 0;
+exports.matchPaths = exports.matchPath = exports.mapRecursive = exports.isUrl = exports.flatRecursive = exports.filterRecursive = exports.countRecursive = void 0;
 
 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; }
 
@@ -42,11 +42,33 @@ const countRecursive = function countRecursive(array) {
   let counter = 0;
   mapRecursive(array, () => counter++, childrenKey);
   return counter;
-}; // "http://", "https://" 2 种情况
+}; // 对有层级结构的 array 进行 filter 处理
+// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
 
 
 exports.countRecursive = countRecursive;
 
+const filterRecursive = function filterRecursive(array, predicate) {
+  let childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  return array.map(item => _objectSpread({}, item)).filter(item => {
+    const children = item[childrenKey];
+
+    if (Array.isArray(children)) {
+      const filtered = filterRecursive(children, predicate, childrenKey);
+      item[childrenKey] = filtered !== null && filtered !== void 0 && filtered.length ? filtered : undefined;
+    }
+
+    const context = {
+      filteredChildren: item[childrenKey],
+      isLeaf: !(children !== null && children !== void 0 && children.length)
+    };
+    return predicate(item, context);
+  });
+}; // "http://", "https://" 2 种情况
+
+
+exports.filterRecursive = filterRecursive;
+
 const isUrl = str => {
   return /^https?:\/\//.test(str);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.23",
+  "version": "2.4.26",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.23",
-    "@arcblock/ux": "^2.4.23",
+    "@arcblock/did-connect": "^2.4.26",
+    "@arcblock/ux": "^2.4.26",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3"
   },
-  "gitHead": "2a53c85d0567c3534060d8f38ab05279d7e39d15"
+  "gitHead": "40365e41139ba7dd6749e7a395703f25ae454c07"
 }

package/src/Dashboard/index.js

@@ -1,16 +1,24 @@
-import { useMemo } from 'react';
+/* eslint-disable no-shadow */
+import { useMemo, useLayoutEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
-import { blockletMetaProps } from '../types';
+import { blockletMetaProps, sessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
-import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
+import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
+import HeaderAddons from '../common/header-addons';
 
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
-function Dashboard({ meta, ...rest }) {
+// eslint-disable-next-line no-shadow
+function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, ...rest }) {
+  const sessionCtx = useContext(SessionContext);
+  const user = sessionCtx?.session?.user;
+  const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
@@ -21,31 +29,64 @@ function Dashboard({ meta, ...rest }) {
       return blocklet;
     }
   }, [blocklet]);
+  const { localizedNav, flattened, matchedIndex } = useMemo(() => {
+    let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+    // 根据 role 筛选 nav 数据
+    localizedNav = filterNavByRole(localizedNav, userRole);
+    // 将 nav 数据处理成 ux dashboard 需要的格式
+    localizedNav = mapRecursive(
+      localizedNav,
+      (item) => ({
+        title: item.title,
+        url: item.link,
+        icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
+        // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+        external: true,
+        children: item.items,
+      }),
+      'items'
+    );
+    // 展平后使用 matchPaths 检测 link#active 状态
+    const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
+    const matchedIndex = matchPaths(flattened.map((item) => item.url));
+    if (flattened?.length) {
+      flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
+    }
+    return { localizedNav, flattened, matchedIndex };
+  }, [formattedBlocklet, locale, userRole]);
+
+  // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 VC 导致无权限), 则跳转到 fallbackUrl
+  // 未认证 (user 为空) 时不做处理, 这种情况的页面跳转逻辑一般由应用自行处理
+  useLayoutEffect(() => {
+    if (!!user && !flattened?.length && fallbackUrl) {
+      window.location.href = fallbackUrl;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fallbackUrl]);
+
+  // 导航菜单变动且存在可用菜单但无匹配项时 (如切换 passport), 跳转到首个菜单项
+  useLayoutEffect(() => {
+    if (!!user && !!flattened?.length && matchedIndex === -1) {
+      if (invalidPathFallback) {
+        invalidPathFallback();
+      } else {
+        window.location.href = flattened[0]?.url || publicPath;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invalidPathFallback]);
 
   if (!blocklet.appName) {
     return null;
   }
-
   const { did, appLogo, appName } = formattedBlocklet;
-  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
-  localizedNav = mapRecursive(
-    localizedNav,
-    (item) => ({
-      title: item.title,
-      url: item.link,
-      icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
-      // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-      external: true,
-      children: item.items,
-    }),
-    'items'
+  const _headerAddons = (
+    <HeaderAddons
+      formattedBlocklet={formattedBlocklet}
+      addons={headerAddons}
+      sessionManagerProps={sessionManagerProps}
+    />
   );
-  // 展平后使用 matchPaths 检测 link#active 状态
-  const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
-  const matchedIndex = matchPaths(flattened.map((item) => item.url));
-  if (flattened?.length) {
-    flattened[matchedIndex === -1 ? 0 : matchedIndex].active = true;
-  }
 
   return (
     <UxDashboard
@@ -71,6 +112,7 @@ function Dashboard({ meta, ...rest }) {
             <img src={appLogo} alt="logo" />
           </a>
         ),
+        addons: _headerAddons,
         ...rest.headerProps,
       }}
       links={localizedNav}
@@ -80,10 +122,26 @@ function Dashboard({ meta, ...rest }) {
 
 Dashboard.propTypes = {
   meta: blockletMetaProps,
+  // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
+  fallbackUrl: PropTypes.string,
+  // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
+  invalidPathFallback: PropTypes.func,
+  headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps,
 };
 
 Dashboard.defaultProps = {
   meta: {},
+  fallbackUrl: publicPath,
+  invalidPathFallback: null,
+  headerAddons: undefined,
+  sessionManagerProps: {
+    showRole: true,
+    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
+    onLogout: () => {
+      window.location.href = publicPath;
+    },
+  },
 };
 
 export default Dashboard;

package/src/Header/index.js

@@ -1,15 +1,10 @@
-import { useContext, useMemo, createElement } from 'react';
-// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
-import { Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { styled } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
-import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import SessionManager from '@arcblock/did-connect/lib/SessionManager';
-import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
@@ -19,6 +14,7 @@ import OverridableThemeProvider from '../common/overridable-theme-provider';
 import { blockletMetaProps, sessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
+import HeaderAddons from '../common/header-addons';
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation) => {
@@ -65,7 +61,6 @@ const parseNavigation = (navigation) => {
  */
 // eslint-disable-next-line no-shadow
 function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, ...rest }) {
-  const sessionInfo = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
@@ -80,41 +75,15 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
   if (!blocklet.appName) {
     return null;
   }
-  const { did, appLogo, appName, theme, enableConnect = true, enableLocale = true } = formattedBlocklet;
+  const { did, appLogo, appName, theme } = formattedBlocklet;
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 
-  const renderAddons = () => {
-    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
-    if (addons && typeof addons !== 'function') {
-      return Array.isArray(addons) ? addons : [addons];
-    }
-    let addonsArray = [];
-    // 启用了多语言并且检测到了 locale context
-    if (enableLocale && locale) {
-      addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
-    }
-    // 启用了连接钱包并且检测到了 session context
-    if (enableConnect && sessionInfo) {
-      addonsArray.push(<SessionManager key="session-manager" session={sessionInfo.session} {...sessionManagerProps} />);
-    }
-    // 在内置 addons 基础上定制 addons
-    if (typeof addons === 'function') {
-      addonsArray =
-        addons(addonsArray, {
-          navigation: parsedNavigation,
-        }) || [];
-    }
-    return addonsArray;
-  };
-
-  const renderedAddons = renderAddons();
-
-  const addonList = createElement(
-    Fragment,
-    null,
-    ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons])
+  const _addons =
+    typeof addons === 'function' ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
+  const headerAddons = (
+    <HeaderAddons formattedBlocklet={formattedBlocklet} addons={_addons} sessionManagerProps={sessionManagerProps} />
   );
 
   return (
@@ -138,7 +107,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
             </DidAddress>
           ) : null
         }
-        addons={addonList}
+        addons={headerAddons}
         {...rest}
         $bgcolor={theme?.background?.header}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}

package/src/blocklets.js

@@ -1,4 +1,4 @@
-import { mapRecursive, isUrl } from './utils';
+import { mapRecursive, filterRecursive, isUrl } from './utils';
 
 export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
@@ -61,18 +61,42 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
       return {
         ...item,
         title: getTitle(item.title, locale),
-        link: getLink(item.link, locale),
+        // 仅对叶结点进行处理
+        link: !item.items?.length ? getLink(item.link, locale) : item.link,
       };
     },
     'items'
   );
 };
 
+/**
+ * 格式化 navigation
+ *
+ * - role 统一为数组形式
+ */
+export const formatNavigation = (navigation) => {
+  return mapRecursive(
+    navigation,
+    (item) => {
+      if (item.role) {
+        return {
+          ...item,
+          role: Array.isArray(item.role) ? item.role : [item.role],
+        };
+      }
+      return item;
+    },
+    'items'
+  );
+};
+
 export const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return null;
   }
 
+  const formattedNav = formatNavigation(navigation);
+
   const sections = {
     header: [],
     footer: [],
@@ -82,10 +106,12 @@ export const parseNavigation = (navigation) => {
     bottom: [],
     // 对应 dashboard#sidenav 导航
     dashboard: [],
+    // session manager menus
+    sessionManager: [],
   };
 
   // 对 navigation 顶层元素按 section 分组
-  navigation.forEach((item) => {
+  formattedNav.forEach((item) => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item);
@@ -117,3 +143,27 @@ export const formatBlockletInfo = (blockletInfo) => {
   formatted.navigation = parseNavigation(formatted.navigation);
   return formatted;
 };
+
+/**
+ * 根据 role 筛选 nav, 规则:
+ * - 如果是枝结点, 必须至少存在一个符合条件的子结点
+ * - role 未定义, 符合条件
+ * - role 定义且包括当前的 userRole, 符合条件
+ *
+ * @param {object[]} nav 导航菜单数据
+ * @param {string} userRole 当前用户 role
+ * @returns 符合 role 权限的导航菜单数据
+ */
+export const filterNavByRole = (nav, userRole) => {
+  return filterRecursive(
+    nav,
+    (item, context) => {
+      const isRoleMatched = !item.role || (userRole && item.role.includes(userRole));
+      if (!context.isLeaf) {
+        return isRoleMatched && context.filteredChildren?.length;
+      }
+      return isRoleMatched;
+    },
+    'items'
+  );
+};

package/src/common/header-addons.js

@@ -0,0 +1,88 @@
+import { useContext, createElement } from 'react';
+import PropTypes from 'prop-types';
+// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
+import { Fragment } from 'react/jsx-runtime';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { sessionManagerProps } from '../types';
+import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
+
+// eslint-disable-next-line no-shadow
+export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
+  const sessionCtx = useContext(SessionContext);
+  const { locale } = useLocaleContext() || {};
+  const { enableConnect = true, enableLocale = true } = formattedBlocklet;
+  const authenticated = !!sessionCtx?.session?.user;
+  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
+  // 根据 role 筛选 nav 数据
+  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
+
+  const renderAddons = () => {
+    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
+    if (addons && typeof addons !== 'function') {
+      return Array.isArray(addons) ? addons : [addons];
+    }
+    let addonsArray = [];
+    // 启用了多语言并且检测到了 locale context
+    if (enableLocale && locale) {
+      addonsArray.push(<LocaleSelector key="locale-selector" showText={false} />);
+    }
+    // 启用了连接钱包并且检测到了 session context
+    if (enableConnect && sessionCtx) {
+      const menu = [];
+      if (authenticated && localizedNav?.length) {
+        localizedNav.forEach((item) => {
+          menu.push({
+            label: item.title,
+            icon: item.icon ? (
+              <span className="iconify" data-icon={item.icon} data-height="24" style={{ marginRight: 16 }} />
+            ) : null,
+            component: 'a',
+            href: item.link,
+            key: item.link,
+          });
+        });
+      }
+      addonsArray.push(
+        <SessionManager
+          key="session-manager"
+          session={sessionCtx.session}
+          locale={locale}
+          menu={menu}
+          {...sessionManagerProps}
+        />
+      );
+    }
+    // 在内置 addons 基础上定制 addons
+    if (typeof addons === 'function') {
+      addonsArray = addons(addonsArray) || [];
+    }
+    return addonsArray;
+  };
+
+  const renderedAddons = renderAddons();
+  const addonList = createElement(
+    Fragment,
+    null,
+    ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons])
+  );
+  return addonList;
+}
+
+HeaderAddons.propTypes = {
+  formattedBlocklet: PropTypes.object.isRequired,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps,
+};
+
+HeaderAddons.defaultProps = {
+  addons: null,
+  sessionManagerProps: {
+    showRole: true,
+  },
+};

package/src/types.js

@@ -12,12 +12,12 @@ export const blockletMetaProps = PropTypes.shape({
   navigation: PropTypes.arrayOf(
     PropTypes.shape({
       title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      link: PropTypes.string,
+      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
       icon: PropTypes.string,
       items: PropTypes.arrayOf(
         PropTypes.shape({
           title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-          link: PropTypes.string,
+          link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
         })
       ),
     })

package/src/utils.js

@@ -24,6 +24,22 @@ export const countRecursive = (array, childrenKey = 'children') => {
   return counter;
 };
 
+// 对有层级结构的 array 进行 filter 处理
+// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
+export const filterRecursive = (array, predicate, childrenKey = 'children') => {
+  return array
+    .map((item) => ({ ...item }))
+    .filter((item) => {
+      const children = item[childrenKey];
+      if (Array.isArray(children)) {
+        const filtered = filterRecursive(children, predicate, childrenKey);
+        item[childrenKey] = filtered?.length ? filtered : undefined;
+      }
+      const context = { filteredChildren: item[childrenKey], isLeaf: !children?.length };
+      return predicate(item, context);
+    });
+};
+
 // "http://", "https://" 2 种情况
 export const isUrl = (str) => {
   return /^https?:\/\//.test(str);