@yueglobal/ui 1.0.4 → 1.0.6

package/package.json

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

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,14 +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
+    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
@@ -81,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

@@ -11,8 +11,8 @@ import { ExpoIcon, HomeIcon, HwcIcon, InsuranceIcon, LawIcon, SelectionIcon, Tax
 // 主网站域名
 export var mainHost = 'https://www.yueglobal.com';
 
-/**
- * 一级菜单（主菜单）
+/**
+ * 一级菜单（主菜单）
  */
 export var firstMenuList = [{
   key: 'home',
@@ -86,9 +86,24 @@ export var firstMenuList = [{
   label: '关于我们'
 }];
 
-/**
- * 将树结构转换为一维数组
- * @param data
+/**
+ * 是首页菜单里的
+ * @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
  */
 export function flattenTreeList(data) {
   // 递归函数，将嵌套的菜单数组转换为一维数组
@@ -114,9 +129,9 @@ export function flattenTreeList(data) {
   return flatten(data);
 }
 
-/**
- * 则根据 key 的长度进行降序排序
- * @param list
+/**
+ * 则根据 key 的长度进行降序排序
+ * @param list
  */
 export function sortListByKey(list) {
   return list.sort(function (a, b) {
@@ -124,10 +139,10 @@ export function sortListByKey(list) {
   });
 }
 
-/**
- * 将 firstMenuList 转换为一维数组并根据 key 长度排序
- * @param isSort 是否进行排序
- * @returns 排序后的一维数组
+/**
+ * 将 firstMenuList 转换为一维数组并根据 key 长度排序
+ * @param isSort 是否进行排序
+ * @returns 排序后的一维数组
  */
 export function flattenMenuList(isSort) {
   // 将嵌套的菜单数组转换为一维数组
@@ -140,10 +155,10 @@ export function flattenMenuList(isSort) {
   return flattenedList;
 }
 
-/**
- * 加载script域外资源
- * @param src
- * @param async
+/**
+ * 加载script域外资源
+ * @param src
+ * @param async
  */
 export function loadScript(src, async) {
   return new Promise(function (resolve, reject) {
@@ -171,10 +186,10 @@ export function loadScript(src, async) {
   });
 }
 
-/**
- * 检查页面中是否已存在指定文件名的script资源
- * @param filename 要检查的脚本文件名
- * @returns 如果存在返回true，否则返回false
+/**
+ * 检查页面中是否已存在指定文件名的script资源
+ * @param filename 要检查的脚本文件名
+ * @returns 如果存在返回true，否则返回false
  */
 export function checkExistScript(filename) {
   // 使用filename参数检查script标签是否存在
@@ -182,11 +197,11 @@ export function checkExistScript(filename) {
   return !!script;
 }
 
-/**
- * 检查路径是否匹配，支持路由参数匹配
- * @param routePath 路由定义路径，可能包含参数如 /news/:id/detail
- * @param actualPath 实际访问路径，如 /news/123/detail
- * @returns 是否匹配
+/**
+ * 检查路径是否匹配，支持路由参数匹配
+ * @param routePath 路由定义路径，可能包含参数如 /news/:id/detail
+ * @param actualPath 实际访问路径，如 /news/123/detail
+ * @returns 是否匹配
  */
 function isPathMatch(routePath, actualPath) {
   if (routePath === actualPath) {
@@ -223,11 +238,11 @@ function isPathMatch(routePath, actualPath) {
   }
   return true;
 }
-/**
- * 根据path值获取完整的节点路径数组（支持动态路由参数）
- * @param arr - 包含id, parentId, title, path字段的数组
- * @param path - 要查找的完整path值
- * @returns 完整的节点路径数组，如果未找到则返回空数组
+/**
+ * 根据path值获取完整的节点路径数组（支持动态路由参数）
+ * @param arr - 包含id, parentId, title, path字段的数组
+ * @param path - 要查找的完整path值
+ * @returns 完整的节点路径数组，如果未找到则返回空数组
  */
 export function getFullPathNodesByPath(arr, path) {
   if (!path || path === '/') {
@@ -285,10 +300,10 @@ export function getFullPathNodesByPath(arr, path) {
   return result;
 }
 
-/**
- * 根据path值对数组进行去重
- * @param arr - 包含path字段的数组
- * @returns 去重后的数组
+/**
+ * 根据path值对数组进行去重
+ * @param arr - 包含path字段的数组
+ * @returns 去重后的数组
  */
 export function uniqByPath(arr) {
   var seenPaths = new Set();
@@ -312,10 +327,10 @@ export function uniqByPath(arr) {
   return result;
 }
 
-/**
- * 深度拷贝对象或数组
- * @param obj - 要深度拷贝的对象或数组
- * @returns 拷贝后的新对象或数组
+/**
+ * 深度拷贝对象或数组
+ * @param obj - 要深度拷贝的对象或数组
+ * @returns 拷贝后的新对象或数组
  */
 export function deepClone(obj) {
   // 处理 null 和 undefined
@@ -349,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;
@@ -363,20 +379,30 @@ 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 _rootEle$tagName;
+      // const rootEle = popupUL.parentElement?.parentElement;
+      var rootEle = popupUL.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;
 }
 
-/**
- * 设置子菜单弹出层的样式
- * @param menuRef - 菜单实例
- * @param index - 子菜单索引
+/**
+ * 设置子菜单弹出层的样式
+ * @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) {
@@ -393,11 +419,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

@@ -83,9 +83,8 @@ var Index = function Index(_ref) {
     }
   }, [pathname, isLoaded]);
   var onMenuClick = function onMenuClick(_ref3) {
-    var key = _ref3.key,
-      selectedKeys = _ref3.selectedKeys;
-    setSelectedKeys(selectedKeys);
+    var key = _ref3.key;
+    setSelectedKeys([key]);
     if (onRouteChange && menuItems !== null && menuItems !== void 0 && menuItems.length) {
       var _menuListRef$current2;
       var current = (_menuListRef$current2 = menuListRef.current) === null || _menuListRef$current2 === void 0 ? void 0 : _menuListRef$current2.find(function (m) {
@@ -156,7 +155,7 @@ var Index = function Index(_ref) {
     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') {