294700a247
* fix: skip fixed footer height in auto-content-height calculation When the Page component's footer has position: fixed, it is removed from the normal document flow and should not be subtracted from the available content height. Previously, the footer's offsetHeight was always subtracted, causing incorrect height calculation for fixed footers. Also reset shouldAutoHeight before recalculating to prevent stale state on hot reload. Fixes #4576 * fix: replace getComputedStyle footer height check with footerFixed prop Use an explicit `footerFixed` boolean prop instead of runtime getComputedStyle detection to determine whether the footer height should be excluded from content height calculation. This avoids unreliable style queries and makes the behavior deterministic. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { StyleValue } from 'vue';
|
|
|
|
import type { PageProps } from './types';
|
|
|
|
import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
|
|
|
|
import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
|
|
import { cn } from '@vben-core/shared/utils';
|
|
|
|
defineOptions({
|
|
name: 'Page',
|
|
});
|
|
|
|
const { autoContentHeight = false, heightOffset = 0, footerFixed = false } =
|
|
defineProps<PageProps>();
|
|
|
|
const headerHeight = ref(0);
|
|
const footerHeight = ref(0);
|
|
const shouldAutoHeight = ref(false);
|
|
|
|
const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
|
|
const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
|
|
|
|
const contentStyle = computed<StyleValue>(() => {
|
|
if (autoContentHeight) {
|
|
return {
|
|
height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${footerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
|
|
overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
|
|
};
|
|
}
|
|
return {};
|
|
});
|
|
|
|
async function calcContentHeight() {
|
|
if (!autoContentHeight) {
|
|
return;
|
|
}
|
|
shouldAutoHeight.value = false;
|
|
await nextTick();
|
|
headerHeight.value = headerRef.value?.offsetHeight || 0;
|
|
|
|
footerHeight.value = footerFixed ? 0 : (footerRef.value?.offsetHeight || 0);
|
|
|
|
setTimeout(() => {
|
|
shouldAutoHeight.value = true;
|
|
}, 30);
|
|
}
|
|
|
|
onMounted(() => {
|
|
calcContentHeight();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative flex min-h-full flex-col">
|
|
<div
|
|
v-if="
|
|
description ||
|
|
$slots.description ||
|
|
title ||
|
|
$slots.title ||
|
|
$slots.extra
|
|
"
|
|
ref="headerRef"
|
|
:class="
|
|
cn(
|
|
'relative flex items-end border-b border-border bg-card px-6 py-4',
|
|
headerClass,
|
|
)
|
|
"
|
|
>
|
|
<div class="flex-auto">
|
|
<slot name="title">
|
|
<div v-if="title" class="mb-2 flex text-lg font-semibold">
|
|
{{ title }}
|
|
</div>
|
|
</slot>
|
|
|
|
<slot name="description">
|
|
<p v-if="description" class="text-muted-foreground">
|
|
{{ description }}
|
|
</p>
|
|
</slot>
|
|
</div>
|
|
|
|
<div v-if="$slots.extra">
|
|
<slot name="extra"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
|
|
<slot></slot>
|
|
</div>
|
|
<div
|
|
v-if="$slots.footer"
|
|
ref="footerRef"
|
|
:class="cn('align-center flex bg-card px-6 py-4', footerClass)"
|
|
>
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|