💄 style: 优化组件背景色

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 };
 

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]);
+};