From fed3f70eed106a26f694904a06d5183149bfc348 Mon Sep 17 00:00:00 2001
From: Hongbusi <q951686662@qq.com>
Date: Wed, 27 Apr 2022 21:40:44 +0800
Subject: [PATCH] feat(component): page wrapper (#61)

* feat: page-wrapper

* feat: transition

* feat: optimization

* feat: update project info

* feat: optimization

* feat(demo): page wrapper
---
 src/components/Page/index.ts                  |   5 +
 src/components/Page/src/PageWrapper.vue       |  22 ++++
 src/layouts/default/content/index.vue         |  10 +-
 src/styles/animation.less                     |  26 +++++
 src/views/about/components/ProjectInfo.vue    |   4 +-
 .../about/components/ProjectIntroduction.vue  |   9 --
 src/views/about/index.vue                     |  11 +-
 src/views/demo/count-to/index.vue             | 103 +++++++++---------
 src/views/demo/cropper/index.vue              |   5 +-
 src/views/demo/excel/export.vue               |  35 +++---
 src/views/demo/excel/import.vue               |  19 ++--
 src/views/demo/fullscreen/index.vue           |  56 +++++-----
 src/views/demo/md-editor/index.vue            |  41 +++----
 src/views/demo/rich-text/index.vue            |  91 ++++++++--------
 src/views/demo/watermark/index.vue            |  49 ++++-----
 15 files changed, 273 insertions(+), 213 deletions(-)
 create mode 100644 src/components/Page/index.ts
 create mode 100644 src/components/Page/src/PageWrapper.vue
 delete mode 100644 src/views/about/components/ProjectIntroduction.vue

diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
new file mode 100644
index 0000000..fc1c587
--- /dev/null
+++ b/src/components/Page/index.ts
@@ -0,0 +1,5 @@
+import PageWrapper from './src/PageWrapper.vue'
+
+export {
+  PageWrapper
+}
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
new file mode 100644
index 0000000..47ac99e
--- /dev/null
+++ b/src/components/Page/src/PageWrapper.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <a-page-header v-if="title" class="!bg-white border-t border-gray-500/20" :title="title">
+      <template v-if="content">
+        {{ content }}
+      </template>
+    </a-page-header>
+
+    <div class="p-16px">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title?: string
+  content?: string
+}
+
+defineProps<Props>()
+</script>
diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue
index bb80908..a929c0e 100644
--- a/src/layouts/default/content/index.vue
+++ b/src/layouts/default/content/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="layout-content">
     <router-view v-slot="{ Component, route }">
-      <keep-alive>
-        <component :is="Component" :key="route.fullPath" />
-      </keep-alive>
+      <transition name="fade-slide" mode="out-in" appear>
+        <keep-alive>
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+      </transition>
     </router-view>
   </div>
 </template>
 
 <style scoped lang="less">
 .layout-content {
-  @apply  p-16px;
-
   min-height: calc(100vh - var(--header-height) - var(--footer-height));
 }
 </style>
diff --git a/src/styles/animation.less b/src/styles/animation.less
index bbe50dd..9942bd7 100644
--- a/src/styles/animation.less
+++ b/src/styles/animation.less
@@ -49,3 +49,29 @@ each(range(7), {
     transform: translateY(0);
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
diff --git a/src/views/about/components/ProjectInfo.vue b/src/views/about/components/ProjectInfo.vue
index 558a772..a3e0902 100644
--- a/src/views/about/components/ProjectInfo.vue
+++ b/src/views/about/components/ProjectInfo.vue
@@ -12,10 +12,10 @@
         </a-tag>
       </a-descriptions-item>
       <a-descriptions-item label="Github">
-        <a href="https://github.com/Hongbusi/vue-hbs-admin" target="_blank">Github</a>
+        <a href="https://github.com/developer-plus/vue-hbs-admin" target="_blank">Github</a>
       </a-descriptions-item>
       <a-descriptions-item label="预览地址">
-        <a href="https://hongbusi.github.io/vue-hbs-admin" target="_blank">预览地址</a>
+        <a href="https://vue-hbs-admin.netlify.app" target="_blank">预览地址</a>
       </a-descriptions-item>
     </a-descriptions>
   </a-card>
diff --git a/src/views/about/components/ProjectIntroduction.vue b/src/views/about/components/ProjectIntroduction.vue
deleted file mode 100644
index bbf567a..0000000
--- a/src/views/about/components/ProjectIntroduction.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <a-card title="关于" :bordered="false">
-    <a href="https://github.com/Hongbusi/vue-hbs-admin" target="_blank">{{ name }}</a> 是一个基于 Vue3.0、Vite、TypeScript、Ant-Design-Vue 的后台解决方案，目标是为中小型项目开发，提供现成的开箱解决方案及丰富的示例。
-  </a-card>
-</template>
-
-<script setup lang="ts">
-const { pkg: { name } } = __APP_INFO__
-</script>
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index c610231..e478e52 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -1,13 +1,14 @@
 <template>
-  <project-introduction class="enter-y" />
-  <project-info class="enter-y !mt-16px" />
-  <dependencies class="enter-y !mt-16px" />
-  <dev-dependencies class="enter-y !mt-16px" />
+  <page-wrapper title="关于" content="vue-hbs-admin 是一个基于 Vue3.0、Vite、TypeScript、Ant-Design-Vue 的后台解决方案，为后台管理系统提供现成的开箱解决方案及丰富的示例，提高开发效率。">
+    <project-info class="enter-y" />
+    <dependencies class="enter-y !mt-16px" />
+    <dev-dependencies class="enter-y !mt-16px" />
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
-import ProjectIntroduction from './components/ProjectIntroduction.vue'
 import ProjectInfo from './components/ProjectInfo.vue'
 import Dependencies from './components/Dependencies.vue'
 import DevDependencies from './components/DevDependencies.vue'
+import { PageWrapper } from '~/components/Page'
 </script>
diff --git a/src/views/demo/count-to/index.vue b/src/views/demo/count-to/index.vue
index e493be5..5ab83c5 100644
--- a/src/views/demo/count-to/index.vue
+++ b/src/views/demo/count-to/index.vue
@@ -1,61 +1,64 @@
 <template>
-  <a-card title="数字动画（自动）">
-    <a-space>
-      <a-button @click="endVal += 1000">
-        +1000
-      </a-button>
-      <a-button @click="endVal -= 1000">
-        -1000
-      </a-button>
-    </a-space>
+  <page-wrapper title="数字动画">
+    <a-card title="数字动画（自动）" class="enter-y">
+      <a-space>
+        <a-button @click="endVal += 1000">
+          +1000
+        </a-button>
+        <a-button @click="endVal -= 1000">
+          -1000
+        </a-button>
+      </a-space>
 
-    <div class="mt-20px">
-      <a-card-grid style="width: 50%; text-align: center">
-        <count-to
-          :start-val="startVal"
-          :end-val="endVal"
-          prefix="$"
-        />
-      </a-card-grid>
-      <a-card-grid style="width: 50%; text-align: center">
-        <count-to
-          :start-val="startVal"
-          :end-val="endVal"
-          suffix="元"
-          color="red"
-        />
-      </a-card-grid>
-    </div>
-  </a-card>
+      <div class="mt-20px">
+        <a-card-grid style="width: 50%; text-align: center">
+          <count-to
+            :start-val="startVal"
+            :end-val="endVal"
+            prefix="$"
+          />
+        </a-card-grid>
+        <a-card-grid style="width: 50%; text-align: center">
+          <count-to
+            :start-val="startVal"
+            :end-val="endVal"
+            suffix="元"
+            color="red"
+          />
+        </a-card-grid>
+      </div>
+    </a-card>
 
-  <a-card title="数字动画（手动）">
-    <a-space>
-      <a-button @click="countToRef.start()">
-        开始
-      </a-button>
-      <a-button @click="countToRef.reset()">
-        重置
-      </a-button>
-    </a-space>
+    <a-card title="数字动画（手动）" class="enter-y !mt-16px">
+      <a-space>
+        <a-button @click="countToRef.start()">
+          开始
+        </a-button>
+        <a-button @click="countToRef.reset()">
+          重置
+        </a-button>
+      </a-space>
 
-    <div class="mt-20px">
-      <a-card-grid style="width: 100%; text-align: center">
-        <count-to
-          ref="countToRef"
-          :start-val="startVal"
-          :end-val="endVal"
-          :autoplay="false"
-          suffix="元"
-          color="red"
-        />
-      </a-card-grid>
-    </div>
-  </a-card>
+      <div class="mt-20px">
+        <a-card-grid style="width: 100%; text-align: center">
+          <count-to
+            ref="countToRef"
+            :start-val="startVal"
+            :end-val="endVal"
+            :autoplay="false"
+            suffix="元"
+            color="red"
+          />
+        </a-card-grid>
+      </div>
+    </a-card>
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { CountTo } from '~/components/CountTo'
+import { PageWrapper } from '~/components/Page'
+import type { CountTo } from '~/components/CountTo'
 
 const startVal = ref(0)
 const endVal = ref(6666)
diff --git a/src/views/demo/cropper/index.vue b/src/views/demo/cropper/index.vue
index c2399dd..0a737a2 100644
--- a/src/views/demo/cropper/index.vue
+++ b/src/views/demo/cropper/index.vue
@@ -1,15 +1,16 @@
 <template>
-  <a-card title="图片裁剪">
+  <page-wrapper title="图片裁剪">
     <div class="flex">
       <Cropper :src="img" style="width: 40vw;" @cropend="handleCropend" />
       <div class="ml-50px">
         <img :src="cropperImg">
       </div>
     </div>
-  </a-card>
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
+import { PageWrapper } from '~/components/Page'
 import type { CropendResult } from '~/components/Cropper'
 import { Cropper } from '~/components/Cropper'
 import img from '~/assets/images/test.jpeg'
diff --git a/src/views/demo/excel/export.vue b/src/views/demo/excel/export.vue
index c46c7de..6c7e295 100644
--- a/src/views/demo/excel/export.vue
+++ b/src/views/demo/excel/export.vue
@@ -1,26 +1,29 @@
 <template>
-  <a-space>
-    <a-button @click="handleClickJsonExport">
-      Json 数据导出
-    </a-button>
-    <a-button @click="handleClickJsonExportCustom">
-      Json 数据导出（自定义头部）
-    </a-button>
-    <a-button @click="handleClickArrayExport">
-      Array 数据导出
-    </a-button>
-  </a-space>
+  <page-wrapper title="导出 Excel">
+    <a-space>
+      <a-button @click="handleClickJsonExport">
+        Json 数据导出
+      </a-button>
+      <a-button @click="handleClickJsonExportCustom">
+        Json 数据导出（自定义头部）
+      </a-button>
+      <a-button @click="handleClickArrayExport">
+        Array 数据导出
+      </a-button>
+    </a-space>
 
-  <a-table
-    class="mt-16px"
-    :columns="columns"
-    :data-source="data"
-  />
+    <a-table
+      class="mt-16px"
+      :columns="columns"
+      :data-source="data"
+    />
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
 import { columns, data, arrData, arrHeader } from './data'
 import { jsonToSheetXlsx, aoaToSheetXlsx } from '~/components/Excel'
+import { PageWrapper } from '~/components/Page'
 
 const handleClickJsonExport = () => {
   jsonToSheetXlsx({
diff --git a/src/views/demo/excel/import.vue b/src/views/demo/excel/import.vue
index fbdb154..36f227d 100644
--- a/src/views/demo/excel/import.vue
+++ b/src/views/demo/excel/import.vue
@@ -1,16 +1,19 @@
 <template>
-  <import-excel @success="importSuccess" />
+  <page-wrapper title="导入 Excel">
+    <import-excel @success="importSuccess" />
 
-  <a-table
-    v-for="(table, index) in tableList"
-    :key="index"
-    class="mt-16px"
-    :data-source="table.dataSource"
-    :columns="table.columns"
-  />
+    <a-table
+      v-for="(table, index) in tableList"
+      :key="index"
+      class="mt-16px"
+      :data-source="table.dataSource"
+      :columns="table.columns"
+    />
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
+import { PageWrapper } from '~/components/Page'
 import type { ExcelData } from '~/components/Excel'
 import { ImportExcel } from '~/components/Excel'
 
diff --git a/src/views/demo/fullscreen/index.vue b/src/views/demo/fullscreen/index.vue
index 995a5e8..c11b063 100644
--- a/src/views/demo/fullscreen/index.vue
+++ b/src/views/demo/fullscreen/index.vue
@@ -1,36 +1,36 @@
 <template>
-  <div w-full h="60px" bg="white" pl="20px" mb="10px">
-    <h1 text="2xl" font="bold" leading="60px">
-      全屏示例
-    </h1>
-  </div>
-  <a-card title="Window 全屏" :bordered="false" w-full>
-    <a-button type="primary" @click="toggleFullscreen(false, true)">
-      进入全屏
-    </a-button>
-    <a-button ml="10px" @click="toggleFullscreen()">
-      切换全屏
-    </a-button>
-    <a-button type="primary" danger ml="10px" @click="toggleFullscreen(false, false)">
-      退出全屏
-    </a-button>
-    <span ml="10px">当前全屏状态：{{ isFullscreen }}</span>
-  </a-card>
-  <a-card title="DOM 元素全屏" :bordered="false" w-full mt="!20px">
-    <a-button type="primary" @click="toggleDomElFullscreen(true)">
-      进入 DOM 元素全屏
-    </a-button>
-  </a-card>
-  <div ref="domEl" w="500px" h="200px" bg="white" mt="20px" flex="~ wrap" justify="center" items="center">
-    <div>
-      <a-button type="primary" danger ml="10px" @click="toggleDomElFullscreen(false)">
-        退出 DOM 元素全屏
+  <page-wrapper title="全屏">
+    <a-card title="Window 全屏" :bordered="false" class="enter-y w-full">
+      <a-button type="primary" @click="toggleFullscreen(false, true)">
+        进入全屏
       </a-button>
-      <span ml="10px" w-full>当前全屏状态：{{ isDomElFullscreen }}</span>
+      <a-button ml="10px" @click="toggleFullscreen()">
+        切换全屏
+      </a-button>
+      <a-button type="primary" danger ml="10px" @click="toggleFullscreen(false, false)">
+        退出全屏
+      </a-button>
+      <span ml="10px">当前全屏状态：{{ isFullscreen }}</span>
+    </a-card>
+    <a-card title="DOM 元素全屏" :bordered="false" class="enter-y w-full !mt-16px">
+      <a-button type="primary" @click="toggleDomElFullscreen(true)">
+        进入 DOM 元素全屏
+      </a-button>
+    </a-card>
+    <div ref="domEl" class="enter-y !mt-16px w-500px h-200px bg-white flex justify-center items-center">
+      <div>
+        <a-button type="primary" danger ml="10px" @click="toggleDomElFullscreen(false)">
+          退出 DOM 元素全屏
+        </a-button>
+        <span ml="10px" w-full>当前全屏状态：{{ isDomElFullscreen }}</span>
+      </div>
     </div>
-  </div>
+  </page-wrapper>
 </template>
+
 <script setup lang="ts">
+import { PageWrapper } from '~/components/Page'
+
 const { isFullscreen, enter, exit, toggle } = useFullscreen()
 
 const domEl = ref<HTMLElement | null>()
diff --git a/src/views/demo/md-editor/index.vue b/src/views/demo/md-editor/index.vue
index 2285ce7..a5ebd01 100644
--- a/src/views/demo/md-editor/index.vue
+++ b/src/views/demo/md-editor/index.vue
@@ -1,27 +1,30 @@
 <template>
-  <a-card title="Markdown 编辑器" :bordered="false" w-full>
-    <div ref="domRef">
-      <a-spin tip="正在加载编辑器中" />
-    </div>
-    <div w-full mt="20px" align="center">
-      <p w-full>
-        使用 Viditor 作为 Markdown 编辑器
-      </p>
-      <p w-full>
-        Github Repo: <a href="https://github.com/Vanessa219/vditor">https://github.com/Vanessa219/vditor</a>
-      </p>
-    </div>
-  </a-card>
-  <a-card title="Markdown 显示器">
-    <div v-html="valueHTML" />
-  </a-card>
-  <a-card title="Markdown value HTML">
-    <textarea v-model="valueHTML" readonly w-full h="200px" outline="none" />
-  </a-card>
+  <page-wrapper title="markdown 编辑器">
+    <a-card title="Markdown 编辑器" :bordered="false" class="enter-y w-full">
+      <div ref="domRef">
+        <a-spin tip="正在加载编辑器中" />
+      </div>
+      <div w-full mt="20px" align="center">
+        <p w-full>
+          使用 Viditor 作为 Markdown 编辑器
+        </p>
+        <p w-full>
+          Github Repo: <a href="https://github.com/Vanessa219/vditor">https://github.com/Vanessa219/vditor</a>
+        </p>
+      </div>
+    </a-card>
+    <a-card title="Markdown 显示器" class="enter-y !mt-16px">
+      <div v-html="valueHTML" />
+    </a-card>
+    <a-card title="Markdown value HTML" class="enter-y !mt-16px">
+      <textarea v-model="valueHTML" readonly w-full h="200px" outline="none" />
+    </a-card>
+  </page-wrapper>
 </template>
 <script setup lang="ts">
 import { promiseTimeout } from '@vueuse/core'
 import Vditor from 'vditor'
+import { PageWrapper } from '~/components/Page'
 import 'vditor/dist/index.css'
 
 const domRef = ref<HTMLElement>()
diff --git a/src/views/demo/rich-text/index.vue b/src/views/demo/rich-text/index.vue
index 0ce0d3d..107c60a 100644
--- a/src/views/demo/rich-text/index.vue
+++ b/src/views/demo/rich-text/index.vue
@@ -1,50 +1,52 @@
 <template>
-  <a-card title="富文本编辑器">
-    <template #extra>
-      <a-space>
-        <a-button type="primary" @click="insertText">
-          插入文本
-        </a-button>
-        <a-button type="primary" @click="printHtml">
-          打印 HTML
-        </a-button>
-        <a-button type="primary" @click="disableOrEnable">
-          禁止/启用
-        </a-button>
-      </a-space>
-    </template>
-    <div style="border: 1px solid #ccc">
-      <Toolbar
-        :editor="editorRef"
-        :default-config="toolbarConfig"
-        :mode="mode"
-        style="border-bottom: 1px solid #ccc"
-      />
-      <Editor
+  <page-wrapper title="富文本编辑器">
+    <a-card title="富文本编辑器" class="enter-y">
+      <template #extra>
+        <a-space>
+          <a-button type="primary" @click="insertText">
+            插入文本
+          </a-button>
+          <a-button type="primary" @click="printHtml">
+            打印 HTML
+          </a-button>
+          <a-button type="primary" @click="disableOrEnable">
+            禁止/启用
+          </a-button>
+        </a-space>
+      </template>
+      <div style="border: 1px solid #ccc">
+        <Toolbar
+          :editor="editorRef"
+          :default-config="toolbarConfig"
+          :mode="mode"
+          style="border-bottom: 1px solid #ccc"
+        />
+        <Editor
+          v-model="valueHtml"
+          :default-config="editorConfig"
+          :mode="mode"
+          style="height: 300px; overflow-y: hidden"
+          @on-created="handleCreated"
+          @on-change="handleChange"
+          @on-destroyed="handleDestroyed"
+          @on-focus="handleFocus"
+          @on-blur="handleBlur"
+          @custom-alert="customAlert"
+          @custom-paste="customPaste"
+        />
+      </div>
+    </a-card>
+    <a-card title="富文本显示器" class="enter-y !mt-16px">
+      <div v-html="valueHtml" />
+    </a-card>
+    <a-card title="富文本 valueHtml" class="enter-y !mt-16px">
+      <textarea
         v-model="valueHtml"
-        :default-config="editorConfig"
-        :mode="mode"
-        style="height: 300px; overflow-y: hidden"
-        @on-created="handleCreated"
-        @on-change="handleChange"
-        @on-destroyed="handleDestroyed"
-        @on-focus="handleFocus"
-        @on-blur="handleBlur"
-        @custom-alert="customAlert"
-        @custom-paste="customPaste"
+        readonly
+        style="width: 100%; height: 200px; outline: none"
       />
-    </div>
-  </a-card>
-  <a-card title="富文本显示器" style="margin-top: 16px">
-    <div v-html="valueHtml" />
-  </a-card>
-  <a-card title="富文本 valueHtml" style="margin-top: 16px">
-    <textarea
-      v-model="valueHtml"
-      readonly
-      style="width: 100%; height: 200px; outline: none"
-    />
-  </a-card>
+    </a-card>
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
@@ -52,6 +54,7 @@
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { PageWrapper } from '~/components/Page'
 
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
diff --git a/src/views/demo/watermark/index.vue b/src/views/demo/watermark/index.vue
index 8373025..1e25194 100644
--- a/src/views/demo/watermark/index.vue
+++ b/src/views/demo/watermark/index.vue
@@ -1,29 +1,27 @@
 <template>
-  <div ref="watermarkRef">
-    <a-card title="水印功能">
-      <a-space>
-        <a-button type="primary" @click="setWatermark()">
-          创建默认
-        </a-button>
-        <a-button
-          type="primary"
-          danger
-          @click="
-            setWatermark({
-              str: 'vue-hbs-admin',
-              str2: 'watermark',
-              fillStyle: '#409EFF',
-            })
-          "
-        >
-          创建自定义
-        </a-button>
-        <a-button @click="clear()">
-          清除
-        </a-button>
-      </a-space>
-    </a-card>
-  </div>
+  <page-wrapper title="水印功能">
+    <a-space>
+      <a-button type="primary" @click="setWatermark()">
+        创建默认
+      </a-button>
+      <a-button
+        type="primary"
+        danger
+        @click="
+          setWatermark({
+            str: 'vue-hbs-admin',
+            str2: 'watermark',
+            fillStyle: '#409EFF',
+          })
+        "
+      >
+        创建自定义
+      </a-button>
+      <a-button @click="clear()">
+        清除
+      </a-button>
+    </a-space>
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
@@ -33,6 +31,7 @@
 // 支持定制颜色
 // hook 模式
 import { useWatermark } from '~/components/Watermark'
+import { PageWrapper } from '~/components/Page'
 
 const { setWatermark, clear } = useWatermark()
 </script>