feat(projects): 增加返回顶部功能

src/layouts/BasicLayout/index.vue

@@ -27,6 +27,7 @@
       <global-footer />
     </template>
   </admin-layout>
+  <global-back-top />
   <setting-drawer />
 </template>
 
@@ -35,7 +36,15 @@ import AdminLayout from '@soybeanjs/vue-admin-layout';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import { useBoolean } from '@/hooks';
-import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
+import {
+  SettingDrawer,
+  GlobalHeader,
+  GlobalTab,
+  GlobalSider,
+  GlobalContent,
+  GlobalFooter,
+  GlobalBackTop
+} from '../common';
 
 const app = useAppStore();
 const theme = useThemeStore();

src/layouts/common/GlobalBackTop/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <n-back-top :show="show" class="z-1000" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useWindowScroll } from '@vueuse/core';
+
+const { y: scrollY } = useWindowScroll();
+
+const show = computed(() => scrollY.value > 180);
+</script>
+<style scoped></style>

src/layouts/common/index.ts

@@ -5,5 +5,6 @@ import GlobalSider from './GlobalSider/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
 import GlobalFooter from './GlobalFooter/index.vue';
 import GlobalLogo from './GlobalLogo/index.vue';
+import GlobalBackTop from './GlobalBackTop/index.vue';
 
-export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter, GlobalLogo };
+export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter, GlobalLogo, GlobalBackTop };