@yueglobal/ui 1.0.0 → 1.0.2

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

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

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

@@ -9,15 +9,34 @@ 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;
-  var _useState = useState(deepClone(firstMenuList)),
+  var moduleData = _ref.moduleData;
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    menuList = _useState2[0],
-    setMenuList = _useState2[1];
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
+  var menuRef = useRef(null);
+  var _useState3 = useState(deepClone(firstMenuList)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuList = _useState4[0],
+    setMenuList = _useState4[1];
+  useEffect(function () {
+    if (!(selectedKeys !== null && selectedKeys !== void 0 && selectedKeys.length) && !!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
+      var key = moduleData.key;
+      if (!key) {
+        var _menuList$find;
+        key = (_menuList$find = menuList.find(function (m) {
+          return m.label === moduleData.title;
+        })) === null || _menuList$find === void 0 ? void 0 : _menuList$find.key;
+      }
+      if (key) {
+        setSelectedKeys([key]);
+      }
+    }
+  }, [selectedKeys, menuList, moduleData]);
 
   // 获取新闻资讯的类目
   var fetchNewsData = /*#__PURE__*/function () {
@@ -49,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:
@@ -85,17 +102,31 @@ var Index = function Index(_ref) {
     } catch (e) {}
   }, []);
   var onItem = function onItem(_ref3) {
-    var key = _ref3.key;
+    var key = _ref3.key,
+      selectedKeys = _ref3.selectedKeys;
+    setSelectedKeys(selectedKeys);
     if (key !== null && key !== void 0 && key.startsWith('http')) {
       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: {
         Menu: {
           activeBarHeight: 5,
-          itemPaddingInline: 20,
+          itemPaddingInline: 18,
           itemColor: '#000',
           dropdownWidth: '100%',
           horizontalLineHeight: '30px'
@@ -103,13 +134,18 @@ var Index = function Index(_ref) {
       }
     }
   }, /*#__PURE__*/React.createElement(Menu, {
+    ref: menuRef,
     items: menuList,
     mode: "horizontal",
     rootClassName: "yue-page-header-first-menu",
-    onClick: onItem,
+    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/{dist/yue-page-header → yue-page-header}/first-menus/index.less

@@ -1,86 +1,119 @@
-.yue-page-header-first-menu {
-  &.ant-menu-root {
-    flex: 1;
-    background-color: transparent;
-    padding-inline: 30px;
-    font-size: 20px;
-    color: #000;
-    height: 100%;
-    width: 100%;
-    border-bottom: none;
-
-    & > 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-item-selected {
-      color: #1a4bff;
-
-      &::after {
-        //border-bottom-width: 6px;
-        border-bottom-color: #1a4bff;
-        border-radius: 3px 3px 0 0;
-      }
-    }
-  }
-
-  &.ant-menu-submenu-popup {
-    left: 0 !important;
-    padding: 0;
-    font-size: 18px;
-    background-color: rgba(4, 41, 131, 80%);
-    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: 16px;
-      flex-shrink: 0;
-
-      .anticon {
-        font-size: 20px;
-        flex-shrink: 0;
-      }
-    }
-
-    .ant-menu-item-active,
-    .ant-menu-item-selected {
-      color: #fff !important;
-      background: linear-gradient(90deg, #17f1a1, #1a4bff);
-    }
-
-    .yue-icon-dot {
-      min-width: auto !important;
-      min-height: auto !important;
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background-color: rgba(255, 255, 255, 80%);
-    }
-  }
-}
+.yue-page-header-first-menu {
+  &.ant-menu-root {
+    flex: 1;
+    background-color: transparent;
+    padding-inline: 30px;
+    font-size: 20px;
+    color: #000;
+    height: 100%;
+    width: 100%;
+    border-bottom: none;
+
+    & > li {
+      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 {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-item-selected {
+      color: #1a4bff;
+
+      &::after {
+        border-bottom-color: #1a4bff;
+        border-radius: 3px 3px 0 0;
+      }
+    }
+
+    .ant-menu-submenu-selected:not(.ant-menu-submenu-active) {
+      &::after {
+        content: none;
+      }
+      .ant-menu-submenu-title {
+        color: #000;
+      }
+    }
+  }
+
+  &.ant-menu-submenu-popup {
+    left: 0 !important;
+    padding: 0;
+    font-size: 18px;
+    background-color: rgba(4, 41, 131, 80%);
+    border-radius: 0;
+    width: 100%;
+
+    .ant-menu-sub {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      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: 16px;
+      flex-shrink: 0;
+
+      .anticon {
+        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,
+    .ant-menu-item-selected {
+      color: #fff !important;
+      background: linear-gradient(90deg, #17f1a1, #1a4bff);
+    }
+
+    .yue-icon-dot {
+      min-width: auto !important;
+      min-height: auto !important;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 80%);
+    }
+  }
+}

package/{dist/yue-page-header → yue-page-header}/helper.d.ts

@@ -1,3 +1,4 @@
+import { MenuRef } from 'antd';
 import { ReactNode } from 'react';
 export interface YueMenuItem {
     key: string;
@@ -5,6 +6,8 @@ export interface YueMenuItem {
     icon?: ReactNode;
     children?: YueMenuItem[];
     request?: string;
+    className?: string;
+    onTitleClick?: any;
 }
 export interface YueBreadcrumb {
     key?: string;
@@ -69,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/{dist/yue-page-header → yue-page-header}/helper.js

@@ -11,12 +11,19 @@ import { ExpoIcon, HomeIcon, HwcIcon, InsuranceIcon, LawIcon, SelectionIcon, Tax
 // 主网站域名
 export var mainHost = 'https://www.yueglobal.com';
 
-/**
- * 一级菜单（主菜单）
+/**
+ * 一级菜单（主菜单）
  */
 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: '首页',
@@ -57,21 +64,31 @@ 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: '国际市场'
 }, {
   key: "".concat(mainHost, "/#11"),
   label: '省内产业'
+}, {
+  key: "".concat(mainHost, "/#12"),
+  label: '合作机构'
 }, {
   key: "".concat(mainHost, "/aboutus"),
   label: '关于我们'
 }];
 
-/**
- * 将树结构转换为一维数组
- * @param data
+/**
+ * 将树结构转换为一维数组
+ * @param data
  */
 export function flattenTreeList(data) {
   // 递归函数，将嵌套的菜单数组转换为一维数组
@@ -97,10 +114,10 @@ export function flattenTreeList(data) {
   return flatten(data);
 }
 
-/**
- * 将 firstMenuList 转换为一维数组并根据 key 长度排序
- * @param isSort 是否进行排序
- * @returns 排序后的一维数组
+/**
+ * 将 firstMenuList 转换为一维数组并根据 key 长度排序
+ * @param isSort 是否进行排序
+ * @returns 排序后的一维数组
  */
 export function flattenMenuList(isSort) {
   // 将嵌套的菜单数组转换为一维数组
@@ -115,10 +132,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) {
@@ -146,10 +163,10 @@ export function loadScript(src, async) {
   });
 }
 
-/**
- * 检查页面中是否已存在指定文件名的script资源
- * @param filename 要检查的脚本文件名
- * @returns 如果存在返回true，否则返回false
+/**
+ * 检查页面中是否已存在指定文件名的script资源
+ * @param filename 要检查的脚本文件名
+ * @returns 如果存在返回true，否则返回false
  */
 export function checkExistScript(filename) {
   // 使用filename参数检查script标签是否存在
@@ -157,11 +174,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) {
@@ -198,11 +215,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 === '/') {
@@ -260,10 +277,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();
@@ -287,10 +304,10 @@ export function uniqByPath(arr) {
   return result;
 }
 
-/**
- * 深度拷贝对象或数组
- * @param obj - 要深度拷贝的对象或数组
- * @returns 拷贝后的新对象或数组
+/**
+ * 深度拷贝对象或数组
+ * @param obj - 要深度拷贝的对象或数组
+ * @returns 拷贝后的新对象或数组
  */
 export function deepClone(obj) {
   // 处理 null 和 undefined
@@ -323,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/{dist/yue-page-header → 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[];