fix: 横向和混合布局切换国际化后的菜单溢出、菜单隐藏

src/hooks/useMneuMethod.ts

@@ -0,0 +1,28 @@
+/**
+ * 菜单处理hooks，内置多种菜单处理场景
+ * @returns 菜单处理方法
+ */
+export const useMneuMethod = () => {
+  /**
+   * 多级菜单的显示隐藏
+   * @param {Menu.MenuOptions} item 菜单的item
+   * @returns 若多级菜单有children，并且不隐藏，返回true，否则返回false
+   */
+  const menuShow = (item: Menu.MenuOptions) => {
+    if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
+    return false;
+  };
+  /**
+   * 单级菜单的显示隐藏
+   * @param {Menu.MenuOptions} item 菜单的item
+   * @returns 若单级菜单不隐藏，返回true，否则返回false
+   */
+  const aMenuShow = (item: Menu.MenuOptions) => {
+    if (!item.meta.hide) return true;
+    return false;
+  };
+  return {
+    menuShow,
+    aMenuShow
+  };
+};

src/layout/components/Menu/menu-item.vue

@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "MenuItem", inheritAttrs: false });
 
 interface Props {
@@ -30,16 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   routeTree: () => []
 });
 
-// 父级菜单
-const menuShow = (item: Menu.MenuOptions) => {
-  if (item.children && item.children?.length > 0 && !item.meta.hide) return true;
-  return false;
-};
-// 单级菜单
-const aMenuShow = (item: Menu.MenuOptions) => {
-  if (!item.meta.hide) return true;
-  return false;
-};
+const { menuShow, aMenuShow } = useMneuMethod();
 </script>
 
 <style lang="scss" scoped></style>

src/layout/components/Tabs/index.vue

@@ -90,10 +90,10 @@ const refresh = () => {
   const themeStore = useThemeConfig();
   themeStore.setRefreshPage(false);
   currentRoute.value.meta.keepAlive && routerStore.removeRouteName(currentRoute.value.name);
-  setTimeout(() => {
+  nextTick(() => {
     themeStore.setRefreshPage(true);
     currentRoute.value.meta.keepAlive && routerStore.setRouteNames(currentRoute.value.name);
-  }, 0);
+  });
 };
 
 // 关闭当前

src/layout/layout-head/index.vue

@@ -5,17 +5,23 @@
         <div class="header-logo">
           <Logo />
         </div>
-
-        <a-menu mode="horizontal" :selected-keys="[currentRoute.name]" @menu-item-click="onMenuItem">
+        <div class="layout-head-menu">
+          <a-menu
+            v-if="drawing"
+            mode="horizontal"
+            :selected-keys="[currentRoute.name]"
+            @menu-item-click="onMenuItem"
+            :popup-max-height="600"
+          >
             <template v-for="item in routeTree" :key="item.name">
-            <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
+              <a-sub-menu v-if="menuShow(item)" :key="item.name" :popup-max-height="600">
                 <template #icon v-if="item.meta.svgIcon || item.meta.icon">
                   <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
                 </template>
                 <template #title>{{ $t(`language.${item.meta.title}`) }}</template>
                 <MenuItem :route-tree="item.children" />
               </a-sub-menu>
-            <a-menu-item v-else :key="item?.name">
+              <a-menu-item v-else-if="aMenuShow(item)" :key="item?.name">
                 <template #icon v-if="item.meta.svgIcon || item.meta.icon">
                   <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
                 </template>
@@ -23,6 +29,8 @@
               </a-menu-item>
             </template>
           </a-menu>
+        </div>
+
         <HeaderRight />
       </a-layout-header>
       <Main />
@@ -43,12 +51,21 @@ import { storeToRefs } from "pinia";
 import { useRoutesListStore } from "@/store/modules/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "LayoutHead" });
 const router = useRouter();
 const routerStore = useRoutesListStore();
 const themeStore = useThemeConfig();
 const { routeTree, currentRoute } = storeToRefs(routerStore);
-const { isFooter } = storeToRefs(themeStore);
+const { isFooter, language } = storeToRefs(themeStore);
+
+const { menuShow, aMenuShow } = useMneuMethod();
+
+const drawing = ref<boolean>(true);
+watch(language, () => {
+  drawing.value = false;
+  nextTick(() => (drawing.value = true));
+});
 
 /**
  * @description 菜单点击事件
@@ -79,15 +96,20 @@ const onMenuItem = (key: string) => {
 .header {
   padding: 0 $padding;
   height: 60px;
+  width: 100%;
   box-sizing: border-box;
   border-bottom: $border-1 solid $color-border-2;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   overflow: hidden;
   .header-logo {
     max-width: 180px;
   }
+  .layout-head-menu {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
 }
 
 :deep(.arco-menu-pop) {

src/layout/layout-mixing/index.vue

@@ -16,15 +16,24 @@
             </template>
           </a-button>
         </div>
-
-        <a-menu mode="horizontal" :selected-keys="[aciveRoute]" @menu-item-click="onMenuItem">
-          <a-menu-item v-for="item in routeTree" :key="item.name">
+        <div class="layout-head-menu">
+          <a-menu
+            v-if="drawing"
+            mode="horizontal"
+            :selected-keys="[aciveRoute]"
+            @menu-item-click="onMenuItem"
+            :popup-max-height="600"
+          >
+            <template v-for="item in routeTree" :key="item.name">
+              <a-menu-item v-if="aMenuShow(item)" :key="item.name" :popup-max-height="600">
                 <template #icon v-if="item.meta.svgIcon || item.meta.icon">
                   <MenuItemIcon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
                 </template>
                 <span>{{ $t(`language.${item.meta.title}`) }}</span>
               </a-menu-item>
+            </template>
           </a-menu>
+        </div>
         <HeaderRight />
       </a-layout-header>
       <Main />
@@ -45,21 +54,27 @@ import { useRoutesListStore } from "@/store/modules/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
+import { useMneuMethod } from "@/hooks/useMneuMethod";
 defineOptions({ name: "LayoutMixing" });
 const route = useRoute();
 const router = useRouter();
 const routerStore = useRoutesListStore();
 const themeStore = useThemeConfig();
-const { isFooter, collapsed, asideDark } = storeToRefs(themeStore);
+const { isFooter, collapsed, asideDark, language } = storeToRefs(themeStore);
 const { routeTree } = storeToRefs(routerStore);
+const { aMenuShow } = useMneuMethod();
+
+const drawing = ref<boolean>(true);
+watch(language, () => {
+  drawing.value = false;
+  nextTick(() => (drawing.value = true));
+});
 
 // 折叠
 const onCollapsed = () => {
   themeStore.setCollapsed(!collapsed.value);
 };
 
-console.log("路由信息", route);
-
 // 由于刷新后，路由信息丢失，所以需要重新获取
 // 混合布局的横向菜单为顶层路由下的一级菜单
 // 这里通过当前路由信息直接获取
@@ -181,6 +196,11 @@ const getAsideMenu = (key: string) => {
       }
     }
   }
+  .layout-head-menu {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
 }
 
 :deep(.arco-menu-pop) {

src/router/route.ts

@@ -533,7 +533,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       {
         path: "/system-management",
         name: "system-management",
-        redirect: "/system-management/account management",
+        redirect: "/system-management/account-management",
         meta: {
           title: "system-management",
           hide: false,