From 95cedb784f0a2d47e85042d6a44ef49a8d9c3a52 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 26 Feb 2021 01:08:08 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20style:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=83=8C=E6=99=AF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/page-loading/src/index.tsx      | 14 +++------
 packages/page-loading/src/useProgress.ts | 38 +++++++++++++-----------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/page-loading/src/index.tsx b/packages/page-loading/src/index.tsx
index cb63acec..e28fc824 100644
--- a/packages/page-loading/src/index.tsx
+++ b/packages/page-loading/src/index.tsx
@@ -1,11 +1,10 @@
 import type { CSSProperties } from 'react';
-import React, { useEffect } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { insertCss } from 'insert-css';
 
 import 'nprogress/nprogress.css';
 
-import { useProgress, progressColor } from './useProgress';
+import { useProgress } from './useProgress';
 import './style.less';
 
 const clsPrefix = 'avx-page-loading';
@@ -45,15 +44,10 @@ const PageLoading: React.FC<PageLoadingProps> = ({
   fullscreen,
   color = '#1890ff',
   id = 'avx-page-loading-container',
-  backgroundColor = '#f3f4f6',
+  backgroundColor = '#f5f5f5',
 }) => {
-  // 控制 progress 颜色
-  useEffect(() => {
-    insertCss(progressColor(color));
-  }, [color]);
-
   // 控制 Progress 显示
-  useProgress(id, progress);
+  useProgress(id, color, progress);
 
   const colorStyle: CSSProperties = { background: color };
 
diff --git a/packages/page-loading/src/useProgress.ts b/packages/page-loading/src/useProgress.ts
index a4c24b01..d88b3eec 100644
--- a/packages/page-loading/src/useProgress.ts
+++ b/packages/page-loading/src/useProgress.ts
@@ -1,7 +1,22 @@
 import { useEffect } from 'react';
 import NProgress from 'nprogress';
+import { insertCss } from 'insert-css';
 
-export const useProgress = (container, enable = true) => {
+const progressColor = (color) => `
+#nprogress .bar {
+  background: ${color};
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
+}
+
+#nprogress .spinner-icon {
+  border-top-color: ${color};
+  border-left-color: ${color};
+}`;
+
+export const useProgress = (container, color, enable = true) => {
   // 控制 Progress 显示
   useEffect(() => {
     // 如果传入 progress props 且为 false
@@ -19,20 +34,9 @@ export const useProgress = (container, enable = true) => {
       NProgress.done();
     };
   }, [container, enable]);
-};
-
 
-
-export const progressColor = (color) => `
-#nprogress .bar {
-  background: ${color};
-}
-
-#nprogress .peg {
-  box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
-}
-
-#nprogress .spinner-icon {
-  border-top-color: ${color};
-  border-left-color: ${color};
-}`;
+  // 控制 progress 颜色
+  useEffect(() => {
+    insertCss(progressColor(color));
+  }, [color]);
+};