mirror of
https://github.com/Jerryplusy/AI-powered-switches.git
synced 2025-07-04 13:19:20 +00:00
完善欢迎页面
This commit is contained in:
parent
310b4f2bb1
commit
ddaf4ce071
@ -8,7 +8,7 @@ const BackgroundBlur = () => (
|
||||
left={0}
|
||||
width={'100%'}
|
||||
height={'100%'}
|
||||
filter={'blur(15px'}
|
||||
filter={'blur(6px)'}
|
||||
zIndex={0}
|
||||
>
|
||||
<Image src={image} objectFit={'cover'} width={'100%'} height={'100%'} />
|
||||
|
||||
@ -1,52 +1,34 @@
|
||||
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';
|
||||
import { Box, Heading, Text, VStack } from '@chakra-ui/react';
|
||||
import githubIcon from '@/resources/welcome/image/github.svg';
|
||||
import manageIcon from '@/resources/welcome/image/setting.svg';
|
||||
import MotionCard from '@/components/ui/MotionCard';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const MotionBox = motion(Box);
|
||||
const MotionButton = motion(Button);
|
||||
const WelcomeContent = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
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>
|
||||
return (
|
||||
<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>
|
||||
<MotionCard icon={manageIcon} text="管理后台" onClick={() => navigate('/dashboard')} />
|
||||
|
||||
<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>
|
||||
);
|
||||
<MotionCard
|
||||
icon={githubIcon}
|
||||
text="Github"
|
||||
onClick={() => window.open('https://github.com/Jerryplusy/AI-powered-switches', '_blank')}
|
||||
/>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomeContent;
|
||||
|
||||
25
src/frontend/src/components/ui/MotionCard.jsx
Normal file
25
src/frontend/src/components/ui/MotionCard.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Box, Text, Image } from '@chakra-ui/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const MotionBox = motion(Box);
|
||||
|
||||
const MotionCard = ({ icon, text, onClick }) => (
|
||||
<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'}
|
||||
onClick={onClick}
|
||||
>
|
||||
{icon && <Image src={icon} boxSize={5} mr={2} />}
|
||||
<Text color={'white'}>{text}</Text>
|
||||
</MotionBox>
|
||||
);
|
||||
|
||||
export default MotionCard;
|
||||
@ -1,14 +1,12 @@
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import BackgroundBlur from '@/components/pages/welcome/BackgroundBlur';
|
||||
import Header from '@/components/system/Header';
|
||||
import WelcomeContent from '@/components/pages/welcome/WelcomeContent';
|
||||
|
||||
const Welcome = () => {
|
||||
return (
|
||||
<Box position="relative" height="100vh" overflow="hidden">
|
||||
<Box position={'relative'} height={'100vh'} overflow={'hidden'}>
|
||||
<BackgroundBlur />
|
||||
<Box overflowY="auto" height="100%" zIndex={1} position="relative">
|
||||
<Header />
|
||||
<Box overflowY={'auto'} height={'100%'} zIndex={1} position={'relative'}>
|
||||
<WelcomeContent />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
4
src/frontend/src/resources/welcome/image/github.svg
Normal file
4
src/frontend/src/resources/welcome/image/github.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.83329 16.14C4.97579 17.1042 2.59496 16.14 1.16663 13.1667" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.83329 17.3333V14.6317C7.83329 14.1333 7.98663 13.7 8.23329 13.3083C8.40329 13.04 8.28663 12.6583 7.98079 12.575C5.44496 11.8767 3.66663 10.7558 3.66663 7.0375C3.66663 6.07083 3.98329 5.1625 4.53996 4.37083C4.67829 4.17417 4.74829 4.07583 4.76496 3.9875C4.78163 3.8975 4.75246 3.78167 4.69413 3.54833C4.45829 2.60167 4.47413 1.59583 4.82746 0.69C4.82746 0.69 5.55829 0.450833 7.22246 1.49C7.60246 1.7275 7.79246 1.84667 7.95996 1.87333C8.12746 1.9 8.35079 1.84417 8.79746 1.7325C9.4361 1.57416 10.092 1.49606 10.75 1.5C11.4079 1.49719 12.0637 1.57556 12.7025 1.73333C13.1491 1.845 13.3733 1.9 13.5408 1.87417C13.7075 1.8475 13.8975 1.72833 14.2775 1.49083C15.9416 0.451667 16.6725 0.690833 16.6725 0.690833C17.0258 1.59667 17.0416 2.6025 16.8058 3.54917C16.7475 3.7825 16.7191 3.89917 16.7358 3.9875C16.7525 4.07583 16.8216 4.175 16.96 4.37167C17.5166 5.16333 17.8333 6.07167 17.8333 7.03833C17.8333 10.7567 16.055 11.8775 13.5191 12.5742C13.2133 12.6583 13.0966 13.04 13.2666 13.3075C13.5133 13.6992 13.6666 14.1325 13.6666 14.6317V17.3333" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
src/frontend/src/resources/welcome/image/setting.svg
Normal file
3
src/frontend/src/resources/welcome/image/setting.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4166 13C9.27081 13 8.28991 12.592 7.47394 11.7761C6.65797 10.9601 6.24998 9.97919 6.24998 8.83335C6.24998 7.68752 6.65797 6.70662 7.47394 5.89065C8.28991 5.07467 9.27081 4.66669 10.4166 4.66669C11.5625 4.66669 12.5434 5.07467 13.3594 5.89065C14.1753 6.70662 14.5833 7.68752 14.5833 8.83335C14.5833 9.97919 14.1753 10.9601 13.3594 11.7761C12.5434 12.592 11.5625 13 10.4166 13ZM2.08331 21.3334V18.4167C2.08331 17.8438 2.23088 17.3056 2.52602 16.8021C2.82116 16.2986 3.22915 15.9167 3.74998 15.6563C4.6354 15.2049 5.63366 14.8229 6.74477 14.5104C7.85588 14.1979 9.07984 14.0417 10.4166 14.0417H10.7812C10.8854 14.0417 10.9896 14.059 11.0937 14.0938C10.9548 14.4063 10.8378 14.732 10.7427 15.0709C10.6475 15.4097 10.5736 15.7611 10.5208 16.125H10.4166C9.18401 16.125 8.07741 16.2813 7.09685 16.5938C6.1163 16.9063 5.31317 17.2188 4.68748 17.5313C4.53123 17.6181 4.40519 17.7396 4.30935 17.8959C4.21352 18.0521 4.16595 18.2257 4.16665 18.4167V19.25H10.7291C10.8333 19.6146 10.9722 19.975 11.1458 20.3313C11.3194 20.6875 11.5104 21.0215 11.7187 21.3334H2.08331ZM16.6666 22.375L16.3541 20.8125C16.1458 20.7257 15.9507 20.6347 15.7687 20.5396C15.5868 20.4445 15.4 20.3271 15.2083 20.1875L13.6979 20.6563L12.6562 18.8854L13.8541 17.8438C13.8194 17.6007 13.8021 17.375 13.8021 17.1667C13.8021 16.9584 13.8194 16.7327 13.8541 16.4896L12.6562 15.4479L13.6979 13.6771L15.2083 14.1459C15.3993 14.007 15.5861 13.89 15.7687 13.7948C15.9514 13.6997 16.1465 13.6084 16.3541 13.5209L16.6666 11.9584H18.75L19.0625 13.5209C19.2708 13.6077 19.4663 13.7031 19.6489 13.8073C19.8316 13.9115 20.018 14.0417 20.2083 14.1979L21.7187 13.6771L22.7604 15.5L21.5625 16.5417C21.5972 16.75 21.6146 16.967 21.6146 17.1927C21.6146 17.4184 21.5972 17.6354 21.5625 17.8438L22.7604 18.8854L21.7187 20.6563L20.2083 20.1875C20.0173 20.3264 19.8309 20.4438 19.6489 20.5396C19.467 20.6354 19.2715 20.7264 19.0625 20.8125L18.75 22.375H16.6666ZM17.7083 19.25C18.2812 19.25 18.7719 19.0462 19.1802 18.6386C19.5885 18.2309 19.7923 17.7403 19.7916 17.1667C19.791 16.5931 19.5871 16.1028 19.1802 15.6959C18.7732 15.2889 18.2826 15.0847 17.7083 15.0834C17.134 15.082 16.6437 15.2861 16.2375 15.6959C15.8312 16.1056 15.6271 16.5959 15.625 17.1667C15.6229 17.7375 15.8271 18.2281 16.2375 18.6386C16.6479 19.049 17.1382 19.2528 17.7083 19.25ZM10.4166 10.9167C10.9896 10.9167 11.4802 10.7129 11.8885 10.3052C12.2969 9.89759 12.5007 9.40696 12.5 8.83335C12.4993 8.25974 12.2955 7.76946 11.8885 7.36252C11.4816 6.95558 10.991 6.75141 10.4166 6.75002C9.84234 6.74863 9.35206 6.9528 8.94581 7.36252C8.53956 7.77224 8.3354 8.26252 8.33331 8.83335C8.33123 9.40419 8.5354 9.89481 8.94581 10.3052C9.35623 10.7156 9.84651 10.9195 10.4166 10.9167Z" fill="#2EE2E5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Loading…
x
Reference in New Issue
Block a user