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