From 41252655826973d5b443c9e7d0dc1d6eb7a58d65 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 25 Apr 2025 21:42:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20DocAlert=20=E6=98=BE=E7=A4=BA=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E9=A1=B5=E9=9D=A2=E7=9A=84=E9=AB=98=E5=BA=A6=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E4=B8=8D=E5=87=86=E7=A1=AE=EF=BC=9A=E5=9C=A8=20page.v?=
 =?UTF-8?q?ue=20=E5=A2=9E=E5=8A=A0=20doc=20=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/role/index.vue |  3 +--
 .../common-ui/src/components/page/page.vue    | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index ad51d7847..12b5323c3 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -6,7 +6,6 @@ import type {
 import type { SystemRoleApi } from '#/api/system/role';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { isDocAlertEnable } from '@vben/hooks';
 import { Download, Plus } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
@@ -142,7 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <template #description v-if="isDocAlertEnable()">
+    <template #doc>
       <DocAlert
         title="功能权限"
         url="https://doc.iocoder.cn/resource-permission"
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index 6b95cdb3a..fe3f65a43 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -16,15 +16,17 @@ const { autoContentHeight = false } = defineProps<PageProps>();
 
 const headerHeight = ref(0);
 const footerHeight = ref(0);
+const docHeight = ref(0);
 const shouldAutoHeight = ref(false);
 
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
+const docRef = useTemplateRef<HTMLDivElement>('docRef');
 
 const contentStyle = computed<StyleValue>(() => {
   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 - ${docHeight.value}px)`,
       overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
     };
   }
@@ -38,11 +40,16 @@ async function calcContentHeight() {
   await nextTick();
   headerHeight.value = headerRef.value?.offsetHeight || 0;
   footerHeight.value = footerRef.value?.offsetHeight || 0;
+  docHeight.value = docRef.value?.offsetHeight || 0;
   setTimeout(() => {
     shouldAutoHeight.value = true;
   }, 30);
 }
 
+function isDocAlertEnable(): boolean {
+  return import.meta.env.VITE_APP_DOCALERT_ENABLE !== 'false';
+}
+
 onMounted(() => {
   calcContentHeight();
 });
@@ -50,6 +57,18 @@ onMounted(() => {
 
 <template>
   <div class="relative">
+    <div
+      v-if="$slots.doc && isDocAlertEnable()"
+      ref="docRef"
+      :class="
+        cn('bg-card border-border relative flex items-end border-b px-6 py-4')
+      "
+    >
+      <div class="flex-auto">
+        <slot name="doc"></slot>
+      </div>
+    </div>
+
     <div
       v-if="
         description ||