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

de1f0062 · vben · 6da377da · de1f0062 · de1f0062 · de1f0062
--- a/CHANGELOG.zh_CN.md
+++ b/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)


--- a/package.json
+++ b/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",

--- a/src/layouts/default/header/LayoutHeader.tsx
+++ b/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)}`}

--- a/yarn.lock
+++ b/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"