@yueglobal/ui 1.0.2 → 1.0.4

package/README.md

@@ -25,20 +25,22 @@ import {
 
 ### 属性
 
-| 属性              | 说明                                | 类型                                        | 默认值 |
-| ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
-| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`  |
-| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff` |
-| `activeLabel`     | 当前选中的一级菜单项的标题          | `string`                                    |        |
-| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `ReactNode`                                 |        |
-| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |        |
-| `pageTitle`       | 缺值时从一级菜单取值                | `string`                                    |        |
-| `pageIcon`        | 页面图标                            | `ReactNode`                                 |        |
-| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |        |
-| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |        |
-| `pathname`        | 当前的路由                          | `string`                                    |        |
-| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |        |
-| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |        |
+| 属性              | 说明                                | 类型                                        | 默认值     |
+| ----------------- | ----------------------------------- | ------------------------------------------- | ---------- |
+| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`      |
+| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff`     |
+| `activeLabel`     | 当前选中的一级菜单项的标题          | `string`                                    |            |
+| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `ReactNode`                                 |            |
+| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |            |
+|                   | `以下二级导航栏的配置`              |                                             |            |
+| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |            |
+| `pageTitle`       | 缺值时从一级菜单匹配值              | `string`                                    |            |
+| `pageIcon`        | 页面图标                            | `ReactNode`                                 |            |
+| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |            |
+| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |            |
+| `pathname`        | 当前的路由                          | `string`                                    |            |
+| `subMenuLayout`   | 二级导航栏的菜单弹出层布局          | `vertical` \| `horizontal`                  | `vertical` |
+| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |            |
 
 - 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
 

package/components/svg-icon/computer.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     width="1em" height="1em">
+  <path
+    d="M890.56 110.69666665H133.33333333c-35.2 0-64.10666667 28.8-64.10666666 64.10666668v518.4c0 35.2 28.8 64.10666667 64.10666666 64.10666667h346.56s0.10666667 0 0.10666667 0.10666666v139.84s0 0.10666667-0.10666667 0.10666666H170.66666667c-17.49333333 0-32.21333333 13.65333333-32.74666667 31.14666668-0.42666667 18.02666667 14.08 32.85333333 32 32.85333333H853.33333333c17.49333333 0 32.21333333-13.65333333 32.74666667-31.14666667 0.42666667-18.02666667-14.08-32.85333333-32-32.85333334H544s-0.10666667 0-0.10666667-0.10666666V757.20333333s0-0.10666667 0.10666667-0.10666667h346.56c35.2 0 64.10666667-28.8 64.10666667-64.10666666v-518.4c0-35.09333333-28.90666667-63.89333333-64.10666667-63.89333335z m0.10666667 582.29333335l-0.21333334 0.21333333H133.44l-0.21333333-0.21333333V174.91l0.21333333-0.21333335h757.01333333l0.21333334 0.21333335v518.08z"
+    ></path>
+  <path
+    d="M266.45333333 251.49666666h-33.70666666c-11.73333333 0-21.33333333 9.6-21.33333334 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333334 21.33333335h33.70666666c11.73333333 0 21.33333333-9.6 21.33333334-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333334-21.33333334zM363.52 251.49666666h-33.70666667c-11.73333333 0-21.33333333 9.6-21.33333333 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333333 21.33333335h33.70666667c11.73333333 0 21.33333333-9.6 21.33333333-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333333-21.33333334zM460.69333333 251.49666666h-33.70666666c-11.73333333 0-21.33333333 9.6-21.33333334 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333334 21.33333335h33.70666666c11.73333333 0 21.33333333-9.6 21.33333334-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333334-21.33333334z"
+    ></path>
+</svg>

package/components/svg-icon/index.d.ts

@@ -6,6 +6,7 @@ export interface SvgIconProps {
     onClick?: (e?: any) => void;
     [key: string]: any;
 }
+export declare const ComputerIcon: FC<SvgIconProps>;
 export declare const DeclarationIcon: FC<SvgIconProps>;
 export declare const ExpoIcon: FC<SvgIconProps>;
 export declare const HwcIcon: FC<SvgIconProps>;

package/components/svg-icon/index.js

@@ -9,6 +9,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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 } from 'react';
+import { ReactComponent as Computer } from "./computer.svg";
 import { ReactComponent as Declaration } from "./declaration.svg";
 import { ReactComponent as Expo } from "./expo.svg";
 import { ReactComponent as Home } from "./home.svg";
@@ -34,6 +35,11 @@ var SvgIcon = /*#__PURE__*/memo(function (_ref) {
   }), children);
 });
 
+// 电脑（默认图标）
+export var ComputerIcon = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, props, /*#__PURE__*/React.createElement(Computer, null));
+});
+
 // 通关申报
 export var DeclarationIcon = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/React.createElement(SvgIcon, props, /*#__PURE__*/React.createElement(Declaration, null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yueglobal/ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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/breadcrumb/index.js

@@ -88,9 +88,9 @@ var Index = function Index(_ref) {
 
     // 其他是模块内部路由跳转
     var isLast = (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.path) === ((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.path);
-    var fullPath = newPaths.join('/');
-    if (!fullPath.startsWith('/')) {
-      fullPath = '/' + fullPath;
+    var currentPath = newPaths[newPaths.length - 1];
+    if (!currentPath.startsWith('/')) {
+      currentPath = '/' + currentPath;
     }
     return isLast ? /*#__PURE__*/React.createElement(Text, {
       ellipsis: {
@@ -99,7 +99,7 @@ var Index = function Index(_ref) {
     }, title) : /*#__PURE__*/React.createElement("a", {
       onClick: function onClick() {
         onRouteChange === null || onRouteChange === void 0 || onRouteChange({
-          key: fullPath,
+          key: currentPath,
           label: title
         });
       }

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

@@ -24,7 +24,7 @@ var Index = function Index(_ref) {
     menuList = _useState4[0],
     setMenuList = _useState4[1];
   useEffect(function () {
-    if (!(selectedKeys !== null && selectedKeys !== void 0 && selectedKeys.length) && !!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
+    if (!!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
       var key = moduleData.key;
       if (!key) {
         var _menuList$find;
@@ -36,7 +36,7 @@ var Index = function Index(_ref) {
         setSelectedKeys([key]);
       }
     }
-  }, [selectedKeys, menuList, moduleData]);
+  }, [menuList, moduleData]);
 
   // 获取新闻资讯的类目
   var fetchNewsData = /*#__PURE__*/function () {
@@ -69,7 +69,6 @@ var Index = function Index(_ref) {
               return {
                 key: "".concat(mainHost, "/consultation/content-list?classId=").concat(d.id, "&title=").concat(d.className),
                 label: d.className
-                // icon: <i className="yue-icon-dot" />,
               };
             }));
           case 8:
@@ -145,7 +144,6 @@ var Index = function Index(_ref) {
       }
     },
     selectedKeys: selectedKeys
-    // openKeys={['home']}
   }));
 };
 export default /*#__PURE__*/memo(Index);

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

@@ -25,6 +25,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 是否进行排序

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',
@@ -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,9 +86,9 @@ export var firstMenuList = [{
   label: '关于我们'
 }];
 
-/**
- * 将树结构转换为一维数组
- * @param data
+/**
+ * 将树结构转换为一维数组
+ * @param data
  */
 export function flattenTreeList(data) {
   // 递归函数，将嵌套的菜单数组转换为一维数组
@@ -114,10 +114,20 @@ export function flattenTreeList(data) {
   return flatten(data);
 }
 
-/**
- * 将 firstMenuList 转换为一维数组并根据 key 长度排序
- * @param isSort 是否进行排序
- * @returns 排序后的一维数组
+/**
+ * 则根据 key 的长度进行降序排序
+ * @param list
+ */
+export function sortListByKey(list) {
+  return list.sort(function (a, b) {
+    return b.key.length - a.key.length;
+  });
+}
+
+/**
+ * 将 firstMenuList 转换为一维数组并根据 key 长度排序
+ * @param isSort 是否进行排序
+ * @returns 排序后的一维数组
  */
 export function flattenMenuList(isSort) {
   // 将嵌套的菜单数组转换为一维数组
@@ -125,17 +135,15 @@ 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;
 }
 
-/**
- * 加载script域外资源
- * @param src
- * @param async
+/**
+ * 加载script域外资源
+ * @param src
+ * @param async
  */
 export function loadScript(src, async) {
   return new Promise(function (resolve, reject) {
@@ -163,10 +171,10 @@ export function loadScript(src, async) {
   });
 }
 
-/**
- * 检查页面中是否已存在指定文件名的script资源
- * @param filename 要检查的脚本文件名
- * @returns 如果存在返回true，否则返回false
+/**
+ * 检查页面中是否已存在指定文件名的script资源
+ * @param filename 要检查的脚本文件名
+ * @returns 如果存在返回true，否则返回false
  */
 export function checkExistScript(filename) {
   // 使用filename参数检查script标签是否存在
@@ -174,11 +182,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) {
@@ -215,11 +223,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 === '/') {
@@ -277,10 +285,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();
@@ -304,10 +312,10 @@ export function uniqByPath(arr) {
   return result;
 }
 
-/**
- * 深度拷贝对象或数组
- * @param obj - 要深度拷贝的对象或数组
- * @returns 拷贝后的新对象或数组
+/**
+ * 深度拷贝对象或数组
+ * @param obj - 要深度拷贝的对象或数组
+ * @returns 拷贝后的新对象或数组
  */
 export function deepClone(obj) {
   // 处理 null 和 undefined
@@ -363,10 +371,10 @@ function _setPopupStyle(uuid, left) {
   return false;
 }
 
-/**
- * 设置子菜单弹出层的样式
- * @param menuRef - 菜单实例
- * @param index - 子菜单索引
+/**
+ * 设置子菜单弹出层的样式
+ * @param menuRef - 菜单实例
+ * @param index - 子菜单索引
  */
 export function setSubMenuPopupStyle(menuRef, index) {
   var _menuRef$menu;

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

@@ -19,6 +19,7 @@ export interface YuePageHeaderProps {
     onLocaleChange?: (value: {
         locale: string;
     }) => void;
+    subMenuLayout?: 'vertical' | 'horizontal';
 }
 declare const _default: React.NamedExoticComponent<YuePageHeaderProps>;
 export default _default;

package/yue-page-header/index.js

@@ -32,23 +32,28 @@ var Index = function Index(_ref) {
     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));
-    });
+    var current;
+    // 先判断activeLabel
+    if (activeLabel) {
+      current = firstMenuList.find(function (m) {
+        return (m === null || m === void 0 ? void 0 : m.label) === activeLabel;
+      });
+    }
+    // 再判断pageTitle
+    if (!current && pageTitle) {
+      current = firstMenuList.find(function (m) {
+        return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
+      });
+    }
+    // 最后从url匹配
     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;
-        });
-      }
+      var _window$location = window.location,
+        origin = _window$location.origin,
+        pathname = _window$location.pathname;
+      var url = origin + pathname;
+      current = firstMenuList.find(function (m) {
+        return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
+      });
     }
     if (current) {
       if (!title) {

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

@@ -1,13 +1,20 @@
+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); }
 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; }
+import { ComputerIcon } from "../../components/svg-icon";
 import { ConfigProvider, Menu } from 'antd';
-import React, { memo, useEffect, useRef, useState } from 'react';
+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,
@@ -16,22 +23,72 @@ var Index = function Index(_ref) {
     menuItems = _ref.menuItems,
     pathname = _ref.pathname,
     moduleData = _ref.moduleData,
-    onRouteChange = _ref.onRouteChange;
+    onRouteChange = _ref.onRouteChange,
+    subMenuLayout = _ref.subMenuLayout;
   var _useState = useState(),
     _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 () {
+    if (subMenuLayout === 'vertical' || subMenuLayout === 'horizontal') {
+      return subMenuLayout;
+    }
+    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;
+    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,
+      selectedKeys = _ref3.selectedKeys;
     setSelectedKeys(selectedKeys);
     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 = {
@@ -86,21 +143,23 @@ var Index = function Index(_ref) {
     className: "yue-flex left"
   }, /*#__PURE__*/React.createElement("div", {
     className: "yue-flex module-info"
-  }, !!moduleData.icon && /*#__PURE__*/React.createElement("span", {
+  }, !!moduleData.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "module-icon"
+  }, moduleData.icon) : !!moduleData.title && /*#__PURE__*/React.createElement("span", {
     className: "module-icon"
-  }, moduleData.icon), !!moduleData.title && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ComputerIcon, null)), !!moduleData.title && /*#__PURE__*/React.createElement("div", {
     className: "module-title"
   }, moduleData.title)), /*#__PURE__*/React.createElement("div", {
     className: "menus"
   }, /*#__PURE__*/React.createElement(Menu, {
     ref: menuRef,
-    items: menuItems,
+    items: mergeMenuItems,
     mode: "horizontal",
-    rootClassName: "yue-second-menu-bar",
+    rootClassName: ['yue-second-menu-bar', "yue-second-menu-".concat(popupLayout)].join(' '),
     onSelect: onMenuClick,
     selectedKeys: selectedKeys,
     onOpenChange: function onOpenChange(val) {
-      if (!!(val !== null && val !== void 0 && val.length)) {
+      if (!!(val !== null && val !== void 0 && val.length) && popupLayout === 'horizontal') {
         onSubMenuOpen(val[0]);
       }
     }

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

@@ -1,160 +1,227 @@
-.yue-page-header-second-menu {
-  height: 60px;
-  background: linear-gradient(90deg, #17f1a1, #1a4bff);
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-
-  &.hidden {
-    //opacity: 0;
-  }
-
-  .wrapper {
-    margin: 0 auto;
-    justify-content: space-between;
-    height: 100%;
-    color: #fff;
-    max-width: 98%;
-  }
-
-  .left {
-    gap: 8px;
-    height: 100%;
-  }
-
-  .module-info {
-    gap: 14px;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .module-icon {
-    font-size: 27px;
-    line-height: 0;
-  }
-
-  .module-title {
-    font-size: 24px;
-    font-weight: bold;
-    min-width: 147px;
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .vr {
-    width: 1px;
-    height: 28px;
-    background-color: rgba(255, 255, 255, 85%);
-    flex-shrink: 0;
-  }
-
-  .menus {
-    //max-width: 82%;
-    height: 100%;
-    padding-block: 1px;
-    flex: 1 1 0;
-    min-width: 0;
-    padding-right: 30px;
-  }
-}
-
-.yue-second-menu-bar {
-  &.ant-menu-root {
-    background-color: transparent;
-    font-size: 18px;
-    height: 100%;
-    border-bottom: none;
-    gap: 4px;
-
-    & > li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .ant-menu-submenu-title {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .ant-menu-title-content {
-      height: 34px;
-      line-height: 32px;
-      border-radius: 16px;
-      padding-inline: 16px;
-      min-width: 80px;
-      text-align: center;
-    }
-
-    .ant-menu-submenu-active,
-    .ant-menu-item-active {
-      .ant-menu-title-content {
-        background-color: rgba(255, 255, 255, 20%);
-      }
-    }
-
-    .ant-menu-submenu-selected,
-    .ant-menu-item-selected {
-      .ant-menu-title-content {
-        background-color: #fff;
-      }
-    }
-  }
-
-  &.ant-menu-submenu-popup {
-    left: 0 !important;
-    padding: 0;
-    font-size: 18px;
-    //background-color: rgba(0, 0, 0, 45%);
-    background-color: rgba(4, 41, 131, 0.65);
-    border-radius: 0;
-    width: 100%;
-
-    .ant-menu-sub {
-      display: flex;
-      justify-content: center;
-      background-color: transparent;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .ant-menu-item {
-      width: max-content;
-      flex: unset;
-      color: #fff;
-      margin: 0;
-      border-radius: 0;
-      height: 60px;
-      line-height: 30px;
-      display: flex;
-      align-items: center;
-      padding-inline: 25px 18px;
-      flex-shrink: 0;
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        background-color: rgba(255, 255, 255, 85%);
-      }
-    }
-
-    .ant-menu-item-active,
-    .ant-menu-item-selected {
-      background: linear-gradient(90deg, #17f1a1, #1a4bff);
-    }
-
-    /*.ant-menu-item-selected {
-      background-color: rgba(0, 0, 0, 40%);
-    }*/
-  }
-}
+.yue-page-header-second-menu {
+  height: 60px;
+  background: linear-gradient(90deg, #17f1a1, #1a4bff);
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+
+  &.hidden {
+    //opacity: 0;
+  }
+
+  .wrapper {
+    margin: 0 auto;
+    justify-content: space-between;
+    height: 100%;
+    color: #fff;
+    max-width: 98%;
+  }
+
+  .left {
+    gap: 8px;
+    height: 100%;
+  }
+
+  .module-info {
+    gap: 14px;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .module-icon {
+    font-size: 27px;
+    line-height: 0;
+  }
+
+  .module-title {
+    font-size: 24px;
+    font-weight: bold;
+    min-width: 147px;
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .vr {
+    width: 1px;
+    height: 28px;
+    background-color: rgba(255, 255, 255, 85%);
+    flex-shrink: 0;
+  }
+
+  .menus {
+    //max-width: 82%;
+    height: 100%;
+    padding-block: 1px;
+    flex: 1 1 0;
+    min-width: 0;
+    padding-right: 30px;
+  }
+}
+
+.yue-second-menu-bar {
+  &.ant-menu-root {
+    background-color: transparent;
+    font-size: 18px;
+    height: 100%;
+    border-bottom: none;
+    gap: 4px;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-submenu-title {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-title-content {
+      height: 34px;
+      line-height: 32px;
+      border-radius: 16px;
+      padding-inline: 16px;
+      min-width: 80px;
+      text-align: center;
+    }
+
+    .ant-menu-submenu-active,
+    .ant-menu-item-active {
+      .ant-menu-title-content {
+        background-color: rgba(255, 255, 255, 20%);
+      }
+    }
+
+    .ant-menu-submenu-selected,
+    .ant-menu-item-selected {
+      .ant-menu-title-content {
+        background-color: #fff;
+      }
+    }
+  }
+
+  &.ant-menu-submenu-popup {
+    // 横向菜单的样式
+    &.yue-second-menu-horizontal {
+      left: 0 !important;
+      padding: 0;
+      font-size: 18px;
+      //background-color: rgba(0, 0, 0, 45%);
+      background-color: rgba(4, 41, 131, 0.65);
+      border-radius: 0;
+      width: 100%;
+
+      .ant-menu-sub {
+        display: flex;
+        justify-content: center;
+        background-color: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .ant-menu-item {
+        width: max-content;
+        flex: unset;
+        color: #fff;
+        margin: 0;
+        border-radius: 0;
+        height: 60px;
+        line-height: 30px;
+        display: flex;
+        align-items: center;
+        padding-inline: 25px 18px;
+        flex-shrink: 0;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 85%);
+        }
+      }
+
+      .ant-menu-item-active,
+      .ant-menu-item-selected {
+        background: linear-gradient(90deg, #17f1a1, #1a4bff);
+      }
+    }
+
+    // 竖向菜单的样式
+    &.yue-second-menu-vertical {
+      font-size: 17px;
+
+      .ant-menu-sub {
+        background: linear-gradient(
+          135deg,
+          rgb(50, 205, 150),
+          rgb(73, 108, 236)
+        );
+        margin: -7px 0 0;
+      }
+
+      .ant-menu-item {
+        color: #fff;
+        position: relative;
+        border-radius: 0;
+        padding-inline: 28px 22px;
+        margin: 0;
+        width: max-content;
+        height: 46px;
+        line-height: 46px;
+        margin-block: 1px;
+        overflow: unset;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 85%);
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          bottom: -1px;
+          width: 80%;
+          transform: translateX(-50%);
+          height: 1px;
+          background-color: rgba(255, 255, 255, 0.25);
+          z-index: 1;
+        }
+
+        &:last-child::after {
+          content: none;
+        }
+      }
+
+      .ant-menu-item-active,
+      .ant-menu-item-selected {
+        background: linear-gradient(90deg, #06a168, #2a50dc);
+      }
+
+      .ant-menu-item-selected {
+        color: #00ffca;
+
+        &::before {
+          background-color: #00ffca;
+        }
+      }
+    }
+  }
+}