需微调

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

@@ -0,0 +1,18 @@
+import { Box, Image } from '@chakra-ui/react';
+import image from '@/resources/welcome/image/background.png';
+
+const BackgroundBlur = () => (
+  <Box
+    position={'absolute'}
+    top={0}
+    left={0}
+    width={'100%'}
+    height={'100%'}
+    filter={'blur(15px'}
+    zIndex={0}
+  >
+    <Image src={image} objectFit={'cover'} width={'100%'} height={'100%'} />
+  </Box>
+);
+
+export default BackgroundBlur;

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

@@ -0,0 +1,52 @@
+import { Box, Heading, Text, VStack, Button, Image, HStack } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+//import groupIcon from '../assets/group.png';
+//import manageIcon from '../assets/materialsymbolsmanageaccountsoutline-1.svg';
+
+const MotionBox = motion(Box);
+const MotionButton = motion(Button);
+
+const WelcomeContent = () => (
+  <VStack spacing={10} py={20} align={'center'} px={4}>
+    <Box textAlign={'center'}>
+      <Heading size="2xl" fontWeight={'black'} color={'teal.300'}>
+        智能网络交换机
+        <br />
+        管理系统
+      </Heading>
+      <Text mt={6} fontSize={'xl'} color={'gray.300'}>
+        助力大型网络交换机配置及网络流量管理，方便的管控网络，让网络配置不再困难
+      </Text>
+    </Box>
+
+    <MotionButton
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.95 }}
+      leftIcon={<Image src={} boxSize={6} />}
+      colorScheme={'teal'}
+      variant={'outline'}
+      px={6}
+      py={4}
+    >
+      管理后台
+    </MotionButton>
+
+    <MotionBox
+      whileHover={{ y: -5 }}
+      display={'flex'}
+      alignItems={'center'}
+      bg={'whiteAlpha.200'}
+      border={'1px solid'}
+      borderColor={'gray.600'}
+      px={4}
+      py={2}
+      borderRadius={'md'}
+      cursor={'pointer'}
+    >
+      <Image src={} boxSize={5} mr={2} />
+      <Text color={'white'}>Github</Text>
+    </MotionBox>
+  </VStack>
+);
+
+export default WelcomeContent;

src/frontend/src/pages/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
-import Header from '../components/Header';
+import Header from '../components/system/Header';
 
 const Dashboard = () => {
   return (

src/frontend/src/pages/Welcome.jsx

@@ -1,19 +1,16 @@
-import React from 'react';
+import { Box } from '@chakra-ui/react';
-import { Box, Button, Heading, VStack } from '@chakra-ui/react';
+import BackgroundBlur from '@/components/pages/welcome/BackgroundBlur';
-import { useNavigate } from 'react-router-dom';
+import Header from '@/components/system/Header';
+import WelcomeContent from '@/components/pages/welcome/WelcomeContent';
 
 const Welcome = () => {
-  const navigate = useNavigate();
   return (
-    <Box textAlign={'center'} py={10} px={6}>
+    <Box position="relative" height="100vh" overflow="hidden">
-      <VStack spacing={4}>
+      <BackgroundBlur />
-        <Heading as={'h1'} size={'x1'}>
+      <Box overflowY="auto" height="100%" zIndex={1} position="relative">
-          欢迎使用交换机管理后台
+        <Header />
-        </Heading>
+        <WelcomeContent />
-        <Button colorScheme={'teal'} onClick={() => navigate('/dashboard')}>
+      </Box>
-          进入控制台
-        </Button>
-      </VStack>
     </Box>
   );
 };