From f2912f64fc6ee3a152b2cbfbea69ad829f6b3411 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Thu, 5 Sep 2024 11:54:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/hooks/src/index.ts            |  1 -
 packages/hooks/src/use-loading.ts      |  7 -------
 src/components/common/app-provider.vue | 21 ++++++++++++++++-----
 src/hooks/business/download.ts         |  6 +++---
 src/hooks/common/loading.ts            | 25 +++++++++++++++++++++++++
 src/typings/global.d.ts                |  7 ++++++-
 6 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 src/hooks/common/loading.ts

diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 0ee84280..a6a330bd 100644
--- a/packages/hooks/src/index.ts
+++ b/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';
diff --git a/packages/hooks/src/use-loading.ts b/packages/hooks/src/use-loading.ts
index 27e331e2..b8f89ad3 100644
--- a/packages/hooks/src/use-loading.ts
+++ b/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
  *
diff --git a/src/components/common/app-provider.vue b/src/components/common/app-provider.vue
index ab34a701..f6aa5271 100644
--- a/src/components/common/app-provider.vue
+++ b/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>
diff --git a/src/hooks/business/download.ts b/src/hooks/business/download.ts
index fa6e8d0c..3e3c5e7f 100644
--- a/src/hooks/business/download.ts
+++ b/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();
diff --git a/src/hooks/common/loading.ts b/src/hooks/common/loading.ts
new file mode 100644
index 00000000..27ddc41d
--- /dev/null
+++ b/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
+  };
+}
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index 68bf07dc..41723bd7 100644
--- a/src/typings/global.d.ts
+++ b/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 {