fix: table height calc when fullcontent and footer visible change (#3392)

* fix: table height calc when fullcontent and footer visible change

* fix: useRootSetting dep path wrong

src/components/Table/src/hooks/useTableScroll.ts

@@ -4,7 +4,16 @@ import { getViewportOffset } from '@/utils/domUtils';
 import { isBoolean } from '@/utils/is';
 import { useWindowSizeFn, onMountedOrActivated } from '@vben/hooks';
 import { useModalContext } from '@/components/Modal';
-import { useDebounceFn } from '@vueuse/core';
+import { useDebounceFn, promiseTimeout } from '@vueuse/core';
+
+import {
+  footerHeight as layoutFooterHeight,
+  layoutMultipleHeadePlaceholderTime,
+} from '@/settings/designSetting';
+
+import { useRootSetting } from '@/hooks/setting/useRootSetting';
+
+const { getShowFooter, getFullContent } = useRootSetting();
 
 export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
@@ -27,7 +36,7 @@ export function useTableScroll(
   });
 
   watch(
-    () => [unref(getCanResize), unref(getDataSourceRef)?.length],
+    () => [unref(getCanResize), unref(getDataSourceRef)?.length, unref(getShowFooter)],
     () => {
       debounceRedoHeight();
     },
@@ -36,6 +45,18 @@ export function useTableScroll(
     },
   );
 
+  watch(
+    () => [unref(getFullContent)],
+    async () => {
+      // 等待动画结束后200毫秒
+      await promiseTimeout(layoutMultipleHeadePlaceholderTime * 1000 + 200);
+      debounceRedoHeight();
+    },
+    {
+      flush: 'post',
+    },
+  );
+
   function redoHeight() {
     nextTick(() => {
       calcTableHeight();
@@ -191,7 +212,10 @@ export function useTableScroll(
       paddingHeight -
       paginationHeight -
       footerHeight -
-      headerHeight;
+      headerHeight -
+      (getShowFooter.value ? layoutFooterHeight : 0) -
+      // 取高度ceil值
+      1;
     height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
     setHeight(height);
 

src/layouts/default/footer/index.vue

@@ -53,6 +53,8 @@
   @hover-color: rgba(0, 0, 0, 0.85);
 
   .@{prefix-cls} {
+    // 页脚固定高度
+    height: 75px;
     color: @normal-color;
     text-align: center;
 

src/settings/designSetting.ts

@@ -6,6 +6,13 @@ export const multipleTabHeight = 30;
 
 export const darkMode = ThemeEnum.LIGHT;
 
+// 页脚固定高度
+export const footerHeight = 75;
+
+// .@{namespace}-layout-multiple-header__placeholder
+// 全屏页头动画时长
+export const layoutMultipleHeadePlaceholderTime = 0.6;
+
 // app theme preset color
 export const APP_PRESET_COLOR_LIST: string[] = [
   '#0960bd',