fix: loading and spinner style fixed and improved (#5588)

Author: mynetfan

packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue

@@ -88,7 +88,7 @@ function onTransitionEnd() {
       </span>
     </slot>
 
-    <div v-if="text" class="mt-4 text-xs">{{ text }}</div>
+    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
     <slot></slot>
   </div>
 </template>

packages/effects/common-ui/src/components/loading/loading.vue

@@ -1,16 +1,36 @@
 <script lang="ts" setup>
 import { VbenLoading } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
 
-defineOptions({ name: 'Loading' });
-defineProps<{
-  spinning: boolean;
+interface LoadingProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
   text?: string;
-}>();
+}
+
+defineOptions({ name: 'Loading' });
+const props = defineProps<LoadingProps>();
 </script>
 <template>
-  <div class="relative min-h-20">
+  <div :class="cn('relative min-h-20', props.class)">
     <slot></slot>
-    <VbenLoading :spinning="spinning" :text="text">
+    <VbenLoading
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+      :text="props.text"
+    >
       <template v-if="$slots.icon" #icon>
         <slot name="icon"></slot>
       </template>

packages/effects/common-ui/src/components/loading/spinner.vue

@@ -1,14 +1,28 @@
 <script lang="ts" setup>
 import { VbenSpinner } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
 
+interface SpinnerProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
 defineOptions({ name: 'Spinner' });
-defineProps({
-  spinning: Boolean,
-});
+const props = defineProps<SpinnerProps>();
 </script>
 <template>
-  <div class="relative min-h-20">
+  <div :class="cn('relative min-h-20', props.class)">
     <slot></slot>
-    <VbenSpinner :spinning="spinning" />
+    <VbenSpinner
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+    />
   </div>
 </template>