@yueglobal/ui 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yueglobal/ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "粤链全球 - react组件库",
   "license": "MIT",
   "module": "index.js",

package/yue-page-footer/index.less

@@ -1,5 +1,20 @@
 .yue-page-footer {
   background-color: #f4f7fc;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      rgba(23, 241, 161, 0.4),
+      rgba(26, 75, 255, 0.3)
+    );
+  }
 
   * {
     box-sizing: border-box;

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import './index.less';
 interface Props {
+    hasSecondMenu?: boolean;
     moduleData: {
         title?: string;
         icon?: ReactNode;

package/yue-page-header/first-menus/index.js

@@ -9,20 +9,25 @@ 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, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { deepClone, firstMenuList, mainHost, setSubMenuPopupStyle } from "../helper";
 import "./index.less";
 var Index = function Index(_ref) {
-  var moduleData = _ref.moduleData;
+  var moduleData = _ref.moduleData,
+    hasSecondMenu = _ref.hasSecondMenu;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
-  var menuRef = useRef(null);
-  var _useState3 = useState(deepClone(firstMenuList)),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    menuList = _useState4[0],
-    setMenuList = _useState4[1];
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var menuRef = useRef(null);
+  var _useState5 = useState(deepClone(firstMenuList)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    menuList = _useState6[0],
+    setMenuList = _useState6[1];
   useEffect(function () {
     if (!!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
       var key = moduleData.key;
@@ -108,24 +113,35 @@ var Index = function Index(_ref) {
       window.location.href = key;
     }
   };
+  var previousKeyRef = useRef();
   var onSubMenuOpen = function onSubMenuOpen(key) {
-    if (!menuRef.current) {
+    if (!menuRef.current || previousKeyRef.current === key) {
       return false;
     }
+    previousKeyRef.current = key;
     var index = menuList.findIndex(function (m) {
       return m.key === key;
     });
     if (index === -1) {
       return false;
     }
-    setSubMenuPopupStyle(menuRef.current, index);
+    setSubMenuPopupStyle(menuRef.current, index, true);
   };
+  var menuClassName = useMemo(function () {
+    var res = ['yue-page-header-first-menu'];
+    if (!hasSecondMenu) {
+      res.push('single');
+    } else if (open) {
+      res.push('open');
+    }
+    return res.join(' ');
+  }, [open, hasSecondMenu]);
   return /*#__PURE__*/React.createElement(ConfigProvider, {
     theme: {
       components: {
         Menu: {
-          activeBarHeight: 5,
-          itemPaddingInline: 18,
+          activeBarHeight: 14,
+          itemPaddingInline: 4,
           itemColor: '#000',
           dropdownWidth: '100%',
           horizontalLineHeight: '30px'
@@ -136,15 +152,16 @@ var Index = function Index(_ref) {
     ref: menuRef,
     items: menuList,
     mode: "horizontal",
-    rootClassName: "yue-page-header-first-menu",
+    rootClassName: menuClassName,
     onSelect: onItem,
     onOpenChange: function onOpenChange(val) {
       if (!!(val !== null && val !== void 0 && val.length)) {
-        onSubMenuOpen(val[0]);
+        onSubMenuOpen(val[val.length - 1]);
       }
+      setOpen(!!val.length);
     },
-    selectedKeys: selectedKeys
-    // openKeys={['home']}
+    selectedKeys: selectedKeys,
+    subMenuCloseDelay: 1.5
   }));
 };
 export default /*#__PURE__*/memo(Index);

package/yue-page-header/first-menus/index.less

@@ -28,21 +28,66 @@
       justify-content: center;
     }
 
+    .ant-menu-title-content {
+      height: 38px;
+      line-height: 36px;
+      border-radius: 20px;
+      padding-inline: 16px;
+      min-width: 80px;
+      text-align: center;
+    }
+
+    .ant-menu-submenu-active,
+    .ant-menu-item-active {
+      .ant-menu-title-content {
+        background: linear-gradient(
+          90deg,
+          rgba(23, 241, 161, 0.25),
+          rgba(26, 75, 255, 0.25)
+        );
+      }
+    }
+
+    .ant-menu-submenu-selected,
     .ant-menu-item-selected {
-      color: #1a4bff;
+      .ant-menu-title-content {
+        color: #fff;
+        background: linear-gradient(90deg, #17f1a1, #1a4bff);
+      }
+    }
 
+    .ant-menu-item::after {
+      content: none;
+    }
+
+    .ant-menu-submenu {
       &::after {
-        border-bottom-color: #1a4bff;
-        border-radius: 3px 3px 0 0;
+        width: 0;
+        height: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 14px solid transparent;
+        border-top-width: 0;
+        transition: border-bottom-width 0.2s ease-in-out;
       }
     }
 
-    .ant-menu-submenu-selected:not(.ant-menu-submenu-active) {
+    .ant-menu-submenu-open.ant-menu-submenu-active::after {
+      border-bottom-color: rgba(4, 41, 131, 80%) !important;
+    }
+
+    .ant-menu-submenu-selected:first-child {
       &::after {
-        content: none;
+        border-bottom-color: #17c8b8;
       }
-      .ant-menu-submenu-title {
-        color: #000;
+    }
+
+    &.single,
+    &.open {
+      .ant-menu-submenu-selected:first-child {
+        &::after {
+          border-bottom-color: transparent;
+        }
       }
     }
   }
@@ -117,3 +162,11 @@
     }
   }
 }
+
+.yue-first-selected-arrow {
+  position: absolute;
+  bottom: 0;
+  left: 50px;
+  z-index: 1;
+  background: linear-gradient(90deg, #17f1a1, #1a4bff);
+}

package/yue-page-header/helper.d.ts

@@ -18,6 +18,11 @@ export declare const mainHost = "https://www.yueglobal.com";
  * 一级菜单（主菜单）
  */
 export declare const firstMenuList: YueMenuItem[];
+/**
+ * 是首页菜单里的
+ * @param key
+ */
+export declare function isHomeChildRoute(key: string): boolean;
 /**
  * 将树结构转换为一维数组
  * @param data
@@ -25,6 +30,11 @@ export declare const firstMenuList: YueMenuItem[];
 export declare function flattenTreeList<T extends {
     children?: T[];
 }>(data: T[]): T[];
+/**
+ * 则根据 key 的长度进行降序排序
+ * @param list
+ */
+export declare function sortListByKey(list: any[]): any[];
 /**
  * 将 firstMenuList 转换为一维数组并根据 key 长度排序
  * @param isSort 是否进行排序
@@ -76,5 +86,6 @@ export declare function deepClone<T>(obj: T): T;
  * 设置子菜单弹出层的样式
  * @param menuRef - 菜单实例
  * @param index - 子菜单索引
+ * @param zIndex - 是否重设 zIndex
  */
-export declare function setSubMenuPopupStyle(menuRef: MenuRef, index: number): false | undefined;
+export declare function setSubMenuPopupStyle(menuRef: MenuRef, index: number, zIndex?: boolean): false | undefined;

package/yue-page-header/helper.js

@@ -46,7 +46,7 @@ export var firstMenuList = [{
     icon: /*#__PURE__*/React.createElement(LawIcon, null)
   }, {
     key: "".concat(mainHost, "/ktms-web/"),
-    label: '通关税务',
+    label: '数智关税',
     icon: /*#__PURE__*/React.createElement(TaxationIcon, null)
   }, {
     key: "".concat(mainHost, "/hwc/"),
@@ -86,6 +86,21 @@ export var firstMenuList = [{
   label: '关于我们'
 }];
 
+/**
+ * 是首页菜单里的
+ * @param key
+ */
+export function isHomeChildRoute(key) {
+  var _homeRoute$children;
+  var homeRoute = firstMenuList[0];
+  if (homeRoute.key === key) {
+    return true;
+  }
+  return !!((_homeRoute$children = homeRoute.children) !== null && _homeRoute$children !== void 0 && _homeRoute$children.find(function (c) {
+    return c.key === key;
+  }));
+}
+
 /**
  * 将树结构转换为一维数组
  * @param data
@@ -114,6 +129,16 @@ export function flattenTreeList(data) {
   return flatten(data);
 }
 
+/**
+ * 则根据 key 的长度进行降序排序
+ * @param list
+ */
+export function sortListByKey(list) {
+  return list.sort(function (a, b) {
+    return b.key.length - a.key.length;
+  });
+}
+
 /**
  * 将 firstMenuList 转换为一维数组并根据 key 长度排序
  * @param isSort 是否进行排序
@@ -125,9 +150,7 @@ export function flattenMenuList(isSort) {
 
   // 如果需要排序，则根据 key 的长度进行降序排序
   if (isSort) {
-    return flattenedList.sort(function (a, b) {
-      return b.key.length - a.key.length;
-    });
+    return sortListByKey(flattenedList);
   }
   return flattenedList;
 }
@@ -341,7 +364,8 @@ export function deepClone(obj) {
   }
   return clonedObj;
 }
-function _setPopupStyle(uuid, left) {
+var popupZIndex = 2000;
+function _setPopupStyle(uuid, left, zIndex) {
   var popupUL = window.document.getElementById(uuid);
   if (popupUL) {
     var contentWidth = 0;
@@ -355,9 +379,17 @@ function _setPopupStyle(uuid, left) {
       popupUL.style.paddingLeft = "unset";
       popupUL.style.justifyContent = 'center';
     } else {
-      popupUL.style.paddingLeft = "".concat(left - 8, "px");
+      popupUL.style.paddingLeft = "".concat(left - 4, "px");
       popupUL.style.justifyContent = 'unset';
     }
+    if (zIndex) {
+      var _popupUL$parentElemen, _rootEle$tagName;
+      var rootEle = (_popupUL$parentElemen = popupUL.parentElement) === null || _popupUL$parentElemen === void 0 ? void 0 : _popupUL$parentElemen.parentElement;
+      if (rootEle && ((_rootEle$tagName = rootEle.tagName) === null || _rootEle$tagName === void 0 ? void 0 : _rootEle$tagName.toLowerCase()) !== 'body') {
+        rootEle.style.position = 'relative';
+        rootEle.style.zIndex = ++popupZIndex + '';
+      }
+    }
     return true;
   }
   return false;
@@ -367,8 +399,9 @@ function _setPopupStyle(uuid, left) {
  * 设置子菜单弹出层的样式
  * @param menuRef - 菜单实例
  * @param index - 子菜单索引
+ * @param zIndex - 是否重设 zIndex
  */
-export function setSubMenuPopupStyle(menuRef, index) {
+export function setSubMenuPopupStyle(menuRef, index, zIndex) {
   var _menuRef$menu;
   var li = menuRef === null || menuRef === void 0 || (_menuRef$menu = menuRef.menu) === null || _menuRef$menu === void 0 || (_menuRef$menu = _menuRef$menu.list) === null || _menuRef$menu === void 0 || (_menuRef$menu = _menuRef$menu.children) === null || _menuRef$menu === void 0 ? void 0 : _menuRef$menu.item(index);
   if (!li) {
@@ -385,11 +418,11 @@ export function setSubMenuPopupStyle(menuRef, index) {
   var _li$getBoundingClient = li.getBoundingClientRect(),
     left = _li$getBoundingClient.left;
   setTimeout(function () {
-    var success = _setPopupStyle(uuid, left);
+    var success = _setPopupStyle(uuid, left, zIndex);
     if (!success) {
       setTimeout(function () {
         // 重新执行一次
-        _setPopupStyle(uuid, left);
+        _setPopupStyle(uuid, left, zIndex);
       }, 100);
     }
   }, 100, uuid, left);

package/yue-page-header/index.js

@@ -101,7 +101,8 @@ var Index = function Index(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "menus-bar"
   }, /*#__PURE__*/React.createElement(FirstMenus, {
-    moduleData: moduleData
+    moduleData: moduleData,
+    hasSecondMenu: hasSecondMenu
   })), /*#__PURE__*/React.createElement(RightContent, {
     content: rightContent,
     onLocaleChange: onLocaleChange

package/yue-page-header/index.less

@@ -40,5 +40,6 @@
     height: 100%;
     flex: 1 1 0%;
     min-width: 0;
+    position: relative;
   }
 }

package/yue-page-header/second-menus/index.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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); }
@@ -8,7 +14,7 @@ import { ComputerIcon } from "../../components/svg-icon";
 import { ConfigProvider, Menu } from 'antd';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import Breadcrumb from "../breadcrumb";
-import { flattenTreeList, setSubMenuPopupStyle } from "../helper";
+import { flattenTreeList, setSubMenuPopupStyle, sortListByKey } from "../helper";
 import "./index.less";
 var Index = function Index(_ref) {
   var width = _ref.width,
@@ -23,7 +29,12 @@ var Index = function Index(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoaded = _useState4[0],
+    setIsLoaded = _useState4[1];
   var menuRef = useRef(null);
+  var menuListRef = useRef([]);
 
   // 弹出层的布局，默认是 vertical
   var popupLayout = useMemo(function () {
@@ -32,16 +43,51 @@ var Index = function Index(_ref) {
     }
     return 'vertical';
   }, [subMenuLayout]);
+  var mergeMenuItems = useMemo(function () {
+    return menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (m) {
+      var _m$children;
+      var item = _objectSpread({}, m);
+      if ((_m$children = m.children) !== null && _m$children !== void 0 && _m$children.length) {
+        item.onTitleClick = function (_ref2) {
+          var key = _ref2.key;
+          if (item.key === key) {
+            onRouteChange === null || onRouteChange === void 0 || onRouteChange({
+              key: key,
+              label: item.label
+            });
+          }
+        };
+      }
+      return item;
+    });
+  }, [menuItems]);
+  useEffect(function () {
+    if (menuItems !== null && menuItems !== void 0 && menuItems.length) {
+      setIsLoaded(true);
+    }
+    menuListRef.current = sortListByKey(flattenTreeList(menuItems !== null && menuItems !== void 0 ? menuItems : []));
+  }, [menuItems]);
   useEffect(function () {
-    if (pathname) setSelectedKeys([pathname]);
-  }, [pathname]);
-  var onMenuClick = function onMenuClick(_ref2) {
-    var key = _ref2.key,
-      selectedKeys = _ref2.selectedKeys;
-    setSelectedKeys(selectedKeys);
+    if (pathname) {
+      var _menuListRef$current;
+      var key = pathname;
+      if ((_menuListRef$current = menuListRef.current) !== null && _menuListRef$current !== void 0 && _menuListRef$current.length) {
+        var cur = menuListRef.current.find(function (m) {
+          return m.key && pathname.startsWith(m.key);
+        });
+        if (cur) {
+          key = cur.key;
+        }
+      }
+      setSelectedKeys([key]);
+    }
+  }, [pathname, isLoaded]);
+  var onMenuClick = function onMenuClick(_ref3) {
+    var key = _ref3.key;
+    setSelectedKeys([key]);
     if (onRouteChange && menuItems !== null && menuItems !== void 0 && menuItems.length) {
-      var menuList = flattenTreeList(menuItems);
-      var current = menuList.find(function (m) {
+      var _menuListRef$current2;
+      var current = (_menuListRef$current2 = menuListRef.current) === null || _menuListRef$current2 === void 0 ? void 0 : _menuListRef$current2.find(function (m) {
         return m.key === key;
       });
       var value = {
@@ -106,10 +152,10 @@ var Index = function Index(_ref) {
     className: "menus"
   }, /*#__PURE__*/React.createElement(Menu, {
     ref: menuRef,
-    items: menuItems,
+    items: mergeMenuItems,
     mode: "horizontal",
     rootClassName: ['yue-second-menu-bar', "yue-second-menu-".concat(popupLayout)].join(' '),
-    onSelect: onMenuClick,
+    onClick: onMenuClick,
     selectedKeys: selectedKeys,
     onOpenChange: function onOpenChange(val) {
       if (!!(val !== null && val !== void 0 && val.length) && popupLayout === 'horizontal') {