@yueglobal/ui 1.0.1 → 1.0.3

package/README.md

@@ -1,146 +1,149 @@
-# @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`                                 |            |
+| `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`自动从一级菜单匹配值
+
+- 面包屑：若`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/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,18 +1,18 @@
 {
   "name": "@yueglobal/ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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('/');
-    if (!fullPath.startsWith('/')) {
-      fullPath = '/' + fullPath;
+    var currentPath = newPaths[newPaths.length - 1];
+    if (!currentPath.startsWith('/')) {
+      currentPath = '/' + currentPath;
     }
-    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
+          key: currentPath,
+          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,22 +9,22 @@ 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],
     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 () {
@@ -68,10 +68,7 @@ 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
               };
             }));
           case 8:
@@ -111,6 +108,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 +133,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);