chore: add header-sticky support

Author: likui628

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Props } from './page.ts';
 
+import { computed, type CSSProperties } from 'vue';
+
 import PageFooter from './page-footer.vue';
 import PageHeader from './page-header.vue';
 
@@ -14,11 +16,28 @@ const props = withDefaults(defineProps<Props>(), {
   showHeader: true,
   title: '',
 });
+
+const headerStyle = computed((): CSSProperties => {
+  const { headerSticky } = props;
+  if (!headerSticky) {
+    return {};
+  }
+
+  return {
+    position: 'sticky',
+    top: 0,
+    zIndex: 99,
+  };
+});
 </script>
 
 <template>
   <div class="relative h-full">
-    <PageHeader v-if="props.showHeader" :title="props.title">
+    <PageHeader
+      v-if="props.showHeader"
+      :style="headerStyle"
+      :title="props.title"
+    >
       <template #default>
         <slot name="headerContent"></slot>
       </template>