优化页面结构*2

src/frontend/src/libs/script/configPage/configEffect.js

@@ -0,0 +1,73 @@
+const configEffect = {
+  async generateRealisticConfig({ command, devices = [] }) {
+    const timestamp = new Date().toLocaleString();
+    let config = `! 配置生成于 ${timestamp}\n`;
+    const cmd = command.toLowerCase();
+    // VLAN 配置
+    if (cmd.includes('vlan')) {
+      const vlanIdMatch = command.match(/vlan\s*(\d+)/i);
+      const vlanId = vlanIdMatch?.[1] || '10';
+      const isMgmt = cmd.includes('管理') || cmd.includes('mgmt');
+      config +=
+        `vlan ${vlanId}\n` +
+        `  name ${isMgmt ? 'MGMT' : 'USER'}_VLAN\n` +
+        `  exit\n` +
+        `interface Vlan${vlanId}\n` +
+        `  description ${isMgmt ? 'Management VLAN' : 'User VLAN'}\n` +
+        `  ip address 192.168.${vlanId}.1 255.255.255.0\n` +
+        `  exit\n`;
+    }
+    // SSH 配置
+    if (cmd.includes('ssh') || cmd.includes('安全') || cmd.includes('登录')) {
+      const password = Math.random().toString(36).slice(2, 10);
+      config +=
+        `ip ssh server\n` +
+        `ip ssh version 2\n` +
+        `username admin privilege 15 secret 0 ${password}\n` +
+        `line vty 0 4\n` +
+        `  transport input ssh\n` +
+        `  login local\n` +
+        `  exit\n`;
+    }
+    // 端口配置
+    if (cmd.includes('端口') || cmd.includes('接口') || cmd.includes('port')) {
+      const portMatch = command.match(/端口\s*(\d+)/i) || command.match(/port\s*(\d+)/i);
+      const port = portMatch?.[1] || '1';
+      const isTrunk = cmd.includes('trunk');
+      const isAccess = cmd.includes('access') || !isTrunk;
+      const desc = cmd.includes('上联') || cmd.includes('uplink') ? 'Uplink_Port' : 'Access_Port';
+      const vlanId = '10';
+      config +=
+        `interface GigabitEthernet0/${port}\n` +
+        `  description ${desc}\n` +
+        `  switchport mode ${isTrunk ? 'trunk' : 'access'}\n` +
+        `  ${isTrunk ? 'switchport trunk allowed vlan all' : `switchport access vlan ${vlanId}`}\n` +
+        `  no shutdown\n` +
+        `  exit\n`;
+    }
+    // ACL 配置
+    if (cmd.includes('acl') || cmd.includes('访问控制') || cmd.includes('防火墙')) {
+      let targetIP = '192.168.10.10';
+      if (devices.length > 0) {
+        const randomDevice = devices[Math.floor(Math.random() * devices.length)];
+        targetIP = randomDevice.ip;
+      }
+      config +=
+        `ip access-list extended PROTECT_SERVERS\n` +
+        `  permit tcp any host ${targetIP} eq 22\n` +
+        `  permit tcp any host ${targetIP} eq 80\n` +
+        `  deny ip any any\n` +
+        `  exit\n` +
+        `interface Vlan10\n` +
+        `  ip access-group PROTECT_SERVERS in\n` +
+        `  exit\n`;
+    }
+
+    if (config.trim() === `! 配置生成于 ${timestamp}`) {
+      config += '! 当前命令未识别到任何可配置项目\n';
+    }
+    return { config };
+  },
+};
+
+export default configEffect;

src/frontend/src/libs/script/scanPage/scanEffect.js

@@ -1,4 +1,4 @@
-const ScanEffect = {
+const scanEffect = {
   getTestDevices() {
     return [
       { ip: '192.168.1.1', mac: '00:1A:2B:3C:4D:5E', ports: [22, 23, 161] },
@@ -21,4 +21,4 @@ const ScanEffect = {
   },
 };
 
-export default ScanEffect;
+export default scanEffect;

src/frontend/src/pages/ConfigPage.jsx

@@ -20,6 +20,7 @@ import ConfigTool from '@/libs/config/ConfigTool';
 import { api } from '@/services/api/api';
 import Notification from '@/libs/system/Notification';
 import Common from '@/libs/common';
+import configEffect from '@/libs/script/configPage/configEffect';
 
 const testMode = ConfigTool.load().testMode;
 
@@ -44,76 +45,6 @@ const ConfigPage = () => {
     setDevices(config.devices || []);
   }, []);
 
-  const generateRealisticConfig = (command, devices = []) => {
-    const timestamp = new Date().toLocaleString();
-    let config = `! 配置生成于 ${timestamp}\n`;
-    const cmd = command.toLowerCase();
-    // VLAN 配置
-    if (cmd.includes('vlan')) {
-      const vlanIdMatch = command.match(/vlan\s*(\d+)/i);
-      const vlanId = vlanIdMatch?.[1] || '10';
-      const isMgmt = cmd.includes('管理') || cmd.includes('mgmt');
-      config +=
-        `vlan ${vlanId}\n` +
-        `  name ${isMgmt ? 'MGMT' : 'USER'}_VLAN\n` +
-        `  exit\n` +
-        `interface Vlan${vlanId}\n` +
-        `  description ${isMgmt ? 'Management VLAN' : 'User VLAN'}\n` +
-        `  ip address 192.168.${vlanId}.1 255.255.255.0\n` +
-        `  exit\n`;
-    }
-    // SSH 配置
-    if (cmd.includes('ssh') || cmd.includes('安全') || cmd.includes('登录')) {
-      const password = Math.random().toString(36).slice(2, 10);
-      config +=
-        `ip ssh server\n` +
-        `ip ssh version 2\n` +
-        `username admin privilege 15 secret 0 ${password}\n` +
-        `line vty 0 4\n` +
-        `  transport input ssh\n` +
-        `  login local\n` +
-        `  exit\n`;
-    }
-    // 端口配置
-    if (cmd.includes('端口') || cmd.includes('接口') || cmd.includes('port')) {
-      const portMatch = command.match(/端口\s*(\d+)/i) || command.match(/port\s*(\d+)/i);
-      const port = portMatch?.[1] || '1';
-      const isTrunk = cmd.includes('trunk');
-      const isAccess = cmd.includes('access') || !isTrunk;
-      const desc = cmd.includes('上联') || cmd.includes('uplink') ? 'Uplink_Port' : 'Access_Port';
-      const vlanId = '10';
-      config +=
-        `interface GigabitEthernet0/${port}\n` +
-        `  description ${desc}\n` +
-        `  switchport mode ${isTrunk ? 'trunk' : 'access'}\n` +
-        `  ${isTrunk ? 'switchport trunk allowed vlan all' : `switchport access vlan ${vlanId}`}\n` +
-        `  no shutdown\n` +
-        `  exit\n`;
-    }
-    // ACL 配置
-    if (cmd.includes('acl') || cmd.includes('访问控制') || cmd.includes('防火墙')) {
-      let targetIP = '192.168.10.10';
-      if (devices.length > 0) {
-        const randomDevice = devices[Math.floor(Math.random() * devices.length)];
-        targetIP = randomDevice.ip;
-      }
-      config +=
-        `ip access-list extended PROTECT_SERVERS\n` +
-        `  permit tcp any host ${targetIP} eq 22\n` +
-        `  permit tcp any host ${targetIP} eq 80\n` +
-        `  deny ip any any\n` +
-        `  exit\n` +
-        `interface Vlan10\n` +
-        `  ip access-group PROTECT_SERVERS in\n` +
-        `  exit\n`;
-    }
-
-    if (config.trim() === `! 配置生成于 ${timestamp}`) {
-      config += '! 当前命令未识别到任何可配置项目\n';
-    }
-    return { config };
-  };
-
   const handleParse = async () => {
     if (!selectedDevice || !inputText.trim()) {
       Notification.error({
@@ -127,7 +58,7 @@ const ConfigPage = () => {
       const performParse = async () => {
         if (testMode) {
           await Common.sleep(800 + Math.random() * 700);
-          return generateRealisticConfig(inputText);
+          return await configEffect.generateRealisticConfig(inputText);
         }
         return await api.parseCommand(inputText);
       };
@@ -136,7 +67,7 @@ const ConfigPage = () => {
         promise: performParse(),
         loading: {
           title: '正在解析配置',
-          description: '正在分析您的指令...',
+          description: '正在分析您的指令..',
         },
         success: {
           title: '解析完成',

src/frontend/src/pages/ScanPage.jsx

@@ -9,8 +9,8 @@ import {
   Spinner,
   Badge,
   HStack,
+  Table,
 } from '@chakra-ui/react';
-import { Table } from '@chakra-ui/react';
 import DocumentTitle from '@/components/system/pages/DocumentTitle';
 import PageContainer from '@/components/system/PageContainer';
 import DashboardBackground from '@/components/system/pages/DashboardBackground';
@@ -19,7 +19,7 @@ import { api } from '@/services/api/api';
 import ConfigTool from '@/libs/config/ConfigTool';
 import Common from '@/libs/common';
 import Notification from '@/libs/system/Notification';
-import ScanEffect from '@/libs/script/scanPage/scanEffect';
+import scanEffect from '@/libs/script/scanPage/scanEffect';
 
 /**
  * 网络扫描页面
@@ -36,11 +36,13 @@ const ScanPage = () => {
   const testMode = config.testMode;
 
   useEffect(() => {
-    ScanEffect.fetchLocalInfo({
+    scanEffect
-      setLocalIp: setLocalIp,
+      .fetchLocalInfo({
-      setSubnet: setSubnet,
+        setLocalIp: setLocalIp,
-      subnet: subnet,
+        setSubnet: setSubnet,
-    }).then();
+        subnet: subnet,
+      })
+      .then();
   }, [subnet, Notification]);
 
   const handleScan = async () => {
@@ -49,7 +51,7 @@ const ScanPage = () => {
       let scanDevices;
       if (testMode) {
         await Common.sleep(2000);
-        scanDevices = ScanEffect.getTestDevices();
+        scanDevices = scanEffect.getTestDevices();
         Notification.success({
           title: '扫描子网设备成功！',
         });
@@ -89,7 +91,7 @@ const ScanPage = () => {
       let scanDevices;
       if (testMode) {
         await Common.sleep(500);
-        scanDevices = ScanEffect.getTestDevices();
+        scanDevices = scanEffect.getTestDevices();
         Notification.success({
           title: '获取上一次扫描记录成功！',
         });
@@ -158,7 +160,7 @@ const ScanPage = () => {
               {loading && (
                 <HStack>
                   <Spinner />
-                  <Text>{'正在加载，请稍候...'}</Text>
+                  <Text>{'正在加载，请稍候..'}</Text>
                 </HStack>
               )}
 
@@ -210,7 +212,7 @@ const ScanPage = () => {
               )}
 
               {!loading && devices.length === 0 && (
-                <Text color={'gray.400'}>{'暂无扫描结果，请执行扫描。'}</Text>
+                <Text color={'gray.400'}>{'暂无扫描结果，请执行扫描..'}</Text>
               )}
             </Box>
           </VStack>