frontend: add loading

Author: chenghh-9609

frontend/src/components/TopLoadingBar.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+
+const TopLoadingBar = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const intervalRef = useRef(null);
+
+  useEffect(() => {
+    // 监听全局事件
+    const handleShow = () => {
+      setIsVisible(true);
+      setProgress(0);
+
+      // 清除可能存在的旧interval
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+
+      // 模拟进度
+      let currentProgress = 0;
+      intervalRef.current = setInterval(() => {
+        currentProgress += Math.random() * 10;
+        if (currentProgress >= 90) {
+          clearInterval(intervalRef.current);
+        }
+        setProgress(currentProgress);
+      }, 200);
+    };
+
+    const handleHide = () => {
+      // 清除进度interval
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setProgress(100);
+      setTimeout(() => {
+        setIsVisible(false);
+        setProgress(0);
+      }, 300);
+    };
+
+    // 添加全局事件监听器
+    window.addEventListener("loading:show", handleShow);
+    window.addEventListener("loading:hide", handleHide);
+
+    return () => {
+      // 组件卸载时清理
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      window.removeEventListener("loading:show", handleShow);
+      window.removeEventListener("loading:hide", handleHide);
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log(progress);
+  }, [progress]);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="top-loading-bar">
+      <div
+        className="loading-bar-progress"
+        style={{ width: `${progress}%` }}
+      ></div>
+    </div>
+  );
+};
+
+export default TopLoadingBar;

frontend/src/hooks/useFetchData.ts

@@ -1,6 +1,7 @@
 // 首页数据获取
 import { useState } from "react";
 import { useDebouncedEffect } from "./useDebouncedEffect";
+import Loading from "@/utils/loading";
 
 export default function useFetchData<T>(
   fetchFunc: (params?: any) => Promise<any>,
@@ -52,6 +53,7 @@ export default function useFetchData<T>(
 
   async function fetchData() {
     const { keywords, filter, current, pageSize } = searchParams;
+    Loading.show();
     const { data } = await fetchFunc({
       ...filter,
       keywords,
@@ -67,6 +69,7 @@ export default function useFetchData<T>(
     }));
     const result = data?.results ?? [];
     setTableData(result.map(mapDataFunc));
+    Loading.hide();
 
     console.log(data, result.map(mapDataFunc));
   }

frontend/src/index.css

@@ -1,2 +1,39 @@
-@import "tailwindcss"
+@import "tailwindcss";
 
+/* components/TopLoadingBar.css */
+.top-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: transparent;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.loading-bar-progress {
+  height: 100%;
+  background: linear-gradient(90deg, #3498db, #2ecc71, #3498db);
+  background-size: 200% 100%;
+  animation: gradient-animation 2s linear infinite, width-animation 0.3s ease;
+  transition: width 0.3s ease;
+}
+
+@keyframes gradient-animation {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes width-animation {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

frontend/src/main.tsx

@@ -4,13 +4,15 @@ import { RouterProvider } from "react-router";
 import router from "./routes/routes";
 import { App as AntdApp, Spin } from "antd";
 import "./index.css";
+import TopLoadingBar from "./components/TopLoadingBar";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <Suspense fallback={<Spin />}>
-      <AntdApp>
+    <AntdApp>
+      <Suspense fallback={<Spin />}>
+        <TopLoadingBar />
         <RouterProvider router={router} />
-      </AntdApp>
-    </Suspense>
+      </Suspense>
+    </AntdApp>
   </StrictMode>
 );

frontend/src/utils/loading.ts

@@ -0,0 +1,55 @@
+class LoadingManager {
+  constructor() {
+    this.isShowing = false;
+    this.queue = 0; // 支持多个并发请求
+  }
+
+  show() {
+    this.queue++;
+    this.isShowing = true;
+
+    // 触发全局事件
+    const event = new Event("loading:show");
+    window.dispatchEvent(event);
+  }
+
+  hide() {
+    this.queue = Math.max(0, this.queue - 1);
+
+    if (this.queue === 0) {
+      this.isShowing = false;
+      // 触发全局事件
+      const event = new Event("loading:hide");
+      window.dispatchEvent(event);
+    }
+  }
+
+  // 强制隐藏所有加载
+  hideAll() {
+    this.queue = 0;
+    this.isShowing = false;
+    const event = new Event("loading:hide");
+    window.dispatchEvent(event);
+  }
+
+  // 获取当前状态
+  getStatus() {
+    return {
+      isShowing: this.isShowing,
+      queueCount: this.queue,
+    };
+  }
+}
+
+// 创建单例实例
+const loadingManager = new LoadingManager();
+
+// 导出常用方法
+export const Loading = {
+  show: () => loadingManager.show(),
+  hide: () => loadingManager.hide(),
+  hideAll: () => loadingManager.hideAll(),
+  getStatus: () => loadingManager.getStatus(),
+};
+
+export default Loading;