添加动画

src/frontend/src/App.jsx

@@ -1,13 +1,16 @@
-import { Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Welcome from '@/pages/Welcome';
+import AppShell from '@/components/system/layout/AppShell';
-import Dashboard from '@/pages/Dashboard';
+import buildRoutes from '@/constants/routes/routes';
 
 const App = () => {
   return (
+    <BrowserRouter>
       <Routes>
-      <Route path={'/'} element={<Welcome />} />
+        <Route path="/" element={<AppShell />}>
-      <Route path={'/dashboard'} element={<Dashboard />} />
+          {buildRoutes()}
+        </Route>
       </Routes>
+    </BrowserRouter>
   );
 };
 

src/frontend/src/components/pages/welcome/DashboardCard.jsx

@@ -0,0 +1,10 @@
+import manageIcon from '@/resources/welcome/image/setting.svg';
+import MotionCard from '@/components/ui/MotionCard';
+import { useNavigate } from 'react-router-dom';
+
+const DashboardCard = () => {
+  const navigate = useNavigate();
+  return <MotionCard icon={manageIcon} text="管理后台" onClick={() => navigate('/dashboard')} />;
+};
+
+export default DashboardCard;

src/frontend/src/components/pages/welcome/GithubCard.jsx

@@ -0,0 +1,14 @@
+import githubIcon from '@/resources/welcome/image/github.svg';
+import MotionCard from '@/components/ui/MotionCard';
+
+const GithubCard = () => {
+  return (
+    <MotionCard
+      icon={githubIcon}
+      text={'github'}
+      onClick={() => window.open('https://github.com/Jerryplusy/AI-powered-switches', '_blank')}
+    />
+  );
+};
+
+export default GithubCard;

src/frontend/src/components/pages/welcome/WelcomeContent.jsx

@@ -1,32 +1,20 @@
 import { Box, Heading, Text, VStack } from '@chakra-ui/react';
-import githubIcon from '@/resources/welcome/image/github.svg';
+import DashboardCard from '@/components/pages/welcome/DashboardCard';
-import manageIcon from '@/resources/welcome/image/setting.svg';
-import MotionCard from '@/components/ui/MotionCard';
-import { useNavigate } from 'react-router-dom';
 
 const WelcomeContent = () => {
-  const navigate = useNavigate();
-
   return (
-    <VStack spacing={10} py={20} align="center" px={4}>
+    <VStack spacing={10} py={200} align="center" px={4}>
       <Box textAlign="center">
-        <Heading size="2xl" fontWeight="black" color="teal.300">
+        <Heading size="6xl" fontWeight="black" color="teal.300">
           智能网络交换机
           <br />
           管理系统
         </Heading>
-        <Text mt={6} fontSize="xl" color="gray.300">
+        <Text mt={6} fontSize="2xl" color="gray.300">
           助力大型网络交换机配置及网络流量管理，方便的管控网络，让网络配置不再困难
         </Text>
       </Box>
-
+      <DashboardCard />
-      <MotionCard icon={manageIcon} text="管理后台" onClick={() => navigate('/dashboard')} />
-
-      <MotionCard
-        icon={githubIcon}
-        text="Github"
-        onClick={() => window.open('https://github.com/Jerryplusy/AI-powered-switches', '_blank')}
-      />
     </VStack>
   );
 };

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

@@ -0,0 +1,22 @@
+import { Outlet, useLocation } from 'react-router-dom';
+import PageTransition from './PageTransition';
+import { Box } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
+
+const AppShell = () => {
+  const location = useLocation();
+
+  return (
+    <Box position={'relative'} height={'100vh'} overflow={'hidden'}>
+      <Box overflowY={'auto'} height={'100%'}>
+        <AnimatePresence mode={'wait'}>
+          <PageTransition key={location.pathname}>
+            <Outlet />
+          </PageTransition>
+        </AnimatePresence>
+      </Box>
+    </Box>
+  );
+};
+
+export default AppShell;

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

@@ -0,0 +1,53 @@
+import { useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Box, Text, Image } from '@chakra-ui/react';
+import githubIcon from '@/resources/welcome/image/github.svg';
+
+const GithubNavTransition = () => {
+  const { pathname } = useLocation();
+  const isDashboard = pathname.startsWith('/dashboard');
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        key={isDashboard ? 'nav' : 'icon'}
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{
+          opacity: 1,
+          scale: 1,
+          right: 16,
+          top: 16,
+          width: isDashboard ? 160 : 50,
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{ duration: 0.4 }}
+        style={{
+          position: 'absolute',
+          zIndex: 20,
+        }}
+      >
+        <Box
+          display={'flex'}
+          alignItems={'center'}
+          bg={'whiteAlpha.200'}
+          border={'1px solid'}
+          borderColor={'gray.600'}
+          px={isDashboard ? 4 : 2}
+          py={2}
+          borderRadius={'md'}
+          cursor={'pointer'}
+          onClick={() => window.open('https://github.com/Jerryplusy/AI-powered-switches', '_blank')}
+        >
+          <Image src={githubIcon} boxSize={5} mr={2} />
+          {isDashboard && (
+            <Text color={'white'} fontSize={'sm'}>
+              GitHub 项目主页
+            </Text>
+          )}
+        </Box>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default GithubNavTransition;

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

@@ -0,0 +1,13 @@
+import { motion } from 'framer-motion';
+
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 10 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.2 }}
+  >
+    {children}
+  </motion.div>
+);
+
+export default PageTransition;

src/frontend/src/constants/routes/routes.jsx

@@ -0,0 +1,13 @@
+import { Route } from 'react-router-dom';
+import Welcome from '@/pages/Welcome';
+import Dashboard from '@/pages/Dashboard';
+
+const routeList = [
+  { path: '/', element: <Welcome /> },
+  { path: '/dashboard', element: <Dashboard /> },
+];
+
+const buildRoutes = () =>
+  routeList.map(({ path, element }) => <Route key={path} path={path} element={element} />);
+
+export default buildRoutes;

src/frontend/src/index.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@/App';
-import { BrowserRouter } from 'react-router-dom';
 import { Provider } from '@/components/ui/provider';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Provider>
-    <BrowserRouter>
     <App />
-    </BrowserRouter>
   </Provider>
 );

src/frontend/src/pages/Welcome.jsx

@@ -1,11 +1,15 @@
 import { Box } from '@chakra-ui/react';
 import BackgroundBlur from '@/components/pages/welcome/BackgroundBlur';
 import WelcomeContent from '@/components/pages/welcome/WelcomeContent';
+import GithubCard from '@/components/pages/welcome/GithubCard';
 
 const Welcome = () => {
   return (
     <Box position={'relative'} height={'100vh'} overflow={'hidden'}>
       <BackgroundBlur />
+      <Box position={'absolute'} top={4} right={4} zIndex={10}>
+        <GithubCard />
+      </Box>
       <Box overflowY={'auto'} height={'100%'} zIndex={1} position={'relative'}>
         <WelcomeContent />
       </Box>