u

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

@@ -2,38 +2,44 @@
 
 $spin-prefix: #{$prefix}-spin;
 
-.#{$spin-prefix}-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
 .#{$spin-prefix} {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: $text-color-base;
-  }
+  display: inline-block;
 
   &-icon {
     color: $primary-color;
+    font-size: 16px;
   }
+
   &-tip {
     margin-top: 4px;
     font-size: 12px;
-    color: $text-color-base;
+    color: $primary-color;
   }
 
-  &.rounded {
-    border-radius: inherit;
+  &.#{$spin-prefix}-has-tip {
+    text-align: center;
+  }
+
+  &.#{$spin-prefix}-loading {
+    position: relative;
+    user-select: none;
+
+    .#{$spin-prefix}-mask {
+      position: absolute;
+      inset: 0;
+      z-index: 11;
+      text-align: center;
+      background-color: $bg-color-mask-spin;
+      transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+      user-select: none;
+
+      .#{$spin-prefix}-mask-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 12;
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 }

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

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { PropType, VNode } from 'vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon'
@@ -29,30 +29,50 @@ export default defineComponent({
     }
 
     return () => {
-      if (!props.loading && !slots.default)
-        return null
+      const tipContent = renderTip()
 
+      if (!props.loading || !slots.default) {
+        // loading 为 false 时的结构
+        return (
+          <div
+            class={[
+              prefixCls,
+              tipContent ? `${prefixCls}-has-tip` : '',
+            ]}
+          >
+            <Icon
+              icon={props.icon}
+              size={props.size}
+              class={`${prefixCls}-icon`}
+              spin
+            />
+            {tipContent && <div class={`${prefixCls}-tip`}>{tipContent}</div>}
+          </div>
+        )
+      }
+
+      // loading 为 true 时的结构
       return (
-        <div class={`${prefixCls}-wrapper`}>
-          {slots.default?.()}
-          {props.loading && (
-            <div
-              class={`${prefixCls}`}
-              style={{
-                background: slots.default ? `rgba(255,255,255,${props.opacity})` : 'transparent',
-              }}
-            >
-              <div class={`${prefixCls}-content`}>
-                <Icon
-                  icon={props.icon}
-                  size={props.size}
-                  spin
-                  class={`${prefixCls}-icon`}
-                />
-                {renderTip() && <span class={`${prefixCls}-tip`}>{renderTip()}</span>}
-              </div>
+        <div
+          class={[
+            prefixCls,
+            `${prefixCls}-loading`,
+          ]}
+        >
+          {slots.default()}
+
+          <div class={`${prefixCls}-mask`}>
+            <div class={`${prefixCls}-mask-inner`}>
+              <Icon
+                icon={props.icon}
+                size={props.size}
+                spin
+                class={`${prefixCls}-icon`}
+              />
+              {tipContent && <div class={`${prefixCls}-tip`}>{tipContent}</div>}
             </div>
-          )}
+          </div>
+
         </div>
       )
     }