feat: 封装全屏加载

packages/hooks/src/index.ts

@@ -9,4 +9,3 @@ export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, use
 
 export * from './use-signal';
 export * from './use-table';
-export type { LoadingApiInst } from './use-loading';

packages/hooks/src/use-loading.ts

@@ -1,12 +1,5 @@
-import type { Ref } from 'vue';
 import useBoolean from './use-boolean';
 
-export interface LoadingApiInst {
-  loading: Ref<boolean>;
-  startLoading: () => void;
-  endLoading: () => void;
-}
-
 /**
  * Loading
  *

src/components/common/app-provider.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { createTextVNode, defineComponent } from 'vue';
 import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
-import { useLoading } from '@sa/hooks';
+import useContentLoading from '@/hooks/common/loading';
 
 defineOptions({
   name: 'AppProvider'
 });
 
-const loading = useLoading(false);
+const contentLoading = useContentLoading();
 
 const ContextHolder = defineComponent({
   name: 'ContextHolder',
@@ -17,7 +17,7 @@ const ContextHolder = defineComponent({
       window.$dialog = useDialog();
       window.$message = useMessage();
       window.$notification = useNotification();
-      window.$loading = loading;
+      window.$loading = contentLoading;
     }
 
     register();
@@ -28,7 +28,13 @@ const ContextHolder = defineComponent({
 </script>
 
 <template>
-  <NSpin class="h-full" content-class="h-full" :show="loading.loading.value">
+  <NSpin
+    class="h-full"
+    :size="52"
+    content-class="h-full"
+    :show="contentLoading.loading.value"
+    :description="contentLoading.description.value"
+  >
     <NLoadingBarProvider>
       <NDialogProvider>
         <NNotificationProvider>
@@ -42,4 +48,9 @@ const ContextHolder = defineComponent({
   </NSpin>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.n-spin-description) {
+  margin-top: 24px;
+  font-size: 16px;
+}
+</style>

src/hooks/business/download.ts

@@ -25,7 +25,7 @@ export function useDownload() {
   }
 
   function download(url: string, params: any, fileName: string) {
-    window.$loading?.startLoading();
+    window.$loading?.startLoading('正在下载数据，请稍候...');
     const token = localStg.get('token');
     const clientId = import.meta.env.VITE_APP_CLIENT_ID;
     const now = new Date().getTime();
@@ -54,7 +54,7 @@ export function useDownload() {
   }
 
   function oss(ossId: CommonType.IdType) {
-    window.$loading?.startLoading();
+    window.$loading?.startLoading('正在下载数据，请稍候...');
     const token = localStg.get('token');
     const clientId = import.meta.env.VITE_APP_CLIENT_ID;
     const url = `/resource/oss/download/${ossId}`;
@@ -77,7 +77,7 @@ export function useDownload() {
   }
 
   function zip(url: string, fileName: string) {
-    window.$loading?.startLoading();
+    window.$loading?.startLoading('正在下载数据，请稍候...');
     const token = localStg.get('token');
     const clientId = import.meta.env.VITE_APP_CLIENT_ID;
     const now = new Date().getTime();

src/hooks/common/loading.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue';
+import { useLoading } from '@sa/hooks';
+
+/** Content Loading */
+export default function useContentLoading() {
+  const description = ref<string>('loading...');
+  const loading = useLoading();
+
+  function startLoading(desc: string = 'loading...') {
+    description.value = desc;
+    loading.startLoading();
+  }
+
+  function endLoading() {
+    description.value = 'loading...';
+    loading.endLoading();
+  }
+
+  return {
+    loading: loading.loading,
+    description,
+    startLoading,
+    endLoading
+  };
+}

src/typings/global.d.ts

@@ -13,7 +13,12 @@ declare global {
     /** Notification instance */
     $notification?: import('naive-ui').NotificationProviderInst;
     /** Content loading */
-    $loading?: import('@sa/hooks').LoadingApiInst;
+    $loading?: {
+      loading: import('vue').Ref<boolean>;
+      description: import('vue').Ref<string>;
+      startLoading: (description?: string) => void;
+      endLoading: () => void;
+    };
   }
 
   interface ViewTransition {