feat: 新增路由跳转动画

Author: weiqinke

package-lock.json

@@ -36,6 +36,7 @@
     "react-intl": "^6.3.2",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
+    "react-transition-group": "^4.4.5",
     "socket.io-client": "^4.6.1",
     "stylus-loader": "^7.1.0"
   },

package.json

@@ -1,15 +1,25 @@
 import { lazy } from "react";
 
-export const AreaStackChart = lazy(() => import(/* webpackChunkName: "AreaStackChart'"*/ "./AreaStackChart"));
+// export const AreaStackChart = lazy(() => import(/* webpackChunkName: "AreaStackChart'"*/ "./AreaStackChart"));
 
-export const BarChart = lazy(() => import(/* webpackChunkName: "BarChart'"*/ "./BarChart"));
+// export const BarChart = lazy(() => import(/* webpackChunkName: "BarChart'"*/ "./BarChart"));
 
-export const LineChart = lazy(() => import(/* webpackChunkName: "LineChart'"*/ "./LineChart"));
+// export const LineChart = lazy(() => import(/* webpackChunkName: "LineChart'"*/ "./LineChart"));
 
-export const PictorialBarChart = lazy(() => import(/* webpackChunkName: "PictorialBarChart'"*/ "./PictorialBarChart"));
+// export const PictorialBarChart = lazy(() => import(/* webpackChunkName: "PictorialBarChart'"*/ "./PictorialBarChart"));
 
-export const PieChart = lazy(() => import(/* webpackChunkName: "PieChart'"*/ "./PieChart"));
+// export const PieChart = lazy(() => import(/* webpackChunkName: "PieChart'"*/ "./PieChart"));
 
-export const ScatterChart = lazy(() => import(/* webpackChunkName: "ScatterChart'"*/ "./ScatterChart"));
+// export const ScatterChart = lazy(() => import(/* webpackChunkName: "ScatterChart'"*/ "./ScatterChart"));
 
-export const LoginFrequencyChart = lazy(() => import(/* webpackChunkName: "ScatterChart'"*/ "./LoginFrequencyChart"));
+// export const LoginFrequencyChart = lazy(() => import(/* webpackChunkName: "ScatterChart'"*/ "./LoginFrequencyChart"));
+
+import AreaStackChart from "./AreaStackChart";
+import BarChart from "./BarChart";
+import LineChart from "./LineChart";
+import PictorialBarChart from "./PictorialBarChart";
+import PieChart from "./PieChart";
+import ScatterChart from "./ScatterChart";
+import LoginFrequencyChart from "./LoginFrequencyChart";
+
+export { AreaStackChart,BarChart ,LineChart,PictorialBarChart,PieChart,ScatterChart,LoginFrequencyChart};

src/components/Echarts/index.ts

@@ -93,7 +93,7 @@ const DefaultLayoutHeader = () => {
   return (
     <div className={styles.container}>
       <div className={styles.logo} onClick={() => navigate("/workplace")}>
-        {/* <span className={styles.title}>nest-admin</span> */}
+        <span className={styles.title}>nest-admin</span>
       </div>
 
       <div className={styles.user}>

src/components/Headers/DefaultLayoutHeader/index.tsx

@@ -6,7 +6,8 @@ import MenuTagContext from "@/contexts/MenuTagContext";
 import TagsView from "@/pages/TagsView";
 import { Layout } from "antd";
 import React, { Suspense, useContext, useEffect, useState } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
 import styles from "./index.module.scss";
 
@@ -16,6 +17,7 @@ const WorkLayout = () => {
   const { setTagPlanVisible, refresh } = useContext(MenuTagContext);
 
   const [visible, setVisible] = useState(true);
+  const { pathname } = useLocation();
 
   useEffect(() => {
     setVisible(false);
@@ -41,7 +43,11 @@ const WorkLayout = () => {
             <TagsView />
             <Suspense fallback={<SuspendFallbackLoading />}>
               <div className={styles.outletContainer}>
-                <div className={styles.pageOutlet}>{refresh ? <SuspendFallbackLoading /> : <Outlet />}</div>
+                <div className={styles.pageOutlet}>{refresh ? <SuspendFallbackLoading /> : <TransitionGroup>
+                  <CSSTransition key={pathname} timeout={1000} classNames="fade">
+                  <Outlet />
+                  </CSSTransition>
+                </TransitionGroup>}</div>
                 <Copyright />
               </div>
             </Suspense>

src/layout/DefaultLayout/index.tsx

@@ -1,3 +1,23 @@
 .root {
   border-radius: 0;
 }
+
+.fade-enter {
+  opacity: 1;
+  transform: translateX(100%);
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: transform 1s ease-in-out,;
+  transform: translateX(0px);
+}
+
+
+.fade-exit {
+  opacity: 0;
+}
+
+.fade-exit-active {
+  opacity: 0;
+}

src/pages/Root/index.scss

@@ -11,6 +11,11 @@
   top: 0px;
   left: -5px;
 }
+.changettag{
+  .anticon-close{
+    color:#000;
+  }
+}
 
 .contextmenuDom {
   user-select: none;