fix(menu): fix the calculation error of the top menu width

src/layouts/default/header/LayoutHeader.tsx

@@ -8,6 +8,8 @@ import {
   unref,
   computed,
   ref,
+  nextTick,
+  watchEffect,
   // nextTick
 } from 'vue';
 
@@ -30,7 +32,7 @@ import { useModal } from '/@/components/Modal';
 
 import { useFullscreen } from '/@/hooks/web/useFullScreen';
 import { useTabs } from '/@/hooks/web/useTabs';
-// import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
@@ -68,9 +70,9 @@ export default defineComponent({
     fixed: propTypes.bool,
   },
   setup(props) {
-    // let logoEl: Element | null | undefined;
+    let logoEl: Element | null | undefined;
 
-    // const logoWidthRef = ref(200);
+    const logoWidthRef = ref(200);
     const logoRef = ref<ComponentRef>(null);
 
     const injectValue = useLayoutContext();
@@ -78,7 +80,13 @@ export default defineComponent({
     const { refreshPage } = useTabs();
     const { t } = useI18n();
 
-    const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();
+    const {
+      getShowTopMenu,
+      getShowHeaderTrigger,
+      getSplit,
+      getTopMenuAlign,
+      getIsHorizontal,
+    } = useMenuSetting();
 
     const { getShowLocale } = useLocaleSetting();
     const { getUseErrorHandle, getShowBreadCrumbIcon } = useRootSetting();
@@ -98,22 +106,13 @@ export default defineComponent({
     const [register, { openModal }] = useModal();
     const { toggleFullscreen, isFullscreenRef } = useFullscreen();
 
-    // useWindowSizeFn(
-    //   () => {
-    //     nextTick(() => {
-    //       if (!unref(getShowTopMenu)) return;
-    //       let width = 0;
-    //       if (!logoEl) {
-    //         logoEl = unref(logoRef)?.$el;
-    //       } else {
-    //         width += logoEl.clientWidth;
-    //       }
-    //       logoWidthRef.value = width + 80;
-    //     });
-    //   },
-    //   200,
-    //   { immediate: true }
-    // );
+    useWindowSizeFn(
+      () => {
+        calcTopMenuWidth();
+      },
+      100,
+      { immediate: false }
+    );
 
     const headerClass = computed(() => {
       const theme = unref(getHeaderTheme);
@@ -132,6 +131,25 @@ export default defineComponent({
       return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
     });
 
+    watchEffect(() => {
+      if (unref(getIsHorizontal)) {
+        calcTopMenuWidth();
+      }
+    });
+
+    function calcTopMenuWidth() {
+      nextTick(() => {
+        if (!unref(getShowTopMenu)) return;
+        let width = 0;
+        if (!logoEl) {
+          logoEl = unref(logoRef)?.$el;
+        }
+        if (!logoEl) return;
+        width += logoEl.clientWidth;
+        logoWidthRef.value = width + 80;
+      });
+    }
+
     function handleToErrorList() {
       push(PageEnum.ERROR_LOG_PAGE).then(() => {
         errorStore.commitErrorListCountState(0);
@@ -143,7 +161,7 @@ export default defineComponent({
     }
 
     function renderHeaderContent() {
-      // const width = unref(logoWidthRef);
+      const width = unref(logoWidthRef);
       return (
         <div class="layout-header__content ">
           {unref(getShowHeaderLogo) && (
@@ -162,8 +180,8 @@ export default defineComponent({
           )}
 
           {unref(getShowTopMenu) && unref(isPc) && (
-            // <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
-            <div class={[`layout-header__menu `]}>
+            <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
+              {/* <div class={[`layout-header__menu `]}> */}
               <LayoutMenu
                 isHorizontal={true}
                 class={`justify-${unref(getTopMenuAlign)}`}