From 3015912f1aef0d1813d7934e55f1a638669b7ce5 Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Sun, 11 Aug 2024 16:29:39 +0800
Subject: [PATCH] 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>
---
 .../web-ele/src/views/demos/element/index.vue | 12 +++----
 .../web-naive/src/views/demos/naive/index.vue | 13 +++----
 .../web-naive/src/views/demos/table/index.vue |  9 ++++-
 packages/effects/common-ui/src/index.ts       |  1 +
 packages/effects/common-ui/src/page/index.ts  |  1 +
 .../common-ui/src/page/page-footer.vue        | 13 +++++++
 .../common-ui/src/page/page-header.vue        | 20 +++++++++++
 packages/effects/common-ui/src/page/page.ts   | 11 ++++++
 packages/effects/common-ui/src/page/page.vue  | 34 +++++++++++++++++++
 9 files changed, 98 insertions(+), 16 deletions(-)
 create mode 100644 packages/effects/common-ui/src/page/index.ts
 create mode 100644 packages/effects/common-ui/src/page/page-footer.vue
 create mode 100644 packages/effects/common-ui/src/page/page-header.vue
 create mode 100644 packages/effects/common-ui/src/page/page.ts
 create mode 100644 packages/effects/common-ui/src/page/page.vue

diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue
index 15f0d5e3..5ca94b73 100644
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
 import {
   ElButton,
   ElCard,
@@ -39,13 +41,9 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
+  <Page title="Element Plus组件使用演示">
+    <template #header> 支持多语言，主题功能集成切换等 </template>
     <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">Element Plus组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
       <div class="mb-3">
         <span class="text-lg font-semibold">按钮</span>
       </div>
@@ -92,5 +90,5 @@ function notify(type: NotificationType) {
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
diff --git a/apps/web-naive/src/views/demos/naive/index.vue b/apps/web-naive/src/views/demos/naive/index.vue
index e328f413..d115ff24 100644
--- a/apps/web-naive/src/views/demos/naive/index.vue
+++ b/apps/web-naive/src/views/demos/naive/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { NotificationType } from 'naive-ui';
+import { Page } from '@vben/common-ui';
 
+import { type NotificationType } from 'naive-ui';
 import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
 
 const notification = useNotification();
@@ -33,13 +34,9 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
+  <Page title="naive组件使用演示">
+    <template #header> 支持多语言，主题功能集成切换等 </template>
     <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">naive组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
       <div class="mb-3">
         <span class="text-lg font-semibold">按钮</span>
       </div>
@@ -87,5 +84,5 @@ function notify(type: NotificationType) {
         <NButton type="primary" @click="notify('info')"> 加载中 </NButton>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
diff --git a/apps/web-naive/src/views/demos/table/index.vue b/apps/web-naive/src/views/demos/table/index.vue
index 02acf580..ae669052 100644
--- a/apps/web-naive/src/views/demos/table/index.vue
+++ b/apps/web-naive/src/views/demos/table/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { Page } from '@vben/common-ui';
+
 import { NDataTable } from 'naive-ui';
 
 const columns = ref([
@@ -25,7 +27,12 @@ const data = [
 </script>
 
 <template>
-  <NDataTable :columns="columns" :data="data" />
+  <Page title="NDataTable">
+    <template #header>
+      表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
+    </template>
+    <NDataTable :columns="columns" :data="data" />
+  </Page>
 </template>
 
 <style scoped></style>
diff --git a/packages/effects/common-ui/src/index.ts b/packages/effects/common-ui/src/index.ts
index 8da49eaf..1c352371 100644
--- a/packages/effects/common-ui/src/index.ts
+++ b/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';
diff --git a/packages/effects/common-ui/src/page/index.ts b/packages/effects/common-ui/src/page/index.ts
new file mode 100644
index 00000000..65bf3c69
--- /dev/null
+++ b/packages/effects/common-ui/src/page/index.ts
@@ -0,0 +1 @@
+export { default as Page } from './page.vue';
diff --git a/packages/effects/common-ui/src/page/page-footer.vue b/packages/effects/common-ui/src/page/page-footer.vue
new file mode 100644
index 00000000..d86d1062
--- /dev/null
+++ b/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>
diff --git a/packages/effects/common-ui/src/page/page-header.vue b/packages/effects/common-ui/src/page/page-header.vue
new file mode 100644
index 00000000..4249017f
--- /dev/null
+++ b/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>
diff --git a/packages/effects/common-ui/src/page/page.ts b/packages/effects/common-ui/src/page/page.ts
new file mode 100644
index 00000000..3d504b42
--- /dev/null
+++ b/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 };
diff --git a/packages/effects/common-ui/src/page/page.vue b/packages/effects/common-ui/src/page/page.vue
new file mode 100644
index 00000000..41fbdd74
--- /dev/null
+++ b/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>