feat: 修改

src/app/[locale]/layout.tsx

@@ -1,6 +1,7 @@
 import { ConfigType } from "@/api/config";
 import Dialogs from "@/components/Dialog";
 // import AutoShowDialog from "@/dialog/auto";
+import Loading2 from "@/components/Loading2";
 import { routing } from "@/i18n/routing";
 import { server } from "@/utils/server";
 import clsx from "clsx";
@@ -111,8 +112,12 @@ export default async function LocaleLayout({
                         top: 0,
                         right: 0,
                         bottom: 0,
+                        alignItems: "center",
+                        justifyContent: "center",
                     }}
-                ></div>
+                >
+                    <Loading2></Loading2>
+                </div>
             </body>
         </html>
     );

src/components/Layout/Sidebar.tsx

@@ -11,7 +11,6 @@ import { server } from "@/utils/client";
 import clsx from "clsx";
 import { useLocale } from "next-intl";
 import Image from "next/image";
-import Router from "next/router";
 import React, { FC, PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./style.module.scss";
 
@@ -98,14 +97,18 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
     );
 
     React.useEffect(() => {
-        Router.events.on("routeChangeComplete", () => {
-            console.log(99990);
-        });
-
+        console.log(pathname);
         setTimeout(() => {
-            Router.events.emit("routeChangeComplete");
-        }, 10000);
-    }, []);
+            const dom: any = document.querySelector("#globalMask");
+            if (dom) dom.style.display = "none";
+        }, 500);
+        // Router.events.on("routeChangeComplete", () => {
+        //     console.log(99990);
+        // });
+        // setTimeout(() => {
+        //     Router.events.emit("routeChangeComplete");
+        // }, 10000);
+    }, [pathname]);
 
     React.useEffect(() => {
         if (!providers || providers.length === 0) {

src/components/Loading2/index.module.scss

@@ -0,0 +1,25 @@
+.loading {
+    text-align: center;
+    line-height: 4px;
+    display: inline-block;
+    span {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #11de68;
+        display: inline-block;
+        margin: 0 4px;
+        transform: translateY(0);
+        animation: loading linear infinite;
+    }
+}
+@keyframes loading {
+    0%,
+    50%,
+    100% {
+        transform: translateY(0);
+    }
+    25% {
+        transform: translateY(-5px);
+    }
+}

src/components/Loading2/index.tsx

@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./index.module.scss";
+
+interface LoadingProps {
+    className?: string; // 可选的 className 属性，用于传递额外的样式类名
+    color?: string;
+    width?: number;
+    space?: number;
+    point?: number;
+    animationDuration?: number;
+}
+
+const Loading: React.FC<LoadingProps> = ({
+    className,
+    color,
+    width = 5,
+    point = 4,
+    space = 2,
+    animationDuration = 800,
+}) => {
+    const Point = ({ idx }: { idx: number }) => {
+        return (
+            <span
+                style={{
+                    backgroundColor: color,
+                    width: `${width}px`,
+                    height: `${width}px`,
+                    animationDelay: `${pointTime * idx}ms`,
+                    animationDuration: `${animationDuration}ms`,
+                    margin: `0 ${space}px`,
+                }}
+            ></span>
+        );
+    };
+    const pointTime = React.useMemo(() => {
+        return animationDuration / 2 / point;
+    }, [point, animationDuration]);
+
+    const PointList = React.useCallback(() => {
+        return Array.from({ length: point }, (_, index) => <Point key={index} idx={index}></Point>);
+    }, [point]);
+
+    return (
+        <div className={clsx(styles.loading, className)}>
+            <PointList></PointList>
+        </div>
+    );
+};
+
+export default Loading;

src/i18n/routing.ts

@@ -24,12 +24,14 @@ export const routing = defineRouting({
 
 const useRouter = () => {
     const router = useBaseRouter();
-
     const cfg: any = { ...router };
     Object.keys(router).forEach((key: any) => {
         cfg[key] = (...args: any) => {
-            const dom: any = document.querySelector("#globalMask");
-            if (dom) dom.style.display = "block";
+            if (key === "push") {
+                const dom: any = document.querySelector("#globalMask");
+                if (dom) dom.style.display = "flex";
+            }
+
             (router as any)[key].apply(null, args);
         };
     });