feat: improve page component (#5013)

* feat: `page` component support fixed header

* docs: `page`  component documentation

* docs: Improve `props` types of `page`

* docs: improve `fixedHeader` description of `page`

* fix: `page` header border color with fixedHeader

* feat: add `headerClass` for `Page`

packages/effects/common-ui/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben/constants": "workspace:*",

packages/effects/common-ui/src/components/page/page.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  type StyleValue,
+  useTemplateRef,
+} from 'vue';
+
+import { preferences } from '@vben-core/preferences';
+import { cn } from '@vben-core/shared/utils';
 
 interface Props {
   title?: string;
@@ -9,6 +19,10 @@ interface Props {
    * 根据content可见高度自适应
    */
   autoContentHeight?: boolean;
+  /** 头部固定 */
+  fixedHeader?: boolean;
+  headerClass?: string;
+  footerClass?: string;
 }
 
 defineOptions({
@@ -20,6 +34,7 @@ const {
   description = '',
   autoContentHeight = false,
   title = '',
+  fixedHeader = false,
 } = defineProps<Props>();
 
 const headerHeight = ref(0);
@@ -29,6 +44,17 @@ const shouldAutoHeight = ref(false);
 const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
 const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
 
+const headerStyle = computed<StyleValue>(() => {
+  return fixedHeader
+    ? {
+        position: 'sticky',
+        zIndex: 200,
+        top:
+          preferences.header.mode === 'fixed' ? 'var(--vben-header-height)' : 0,
+      }
+    : undefined;
+});
+
 const contentStyle = computed(() => {
   if (autoContentHeight) {
     return {
@@ -69,7 +95,14 @@ onMounted(() => {
         $slots.extra
       "
       ref="headerRef"
-      class="bg-card relative px-6 py-4"
+      :class="
+        cn(
+          'bg-card relative px-6 py-4',
+          headerClass,
+          fixedHeader ? 'border-border border-b' : '',
+        )
+      "
+      :style="headerStyle"
     >
       <slot name="title">
         <div v-if="title" class="mb-2 flex text-lg font-semibold">
@@ -95,7 +128,12 @@ onMounted(() => {
     <div
       v-if="$slots.footer"
       ref="footerRef"
-      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+      :class="
+        cn(
+          footerClass,
+          'bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4',
+        )
+      "
     >
       <slot name="footer"></slot>
     </div>