diff --git a/.idea/AI-powered-switches.iml b/.idea/AI-powered-switches.iml index b7e68da..a1bf3bb 100644 --- a/.idea/AI-powered-switches.iml +++ b/.idea/AI-powered-switches.iml @@ -2,7 +2,7 @@ - + @@ -11,5 +11,6 @@ + \ No newline at end of file diff --git a/src/frontend/README.md b/src/frontend/README.md index b095bd8..0afe616 100644 --- a/src/frontend/README.md +++ b/src/frontend/README.md @@ -25,4 +25,6 @@ - []自然语言解析命令 - []下发配置到交换机 - []流量预测 -- []图表显示 \ No newline at end of file +- []图表显示 + +172.17.99.208 \ No newline at end of file diff --git a/src/frontend/src/components/pages/welcome/BackgroundBlur.jsx b/src/frontend/src/components/pages/welcome/BackgroundBlur.jsx index e2771ad..31500d1 100644 --- a/src/frontend/src/components/pages/welcome/BackgroundBlur.jsx +++ b/src/frontend/src/components/pages/welcome/BackgroundBlur.jsx @@ -1,6 +1,6 @@ import { Box, Image } from '@chakra-ui/react'; import { motion } from 'framer-motion'; -import image from '@/resources/welcome/image/background.png'; +import image from '@/resources/image/welcome/background.png'; const MotionBox = motion(Box); diff --git a/src/frontend/src/components/pages/welcome/ConfigureCard.jsx b/src/frontend/src/components/pages/welcome/ConfigureCard.jsx new file mode 100644 index 0000000..efc9681 --- /dev/null +++ b/src/frontend/src/components/pages/welcome/ConfigureCard.jsx @@ -0,0 +1,18 @@ +import MotionCard from '@/components/ui/MotionCard'; +import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; +import configIcon from '@/resources/icon/pages/weclome/config.svg'; + +/** + * 连接配置卡片组件 + * @param onClick 点击事件 + * @returns {JSX.Element} + */ +const ConfigureCard = ({ onClick }) => { + return ( + + + + ); +}; + +export default ConfigureCard; diff --git a/src/frontend/src/components/pages/welcome/ConnectionConfigModal.jsx b/src/frontend/src/components/pages/welcome/ConnectionConfigModal.jsx new file mode 100644 index 0000000..5a3fb45 --- /dev/null +++ b/src/frontend/src/components/pages/welcome/ConnectionConfigModal.jsx @@ -0,0 +1,183 @@ +import { useState, useEffect, useRef } from 'react'; +import { + Button, + Box, + Dialog, + DialogBackdrop, + DialogPositioner, + DialogContent, + DialogCloseTrigger, + DialogHeader, + DialogBody, + DialogFooter, + Field, + Input, + Portal, + Stack, +} from '@chakra-ui/react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { IoClose } from 'react-icons/io5'; +import { FiCheck } from 'react-icons/fi'; + +const MotionBox = motion(Box); +const defaultConfig = { + backendUrl: '', + authKey: '', +}; + +const ConnectionConfigModal = ({ isOpen, onClose, onSave }) => { + const [config, setConfig] = useState(defaultConfig); + const [saved, setSaved] = useState(false); + const backendRef = useRef(null); + + useEffect(() => { + const savedData = localStorage.getItem('connection-config'); + if (savedData) { + setConfig(JSON.parse(savedData)); + } + }, []); + + const handleChange = (e) => { + const { name, value } = e.target; + setConfig((prev) => ({ ...prev, [name]: value })); + }; + + const handleSave = () => { + localStorage.setItem('connection-config', JSON.stringify(config)); + onSave(config); + setSaved(true); + setTimeout(() => { + setSaved(false); + onClose(); + }, 1200); + }; + + const handleClear = () => { + localStorage.removeItem('connection-config'); + setConfig(defaultConfig); + }; + + return ( + backendRef.current}> + + + + + 地址配置 + + + + + + + + 后端连接地址 + + + + 连接密钥 + + + + + + + + + + + + + + + + + + + ); +}; + +export default ConnectionConfigModal; diff --git a/src/frontend/src/components/pages/welcome/DashboardCard.jsx b/src/frontend/src/components/pages/welcome/DashboardCard.jsx index 921e4e6..c9a3229 100644 --- a/src/frontend/src/components/pages/welcome/DashboardCard.jsx +++ b/src/frontend/src/components/pages/welcome/DashboardCard.jsx @@ -1,4 +1,4 @@ -import manageIcon from '@/resources/welcome/image/setting.svg'; +import manageIcon from '@/resources/icon/pages/weclome/setting.svg'; import MotionCard from '@/components/ui/MotionCard'; import { useNavigate } from 'react-router-dom'; import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; @@ -8,11 +8,17 @@ import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; * @returns {JSX.Element} * @constructor */ -const DashboardCard = () => { +const DashboardCard = ({ isConfigured }) => { const navigate = useNavigate(); + const handleClick = () => { + if (isConfigured) { + navigate('/dashboard'); + } else { + } + }; return ( - navigate('/dashboard')} /> + handleClick()} /> ); }; diff --git a/src/frontend/src/components/pages/welcome/GithubCard.jsx b/src/frontend/src/components/pages/welcome/GithubCard.jsx index 863cb77..352612a 100644 --- a/src/frontend/src/components/pages/welcome/GithubCard.jsx +++ b/src/frontend/src/components/pages/welcome/GithubCard.jsx @@ -1,4 +1,4 @@ -import githubIcon from '@/resources/welcome/image/github.svg'; +import githubIcon from '@/resources/icon/pages/weclome/github.svg'; import MotionCard from '@/components/ui/MotionCard'; import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; diff --git a/src/frontend/src/components/pages/welcome/WelcomeContent.jsx b/src/frontend/src/components/pages/welcome/WelcomeContent.jsx index b350722..1beb393 100644 --- a/src/frontend/src/components/pages/welcome/WelcomeContent.jsx +++ b/src/frontend/src/components/pages/welcome/WelcomeContent.jsx @@ -1,33 +1,73 @@ -import { Box, Heading, Text, VStack } from '@chakra-ui/react'; +import { Box, Heading, Text, VStack, HStack } from '@chakra-ui/react'; import DashboardCard from '@/components/pages/welcome/DashboardCard'; import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; +import { useState, useEffect } from 'react'; +import ConnectionConfigModal from '@/components/pages/welcome/ConnectionConfigModal'; +import ConfigureCard from '@/components/pages/welcome/ConfigureCard'; /** - * 欢迎文字 + * 欢迎页面内容 * @returns {JSX.Element} * @constructor */ const WelcomeContent = () => { + const [showConfigModal, setShowConfigModal] = useState(false); + const [isConfigured, setIsConfigured] = useState(false); + //const [showAlert, setShowAlert] = useState(false); + + useEffect(() => { + const saved = localStorage.getItem('connection-config'); + if (saved) { + setIsConfigured(true); + } + }, []); + + const handleSave = () => { + setIsConfigured(true); + //setShowAlert(false); + }; + + const handleConfigureClick = () => { + if (!isConfigured) { + //setShowAlert(true); + } + setShowConfigModal(true); + }; + return ( - - - - - 智能网络交换机 -
- 管理系统 -
-
-
- - - - 助力大型网络交换机配置及网络流量管理,方便的管控网络,让网络配置不再困难 - - - - -
+ <> + + + + + 智能网络交换机 +
+ 管理系统 +
+
+
+ + + + 助力大型网络交换机配置及网络流量管理,方便的管控网络,让网络配置不再困难 + + + + + + + + + + +
+ + setShowConfigModal(false)} + onSave={handleSave} + /> + ); }; diff --git a/src/frontend/src/components/system/layout/github/GithubTransitionCard.jsx b/src/frontend/src/components/system/layout/github/GithubTransitionCard.jsx index fd18391..f8bb143 100644 --- a/src/frontend/src/components/system/layout/github/GithubTransitionCard.jsx +++ b/src/frontend/src/components/system/layout/github/GithubTransitionCard.jsx @@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { AnimatePresence, motion } from 'framer-motion'; import { Button, HStack } from '@chakra-ui/react'; -import web from '@/resources/icon/web.svg'; -import githubIcon from '@/resources/welcome/image/github.svg'; +import web from '@/resources/icon/pages/weclome/web.svg'; +import githubIcon from '@/resources/icon/pages/weclome/github.svg'; import FadeInWrapper from '@/components/system/layout/FadeInWrapper'; import MotionCard from '@/components/ui/MotionCard'; diff --git a/src/frontend/src/resources/icon/pages/weclome/config.svg b/src/frontend/src/resources/icon/pages/weclome/config.svg new file mode 100644 index 0000000..e32f093 --- /dev/null +++ b/src/frontend/src/resources/icon/pages/weclome/config.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/frontend/src/resources/welcome/image/github.svg b/src/frontend/src/resources/icon/pages/weclome/github.svg similarity index 100% rename from src/frontend/src/resources/welcome/image/github.svg rename to src/frontend/src/resources/icon/pages/weclome/github.svg diff --git a/src/frontend/src/resources/welcome/image/setting.svg b/src/frontend/src/resources/icon/pages/weclome/setting.svg similarity index 100% rename from src/frontend/src/resources/welcome/image/setting.svg rename to src/frontend/src/resources/icon/pages/weclome/setting.svg diff --git a/src/frontend/src/resources/icon/web.svg b/src/frontend/src/resources/icon/pages/weclome/web.svg similarity index 100% rename from src/frontend/src/resources/icon/web.svg rename to src/frontend/src/resources/icon/pages/weclome/web.svg diff --git a/src/frontend/src/resources/welcome/image/background.png b/src/frontend/src/resources/image/welcome/background.png similarity index 100% rename from src/frontend/src/resources/welcome/image/background.png rename to src/frontend/src/resources/image/welcome/background.png