优化

src/frontend/README.md

@@ -18,3 +18,10 @@
 - 执行`pnpm build`进行`react`服务端构建
 - 运行`pnpm start`启动服务端
 - 服务运行在本地`3000`端口
+
+#### 功能(后端)
+- []监控网络流量
+- []扫描环境中的交换机
+- []自然语言解析命令
+- []下发配置到交换机
+- []流量预测

src/frontend/src/components/system/layout/AppShell.jsx

@@ -1,7 +1,7 @@
 import { Outlet, useLocation } from 'react-router-dom';
-import PageTransition from './PageTransition';
 import { Box } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
+import PageTransition from './PageTransition';
 import GithubTransitionCard from '@/components/system/layout/github/GithubTransitionCard';
 
 /**
@@ -11,12 +11,11 @@ import GithubTransitionCard from '@/components/system/layout/github/GithubTransi
  */
 const AppShell = () => {
   const location = useLocation();
-
   return (
-    <Box position={'relative'} height={'100vh'} overflow={'hidden'}>
+    <Box position="relative" height="100vh" overflow="hidden">
       <GithubTransitionCard />
-      <Box overflowY={'auto'} height={'100%'}>
-        <AnimatePresence mode={'sync'}>
+      <Box overflowY="auto" height="100%">
+        <AnimatePresence mode="wait" initial={false}>
           <PageTransition key={location.pathname}>
             <Outlet />
           </PageTransition>

src/frontend/src/components/system/layout/FadeInWrapper.jsx

@@ -1,29 +1,43 @@
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 
 /**
- * 组件载入动画
+ * 组件进入 / 离开时的淡入淡出动画
  * @param children 子组件
  * @param delay 延迟
  * @param yOffset y轴偏移量
  * @param duration 动画时间
  * @param className 类名
+ * @param props
  * @returns {JSX.Element}
  * @constructor
  */
-const FadeInWrapper = ({ children, delay = 0, yOffset = 10, duration = 0.6, className = '' }) => {
+const FadeInWrapper = ({
+  children,
+  delay = 0,
+  yOffset = 10,
+  duration = 0.6,
+  className = '',
+  ...props
+}) => {
   return (
-    <motion.div
-      initial={{ opacity: 0, y: yOffset }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{
-        delay,
-        duration,
-        ease: [0.16, 0.77, 0.47, 0.97],
-      }}
-      className={className}
-    >
-      {children}
-    </motion.div>
+    <AnimatePresence mode="wait">
+      <motion.div
+        key="fade-wrapper"
+        initial={{ opacity: 0, y: yOffset }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -yOffset }}
+        transition={{
+          delay,
+          duration,
+          ease: [0.16, 0.77, 0.47, 0.97],
+        }}
+        className={className}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
   );
 };
+
 export default FadeInWrapper;

src/frontend/src/pages/Dashboard.jsx

@@ -3,15 +3,18 @@ import { Box, Text } from '@chakra-ui/react';
 import DocumentTitle from '@/components/system/pages/DocumentTitle';
 import PageContainer from '@/components/system/PageContainer';
 import DashboardBackground from '@/components/system/pages/DashboardBackground';
+import FadeInWrapper from '@/components/system/layout/FadeInWrapper';
 
 const Dashboard = () => {
   return (
     <DocumentTitle title={'控制台'}>
       <DashboardBackground />
       <PageContainer>
-        <Box p={6}>
-          <Text fontSize={'xl'}>控制台奇怪的功能+1</Text>
-        </Box>
+        <FadeInWrapper delay={0.1} yOffset={-5}>
+          <Box p={6}>
+            <Text fontSize={'xl'}>控制台奇怪的功能+1</Text>
+          </Box>
+        </FadeInWrapper>
       </PageContainer>
     </DocumentTitle>
   );