前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题

jeecgboot-vue3/src/components/Menu/index.ts

@@ -0,0 +1,3 @@
+import BasicMenu from './src/BasicMenu.vue';
+
+export { BasicMenu };

jeecgboot-vue3/src/components/Menu/src/BasicMenu.vue

@@ -0,0 +1,235 @@
+<template>
+  <Menu
+    :selectedKeys="selectedKeys"
+    :defaultSelectedKeys="defaultSelectedKeys"
+    :mode="mode"
+    :openKeys="getOpenKeys"
+    :inlineIndent="inlineIndent"
+    :theme="theme"
+    @openChange="handleOpenChange"
+    :class="getMenuClass"
+    @click="handleMenuClick"
+    :subMenuOpenDelay="0.2"
+    v-bind="getInlineCollapseOptions"
+  >
+    <template v-for="item in items" :key="item.path">
+      <BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
+    </template>
+  </Menu>
+</template>
+<script lang="ts">
+  import type { MenuState } from './types';
+  import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
+  import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+  import { useOpenKeys } from './useOpenKeys';
+  import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
+  import { isFunction, isUrl } from '/@/utils/is';
+  import { basicProps } from './props';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { REDIRECT_NAME } from '/@/router/constant';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getCurrentParentPath } from '/@/router/menus';
+  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
+  import { getAllParentPath } from '/@/router/helper/menuHelper';
+  import { createBasicRootMenuContext } from './useBasicMenuContext';
+  import { URL_HASH_TAB } from '/@/utils';
+  import { getMenus } from '/@/router/menus';
+
+  export default defineComponent({
+    name: 'BasicMenu',
+    components: {
+      Menu,
+      BasicSubMenuItem,
+    },
+    props: basicProps,
+    emits: ['menuClick'],
+    setup(props, { emit }) {
+      const isClickGo = ref(false);
+      const currentActiveMenu = ref('');
+
+      const menuState = reactive<MenuState>({
+        defaultSelectedKeys: [],
+        openKeys: [],
+        selectedKeys: [],
+        collapsedOpenKeys: [],
+      });
+      // update-begin--author:liaozhiyang---date:20230326---for：【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      createBasicRootMenuContext({ menuState: menuState });
+      // update-end--author:liaozhiyang---date:20230326---for：【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      const { prefixCls } = useDesign('basic-menu');
+      const { items, mode, accordion } = toRefs(props);
+
+      const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
+
+      const { currentRoute } = useRouter();
+
+      const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
+
+      const getIsTopMenu = computed(() => {
+        const { type, mode } = props;
+
+        return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
+      });
+
+      const getMenuClass = computed(() => {
+        const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
+        return [
+          prefixCls,
+          `justify-${align}`,
+          {
+            [`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
+            [`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
+          },
+        ];
+      });
+
+      const getInlineCollapseOptions = computed(() => {
+        const isInline = props.mode === MenuModeEnum.INLINE;
+
+        const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
+        if (isInline) {
+          inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
+        }
+        return inlineCollapseOptions;
+      });
+
+      listenerRouteChange((route) => {
+        if (route.name === REDIRECT_NAME) return;
+        handleMenuChange(route);
+        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
+
+        if (unref(currentActiveMenu)) {
+          menuState.selectedKeys = [unref(currentActiveMenu)];
+          setOpenKeys(unref(currentActiveMenu));
+        }
+      });
+
+      !props.mixSider &&
+        watch(
+          () => props.items,
+          () => {
+            handleMenuChange();
+          }
+        );
+
+      //update-begin-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+      async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
+        const { beforeClickFn } = props;
+        // update-begin--author:liaozhiyang---date:20240402---for:【QQYUN-8773】配置外部网址在顶部菜单模式和搜索打不开
+        if (isUrl(key)) {
+          key = key.replace(URL_HASH_TAB, '#');
+          window.open(key);
+          return;
+        }
+        // update-end--author:liaozhiyang---date:20240402---for:【QQYUN-8773】配置外部网址在顶部菜单模式和搜索打不开
+        if (beforeClickFn && isFunction(beforeClickFn)) {
+          const flag = await beforeClickFn(key);
+          if (!flag) return;
+        }
+        // update-begin--author:liaozhiyang---date:20240418---for:【QQYUN-8773】顶部混合导航(顶部左侧组合菜单)一级菜单没有配置redirect默认跳子菜单的第一个
+        if (props.type === MenuTypeEnum.MIX) {
+          const menus = await getMenus();
+          const menuItem = getMatchingPath(menus, key);
+          if (menuItem && !menuItem.redirect && menuItem.children?.length) {
+            const subMenuItem = getSubMenu(menuItem.children);
+            if (subMenuItem?.path) {
+              const path = subMenuItem.redirect ?? subMenuItem.path;
+              let _key = path;
+              if (isUrl(path)) {
+                window.open(path);
+                // 外部打开emit出去的key不能是url，否则左侧菜单出不来
+                _key = key;
+              }
+              emit('menuClick', _key, { title: subMenuItem.title });
+            } else {
+              emit('menuClick', key, item);
+            }
+          } else {
+            emit('menuClick', key, item);
+          }
+        } else {
+          emit('menuClick', key, item);
+        }
+        // emit('menuClick', key, item);
+        // update-begin--author:liaozhiyang---date:20240418---for:【QQYUN-8773】顶部混合导航(顶部左侧组合菜单)一级菜单没有配置redirect默认跳子菜单的第一个
+        //update-end-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后，打开菜单，显示名称未展示为菜单名称
+
+        isClickGo.value = true;
+        // const parentPath = await getCurrentParentPath(key);
+
+        // menuState.openKeys = [parentPath];
+        menuState.selectedKeys = [key];
+      }
+
+      async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
+        if (unref(isClickGo)) {
+          isClickGo.value = false;
+          return;
+        }
+        const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
+        setOpenKeys(path);
+        if (unref(currentActiveMenu)) return;
+        if (props.isHorizontal && unref(getSplit)) {
+          const parentPath = await getCurrentParentPath(path);
+          menuState.selectedKeys = [parentPath];
+        } else {
+          const parentPaths = await getAllParentPath(props.items, path);
+          menuState.selectedKeys = parentPaths;
+        }
+      }
+      /**
+       * liaozhiyang
+       * 2024-05-18
+       * 获取指定菜单下的第一个菜单
+       */
+      function getSubMenu(menus) {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path && !item.children?.length) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getSubMenu(item.children);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return null;
+      }
+
+      /**
+       * liaozhiyang
+       * 2024-05-18
+       * 获取匹配path的菜单
+       */
+      function getMatchingPath(menus, path) {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path) {
+            return item;
+          } else if (item.children?.length) {
+            const result = getMatchingPath(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return null;
+      }
+
+      return {
+        handleMenuClick,
+        getInlineCollapseOptions,
+        getMenuClass,
+        handleOpenChange,
+        getOpenKeys,
+        ...toRefs(menuState),
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import './index.less';
+</style>

jeecgboot-vue3/src/components/Menu/src/components/BasicMenuItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <MenuItem :key="item.path" :title="item.title">
+    <MenuItemContent v-bind="$props" :item="item" />
+  </MenuItem>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { itemProps } from '../props';
+
+  import MenuItemContent from './MenuItemContent.vue';
+  export default defineComponent({
+    name: 'BasicMenuItem',
+    components: { MenuItem: Menu.Item, MenuItemContent },
+    props: itemProps,
+    setup() {
+      return {};
+    },
+  });
+</script>

jeecgboot-vue3/src/components/Menu/src/components/BasicSubMenuItem.vue

@@ -0,0 +1,134 @@
+<template>
+  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
+  <SubMenu v-if="menuHasChildren(item) && getShowMenu" :class="[theme]" :key="`submenu-${item.path}`" :popupClassName="prefixCls">
+    <template #title>
+      <MenuItemContent v-bind="$props" :item="item" />
+    </template>
+
+    <template v-for="childrenItem in item.children || []" :key="childrenItem.path">
+      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
+    </template>
+  </SubMenu>
+</template>
+<script lang="ts">
+  import type { Menu as MenuType } from '/@/router/types';
+  import { defineComponent, computed, watch } from 'vue';
+  import { Menu } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { checkChildrenHidden } from '/@/utils/common/compUtils';
+  import { itemProps } from '../props';
+  import BasicMenuItem from './BasicMenuItem.vue';
+  import MenuItemContent from './MenuItemContent.vue';
+  import { useBasicRootMenuContext } from '../useBasicMenuContext';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  import { getMenus } from '/@/router/menus';
+  
+  export default defineComponent({
+    name: 'BasicSubMenuItem',
+    isSubMenu: true,
+    components: {
+      BasicMenuItem,
+      SubMenu: Menu.SubMenu,
+      MenuItemContent,
+    },
+    props: itemProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-subMenu');
+      const { menuState } = useBasicRootMenuContext();
+      const localeStore = useLocaleStore();
+      
+      const getShowMenu = computed(() => !props.item.meta?.hideMenu);
+      function menuHasChildren(menuTreeItem: MenuType): boolean {
+        return (
+          !menuTreeItem.meta?.hideChildrenInMenu &&
+          Reflect.has(menuTreeItem, 'children') &&
+          !!menuTreeItem.children &&
+          menuTreeItem.children.length > 0
+          &&checkChildrenHidden(menuTreeItem)
+        );
+      }
+      // update-begin--author:liaozhiyang---date:20230326---for：【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      const getMatchingRouterName = (menus, path) => {
+        for (let i = 0, len = menus.length; i < len; i++) {
+          const item = menus[i];
+          if (item.path === path && !item.redirect && !item.paramPath) {
+            return item.meta?.title;
+          } else if (item.children?.length) {
+            const result = getMatchingRouterName(item.children, path);
+            if (result) {
+              return result;
+            }
+          }
+        }
+        return '';
+      };
+
+      watch(
+        () => menuState.selectedKeys,
+        async (value) => {
+          if (value.length && value.includes(props.item.path)) {
+            const menus = await getMenus();
+            const getTitle = getMatchingRouterName(menus, props.item.path);
+            localeStore.setPathTitle(props.item.path, getTitle ? getTitle : props.item.name);
+          }
+        },
+        { immediate: true }
+      );
+      // update-end--author:liaozhiyang---date:20230326---for：【QQYUN-8691】顶部菜单模式online不显示菜单名显示默认的auto在线表单
+      return {
+        prefixCls,
+        menuHasChildren,
+        checkChildrenHidden,
+        getShowMenu,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部模式下拉菜单颜色统一
+  @prefix-cls: ~'@{namespace}-basic-subMenu';
+  html[data-theme='light'] {
+    .@{prefix-cls}.ant-menu-dark {
+      background-color: var(--header-bg-color);
+      color: rgba(255, 255, 255, 0.9);
+      &.ant-menu-submenu {
+        > .ant-menu {
+          background-color: var(--header-bg-color);
+        }
+      }
+      .ant-menu-item-selected {
+        background-color: var(--header-active-menu-bg-color);
+      }
+    }
+    //【QQYUN-8922】顶部导航三个点菜单样式调整
+    .ant-menu-submenu-placement-bottomLeft.ant-menu-dark.ant-menu-submenu-popup {
+      background-color: var(--header-bg-color);
+      &.ant-menu-dark.ant-menu-submenu > .ant-menu {
+        background-color: var(--header-bg-color);
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部模式下拉菜单颜色统一
+  // update-begin--author:liaozhiyang---date:20240429---for：【QQYUN-9128】暗黑主题顶部模式下拉菜单颜色统一
+  html[data-theme='dark'] {
+    @bgcolor:#212121;
+    .@{prefix-cls}.ant-menu-dark {
+      background-color: @bgcolor;
+      &.ant-menu-submenu {
+        > .ant-menu {
+          background-color: @bgcolor;
+        }
+      }
+    }
+    //【QQYUN-8922】顶部导航三个点菜单样式调整
+    .ant-menu-submenu-placement-bottomLeft.ant-menu-dark.ant-menu-submenu-popup {
+      background-color: @bgcolor;
+      &.ant-menu-dark.ant-menu-submenu > .ant-menu {
+        background-color: @bgcolor;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+  // update-end--author:liaozhiyang---date:20240429---for：【QQYUN-9128】暗黑主题顶部模式下拉菜单颜色统一
+</style>

jeecgboot-vue3/src/components/Menu/src/components/MenuItemContent.vue

@@ -0,0 +1,34 @@
+<template>
+  <span :class="`${prefixCls}- flex items-center `">
+    <Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
+    {{ getI18nName }}
+  </span>
+</template>
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+
+  import Icon from '/@/components/Icon/index';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { contentProps } from '../props';
+  const { t } = useI18n();
+
+  export default defineComponent({
+    name: 'MenuItemContent',
+    components: {
+      Icon,
+    },
+    props: contentProps,
+    setup(props) {
+      const { prefixCls } = useDesign('basic-menu-item-content');
+      const getI18nName = computed(() => t(props.item?.name));
+      const getIcon = computed(() => props.item?.icon);
+
+      return {
+        prefixCls,
+        getI18nName,
+        getIcon,
+      };
+    },
+  });
+</script>

jeecgboot-vue3/src/components/Menu/src/index.less

@@ -0,0 +1,76 @@
+@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
+
+.app-top-menu-popup {
+  min-width: 150px;
+}
+
+.@{basic-menu-prefix-cls} {
+  width: 100%;
+
+  .ant-menu-item {
+    transition: unset;
+  }
+
+  &__sidebar-hor {
+    &.ant-menu-horizontal {
+      display: flex;
+      align-items: center;
+
+      &.ant-menu-dark {
+        background-color: transparent;
+        // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
+        color: rgba(255 ,255 ,255, 1);
+        // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
+        .ant-menu-submenu:hover,
+        .ant-menu-item-open,
+        .ant-menu-submenu-open,
+        .ant-menu-item-selected,
+        .ant-menu-submenu-selected,
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          color: #fff;
+          background-color: @top-menu-active-bg-color !important;
+        }
+
+        .ant-menu-item:hover,
+        .ant-menu-item-active,
+        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+        .ant-menu-submenu-active,
+        .ant-menu-submenu-title:hover {
+          background-color: @top-menu-active-bg-color;
+        }
+
+        .@{basic-menu-prefix-cls}-item__level1 {
+          background-color: transparent;
+
+          &.ant-menu-item-selected,
+          &.ant-menu-submenu-selected {
+            background-color: @top-menu-active-bg-color !important;
+          }
+        }
+
+        .ant-menu-item,
+        .ant-menu-submenu {
+          &.@{basic-menu-prefix-cls}-item__level1,
+          .ant-menu-submenu-title {
+            height: @header-height;
+            line-height: @header-height;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-menu-submenu,
+  .ant-menu-submenu-inline {
+    transition: unset;
+  }
+
+  .ant-menu-inline.ant-menu-sub {
+    box-shadow: unset !important;
+    transition: unset;
+  }
+}

jeecgboot-vue3/src/components/Menu/src/props.ts

@@ -0,0 +1,60 @@
+import type { Menu } from '/@/router/types';
+import type { PropType } from 'vue';
+
+import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { propTypes } from '/@/utils/propTypes';
+import type { MenuTheme } from 'ant-design-vue';
+import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
+export const basicProps = {
+  items: {
+    type: Array as PropType<Menu[]>,
+    default: () => [],
+  },
+  collapsedShowTitle: propTypes.bool,
+  // 最好是4 倍数
+  inlineIndent: propTypes.number.def(20),
+  // 菜单组件的mode属性
+  mode: {
+    type: String as PropType<MenuMode>,
+    default: MenuModeEnum.INLINE,
+  },
+
+  type: {
+    type: String as PropType<MenuTypeEnum>,
+    default: MenuTypeEnum.MIX,
+  },
+  theme: {
+    type: String as PropType<MenuTheme>,
+    default: ThemeEnum.DARK,
+  },
+  inlineCollapsed: propTypes.bool,
+  mixSider: propTypes.bool,
+
+  isHorizontal: propTypes.bool,
+  accordion: propTypes.bool.def(true),
+  beforeClickFn: {
+    type: Function as PropType<(key: string) => Promise<boolean>>,
+  },
+};
+
+export const itemProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: {},
+  },
+  level: propTypes.number,
+  theme: propTypes.oneOf(['dark', 'light']),
+  showTitle: propTypes.bool,
+  isHorizontal: propTypes.bool,
+};
+
+export const contentProps = {
+  item: {
+    type: Object as PropType<Menu>,
+    default: null,
+  },
+  showTitle: propTypes.bool.def(true),
+  level: propTypes.number.def(0),
+  isHorizontal: propTypes.bool.def(true),
+};

jeecgboot-vue3/src/components/Menu/src/types.ts

@@ -0,0 +1,25 @@
+// import { ComputedRef } from 'vue';
+// import { ThemeEnum } from '/@/enums/appEnum';
+// import { MenuModeEnum } from '/@/enums/menuEnum';
+export interface MenuState {
+  // 默认选中的列表
+  defaultSelectedKeys: string[];
+
+  // 模式
+  // mode: MenuModeEnum;
+
+  // // 主题
+  // theme: ComputedRef<ThemeEnum> | ThemeEnum;
+
+  // 缩进
+  inlineIndent?: number;
+
+  // 展开数组
+  openKeys: string[];
+
+  // 当前选中的菜单项 key 数组
+  selectedKeys: string[];
+
+  // 收缩状态下展开的数组
+  collapsedOpenKeys: string[];
+}

jeecgboot-vue3/src/components/Menu/src/useBasicMenuContext.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface BasicRootMenuContextProps {
+  menuState: any;
+}
+
+const key: InjectionKey<BasicRootMenuContextProps> = Symbol();
+
+export function createBasicRootMenuContext(context: BasicRootMenuContextProps) {
+  return createContext<BasicRootMenuContextProps>(context, key, { readonly: false, native: true });
+}
+
+export function useBasicRootMenuContext() {
+  return useContext<BasicRootMenuContextProps>(key);
+}

jeecgboot-vue3/src/components/Menu/src/useOpenKeys.ts

@@ -0,0 +1,78 @@
+import { MenuModeEnum } from '/@/enums/menuEnum';
+import type { Menu as MenuType } from '/@/router/types';
+import type { MenuState } from './types';
+
+import { computed, Ref, toRaw } from 'vue';
+
+import { unref } from 'vue';
+import { uniq } from 'lodash-es';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { getAllParentPath } from '/@/router/helper/menuHelper';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+
+export function useOpenKeys(menuState: MenuState, menus: Ref<MenuType[]>, mode: Ref<MenuModeEnum>, accordion: Ref<boolean>) {
+  const { getCollapsed, getIsMixSidebar } = useMenuSetting();
+
+  async function setOpenKeys(path: string) {
+    if (mode.value === MenuModeEnum.HORIZONTAL) {
+      return;
+    }
+    const native = unref(getIsMixSidebar);
+    useTimeoutFn(
+      () => {
+        const menuList = toRaw(menus.value);
+        if (menuList?.length === 0) {
+          menuState.openKeys = [];
+          return;
+        }
+        if (!unref(accordion)) {
+          menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
+        } else {
+          menuState.openKeys = getAllParentPath(menuList, path);
+        }
+      },
+      16,
+      !native
+    );
+  }
+
+  const getOpenKeys = computed(() => {
+    const collapse = unref(getIsMixSidebar) ? false : unref(getCollapsed);
+
+    return collapse ? menuState.collapsedOpenKeys : menuState.openKeys;
+  });
+
+  /**
+   * @description:  重置值
+   */
+  function resetKeys() {
+    menuState.selectedKeys = [];
+    menuState.openKeys = [];
+  }
+
+  function handleOpenChange(openKeys: string[]) {
+    if (unref(mode) === MenuModeEnum.HORIZONTAL || !unref(accordion) || unref(getIsMixSidebar)) {
+      menuState.openKeys = openKeys;
+    } else {
+      // const menuList = toRaw(menus.value);
+      // getAllParentPath(menuList, path);
+      const rootSubMenuKeys: string[] = [];
+      for (const { children, path } of unref(menus)) {
+        if (children && children.length > 0) {
+          rootSubMenuKeys.push(path);
+        }
+      }
+      if (!unref(getCollapsed)) {
+        const latestOpenKey = openKeys.find((key) => menuState.openKeys.indexOf(key) === -1);
+        if (rootSubMenuKeys.indexOf(latestOpenKey as string) === -1) {
+          menuState.openKeys = openKeys;
+        } else {
+          menuState.openKeys = latestOpenKey ? [latestOpenKey] : [];
+        }
+      } else {
+        menuState.collapsedOpenKeys = openKeys;
+      }
+    }
+  }
+  return { setOpenKeys, resetKeys, getOpenKeys, handleOpenChange };
+}