perf(PageWrapper): fix the height calculation problem when footer and global…

perf(PageWrapper): fix the height calculation problem when footer and global footer are opened at the same time (#760)

* perf(PageWrapper): 优化PageWrapper在page的footer与全局页脚同时开启时的高度计算表现。

* docs(PageWrapper): 修复footer与全局页脚同时开启时的高度计算问题

Co-authored-by: NorthLan <lan6995@gmail.com>

CHANGELOG.zh_CN.md

@@ -18,6 +18,7 @@
 - **PageWrapper** 修复高度计算问题
 - **FlowChart** 修复拖放菜单丢失
 - 修复后台模式下，Iframe 路由错误
+- **PageWrapper** 修复 footer 与全局页脚同时开启时的高度计算问题
 
 ## 2.4.2(2021-06-10)
 

src/components/Page/src/PageWrapper.vue

@@ -96,7 +96,6 @@
           ...contentStyle,
           minHeight: height,
           ...(fixedHeight ? { height } : {}),
-          paddingBottom: `${unref(footerHeight)}px`,
         };
       });
 
@@ -166,7 +165,36 @@
           const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
           subtractHeight += contentMarginTop;
         }
-        setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight);
+
+        // fix: wrapper marginTop and marginBottom value
+        let wrapperSubtractHeight = 0;
+        let wrapperMarginBottom = ZERO_PX;
+        let wrapperMarginTop = ZERO_PX;
+        const wrapperClassElments = document.querySelectorAll(`.${prefixVar}-page-wrapper`);
+        if (wrapperClassElments && wrapperClassElments.length > 0) {
+          const contentEl = wrapperClassElments[0];
+          const cssStyle = getComputedStyle(contentEl);
+          wrapperMarginBottom = cssStyle?.marginBottom ?? ZERO_PX;
+          wrapperMarginTop = cssStyle?.marginTop ?? ZERO_PX;
+        }
+        if (wrapperMarginBottom) {
+          const contentMarginBottom = Number(wrapperMarginBottom.replace(/[^\d]/g, ''));
+          wrapperSubtractHeight += contentMarginBottom;
+        }
+        if (wrapperMarginTop) {
+          const contentMarginTop = Number(wrapperMarginTop.replace(/[^\d]/g, ''));
+          wrapperSubtractHeight += contentMarginTop;
+        }
+        let height =
+          unref(contentHeight) -
+          unref(footerHeight) -
+          headerHeight -
+          subtractHeight -
+          wrapperSubtractHeight;
+        if (unref(getShowFooter)) {
+          height -= unref(footerHeightRef);
+        }
+        setPageHeight?.(height);
       }
 
       return {

src/layouts/default/footer/index.vue

 <template>
-  <Footer :class="prefixCls" v-if="getShowLayoutFooter">
+  <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
     <div :class="`${prefixCls}__links`">
       <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>