@yueglobal/ui 1.0.1 → 1.0.2

package/README.md

@@ -1,146 +1,147 @@
-# @yueglobal/ui
-
-粤链全球 - React 组件库
-
-如需`vue`版本，请前往 [@yueglobal/vue-ui](https://www.npmjs.com/package/@yueglobal/vue-ui)
-
-## 安装使用
-
-```shell
-yarn add @yueglobal/ui
-```
-
-```ts
-import {
-  // 页面头部组件
-  YuePageHeader,
-  // 页面底部组件
-  YuePageFooter,
-} from '@yueglobal/ui';
-```
-
-## YuePageHeader
-
-页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。
-
-### 属性
-
-| 属性              | 说明                                | 类型                                        | 默认值 |
-| ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
-| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`  |
-| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff` |
-| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `ReactNode`                                 |        |
-| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |        |
-| `pageTitle`       | 缺值时从一级菜单取值                | `string`                                    |        |
-| `pageIcon`        | 页面图标                            | `ReactNode`                                 |        |
-| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |        |
-| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |        |
-| `pathname`        | 当前的路由                          | `string`                                    |        |
-| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |        |
-| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |        |
-
-- 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
-
-- 面包屑：若`breadcrumbs`缺省，则会根据`routes`、`pathname`自动生成面包屑的数据
-
-- `routes`是`umijs`的路由列表，需按如下方式取值：
-
-```ts
-import { useAppData } from '@umijs/max';
-// .......
-const { routes } = useAppData();
-```
-
-### YueMenuItem
-
-| 属性       | 说明       | 类型            | 备注                           |
-| ---------- | ---------- | --------------- | ------------------------------ |
-| `key`      | 唯一标识   | `string`        | `必填`，可传路由地址如 `/home` |
-| `label`    | 菜单项文案 | `string`        | `必填`                         |
-| `children` | 子菜单项   | `YueMenuItem`[] |                                |
-
-### YueBreadcrumb
-
-| 属性    | 说明                   | 类型     | 备注                   |
-| ------- | ---------------------- | -------- | ---------------------- |
-| `key`   | 唯一标识，用于路由跳转 | `string` | 可传路由地址如 `/home` |
-| `label` | 面包屑项文案           | `string` |                        |
-
-### 使用示例
-
-```tsx | pure
-import React from 'react';
-import { YuePageHeader } from '@yueglobal/ui';
-import { useAppData, useLocation, useModel, history } from '@umijs/max';
-
-const Index = () => {
-  const { routes } = useAppData();
-  const { pathname } = useLocation();
-  const { initialState } = useModel('@@initialState');
-
-  const menuItems = [
-    { key: '/home', label: '首页' },
-    {
-      key: '/exhibition',
-      label: '展会',
-      children: [
-        { key: '/exhibition/international', label: '国际展会' },
-        { key: '/exhibition/domestic', label: '国内展会' },
-      ],
-    },
-    { key: '/business', label: '商务' },
-  ];
-
-  const onRouteChange = (item: { key: string; label?: string }) => {
-    console.log('点击的菜单key: ', item.key);
-    // 在这里处理路由跳转逻辑, 比如
-    if (item.key.startsWith('/')) {
-      history.push(item.key);
-    }
-  };
-
-  const onLocaleChange = ({ locale }: { locale: string }) => {
-    console.log('切换语言为：', locale);
-  };
-
-  return (
-    <YuePageHeader
-      width={1440}
-      pageTitle="会展服务"
-      menuItems={menuItems}
-      pathname={pathname}
-      routes={routes}
-      rightContent={
-        !!initialState?.isLogin ? <div>用户名</div> : <div>登录</div>
-      }
-      onRouteChange={onRouteChange}
-      onLocaleChange={onLocaleChange}
-    />
-  );
-};
-
-export default Index;
-```
-
-## YuePageFooter
-
-页面底部组件，显示版权信息、联系方式和相关链接。
-
-### 属性
-
-| 属性    | 说明     | 类型                 | 默认值 |
-| ------- | -------- | -------------------- | ------ |
-| `width` | 内容宽度 | `string` \| `number` | `80%`  |
-
-### 使用示例
-
-```tsx | pure
-import React from 'react';
-import { YuePageFooter } from '@yueglobal/ui';
-
-const Index = () => {
-  return <YuePageFooter width={1440} />;
-};
-
-export default Index;
-```
+# @yueglobal/ui
+
+粤链全球 - React 组件库
+
+如需`vue`版本，请前往 [@yueglobal/vue-ui](https://www.npmjs.com/package/@yueglobal/vue-ui)
+
+## 安装使用
+
+```shell
+yarn add @yueglobal/ui
+```
+
+```ts
+import {
+  // 页面头部组件
+  YuePageHeader,
+  // 页面底部组件
+  YuePageFooter,
+} from '@yueglobal/ui';
+```
+
+## YuePageHeader
+
+页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。
+
+### 属性
+
+| 属性              | 说明                                | 类型                                        | 默认值 |
+| ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
+| `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`                |        |
+
+- 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
+
+- 面包屑：若`breadcrumbs`缺省，则会根据`routes`、`pathname`自动生成面包屑的数据
+
+- `routes`是`umijs`的路由列表，需按如下方式取值：
+
+```ts
+import { useAppData } from '@umijs/max';
+// .......
+const { routes } = useAppData();
+```
+
+### YueMenuItem
+
+| 属性       | 说明       | 类型            | 备注                           |
+| ---------- | ---------- | --------------- | ------------------------------ |
+| `key`      | 唯一标识   | `string`        | `必填`，可传路由地址如 `/home` |
+| `label`    | 菜单项文案 | `string`        | `必填`                         |
+| `children` | 子菜单项   | `YueMenuItem`[] |                                |
+
+### YueBreadcrumb
+
+| 属性    | 说明                   | 类型     | 备注                   |
+| ------- | ---------------------- | -------- | ---------------------- |
+| `key`   | 唯一标识，用于路由跳转 | `string` | 可传路由地址如 `/home` |
+| `label` | 面包屑项文案           | `string` |                        |
+
+### 使用示例
+
+```tsx | pure
+import React from 'react';
+import { YuePageHeader } from '@yueglobal/ui';
+import { useAppData, useLocation, useModel, history } from '@umijs/max';
+
+const Index = () => {
+  const { routes } = useAppData();
+  const { pathname } = useLocation();
+  const { initialState } = useModel('@@initialState');
+
+  const menuItems = [
+    { key: '/home', label: '首页' },
+    {
+      key: '/exhibition',
+      label: '展会',
+      children: [
+        { key: '/exhibition/international', label: '国际展会' },
+        { key: '/exhibition/domestic', label: '国内展会' },
+      ],
+    },
+    { key: '/business', label: '商务' },
+  ];
+
+  const onRouteChange = (item: { key: string; label?: string }) => {
+    console.log('点击的菜单key: ', item.key);
+    // 在这里处理路由跳转逻辑, 比如
+    if (item.key.startsWith('/')) {
+      history.push(item.key);
+    }
+  };
+
+  const onLocaleChange = ({ locale }: { locale: string }) => {
+    console.log('切换语言为：', locale);
+  };
+
+  return (
+    <YuePageHeader
+      width={1440}
+      pageTitle="会展服务"
+      menuItems={menuItems}
+      pathname={pathname}
+      routes={routes}
+      rightContent={
+        !!initialState?.isLogin ? <div>用户名</div> : <div>登录</div>
+      }
+      onRouteChange={onRouteChange}
+      onLocaleChange={onLocaleChange}
+    />
+  );
+};
+
+export default Index;
+```
+
+## YuePageFooter
+
+页面底部组件，显示版权信息、联系方式和相关链接。
+
+### 属性
+
+| 属性    | 说明     | 类型                 | 默认值 |
+| ------- | -------- | -------------------- | ------ |
+| `width` | 内容宽度 | `string` \| `number` | `80%`  |
+
+### 使用示例
+
+```tsx | pure
+import React from 'react';
+import { YuePageFooter } from '@yueglobal/ui';
+
+const Index = () => {
+  return <YuePageFooter width={1440} />;
+};
+
+export default Index;
+```

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@yueglobal/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "粤链全球 - react组件库",
   "license": "MIT",
   "module": "index.js",
   "typings": "index.d.ts",
+  "devDependencies": {
+    "react": "^18.0.0"
+  },
   "peerDependencies": {
     "antd": ">=4.23.0 || >=5.0.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "devDependencies": {
-    "react": "^18.0.0"
-  },
   "publishConfig": {
     "access": "public"
   }

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

@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { YuePageHeaderProps } from '../index';
-type Props = Pick<YuePageHeaderProps, 'breadcrumbs' | 'routes' | 'pathname' | 'onRouteChange'>;
+import './index.less';
+type Props = Pick<YuePageHeaderProps, 'breadcrumbs' | 'routes' | 'pathname' | 'onRouteChange'> & {
+    moduleData: {
+        title?: string;
+        icon?: ReactNode;
+        key?: string;
+    };
+};
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/yue-page-header/breadcrumb/index.js

@@ -1,18 +1,21 @@
-import { Breadcrumb } from 'antd';
+import { Breadcrumb, Typography } from 'antd';
 import React, { memo, useMemo } from 'react';
 import { LocationIcon } from "../../components/svg-icon";
-import { getFullPathNodesByPath, uniqByPath } from "../helper";
+import { getFullPathNodesByPath, mainHost, uniqByPath } from "../helper";
+import "./index.less";
+var Text = Typography.Text;
 var Index = function Index(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     routes = _ref.routes,
     pathname = _ref.pathname,
-    onRouteChange = _ref.onRouteChange;
+    onRouteChange = _ref.onRouteChange,
+    moduleData = _ref.moduleData;
   var breadcrumbItems = useMemo(function () {
     if (breadcrumbs) {
       return breadcrumbs.map(function (item) {
-        var _item$key;
+        var _item$key, _item$key2;
         return {
-          path: (_item$key = item.key) !== null && _item$key !== void 0 && _item$key.startsWith('/') ? item.key : undefined,
+          path: (_item$key = item.key) !== null && _item$key !== void 0 && _item$key.startsWith('/') || (_item$key2 = item.key) !== null && _item$key2 !== void 0 && _item$key2.startsWith('http') ? item.key : undefined,
           title: item.label
         };
       });
@@ -23,14 +26,25 @@ var Index = function Index(_ref) {
         return !d.redirect && d.access !== false && !d.isLayout;
       });
       var paths = getFullPathNodesByPath(routeList, pathname);
-      if (!paths.find(function (p) {
-        return p.title === '首页' || p.name === '首页' || p.path === '/' || p.path === '/home';
-      })) {
+      // 首页路由坐标
+      var homeIndex = paths.findIndex(function (p) {
+        var _p$title, _p$name;
+        return ((_p$title = p.title) === null || _p$title === void 0 ? void 0 : _p$title.startsWith('首页')) || ((_p$name = p.name) === null || _p$name === void 0 ? void 0 : _p$name.startsWith('首页')) || p.path === '/' || p.path === '/home';
+      });
+      if (homeIndex === -1) {
+        // 没有子项目首页的路由，添加一个
         paths.unshift({
-          title: '首页',
+          title: (moduleData === null || moduleData === void 0 ? void 0 : moduleData.title) || '应用首页',
           path: '/'
         });
+      } else if (moduleData !== null && moduleData !== void 0 && moduleData.title) {
+        // 对首页重命名
+        paths[homeIndex].title = moduleData.title;
       }
+      paths.unshift({
+        title: '首页',
+        path: mainHost
+      });
       if ((_paths = paths) !== null && _paths !== void 0 && _paths.length) {
         paths = uniqByPath(paths);
         if (paths.length > 1) {
@@ -46,28 +60,60 @@ var Index = function Index(_ref) {
       }
     }
     return undefined;
-  }, [breadcrumbs, routes, pathname]);
+  }, [breadcrumbs, routes, pathname, moduleData]);
   var itemRender = function itemRender(currentRoute, _, items, paths) {
-    var _items;
+    var _paths$, _newPaths, _items;
+    var newPaths = paths;
+    var firstPath = '';
+    if (paths !== null && paths !== void 0 && (_paths$ = paths[0]) !== null && _paths$ !== void 0 && _paths$.startsWith('http')) {
+      newPaths = paths.slice(1);
+      firstPath = paths[0];
+    }
+    var title = currentRoute.title;
+    var tooltip = {
+      title: title,
+      placement: 'bottomRight'
+    };
+
+    // 是第一个（平台首页）
+    if (firstPath && !((_newPaths = newPaths) !== null && _newPaths !== void 0 && _newPaths.length)) {
+      return /*#__PURE__*/React.createElement("a", {
+        href: firstPath
+      }, /*#__PURE__*/React.createElement(Text, {
+        ellipsis: {
+          tooltip: tooltip
+        }
+      }, title));
+    }
+
+    // 其他是模块内部路由跳转
     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 = paths.join('/');
+    var fullPath = newPaths.join('/');
     if (!fullPath.startsWith('/')) {
       fullPath = '/' + fullPath;
     }
-    return isLast ? /*#__PURE__*/React.createElement("span", null, currentRoute.title) : /*#__PURE__*/React.createElement("a", {
+    return isLast ? /*#__PURE__*/React.createElement(Text, {
+      ellipsis: {
+        tooltip: tooltip
+      }
+    }, title) : /*#__PURE__*/React.createElement("a", {
       onClick: function onClick() {
         onRouteChange === null || onRouteChange === void 0 || onRouteChange({
           key: fullPath,
-          label: currentRoute.title
+          label: title
         });
       }
-    }, currentRoute.title);
+    }, /*#__PURE__*/React.createElement(Text, {
+      ellipsis: {
+        tooltip: tooltip
+      }
+    }, title));
   };
   if (!(breadcrumbItems !== null && breadcrumbItems !== void 0 && breadcrumbItems.length)) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "yue-flex breadcrumb"
+    className: "yue-flex yue-breadcrumb"
   }, /*#__PURE__*/React.createElement(LocationIcon, {
     style: {
       fontSize: 16

package/yue-page-header/breadcrumb/index.less

@@ -0,0 +1,30 @@
+.yue-breadcrumb {
+  gap: 12px;
+  padding-right: 8px;
+  flex-shrink: 0;
+
+  .ant-breadcrumb ol {
+    align-items: center;
+  }
+
+  .ant-breadcrumb-item,
+  .ant-breadcrumb-item > a {
+    max-width: 70px;
+  }
+
+  .ant-breadcrumb-item {
+    .ant-typography {
+      font-size: 12px;
+      color: #fff;
+      line-height: 1.57;
+    }
+
+    a {
+      height: max-content;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
 import React, { ReactNode } from 'react';
 import './index.less';
 interface Props {
-    setVisible: (visible: boolean) => void;
     moduleData: {
         title?: string;
         icon?: ReactNode;

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

@@ -9,16 +9,16 @@ 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, useState } from 'react';
-import { deepClone, firstMenuList, mainHost } from "../helper";
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { deepClone, firstMenuList, mainHost, setSubMenuPopupStyle } from "../helper";
 import "./index.less";
 var Index = function Index(_ref) {
-  var setVisible = _ref.setVisible,
-    moduleData = _ref.moduleData;
+  var moduleData = _ref.moduleData;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var menuRef = useRef(null);
   var _useState3 = useState(deepClone(firstMenuList)),
     _useState4 = _slicedToArray(_useState3, 2),
     menuList = _useState4[0],
@@ -68,10 +68,8 @@ var Index = function Index(_ref) {
             return _context.abrupt("return", result === null || result === void 0 ? void 0 : result.map(function (d) {
               return {
                 key: "".concat(mainHost, "/consultation/content-list?classId=").concat(d.id, "&title=").concat(d.className),
-                label: d.className,
-                icon: /*#__PURE__*/React.createElement("i", {
-                  className: "yue-icon-dot"
-                })
+                label: d.className
+                // icon: <i className="yue-icon-dot" />,
               };
             }));
           case 8:
@@ -111,6 +109,18 @@ var Index = function Index(_ref) {
       window.location.href = key;
     }
   };
+  var onSubMenuOpen = function onSubMenuOpen(key) {
+    if (!menuRef.current) {
+      return false;
+    }
+    var index = menuList.findIndex(function (m) {
+      return m.key === key;
+    });
+    if (index === -1) {
+      return false;
+    }
+    setSubMenuPopupStyle(menuRef.current, index);
+  };
   return /*#__PURE__*/React.createElement(ConfigProvider, {
     theme: {
       components: {
@@ -124,14 +134,18 @@ var Index = function Index(_ref) {
       }
     }
   }, /*#__PURE__*/React.createElement(Menu, {
+    ref: menuRef,
     items: menuList,
     mode: "horizontal",
     rootClassName: "yue-page-header-first-menu",
     onSelect: onItem,
     onOpenChange: function onOpenChange(val) {
-      setVisible(!!(val !== null && val !== void 0 && val.length));
+      if (!!(val !== null && val !== void 0 && val.length)) {
+        onSubMenuOpen(val[0]);
+      }
     },
     selectedKeys: selectedKeys
+    // openKeys={['home']}
   }));
 };
 export default /*#__PURE__*/memo(Index);

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

@@ -13,6 +13,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      //max-width: 180px;
+    }
+
+    .ant-menu-title-content {
+      //white-space: wrap;
+      //line-height: 22px;
     }
 
     .ant-menu-submenu-title {
@@ -51,7 +57,9 @@
 
     .ant-menu-sub {
       display: flex;
+      align-items: center;
       justify-content: center;
+      flex-wrap: wrap;
       background-color: transparent;
       border-radius: 0;
       box-shadow: none;
@@ -74,6 +82,23 @@
         font-size: 20px;
         flex-shrink: 0;
       }
+
+      &:not(:has(.anticon)) {
+        position: relative;
+        padding-inline: 25px 18px;
+
+        &::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,

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

@@ -1,3 +1,4 @@
+import { MenuRef } from 'antd';
 import { ReactNode } from 'react';
 export interface YueMenuItem {
     key: string;
@@ -6,6 +7,7 @@ export interface YueMenuItem {
     children?: YueMenuItem[];
     request?: string;
     className?: string;
+    onTitleClick?: any;
 }
 export interface YueBreadcrumb {
     key?: string;
@@ -70,3 +72,9 @@ export declare function uniqByPath<T extends {
  * @returns 拷贝后的新对象或数组
  */
 export declare function deepClone<T>(obj: T): T;
+/**
+ * 设置子菜单弹出层的样式
+ * @param menuRef - 菜单实例
+ * @param index - 子菜单索引
+ */
+export declare function setSubMenuPopupStyle(menuRef: MenuRef, index: number): false | undefined;

package/yue-page-header/helper.js

@@ -18,6 +18,12 @@ export var firstMenuList = [{
   key: 'home',
   label: '出海服务',
   className: 'is-home',
+  onTitleClick: function onTitleClick(_ref) {
+    var key = _ref.key;
+    if (key === 'home') {
+      window.location.href = mainHost;
+    }
+  },
   children: [{
     key: mainHost,
     label: '首页',
@@ -58,7 +64,14 @@ export var firstMenuList = [{
 }, {
   key: "".concat(mainHost, "/#9"),
   label: '新闻资讯',
-  request: '/api/gwtrade-plat-front/whitelist/cms-content-class/classTree?siteFlag=uce'
+  children: [],
+  request: '/api/gwtrade-plat-front/whitelist/cms-content-class/classTree?siteFlag=uce',
+  onTitleClick: function onTitleClick(_ref2) {
+    var key = _ref2.key;
+    if (key !== null && key !== void 0 && key.startsWith('http')) {
+      window.location.href = key;
+    }
+  }
 }, {
   key: "".concat(mainHost, "/#10"),
   label: '国际市场'
@@ -327,4 +340,57 @@ export function deepClone(obj) {
     }
   }
   return clonedObj;
+}
+function _setPopupStyle(uuid, left) {
+  var popupUL = window.document.getElementById(uuid);
+  if (popupUL) {
+    var contentWidth = 0;
+    var childLength = popupUL.children.length;
+    for (var i = 0; i < childLength; i++) {
+      var li = popupUL.children[i];
+      contentWidth += li.offsetWidth || 120; // 有时会读取不到值，默认给120px
+    }
+    var bodyWidth = window.document.body.clientWidth;
+    if (left + contentWidth > bodyWidth || contentWidth === 0 && childLength > 4) {
+      popupUL.style.paddingLeft = "unset";
+      popupUL.style.justifyContent = 'center';
+    } else {
+      popupUL.style.paddingLeft = "".concat(left - 8, "px");
+      popupUL.style.justifyContent = 'unset';
+    }
+    return true;
+  }
+  return false;
+}
+
+/**
+ * 设置子菜单弹出层的样式
+ * @param menuRef - 菜单实例
+ * @param index - 子菜单索引
+ */
+export function setSubMenuPopupStyle(menuRef, index) {
+  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) {
+    return false;
+  }
+  var uuid = li.getAttribute('aria-controls');
+  if (!uuid && li.classList.contains('ant-menu-submenu')) {
+    var title = li.querySelector('.ant-menu-submenu-title');
+    uuid = title === null || title === void 0 ? void 0 : title.getAttribute('aria-controls');
+  }
+  if (!uuid) {
+    return false;
+  }
+  var _li$getBoundingClient = li.getBoundingClientRect(),
+    left = _li$getBoundingClient.left;
+  setTimeout(function () {
+    var success = _setPopupStyle(uuid, left);
+    if (!success) {
+      setTimeout(function () {
+        // 重新执行一次
+        _setPopupStyle(uuid, left);
+      }, 100);
+    }
+  }, 100, uuid, left);
 }

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { YueBreadcrumb, YueMenuItem } from './helper';
 import './index.less';
 export interface YuePageHeaderProps {
+    activeLabel?: string;
     width?: string | number;
     backgroundColor?: string;
     menuItems?: YueMenuItem[];

package/yue-page-header/index.js

@@ -1,14 +1,8 @@
-var _excluded = ["width", "backgroundColor", "rightContent", "onLocaleChange", "pageTitle", "pageIcon"];
+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";
@@ -25,11 +19,8 @@ var Index = function Index(_ref) {
     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 !!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);
@@ -40,36 +31,40 @@ var Index = function Index(_ref) {
     var title = pageTitle;
     var icon = pageIcon;
     var key;
-    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) {
+    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;
+    }
+    if (current) {
+      if (!title) {
+        title = current.label;
+      }
+      if (!icon) {
+        icon = current.icon;
       }
+      key = current.key;
     }
     return {
       title: title,
       icon: icon,
       key: key
     };
-  }, [pageTitle, pageIcon]);
+  }, [pageTitle, pageIcon, activeLabel]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: backgroundColor,
@@ -101,14 +96,12 @@ 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))));
 };

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

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { YuePageHeaderProps } from '../index';
 import './index.less';
 interface Props extends Omit<YuePageHeaderProps, 'rightContent' | 'pageTitle' | 'pageIcon'> {
-    visible: boolean;
     moduleData: {
         title?: string;
         icon?: ReactNode;

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

@@ -5,9 +5,9 @@ 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, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import Breadcrumb from "../breadcrumb";
-import { flattenTreeList } from "../helper";
+import { flattenTreeList, setSubMenuPopupStyle } from "../helper";
 import "./index.less";
 var Index = function Index(_ref) {
   var width = _ref.width,
@@ -15,13 +15,13 @@ var Index = function Index(_ref) {
     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]);
@@ -43,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: {
@@ -76,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);

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

@@ -17,7 +17,7 @@
   }
 
   .left {
-    gap: 20px;
+    gap: 8px;
     height: 100%;
   }
 
@@ -35,6 +35,11 @@
   .module-title {
     font-size: 24px;
     font-weight: bold;
+    min-width: 147px;
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .vr {
@@ -48,23 +53,9 @@
     //max-width: 82%;
     height: 100%;
     padding-block: 1px;
-    flex: 1 1 0%;
+    flex: 1 1 0;
     min-width: 0;
-  }
-
-  .breadcrumb {
-    gap: 12px;
-    flex-shrink: 0;
-
-    a {
-      height: max-content;
-      color: #fff;
-
-      &:hover {
-        color: #fff;
-        background-color: transparent;
-      }
-    }
+    padding-right: 30px;
   }
 }
 
@@ -94,6 +85,8 @@
       line-height: 32px;
       border-radius: 16px;
       padding-inline: 16px;
+      min-width: 80px;
+      text-align: center;
     }
 
     .ant-menu-submenu-active,
@@ -115,7 +108,8 @@
     left: 0 !important;
     padding: 0;
     font-size: 18px;
-    background-color: rgba(0, 0, 0, 45%);
+    //background-color: rgba(0, 0, 0, 45%);
+    background-color: rgba(4, 41, 131, 0.65);
     border-radius: 0;
     width: 100%;
 
@@ -154,8 +148,13 @@
       }
     }
 
+    .ant-menu-item-active,
     .ant-menu-item-selected {
-      background-color: rgba(0, 0, 0, 40%);
+      background: linear-gradient(90deg, #17f1a1, #1a4bff);
     }
+
+    /*.ant-menu-item-selected {
+      background-color: rgba(0, 0, 0, 40%);
+    }*/
   }
 }