Merge pull request #105 from yanbowe/main

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/GlobalHeader/components/MessageList.vue

@@ -14,7 +14,7 @@
             <Icon v-else-if="item.icon" class="text-34px text-primary" :icon="item.icon" />
           </template>
           <template #header>
-            <n-ellipsis :line-clamp="titleRows" :tooltip="{ placement: 'top' }">
+            <n-ellipsis :line-clamp="1">
               {{ item.title }}
               <template #tooltip>
                 {{ item.title }}
@@ -25,7 +25,7 @@
             <n-tag v-bind="item.tagProps" size="small">{{ item.tagTitle }}</n-tag>
           </template>
           <template #description>
-            <n-ellipsis v-if="item.description" :line-clamp="descRows">
+            <n-ellipsis v-if="item.description" :line-clamp="2">
               {{ item.description }}
             </n-ellipsis>
             <p>{{ item.date }}</p>
@@ -40,8 +40,6 @@ import { Icon } from '@iconify/vue';
 
 interface Props {
   list?: Message.List[];
-  titleRows?: number;
-  descRows?: number;
 }
 
 interface Emits {
@@ -49,9 +47,7 @@ interface Emits {
 }
 
 withDefaults(defineProps<Props>(), {
-  list: () => [],
+  list: () => []
-  titleRows: 1,
-  descRows: 2
 });
 
 const emit = defineEmits<Emits>();

src/layouts/common/GlobalHeader/components/SystemMessage.vue

@@ -1,18 +1,17 @@
 <template>
-  <n-popover trigger="click" class="!p-0" placement="bottom">
+  <n-popover class="!p-0" trigger="click" placement="bottom">
     <template #trigger>
-      <hover-container tooltip-content="消息通知" class="w-40px h-full relative" :inverted="theme.header.inverted">
+      <hover-container class="w-40px h-full relative" tooltip-content="消息通知" :inverted="theme.header.inverted">
         <icon-clarity:notification-line class="text-18px" />
         <n-badge
           :value="count"
-          :show="count > 0"
           :max="99"
           :class="[count < 10 ? '-right-2px' : '-right-10px']"
           class="absolute top-10px"
         />
       </hover-container>
     </template>
-    <n-tabs v-model:value="currentTab" type="line" class="w-360px" justify-content="space-evenly">
+    <n-tabs v-model:value="currentTab" class="w-360px" type="line" justify-content="space-evenly">
       <n-tab-pane v-for="(item, index) in tabData" :key="item.key" :name="index">
         <template #tab>
           <div class="flex-x-center items-center w-120px">
@@ -21,7 +20,7 @@
               v-bind="item.badgeProps"
               :value="item.list.filter(message => !message.isRead).length"
               :max="99"
-              :show="item.list.length !== 0"
+              show-zero
             />
           </div>
         </template>

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 };