feat: add common BaseSpin component

components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    BaseSpin: typeof import('./src/components/common/BaseSpin.vue')['default']
     BaseTable: typeof import('./src/components/common/BaseTable.vue')['default']
     BaseTableHandle: typeof import('./src/components/common/BaseTableHandle.vue')['default']
     BaseTableSearch: typeof import('./src/components/common/BaseTableSearch.vue')['default']

src/components/common/BaseSpin.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps({
+  size: {
+    type: String as PropType<number | 'small' | 'medium' | 'large'>,
+    default: 'medium',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingText: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <NSpin
+    rotate
+    :size="size"
+    :show="isLoading"
+    :description="loadingText"
+  >
+    <slot />
+  </NSpin>
+</template>

src/composables/useLoading/index.ts

@@ -1,3 +1,7 @@
+/**
+ * Can configure the loading property of the BaseSpin component or the Button component to implement the Loading effect
+ * @returns
+ */
 export const useLoading = () => {
   const isLoading = ref(false)