From 65d92a8777d994b242d85bf67b6b0ca0ce034a7e Mon Sep 17 00:00:00 2001
From: Jerry <JerryTech.Y@outlook.com>
Date: Fri, 18 Jul 2025 18:28:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8Dapi=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/pages/ScanPage.jsx  | 104 ++++++++++++++++++++++-----
 src/frontend/src/services/api/api.js |   6 ++
 2 files changed, 91 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/pages/ScanPage.jsx b/src/frontend/src/pages/ScanPage.jsx
index 7cc456d..0f78d56 100644
--- a/src/frontend/src/pages/ScanPage.jsx
+++ b/src/frontend/src/pages/ScanPage.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   VStack,
@@ -7,9 +7,13 @@ import {
   Button,
   Text,
   Spinner,
+  Table,
   Badge,
   HStack,
-  Table,
+  Select,
+  Field,
+  Portal,
+  createListCollection,
 } from '@chakra-ui/react';
 import DocumentTitle from '@/components/system/pages/DocumentTitle';
 import PageContainer from '@/components/system/PageContainer';
@@ -28,22 +32,28 @@ import scanEffect from '@/libs/script/scanPage/scanEffect';
  */
 const ScanPage = () => {
   const [subnet, setSubnet] = useState('');
-  const [devices, setDevices] = useState([]);
+  const [networkAdapters, setNetworkAdapters] = useState(createListCollection({ items: [] }));
+  const [scannedDevices, setScannedDevices] = useState([]);
   const [loading, setLoading] = useState(false);
   const [localIp, setLocalIp] = useState('');
+  const [selectedNetwork, setSelectedNetwork] = useState('');
+  const [inputMode, setInputMode] = useState(false);
 
   const config = ConfigTool.load();
   const testMode = config.testMode;
 
   useEffect(() => {
-    scanEffect
-      .fetchLocalInfo({
-        setLocalIp: setLocalIp,
-        setSubnet: setSubnet,
-        subnet: subnet,
-      })
-      .then();
-  }, [subnet, Notification]);
+    api.getNetworkAdapters().then((response) => {
+      const { networks } = response.data;
+      const networkCollection = createListCollection({
+        items: networks.map((network) => ({
+          label: `${network.adapter} (${network.network})`,
+          value: network.network,
+        })),
+      });
+      setNetworkAdapters(networkCollection);
+    });
+  }, []);
 
   const handleScan = async () => {
     setLoading(true);
@@ -57,17 +67,18 @@ const ScanPage = () => {
         });
       } else {
         const res = await api.scan(subnet);
-        scanDevices = res.devices || [];
+        console.log(`res:${JSON.stringify(res)}`);
+        scanDevices = res.data.devices || [];
         Notification.success({
           title: '扫描子网设备成功！',
         });
       }
-
+      console.log(`device:${JSON.stringify(scanDevices)}`);
       scanDevices = scanDevices.map((d, idx) => ({
         ...d,
         name: `交换机 ${idx + 1}`,
       }));
-      setDevices(scanDevices);
+      setScannedDevices(scanDevices);
       const updatedStats = {
         totalDevices: scanDevices.length,
         onlineDevices: scanDevices.length,
@@ -97,15 +108,20 @@ const ScanPage = () => {
         });
       } else {
         const res = await api.listDevices();
-        scanDevices = res.devices || [];
+        scanDevices = res.data.devices || [];
       }
-      setDevices(scanDevices);
+      setScannedDevices(scanDevices);
     } catch (err) {
       Notification.error({ title: '获取上次扫描记录失败' });
     }
     setLoading(false);
   };
 
+  const handleNetworkChange = ({ value }) => {
+    setSelectedNetwork(value[0] ?? '');
+    setSubnet(value[0] ?? '');
+  };
+
   return (
     <DocumentTitle title={'网络扫描'}>
       <DashboardBackground />
@@ -132,6 +148,53 @@ const ScanPage = () => {
               </HStack>
 
               <HStack mb={4} spacing={4}>
+                <Field.Root>
+                  <Field.Label fontWeight={'bold'} mb={1} fontSize="sm">
+                    {'选择网段'}
+                  </Field.Label>
+                  <Select.Root
+                    collection={networkAdapters}
+                    value={selectedNetwork ? [selectedNetwork] : []}
+                    onValueChange={handleNetworkChange}
+                    placeholder={'请选择网段'}
+                    size={'sm'}
+                    colorPalette={'teal'}
+                  >
+                    <Select.HiddenSelect />
+                    <Select.Control>
+                      <Select.Trigger>
+                        <Select.ValueText />
+                      </Select.Trigger>
+                      <Select.IndicatorGroup>
+                        <Select.Indicator />
+                        <Select.ClearTrigger />
+                      </Select.IndicatorGroup>
+                    </Select.Control>
+                    <Portal>
+                      <Select.Positioner>
+                        <Select.Content>
+                          {networkAdapters.items.map((item, index) => (
+                            <Select.Item key={`${item.value}-${index}`} item={item}>
+                              {' '}
+                              {item.label}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Positioner>
+                    </Portal>
+                  </Select.Root>
+                </Field.Root>
+
+                <Button
+                  onClick={() => setInputMode(!inputMode)}
+                  colorPalette={'blue'}
+                  variant={'outline'}
+                >
+                  {inputMode ? '切换为选择模式' : '切换为输入模式'}
+                </Button>
+              </HStack>
+
+              {inputMode ? (
                 <Input
                   placeholder={'输入子网 (如 192.168.1.0/24)'}
                   value={subnet}
@@ -139,6 +202,9 @@ const ScanPage = () => {
                   width={'300px'}
                   bg={'whiteAlpha.200'}
                 />
+              ) : null}
+
+              <HStack mb={4} spacing={4}>
                 <Button
                   onClick={handleScan}
                   isLoading={loading}
@@ -164,7 +230,7 @@ const ScanPage = () => {
                 </HStack>
               )}
 
-              {!loading && devices.length > 0 && (
+              {!loading && scannedDevices.length > 0 && (
                 <FadeInWrapper delay={0.2} yOffset={-5}>
                   <Table.Root
                     variant={'outline'}
@@ -193,7 +259,7 @@ const ScanPage = () => {
                       </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                      {devices.map((d) => (
+                      {scannedDevices.map((d) => (
                         <Table.Row
                           key={d.ip}
                           _hover={{
@@ -211,7 +277,7 @@ const ScanPage = () => {
                 </FadeInWrapper>
               )}
 
-              {!loading && devices.length === 0 && (
+              {!loading && scannedDevices.length === 0 && (
                 <Text color={'gray.400'}>{'暂无扫描结果，请执行扫描..'}</Text>
               )}
             </Box>
diff --git a/src/frontend/src/services/api/api.js b/src/frontend/src/services/api/api.js
index 1629bbe..3a8d3c1 100644
--- a/src/frontend/src/services/api/api.js
+++ b/src/frontend/src/services/api/api.js
@@ -52,6 +52,12 @@ export const api = {
   applyConfig: (switch_ip, commands) =>
     axios.post(buildUrl('/api/execute_cli_commands'), { switch_ip: switch_ip, commands: commands }),
 
+  /**
+   * 获取网络适配器信息
+   * @returns {Promise<axios.AxiosResponse<any>>}
+   */
+  getNetworkAdapters: () => axios.get(buildUrl('/api/network_adapters')),
+
   /**
    * 更新基础URL
    * @param url