u

code/base-project/base-vue/packages/ao-design/src/spin/index.scss

@@ -5,6 +5,7 @@ $spin-prefix: #{$prefix}-spin;
 .#{$spin-prefix}-wrapper {
   position: relative;
   display: inline-block;
+  width: 100%;
 }
 
 .#{$spin-prefix} {
@@ -23,6 +24,9 @@ $spin-prefix: #{$prefix}-spin;
     color: $text-color-base;
   }
 
+  &-icon {
+    color: $primary-color;
+  }
   &-tip {
     margin-top: 4px;
     font-size: 12px;

code/base-project/base-vue/packages/ao-design/src/spin/index.tsx

@@ -12,11 +12,22 @@ export default defineComponent({
     icon: { type: String as PropType<string>, default: 'mingcute:loading-line' },
     size: { type: Number as PropType<number>, default: 16 },
     rotate: { type: Number as PropType<number>, default: 360 },
-    tip: { type: String as PropType<string>, default: '' },
+    tip: {
+      type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
+      default: '',
+    },
   },
   setup(props, { slots }) {
     const prefixCls = getPrefixCls('spin')
 
+    const renderTip = () => {
+      if (slots.tip)
+        return slots.tip()
+      if (typeof props.tip === 'function')
+        return props.tip()
+      return props.tip
+    }
+
     return () => {
       if (!props.loading && !slots.default)
         return null
@@ -29,7 +40,6 @@ export default defineComponent({
               class={`${prefixCls}`}
               style={{
                 background: slots.default ? `rgba(255,255,255,${props.opacity})` : 'transparent',
-                borderRadius: props.rounded ? '4px' : 0,
               }}
             >
               <div class={`${prefixCls}-content`}>
@@ -37,8 +47,9 @@ export default defineComponent({
                   icon={props.icon}
                   size={props.size}
                   spin
+                  class={`${prefixCls}-icon`}
                 />
-                {props.tip && <span class={`${prefixCls}-tip`}>{props.tip}</span>}
+                {renderTip() && <span class={`${prefixCls}-tip`}>{renderTip()}</span>}
               </div>
             </div>
           )}