feat(component): page wrapper (#61)

* feat: page-wrapper * feat: transition * feat: optimization * feat: update project info * feat: optimization * feat(demo): page wrapper
developer-plus · Apr 27, 2022 · fed3f70 · fed3f70
1 parent e77b4ae
commit fed3f70
Show file tree

Hide file tree

Showing 15 changed files with 273 additions and 213 deletions.
diff --git a/src/components/Page/index.ts 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>()