chore: basic page

Author: likui628

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

@@ -5,5 +5,9 @@ defineOptions({
 </script>
 
 <template>
-  <div>page-footer</div>
+  <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

@@ -1,9 +1,20 @@
 <script setup lang="ts">
+import type { PageHeaderProps } from './page.ts';
+
 defineOptions({
   name: 'PageHeader',
 });
+
+const props = defineProps<PageHeaderProps>();
 </script>
 
 <template>
-  <div>page-header</div>
+  <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

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

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

@@ -8,13 +8,28 @@ defineOptions({
   name: 'Page',
 });
 
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+  headerSticky: false,
+  showFooter: false,
+  showHeader: true,
+  title: '',
+});
 </script>
 
 <template>
-  <div>
-    <PageHeader />
-    <slot>{{ props.title }}</slot>
-    <PageFooter />
+  <div class="relative h-full">
+    <PageHeader v-if="props.showHeader" :title="props.title">
+      <template #default>
+        <slot name="headerContent"></slot>
+      </template>
+    </PageHeader>
+    <div class="m-4 overflow-hidden">
+      <slot></slot>
+    </div>
+    <PageFooter v-if="props.showFooter">
+      <template #default>
+        <slot name="footerContent"></slot>
+      </template>
+    </PageFooter>
   </div>
 </template>