@yueglobal/ui 1.0.0 → 1.0.2

package/{dist/yue-page-header → yue-page-header}/index.js

@@ -1,18 +1,12 @@
-var _excluded = ["width", "backgroundColor", "rightContent", "onLocaleChange"];
+var _excluded = ["width", "backgroundColor", "rightContent", "onLocaleChange", "pageTitle", "pageIcon", "activeLabel"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import logoImg from "../assets/gw-logo.png";
 import titleImg from "../assets/ylqq-title.png";
 import FirstMenus from "./first-menus";
-import { mainHost } from "./helper";
+import { flattenMenuList, mainHost } from "./helper";
 import "./index.less";
 import RightContent from "./right-content";
 import SecondMenus from "./second-menus";
@@ -23,15 +17,54 @@ var Index = function Index(_ref) {
     backgroundColor = _ref$backgroundColor === void 0 ? '#fff' : _ref$backgroundColor,
     rightContent = _ref.rightContent,
     onLocaleChange = _ref.onLocaleChange,
+    pageTitle = _ref.pageTitle,
+    pageIcon = _ref.pageIcon,
+    activeLabel = _ref.activeLabel,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
   var hasSecondMenu = useMemo(function () {
     var _props$breadcrumbs, _props$menuItems;
-    return !!props.pageTitle || !!((_props$breadcrumbs = props.breadcrumbs) !== null && _props$breadcrumbs !== void 0 && _props$breadcrumbs.length) || !!((_props$menuItems = props.menuItems) !== null && _props$menuItems !== void 0 && _props$menuItems.length);
-  }, [props.pageTitle, props.breadcrumbs, props.menuItems]);
+    return !!pageTitle || !!((_props$breadcrumbs = props.breadcrumbs) !== null && _props$breadcrumbs !== void 0 && _props$breadcrumbs.length) || !!((_props$menuItems = props.menuItems) !== null && _props$menuItems !== void 0 && _props$menuItems.length);
+  }, [pageTitle, props.breadcrumbs, props.menuItems]);
+
+  // 应用数据
+  var moduleData = useMemo(function () {
+    var title = pageTitle;
+    var icon = pageIcon;
+    var key;
+    var firstMenuList = flattenMenuList(true);
+    var _window$location = window.location,
+      origin = _window$location.origin,
+      pathname = _window$location.pathname;
+    var url = origin + pathname;
+    var current = firstMenuList.find(function (m) {
+      return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
+    });
+    if (!current) {
+      if (activeLabel) {
+        current = firstMenuList.find(function (m) {
+          return (m === null || m === void 0 ? void 0 : m.label) === activeLabel;
+        });
+      } else if (pageTitle) {
+        current = firstMenuList.find(function (m) {
+          return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
+        });
+      }
+    }
+    if (current) {
+      if (!title) {
+        title = current.label;
+      }
+      if (!icon) {
+        icon = current.icon;
+      }
+      key = current.key;
+    }
+    return {
+      title: title,
+      icon: icon,
+      key: key
+    };
+  }, [pageTitle, pageIcon, activeLabel]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: backgroundColor,
@@ -63,13 +96,13 @@ var Index = function Index(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "menus-bar"
   }, /*#__PURE__*/React.createElement(FirstMenus, {
-    setVisible: setVisible
+    moduleData: moduleData
   })), /*#__PURE__*/React.createElement(RightContent, {
     content: rightContent,
     onLocaleChange: onLocaleChange
   })), hasSecondMenu && /*#__PURE__*/React.createElement(SecondMenus, _extends({
     width: width,
-    visible: visible
+    moduleData: moduleData
   }, props))));
 };
 export default /*#__PURE__*/memo(Index);

package/{dist/yue-page-header → yue-page-header}/index.less

@@ -1,43 +1,44 @@
-.yue-page-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  line-height: 1.415;
-
-  * {
-    box-sizing: border-box;
-    outline: none;
-  }
-
-  .yue-flex {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.yue-page-header-topbar {
-  margin: 0 auto;
-  height: 80px;
-  max-width: 100%;
-
-  .title-bar {
-    flex-shrink: 0;
-    cursor: pointer;
-    gap: 16px;
-
-    .logo {
-      height: 34px;
-    }
-
-    .title {
-      height: 29px;
-    }
-  }
-
-  .menus-bar {
-    flex: 1 1 0%;
-    min-width: 0;
-  }
-}
+.yue-page-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  line-height: 1.415;
+
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .yue-flex {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.yue-page-header-topbar {
+  margin: 0 auto;
+  height: 80px;
+  max-width: 98%;
+
+  .title-bar {
+    flex-shrink: 0;
+    cursor: pointer;
+    gap: 16px;
+
+    .logo {
+      height: 34px;
+    }
+
+    .title {
+      height: 29px;
+    }
+  }
+
+  .menus-bar {
+    height: 100%;
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}

package/{dist/yue-page-header → yue-page-header}/right-content/index.less

@@ -1,35 +1,35 @@
-.yue-page-header-right-content {
-  flex-shrink: 0;
-  gap: 14px;
-  font-size: 15px;
-  margin-left: 12px;
-
-  .vr {
-    width: 1px;
-    height: 22px;
-    background-color: rgba(0, 0, 0, 40%);
-  }
-
-  .link {
-    text-decoration: none;
-    color: #000;
-    gap: 8px;
-    height: 34px;
-    border-radius: 4px;
-    padding-inline: 4px;
-
-    &:hover {
-      color: rgba(0, 0, 0, 90%);
-      background-color: rgba(0, 0, 0, 4%);
-    }
-
-    .anticon {
-      color: #2860f3;
-      font-size: 16px;
-    }
-  }
-
-  .sz-translate-bar.mode3 {
-    font-size: 16px;
-  }
-}
+.yue-page-header-right-content {
+  flex-shrink: 0;
+  gap: 14px;
+  font-size: 15px;
+  margin-left: 12px;
+
+  .vr {
+    width: 1px;
+    height: 22px;
+    background-color: rgba(0, 0, 0, 40%);
+  }
+
+  .link {
+    text-decoration: none;
+    color: #000;
+    gap: 8px;
+    height: 34px;
+    border-radius: 4px;
+    padding-inline: 4px;
+
+    &:hover {
+      color: rgba(0, 0, 0, 90%);
+      background-color: rgba(0, 0, 0, 4%);
+    }
+
+    .anticon {
+      color: #2860f3;
+      font-size: 16px;
+    }
+  }
+
+  .sz-translate-bar.mode3 {
+    font-size: 16px;
+  }
+}

package/yue-page-header/second-menus/index.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { YuePageHeaderProps } from '../index';
+import './index.less';
+interface Props extends Omit<YuePageHeaderProps, 'rightContent' | 'pageTitle' | 'pageIcon'> {
+    moduleData: {
+        title?: string;
+        icon?: ReactNode;
+        key?: string;
+    };
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/{dist/yue-page-header → yue-page-header}/second-menus/index.js

@@ -5,60 +5,26 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ConfigProvider, Menu } from 'antd';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import Breadcrumb from "../breadcrumb";
-import { flattenMenuList, flattenTreeList } from "../helper";
+import { flattenTreeList, setSubMenuPopupStyle } from "../helper";
 import "./index.less";
 var Index = function Index(_ref) {
   var width = _ref.width,
-    pageTitle = _ref.pageTitle,
-    pageIcon = _ref.pageIcon,
     breadcrumbs = _ref.breadcrumbs,
     routes = _ref.routes,
     menuItems = _ref.menuItems,
     pathname = _ref.pathname,
-    visible = _ref.visible,
+    moduleData = _ref.moduleData,
     onRouteChange = _ref.onRouteChange;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var menuRef = useRef(null);
   useEffect(function () {
     if (pathname) setSelectedKeys([pathname]);
   }, [pathname]);
-
-  // 应用数据
-  var moduleData = useMemo(function () {
-    var title = pageTitle;
-    var icon = pageIcon;
-    if (!title || !icon) {
-      var menuList = flattenMenuList(true);
-      var _window$location = window.location,
-        origin = _window$location.origin,
-        _pathname = _window$location.pathname;
-      var url = origin + _pathname;
-      var current = menuList.find(function (m) {
-        return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
-      });
-      if (!current && pageTitle) {
-        current = menuList.find(function (m) {
-          return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
-        });
-      }
-      if (current) {
-        if (!title) {
-          title = current.label;
-        }
-        if (!icon) {
-          icon = current.icon;
-        }
-      }
-    }
-    return {
-      title: title,
-      icon: icon
-    };
-  }, [pageTitle, pageIcon]);
   var onMenuClick = function onMenuClick(_ref2) {
     var key = _ref2.key,
       selectedKeys = _ref2.selectedKeys;
@@ -77,8 +43,20 @@ var Index = function Index(_ref) {
       onRouteChange === null || onRouteChange === void 0 || onRouteChange(value);
     }
   };
+  var onSubMenuOpen = function onSubMenuOpen(key) {
+    if (!menuRef.current || !(menuItems !== null && menuItems !== void 0 && menuItems.length)) {
+      return false;
+    }
+    var index = menuItems.findIndex(function (m) {
+      return m.key === key;
+    });
+    if (index === -1) {
+      return false;
+    }
+    setSubMenuPopupStyle(menuRef.current, index);
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: 'yue-page-header-second-menu' + (visible ? ' hidden' : '')
+    className: 'yue-page-header-second-menu'
   }, /*#__PURE__*/React.createElement("div", {
     className: "yue-flex wrapper",
     style: {
@@ -110,23 +88,28 @@ var Index = function Index(_ref) {
     className: "yue-flex module-info"
   }, !!moduleData.icon && /*#__PURE__*/React.createElement("span", {
     className: "module-icon"
-  }, moduleData.icon), !!moduleData.title && /*#__PURE__*/React.createElement("span", {
+  }, moduleData.icon), !!moduleData.title && /*#__PURE__*/React.createElement("div", {
     className: "module-title"
   }, moduleData.title)), /*#__PURE__*/React.createElement("div", {
-    className: "vr"
-  }), /*#__PURE__*/React.createElement("div", {
     className: "menus"
   }, /*#__PURE__*/React.createElement(Menu, {
+    ref: menuRef,
     items: menuItems,
     mode: "horizontal",
     rootClassName: "yue-second-menu-bar",
     onSelect: onMenuClick,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    onOpenChange: function onOpenChange(val) {
+      if (!!(val !== null && val !== void 0 && val.length)) {
+        onSubMenuOpen(val[0]);
+      }
+    }
   }))), /*#__PURE__*/React.createElement(Breadcrumb, {
     breadcrumbs: breadcrumbs,
     routes: routes,
     pathname: pathname,
-    onRouteChange: onRouteChange
+    onRouteChange: onRouteChange,
+    moduleData: moduleData
   }))));
 };
 export default /*#__PURE__*/memo(Index);