From 1b57420227d37ffbf2edc54797291f0909405b11 Mon Sep 17 00:00:00 2001
From: meerkat <kit_hack@outlook.com>
Date: Thu, 9 Mar 2023 11:45:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=20spinner-overlay=20?=
 =?UTF-8?q?=E5=92=8C=20dialog=20=E7=9A=84=20z-index=EF=BC=8C=E4=BD=BF?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E4=B8=8D=E4=BC=9A=E8=A2=AB?=
 =?UTF-8?q?=20spinner=20=E9=81=AE=E6=8C=A1=20(#6321)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/Loading.jsx               | 24 ++++++++++++++-----
 packages/amis-ui/scss/_variables.scss         |  1 +
 packages/amis-ui/scss/components/_modal.scss  |  2 +-
 .../amis-ui/scss/components/_spinner.scss     |  6 ++---
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/examples/components/Loading.jsx b/examples/components/Loading.jsx
index a5c75346b..37dd6d9f4 100644
--- a/examples/components/Loading.jsx
+++ b/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'
+      }
+    }
   ]
 };
diff --git a/packages/amis-ui/scss/_variables.scss b/packages/amis-ui/scss/_variables.scss
index b789fe110..b200f31a0 100644
--- a/packages/amis-ui/scss/_variables.scss
+++ b/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;
diff --git a/packages/amis-ui/scss/components/_modal.scss b/packages/amis-ui/scss/components/_modal.scss
index ec3d8ff8b..b9b69816a 100644
--- a/packages/amis-ui/scss/components/_modal.scss
+++ b/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);
diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss
index b276692e6..b3de6f75f 100644
--- a/packages/amis-ui/scss/components/_spinner.scss
+++ b/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);