feat: page component (#4087)

* feat: page component

* chore: basic page

* chore: add demos

* chore: add header-sticky support

* chore: update web-ele

* chore: rename slot name

---------

Co-authored-by: Vben <ann.vben@gmail.com>

packages/effects/common-ui/src/index.ts

@@ -3,4 +3,5 @@ export * from './authentication';
 export * from './dashboard';
 export * from './ellipsis-text';
 export * from './fallback';
+export * from './page';
 export { useToast } from '@vben-core/shadcn-ui';

packages/effects/common-ui/src/page/index.ts

@@ -0,0 +1 @@
+export { default as Page } from './page.vue';

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'PageFooter',
+});
+</script>
+
+<template>
+  <div
+    class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+  >
+    <slot></slot>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PageHeaderProps } from './page.ts';
+
+defineOptions({
+  name: 'PageHeader',
+});
+
+const props = defineProps<PageHeaderProps>();
+</script>
+
+<template>
+  <div class="bg-card px-6 py-4">
+    <div class="flex justify-between text-lg font-bold">
+      {{ props.title }}
+    </div>
+    <div class="pt-3">
+      <slot></slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+interface PageHeaderProps {
+  title?: string;
+}
+
+interface Props extends PageHeaderProps {
+  headerSticky?: boolean;
+  showFooter?: boolean;
+  showHeader?: boolean;
+}
+
+export type { PageHeaderProps, Props };

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Props } from './page.ts';
+
+import PageFooter from './page-footer.vue';
+import PageHeader from './page-header.vue';
+
+defineOptions({
+  name: 'Page',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  showFooter: false,
+  showHeader: true,
+  title: '',
+});
+</script>
+
+<template>
+  <div class="relative h-full">
+    <PageHeader v-if="props.showHeader" :title="props.title">
+      <template #default>
+        <slot name="header"></slot>
+      </template>
+    </PageHeader>
+    <div class="m-4 overflow-hidden">
+      <slot></slot>
+    </div>
+    <PageFooter v-if="props.showFooter">
+      <template #default>
+        <slot name="footer"></slot>
+      </template>
+    </PageFooter>
+  </div>
+</template>