新增全局加载进度条组件

2025-04-24 20:51:10 +08:00
parent 65b7d0739a
commit 0eaaa5b041
6 changed files with 340 additions and 144 deletions
@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface LoadingBarProps {
+  isVisible: boolean;
+  isComplete?: boolean;
+  height?: number;
+  className?: string;
+}
+
+// 加载进度条状态管理
+let showLoadingBar: (show: boolean, completeFirst?: boolean) => void = () => {};
+let loadingBarVisible = false;
+
+export function LoadingBar({ 
+  isVisible,
+  isComplete = false,
+  height = 2,
+  className = ''
+}: LoadingBarProps) {
+  // 当组件挂载时，进行进度的随机增长动画
+  const [progress, setProgress] = useState(0);
+  
+  // 处理完成状态
+  useEffect(() => {
+    if (isComplete) {
+      // 立即将进度设为100%
+      setProgress(100);
+    }
+  }, [isComplete]);
+  
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    
+    if (isVisible && progress < 90) {
+      // 随机增长进度，模拟加载 - 加速更新频率
+      interval = setInterval(() => {
+        setProgress(prev => {
+          // 进度越大，增长越慢
+          const increment = Math.random() * (20 - prev / 8);
+          return Math.min(prev + increment, 90);
+        });
+      }, 300); // 更高频率的更新
+    } else if (!isVisible) {
+      // 隐藏时重置进度
+      setProgress(0);
+    }
+    
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isVisible, progress]);
+  
+  // 当isVisible变化时，立即触发显示或隐藏效果
+  useEffect(() => {
+    if (isVisible) {
+      setProgress(20); // 立刻显示更多进度
+    } else if (progress > 0) {
+      // 如果已经有进度了，先快速完成进度，然后再隐藏
+      setProgress(100);
+      const timeout = setTimeout(() => {
+        setProgress(0);
+      }, 300); // 更快的隐藏
+      return () => clearTimeout(timeout);
+    }
+  }, [isVisible]);
+  
+  if (!isVisible && progress === 0) return null;
+  
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[9999]">
+      <div
+        className={`${className} animate-pulse`}
+        style={{ 
+          height: `${height}px`, 
+          width: `${progress}%`,
+          opacity: progress > 0 ? 1 : 0,
+          transition: 'width 0.3s ease-out, opacity 0.2s ease-in-out',
+          background: 'linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%)',
+          boxShadow: '0 0 10px rgba(0, 104, 74, 0.7)'
+        }}
+      />
+    </div>
+  );
+}
+
+// 创建一个全局加载进度条容器
+function LoadingBarContainer() {
+  const [visible, setVisible] = useState(loadingBarVisible);
+  const [completeBeforeHide, setCompleteBeforeHide] = useState(false);
+  
+  // 保存引用以便外部调用
+  useEffect(() => {
+    showLoadingBar = (show: boolean, completeFirst: boolean = false) => {
+      if (!show && completeFirst) {
+        // 当隐藏时，先触发完成动画，再隐藏
+        setCompleteBeforeHide(true);
+        // 延迟隐藏，以让完成动画显示出来
+        setTimeout(() => {
+          loadingBarVisible = false;
+          setVisible(false);
+          setCompleteBeforeHide(false);
+        }, 500);
+      } else {
+        loadingBarVisible = show;
+        setVisible(show);
+        if (!show) {
+          setCompleteBeforeHide(false);
+        }
+      }
+    };
+  }, []);
+  
+  // 使用Portal确保加载进度条总是渲染在body末尾
+  return typeof window !== 'undefined' 
+    ? createPortal(
+        <LoadingBar isVisible={visible} isComplete={completeBeforeHide} />,
+        document.body
+      )
+    : null;
+}
+
+// 导出全局控制函数
+export const loadingBarService = {
+  show: () => showLoadingBar(true),
+  hide: () => showLoadingBar(false, true),
+  toggle: () => showLoadingBar(!loadingBarVisible),
+  isVisible: () => loadingBarVisible
+};
+
+export default LoadingBarContainer;