fix: 调整 spinner-overlay 和 dialog 的 z-index，使关闭按钮不会被 spinner 遮挡 (#6321)

examples/components/Loading.jsx

@@ -1,6 +1,10 @@
 const loadingBody = {
   type: 'service',
   api: '/api/mock2/sample?orderBy=id&orderDir=desc&perPage=10&waitSeconds=10',
+  loadingConfig: {
+    show: true,
+    root: '[role=dialog-body]'
+  },
   body: {
     type: 'page',
     initApi:
@@ -128,10 +132,6 @@ const loadingBody = {
           type: 'crud',
           api: '/api/mock2/sample?orderBy=id&orderDir=desc&waitSeconds=30',
           syncLocation: false,
-          loadingConfig: {
-            show: true,
-            root: 'body'
-          },
           columns: [
             {
               name: 'id',
@@ -177,9 +177,21 @@ export default {
       dialog: {
         size: 'lg',
         title: '提示',
-        body: loadingBody
+        body: {
+          ...loadingBody,
+          loadingConfig: {
+            show: true,
+            root: '[role=dialog-body]'
+          }
+        }
       }
     },
-    loadingBody
+    {
+      ...loadingBody,
+      loadingConfig: {
+        show: true,
+        root: 'body'
+      }
+    }
   ]
 };

packages/amis-ui/scss/_variables.scss

@@ -410,6 +410,7 @@ $zindex-tooltip: 1600 !default;
 $zindex-toast: 2000 !default;
 $zindex-top: 3000 !default;
 $zindex-debug: 4000 !default;
+$zindex-spinner-overlay: 11 !default;
 
 $Form--horizontal-columns: 12;
 $Table-strip-bg: lighten(#f6f8f8, 1%) !default;

packages/amis-ui/scss/components/_modal.scss

@@ -93,7 +93,6 @@
     border-bottom: var(--Modal-body-borderTop);
     border-top-left-radius: var(--Modal-content-borderRadius);
     border-top-right-radius: var(--Modal-content-borderRadius);
-    z-index: 150; // 高于 Spinner 的 overlay
   }
 
   &-title {
@@ -108,6 +107,7 @@
     line-height: inherit;
     text-decoration: none;
     vertical-align: middle;
+    z-index: calc($zindex-spinner-overlay + 1);
 
     svg {
       width: var(--Modal-close-width);

packages/amis-ui/scss/components/_spinner.scss

@@ -137,7 +137,7 @@
 
   &--overlay {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
@@ -146,7 +146,7 @@
 
 .#{$ns}Spinner-overlay {
   position: absolute;
-  z-index: 10;
+  z-index: calc($zindex-spinner-overlay - 1);
   top: 0;
   left: 0;
   right: 0;
@@ -168,7 +168,7 @@
 
   .#{$ns}Spinner {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);