From 5115bc73faac393100fc6c56a00f6fce1c54c50e Mon Sep 17 00:00:00 2001
From: qkiroc <30946345+qkiroc@users.noreply.github.com>
Date: Mon, 29 Jan 2024 10:43:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20loading=E6=A0=B9=E6=8D=AE=E7=88=B6?=
 =?UTF-8?q?=E7=BA=A7=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E9=A2=9C=E8=89=B2=20(#9507)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
---
 packages/amis-ui/scss/_components.scss        |  1 +
 .../amis-ui/scss/components/_spinner.scss     |  6 ++++++
 packages/amis-ui/scss/themes/dark.scss        |  1 +
 packages/amis-ui/src/components/Spinner.tsx   | 21 ++++++++++++++++---
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
index 2b45adb97..f4c5cf5dc 100644
--- a/packages/amis-ui/scss/_components.scss
+++ b/packages/amis-ui/scss/_components.scss
@@ -3308,6 +3308,7 @@
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
   --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
+  --loading-dark-bg-color: var(--colors-neutral-text-11);
 
   // Image
   --image-image-normal-paddingTop: var(--sizes-size-3);
diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss
index 696f4c9d6..36537a14b 100644
--- a/packages/amis-ui/scss/components/_spinner.scss
+++ b/packages/amis-ui/scss/components/_spinner.scss
@@ -105,6 +105,12 @@
     }
   }
 
+  .#{$ns}Spinner-icon--darkBg {
+    svg.icon path {
+      fill: var(--loading-dark-bg-color);
+    }
+  }
+
   .#{$ns}Spinner-tip {
     margin: px2rem(12px) 0 0 0;
     word-break: keep-all;
diff --git a/packages/amis-ui/scss/themes/dark.scss b/packages/amis-ui/scss/themes/dark.scss
index d2dd71ec4..4cfd2e17d 100644
--- a/packages/amis-ui/scss/themes/dark.scss
+++ b/packages/amis-ui/scss/themes/dark.scss
@@ -5,6 +5,7 @@
 
 :root,
 .AMISCSSWrapper {
+  --loading-dark-bg-color: var(--colors-neutral-fill-2);
   --switch-text-on-color: var(--colors-neutral-text-2);
   --switch-text-off-color: var(--colors-neutral-text-2);
   --switch-default-on-slider-color: var(--colors-neutral-fill-2);
diff --git a/packages/amis-ui/src/components/Spinner.tsx b/packages/amis-ui/src/components/Spinner.tsx
index 6d48183eb..ef1db54fe 100644
--- a/packages/amis-ui/src/components/Spinner.tsx
+++ b/packages/amis-ui/src/components/Spinner.tsx
@@ -104,7 +104,7 @@ const store = SpinnerSharedStore.create({});
 
 export class Spinner extends React.Component<
   SpinnerProps,
-  {spinning: boolean; showMarker: boolean}
+  {spinning: boolean; showMarker: boolean; idDarkBg: boolean}
 > {
   static defaultProps = {
     show: true,
@@ -122,7 +122,8 @@ export class Spinner extends React.Component<
 
   state = {
     spinning: false,
-    showMarker: true
+    showMarker: true,
+    idDarkBg: false
   };
 
   parent: HTMLElement | null = null;
@@ -159,6 +160,19 @@ export class Spinner extends React.Component<
     if (this.parent && this.state.showMarker) {
       this.setState({showMarker: false});
     }
+    if (this.parent) {
+      const backgroundColor = getComputedStyle(this.parent).getPropertyValue(
+        'background-color'
+      );
+      const rgba = backgroundColor.match(/\d+/g)?.map(Number) || [];
+
+      const brightness = (rgba[0] * 299 + rgba[1] * 587 + rgba[2] * 114) / 1000;
+      rgba[3] = rgba[3] ?? 1; // 没有设置颜色时取到的是 rgba(0, 0, 0, 0)
+
+      if (brightness < 200 && rgba[3] > 0.4) {
+        this.setState({idDarkBg: true});
+      }
+    }
   }
 
   componentWillUnmount() {
@@ -250,7 +264,8 @@ export class Spinner extends React.Component<
                         'Spinner-icon--custom': isCustomIcon,
                         'Spinner-icon--disabled': disabled
                       },
-                      spinnerClassName
+                      spinnerClassName,
+                      this.state.idDarkBg && 'Spinner-icon--darkBg'
                     )}
                   >
                     {icon ? (