From 1c668f21bf7ddfbc60c194e3427ea2674aa1ee16 Mon Sep 17 00:00:00 2001
From: k1ngbanana <32843518+k1ngbanana@users.noreply.github.com>
Date: Fri, 8 Sep 2023 22:10:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pageWrapper.vue=E5=8A=A0=E5=85=A5sticky?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20(#3008)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Page/src/PageWrapper.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 971cd42d..fc3024f6 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -4,6 +4,7 @@
       :ghost="ghost"
       :title="title"
       v-bind="omit($attrs, 'class')"
+      :style="getHeaderStyle"
       ref="headerRef"
       v-if="getShowHeader"
     >
@@ -52,6 +53,7 @@
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
+  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
   import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum';
 
   defineOptions({
@@ -63,6 +65,8 @@
     title: propTypes.string,
     dense: propTypes.bool,
     ghost: propTypes.bool,
+    headerSticky: propTypes.bool,
+    headerStyle: Object as PropType<CSSProperties>,
     content: propTypes.string,
     contentStyle: {
       type: Object as PropType<CSSProperties>,
@@ -112,6 +116,20 @@
     ];
   });
 
+  const { headerHeightRef } = useLayoutHeight();
+  const getHeaderStyle = computed((): CSSProperties => {
+    const { headerSticky } = props;
+    if (!headerSticky) {
+      return {};
+    }
+
+    return {
+      position: 'sticky',
+      top: `${unref(headerHeightRef)}px`,
+      ...props.headerStyle,
+    };
+  });
+
   const getShowHeader = computed(
     () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
   );