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

CHANGELOG.zh_CN.md

@@ -20,12 +20,15 @@
 
 - 首屏 loading 修改
 - 升级`vue`到`3.0.4`
+- 升级`ant-design-vue`到`2.0.0-rc.3`
+- 重新引入`vueuse`
 - 移除 route meta 内的`afterCloseLoading`属性
 
 ### 🐛 Bug Fixes
 
 - 修复表格 i18n 错误
 - 修复菜单图标大小不一致
+- 修复顶部菜单宽度计算问题
 
 ## 2.0.0-rc.12 (2020-11-30)
 

package.json

@@ -22,7 +22,8 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
-    "ant-design-vue": "^2.0.0-rc.2",
+    "@vueuse/core": "^4.0.0-rc.6",
+    "ant-design-vue": "^2.0.0-rc.3",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "crypto-es": "^1.2.6",

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)}`}

yarn.lock

@@ -1928,6 +1928,21 @@
     vscode-languageserver-textdocument "^1.0.1"
     vscode-uri "^2.1.2"
 
+"@vueuse/core@^4.0.0-rc.6":
+  version "4.0.0-rc.6"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.0.0-rc.6.tgz#510cbeb98123a179586aa9becd9f5f84639a1fa2"
+  integrity sha512-06Evdrbi46DM+Pp1b4pyhFEx9/3LbHs36sYdehoth1FQdzFDrMHiBMlb/Qx2ePjPoQ796GTqC+COyk22mmkSyA==
+  dependencies:
+    "@vueuse/shared" "4.0.0-rc.6"
+    vue-demi latest
+
+"@vueuse/shared@4.0.0-rc.6":
+  version "4.0.0-rc.6"
+  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-4.0.0-rc.6.tgz#d707ffb291e481f2ce0aa4c7cfcb7756c82d718d"
+  integrity sha512-GMaxHfskamFz+kziEYLWoOt7iqeFIq0KIKg+Vb3VS3lCXCzeGMvDZFYFK4HGB2blOcblUD4oZLa06za8pHgFzg==
+  dependencies:
+    vue-demi latest
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -2038,10 +2053,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ant-design-vue@^2.0.0-rc.2:
-  version "2.0.0-rc.2"
-  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.2.tgz#fd3b4a5a64fccbb53ed488a194317a040de2223e"
-  integrity sha512-XA7X/7HHIveiTh41bZWGfoQ2Rys/rqWknK2zzdHwVnfw9ST3v+ciMKH0Uegyn7m14QL/EdUkC8zGsXpiSXqKNQ==
+ant-design-vue@^2.0.0-rc.3:
+  version "2.0.0-rc.3"
+  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.3.tgz#22f81d0fc495d2aeff343925d5750e0e34106f86"
+  integrity sha512-dz7VOfxJZIHy7xCrMDBV8zYaVOyeuAFAxewWZy0StCWpbILqQWynb9sK4Nseh3N5ZMFPOD/e8FFiA9cXdNtEyw==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
     "@ant-design/icons-vue" "^5.1.6"
@@ -8397,6 +8412,11 @@ vscode-uri@^2.1.2:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c"
   integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==
 
+vue-demi@latest:
+  version "0.4.5"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.4.5.tgz#ea422a4468cb6321a746826a368a770607f87791"
+  integrity sha512-51xf1B6hV2PfjnzYHO/yUForFCRQ49KS8ngQb5T6l1HDEmfghTFtsxtRa5tbx4eqQsH76ll/0gIxuf1gei0ubw==
+
 vue-eslint-parser@^7.2.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.2.0.tgz#1e17ae94ca71e617025e05143c8ac5593aacb6ef"