From 20c15f352fbe62bcce4d2fe53d948b0848d1700a Mon Sep 17 00:00:00 2001 From: Jin Mao <50581550+jinmao88@users.noreply.github.com> Date: Tue, 29 Apr 2025 18:15:12 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20page=20componet=20supports=20custom=20h?= =?UTF-8?q?eight=20offset=20for=20flexible=20content=20height=20=E2=80=A6?= =?UTF-8?q?=20(#6081)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf: Page supports custom height offset for flexible content height control. 允许通过 height 属性调整页面内容高度计算。修改了 Page 组件以支持自定义高度偏移量,用于更灵活的内容高度控制。 * chore: typo * perf(page): replace height with heightOffset for flexible content sizing The `height` prop was replaced with `heightOffset` to better describe its purpose when used with `autoContentHeight`. The new prop allows custom offset values (in pixels) to adjust content area sizing, with clearer documentation. --- packages/effects/common-ui/src/components/page/page.vue | 5 +++-- packages/effects/common-ui/src/components/page/types.ts | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue index 6b95cdb3..c95a3b45 100644 --- a/packages/effects/common-ui/src/components/page/page.vue +++ b/packages/effects/common-ui/src/components/page/page.vue @@ -12,7 +12,8 @@ defineOptions({ name: 'Page', }); -const { autoContentHeight = false } = defineProps(); +const { autoContentHeight = false, heightOffset = 0 } = + defineProps(); const headerHeight = ref(0); const footerHeight = ref(0); @@ -24,7 +25,7 @@ const footerRef = useTemplateRef('footerRef'); const contentStyle = computed(() => { if (autoContentHeight) { return { - height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`, + height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`, overflowY: shouldAutoHeight.value ? 'auto' : 'unset', }; } diff --git a/packages/effects/common-ui/src/components/page/types.ts b/packages/effects/common-ui/src/components/page/types.ts index 5316d08d..c7331aed 100644 --- a/packages/effects/common-ui/src/components/page/types.ts +++ b/packages/effects/common-ui/src/components/page/types.ts @@ -8,4 +8,10 @@ export interface PageProps { autoContentHeight?: boolean; headerClass?: string; footerClass?: string; + /** + * Custom height offset value (in pixels) to adjust content area sizing + * when used with autoContentHeight + * @default 0 + */ + heightOffset?: number; }